/* ============================================================
   Friends and Family — private list, Las Vegas
   Design system: ink + bone + one gold accent.
   ============================================================ */

@font-face{font-family:'Instrument';src:url('./fonts/instrument-serif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument';src:url('./fonts/instrument-serif-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'InterVar';src:url('./fonts/inter-var.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'PlexMono';src:url('./fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PlexMono';src:url('./fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --serif:'Instrument', 'Iowan Old Style', Georgia, serif;
  --sans:'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:'PlexMono', ui-monospace, 'SF Mono', Menlo, monospace;

  --bg:#F2EFE9;
  --bg-2:#EAE6DE;
  --bg-3:#E2DDD3;
  --fg:#100F0D;
  --fg-2:#57534C;
  --fg-3:#6B655C;
  --line:rgba(16,15,13,.13);
  --line-2:rgba(16,15,13,.26);
  --accent:#75561A;
  --accent-fg:#FFFFFF;
  --accent-soft:rgba(117,86,26,.10);
  --plate:#FAF8F3;
  --shadow:0 1px 2px rgba(16,15,13,.05), 0 12px 34px -18px rgba(16,15,13,.28);
  --ease:cubic-bezier(.22,.61,.20,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1320px;
  --gut:clamp(20px,4.2vw,72px);
  --scheme:light;
}

html[data-theme="dark"]{
  --bg:#0D0C0B;
  --bg-2:#151412;
  --bg-3:#1D1B18;
  --fg:#F3F0EA;
  --fg-2:#B5AFA5;
  --fg-3:#948D82;
  --line:rgba(243,240,234,.14);
  --line-2:rgba(243,240,234,.28);
  --accent:#C8A45C;
  --accent-fg:#0B0A09;
  --accent-soft:rgba(200,164,92,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 44px -20px rgba(0,0,0,.7);
  --scheme:dark;
}

/* Easter egg: After Hours */
html[data-mode="afterhours"]{
  --accent:#D8B45E;
  --accent-fg:#0B0A09;
  --accent-soft:rgba(216,180,94,.14);
  --bg:#0A0A08;
  --bg-2:#121210;
  --bg-3:#191916;
  --fg:#F3F0EA;
  --fg-2:#B5AFA5;
  --fg-3:#948D82;
  --line:rgba(243,240,234,.14);
  --line-2:rgba(243,240,234,.28);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 44px -20px rgba(0,0,0,.7);
  --scheme:dark;
}
html[data-mode="afterhours"] .icon-sun{display:block}
html[data-mode="afterhours"] .icon-moon{display:none}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:var(--scheme)}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;
  font-weight:380;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}
img,video{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-fg)}

/* film grain */
body::after{
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:9000;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::after{opacity:.07}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:clamp(72px,10vw,148px)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- type ---------- */
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.9rem,8.4vw,7.4rem);line-height:.94;letter-spacing:-.024em;
  text-wrap:balance;
}
.display em{font-style:italic}
.h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,5.2vw,4.2rem);line-height:1.02;letter-spacing:-.022em;
  text-wrap:balance;
}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12;letter-spacing:-.018em}
.lede{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.62;color:var(--fg-2);max-width:56ch;font-weight:380}
.body{color:var(--fg-2);max-width:62ch}
.micro{
  font-family:var(--mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.19em;color:var(--fg-3);
}
.num{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:400;
  transition:background-color .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line);
}
.hdr-in{display:flex;align-items:center;gap:clamp(12px,3vw,40px);height:66px}
.mark{
  display:inline-flex;align-items:baseline;gap:.42em;text-decoration:none;
  font-family:var(--serif);font-size:1.22rem;letter-spacing:-.02em;white-space:nowrap;
}
.mark .amp{font-style:italic;color:var(--accent)}
.mark .dot{
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  display:inline-block;margin-left:.15em;transform:translateY(-.32em);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
html[data-mode="afterhours"] .mark .dot{box-shadow:0 0 0 3px var(--accent-soft), 0 0 18px var(--accent);transform:translateY(-.32em) scale(1.3)}
.hdr .nav{display:flex;gap:clamp(14px,1.9vw,28px);margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-2);padding:6px 0;position:relative;transition:color .3s var(--ease);
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--accent);transition:right .45s var(--ease-out)}
.nav a:hover{color:var(--fg)}
.nav a:hover::after{right:0}
.hdr-act{display:flex;align-items:center;gap:10px;margin-left:clamp(8px,1.5vw,20px)}

