/* ==================================================================
   VELOURA - example site 3, catalog / storefront blueprint.
   Palette and type are BRAND-KIT.md. Layout decisions are DESIGN.md.
================================================================== */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* dark ground - heroes, section backgrounds, footer */
  --ink:#17110E; --ink-2:#2A1F1A; --ink-3:#3D2E26;
  /* light ground - product areas */
  --cream:#F4EDE5; --sand:#E5D5C3; --shell:#EFE3D6;
  /* accents */
  --clay:#C08A6E; --amber:#D9A05B; --blush:#E8C4BC;
  --clay-deep:#7E513B;   /* clay darkened for thin display type on cream - 5.8:1 vs clay's 2.6:1 */
  /* text */
  --on-dark:#F6F1EA; --on-light:#1C1614; --on-light-soft:#6B605A;
  --line:rgba(28,22,20,.14); --line-dark:rgba(246,241,234,.16);

  --display:'Italiana',Georgia,serif;   /* option B, owner wd-s26. A (Bodoni Moda) and F (Jost only) kept in _lab/type-options.html */
  --body:'Jost',system-ui,sans-serif;
  --pad:clamp(20px,5vw,64px);
}

html{background:var(--ink);scroll-behavior:smooth}
body{background:var(--ink);color:var(--on-dark);font-family:var(--body);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* display face is display only - these faces go muddy under ~20px (BRAND-KIT) */
.hero-h1,.deck-h2,.wordmark{font-family:var(--display);font-weight:400}

.kicker{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--on-dark);opacity:.82}
.kicker-dark{color:var(--on-light);opacity:.6}

/* ---------------- NAV ----------------
   Transparent over the hero, solid once past it - the Gucci behaviour. */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);
  transition:background .3s ease,border-color .3s ease,padding .3s ease}
.nav.is-solid{background:rgba(23,17,14,.92);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark);padding:14px var(--pad)}

.wordmark{font-size:22px;letter-spacing:.28em}   /* spacing is what makes it a mark */
.nav-links{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:400;letter-spacing:.08em}
.nav-links a{opacity:.8;padding:6px 0}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{opacity:1}}
.nav-creators{color:var(--amber);opacity:1}

/* >> BOTH ARE PHONE-ONLY AND THIS IS WHAT KEEPS THEM OFF THE LAPTOP. `display:none` here
   means neither is a flex item in the desktop bar at all, so the desktop nav is untouched
   rather than overridden. Everything about them lives in the max-width:700px block. */
.burger,.nav-panel{display:none}

/* ---------------- HERO ---------------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;
  display:flex;align-items:flex-end}
.hero picture{display:contents}   /* the <picture> is a source-picker, never a box */
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* the image is dark bottom-left already; this only guarantees it */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(23,17,14,.72) 0%,rgba(23,17,14,.25) 42%,transparent 70%)}
.hero-copy{position:relative;z-index:2;padding:0 var(--pad) clamp(48px,9vh,110px);max-width:640px}

/* text on a photograph - the 7 Star treatment: colour, weight, shadow together */
.hero .kicker{text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}
.hero-h1{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.02;margin:18px 0 16px;
  text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.6)}
.hero-sub{font-size:clamp(1rem,1.5vw,1.15rem);font-weight:400;max-width:34ch;opacity:.94;
  text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}
.hero-cta{display:flex;align-items:center;gap:26px;margin-top:30px;flex-wrap:wrap}

/* the house button, solid fill - a transparent primary loses the click signal */
.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--clay);color:#1C1614;font-weight:500;font-size:14px;letter-spacing:.06em;
  padding:14px 30px;border-radius:2px;
  box-shadow:0 8px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.26),
             inset 0 -2px 0 rgba(0,0,0,.18);
  transition:transform .15s,box-shadow .15s}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.18)}
}
.quiet{font-size:.95rem;font-weight:500;opacity:.72;
  text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}
@media (hover:hover) and (pointer:fine){.quiet:hover{opacity:1;text-decoration:underline}}
.quiet:active{opacity:1;text-decoration:underline}

/* ---------------- CATEGORY DECK ----------------
   Ported from GCH's beer deck. Track height is set in JS; the stage pins. */
.deck{background:var(--cream);color:var(--on-light)}
.deck-track{position:relative}
.deck-stage{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center}

.deck-head{position:absolute;top:clamp(88px,13vh,140px);left:0;right:0;text-align:center;
  padding:0 var(--pad);z-index:2}
.deck-h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;margin-top:12px;color:var(--on-light)}

/* >> HEIGHT IS THE CONSTRAINED DIMENSION, SO IT IS SET FIRST AND THE WIDTH FOLLOWS.
   Sizing from width alone let the card grow taller than the space under the heading and
   the two collided (owner, wd-s26). Cards also sit at 56%, not 50% - the stage is not
   empty, it has a heading in its top third. */
.deck-rail{position:absolute;inset:0;--ch:min(56svh,470px);--cw:calc(var(--ch) / 1.25)}
.deck-item{position:absolute;left:50%;top:56%;width:var(--cw);height:var(--ch);
  margin-top:calc(var(--ch) / -2);
  will-change:transform,filter,opacity}

.frame{display:block;width:100%;height:calc(100% - 58px);overflow:hidden;background:var(--sand);
  border-radius:2px;box-shadow:0 18px 44px rgba(28,22,20,.22),0 4px 12px rgba(28,22,20,.14)}
.shot{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}

.deck-label{display:block;padding-top:14px;font-size:15px;font-weight:500;letter-spacing:.06em;
  color:var(--on-light)}
.deck-label em{display:block;font-style:normal;font-size:12px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-light-soft);margin-top:4px}

/* >> HOVER IS SCOPED TO THE CENTRE CARD ONLY. The others are blurred and pushed back,
   so a hover target on them is a target nobody can see they are hitting. */
@media (hover:hover) and (pointer:fine){
  .deck-item.is-live:hover .shot{transform:scale(1.09)}
}

.deck-count{position:absolute;bottom:clamp(28px,5vh,56px);left:0;right:0;text-align:center;
  font-size:12px;letter-spacing:.18em;color:var(--on-light-soft);z-index:2}

