/* ============================================================================
   SCREENFITS DESIGN SYSTEM
   Version 3.0 — 2 September 2026
   Spec: design/character-page-v2.html + design/homepage-v3.html +
   design/style-index-v2.html + design/term-page-v2.html (approved previews).

   THE SYSTEM: "screen → store". Every page opens on a dark cinematic band
   (the SCREEN — site chrome, character hero, page head), then cuts to a bright
   retail body (the STORE) where the only loud objects are product cards and
   buy buttons. Character pages tint the screen with the character's own
   palette; everything below stays light and constant.

   Type: DM Serif Display (display), Inter (body/UI), IBM Plex Mono
   (call-sheet labels: scene kickers, counters, tiers).

   ONE cached, versioned stylesheet. Per-page <style> blocks carry PER-PAGE
   CUSTOM PROPERTIES ONLY (a character's palette) — never component CSS.
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS  */
:root{
  --paper:#FAF8F3;          /* store ground                                  */
  --card:#FFFFFF;
  --ink:#16130F;
  --muted:#6E675B;          /* 4.9:1 on paper                                */
  --line:#E6E1D5;
  --amber:#B7791F;          /* star ratings, systemwide                      */
  --gold:#C9A84C;           /* house accent on dark grounds only             */
  --screen:#16130F;         /* default dark band; character pages override   */

  /* per-character (overridden in a page-level style block) */
  --c-screen:var(--screen);
  --c-accent:#6B2231;       /* accent on LIGHT ground — AA-checked in PHP    */
  --c-on-screen:var(--gold);/* accent on DARK ground — contrast-checked      */

  --f-display:"DM Serif Display",Georgia,serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",monospace;

  --s4:4px;--s8:8px;--s12:12px;--s16:16px;--s24:24px;--s32:32px;--s48:48px;--s64:64px;

  --wrap:1060px;
  --pad-x:20px;
  --dur:160ms;
  --ease:cubic-bezier(.2,.6,.2,1);

  /* legacy aliases — color/capsule/contact/error templates still reference
     v1/v2 token names. Remapped so those pages degrade to the new system. */
  --tile:#F1EFE8; --sunk:#F1EFE8; --ink-soft:var(--muted); --rule:var(--line);
  --accent:var(--c-accent); --accent-ink:var(--c-accent); --accent-wash:#F6EDEF;
  --accent-soft:#F6EDEF; --text:var(--ink); --text-dim:var(--muted);
  --text-mute:var(--muted); --surface:#F1EFE8; --surface-2:#F1EFE8;
  --line-soft:var(--line); --card-legacy:#fff; --brass:var(--c-accent);
  --flare:var(--gold); --flare-ink:var(--ink); --f-ui:var(--f-body);
  --font-display:var(--f-display); --font-body:var(--f-body);
  --fs-body:16px; --fs-small:14px; --fs-label:12px; --fs-h2:26px; --fs-h3:20px;
  --fs-lead:17px; --fs-display:clamp(34px,5.4vw,54px); --measure:62ch;
  --header-h:64px; --dur-fast:120ms;
}

/* ------------------------------------------------------------------ BASE  */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}
::selection{background:var(--ink);color:var(--paper)}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;flex:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:14px;text-decoration:none}
.skip-link:focus{left:0}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.12;margin:0}
p{margin:0 0 var(--s16)}
.dim{color:var(--muted)}
.small{font-size:14px}
.callsheet,.label,.kicker-txt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.prose{max-width:64ch}
.prose p{margin-bottom:var(--s16)}
.prose h2{font-size:26px;margin:var(--s32) 0 var(--s12)}
.prose h3{font-size:20px;margin:var(--s24) 0 var(--s8)}
.prose ul,.prose ol{margin:0 0 var(--s16);padding-left:1.2em}
.prose a{text-decoration:underline;text-underline-offset:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}