/* buttons */
.btn{
  --pad:14px 22px;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:var(--pad);border-radius:999px;border:1px solid transparent;
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;background:none;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), opacity .3s;
  white-space:nowrap;
}
.btn:active{transform:scale(.975)}
.btn-solid{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn-solid:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn-line{border-color:var(--line-2);color:var(--fg)}
.btn-line:hover{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.btn-ghost{color:var(--fg-2);padding:10px 12px}
.btn-ghost:hover{color:var(--fg)}
.btn-sm{--pad:10px 16px;font-size:11px}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn-full{width:100%}

.icobtn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;background:none;color:var(--fg-2);
  transition:border-color .3s, color .3s, background-color .3s, transform .5s var(--ease);
}
.icobtn:hover{color:var(--fg);border-color:var(--line-2)}
.icobtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
html[data-theme="dark"] .icon-sun{display:block}
html[data-theme="dark"] .icon-moon{display:none}
.icon-sun{display:none}
.icon-moon{display:block}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:#0A0908;color:#F4F1EB;
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:96px;
}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video,.hero-media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) contrast(1.06) brightness(.72);
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,9,8,.86) 0%, rgba(10,9,8,.36) 34%, rgba(10,9,8,.72) 74%, rgba(10,9,8,.97) 100%),
    radial-gradient(120% 76% at 12% 88%, rgba(10,9,8,.9), transparent 62%);
}
.hero-in{padding-bottom:clamp(38px,5.5vw,68px);width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,60px)}
@media(min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.55fr) minmax(240px,.85fr);align-items:end}}
.hero .display{color:#FBF9F5;max-width:15ch}
.hero .display em{color:#CFCABF}
.hero-eyebrow{color:rgba(244,241,235,.62);margin-bottom:clamp(20px,3vw,34px)}
.hero-eyebrow span{color:rgba(244,241,235,.9)}
.hero-sub{
  margin-top:clamp(20px,2.6vw,30px);max-width:50ch;
  color:rgba(244,241,235,.78);font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.62;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.2vw,38px)}
.hero .btn-solid{background:#FBF9F5;color:#0A0908;border-color:#FBF9F5}
.hero .btn-solid:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.hero .btn-line{border-color:rgba(244,241,235,.34);color:#FBF9F5}
.hero .btn-line:hover{background:#FBF9F5;color:#0A0908;border-color:#FBF9F5}

.manifest{border-top:1px solid rgba(244,241,235,.22);padding-top:16px}
.manifest dl{margin:0;display:grid;gap:0}
.manifest .row{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid rgba(244,241,235,.11);
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.manifest .row dt{color:rgba(244,241,235,.5)}
.manifest .row dd{margin:0;color:#FBF9F5;text-align:right}

.hero-foot{border-top:1px solid rgba(244,241,235,.16)}
.hero-foot .wrap{display:flex;align-items:center;justify-content:center;height:96px}
.hero-foot .micro{color:rgba(244,241,235,.72)}
.scroll-cue{
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;padding:8px 20px;
}
.scroll-cue .micro{letter-spacing:.22em}
.scroll-cue i{
  width:1px;height:34px;background:rgba(244,241,235,.65);display:block;
  animation:cue 2.4s var(--ease) infinite;
}
.scroll-cue:hover i{background:var(--accent)}
.scroll-cue:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@keyframes cue{0%,100%{transform:scaleY(.25);transform-origin:top;opacity:.35}50%{transform:scaleY(1);opacity:1}}

/* The stock heading. Was a micro label that clipped against the marquee rule; now it has room
   and reads as a section title, which is what it always was. */
.stock-head{
  padding:clamp(48px,6vw,84px) 0 clamp(20px,2.4vw,30px);
  text-align:center;
}
.stock-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.02em;
  margin:0;color:var(--fg);
}
@media (prefers-reduced-motion:reduce){.scroll-cue i{animation:none}}

/* ---------- marquee ---------- */
.marq{border-block:1px solid var(--line);overflow:hidden;padding-block:16px;background:var(--bg)}
.marq-track{display:flex;width:max-content;animation:marq 46s linear infinite}
.marq-track span{
  font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.9rem);letter-spacing:-.02em;
  padding-inline:clamp(18px,2.4vw,34px);white-space:nowrap;color:var(--fg-2);
}
/* piece count — sits on the baseline after a middot, in the accent, so it reads while it scrolls */
.marq-track span .marq-n{
  font-family:var(--mono);font-weight:600;font-size:1em;letter-spacing:.02em;
  vertical-align:baseline;line-height:1;margin-left:.42em;color:var(--accent);top:0;
}
.marq-track span .marq-n::before{content:"·";margin-right:.42em;color:var(--fg-3)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- reveal ---------- */
/* Reveals are opt-in: without JS (or before it boots) content is always visible. */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
html.js .rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.4s}.rv[data-d="6"]{transition-delay:.48s}

/* hero load-in */
.li{opacity:0;transform:translateY(26px);animation:li 1.1s var(--ease-out) forwards}
@keyframes li{to{opacity:1;transform:none}}
.li[data-d="1"]{animation-delay:.15s}.li[data-d="2"]{animation-delay:.3s}
.li[data-d="3"]{animation-delay:.45s}.li[data-d="4"]{animation-delay:.6s}
.li[data-d="5"]{animation-delay:.75s}

/* ---------- editorial two-col ---------- */
.split{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}}
.sect-label{display:flex;align-items:center;gap:12px;margin-bottom:clamp(24px,3vw,36px)}
.sect-label::after{content:"";flex:1;height:1px;background:var(--line)}

.why-quote{
  font-family:var(--serif);font-size:clamp(1.55rem,3vw,2.5rem);line-height:1.16;letter-spacing:-.02em;
  text-wrap:balance;
}
.why-quote em{font-style:italic;color:var(--accent)}
.pill-notes{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:clamp(28px,3.4vw,44px)}
@media(min-width:720px){.pill-notes{grid-template-columns:repeat(3,1fr)}}
.pill-notes div{background:var(--bg);padding:22px 22px 26px}
.pill-notes h4{font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:8px}
.pill-notes p{font-size:14px;line-height:1.55;color:var(--fg-2)}

/* ---------- product plate + card ---------- */
.plate{
  position:relative;background:var(--plate);border-radius:10px;overflow:hidden;
  aspect-ratio:4/5;display:grid;place-items:center;
}
.plate img{
  width:100%;height:100%;object-fit:contain;padding:7% 9%;
  mix-blend-mode:multiply;
  transition:transform 1.05s var(--ease-out), filter .6s var(--ease);
  will-change:transform;
}
.card:hover .plate img{transform:scale(1.045)}
.stamp{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;background:#0D0C0B;color:#F4F1EB;
}
.stamp[data-s="pending"]{background:var(--accent);color:var(--accent-fg)}
.stamp[data-s="sold"]{background:#0D0C0B;color:#F4F1EB}
.plate.dim img{filter:grayscale(1) opacity(.5)}

.card{display:flex;flex-direction:column}
.card .cap{padding-top:16px;display:flex;flex-direction:column;flex:1}
.card .brandline{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card .name{font-family:var(--serif);font-size:clamp(1.18rem,1.55vw,1.5rem);line-height:1.14;letter-spacing:-.018em;margin-top:6px}
.card .spec{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);margin-top:9px;line-height:1.75}
.card .foot{
  margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  position:relative;
}
.card .foot::before{content:"";position:absolute;top:0;left:0;right:100%;height:1px;background:var(--fg);opacity:.55;transition:right .7s var(--ease-out)}
.card:hover .foot::before{right:0}
.card .foot::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);z-index:-1}
.price{font-family:var(--sans);font-size:1.06rem;font-weight:560;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.card .rsv{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:0;padding:6px 0;cursor:pointer;color:var(--accent);
  display:inline-flex;align-items:center;gap:.6em;transition:gap .4s var(--ease), opacity .3s;
}
.card .rsv:hover{gap:1.1em}
.card .rsv svg{width:14px;height:9px;fill:none;stroke:currentColor;stroke-width:1.4}
.card .rsv[disabled]{color:var(--fg-3);cursor:default;opacity:.85}
.card .rsv[disabled]:hover{gap:.6em}

/* featured editorial grid */
.feat{display:grid;gap:clamp(34px,4.4vw,70px) clamp(20px,2.4vw,32px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.feat{grid-template-columns:minmax(0,1fr);gap:44px}}
@media(min-width:960px){
  .feat{grid-template-columns:repeat(12,minmax(0,1fr))}
  .feat > *:nth-child(1){grid-column:1/6}
  .feat > *:nth-child(2){grid-column:7/11;margin-top:clamp(40px,7vw,110px)}
  .feat > *:nth-child(3){grid-column:1/5}
  .feat > *:nth-child(4){grid-column:6/12;margin-top:clamp(-90px,-6vw,-20px)}
  .feat > *:nth-child(5){grid-column:2/6;margin-top:clamp(20px,3vw,50px)}
  .feat > *:nth-child(6){grid-column:8/13}
}

/* ---------- vegas band ---------- */
.band{position:relative;overflow:hidden;background:#0A0908;color:#F4F1EB;isolation:isolate}
.band .wrap{position:relative;z-index:2;padding-block:clamp(78px,11vw,150px)}
.ridge{position:absolute;inset:auto 0 0 0;width:100%;height:62%;z-index:1;opacity:.85}
.band-sky{position:absolute;inset:0;z-index:0;background:
  radial-gradient(58% 30% at 50% 68%, rgba(200,164,92,.13), transparent 70%),
  radial-gradient(120% 54% at 50% 76%, rgba(62,44,20,.32), transparent 66%),
  linear-gradient(180deg,#07070A 0%,#0B0A0A 46%,#17130E 66%,#090909 100%);}
html[data-mode="afterhours"] .band-sky{background:
  radial-gradient(58% 30% at 50% 68%, rgba(216,180,94,.14), transparent 70%),
  linear-gradient(180deg,#07070A 0%,#0A0A08 46%,#1A150D 66%,#080807 100%);}
.stars{position:absolute;inset:0 0 42% 0;z-index:0;opacity:.5}
.band .h2{color:#FBF9F5;max-width:17ch}
.band .lede{color:rgba(244,241,235,.72)}
.band .micro{color:rgba(244,241,235,.55)}

/* ---------- steps ---------- */
.steps{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--bg);padding:clamp(26px,3vw,40px) clamp(20px,2vw,30px) clamp(34px,4vw,54px);position:relative;overflow:hidden}
.step .n{font-family:var(--serif);font-size:clamp(2.6rem,4.4vw,4rem);line-height:1;color:var(--line-2);letter-spacing:-.03em;display:block;margin-bottom:clamp(18px,2.4vw,34px);transition:color .6s var(--ease)}
.step:hover .n{color:var(--accent)}
.step h3{font-size:15px;font-weight:600;letter-spacing:-.005em;margin-bottom:10px}
.step p{font-size:14.5px;line-height:1.6;color:var(--fg-2)}

/* ---------- catalogue ---------- */
.filters{
  display:flex;flex-wrap:wrap;gap:10px 8px;align-items:center;
  padding-block:18px;border-bottom:1px solid var(--line);
  position:sticky;top:66px;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:60;
}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;background:none;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);
  transition:border-color .3s,background-color .3s,color .3s;
}
.chip:hover{border-color:var(--line-2);color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.selwrap{position:relative;margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sel{
  appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:999px;
  padding:9px 34px 9px 15px;background:none;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B655C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.sel:hover{border-color:var(--line-2);color:var(--fg)}
.sel option{background:var(--bg);color:var(--fg)}

.grid{
  display:grid;gap:clamp(30px,3.4vw,52px) clamp(18px,2.2vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,236px),1fr));
  padding-top:clamp(34px,4vw,56px);
  /* A two-wide diptych can leave a one-column hole when it wraps; dense packing lets a later
     single piece fall back into it, so the grid stays tight without ever splitting a pair. */
  grid-auto-flow:row dense;
}
/* A paired scene: two cards that are one photograph split in two. The wrapper spans two grid
   columns and is itself two equal columns, so the halves sit side by side — same size, same
   gutter as any two neighbours — at every screen width, and can never break across a row. */
.pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);grid-column:span 2;
}
.pair > .card{min-width:0}
.card.hidden{display:none}
.empty{padding:70px 0;text-align:center;color:var(--fg-3);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.count{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- join ---------- */
.join{background:var(--bg-2)}
.join-card{
  border:1px solid var(--line);border-radius:18px;background:var(--bg);
  padding:clamp(26px,3.4vw,44px);box-shadow:var(--shadow);
}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--fg-3);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;font-size:15px;transition:border-color .3s,background-color .3s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--bg)}
.field textarea{resize:vertical;min-height:88px;line-height:1.55}
.getlist{list-style:none;padding:0;margin:0 0 clamp(24px,3vw,34px);display:grid;gap:11px}
.getlist li{display:flex;gap:12px;font-size:14.6px;line-height:1.55;color:var(--fg-2);align-items:flex-start}
.getlist li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:.55em}
.finep{font-size:12.5px;color:var(--fg-3);line-height:1.55;margin-top:14px}

/* ---------- share ---------- */
.share-in{text-align:center;max-width:760px;margin-inline:auto}
.share-in .h2{margin-inline:auto}
.share-in .lede{margin-inline:auto;text-align:center}
.linkbox{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  border:1px solid var(--line-2);border-radius:999px;padding:8px 8px 8px 20px;
  margin:clamp(26px,3vw,36px) auto 0;max-width:520px;
}
.linkbox code{font-family:var(--mono);font-size:12px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding-block:clamp(46px,5vw,72px) 34px;background:var(--bg)}
.ftr-grid{display:grid;gap:clamp(28px,4vw,50px);grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr h4{font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px;font-weight:500}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ftr a,.ftr li{font-size:14.5px;color:var(--fg-2);text-decoration:none}
.ftr a:hover{color:var(--fg)}
.ftr .ph{color:var(--fg-3);font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.ftr-btm{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-top:clamp(36px,5vw,64px);padding-top:22px;border-top:1px solid var(--line)}

/* ---------- modal ---------- */
.ovl{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;
  background:color-mix(in srgb,#080706 62%,transparent);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.ovl.open{opacity:1;pointer-events:auto}
.modal{
  width:min(560px,100%);max-height:min(88svh,760px);overflow:auto;overscroll-behavior:contain;
  background:var(--bg);border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,3.4vw,38px);box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  transform:translateY(16px) scale(.985);transition:transform .5s var(--ease-out);
}
.ovl.open .modal{transform:none}
.modal-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:clamp(18px,2.4vw,26px)}
.modal .h3{max-width:22ch}
/* welcome modal: the three beats, each fenced off by a hairline, the kicker in the accent */
.wl-beat{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.wl-beat .micro{color:var(--accent);margin-bottom:9px}
.wl-beat .body{margin:0}
.wl-link{margin-top:24px}
.x{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;display:grid;place-items:center;color:var(--fg-2);transition:.3s}
.x:hover{border-color:var(--fg);color:var(--fg)}
.x svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none}

/* onboarding */
.prog{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:22px}
.prog i{display:block;height:100%;background:var(--accent);width:0;transition:width .6s var(--ease-out)}
.qstep{animation:qin .5s var(--ease-out) both}
@keyframes qin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.qhead{margin-bottom:6px}
.qsub{font-size:14px;color:var(--fg-3);margin-bottom:20px}
.opts{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}
.opt{
  border:1px solid var(--line);border-radius:999px;padding:11px 17px;cursor:pointer;background:none;
  font-size:14px;color:var(--fg-2);transition:.28s var(--ease);text-align:left;
}
.opt:hover{border-color:var(--line-2);color:var(--fg)}
.opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.qnav{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.summary{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:24px}
.summary .r{background:var(--bg);padding:13px 16px;display:flex;gap:16px;justify-content:space-between;align-items:baseline}
.summary .r dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);flex:0 0 auto}
.summary .r dd{margin:0;font-size:14px;text-align:right;color:var(--fg)}

.rsv-preview{display:flex;gap:16px;align-items:center;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.rsv-preview .plate{width:88px;flex:0 0 auto;aspect-ratio:4/5;border-radius:8px}
.rsv-preview .plate img{padding:6%}
.note{
  border-left:2px solid var(--accent);background:var(--accent-soft);
  padding:14px 16px;border-radius:0 8px 8px 0;font-size:13.6px;line-height:1.55;color:var(--fg-2);margin-bottom:22px;
}

/* drawer */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:1000;
  background:var(--bg);border-left:1px solid var(--line);
  transform:translateX(101%);transition:transform .55s var(--ease-out);
  display:flex;flex-direction:column;box-shadow:-30px 0 70px -30px rgba(0,0,0,.5);
}
.drawer.open{transform:none}
.drawer-hd{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px}
.drawer-bd{padding:24px;overflow:auto;flex:1}
.rlist{display:grid;gap:14px}
.ritem{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px}
.ritem .plate{width:56px;flex:0 0 auto;aspect-ratio:4/5;border-radius:6px}
.ritem .plate img{padding:5%}
.ritem .rn{font-size:14px;font-weight:500;line-height:1.3}
.ritem .rs{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:5px}
.ritem .rp{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:560;font-size:14px}

/* toast */
.toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:1200;display:grid;gap:10px;width:min(440px,calc(100vw - 32px));pointer-events:none}
.toast{
  background:var(--fg);color:var(--bg);border-radius:12px;padding:13px 18px;
  font-size:13.8px;line-height:1.45;box-shadow:0 20px 44px -18px rgba(0,0,0,.6);
  animation:tin .5s var(--ease-out) both;
}
.toast b{font-weight:600}
@keyframes tin{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.toast.out{animation:tout .45s var(--ease) forwards}
@keyframes tout{to{opacity:0;transform:translateY(10px) scale(.98)}}

/* utility */
.mt-s{margin-top:clamp(18px,2.2vw,28px)}
.mt-m{margin-top:clamp(26px,3.4vw,44px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-mob{display:none}
@media(max-width:900px){
  .hdr .nav{display:none}
  .nav-mob{display:inline-flex}
  .hdr-in{height:60px}
  .filters{top:60px}
  .hero{padding-top:80px}
}
@media(max-width:520px){
  .btn{--pad:13px 18px;font-size:11.5px}
  .filters{gap:8px 6px}
  .selwrap{margin-left:0;width:100%}
  .sel{flex:1;min-width:0}
  .linkbox{padding-left:14px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html.js .rv,.rv{opacity:1 !important;transform:none !important}
  html.js .li,.li{opacity:1 !important;transform:none !important}
  .marq-track{animation:none;transform:none}
}

.linkish{
  background:none;border:0;padding:0;cursor:pointer;color:var(--accent);
  font:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.linkish:hover{color:var(--fg)}

/* ---------- header over the dark hero ---------- */
:root{--on-dark-accent:#D0A85F}
html[data-mode="afterhours"]{--on-dark-accent:#D8B45E}
.hdr:not(.stuck) .mark{color:#FBF9F5}
.hdr:not(.stuck) .mark .amp{color:var(--on-dark-accent)}
.hdr:not(.stuck) .mark .dot{background:var(--on-dark-accent)}
.hdr:not(.stuck) .nav a{color:rgba(244,241,235,.74)}
.hdr:not(.stuck) .nav a:hover{color:#FBF9F5}
.hdr:not(.stuck) .nav a::after{background:var(--on-dark-accent)}
.hdr:not(.stuck) .icobtn{border-color:rgba(244,241,235,.3);color:rgba(244,241,235,.85)}
.hdr:not(.stuck) .icobtn:hover{color:#0A0908;background:#FBF9F5;border-color:#FBF9F5}
.hdr:not(.stuck) #joinTop{background:#FBF9F5;color:#0A0908;border-color:#FBF9F5}
.hdr:not(.stuck) #joinTop:hover{background:var(--on-dark-accent);border-color:var(--on-dark-accent);color:#0A0908}

/* ---------- featured grid: cards size to their own content ---------- */
.feat > *{align-self:start}

/* ---------- rhythm ---------- */
#how{padding-bottom:clamp(0px,1vw,8px)}
#catalogue{padding-top:clamp(58px,7vw,104px)}
.steps{border-radius:0}

/* ---------- band detail column ---------- */
.band-grid{display:grid;gap:clamp(34px,5vw,60px);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.band-grid{grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);align-items:end}}
.band .manifest{border-top-color:rgba(244,241,235,.26)}
.ridge{opacity:1;height:56%}

/* ---------- scroll lock (html is the scroller; keeps body overflow-x intact) ---------- */
html.no-scroll{overflow:hidden}

/* ---------- compact header on small screens ---------- */
.lbl-short{display:none}
@media(max-width:900px){
  .hdr-act{margin-left:auto}
  .filters{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:none}
}
@media(max-width:600px){
  .mark{font-size:1.04rem}
  .hdr-act{gap:7px}
  .icobtn{width:33px;height:33px}
  #acctBtn{display:none}
  #joinTop{--pad:10px 15px;font-size:10.5px;letter-spacing:.07em}
  .lbl-full{display:none}
  .lbl-short{display:inline}
}
@media(max-width:640px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}
  .pair{gap:14px}
  .grid .card .name{font-size:1.02rem}
  .grid .card .spec{font-size:9.5px;letter-spacing:.1em;line-height:1.7}
  .grid .card .rsv{font-size:10px;letter-spacing:.1em}
  .grid .card .brandline .micro{font-size:9.5px;letter-spacing:.12em}
  .grid .price{font-size:.98rem}
  .grid .card .foot{gap:8px}
}

/* select chevron follows the theme */
html[data-theme="dark"] .sel,html[data-mode="afterhours"] .sel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23948D82' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* ============================================================
   PASS 02 — the tailor's tape seam, contrast, rhythm, footer
   ============================================================ */

:root{
  /* left edge of the text column, and the seam that runs 34px outside it */
  --colx: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  --seamx: calc(var(--colx) - 34px);
  --seam-c: rgba(16,15,13,.62);
  --fg-3:#585349;                     /* was #6B655C — now 5.9:1 on cream */
}
html[data-theme="dark"],html[data-mode="afterhours"]{
  --fg-3:#ACA599;                     /* 7.4:1 on ink */
  --seam-c:rgba(243,240,234,.55);
}



/* ---------- in-flow marginalia: stitched seam nodes between sections ---------- */
.stitch{position:relative;height:clamp(72px,8vw,116px);color:var(--fg-3)}
.stitch-line{
  position:absolute;left:var(--seamx);top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(to bottom, currentColor 0 5px, transparent 5px 11px);
  opacity:.6;
}
.stitch-line--b{display:none}
.stitch-note{
  position:absolute;left:calc(var(--seamx) + 16px);top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);white-space:nowrap;
}
.stitch-note b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.stitch-note::before{
  content:"";position:absolute;left:-19px;top:50%;width:7px;height:7px;
  margin-top:-3.5px;border:1px solid var(--accent);transform:rotate(45deg);
  background:var(--bg);
}
/* below the desktop seam: the seam turns and runs through the page centre */
@media(max-width:1139px){
  .stitch{
    height:auto;padding:clamp(26px,4.4vw,40px) var(--gut);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  }
  .stitch-line{
    position:static;width:1px;height:22px;flex:0 0 auto;
    background:repeating-linear-gradient(to bottom, currentColor 0 4px, transparent 4px 9px);
  }
  .stitch-line--b{display:block}
  .stitch-note{
    position:relative;transform:none;white-space:normal;text-align:center;
    font-size:10.5px;letter-spacing:.17em;line-height:1.8;max-width:34ch;
  }
  /* the knot sits on the thread, centred in the gap above the note */
  .stitch-note::before{left:50%;margin-left:-4px;top:-10px;margin-top:0}
}
@media(max-width:520px){
  .stitch-note{font-size:10px;letter-spacing:.14em}
}

/* ---------- rhythm: the seam under the marquee carries that gap; elsewhere the
   sections carry their own ---------- */
.sect{padding-block:clamp(58px,7.4vw,116px)}
.band .wrap{padding-block:clamp(70px,9.5vw,132px)}
#why{padding-bottom:clamp(10px,1.4vw,18px)}
#how{padding-bottom:clamp(30px,4vw,64px)}
#catalogue{padding-top:clamp(30px,4vw,64px)}
#selection{padding-bottom:clamp(4px,1vw,12px)}
#share{padding-top:clamp(56px,7vw,104px) !important}

/* ---------- contrast: hero meta + sub-CTAs ---------- */
.hero-eyebrow{color:rgba(248,245,239,.92);font-weight:500;font-size:11.5px}
.hero-eyebrow span{color:var(--on-dark-accent)}
.hero-sub{color:rgba(250,247,242,.9);font-weight:400}
.hero .btn-line{border-color:rgba(244,241,235,.62);color:#FFFDF9;font-weight:600}
.hero .btn-line:hover{background:#FBF9F5;color:#0A0908;border-color:#FBF9F5}
.hero-foot .micro{color:rgba(248,245,239,.86);font-weight:500;font-size:11px}
.scroll-cue i{background:rgba(248,245,239,.85)}
.manifest .row{font-size:11.5px}
.manifest .row dt{color:rgba(248,245,239,.74)}
.manifest .row dd{color:#FFFDF9;font-weight:500}
.band .lede{color:rgba(250,247,242,.88)}
.band .micro{color:rgba(248,245,239,.86);font-weight:500}
.band .manifest .row dt{color:rgba(248,245,239,.74)}

/* ---------- contrast: micro + card meta ----------
   NB: no colour declared here — .micro must not out-cascade the on-dark
   overrides above. Legibility comes from the darkened --fg-3 token. */
.micro{font-size:11.5px}
.card .brandline .micro{font-size:11px;color:var(--fg-2);font-weight:500}
.card .name{margin-top:8px}
.card .spec{font-size:11px;letter-spacing:.11em;color:var(--fg-2);margin-top:10px;line-height:1.7}
.price{font-size:1.14rem;font-weight:600;color:var(--fg)}
.card .rsv{font-size:11.5px;font-weight:600;letter-spacing:.13em;padding:8px 0}
.card .rsv[disabled]{color:var(--fg-2);opacity:1}
.count{font-size:11.5px;color:var(--fg-2)}
.chip,.sel{font-size:11px;color:var(--fg-2)}
.chip{padding:10px 16px}
.sel{padding:10px 34px 10px 16px}
.step p{color:var(--fg-2);font-size:15px}
.pill-notes p{font-size:14.6px;color:var(--fg-2)}
.finep{color:var(--fg-2);font-size:13px}
.linkbox code{color:var(--fg-2);font-size:12.5px}

/* fallback plate when a photo is missing — never an empty white box */
.plate.noimg::after{
  content:attr(data-brand);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#8B857A;background:var(--plate);text-align:center;padding:16px;
}

/* ---------- nav utility icons: bigger, higher contrast ---------- */
.icobtn{width:42px;height:42px;border-color:var(--line-2);color:var(--fg)}
.icobtn svg{width:18px;height:18px;stroke-width:1.7}
.icobtn:hover{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.hdr:not(.stuck) .icobtn{border-color:rgba(244,241,235,.62);color:#FFFDF9}
.hdr:not(.stuck) .nav a{color:rgba(248,245,239,.9)}
.nav a{font-size:12.5px;font-weight:600}

/* ---------- footer ---------- */
.ftr{padding-block:clamp(56px,6.5vw,88px) 30px}
.ftr-signoff{
  padding-bottom:clamp(40px,5vw,64px);margin-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid var(--line);
  display:grid;gap:clamp(20px,2.6vw,30px);justify-items:start;
}
.ftr-line{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.85rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.022em;
  text-wrap:balance;color:var(--fg);
}
.ftr-line em{font-style:italic;color:var(--accent)}
/* the CTA is a link inside .ftr — it must beat `.ftr a{color:var(--fg-2)}` */
.ftr a.ftr-cta{--pad:16px 32px;font-size:12.5px;color:var(--accent-fg);background:var(--accent);border-color:var(--accent)}
.ftr a.ftr-cta:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.ftr-grid{gap:clamp(30px,4vw,56px)}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.25fr .8fr 1.15fr}}
.ftr .mark{font-size:1.5rem}
.ftr-blurb{margin-top:16px;font-size:15px;line-height:1.62;color:var(--fg-2);max-width:36ch}
.ftr h4{font-size:11px;letter-spacing:.2em;color:var(--fg-3);margin-bottom:18px}
.ftr ul{gap:12px}
.ftr a,.ftr li{font-size:16px;color:var(--fg-2);line-height:1.5}
.ftr-col a{
  position:relative;display:inline-block;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .45s var(--ease-out), color .3s;
}
.ftr-col a:hover{color:var(--fg);background-size:100% 1px}
.ftr-facts li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;font-size:15px}
.ftr-facts span{
  font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--fg-3);
}
.ftr-btm{
  margin-top:clamp(40px,5vw,64px);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
}
.ftr-btm .micro{font-size:10.5px;color:var(--fg-3)}
.ftr-seam{opacity:.7;letter-spacing:.26em}

/* ---------- drawer nav (mobile navigation lives here) ---------- */
.drawer-nav{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.drawer-nav a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  text-decoration:none;font-size:16px;color:var(--fg);padding:13px 0;
  border-bottom:1px solid var(--line);
}
.drawer-nav a span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--fg-3)}
.drawer-nav a:hover{color:var(--accent)}

/* ---------- mobile density: the page must not balloon ---------- */
@media(max-width:640px){
  .feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}
  .feat > *:nth-child(1){grid-column:1 / -1}
  .feat > *:nth-child(1) .plate{aspect-ratio:5/4}
  .feat .card .name{font-size:1.06rem}
  .feat .card .spec,.grid .card .spec{font-size:10.5px;letter-spacing:.1em;line-height:1.66}
  .grid .card .name{font-size:1.06rem}
  .grid .card .rsv,.feat .card .rsv{font-size:10.5px;letter-spacing:.1em}
  .grid .card .brandline .micro,.feat .card .brandline .micro{font-size:10px;letter-spacing:.1em}
  .grid .price,.feat .price{font-size:1.02rem}
  .grid .card .foot,.feat .card .foot{gap:8px}
  .step{padding:22px 20px 26px}
  .step .n{margin-bottom:14px}
  .step p{font-size:14px}
  .pill-notes div{padding:20px 20px 22px}
  .band .wrap{padding-block:64px}
  .ftr-facts li{font-size:14.5px}
  .ftr a,.ftr li{font-size:15px}
}
@media(max-width:600px){
  .icobtn{width:40px;height:40px}
  #acctBtn{display:grid}          /* the drawer is the mobile menu — never hide it */
  .hdr-act{gap:8px}
  #joinTop{--pad:11px 15px;font-size:10.5px;letter-spacing:.07em}
}
@media(max-width:380px){
  #joinTop{--pad:11px 12px;font-size:10px}
  .hdr-act{gap:6px}
}

/* reduced motion: the tape stays, it just doesn't glide */
@media(prefers-reduced-motion:reduce){
}

/* step numerals carry the sequence — they must clear 3:1 as large text */
.step .n{color:rgba(16,15,13,.5)}
html[data-theme="dark"] .step .n,html[data-mode="afterhours"] .step .n{color:rgba(243,240,234,.46)}
.step:hover .n{color:var(--accent)}

/* ---------- touch targets ---------- */
.card .rsv{padding:12px 0}
.mark{padding-block:5px}
@media(max-width:640px){
  .card .rsv{padding:14px 0}
  .chip{padding:12px 16px}
  .sel{padding:12px 34px 12px 16px}
}

/* ------------------------------------------------------------
   Seam tiers. Below 1366px the outer margin can't hold the
   vertical marginalia without clipping, so the rail runs bare:
   rule + graduations + progress only. The in-flow stitch notes
   still carry the wording.
   ------------------------------------------------------------ */
@media(min-width:1140px) and (max-width:1365.98px){
  :root{--seamx: calc(var(--colx) - 24px)}
}
/* centre the stitch knot exactly on the thread */
.stitch-note::before{left:-20px}

/* ============================================================
   PASS 03 — capture-safe hero, aligned featured row, masked
   marquee, and the torn price tag.
   ============================================================ */

/* ---- 1. The hero must never chase the viewport ----------------
   Full-page capture tools resize the viewport to the document
   height. A bare 100svh hero then grows with it, the document
   grows again, and the page runs away to tens of thousands of
   pixels of empty ground. Capping the hero breaks that loop and
   keeps every section below it on screen at any width. */
.hero{min-height:min(100svh, 1080px)}
@media(max-width:900px){ .hero{min-height:min(100svh, 860px)} }

/* ---- 2. Featured grid: one row grid, no stagger ---------------
   Column widths still vary; image tops and heights do not. */
@media(min-width:960px){
  .feat{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(44px,5vw,78px) clamp(20px,2.4vw,32px)}
  .feat > *:nth-child(1){grid-column:1/7;margin-top:0}
  .feat > *:nth-child(2){grid-column:7/13;margin-top:0}
  .feat > *:nth-child(3){grid-column:1/6;margin-top:0}
  .feat > *:nth-child(4){grid-column:6/13;margin-top:0}
  .feat > *:nth-child(5){grid-column:1/8;margin-top:0}
  .feat > *:nth-child(6){grid-column:8/13;margin-top:0}
}
/* fixed plate height => equal image tops AND equal image heights
   across a row, whatever the column width */
@media(min-width:641px){
  .feat .plate{aspect-ratio:auto;height:clamp(300px,30vw,470px)}
}
@media(max-width:640px){
  .feat > *:nth-child(1){grid-column:1 / -1}
  .feat > *:nth-child(1) .plate{aspect-ratio:5/4}
}

/* ---- 2b. Plates actually contain their photo ------------------
   A percentage height on a centred grid item never resolved, so
   every photo was laid out at its own aspect ratio and silently
   cropped by the plate. Absolute positioning gives object-fit a
   definite box: the whole garment shows, at one scale, always. */
.plate img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
}
.feat .plate img{padding:8% 10%}
.grid .plate img{padding:7% 9%}

/* ---- 3. Marquee: fade at both edges instead of hard-clipping -- */
.marq{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
@media(max-width:640px){
  .marq{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  }
}

/* ---- 4. The torn price tag ------------------------------------
   One number, always. The tag tips over to show the promise on
   its back. Exactly one number, always. */
.ptag{
  perspective:760px;display:inline-block;flex:0 0 auto;
  background:none;border:0;padding:0;margin:0;text-align:left;
  cursor:default;font:inherit;color:inherit;
}
.ptag-in{
  display:grid;position:relative;
  transform-style:preserve-3d;
  transition:transform .8s var(--ease-out);
}
.ptag-f{
  grid-area:1/1;position:relative;display:flex;align-items:center;gap:.5em;white-space:nowrap;
  padding:7px 12px 7px 10px;border-radius:5px;
  background:var(--bg-2);border:1px dashed var(--line-2);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
/* the punched hole + the torn top edge */
.ptag-f::before{
  content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--bg);
}
.ptag-f::after{
  content:"";position:absolute;left:6px;right:6px;top:-1px;height:3px;
  background:repeating-linear-gradient(90deg,var(--bg) 0 3px,transparent 3px 6px);
  pointer-events:none;
}
.ptag-b{transform:rotateX(180deg)}
.ptag-b span{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);
}
.card:hover .ptag-in,
.card:focus-within .ptag-in,
.card.tipped .ptag-in{transform:rotateX(180deg)}
.card .foot .price{font-size:1.06rem}
@media(hover:none){
  .card:hover .ptag-in{transform:none}      /* taps only, no sticky hover */
  .card.tipped .ptag-in{transform:rotateX(180deg)}
}
@media(prefers-reduced-motion:reduce){
  .card:hover .ptag-in,.card:focus-within .ptag-in,.card.tipped .ptag-in{transform:none}
  .ptag-b{opacity:0}
}
/* ---- 5. Mobile reveals: a short static fade, no travel -------- */
@media(max-width:767px){
  html.js .rv{transform:none;transition:opacity .55s var(--ease-out)}
  html.js .rv.in{transform:none}
  html.js .rv[data-d]{transition-delay:0s}
}

@media(max-width:640px){
  .ptag-f{padding:6px 9px 6px 8px;gap:.4em}
  .ptag-f::before{width:4px;height:4px}
  .card .foot .price{font-size:.96rem}
  .ptag-b span{font-size:8.5px;letter-spacing:.11em}
}
/* narrow two-up columns: the tag keeps its line, Reserve takes the next one —
   nothing is ever clipped and the tap target grows */
@media(max-width:430px){
  .grid .card .foot,
  .feat > *:nth-child(n+2) .foot{flex-wrap:wrap;row-gap:2px;justify-content:flex-start}
  .grid .card .rsv,
  .feat > *:nth-child(n+2) .rsv{width:100%;justify-content:space-between;padding:12px 0 4px}
}

/* ---- 6. Filter controls must not clip their own labels -------- */
@media(max-width:560px){
  .sel{font-size:10px;letter-spacing:.09em;padding:12px 30px 12px 13px;background-position:right 11px center}
  .chip{padding:12px 13px;font-size:10px;letter-spacing:.1em}
}

/* ---------- reserve: how many ---------- */
.qtyrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 4px}
.qtylabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.qtypick{display:flex;gap:8px}
.qtybtn{
  min-width:44px;height:44px;padding:0 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--fg-2);
  font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;
  transition:border-color .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out);
}
.qtybtn:hover{border-color:var(--accent)}
.qtybtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#111}
.qtyleft{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- onboarding: name a brand we have not listed ---------- */
.addown{display:flex;gap:8px;margin-top:14px}
.addown input{
  flex:1;min-width:0;height:46px;padding:0 14px;border-radius:12px;
  border:1px solid var(--line);background:transparent;color:var(--fg-1);
  font-family:var(--sans);font-size:15px;
}
.addown input:focus{outline:none;border-color:var(--accent)}
.addown .btn{flex:0 0 auto}

/* ---------- onboarding: a price per thing they picked ---------- */
.money{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.moneyrow{display:flex;align-items:center;gap:14px}
.moneylab{flex:1;min-width:0;font-size:15px;color:var(--fg-2);line-height:1.3}
.moneyin{position:relative;flex:0 0 auto;display:inline-flex;align-items:center}
.moneyin i{
  position:absolute;left:13px;font-style:normal;pointer-events:none;
  font-family:var(--mono);font-size:13px;color:var(--fg-3);
}
.moneyin input{
  width:116px;height:46px;padding:0 12px 0 28px;border-radius:12px;
  border:1px solid var(--line);background:transparent;color:var(--fg-1);
  font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;text-align:right;
  transition:border-color .18s var(--ease-out);
}
.moneyin input:focus{outline:none;border-color:var(--accent)}
.moneyin input::placeholder{color:var(--fg-3)}
@media(max-width:520px){
  .moneylab{font-size:14px}
  .moneyin input{width:98px}
}

/* ---------- signed in: nothing pitches joining ---------- */
.is-member [data-chap^="06"]{display:none}
.is-member .ftr-cta{display:none}

/* ---------- your list: counts, total, release ---------- */
.rq{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.04em}
.rdrop{
  flex:0 0 auto;margin-left:10px;padding:7px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--fg-3);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  transition:color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.rdrop:hover{color:var(--fg-1);border-color:var(--fg-3)}
.rdrop:disabled{opacity:.4;cursor:default}
.rtotal{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}
.rtotal span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.rtotal b{font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg-1)}

/* ---------- lightbox stage: no card border around the media ---------- */
:root{--lb-stage-fix:1}
.lb-stage{background:#0D0C0B}
.lb-stage img,.lb-stage video{padding:0}

/* ---------- a piece that has actually landed ---------- */
.rs-ready{color:var(--gold,#C6A15B)}
.finep.rs-ready{margin-top:6px}
/* Picked up: a settled line — dimmed, its status and price muted and struck, a check where the
   release button was. It stays in the list as history but reads as done. */
.rs-collected{color:var(--fg-3)}
.ritem-done{opacity:.62}
.ritem-done .rp-done{text-decoration:line-through;color:var(--fg-3);font-weight:500}
.ritem .rdone{margin-left:2px;width:26px;height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:13px}

/* ---------- the grid plays ---------- */
.plate{position:relative}
.plate-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.plate .stamp{z-index:3}
/* z-index only: section 2b already absolutely positions the photo so object-fit has a definite
   box. Re-declaring position here used to win the cascade and let every featured plate clip. */
.plate img{z-index:0}
@media (prefers-reduced-motion:reduce){.plate-vid{display:none}}