/* one card, or reduced motion - the deck stops being a deck */
.deck.is-static .deck-stage{position:static;height:auto;padding:120px 0 80px}
.deck.is-static .deck-rail{position:static;display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.deck.is-static .deck-item{position:static;margin:0;transform:none!important;filter:none!important;opacity:1!important}

@media (max-width:700px){
  .deck-rail{--ch:min(52svh,420px)}
  .nav-links{gap:18px;font-size:12px}
  .nav-links a:not(.nav-creators){display:none}   /* they move into the panel below */

  /* ---- THE PHONE BAR: Creators, then the burger hard right (wd-s29) ----
     Mechanics copied from GCH's rail burger - same markup, same aria, same X transform, same
     JS. Only the skin differs: GCH's bar is wood, so its button needs glass chrome to read;
     this bar is transparent over a dark photograph, so the lines ARE the button.
     >> THE LINES ARE CREAM, NOT AMBER. Creators stays the only amber thing in the bar. */
  .burger{display:grid;place-items:center;align-content:center;gap:4px;
    width:40px;height:40px;padding:0;background:none;border:0;cursor:pointer;
    /* the tap target stays 40px while the MARK sits on var(--pad) - the box overhangs,
       the lines do not, so the burger optically lines up with the wordmark's left edge */
    margin-right:-11px}
  .burger span{display:block;width:18px;height:1.5px;background:var(--on-dark);border-radius:2px;
    transition:transform .2s ease,opacity .2s ease}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  /* ---- THE PANEL - drops out of the bar, not a full-screen overlay ----
     Six short links do not need a whole screen, and this reuses the bar's own solid
     surface rather than inventing a second one. */
  .nav-panel{position:absolute;top:100%;left:0;right:0;
    flex-direction:column;padding:4px var(--pad) 18px;
    background:rgba(23,17,14,.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-dark)}
  .nav.is-open .nav-panel{display:flex}
  .nav-panel a{font-size:15px;letter-spacing:.08em;opacity:.86;padding:12px 0;
    border-bottom:1px solid var(--line-dark)}
  .nav-panel a:last-child{border-bottom:0}
  /* the bar goes solid with the panel, or a transparent strip sits above an opaque one.
     No border here - the panel's own bottom edge is the one that shows. */
  .nav.is-open{background:rgba(23,17,14,.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

  /* ---- HERO: the phone frame needs a slide, and it is not a taste call ----
     The mobile file is 1920x1456, so the visible window is about 800 source px. The jar sits
     at source x 793-1373. A CENTRED window is 560-1360 and still clips its right edge by
     13px, so object-position has to move regardless. 58% puts the window at 650-1450 - the
     whole jar, right of centre, with ~143px of ground to its left and ~77px to its right. */
  .hero-img{object-position:58% center}
}

/* ---------------- NEW - the sticky stack ----------------
   Ported from the studio's stats page: each card is `position:sticky`, so they pile up
   instead of scrolling past. No JS for the stacking - only the tail below the list. */
/* >> THE HEAD PINS WHERE THE #new ANCHOR LANDS IT, NOT UNDER THE NAV.
   The section's top padding moved INSIDE the head, so the same value does two jobs: it is the
   gap above the title on arrival, and it is the clearance under the fixed nav once pinned.
   Splitting them would make the pinned position differ from the landing position, which is
   the whole complaint. The band is opaque and full-bleed (box-shadow + clip-path) so cards
   pass behind it instead of showing through. */
.stack{--head-pad:clamp(80px,12vh,140px);
  --head-h:clamp(158px,calc(12vh + 98px),252px);
  background:var(--ink);color:var(--on-dark);padding:0 var(--pad) 0}
.stack-head{position:sticky;top:0;z-index:6;max-width:1000px;margin:0 auto;
  padding-top:var(--head-pad);padding-bottom:clamp(16px,2.4vh,26px);
  background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
.stack-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.08;margin-top:12px}
.stack-list{list-style:none;max-width:1000px;margin:clamp(40px,7vh,72px) auto 0}

.scard{position:sticky;top:calc(var(--head-h) + 14px);margin-bottom:26px;
  display:grid;grid-template-columns:minmax(0,42%) 1fr;gap:clamp(20px,4vw,44px);align-items:center;
  padding:clamp(18px,2.4vw,28px);border-radius:16px;
  /* the house frosted panel - fill, blur, border, and the lit/shaded inset pair */
  background:linear-gradient(180deg,rgba(61,46,38,.72),rgba(23,17,14,.88));
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid var(--line-dark);
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.32)}
.scard-img{display:block;overflow:hidden;border-radius:10px;background:var(--ink-2);aspect-ratio:4/5}
.scard-img img{width:100%;height:100%;object-fit:cover}
.scard-tag{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--amber)}
.scard-name{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.1;margin:10px 0 12px}
.scard-say{font-size:1rem;font-weight:400;opacity:.86;max-width:38ch;line-height:1.55}
.scard-price{font-size:1rem;font-weight:500;margin-top:16px;letter-spacing:.04em}

@media (max-width:700px){
  .scard{grid-template-columns:1fr;gap:16px}
  .scard-img{aspect-ratio:16/10}

  /* >> RESERVE THREE LINES HERE, AND IT IS THE PHONE FIX FOR THE LAST CARD'S PIN (wd-s30).
     >> THE STACK'S TAIL ONLY WORKS IF EVERY CARD IS THE SAME HEIGHT. Its whole derivation in
     `main.js` block 3 says so - "every height term cancels" - and that is true right up until
     one card is taller than its neighbours. A sticky card is released when the list's bottom
     rises past `top + ITS OWN height`, so a TALLER card is released EARLIER: it slides out
     from behind the stack while the others are still pinned, and the last card's hold no
     longer ends where the arithmetic says it does.
     >> MEASURED, AND IT IS EXACTLY THE LAPTOP-VERSUS-PHONE SPLIT THE OWNER REPORTED. At 390
     and 414 the cards are 425.8 / 401.0 / 401.0 - a 24.8px spread. At 768, 1024 and 1440 all
     three are identical, which is why nothing was ever wrong on a laptop.
     >> THE 24.8px IS ONE LINE OF `.scard-say`. Card 1's description wraps to THREE lines on a
     phone (74.4px) where cards 2 and 3 take two (49.6px); on a laptop all three take two.
     So reserving three lines on every card makes them equal again and the tail is correct.
     >> RESERVE, DO NOT CLAMP. `-webkit-line-clamp:2` would also equalise them and would do it
     by cutting a word off the end of card 1 - a copy change made by a stylesheet.
     >> 3 IS THE NUMBER TODAY BECAUSE THE LONGEST DESCRIPTION TAKES 3 LINES AT 390px. If a
     description is ever rewritten longer, this number goes up with it - check the three cards
     are still equal after any copy edit here. */
  .scard-say{min-height:calc(3 * 1.55em)}

  /* >> TAKE vh OUT OF THE HEAD ON A PHONE, OR THE CARDS PIN ON A MOVING LINE (wd-s30, owner).
     >> THE CARDS' STICKY LINE IS `--head-h + 14px`, AND `--head-h` WAS BUILT FROM 12vh. On a
     phone the address bar hides as you scroll, the viewport gets TALLER, and every vh term
     grows with it - so the line the cards pin to moves DOWN mid-scroll. Card 1 pins at one
     height and card 3 pins at another, which is exactly the misalignment reported.
     >> MEASURED: sticky line 213.28px at an 844px viewport, 205.60 at 780, 200.80 at 740,
     196.00 at 700, 191.20 at 660 - about 22px of travel across the range a phone's address
     bar covers. A laptop has no address bar, so the line never moves there, and that is the
     whole reason this only ever showed on a phone.
     >> ALL THREE vh TERMS THAT FEED THE HEAD ARE PINNED, NOT JUST `--head-h`. The head's own
     padding is 12vh and its bottom padding is 2.4vh, so fixing the sticky line alone would
     leave the head still growing and shrinking underneath it - the cards would sit at a
     constant line while the thing they tuck under changed height.
     >> THE NUMBERS ARE THE 844px VALUES ROUNDED, so a phone at rest looks as it did: 12vh was
     101.3 (now 100), 2.4vh was 20.3 (now 20), and the head measured 182.3px tall (now 181).
     `--head-h` must stay equal to the head's real height or the 14px gap under it is wrong. */
  .stack{--head-pad:100px; --head-h:181px}
  .stack-head{padding-bottom:20px}
}

/* ---------------- BEST SELLERS - the deck on the dark ground ---------------- */
.deck-dark{background:var(--ink);color:var(--on-dark)}
.deck-dark .deck-h2,.deck-dark .deck-label{color:var(--on-dark)}
.deck-dark .kicker{color:var(--on-dark);opacity:.82}
.deck-dark .deck-label em,.deck-dark .deck-count{color:var(--on-dark);opacity:.6}
.deck-dark .frame{background:var(--ink-2);
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.35)}

