/* ============ ZỤLỊC storefront ============
   Palette locked to brand: ink #1D1D1B, gold #A88E37 (SOLID FILLS ONLY),
   gold-deep #6F5B18 for gold-coloured text on light, off-white #F7F5F0 ground.
   Irish Grover for display headings, Jost for body/UI.
   Signature ornament: the gold underdot (·) from the Ụ/Ị diacritics.
   Self-contained: no framework, inline CSS + vanilla JS.
==============================================*/
:root{
  --ground:#F7F5F0;      /* airy off-white ground */
  --ground-2:#F1ECE1;    /* subtle band */
  --card:#EFEBE2;        /* product panels */
  --ink:#1D1D1B;         /* text + dark band */
  --ink-soft:rgba(29,29,27,.72);
  --ink-faint:rgba(29,29,27,.52);
  --gold:#A88E37;        /* SOLID FILLS ONLY (fails as text on light) */
  --gold-deep:#6F5B18;   /* gold-coloured TEXT on light (6.05:1) */
  --gold-hi:#C6A951;     /* hover / on-dark accents */
  --line:#DDD2B6;        /* decorative hairlines */
  --line-strong:#8F7A45; /* interactive control edges */
  --paper:#FBFAF6;
  --shadow:0 18px 40px -24px rgba(29,29,27,.45);
  --shadow-sm:0 8px 22px -16px rgba(29,29,27,.4);
  --display:'Irish Grover','Comic Sans MS','Segoe Print',cursive;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --wrap:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:0;line-height:1.14;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.dot::after{content:"·";color:var(--gold-deep);font-weight:700;padding-left:.12em}

/* eyebrow label with underdot */
.eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;display:inline-flex;align-items:center;gap:.5em;
}
.eyebrow::before{content:"·";color:var(--gold-deep);font-size:1.7em;line-height:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;border:0;border-radius:999px;
  padding:14px 30px;min-height:48px;transition:transform .18s,background .18s,box-shadow .18s,color .18s;
}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-hi);transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ghost-light{background:transparent;color:var(--paper);border:1.5px solid rgba(251,250,246,.55)}
.btn-ghost-light:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:6px}

/* ================= NAV ================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,box-shadow .3s,color .3s}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:16px clamp(18px,4vw,40px)}
.nav-links{display:flex;gap:26px;justify-self:start}
.nav-links.right{justify-self:end}
.nav a.nlink{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;position:relative;padding:6px 2px;color:#fff}
.nav a.nlink::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--gold-hi);transition:right .25s}
.nav a.nlink:hover::after{right:0}
.brand{font-family:var(--display);font-size:1.55rem;letter-spacing:.02em;justify-self:center;color:#fff;white-space:nowrap}
.brand .u,.brand .i{position:relative}
.brand .u::after,.brand .i::after{content:"·";position:absolute;left:50%;transform:translateX(-50%);bottom:-.22em;font-size:.5em;color:var(--gold-hi)}
.nav-icons{display:flex;gap:16px;align-items:center;justify-self:end;color:#fff}
.nav-icons svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.nav.scrolled{background:rgba(247,245,240,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav.scrolled .brand,.nav.scrolled .nlink,.nav.scrolled .nav-icons{color:var(--ink)}
.nav.scrolled .nlink::after{background:var(--gold-deep)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;color:#fff;padding:6px}
.nav-toggle svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7}
.nav.scrolled .nav-toggle{color:var(--ink)}

/* ================= HERO ================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
/* Studio-charcoal ground, sampled from the hero photo's own backdrop so the
   figure blends into one continuous scene. Tones traced from the shot:
   #0A0F15 top -> #212B34 mid -> #161B1F base. NOT a placeholder — if you swap
   the photo, re-tune these or the seam will show. */
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(95% 78% at 58% 56%,#232D37 0%,#1C2530 38%,#141C24 68%,#0B1016 100%);
}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,17,.62) 0%,rgba(8,12,17,.10) 26%,rgba(8,12,17,0) 55%,rgba(8,12,17,.55) 100%)}
/* Hero figure — real photo (770x918). Baked-in logo painted out and the
   "Made with Clova" watermark cropped away. Masks feather the left edge and
   top into the ground; both stop short of the subject (garment starts 19.7%
   from the left, head top 20.5% from the top) so nothing gets clipped. */
