/* ============================================================
   alecca — catalogue site
   Tokens, layout, components, responsive, motion.
   ============================================================ */

/* Variable fonts: one file per family, declared with a weight RANGE.
   Google serves the same variable binary for every weight in the range, so
   separate per-weight files would be byte-identical and fetched twice. */
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken.woff2') format('woff2');font-weight:200 300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --amber: #F1BE06;
  --amber-mark: #FDBC1B;
  --ink: #111111;
  --paper: #FFFFFF;
  --mist: #F5F4F2;
  --rule: #E2E0DC;
  --grey: #6B6862;

  --display: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 40px;
  --s5: 64px; --s6: 96px;
  --section-y: clamp(6rem, 12vh, 10rem);
  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-weight:400; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
/* Dark surfaces need a light ring — an ink-coloured outline is invisible
   on the near-black footer and over a dark hero photo. */
.s2-footer :focus-visible,
.s2-header--over :focus-visible,
.s2-hero :focus-visible{outline-color:var(--paper)}

.s2-wrap{max-width:1400px; margin:0 auto; padding:0 var(--gutter)}
.s2-section{padding:var(--section-y) 0}
.s2-section--mist{background:var(--mist)}

/* ---------- type ---------- */
.s2-display{
  font-family:var(--display); font-weight:200; letter-spacing:.01em;
  line-height:1.02; margin:0;
  font-size:clamp(2.5rem, 7vw, 6.5rem);
}
.s2-display--md{font-size:clamp(2rem, 4.5vw, 3.75rem)}
.s2-display--sm{font-family:var(--display); font-weight:300; letter-spacing:.01em;
  font-size:clamp(1.5rem, 2.4vw, 2.25rem); line-height:1.1; margin:0}
.s2-eyebrow{
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey); margin:0 0 var(--s3);
}
.s2-lede{font-size:clamp(1rem,1.35vw,1.25rem); max-width:62ch; color:var(--ink)}
.s2-meta{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey)}
.s2-price{font-family:var(--body); font-weight:400; font-size:1rem}
.s2-rule{height:1px; background:var(--rule); border:0; margin:0}
.s2-rule--amber{height:2px; background:var(--amber); border:0; width:48px; margin:0}

/* ---------- header ---------- */
.s2-header{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.s2-header__inner{
  width:100%; max-width:1400px; margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; gap:var(--s4);
}
.s2-header__mark{height:22px; width:auto}
.s2-header--over{background:transparent}
.s2-header--over .s2-nav a,
.s2-header--over .s2-menu-toggle{color:var(--paper)}
.s2-header.is-solid{background:var(--paper); border-bottom-color:var(--rule)}
.s2-header.is-solid .s2-nav a,
.s2-header.is-solid .s2-menu-toggle{color:var(--ink)}

.s2-nav{margin-left:auto; display:flex; gap:var(--s4); align-items:center}
.s2-nav a{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.s2-nav a:hover,.s2-nav a[aria-current="page"]{border-bottom-color:var(--amber)}

.s2-btn-wa{
  background:var(--amber); color:var(--ink);
  font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 22px; display:inline-block; border:1px solid var(--amber);
  transition:background .25s ease;
}
.s2-btn-wa:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.s2-btn-text{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:3px; display:inline-block;
}

.s2-menu-toggle{display:none; font-size:13px; letter-spacing:.1em; text-transform:uppercase}
.s2-overlay-menu{
  position:fixed; inset:0; z-index:70; background:var(--paper);
  display:none; flex-direction:column; justify-content:center;
  padding:var(--gutter);
}
.s2-overlay-menu.is-open{display:flex}
.s2-overlay-menu a{
  font-family:var(--display); font-weight:200; font-size:2.5rem;
  padding:var(--s2) 0; border-bottom:1px solid var(--rule);
}
.s2-overlay-menu__close{position:absolute; top:26px; right:var(--gutter);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase}

/* ---------- hero ---------- */
.s2-hero{position:relative; min-height:85vh; display:flex; align-items:flex-end;
  color:var(--paper); overflow:hidden; background:var(--ink)}
.s2-hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.s2-hero__scrim{position:absolute; inset:0;
  background:rgba(0,0,0,.34)}
.s2-hero__body{position:relative; z-index:2; padding-bottom:clamp(48px,8vh,110px)}
.s2-hero__body .s2-eyebrow{color:rgba(255,255,255,.82)}

/* ---------- product grid ---------- */
.s2-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5) var(--s4)}
.s2-card{display:block}
.s2-card__frame{overflow:hidden; background:var(--mist); aspect-ratio:4/3}
.s2-card__frame img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.s2-card:hover .s2-card__frame img{transform:scale(1.03)}
.s2-card__name{font-family:var(--display); font-weight:300; font-size:1.5rem;
  margin:var(--s3) 0 6px}