/* the loop plays only in the centre slot - see main.js. Until a clip exists the poster
   is what shows, which is exactly what a still card should look like anyway. */
.loop{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){
  .deck-item.is-live:hover .loop{transform:scale(1.06)}
}

/* ---------------- STAR RATING ----------------
   Two layers of the same star, the top one clipped to --pct. Drawn as a repeating SVG
   background rather than five elements, so a card's rating is one inline value and the
   markup stays one line.
   >> SVG, NOT A STAR CHARACTER. The glyph is non-ASCII, and the house rule allows one in
   a utf-8 page but not in a file we generate - and a character would also be at the mercy
   of whatever font is loaded. */
.deck-label em{display:flex;align-items:center;gap:8px}
.deck-label em b{font-weight:500;color:var(--on-light)}
.deck-dark .deck-label em b{color:var(--on-dark)}
.deck-label em i{font-style:normal;opacity:.7}

.stars{display:inline-block;width:62px;height:11px;position:relative;flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23BDB2A6' d='M8 .6l2.2 4.6 5 .7-3.6 3.5.9 5L8 12l-4.5 2.4.9-5L.8 5.9l5-.7z'/%3E%3C/svg%3E");
  background-size:12.4px 11px;background-repeat:repeat-x}
.stars::before{content:"";position:absolute;top:0;left:0;bottom:0;width:var(--pct,0%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23D9A05B' d='M8 .6l2.2 4.6 5 .7-3.6 3.5.9 5L8 12l-4.5 2.4.9-5L.8 5.9l5-.7z'/%3E%3C/svg%3E");
  background-size:12.4px 11px;background-repeat:repeat-x}

/* ---------------- TRENDING - the static row ----------------
   Light ground, because products go on light (DESIGN.md Decision 2) - and because New and
   Best Sellers are both dark, so without this the page runs three dark sections together. */
.trend{background:var(--cream);color:var(--on-light);
  padding:clamp(80px,12vh,140px) var(--pad) clamp(88px,13vh,150px)}
.trend-head{max-width:1200px;margin:0 auto clamp(36px,6vh,64px)}
.trend-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.08;margin-top:12px;color:var(--on-light)}
.trend-sub{font-size:1rem;font-weight:400;color:var(--on-light-soft);margin-top:14px;max-width:44ch}

/* >> THE WIDEN-ON-HOVER. Every card is `flex:1 1 0` so they share the row evenly; the hovered
   one grows and its neighbours give up the space. This is why the effect could not live in
   the deck - a deck card is absolutely positioned and its transform is rewritten every frame,
   so there is nothing to reflow and nothing that would not fight the deck.
   Transitioning `flex-grow` rather than `width` keeps the row exactly full at every point of
   the animation - a width transition leaves a gap on the trailing edge mid-way. */
.trend-row{display:flex;gap:clamp(12px,1.6vw,22px);max-width:1200px;margin:0 auto;align-items:flex-start}
.tcard{flex:1 1 0;min-width:0;transition:flex-grow .45s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){
  .trend-row:hover .tcard{flex-grow:.88}
  .trend-row .tcard:hover{flex-grow:1.55}
}

.tframe{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:2px;
  background:var(--sand);
  box-shadow:0 18px 44px rgba(28,22,20,.18),0 4px 12px rgba(28,22,20,.12)}

/* the badge, per CONTEXT 2.6 - circular, top right of the image tile */
.tbadge{position:absolute;top:12px;right:12px;z-index:2;
  display:grid;place-items:center;text-align:center;
  width:70px;height:70px;border-radius:50%;
  background:var(--ink);color:var(--on-dark);
  font-size:9px;font-weight:600;letter-spacing:.12em;line-height:1.25;padding:6px}