/* ============================================================ THE SCREEN  */
/* Dark chrome band. On plain pages it's just the masthead; heroes extend it. */
.screen{background:var(--c-screen);color:#F2EFE7}
.mastbar{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:16px}
.mastbar__logo{font-family:var(--f-display);font-size:24px;letter-spacing:.01em;text-decoration:none;color:#fff}
.mastbar nav{display:flex;gap:20px;font-size:13.5px;flex-wrap:wrap}
.mastbar nav a{text-decoration:none;color:rgba(255,255,255,.65);padding-block:4px}
.mastbar nav a:hover,.mastbar nav a[aria-current="page"]{color:#fff}
.screen__rule{border-top:1px solid rgba(255,255,255,.14)}

/* ------------------------------------------------------- CHARACTER HERO  */
.chero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:44px 0 40px}
.chero .callsheet{color:var(--c-on-screen);margin-bottom:14px;display:block}
.chero h1{font-size:clamp(38px,6.4vw,68px);line-height:.98;letter-spacing:-.01em;color:#fff}
.chero .dek{font-size:17px;color:rgba(255,255,255,.72);max-width:46ch;margin-top:14px}
.chero .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chero .tags a{font-size:12px;color:rgba(255,255,255,.75);text-decoration:none;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 12px}
.chero .tags a:hover{border-color:#fff;color:#fff}
.chero .ctas{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

.btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--c-on-screen);color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:700;padding:13px 22px;border:0;cursor:pointer;font-family:var(--f-body)}
.btn-gold:hover{filter:brightness(1.08)}
.btn-ghostd{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;padding:12px 20px;border:1px solid rgba(255,255,255,.35)}
.btn-ghostd:hover{border-color:#fff}

/* the manifest — the look, itemized. THE buy-a-look device. */
.manifest{border:1px solid rgba(255,255,255,.18);padding:18px 20px}
.manifest__t{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-on-screen);margin-bottom:10px}
.manifest a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;text-decoration:none;color:#F2EFE7;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
.manifest a:hover{color:#fff}
.manifest a:hover .mi-name{text-decoration:underline;text-underline-offset:3px}
.manifest .mi-num{font-family:var(--f-mono);font-size:11px;color:rgba(255,255,255,.45);flex:none}
.manifest .mi-name{flex:1;min-width:0}
.manifest .mi-price{font-family:var(--f-mono);font-size:12.5px;color:rgba(255,255,255,.75);flex:none}
.manifest__total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;font-size:14.5px;color:#fff}
.manifest__total b{font-family:var(--f-display);font-size:24px;font-weight:400}
.manifest__total small{color:rgba(255,255,255,.55);font-size:12px}

/* =============================================================== STORE    */
.store{padding:6px 0 40px}
.disclosure{font-size:12.5px;color:var(--muted);padding:16px 0 4px;max-width:72ch}
.disclosure a{color:var(--muted)}

/* the how-to intro paragraph block on character pages */
.howto{max-width:64ch;margin:10px 0 6px}
.howto p{font-size:16.5px;line-height:1.68;margin-bottom:12px}
.howto .lead-in{font-family:var(--f-display);font-size:19px;line-height:1.5;color:var(--ink)}

/* scene kicker — deduped chapter label as a section divider */
.scene{display:flex;align-items:center;gap:14px;margin:42px 0 18px}
.scene span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent);white-space:nowrap}
.scene::after{content:"";height:1px;background:var(--line);flex:1}

.slot{margin-bottom:12px;scroll-margin-top:16px}
.slot-head{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.slot-head .num{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.slot-head h2{font-size:clamp(25px,3.2vw,32px);line-height:1.05}
.slot .desc{color:var(--muted);max-width:64ch;margin:4px 0 18px;font-size:15.5px}
.slot .desc b{color:var(--ink);font-weight:600}

.picks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* a slot with only one live pick: full-width horizontal card, no dead column */
.picks--solo{grid-template-columns:1fr}
.pick.pick--solo{display:grid;grid-template-columns:300px 1fr}
.pick.pick--solo .tier{grid-column:1/-1}
.pick.pick--solo .shot{aspect-ratio:1/1;width:100%}
.pick.pick--solo .body{border-top:0;border-left:1px solid var(--line);justify-content:center;gap:8px;padding:18px 22px}
.pick.pick--solo .buyrow{margin-top:8px;max-width:420px}
@media (max-width:640px){
  .pick.pick--solo{grid-template-columns:1fr}
  .pick.pick--solo .shot{aspect-ratio:4/3}
  .pick.pick--solo .body{border-left:0;border-top:1px solid var(--line)}
}
.pick{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color var(--dur) var(--ease)}
.pick:hover{border-color:var(--ink)}
.pick .tier{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 16px 8px}
.pick--budget .tier{color:var(--amber)}
.pick--splurge .tier{color:var(--c-accent)}
.pick .shot{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:6%;overflow:hidden}
.pick .shot img{width:100%;height:100%;object-fit:contain}
.pick .shot .ph{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#C4BCAC}
.pick .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1;border-top:1px solid var(--line)}
.pick .name{font-weight:600;font-size:15.5px;line-height:1.35}
.pick .stars{font-size:13px;color:var(--muted)}
.pick .stars b{color:var(--amber);font-weight:600;letter-spacing:.03em}
.pick .fit{font-size:13px;color:var(--muted)}
.pick .buyrow{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:10px}
.pick .price{font-family:var(--f-display);font-size:25px}
.buy{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:600;min-height:48px;padding:0 16px;transition:background var(--dur) var(--ease)}
.buy:hover{background:var(--c-accent)}
.buy .arr{width:14px;height:14px;flex:none}
.more{font-size:13.5px;margin:12px 2px 0}
.more a{color:var(--muted)}
.more a:hover{color:var(--ink)}

/* the real thing — authentic brand, filled accent band */
.real{background:var(--c-accent);color:#F6EEE9;margin-top:16px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.real .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:4px}
.real b{font-size:16px}
.real p{font-size:13.5px;opacity:.85;margin:2px 0 0}
.real a{background:#fff;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:600;padding:12px 18px;white-space:nowrap}
.real a:hover{background:var(--gold)}
.real .shot{width:72px;height:72px;background:#fff;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.real .shot img{width:100%;height:100%;object-fit:cover}

/* why / faq / related */
.why{border-top:1px solid var(--ink);margin-top:48px;padding-top:28px}
.why h2,.faq h2,.relband h2{font-size:27px;margin-bottom:14px}
.why p{font-size:18px;line-height:1.65;max-width:60ch}
.byline{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:13.5px;color:var(--muted)}
.byline .dot{width:36px;height:36px;border-radius:50%;background:var(--c-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:16px;flex:none}
.byline b{color:var(--ink)}
.byline a{color:inherit}

.faq{border-top:1px solid var(--ink);margin-top:42px;padding-top:28px}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-top:10px;color:var(--muted);font-size:14.5px;max-width:64ch;margin:0}

.relband{border-top:1px solid var(--ink);margin-top:42px;padding-top:28px}

/* ======================================================== LOOK CARD ----- */
/* THE sitewide unit for listing characters (v4): a full-bleed poster in the
   character own palette. Show + piece count up top, poster-scale name,
   terms line, "Shop the look" as the closing line. */
.grid-looks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.look{
  position:relative;display:flex;flex-direction:column;text-decoration:none;
  aspect-ratio:3/4;padding:20px 20px 18px;overflow:hidden;
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.look:hover{filter:brightness(1.05);transform:translateY(-5px);box-shadow:0 16px 32px rgba(22,19,15,.18)}
.look__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.look__kick{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.look__count{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;opacity:.7;white-space:nowrap}
.look__name{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(34px,3.6vw,48px);line-height:1.0;letter-spacing:-.02em;
  margin-top:auto;
}
.look__terms{font-family:var(--f-body);font-size:12.5px;opacity:.8;margin-top:10px}
.look__foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.look__rule{width:44px;height:3px;display:block}
.look__cta{font-size:14.5px;font-weight:700;letter-spacing:.02em;border:1.5px solid currentColor;padding:10px 18px;border-radius:2px}
.look:hover .look__cta{background:rgba(255,255,255,.12)}
/* uploaded character image takes the top of the poster */
.look--img{padding-top:0}
.look__img{margin:0 -20px 14px;display:block;aspect-ratio:16/9;overflow:hidden}
.look__img img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* ============================================================ HOMEPAGE    */
.hero-h{padding:32px 0 38px}
.hero-h--split{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero-poster{max-width:360px;justify-self:end;width:100%}
.hero-poster__label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.hero-poster .look__name{font-size:clamp(30px,3vw,40px)}
@media (max-width:860px){
  .hero-h--split{grid-template-columns:1fr;gap:28px}
  .hero-poster{justify-self:start;max-width:420px}
}
.hero-h h1{font-size:clamp(30px,4.6vw,46px);line-height:1.05;color:#fff;max-width:22ch}
.searchrow{display:flex;margin-top:22px;max-width:520px}
.searchrow input{flex:1;min-height:52px;border:1px solid rgba(255,255,255,.25);background:#221E17;color:#fff;padding:0 18px;font-size:15.5px;font-family:var(--f-body)}
.searchrow input::placeholder{color:rgba(255,255,255,.45)}
.searchrow button{background:var(--gold);color:var(--ink);border:0;font-weight:700;font-size:14.5px;padding:0 22px;cursor:pointer;font-family:var(--f-body)}
.searchrow button:hover{filter:brightness(1.08)}
.counters{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:16px}
.counters b{color:#fff;font-weight:500}

/* seasonal strip */
.season-strip{background:var(--gold);color:var(--ink)}
.season-strip .in{max-width:var(--wrap);margin:0 auto;padding:11px var(--pad-x);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.season-strip b{font-size:14px}
.season-strip a{font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.season-strip a:hover{text-decoration:underline}

/* the look math — featured look as an equation */
.featured{background:var(--card);border-bottom:1px solid var(--line)}
.featured .in{max-width:var(--wrap);margin:0 auto;padding:24px var(--pad-x) 30px}
.featured .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent)}
.fx{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto auto;gap:14px;align-items:center;margin-top:16px}
.fx .op{font-family:var(--f-display);font-size:32px;color:var(--muted)}
.fpiece{text-decoration:none;display:block;min-width:0}
.fpiece .shot{aspect-ratio:1/1;background:#fff;border:1px solid var(--line);padding:8%;transition:border-color var(--dur) var(--ease);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fpiece:hover .shot{border-color:var(--ink)}
.fpiece .shot img{width:100%;height:100%;object-fit:contain}
.fpiece .shot .ph{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#C4BCAC;text-align:center}
.fpiece b{display:block;font-size:13px;font-weight:600;margin-top:8px;line-height:1.3}
.fpiece span{font-size:12.5px;color:var(--muted)}
.ftotal{text-align:center;padding-left:6px}
.ftotal .who{font-family:var(--f-display);font-size:23px;line-height:1.1}
.ftotal .sum{font-family:var(--f-display);font-size:32px;margin:2px 0 10px}
.ftotal .sum small{font-size:13px;font-family:var(--f-body);color:var(--muted)}
.ftotal a{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:13px 22px}
.ftotal a:hover{background:var(--c-accent)}

section.band{padding:42px 0 6px}
.sec{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.sec h2{font-size:28px}
.sec a{font-size:13.5px;color:var(--muted);text-decoration:none}
.sec a:hover{color:var(--ink)}

.vibes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* term card — mini colour poster (smaller sibling of the look poster) */
.tcard{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:16px 18px 14px;min-height:128px;transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tcard:hover{filter:brightness(1.05);transform:translateY(-4px);box-shadow:0 12px 24px rgba(22,19,15,.16)}
.tcard__kick{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.tcard__name{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.05;letter-spacing:-.01em;margin-top:auto}
.tcard__who{font-size:12px;opacity:.8}
.vibe{background:var(--card);border:1px solid var(--line);padding:16px;text-decoration:none;display:block;transition:border-color var(--dur) var(--ease)}
.vibe:hover{border-color:var(--ink)}
.vibe .name{font-family:var(--f-display);font-size:20px}
.vibe .who{font-size:12.5px;color:var(--muted);margin-top:4px;display:block}

.about-block{border-top:1px solid var(--ink);margin-top:46px;padding-top:26px;max-width:62ch}
.about-block p{font-family:var(--f-display);font-size:19px;line-height:1.55;margin-bottom:8px}
.about-block .by{font-size:13px;color:var(--muted);font-family:var(--f-body)}

/* ========================================================== INDEX/FINDER  */
.pagehead{padding:6px 0 34px}
.pagehead .crumbs-d{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:14px}
.pagehead .crumbs-d a{color:rgba(255,255,255,.5);text-decoration:none}
.pagehead .crumbs-d a:hover{color:#fff}
.pagehead .callsheet{color:var(--c-on-screen);margin-top:18px;display:block}
.pagehead h1{font-size:clamp(30px,4.6vw,44px);line-height:1.05;color:#fff;margin-top:8px}
.pagehead .intro{color:rgba(255,255,255,.72);font-size:15.5px;max-width:62ch;margin-top:12px}
.pagehead .swatchrow{display:flex;gap:6px;margin-top:20px;max-width:420px}
.pagehead .swatchrow span{height:32px;flex:1}

.finder{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.finder .in{max-width:var(--wrap);margin:0 auto;padding:13px var(--pad-x);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.finder input{flex:1;min-width:180px;min-height:46px;border:1px solid var(--line);padding:0 14px;font-size:15px;font-family:var(--f-body);background:var(--paper);color:var(--ink)}
.finder input:focus{border-color:var(--ink);outline:none}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills button,.pills a{font-family:var(--f-body);font-size:12.5px;font-weight:500;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;text-decoration:none}
.pills button:hover,.pills a:hover{border-color:var(--ink)}
.pills button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.countline{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:26px 0 16px}
.countline b{color:var(--ink);font-weight:500}
.emptymsg{display:none;color:var(--muted);font-size:15px;padding:40px 0;text-align:center}
.emptymsg.show{display:block}
.look.hide{display:none}

/* ============================================================== FOOTER    */
.foot{border-top:2px solid var(--ink);margin-top:56px;padding-top:16px}
.foot__disc{font-size:12.5px;color:var(--muted);max-width:72ch;margin:0 0 14px}
.foot__disc a{color:inherit}
.foot__row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:10px;padding-bottom:40px}
.foot__row a{color:var(--muted);text-decoration:none;margin-right:14px}
.foot__row a:hover{color:var(--ink)}

/* sticky shop bar — mobile only */
.shopbar{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:#fff;display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;z-index:50}
.shopbar span{font-size:13.5px;min-width:0}
.shopbar a{background:var(--gold);color:var(--ink);text-decoration:none;font-weight:700;font-size:13.5px;padding:11px 18px;white-space:nowrap}

/* ------------------------------------------------------------- FORMS ---- */
.field{margin-bottom:var(--s16)}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);background:#fff;font-family:var(--f-body);font-size:15px;color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;border:1px solid var(--ink);padding:12px 22px;font-size:15px;cursor:pointer;font-family:var(--f-body)}
.btn:hover{background:var(--c-accent);border-color:var(--c-accent)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.cta-link{color:var(--ink);font-size:14px}

.pager{display:flex;gap:8px;align-items:center;justify-content:center;padding-block:var(--s32);font-size:14px}
.pager a,.pager span{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);text-decoration:none;color:var(--ink);padding-inline:10px}
.pager a:hover{border-color:var(--ink)}
.pager [aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ============================================================================
   LEGACY COMPONENTS — still referenced by not-yet-converted templates
   (color/*, capsule/*, errors). Retokened to v3. Remove per-block once the
   last template referencing it converts.
   ========================================================================= */
.band__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s24);flex-wrap:wrap;margin-bottom:var(--s32)}
.band__more{font-size:13px;font-weight:500;color:var(--muted);text-decoration:none}
.band__more:hover{color:var(--ink)}
.grid{display:grid;gap:var(--s16)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--6{grid-template-columns:repeat(6,1fr)}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s48);align-items:start}
.grid>*,.split>*,.vs>*,.combo>*,.facts>*{min-width:0}
.grid--defer{content-visibility:auto;contain-intrinsic-size:auto 600px}
.chip{border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);display:block}
.viewcard{background:#fff;border:1px solid var(--line);padding:var(--s24)}
.pgroup{margin-bottom:var(--s24)}
.pgroup:last-child{margin-bottom:0}
.pgroup__g{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.p-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(60px,100%),1fr));gap:6px;list-style:none;margin:0;padding:0}
.p-bars .chip{height:38px}
.p-sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(84px,100%),1fr));gap:8px;list-style:none;margin:0;padding:0}
.p-sw li{font-size:10.5px;color:var(--muted);line-height:1.3}
.p-sw .chip{height:48px;margin-bottom:5px}
.p-sw b{display:block;color:var(--ink);font-weight:500;font-size:11px}
.p-avoid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(84px,100%),1fr));gap:8px;list-style:none;margin:0;padding:0}
.p-avoid li{font-size:10.5px;color:var(--muted)}
.p-avoid .chip{height:32px;margin-bottom:5px;position:relative}
.p-avoid .chip::after{content:"";position:absolute;inset:0;background:
  linear-gradient(135deg,transparent 44.5%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.6) 48%,transparent 48.5%),
  linear-gradient(135deg,transparent 48.5%,rgba(255,255,255,.95) 49%,rgba(255,255,255,.95) 52%,transparent 52.5%),
  linear-gradient(135deg,transparent 52.5%,rgba(0,0,0,.6) 53%,rgba(0,0,0,.6) 56%,transparent 56.5%)}
.season{display:block;border:1px solid var(--line);padding:var(--s12);text-decoration:none;color:var(--ink);background:#fff}
.season:hover{border-color:var(--ink)}
.season__row{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-bottom:8px}
.season__row .chip{height:24px;border-radius:1px}
.season b{font-family:var(--f-display);font-size:16px;font-weight:400;display:block;line-height:1.2}
.season span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.checklist{list-style:none;margin:0;padding:0;max-width:38rem}
.checklist li{display:flex;gap:var(--s16);align-items:flex-start;padding-block:var(--s16);border-bottom:1px solid var(--line)}
.checklist p{font-size:16px;line-height:1.5;margin:0}
.mk{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;flex:none;margin-top:3px}
.mk--yes{background:var(--ink);color:var(--paper)}
.mk--no{background:transparent;color:var(--muted);border:1px solid var(--line)}
.vs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.vs>div{padding:var(--s24)}
.vs>div:first-child{border-right:1px solid var(--line)}
.vs h3{font-size:22px;margin-bottom:var(--s12)}
.vs__strip{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:var(--s16)}
.vs__strip .chip{height:30px}
.vs ul{list-style:none;margin:0;padding:0;font-size:14px}
.vs li{padding-block:9px;border-bottom:1px dotted var(--line);color:var(--muted)}
.vs li:last-child{border-bottom:0}
.vs li b{color:var(--ink);font-weight:500}
.combo{border:1px solid var(--line);padding:var(--s24)}
.combo__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--s12)}
.combo h3{font-size:20px;line-height:1.2;margin-bottom:var(--s12)}
.combo ol{list-style:none;margin:0 0 var(--s12);padding:0;font-size:13.5px}
.combo ol li{display:flex;gap:9px;align-items:center;padding-block:7px;border-bottom:1px dotted var(--line)}
.combo ol .chip{width:14px;height:14px}
.combo ol b{font-size:11px;font-weight:500;color:var(--muted);margin-left:auto}
.combo p{font-size:15px;line-height:1.45;color:var(--muted);margin:0}
.occ{display:flex;justify-content:space-between;align-items:center;gap:var(--s12);min-height:56px;padding:var(--s16);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.occ:hover{border-color:var(--ink)}
.occ b{font-family:var(--f-display);font-size:17px;font-weight:400}
.occ span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.notfor{border:1px solid var(--c-accent);background:var(--accent-wash);padding:var(--s16) var(--s24);margin:0 0 var(--s16)}
.notfor__g{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--s8)}
.notfor p{font-size:15.5px;line-height:1.55;margin-bottom:8px}
.notfor p:last-child{margin-bottom:0}
.method{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.5}
.method li{position:relative;padding:11px 0 11px 26px;border-bottom:1px dotted var(--line);color:var(--muted)}
.method li::before{content:"—";position:absolute;left:0;color:var(--c-accent)}
.method b{color:var(--ink);font-weight:500}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:var(--s12);margin-bottom:var(--s16);max-width:38rem}
.fact{background:var(--tile);padding:10px 12px}
.fact b{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.fact span{font-size:13.5px;color:var(--ink)}
.tile{border:1px solid var(--line);padding:var(--s24);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;background:#fff}
.tile:hover{border-color:var(--ink)}
.tile__t{font-family:var(--f-display);font-size:21px;line-height:1.2;margin-bottom:var(--s8)}
.tile p{font-size:15px;line-height:1.45;color:var(--muted);margin:0}
.tile__go{margin-top:auto;padding-top:var(--s16);font-size:12px;font-weight:500;color:var(--ink)}
.ctaband{background:var(--ink);color:var(--paper);padding:var(--s48);display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s32);align-items:center}
.ctaband h2{font-size:clamp(24px,3.4vw,30px);line-height:1.15;margin-bottom:8px;color:var(--paper)}
.ctaband p{font-size:16px;line-height:1.5;color:#C8C4B8;margin:0}
.ctaband .btn--ghost{color:var(--paper);border-color:var(--paper)}
.ctaband .btn--ghost:hover{background:var(--paper);color:var(--ink)}

/* ------------------------------------------------------------ RESPONSIVE  */
@media (max-width:960px){
  .fx{grid-template-columns:repeat(3,1fr)}
  .fx .op{display:none}
  .ftotal{grid-column:1/-1;padding:8px 0 0}
}
@media (max-width:860px){
  .chero{grid-template-columns:1fr;gap:30px;padding:32px 0 34px}
  .grid-looks,.vibes{grid-template-columns:repeat(2,1fr)}
  .grid--3,.grid--4,.grid--6{grid-template-columns:repeat(2,1fr)}
  .split,.ctaband,.vs{grid-template-columns:1fr}
  .vs>div:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .mastbar nav{gap:14px}
}
@media (max-width:640px){
  .picks{grid-template-columns:1fr}
  .shopbar{display:flex}
  body.has-shopbar{padding-bottom:64px}
  .searchrow{flex-direction:column;gap:10px}
  .searchrow button{min-height:50px}
}
@media (max-width:520px){
  .grid-looks{grid-template-columns:1fr}
  .vibes,.grid--2,.grid--3,.grid--4,.grid--6{grid-template-columns:1fr}
  .grid--auto{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------------------- A11Y/PRINT */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  .mastbar nav,.foot,.skip-link,.finder,.shopbar,.season-strip{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .pick,.look{break-inside:avoid}
}