.s2-card__row{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2)}

/* ---------- filters ---------- */
.s2-filters{display:flex; flex-wrap:wrap; gap:var(--s4);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:var(--s3) 0; margin-bottom:var(--s5)}
.s2-filters__group{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.s2-filters__label{font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); margin-right:4px}
.s2-chip{font-size:13px; padding-bottom:3px; border-bottom:1px solid transparent}
.s2-chip[aria-pressed="true"]{border-bottom-color:var(--amber)}
.s2-empty{padding:var(--s6) 0; text-align:center; color:var(--grey)}

/* ---------- detail ---------- */
.s2-detail{display:grid; grid-template-columns:1.35fr 1fr; gap:var(--s6)}
.s2-spec{background:var(--mist); padding:var(--s4)}
.s2-spec dl{margin:0}
.s2-spec dt{font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); margin-top:var(--s3)}
.s2-spec dt:first-child{margin-top:0}
.s2-spec dd{margin:6px 0 0}
.s2-swatches{display:flex; gap:var(--s3); margin:10px 0 0; padding:0; list-style:none}
.s2-swatch{text-align:center; font-size:12px; color:var(--grey)}
.s2-swatch span{display:block; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--rule); margin:0 auto 6px}
.s2-dims{background:var(--mist); padding:var(--s4)}
.s2-fabric-note{font-size:12px; color:var(--grey); font-style:italic}
.s2-pager{display:flex; justify-content:space-between; gap:var(--s3);
  border-top:1px solid var(--rule); padding-top:var(--s3)}

/* ---------- numbered benefit blocks ---------- */
.s2-benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5) var(--s4)}
.s2-benefit__num{font-family:var(--display); font-weight:200; font-size:2.5rem;
  line-height:1; color:var(--ink)}
.s2-benefit h3{font-family:var(--display); font-weight:300; font-size:1.25rem;
  margin:var(--s2) 0 var(--s1)}
.s2-benefit p{margin:0; color:var(--grey)}

/* ---------- steps ---------- */
.s2-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.s2-step{border-top:2px solid var(--amber); padding-top:var(--s3)}

/* ---------- split ---------- */
.s2-split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center}

/* ---------- footer ---------- */
.s2-footer{background:var(--ink); color:var(--paper); padding:var(--s6) 0 var(--s4)}
.s2-footer a{color:rgba(255,255,255,.72)}
.s2-footer a:hover{color:var(--paper)}
.s2-footer__cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5)}
.s2-footer__list{list-style:none; margin:0; padding:0; columns:2; font-size:14px}
.s2-footer__list li{margin-bottom:8px}
.s2-footer__bottom{border-top:1px solid rgba(255,255,255,.18);
  margin-top:var(--s5); padding-top:var(--s3); font-size:12px; color:rgba(255,255,255,.55)}
.s2-footer__mark{height:20px; width:auto}