/* Two images stacked in the frame - the second fades in on hover. The swap is CSS only, so
   nothing here depends on the deck's rAF loop. */
.tshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tshot-alt{opacity:0;transition:opacity .45s ease}
@media (hover:hover) and (pointer:fine){
  .tcard:hover .tshot-alt{opacity:1}
}

.tbody{display:block;padding-top:16px}
.tname{display:block;font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--on-light)}
.tsay{display:block;font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-light-soft);margin-top:5px}
.tprice{display:block;font-size:15px;font-weight:500;letter-spacing:.04em;margin-top:10px;
  color:var(--on-light)}

/* Phone: a scrolling row, and NO widen. The effect needs neighbours to give up space, and at
   one-and-a-bit cards on screen there are none to give it. */
@media (max-width:820px){
  .trend-row{overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    -webkit-overflow-scrolling:touch}
  .tcard{flex:0 0 66vw;scroll-snap-align:start}
  .tbadge{width:58px;height:58px;font-size:8px}
}

/* ---------------- REVIEWS - stills, staggered grid ----------------
   Dark ground, alternating off Trending's cream. */
.revs{background:var(--ink);color:var(--on-dark);
  padding:clamp(80px,12vh,140px) var(--pad) clamp(96px,14vh,160px)}
.revs-head{max-width:1200px;margin:0 auto clamp(36px,6vh,64px)}
.revs-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.08;margin-top:12px}
.revs-sub{font-size:1rem;font-weight:400;opacity:.72;margin-top:14px;max-width:48ch}

.revs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);
  max-width:1200px;margin:0 auto;align-items:start}
/* >> THE STAGGER IS THE ONLY MOTION IN THIS SECTION and it is static offset, not scroll.
   Without it three equal cards in a row read as a table of testimonials. The offsets are a
   share of the card's own width, so they hold their proportion at every window size. */
.revs-grid .rev:nth-child(2){margin-top:6%}
.revs-grid .rev:nth-child(3){margin-top:12%}

.rev{margin:0}
.rframe{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;
  background:var(--ink-2);
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.35)}
.rshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* The quote is the biggest thing in the card - it is what the section is for.
   >> IT IS SET IN THE BODY FACE, NOT THE DISPLAY FACE (owner, wd-s29). It ran in Italiana and
   he called it: readable, but the eye has to work at every word. BRAND-KIT.md already said so -
   the display face is "display only: hero, section headings, product names, the wordmark. Never
   body copy" - and a review quote is body copy. It also bottoms out at 16.8px on a phone, under
   the ~20px this class of high-contrast serif needs before its hairlines go. Size and weight are
   unchanged, so the quote is still the loudest thing in the card. */
.rquote{font-family:var(--body);font-weight:400;font-size:clamp(1.05rem,1.55vw,1.35rem);
  line-height:1.45;margin:22px 0 0;color:var(--on-dark)}
.rmeta{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.rwho{font-size:13px;font-weight:500;letter-spacing:.04em}
.rprod{font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;opacity:.6}

@media (max-width:820px){
  .revs-grid{grid-template-columns:1fr;gap:clamp(34px,6vh,52px)}
  /* the stagger is a three-column effect - in one column it is just uneven spacing */
  .revs-grid .rev:nth-child(2),.revs-grid .rev:nth-child(3){margin-top:0}
}

/* ---------------- CREATOR HOOK - the full-bleed band ----------------
   Same construction as the hero: picture, scrim, copy bottom-left. Deliberately so - it is
   the second time the page makes a direct offer, and echoing the hero says that. */
.hook{position:relative;min-height:clamp(520px,72svh,760px);overflow:hidden;
  display:flex;align-items:flex-end;background:var(--ink-2)}
.hook-bg{position:absolute;inset:0;z-index:0;display:block}
.hook::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(23,17,14,.86) 0%,rgba(23,17,14,.42) 46%,rgba(23,17,14,.12) 78%)}
.hook-copy{position:relative;z-index:2;padding:0 var(--pad) clamp(48px,9vh,96px);max-width:660px}
.hook-h2{font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.05;margin:16px 0 16px;
  text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.6)}
.hook-say{font-size:clamp(1rem,1.4vw,1.12rem);font-weight:400;max-width:46ch;opacity:.94;
  line-height:1.6;text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}
.hook-cta{display:flex;align-items:center;gap:26px;margin-top:28px;flex-wrap:wrap}
.hook-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------------- NEWSLETTER - inert ---------------- */
.news{background:var(--shell);color:var(--on-light);
  padding:clamp(56px,9vh,96px) var(--pad)}
.news-in{max-width:760px;margin:0 auto;text-align:center}
.news-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.8vw,2.3rem);
  line-height:1.12;color:var(--on-light)}
.news-form{display:flex;gap:10px;margin:26px auto 0;max-width:480px}
.news-input{flex:1 1 auto;min-width:0;font-family:var(--body);font-size:15px;font-weight:400;
  color:var(--on-light);background:transparent;
  border:1px solid rgba(28,22,20,.28);border-radius:2px;padding:13px 16px}
/* a bold placeholder reads as a filled field - the shared standard's exclusion */
.news-input::placeholder{color:var(--on-light-soft);font-weight:400;opacity:.8}
.news-input:focus{outline:none;border-color:var(--clay)}
.news-fine{font-size:12px;color:var(--on-light-soft);margin-top:14px;letter-spacing:.03em}

/* ---------------- FOOTER ---------------- */
.foot{background:var(--ink);color:var(--on-dark);padding:clamp(64px,10vh,110px) var(--pad) 34px}
.foot-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(32px,5vw,90px);align-items:start}
.foot-tag{font-size:13px;opacity:.6;margin-top:14px;max-width:32ch;line-height:1.6}
.foot-cols{display:flex;gap:clamp(30px,5vw,76px)}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-h{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  opacity:.5;margin-bottom:5px}
.foot-col a{font-size:13.5px;font-weight:400;opacity:.82}
@media (hover:hover) and (pointer:fine){.foot-col a:hover{opacity:1;text-decoration:underline}}

/* the section hairline, content-width - the house rule: it separates sections, it does not
   divide the page, so it stops where the content stops */