.hero-figure{position:absolute;right:2%;bottom:0;z-index:1;
  width:min(50%,640px);aspect-ratio:770/918;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 15%);
          mask-image:linear-gradient(to right,transparent 0,#000 15%);
}
.hf-inner{width:100%;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 15%);
}
.hero-figure img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-content{position:relative;z-index:2;max-width:640px;padding-top:60px}
/* Hero copy is the tagline alone — the logo lockup and the "menswear cut
   clean" line were removed on request. Irish Grover carries it (a display face
   only works at size; never on small text or all-caps). */
.hero h1{font-size:clamp(2.3rem,5.6vw,4.5rem);max-width:22ch;text-shadow:0 4px 26px rgba(8,12,17,.55)}
.hero-tag{margin:0 0 34px}
.hero-eyebrow{color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.4);padding:7px 16px;border-radius:999px;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;display:inline-block;margin-bottom:22px}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}
.scrollcue span{width:1px;height:34px;background:linear-gradient(var(--gold-hi),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* sticky email capture bottom-left (from reference) */
.capture{position:fixed;left:20px;bottom:20px;z-index:55;display:flex;align-items:center;gap:8px;
  background:rgba(251,250,246,.96);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 18px;
  box-shadow:var(--shadow);max-width:min(92vw,410px);transition:transform .4s ease,opacity .4s}
.capture.hide{transform:translateY(140%);opacity:0;pointer-events:none}
.capture label{font-size:.74rem;color:var(--ink-soft);white-space:nowrap;margin-right:2px}
.capture input{border:0;background:transparent;font-family:var(--sans);font-size:.82rem;min-width:0;flex:1;color:var(--ink)}
.capture input::placeholder{color:var(--ink-faint)}
.capture button{white-space:nowrap;padding:10px 18px;min-height:40px;font-size:.72rem}
.capture .x{background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:1.1rem;padding:2px 8px;min-height:auto}

/* ============= SECTION HEADS ============= */
.sec{padding:clamp(56px,8vw,96px) 0}
.sec-head{text-align:center;margin-bottom:clamp(30px,5vw,52px)}
.sec-head h2{font-size:clamp(1.9rem,4.4vw,3rem);margin-top:10px}
.sec-head p{color:var(--ink-soft);max-width:52ch;margin:12px auto 0;font-size:.98rem}
.rule{width:54px;height:2px;background:var(--gold);margin:16px auto 0;border-radius:2px}

/* ============= PRODUCT ROW ============= */
.prow{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,26px)}
.card{background:transparent;text-align:left}
.card .thumb{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm)}
.card .thumb i.ph{position:absolute;inset:0;display:block}
.card .thumb::after{content:"·";position:absolute;left:14px;top:10px;color:rgba(255,255,255,.0)}
.card .tag{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--ink);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:5px 10px;border-radius:999px}
.card .fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:999px;background:rgba(251,250,246,.9);border:0;display:grid;place-items:center;cursor:pointer;transition:transform .18s,background .18s}
.card .fav svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.6}
.card .fav:hover{transform:scale(1.1)}
.card .fav.on{background:var(--gold)}
.card .fav.on svg{fill:var(--ink);stroke:var(--ink)}
.card .quick{position:absolute;left:10px;right:10px;bottom:10px;transform:translateY(130%);opacity:0;transition:transform .25s,opacity .25s;width:calc(100% - 20px)}
.card .thumb:hover .quick,.card .thumb:focus-within .quick{transform:translateY(0);opacity:1}
.card .meta{padding:12px 2px 0}
.card .name{font-size:.94rem;font-weight:500;letter-spacing:.01em}
.card .cat{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:2px}
.card .price{margin-top:6px;font-weight:600;color:var(--gold-deep);font-size:.98rem}
.card .price .was{color:var(--ink-faint);text-decoration:line-through;font-weight:400;margin-left:8px;font-size:.86rem}
.row-more{text-align:center;margin-top:clamp(28px,5vw,44px)}