/* ---------- LEVITA collection ---------- */
/* Re-scoping these two tokens re-skins every component that consumes them —
   cards, section bands, spec panels, rules, buttons, active states — with no
   duplicated component CSS. Applied to <main>, never <body>, so the header and
   footer keep the amber brand chrome (the wordmark is a fixed amber raster).
   #26523B on white is 8.9:1 and on #F1E7DA is 7.6:1, so unlike amber it is
   safe for body-level links. */
.s2-levita{--amber:#26523B; --mist:#F1E7DA}

/* The token scope re-binds --amber to green, and .s2-btn-wa uses --amber as a
   BACKGROUND with --ink text — which measures 2.12:1 on green. Force white
   text inside the scope: #FFFFFF on #26523B is 8.93:1. */
.s2-levita .s2-btn-wa{color:var(--paper)}

/* Cutouts are extracted onto the catalogue cream, so the frame matches. */
.s2-levita .s2-card__frame{background:var(--mist); aspect-ratio:4/3}
.s2-levita .s2-card__frame img{object-fit:contain; padding:8%}

/* Feature callouts: small illustration beside a title and a line of text. */
.s2-features{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4)}
.s2-feature{display:flex; gap:var(--s3); align-items:flex-start}
.s2-feature img{width:88px; height:auto; flex:0 0 88px; background:var(--mist)}
.s2-feature h3{font-family:var(--display); font-weight:300; font-size:1.05rem; margin:0 0 6px}
.s2-feature p{margin:0; font-size:14px; color:var(--grey)}

/* Collections landing: two large stacked entries. */
.s2-collection-card{display:block; position:relative; overflow:hidden}
.s2-collection-card img{width:100%; height:clamp(320px,52vh,560px); object-fit:cover; object-position:center 55%}
.s2-collection-card__body{padding:var(--s4) 0 var(--s5)}
.s2-collection-card__body .s2-meta{margin-top:8px}

@media (max-width:900px){
  .s2-features{grid-template-columns:1fr}
}

/* ---------- motion ---------- */
.s2-reveal{opacity:0; transform:translateY(12px);
  transition:opacity .4s ease, transform .4s ease}
.s2-reveal.is-in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .s2-grid,.s2-benefits{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .s2-nav{display:none}
  .s2-menu-toggle{display:block; margin-left:auto}
  .s2-header .s2-btn-wa{padding:10px 14px}
  .s2-detail,.s2-split{grid-template-columns:1fr; gap:var(--s4)}
  .s2-detail > .s2-spec{order:-1}
  .s2-steps{grid-template-columns:1fr}
  .s2-footer__cols{grid-template-columns:1fr; gap:var(--s4)}
}
@media (max-width:640px){
  .s2-grid,.s2-benefits{grid-template-columns:1fr}
  .s2-hero{min-height:70vh}
  .s2-filters{flex-wrap:nowrap; overflow-x:auto; gap:var(--s3);
    -webkit-overflow-scrolling:touch}
  .s2-filters__group{flex-wrap:nowrap}
  .s2-footer__list{columns:1}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .s2-reveal{opacity:1; transform:none}
  .s2-card:hover .s2-card__frame img{transform:none}
}

/* ---------- outlet list ---------- */
.s2-outlets{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5) var(--s4)}
.s2-outlet{border-top:1px solid var(--rule); padding-top:var(--s3)}
.s2-outlet__name{font-family:var(--display); font-weight:300; font-size:1.25rem; margin:0 0 4px}
.s2-outlet__note{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin:0 0 10px}
.s2-outlet__addr{font-size:14px; color:var(--grey); margin:0 0 12px}
.s2-outlet__hq{display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:2px solid var(--amber); padding-bottom:2px; margin:0 0 10px}
.s2-state{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
  border-bottom:1px solid var(--rule); padding-bottom:var(--s1); margin:var(--s5) 0 var(--s3)}
.s2-state:first-of-type{margin-top:var(--s3)}

@media (max-width:1200px){ .s2-outlets{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){  .s2-outlets{grid-template-columns:1fr} }