.foot-legal{max-width:1200px;margin:clamp(44px,7vh,80px) auto 0;padding-top:22px;
  border-top:.5px solid rgba(246,241,234,.18);
  font-size:11.5px;letter-spacing:.06em;opacity:.45}

@media (max-width:820px){
  .foot-in{grid-template-columns:1fr;gap:36px}
  .foot-cols{flex-wrap:wrap;gap:28px 44px}
  .news-form{flex-direction:column}
}

/* ==================================================================
   CREATOR PROGRAMS PAGE - creators.html
   Reuses the nav, hero, buttons, newsletter input treatment and footer as they are.
   Everything below is new to this page.
================================================================== */

/* >> THE SUBPAGE HERO IS SHORTER THAN THE HOME HERO, AND IT IS NOT A TASTE CALL. At 100svh
   the tier row - which is the reason the page exists - sits entirely below the fold. At 78svh
   the top of it shows, which is what says there is something under this. */
.hero-page{height:auto;min-height:clamp(520px,78svh,780px)}
.hero-page .hero-h1{font-size:clamp(2.3rem,5.4vw,4.4rem)}
.nav-creators.is-here{text-decoration:underline;text-underline-offset:6px}

/* ---------------- THE THREE TIERS ---------------- */
.tiers{background:var(--ink);color:var(--on-dark);padding:clamp(64px,11vh,120px) var(--pad)}
.tiers-in{max-width:1200px;margin:0 auto}
.tiers-head{max-width:640px;margin:0 auto clamp(36px,6vh,60px);text-align:center}
.tiers-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.08;margin-top:12px}
.tiers-sub{font-size:1rem;font-weight:400;opacity:.72;margin-top:14px}

.tier-row{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px);align-items:stretch}

/* >> THE PANEL VALUES ARE .scard's, NOT A SECOND RECIPE. One look per element type per site -
   a frosted card here has to be the same object as a frosted card on the home page. If either
   ever changes, both selectors move together because they share this rule. */
.tier{display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,32px);border-radius:16px;
  background:linear-gradient(180deg,rgba(61,46,38,.72),rgba(23,17,14,.88));
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid var(--line-dark);
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.32)}

/* >> ONLY THE OPEN TIER IS LIT, AND THAT IS THE PAGE'S ARGUMENT IN ONE DECLARATION. The tier
   with no bar on it is the one a visitor has to believe is real, so it is the one carrying the
   accent edge. The other two are conditional and read as quieter on purpose. */
.tier.is-open{border-color:rgba(217,160,91,.42)}
.tier.is-open .tier-eyebrow{color:var(--amber)}

.tier-eyebrow{font-size:10px;font-weight:600;letter-spacing:.2em;opacity:.72}
.tier-name{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);
  line-height:1.1;margin:10px 0 10px}
.tier-who{font-size:1rem;font-weight:400;opacity:.86;line-height:1.5}
.tier-list{list-style:none;margin:20px 0 0;display:flex;flex-direction:column;gap:11px}
.tier-list li{position:relative;padding-left:20px;font-size:.95rem;font-weight:300;
  line-height:1.5;opacity:.86}
/* a hairline tick rather than a bullet - a dot list on a luxury page reads as a spec sheet */
.tier-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;
  background:var(--clay)}
.tier-ask{margin-top:auto;padding-top:20px;font-size:.9rem;font-weight:400;line-height:1.5;
  opacity:.8;border-top:1px solid var(--line-dark)}
.tier-ask span{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;opacity:.6;margin-bottom:6px}

/* ---------------- HOW IT WORKS - a light band, no panels ----------------
   The tier row above is already three panels; a second row of them would read as six tiers. */
.steps{background:var(--cream);color:var(--on-light);padding:clamp(64px,11vh,120px) var(--pad)}
.steps-in{max-width:1200px;margin:0 auto}
.steps-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.6rem);
  line-height:1.1;color:var(--on-light);margin-top:12px;max-width:20ch}
.step-row{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.4vw,52px);margin-top:clamp(36px,6vh,60px)}
.step{border-top:1px solid var(--line);padding-top:20px}
/* clay-deep, not clay: Italiana's thin numerals washed out in clay on cream - "2-4" read as
   "2 4" (owner, wd-s32). The display face has one weight, so the fix is tone, not bold. */
.step-n{font-family:var(--display);font-size:1.5rem;color:var(--clay-deep)}
.step-h{font-size:1.05rem;font-weight:500;margin:10px 0 8px;color:var(--on-light)}
.step-say{font-size:.95rem;font-weight:300;line-height:1.55;color:var(--on-light-soft)}

/* ---------------- THE APPLICATION - inert ---------------- */
.apply{background:var(--ink);color:var(--on-dark);padding:clamp(64px,11vh,120px) var(--pad)}
.apply-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,88px);align-items:start}
.apply-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.08;margin-top:12px}
.apply-say{font-size:1rem;font-weight:400;opacity:.78;margin-top:16px;max-width:42ch;
  line-height:1.6}
.apply-form{display:flex;flex-direction:column;gap:18px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld-l{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
/* the newsletter input's treatment, inverted for the dark ground - same border, same radius,
   same focus colour, so there is one field look on this site rather than two */
.fld-i{font-family:var(--body);font-size:15px;font-weight:400;color:var(--on-dark);
  background:transparent;border:1px solid var(--line-dark);border-radius:2px;padding:13px 15px}
.fld-i::placeholder{color:var(--on-dark);opacity:.38;font-weight:400}
.fld-i:focus{outline:none;border-color:var(--clay)}
.btn-wide{width:100%;text-align:center;margin-top:6px}
.apply-fine{font-size:12px;opacity:.6;letter-spacing:.03em}

/* ---------------- CREATOR PAGE - PHONE ---------------- */
/* >> THE RULE ABOVE `We ask for` NEEDS A GUARANTEED GAP, NOT A FIXED ONE. `.tier-ask` uses
   `margin-top:auto` to sit on the floor of the card, so in a card whose bullets happen to fill
   the height that auto resolves to ZERO and the line lands right under the last bullet - which
   is why it looked different card to card and browser to browser. A bottom margin on the list
   sets a floor the auto cannot eat, and auto still absorbs the slack in the shorter cards.
   Laptop only - the phone stacks and never runs out of height. */
@media (min-width:901px){
  .tier-list{margin-bottom:30px}
}

@media (max-width:900px){
  .tier-row{grid-template-columns:1fr;gap:16px}
  .step-row{grid-template-columns:1fr;gap:26px}
  .apply-in{grid-template-columns:1fr;gap:32px}
  .tier-ask{margin-top:20px}
}

/* ---------------- THE DETAILS - the four mechanics, on the dark ground ----------------
   A four-across strip, no panels: the tier row above is already panelled, and these are
   facts rather than offers. The number line is the display face because each one is a
   short label, which is what that face is for. */
.facts{background:var(--ink-2);color:var(--on-dark);padding:clamp(56px,9vh,100px) var(--pad)}
.facts-in{max-width:1200px;margin:0 auto}
.facts-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1.1;margin-top:12px;max-width:22ch}
.fact-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.6vw,40px);margin-top:clamp(32px,5vh,52px)}
.fact{border-top:1px solid var(--line-dark);padding-top:18px}
.fact-n{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,1.7vw,1.5rem);
  line-height:1.15;color:var(--amber)}