/* placeholder washes — data-swap */
.w1{background:linear-gradient(150deg,#e9ddc4,#cdb488)}
.w2{background:linear-gradient(150deg,#efe7d6,#c9b59a)}
.w3{background:linear-gradient(150deg,#e4d3b6,#b79f79)}
.w4{background:linear-gradient(150deg,#f1e9da,#d0c3a4)}
.w5{background:linear-gradient(150deg,#ded0b2,#ae9670)}
.w6{background:linear-gradient(150deg,#efe3cd,#c4ad84)}
.w7{background:linear-gradient(150deg,#e6d9bf,#bfa77e)}
.w8{background:linear-gradient(150deg,#f2ebdd,#c8b795)}
.w9{background:linear-gradient(150deg,#dccdad,#a89066)}
.w10{background:linear-gradient(150deg,#eaddc4,#cbb082)}

/* ============= CATEGORY TILES (two-up) ============= */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px)}
.tile{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;display:flex;align-items:flex-end;
  box-shadow:var(--shadow-sm);isolation:isolate}
.tile .tw{position:absolute;inset:0;z-index:-1;transition:transform .6s ease}
.tile:hover .tw{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(29,29,27,.66) 100%)}
.tile .tcap{padding:clamp(20px,3vw,34px);color:#fff;width:100%}
.tile h3{font-size:clamp(1.6rem,3.6vw,2.6rem);text-shadow:0 3px 18px rgba(29,29,27,.5)}
.tile .tcount{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:6px}
.tile .tlink{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#fff}
.tile .tlink svg{width:15px;height:15px;stroke:var(--gold-hi);fill:none;stroke-width:2;transition:transform .2s}
.tile:hover .tlink svg{transform:translateX(5px)}
.tw-a{background:radial-gradient(90% 80% at 30% 20%,#cdb488,transparent),linear-gradient(160deg,#b89b63,#7c6236)}
.tw-b{background:radial-gradient(90% 80% at 70% 20%,#e6d7b6,transparent),linear-gradient(160deg,#cbb78d,#8f7648)}
.tw-c{background:radial-gradient(90% 80% at 40% 30%,#d9c49a,transparent),linear-gradient(160deg,#a98d57,#6d5730)}
.tw-d{background:radial-gradient(90% 80% at 60% 25%,#efe6d0,transparent),linear-gradient(160deg,#d3c19a,#9a8154)}

/* ============= SALE BAND (ink, gold accents) ============= */
.saleband{position:relative;background:var(--ink);color:var(--paper);text-align:center;overflow:hidden}
.on-dark .dot::after,.saleband .dot::after{color:var(--gold-hi)} /* gold-deep vanishes on ink */
.saleband::before,.saleband::after{content:"";position:absolute;width:340px;height:340px;border-radius:999px;filter:blur(30px);opacity:.16;z-index:0}
.saleband::before{background:var(--gold);left:-90px;top:-120px}
.saleband::after{background:var(--gold-hi);right:-90px;bottom:-120px}
.saleband .inner{position:relative;z-index:1;padding:clamp(56px,9vw,110px) 0}
.saleband .keyline{color:var(--gold-hi);letter-spacing:.34em;text-transform:uppercase;font-size:.72rem;font-weight:500}
.saleband h2{font-size:clamp(2.2rem,6vw,4.4rem);margin:16px 0 8px;color:#fff}
.saleband h2 em{font-style:normal;color:var(--gold-hi)}
.saleband .sub{color:rgba(251,250,246,.78);max-width:44ch;margin:0 auto 30px}
.sale-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============= TRUST ROW ============= */
.trust{background:var(--ground-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:clamp(34px,5vw,52px) 0}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.trust-item .ic{width:46px;height:46px;border-radius:999px;background:var(--card);display:grid;place-items:center;border:1px solid var(--line)}
.trust-item svg{width:22px;height:22px;stroke:var(--gold-deep);fill:none;stroke-width:1.5}
.trust-item h4{font-family:var(--sans);font-size:.9rem;font-weight:600;margin:0;letter-spacing:.02em}
.trust-item p{margin:0;font-size:.78rem;color:var(--ink-soft);max-width:24ch}

/* ============= INSTAGRAM STRIP ============= */
.insta .sec-head h2{font-size:clamp(1.6rem,4vw,2.4rem)}
.insta-social{display:flex;gap:14px;justify-content:center;margin-top:14px}
.insta-social a{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;transition:background .2s,transform .2s,border-color .2s}
.insta-social a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.insta-social svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6}
.insta-social a:hover svg{stroke:var(--ink)}
.insta-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.4vw,14px);margin-top:clamp(24px,4vw,40px)}
.igcell{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.igcell i{position:absolute;inset:0}
.igcell::after{content:"";position:absolute;inset:0;background:rgba(29,29,27,0);transition:background .25s;display:grid;place-items:center}
.igcell:hover::after{background:rgba(29,29,27,.34)}
.igcell .igmark{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .25s;z-index:2}
.igcell:hover .igmark{opacity:1}
.igcell .igmark svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.6}

/* ============= FOOTER ============= */
footer{background:var(--ink);color:rgba(251,250,246,.82)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:clamp(52px,7vw,80px) 0 44px}
/* footer logo lockup — gold variant (5.30:1 on the ink ground; the hero uses
   paper because gold vanishes on the warm wash). Bookends the page. */
.foot-brand .flogo{display:inline-block;line-height:0;transition:opacity .2s}
.foot-brand .flogo:hover{opacity:.82}
.foot-brand .flogo img{width:clamp(116px,13vw,158px);height:auto}
.foot-brand p{margin:14px 0 0;font-size:.88rem;max-width:32ch;color:rgba(251,250,246,.7)}
.foot-brand .loc{margin-top:16px;font-size:.8rem;letter-spacing:.04em;color:rgba(251,250,246,.62);display:flex;align-items:center;gap:8px}
.foot-brand .loc svg{width:15px;height:15px;stroke:var(--gold-hi);fill:none;stroke-width:1.6}
.fcol h5{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin:0 0 16px;font-weight:600}
.fcol a{display:block;font-size:.9rem;padding:6px 0;color:rgba(251,250,246,.78);transition:color .18s,padding-left .18s}
.fcol a:hover{color:#fff;padding-left:5px}
.foot-bottom{border-top:1px solid rgba(251,250,246,.14);padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.78rem;color:rgba(251,250,246,.6)}
.foot-bottom .pays{display:flex;gap:8px;align-items:center}
.foot-bottom .pays span{border:1px solid rgba(251,250,246,.22);border-radius:5px;padding:3px 9px;font-size:.66rem;letter-spacing:.08em}

/* ============= TOAST ============= */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);background:var(--ink);color:var(--paper);
  padding:14px 22px;border-radius:999px;box-shadow:var(--shadow);z-index:80;display:flex;align-items:center;gap:10px;
  font-size:.88rem;transition:transform .35s cubic-bezier(.2,.9,.3,1.2);max-width:90vw}
.toast.show{transform:translate(-50%,0)}
.toast .tick{width:22px;height:22px;border-radius:999px;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-weight:700;flex:0 0 auto}

/* ============= REVEAL ============= */
/* Reveal states are scoped to .js (set by the head script). Without scripting
   these selectors never match, so the page renders fully visible rather than as
   a column of blank sections. The CSS transition is the fallback path only —
   .gsap-on kills it so GSAP and CSS never tween the same properties at once. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
.gsap-on .reveal{transition:none}
/* Parallax needs overscan: the wash is taller than its frame so it can drift
   without ever exposing an edge. ±6% of a 118% box stays covered at both ends. */
.gsap-on .thumb .ph{top:-9%;height:118%;bottom:auto}
/* Word-mask for the hero tagline. .hw clips, .hwi is what actually moves. */
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.hwi{display:inline-block;will-change:transform}

/* ---------- spring ownership boundaries (.sp-on) ----------
   The solver writes inline styles, which beat every rule below, so the only
   real risk is CSS *transitioning* a property a spring is already driving —
   that double-eases and reads as mush. Each rule surrenders exactly one
   property and no more. .sp-on is added only when physics is actually running,
   so under reduced motion every original transition stays in charge.

   Deliberately NOT surrendered:
   - .card and .tile transforms stay with GSAP (they are .reveal targets), which
     is why the hover springs drive .card .thumb and .tile .tw instead.
   - .quick keeps its CSS reveal transform; the press spring drives an inner
     span, so the two never touch the same node.
   - .fav keeps its background transition for the gold fill on save; only
     transform goes to the spring. */
.sp-on .card .fav{transition:background .18s}
.sp-on .tile .tw{transition:none}
.sp-on .toast{transition:none}
.sp-on .drawer,.sp-on .drawer .panel{transition:none}
/* The press target inside a button. Inline-block or the scale does nothing. */
.sp-i{display:inline-block}

/* ============= RESPONSIVE ============= */
@media(max-width:1000px){
  .prow,.insta-grid{grid-template-columns:repeat(3,1fr)}
  .prow .card:nth-child(n+4){display:none}
  .prow.show-all .card:nth-child(n+4){display:block}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:820px){
  .nav-links{display:none}
  .nav-inner{grid-template-columns:auto 1fr auto}
  .brand{justify-self:start}
  .nav-toggle{display:block}
  .trust-grid{grid-template-columns:1fr 1fr}
  .hero-figure{display:none}
}
@media(max-width:620px){
  .prow{grid-template-columns:1fr 1fr;gap:14px}
  .insta-grid{grid-template-columns:repeat(3,1fr)}
  .insta-grid .igcell:nth-child(n+4){display:none}
  .tiles{grid-template-columns:1fr}
  .capture{left:12px;right:12px;bottom:12px;max-width:none}
  .capture label{display:none}
  .foot-top{grid-template-columns:1fr}
  .foot-bottom{justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none;transition:none}
  .gsap-on .thumb .ph{top:0;height:100%;bottom:0}
}
/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:70;background:rgba(29,29,27,.5);opacity:0;pointer-events:none;transition:opacity .3s}
.drawer.open{opacity:1;pointer-events:auto}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(80vw,320px);background:var(--ground);padding:78px 28px 28px;transform:translateX(100%);transition:transform .32s ease;box-shadow:var(--shadow)}
.drawer.open .panel{transform:none}
.drawer .panel a{display:block;font-size:1.05rem;padding:14px 0;border-bottom:1px solid var(--line);letter-spacing:.06em}
.drawer .panel a .dot::after{color:var(--gold-deep)}
.drawer .close{position:absolute;top:20px;right:22px;background:none;border:0;font-size:1.8rem;cursor:pointer;color:var(--ink)}

/* ==========================================================================
   MULTI-PAGE ADDITIONS
   Everything below was added when the single homepage was split into eight
   pages. It is appended rather than woven in so it is obvious what is new, and
   so the original homepage rules stay exactly as they were verified.
   ========================================================================== */

/* ---------- skip link ----------
   Visible only on keyboard focus. Without it, a keyboard or screen-reader user
   has to walk the entire nav and drawer on every page before reaching content. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:12px 20px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:12px;top:12px;outline:2px solid var(--gold);outline-offset:2px}

/* ---------- images that used to be background washes ----------
   The markup now uses real <img> so every slot can carry alt text. These three
   rules put the img exactly where the old decorative div sat. object-fit:cover is
   the load-bearing part: without it a real photograph at a different aspect ratio
   than the placeholder would stretch instead of crop. */
.card .thumb .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .tw{width:100%;height:100%;object-fit:cover}
.igcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- h1 on inner pages ----------
   The homepage h1 is the hero tagline. Every other page puts its h1 inside
   .sec-head, which was only ever styled for h2. */
.sec-head h1{font-size:clamp(2rem,5vw,3.4rem);margin-top:10px}
.wrap.narrow{max-width:820px}

/* ---------- breadcrumbs ---------- */
.crumbs{border-bottom:1px solid var(--line);background:var(--ground)}
.crumbs ol{list-style:none;margin:0;padding:14px 0;display:flex;flex-wrap:wrap;gap:6px;
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"/";color:var(--line-strong);margin-right:2px}
.crumbs a{color:var(--ink-soft);border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ---------- nav: waitlist CTA + current page ---------- */
.nav-cta{padding:9px 16px;border-radius:999px;background:var(--gold);color:var(--ink);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  white-space:nowrap;transition:background .2s,transform .2s}
.nav-cta:hover{background:var(--gold-hi);transform:translateY(-1px)}
/* The active page is marked with a gold underdot rather than a colour change,
   because gold as text on this ground measures 2.93:1 and fails. */
.nlink[aria-current]{font-weight:500}
.nlink[aria-current]::after{content:"·";color:var(--gold-deep);font-size:1.6em;line-height:0;
  margin-left:5px;vertical-align:middle}
.drawer .dot[aria-current]{font-weight:500}

/* ---------- hero: two CTAs above the fold ---------- */
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.hero-note{margin:16px 0 0;font-size:.82rem;color:rgba(255,255,255,.78);max-width:34ch}

/* ---------- prose pages (about, privacy, thank you) ---------- */
.prose{max-width:64ch;margin:0 auto}
.prose p{margin:0 0 1.15em;color:var(--ink-soft)}
.prose strong{color:var(--ink);font-weight:500}
.prose h2{font-size:clamp(1.3rem,2.6vw,1.75rem);margin:2em 0 .7em;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose a{color:var(--ink);border-bottom:1px solid var(--gold);transition:background .18s}
.prose a:hover{background:rgba(168,142,55,.16)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:var(--card);padding:2px 6px;border-radius:4px}
.prose .lead-in{font-size:1.1rem;color:var(--ink)}
.prose .upd{font-size:.8rem;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:16px}
.cap-note{display:block;font-size:.78rem;color:var(--ink-faint);margin-top:4px;font-style:italic}

.ctarow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:clamp(24px,4vw,36px) 0 0}

/* ---------- shop: category rail + per-category grids ---------- */
.catrail{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--line-strong);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;transition:background .2s,color .2s,transform .2s}
.chip span{font-size:.68rem;color:var(--ink-faint);letter-spacing:.04em}
.chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px)}
.chip:hover span{color:var(--gold-hi)}
.sec-cat{padding-top:clamp(38px,5vw,60px);padding-bottom:clamp(38px,5vw,60px)}
/* Centre however many pieces a category actually has, instead of stranding two
   cards at one-fifth width against three empty columns. */
.prow-cat{grid-template-columns:repeat(auto-fit,minmax(180px,220px));justify-content:center}

/* ---------- FAQ accordion ----------
   Native <details>. It works with JavaScript disabled, is keyboard-operable and
   announced correctly for free, and a link to a closed panel opens it. */
.faq{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;
  padding:20px 2px;font-size:1.02rem;font-weight:500;color:var(--ink)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";flex:0 0 12px;width:12px;height:12px;margin-left:auto;margin-top:7px;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .22s}
.fq[open] summary::after{transform:rotate(-135deg)}
.fq summary:hover{color:var(--gold-deep)}
.fq summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px}
.fq summary span{flex:1}
.fq .fa{padding:0 2px 22px}
.fq .fa p{margin:0;color:var(--ink-soft);max-width:62ch}
.fq[target]{background:var(--ground-2)}
/* A draft answer is marked in the page as well as excluded from the structured
   data, so nobody reads a placeholder policy and believes it. */
.fq[data-draft] summary span::after{content:"draft";margin-left:10px;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--line);
  padding:3px 7px;border-radius:999px;vertical-align:middle;font-weight:500}
.draft-note{margin:10px 0 0;font-size:.78rem;color:var(--ink-faint);font-style:italic}
.faq-foot{margin:clamp(26px,4vw,38px) 0 0;text-align:center;color:var(--ink-soft);font-size:.92rem}
.faq-foot a{border-bottom:1px solid var(--gold)}

/* ---------- reviews ----------
   .rev-empty is what ships today. .rev-grid / .rev are written and ready for the
   day real customer words exist; swapping the wrapper class is the whole change. */
.reviews{background:var(--ground-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reviews .rev-empty,.reviews .rev-grid{max-width:760px;margin-left:auto;margin-right:auto}
.rev-empty{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,4vw,40px)}
.rev-lead{margin:0 0 1em;font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.3;color:var(--ink)}
.rev-empty p{margin:0 0 1em;color:var(--ink-soft)}
.rev-promise{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rev-promise li{position:relative;padding-left:22px;color:var(--ink-soft);font-size:.95rem}
.rev-promise li::before{content:"·";position:absolute;left:2px;top:-.25em;color:var(--gold-deep);font-size:1.9em;line-height:1}
.rev-promise strong{color:var(--ink);font-weight:500}
.rev-promise a{border-bottom:1px solid var(--gold)}
.rev-cta{margin:clamp(22px,3vw,30px) 0 0}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2vw,22px)}
.rev{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.rev blockquote{margin:0 0 14px;color:var(--ink);font-size:.98rem}
.rev figcaption{font-size:.78rem;color:var(--ink-faint);letter-spacing:.06em}
.rev .stars{color:var(--gold-deep);letter-spacing:.14em;font-size:.9rem;margin-bottom:10px}

/* ---------- team photo ---------- */
.teamshot{margin:0}
.teamshot img{width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow-sm)}
.teamshot figcaption{margin-top:14px;text-align:center;font-size:.84rem;color:var(--ink-soft)}

/* ---------- waitlist form ---------- */
.wlform{max-width:520px;margin:0 auto;display:grid;gap:20px}
.wlform .field{display:grid;gap:7px;border:0;padding:0;margin:0;min-width:0}
.wlform label,.wlform legend{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--ink);padding:0}
.wlform .opt{text-transform:none;letter-spacing:.02em;color:var(--ink-faint);font-weight:400;font-size:.8em}
.wlform input[type=email],.wlform input[type=text]{width:100%;padding:14px 16px;border-radius:10px;
  border:1.5px solid var(--line-strong);background:var(--paper);font-family:var(--sans);
  font-size:1rem;color:var(--ink)}
.wlform input::placeholder{color:var(--ink-faint)}
.wlform input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;border-color:var(--gold-deep)}
.wlform .checks{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:4px}
.wlform .checks label{display:inline-flex;align-items:center;gap:8px;text-transform:none;
  letter-spacing:.02em;font-size:.92rem;font-weight:400;color:var(--ink-soft);cursor:pointer}
.wlform .checks input{accent-color:var(--gold-deep);width:17px;height:17px}
.btn-lg{padding:16px 30px;font-size:.8rem}
.formnote{margin:0;font-size:.82rem;color:var(--ink-faint);line-height:1.65}
.formnote a{color:var(--ink-soft);border-bottom:1px solid var(--gold)}
/* Honeypot. Positioned off-screen rather than display:none or type="hidden",
   because the crude bots this catches skip fields a human plausibly cannot see
   but happily fill anything that is technically a visible text input. aria-hidden
   and tabindex="-1" keep it away from screen readers and the tab order. */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none}

/* ---------- 404 ---------- */
/* Both of these pages are a single centred column with nothing to scan past, so
   they get extra vertical room — a short message stranded at the top of a
   full-height viewport reads as a broken page rather than a deliberate one. */
.notfound,.thanks{text-align:center;padding-top:clamp(60px,10vh,120px);padding-bottom:clamp(60px,10vh,120px)}
.notfound .sec-head,.thanks .sec-head{margin-left:auto;margin-right:auto}
.nf-links{max-width:620px;margin:clamp(34px,5vw,52px) auto 0;text-align:center}
.nf-links h2{font-size:1.05rem;margin:0 0 14px;color:var(--ink)}
.nf-links h2+ul{margin-bottom:30px}
.nf-cats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center}
.nf-cats a{display:inline-block;padding:8px 15px;border-radius:999px;border:1px solid var(--line);
  font-size:.82rem;color:var(--ink-soft);transition:background .2s,color .2s,border-color .2s}
.nf-cats a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nf-note{margin:26px 0 0;font-size:.82rem;color:var(--ink-faint)}
.nf-note a{border-bottom:1px solid var(--gold)}

/* ---------- instagram strip note (shown when no social URLs are set) ---------- */
.insta-note{margin:14px auto 0;max-width:44ch;font-size:.88rem;color:var(--ink-soft)}
.insta-note strong{color:var(--ink);font-weight:500}
.igcell{cursor:default}

/* ---------- footer inline links ---------- */
.finline{margin-left:16px;color:rgba(251,250,246,.72);border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s}
.finline:hover{color:var(--paper);border-bottom-color:var(--gold)}

/* ---------- privacy notice bar ----------
   Bottom-anchored and full width so it cannot be mistaken for the sticky email
   capture, which lives at bottom-left. z-index sits above both. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:var(--paper);
  border-top:2px solid var(--gold);box-shadow:0 -14px 40px -20px rgba(29,29,27,.6)}
.consent[hidden]{display:none}
.consent-in{max-width:var(--wrap);margin:0 auto;padding:16px clamp(18px,4vw,40px);
  display:flex;align-items:center;gap:clamp(14px,3vw,32px);flex-wrap:wrap}
.consent p{margin:0;flex:1 1 320px;font-size:.84rem;line-height:1.6;color:rgba(251,250,246,.84)}
.consent strong{color:var(--paper);font-weight:500}
/* On the ink band gold-deep measures ~2.4 and vanishes, so links here use
   gold-hi. Same trap the footer hit. */
.consent a{color:var(--gold-hi);border-bottom:1px solid rgba(198,169,81,.5);white-space:nowrap}
.consent a:hover{border-bottom-color:var(--gold-hi)}
.consent-btns{display:flex;gap:10px;flex-wrap:wrap}
.consent-btns .btn{padding:11px 20px;font-size:.72rem}
.consent-btns .btn-ink{background:var(--gold);color:var(--ink)}
.consent-btns .btn-ink:hover{background:var(--gold-hi)}
.consent-btns .btn-ghost{color:var(--paper);border-color:rgba(251,250,246,.45)}
.consent-btns .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
/* Keep the bar clear of the sticky capture form on small screens. */
@media(max-width:620px){
  .consent-in{padding:14px 16px;gap:12px}
  .consent-btns{width:100%}
  .consent-btns .btn{flex:1}
}

/* ---------- responsive fixes for the new grids ---------- */
@media(max-width:1000px){
  /* .prow hides cards 4+ on tablet, which is right for a five-card homepage row
     and wrong for a shop page — there, hiding stock is the opposite of the goal.
     The extra .prow-cat in the selector out-specifies the original rule without
     needing !important. */
  .prow.prow-cat .card:nth-child(n+4){display:block}
  .prow-cat{grid-template-columns:repeat(auto-fit,minmax(160px,200px))}
}
@media(max-width:820px){
  /* The nav links collapse into the drawer at this width; the waitlist CTA stays
     visible, because it is the one action worth keeping one tap away. */
  .hero-btns .btn{flex:1 1 auto}
}
@media(max-width:620px){
  .nav-cta{padding:8px 12px;font-size:.66rem;letter-spacing:.1em}
  .prow-cat{grid-template-columns:1fr 1fr}
  .crumbs ol{font-size:.7rem}
  .ctarow{flex-direction:column}
  .ctarow .btn{width:100%}
  .foot-bottom .finline{margin:0 8px}
}

/* Reduced motion already blanket-disables transitions further up the sheet; these
   two only exist so the accordion arrow and the consent bar do not animate. */
@media(prefers-reduced-motion:reduce){
  .fq summary::after{transition:none}
  .consent{box-shadow:none}
}