.fact-say{font-size:.92rem;font-weight:300;line-height:1.55;opacity:.82;margin-top:10px}

@media (max-width:900px){
  .fact-row{grid-template-columns:1fr 1fr;gap:22px}
}
@media (max-width:560px){
  .fact-row{grid-template-columns:1fr;gap:20px}
}

/* ==================================================================
   COLLECTION TEMPLATE - collection-<group>.html
================================================================== */

/* >> HALF THE HEIGHT OF A PAGE HERO. A collection hero names the group and gets out of the
   way; the grid is what the visitor came for. */
.chero{position:relative;min-height:clamp(340px,46svh,520px);overflow:hidden;
  display:flex;align-items:flex-end}
.chero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(23,17,14,.82) 0%,rgba(23,17,14,.3) 46%,transparent 78%)}
/* >> AND A SECOND SCRIM AT THE TOP, WHICH THE HOME HERO DOES NOT NEED. That photograph is
   dark where the bar sits; a category close-up is skin, and it is brightest exactly there.
   The nav is white type with no surface of its own until it goes solid, so without this the
   links sit on a light ground and disappear. */
.chero::before,.band::before{content:"";position:absolute;top:0;left:0;right:0;height:190px;z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(23,17,14,.62) 0%,rgba(23,17,14,.24) 55%,transparent 100%)}

/* the product page has no photograph behind the bar at all - it is locked solid in markup */
.nav.is-locked{background:rgba(23,17,14,.92);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark);padding:14px var(--pad)}
.chero-copy{position:relative;z-index:2;padding:0 var(--pad) clamp(34px,6vh,64px);max-width:680px}
.chero .kicker{text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}
.chero-h1{font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,7vw,5rem);line-height:1;margin:14px 0 14px;
  text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.6)}
.chero-sub{font-size:1rem;font-weight:400;max-width:46ch;opacity:.92;line-height:1.6;
  text-shadow:0 1px 8px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}

.coll{background:var(--cream);color:var(--on-light);
  padding:clamp(40px,6vh,72px) var(--pad) clamp(80px,12vh,130px)}
.coll-in{max-width:1200px;margin:0 auto}

/* the bar - count left, sort right, hairline under it. The section rule, not a full-bleed
   line: it separates the controls from the grid, it does not divide the page. */
.coll-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:clamp(28px,4vh,44px)}
.coll-count{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-light-soft)}
.coll-sort{display:flex;align-items:center;gap:10px}
.coll-sort-l{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-light-soft)}
.coll-sort-s{font-family:var(--body);font-size:14px;font-weight:400;color:var(--on-light);
  background:transparent;border:1px solid rgba(28,22,20,.28);border-radius:2px;
  padding:9px 12px;cursor:pointer}
.coll-sort-s:focus{outline:none;border-color:var(--clay)}

.coll-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.2vw,32px)}
.coll-grid-3{grid-template-columns:repeat(3,1fr)}

/* >> THE PRODUCT CARD IS THE TRENDING CARD'S FRAME AND SWAP, WITHOUT THE WIDEN. The widen
   needs a flex row whose neighbours can give up space; a grid's tracks are fixed, so widening
   one card either overlaps its neighbour or reflows the row. The image swap works anywhere,
   so that half comes along. Same aspect, same badge, same shadow - one card, two homes. */
.pcard{display:block}
.pframe{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:2px;
  background:var(--sand);
  box-shadow:0 18px 44px rgba(28,22,20,.18),0 4px 12px rgba(28,22,20,.12)}
.pshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pshot-alt{opacity:0;transition:opacity .45s ease}
@media (hover:hover) and (pointer:fine){
  .pcard:hover .pshot-alt{opacity:1}
}
.pbody{display:block;padding-top:15px}
.pname{display:block;font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--on-light)}
.psay{display:block;font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-light-soft);margin-top:5px}
.prate{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:400;
  color:var(--on-light-soft);margin-top:9px}
.prate i{font-style:normal;opacity:.8}
.pprice{display:block;font-size:15px;font-weight:500;letter-spacing:.04em;margin-top:9px;
  color:var(--on-light)}

@media (max-width:1000px){ .coll-grid,.coll-grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .coll-grid,.coll-grid-3{grid-template-columns:1fr;gap:26px}
  .coll-bar{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ==================================================================
   PRODUCT TEMPLATE - product-<slug>.html
   >> EVERY RULE HERE HAS TO SURVIVE BEING FILLED WITH A MASCARA, A CLEANSER OR AN SPF.
      A product page is ONE design filled forty times - that is the whole reason the catalog
      price caps products and never pages. Nothing below is lip-oil specific.
================================================================== */

/* the page opens under a SOLID bar, not over a photograph - the first thing that has to be
   readable here is a price */
.pdp-body{background:var(--cream)}
.pdp{background:var(--cream);color:var(--on-light);
  padding:calc(clamp(88px,12vh,120px) + 20px) var(--pad) clamp(60px,9vh,100px)}
.pdp-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(32px,4.4vw,72px);align-items:start}

.pdp-stage{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--sand);
  box-shadow:0 18px 44px rgba(28,22,20,.18),0 4px 12px rgba(28,22,20,.12)}
.pdp-main{width:100%;height:100%;object-fit:cover}
.pdp-thumbs{list-style:none;display:flex;gap:12px;margin-top:14px}
.pdp-thumb{width:84px;aspect-ratio:1/1;padding:0;border:1px solid transparent;border-radius:2px;
  overflow:hidden;background:var(--sand);cursor:pointer;opacity:.62;
  transition:opacity .2s ease,border-color .2s ease}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}
.pdp-thumb.is-on{opacity:1;border-color:var(--clay)}
@media (hover:hover) and (pointer:fine){ .pdp-thumb:hover{opacity:1} }

.pdp-crumb{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-light-soft)}
.pdp-crumb a{border-bottom:1px solid transparent}
@media (hover:hover) and (pointer:fine){ .pdp-crumb a:hover{border-bottom-color:var(--clay)} }
.pdp-name{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);
  line-height:1.05;margin:12px 0 14px;color:var(--on-light)}
.pdp-rate{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--on-light-soft)}
.pdp-rate i{font-style:normal}
.pdp-price{font-size:1.35rem;font-weight:500;letter-spacing:.03em;margin-top:14px;
  color:var(--on-light)}
.pdp-say{font-size:1rem;font-weight:300;line-height:1.65;color:var(--on-light);opacity:.86;
  margin-top:18px;max-width:46ch}

.pdp-var{margin-top:26px}
.pdp-var-l{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-light-soft)}
.pdp-var-l em{font-style:normal;color:var(--on-light);margin-left:6px;letter-spacing:.04em}
.swatches{display:flex;gap:12px;margin-top:12px}
/* the swatch carries its colour inline, so a shade is one line of markup - the same way a
   rating is one inline value. Forty products can be filled in without touching this file. */
.sw{width:34px;height:34px;border-radius:50%;cursor:pointer;background:var(--sw);
  border:1px solid rgba(28,22,20,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.14);
  outline:1px solid transparent;outline-offset:3px;transition:outline-color .18s ease}
.sw.is-on{outline-color:var(--clay)}
@media (hover:hover) and (pointer:fine){ .sw:hover{outline-color:rgba(192,138,110,.5)} }

.pdp-buy .btn-wide{margin-top:26px}
.pdp-fine{font-size:12px;color:var(--on-light-soft);margin-top:12px;letter-spacing:.03em}

/* >> A DISCLOSURE LIST, NOT THREE PARAGRAPHS. On a product page the visitor is scanning for
   one answer, not reading the page. */
.pdp-det{margin-top:34px;border-top:1px solid var(--line)}
.pdp-det details{border-bottom:1px solid var(--line)}
.pdp-det summary{list-style:none;cursor:pointer;padding:16px 0;font-size:14px;font-weight:500;
  letter-spacing:.04em;color:var(--on-light);display:flex;align-items:center;
  justify-content:space-between}
.pdp-det summary::-webkit-details-marker{display:none}
.pdp-det summary::after{content:"+";font-size:16px;color:var(--on-light-soft);font-weight:400}
.pdp-det details[open] summary::after{content:"-"}
.pdp-det p{font-size:.95rem;font-weight:300;line-height:1.65;color:var(--on-light-soft);
  padding:0 0 18px;max-width:52ch}

.also{background:var(--shell);color:var(--on-light);padding:clamp(64px,10vh,110px) var(--pad)}
.also-in{max-width:1200px;margin:0 auto}
.also .kicker{color:var(--on-light);opacity:.6}
.also-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1.1;margin:12px 0 clamp(28px,4vh,44px);color:var(--on-light)}

@media (max-width:860px){
  .pdp-in{grid-template-columns:1fr;gap:28px}
  .pdp-stage{aspect-ratio:1/1}
}

/* ==================================================================================
   THE BAG (wd-s31) - the nav button, the drawer, and the lines in it.
   >> EVERY COLOUR HERE IS A TOKEN. Nothing new was added to :root for this - the drawer
      is the dark ground the hero and footer already use, so a client swap recolours it
      with the rest of the site and this block never needs opening.
   >> THE PANEL IS FIXED AND FULL HEIGHT, and its middle scrolls rather than the page.
      A drawer whose whole body scrolls takes the page with it on a phone once the list
      is longer than the screen. Header and footer are pinned; only .bag-lines moves. */

.bag-btn{
  font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  padding:6px 0;opacity:.8;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:7px;
}
.bag-btn.has-n{opacity:1}
@media (hover:hover) and (pointer:fine){.bag-btn:hover{opacity:1}}
/* the count sits in a pill so a single digit and a double digit are the same shape */
.bag-n{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--clay);color:var(--on-dark);
  font-size:11px;line-height:1;letter-spacing:0;
}

.bag{position:fixed;inset:0;z-index:100;visibility:hidden;}
.bag.is-open{visibility:visible}
.bag-veil{
  position:absolute;inset:0;background:rgba(23,17,14,.55);
  opacity:0;transition:opacity .28s ease;
}
.bag.is-open .bag-veil{opacity:1}

.bag-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);
  background:var(--ink);color:var(--on-dark);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1);
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
}
.bag.is-open .bag-panel{transform:none}
/* the page behind must not scroll while the drawer is open */
body.bag-open{overflow:hidden}

.bag-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad) 16px;border-bottom:1px solid var(--line-dark);flex:0 0 auto;
}
.bag-h{font-family:var(--display);font-size:24px;letter-spacing:.01em}
.bag-x{
  font:inherit;font-size:13px;letter-spacing:.08em;color:inherit;opacity:.72;
  background:none;border:0;cursor:pointer;padding:6px 0;
}
@media (hover:hover) and (pointer:fine){.bag-x:hover{opacity:1;text-decoration:underline}}

.bag-lines{flex:1 1 auto;overflow-y:auto;padding:6px var(--pad);}
.bag-empty{opacity:.6;font-size:14px;padding:26px 0}

.bagline{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-dark)}
.bagline:last-child{border-bottom:0}
.bagline-img{flex:0 0 76px}
.bagline-img img{width:76px;height:92px;object-fit:cover;display:block;border-radius:3px}
.bagline-body{flex:1 1 auto;min-width:0}
.bagline-name{font-size:14px;letter-spacing:.02em;color:inherit;text-decoration:none;display:block}
@media (hover:hover) and (pointer:fine){.bagline-name:hover{text-decoration:underline}}
.bagline-var{font-size:12px;opacity:.62;margin-top:3px}
.bagline-price{font-size:13px;opacity:.82;margin-top:6px}

.bagline-qty{display:flex;align-items:center;gap:10px;margin-top:10px}
.bagline-qty button{
  font:inherit;font-size:14px;line-height:1;color:inherit;cursor:pointer;
  background:none;border:1px solid var(--line-dark);border-radius:999px;
  width:26px;height:26px;display:grid;place-items:center;padding:0;
}
.bagline-qty span{font-size:13px;min-width:14px;text-align:center}
.bagline-qty .bagline-rm{
  width:auto;height:auto;border:0;padding:0;margin-left:4px;
  font-size:12px;opacity:.55;letter-spacing:.04em;border-radius:0;
}
@media (hover:hover) and (pointer:fine){
  .bagline-qty button:hover{border-color:var(--clay)}
  .bagline-qty .bagline-rm:hover{opacity:1;text-decoration:underline;border-color:transparent}
}

.bag-foot{flex:0 0 auto;padding:18px var(--pad) calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-dark)}
.bag-sub{display:flex;justify-content:space-between;font-size:15px;letter-spacing:.02em}
.bag-note{font-size:12px;opacity:.55;margin:6px 0 14px}
.bag-foot .btn[disabled]{opacity:.4;cursor:not-allowed}

/* ---- the two order pages ---- */
.orderpage{
  min-height:100svh;display:grid;place-items:center;
  background:var(--ink);color:var(--on-dark);padding:calc(var(--pad) * 2) var(--pad);
}
.orderpage-in{max-width:520px;text-align:center}
.orderpage h1{font-family:var(--display);font-size:clamp(34px,7vw,52px);line-height:1.05}
.orderpage p{margin-top:16px;opacity:.78;line-height:1.65}
.orderpage .btn{margin-top:28px}
.orderpage-quiet{
  display:inline-block;margin-top:18px;font-size:14px;color:inherit;
  opacity:.72;text-decoration:none;
}
@media (hover:hover) and (pointer:fine){.orderpage-quiet:hover{opacity:1;text-decoration:underline}}

/* ==================================================================
   COMPANY PAGES - our-story.html (wd-s32)
================================================================== */

/* a photo band with no copy on it - the words sit below on cream. It shares the collection
   hero's top scrim (grouped above), because a bright sky under the transparent nav hides the
   links. Positioned high so a wide screen keeps the horizon; the crop falls on the grass. */
.band{position:relative;height:clamp(420px,70svh,760px);overflow:hidden}
.band .hero-img{object-position:50% 30%}

.story{background:var(--cream);color:var(--on-light);padding:clamp(64px,11vh,120px) var(--pad)}
.story-in{max-width:640px;margin:0 auto;text-align:center}
.story-h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.05;margin:14px 0 6px}
.story-say{font-size:1.05rem;font-weight:400;line-height:1.75;color:var(--on-light-soft);margin-top:20px}
.story-cta{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:40px;flex-wrap:wrap}
.story .quiet,.wall .quiet,.info .quiet{text-shadow:none}   /* on cream there is nothing to lift it off */

/* phone: the sides crop hard, so hold the sand and the water in frame */
@media (max-width:700px){
  .band{height:clamp(340px,56svh,520px)}
  .band .hero-img{object-position:38% 50%}
  .story-in{text-align:left}
  .story-cta{justify-content:flex-start}
}

/* ---------------- CREATOR WALL - creators.html (wd-s32) ----------------
   Cream between the two dark sections. Headings reuse the tier section's classes; the tile is
   the product card's .pframe at 9:16, so the shadow and radius are the same object. */
.wall{background:var(--cream);color:var(--on-light);padding:clamp(64px,11vh,120px) var(--pad)}
.wall-row{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px)}
.cframe{aspect-ratio:9/16}
.chandle{font-size:12px;font-weight:400;color:var(--on-light-soft);margin-top:3px}
.ctier{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);margin-top:10px}
.cquote{font-size:13px;font-weight:400;line-height:1.5;color:var(--on-light);margin-top:8px}
.wall .quiet{display:inline-block;font-size:12px;margin-top:10px}

@media (max-width:1000px){ .wall-row{grid-template-columns:repeat(3,1fr);row-gap:34px} }
@media (max-width:560px){ .wall-row{grid-template-columns:repeat(2,1fr);gap:14px;row-gap:30px} }

/* ---------------- HELP PAGES - shipping, returns, ingredients, faq (wd-s32) ----------------
   One template filled four times. Locked nav and the product page's top padding, because
   there is no photograph behind the bar. The crumb, name, lede and disclosure rows are the
   product page's classes; the facts row is the creator page's steps strip. */
.info{background:var(--cream);color:var(--on-light);
  padding:calc(clamp(88px,12vh,120px) + 20px) var(--pad) clamp(70px,11vh,120px)}
.info-in{max-width:760px;margin:0 auto}
.info-tabs{display:flex;flex-wrap:wrap;gap:8px 24px}
.info-tabs a.is-here{color:var(--on-light);border-bottom-color:var(--clay)}
.info-facts{grid-template-columns:repeat(3,1fr)}
.info-h2{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.15;color:var(--on-light);margin:clamp(40px,6vh,56px) 0 0}
.info-p{font-size:1rem;font-weight:300;line-height:1.7;color:var(--on-light-soft);margin-top:12px;max-width:62ch}
.info .pdp-det p{max-width:62ch}
.ing-name{color:var(--on-light);font-weight:500;border-bottom:1px solid transparent}
@media (hover:hover) and (pointer:fine){ .ing-name:hover{border-bottom-color:var(--clay)} }

/* ---------------- CONTACT - the creator application section, under a locked nav ---------------- */
.contact{padding-top:calc(clamp(88px,12vh,120px) + 20px)}
.contact-l{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.6;
  margin-top:34px}
.contact-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:10px}
select.fld-i{appearance:none;-webkit-appearance:none;cursor:pointer}
select.fld-i option{color:var(--on-light)}
textarea.fld-i{resize:vertical;min-height:120px}

@media (max-width:700px){ .info-facts{grid-template-columns:1fr;gap:22px} }