/* ==========================================================================
   WU WEAR x ROUGE — shared stylesheet
   Every colour in the site comes from a custom property defined here.
   There is no hex value anywhere in the markup. Change it here, it changes
   everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. INTERFACE PALETTE
   GOVERNS SITE CHROME ONLY. Five values, unchanged.

   These are NOT garment colours. Product colours are a separate system —
   see section 1b. A garment being burgundy has nothing to do with this
   palette, and adding a sixth interface colour is still wrong.

   WORKING VALUES — NOT YET CONFIRMED AGAINST THE OFFICIAL BRAND BOOK.
   When the brand book arrives, correct the five triplets below and nothing
   else in the codebase needs to move.
   -------------------------------------------------------------------------- */
:root {
  /* Channel triplets so tints and shades derive from one source of truth. */
  --ink-rgb:  11, 11, 11;   /* #0B0B0B  backgrounds                 */
  --bone-rgb: 232, 227, 215; /* #E8E3D7  type                        */
  --army-rgb: 63, 65, 40;   /* #3F4128  placeholder blocks, panels  */
  --ash-rgb:  138, 138, 130; /* #8A8A82  secondary type              */
  --gold-rgb: 242, 194, 0;  /* #F2C200  accent only                 */

  --ink:  rgb(var(--ink-rgb));
  --bone: rgb(var(--bone-rgb));
  --army: rgb(var(--army-rgb));
  --ash:  rgb(var(--ash-rgb));
  --gold: rgb(var(--gold-rgb));

  /* ---- Accent -----------------------------------------------------------
     One accent per chamber. chamber.html overrides --accent-rgb from its
     CHAMBER config object. Chamber 01 (RZA / Bobby Digital) is gold.
     The accent is permitted to appear a MAXIMUM of three times per screen:
       1. the live chamber marker
       2. the price
       3. the buy button
     It is never decoration. There is no fourth use.

     PRODUCT COLOUR NEVER COUNTS TOWARD THIS LIMIT. A row of fifteen colour
     swatches on a collection card is product data, not interface accent.
     --------------------------------------------------------------------- */
  --accent-rgb: var(--gold-rgb);
  --accent: rgb(var(--accent-rgb));

  /* Derived surfaces — all traceable back to the five above. */
  --surface:      rgba(var(--bone-rgb), 0.04);
  --surface-high: rgba(var(--bone-rgb), 0.07);
  --line:         rgba(var(--bone-rgb), 0.14);
  --line-strong:  rgba(var(--bone-rgb), 0.28);
  --dim:          rgba(var(--bone-rgb), 0.55);
}

/* --------------------------------------------------------------------------
   1b. PRODUCT COLOURS — A SEPARATE SYSTEM. NOT BRAND TOKENS.

   These describe garments, not the interface. They are deliberately kept out
   of :root's interface block so nobody mistakes them for brand colours or
   starts using them for chrome. Rules:

     - Never used for site chrome. Chrome uses section 1 only.
     - Never counted against the three-gold-uses-per-screen limit.
     - Adding one is not a palette change. The interface palette stays at five.
     - Scoped under [data-swatch] so they can only reach swatch elements.

   >>> SCREEN REFERENCE ONLY. NOT DYE STANDARDS. <<<
   Sampled from the WU WEAR and WU by WU WEAR line sheet renderings,
   September 2026. Close enough to render a swatch chip on screen.

   MUST NOT be sent to a factory, used to approve a sample, or treated as a
   colour standard. A rendering is not a lab dip: it carries the renderer's
   lighting and colour profile, not the mill's. Replace with real standards
   when the brand book or the mill's lab dips arrive.

   Because these are not dye references, every swatch on the site renders its
   colour NAME beside the chip — on collection cards and in the buy block. No
   one should ever have to judge "is that the right burgundy" from a pixel.
   -------------------------------------------------------------------------- */
[data-swatch] {

  /* Core neutrals — both lines */
  --sw-black:          #131313;
  /* PROVENANCE: sampled by the client from the render barriers-a-4-01, not
     supplied by the brand and not taken from the bulk swatch list. It is a
     cool blue-grey black, distinct from the true black above and not olive
     (compare --sw-army, sampled #615F4A on a-4-04).

     Deliberately SHARED: this one token also carries the b-3/b-4 washed
     capsule and the WU WEAR bat hoodie, which previously sat at the list
     value #29282D. Kept as one token by decision, not by oversight.

     When real colour standards arrive this is one of the values to replace
     — a sample off a render is not a dye reference. */
  --sw-washed-black:   #272F31;
  --sw-charcoal:       #424242;
  --sw-slate:          #4A4F53;
  --sw-heather-grey:   #C4C0BD;
  --sw-light-grey:     #D7D7D7;
  --sw-bone:           #EBE0CE;
  --sw-cream:          #F5EAD8;
  --sw-oatmeal:        #DDD9CE;
  --sw-vintage-white:  #EFEBE0;

  /* WU WEAR signature */
  --sw-red:            #A73D3D;   /* washed spray hoodie */
  --sw-true-red:       #75080E;   /* sherpa, sweats */

  /* Sherpa and fleece run — appears in both lines */
  --sw-burgundy:       #490420;
  --sw-wine:           #540522;
  --sw-brown:          #422517;
  --sw-chocolate:      #4D2F24;
  --sw-navy:           #0B1838;
  --sw-forest:         #082A29;
  --sw-teal-deep:      #053839;
  --sw-cobalt:         #07188C;
  --sw-purple:         #2F0B63;

  /* Workwear — WU by WU WEAR */
  --sw-field-brown:    #655848;
  --sw-tobacco:        #77634B;
  --sw-dark-khaki:     #594838;
  --sw-olive:          #4B432E;

  /* Denim */
  --sw-black-wash:     #29282D;
  --sw-grey-wash:      #26252A;
  --sw-light-wash:     #BCC6D0;
  --sw-mid-wash:       #7792B0;

  /* Basketball short colourways — WU WEAR
     NOTE: --sw-gold is a GARMENT colour and sits very close to the interface
     accent (--gold #F2C200). Different token, different system, and product
     colour never counts toward the three-accent limit — but a gold chip will
     read as near-identical to the buy button on screen. Worth knowing before
     a gold short lands next to its own Add to cart. */
  --sw-gold:           #F4B414;
  --sw-royal:          #2209BE;
  --sw-court-purple:   #54069A;

  /* Seasonal hoodie and sweat run — WU WEAR */
  --sw-pink:           #E7D3D5;
  --sw-orange:         #E98B67;
  --sw-sea:            #6E9495;
  --sw-mauve:          #B19E98;
  --sw-indigo:         #5A566D;
  --sw-aubergine:      #403756;
  --sw-sage:           #D0CDBE;
  --sw-sand:           #E4D3C3;
  --sw-taupe:          #806D5E;
  --sw-dusty-blue:     #4F607E;
  --sw-army:           #373833;

  /* BARRIERS. Camo is a PRINT, not a flat dye — the chip is an indicative
     mid-tone only and the render is the truth for this one.

     STANDING RULE for every all-over print that follows: give it a token,
     name it for the print, set the chip to an indicative mid-tone, and say
     in a comment that the render is the reference. A single chip cannot
     represent a print and should never be trusted as if it could. */
  --sw-camo:           #6B6A4A;

  /* Track and varsity */
  --sw-track-burgundy: #4A1821;
  --sw-track-cream:    #DED4C8;
}

:root {

  /* ---- Type -------------------------------------------------------------
     TWO TYPEFACES ONLY. One heavy condensed grotesque for display, one clean
     sans for everything functional.

     THE LICENSED DISPLAY FACE HAS NOT BEEN SUPPLIED. The stack falls through
     in this order:

       1. "WU Display"   the licensed face. Drop the .woff2 into
                         assets/fonts/wu-display.woff2 and it wins. Nothing
                         else in the codebase needs to change.
       2. "Archivo Black" the WORKING STAND-IN, named as such. NOT FINAL.
                         Not a lookalike chosen here — do not swap it for a
                         different one.
       3. system fallbacks, so the page still sets if neither is present.

     Archivo Black is not installed on this machine and is not in the repo.
     Until its .woff2 is dropped in (or a webfont link is added), the page
     renders in the step-3 fallbacks. See ASSETS-DROP-HERE.md section 3.
     --------------------------------------------------------------------- */
  --font-display: "WU Display", "Archivo Black", "Arial Narrow",
                  Haettenschweiler, "Franklin Gothic Condensed", Impact,
                  sans-serif;
  --font-ui: "WU Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Helvetica, Arial, sans-serif;

  /* ---- Metrics ---------------------------------------------------------- */
  --nav-h: 52px;
  --pad: 20px;
  --maxw: 1400px;
  --gap: 16px;
}

/* Each face lists woff2 first, then truetype. The browser takes the first
   format it supports and never requests the rest, so a missing .ttf costs
   nothing when the .woff2 is there — and a dropped-in .ttf works on its own
   with no conversion step.

   FILENAMES ARE CASE-SENSITIVE once deployed. Netlify serves from Linux, so
   ArchivoBlack-Regular.ttf and archivoblack-regular.ttf are different files
   there even though Windows treats them as the same locally. The .ttf names
   below match what Google Fonts puts in the zip, unchanged. */
@font-face {
  font-family: "WU Display";
  src: url("assets/fonts/wu-display.woff2") format("woff2"),
       url("assets/fonts/wu-display.ttf") format("truetype");
  font-weight: 700 900;
  font-display: swap;
}
/* Working stand-in, not final. Drop the file into assets/fonts/ and it
   renders; until then this rule resolves to nothing and the stack falls
   through. Self-hosted on purpose — no external <link>, so it works with the
   folder opened from file://.

   Archivo Black ships as a single 400 weight. The 400–900 range here maps
   .display's font-weight: 900 onto that one file instead of letting the
   browser synthesise a fake bold on top of an already-black face. */
@font-face {
  font-family: "Archivo Black";
  src: url("assets/fonts/archivo-black.woff2") format("woff2"),
       url("assets/fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "WU Sans";
  src: url("assets/fonts/wu-sans.woff2") format("woff2"),
       url("assets/fonts/wu-sans.ttf") format("truetype");
  font-weight: 400 600;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE  — mobile first. 70% of traffic is phone.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;              /* functional type is never letterspaced */
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--line-strong);
  outline-offset: 2px;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* Display type: uppercase, tight, treated as image, allowed to crop. */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.84;
  margin: 0;
}
.d-xl { font-size: clamp(58px, 21vw, 260px); }
.d-lg { font-size: clamp(40px, 12vw, 110px); }
.d-md { font-size: clamp(28px, 7vw, 54px); }
.d-sm { font-size: clamp(20px, 5vw, 32px); }

/* Bleed lets display type run off the edge of the screen. */
.bleed { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
.bleed-l { margin-left: calc(var(--pad) * -1); }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 10px;
}
.body-copy { max-width: 62ch; color: var(--dim); }
.body-copy p { margin: 0 0 1em; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

section { padding: 56px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }

/* --------------------------------------------------------------------------
   3. THE ONE PERMITTED ACCENT USES
   -------------------------------------------------------------------------- */
.marker { color: var(--accent); }   /* use 1 — live chamber marker */
.price  { color: var(--accent); }   /* use 2 — price */

/* Use 3 — the buy button.
   Selector is DOUBLED (.btn.btn-buy) on purpose. The base .btn rule is
   defined further down this file and sets background/color/border-color at
   the same specificity, so a single .btn-buy loses the cascade to it and the
   button renders as a plain outline — silently dropping the accent from the
   most important element on the site. Two classes beats one regardless of
   order. Do not simplify this back to .btn-buy. */
.btn.btn-buy {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
/* Also doubled so it outranks .btn:hover, which is likewise defined later. */
.btn.btn-buy:hover { background: var(--accent); filter: brightness(1.08); }

/* --------------------------------------------------------------------------
   4. BUTTONS / FORMS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, filter 0.15s;
}
.btn:hover { background: var(--surface-high); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-ghost { border-color: var(--line); color: var(--dim); }
.btn-inline { width: auto; min-height: 44px; padding: 10px 18px; }

input[type="email"], input[type="text"], input[type="password"], select {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font-family: var(--font-ui);
  font-size: 16px;              /* 16px stops iOS zooming on focus */
  color: var(--bone);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  appearance: none;
}
input::placeholder { color: var(--ash); }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%),
                    linear-gradient(135deg, var(--ash) 50%, transparent 50%);
  background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Email capture ---------------------------------------------------------- */
.capture { max-width: 460px; }
.capture .fields { display: grid; gap: 10px; }
.capture .note { font-size: 12px; color: var(--ash); margin: 10px 0 0; }
.form-msg { font-size: 13px; margin: 12px 0 0; min-height: 1.2em; }
.form-msg.is-ok { color: var(--bone); }
.form-msg.is-err { color: var(--accent); }
@media (min-width: 640px) {
  .capture .fields { grid-template-columns: 1fr auto; }
  .capture .btn { width: auto; padding-inline: 32px; }
}

/* --------------------------------------------------------------------------
   5. PLACEHOLDERS — every one is visibly marked. Nothing here is final.
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  min-height: 180px;
  color: var(--bone);
  background-color: var(--army);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(var(--ink-rgb), 0.22) 0 10px,
    rgba(var(--ink-rgb), 0) 10px 20px
  );
  border: 1px dashed var(--line-strong);
}
.ph::before {
  content: "PLACEHOLDER";
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 3px 6px;
  color: var(--ink);
  background: var(--bone);
}
.ph span {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 26ch;
}
.ph-1x1 { aspect-ratio: 1 / 1; }
.ph-4x5 { aspect-ratio: 4 / 5; }
.ph-3x4 { aspect-ratio: 3 / 4; }
.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-tall { min-height: 62vh; }

/* Inline text placeholder, e.g. an unconfirmed price or date. */
.ph-text {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--bone);
  vertical-align: middle;
}

/* Build banner — flip PLACEHOLDER_BUILD in site.js to hide. */
.build-banner {
  position: relative;
  z-index: 60;
  padding: 8px var(--pad);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bone);
}
.build-banner b { font-weight: 700; }
/* Alert variant: a build error, not a build note. Uses the interface accent
   deliberately — this strip is chrome, not product, and it should be the
   loudest thing on the page when it appears. */
.build-banner-alert { background: var(--gold); color: var(--ink); }

/* --------------------------------------------------------------------------
   6. CHROME — identical across all eight chambers. Never varies.
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--pad);
  background: rgba(var(--ink-rgb), 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-right: auto;
}
/* PLACEHOLDER: wordmark stands in for the supplied logo file.
   Drop assets/logo.svg in and swap the .nav-logo contents for an <img>. */
.nav-links { display: none; gap: 20px; }
.nav-links a { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--bone); }
.nav-cart {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  border: 1px solid var(--line);
  padding: 7px 12px;
}
@media (min-width: 900px) { .nav-links { display: flex; } }

/* Mobile drawer for the four pillars + six diffusion lines. */
.nav-toggle { display: inline-flex; background: none; border: 0; color: var(--bone);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }
@media (min-width: 900px) { .nav-toggle { display: none; } }
.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 45;
  padding: 24px var(--pad) 48px;
  background: var(--ink);
  border-top: 1px solid var(--line);
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.drawer[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
.drawer h3 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ash); margin: 24px 0 10px; font-weight: 600; }
.drawer h3:first-child { margin-top: 0; }
.drawer a { display: block; padding: 9px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
.drawer-note { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }

.footer { padding: 48px 0 64px; border-top: 1px solid var(--line); color: var(--ash); font-size: 12px; }
.footer-lines { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.footer-lines a { color: var(--dim); }
.footer-lines a:hover { color: var(--bone); }

/* --------------------------------------------------------------------------
   7. HOME / ANNOUNCE
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 40px;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(var(--ink-rgb), 0.95) 0%,
    rgba(var(--ink-rgb), 0.55) 45%,
    rgba(var(--ink-rgb), 0.30) 100%);
}
.hero-media .ph { height: 100%; border: 0; }
.hero-body { position: relative; z-index: 1; }
.hero .display { margin-bottom: 18px; }

.pillars { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.pillar { padding: 28px var(--pad); background: var(--ink); display: block; }
.pillar:hover { background: var(--surface); }
.pillar h2 { margin: 0 0 6px; }
.pillar p { margin: 0; font-size: 13px; color: var(--ash); }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   8. CHAMBER PAGE
   -------------------------------------------------------------------------- */
.chamber-marker {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.chamber-marker .dot { width: 7px; height: 7px; background: currentColor; border-radius: 50%; }

/* Lookbook — every garment tappable. */
.lookbook { display: grid; gap: 4px; grid-template-columns: repeat(2, 1fr); }
.lookbook > a:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .lookbook { grid-template-columns: repeat(3, 1fr); }
  .lookbook > a:first-child { grid-column: span 2; grid-row: span 2; }
}
.look { position: relative; display: block; }
.look figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 12px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(to top, rgba(var(--ink-rgb), 0.85), rgba(var(--ink-rgb), 0));
}

/* Product grid ----------------------------------------------------------- */
.grid { display: grid; gap: 28px 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 40px 16px; } }
.card { display: flex; flex-direction: column; gap: 10px; }
.card .ph { min-height: 0; }
.card-line { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.card-name { font-size: 14px; font-weight: 600; margin: 0; }
.card-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-sizes { font-size: 11px; color: var(--ash); letter-spacing: 0.08em; }
.card .btn { margin-top: auto; }

/* The objects — collector box pinned first, always. */
.objects { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.objects .obj-hero { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .objects { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .objects .obj-hero { grid-column: span 3; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
}
.obj-hero { padding: 20px; border: 1px solid var(--line-strong); background: var(--surface); }
.obj-hero .contents { margin: 16px 0; padding: 0; list-style: none; font-size: 13px; color: var(--dim); }
.obj-hero .contents li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.obj-flag { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }

/* Event ------------------------------------------------------------------ */
.event { display: grid; gap: 20px; }
@media (min-width: 900px) { .event { grid-template-columns: 1fr 1fr; gap: 48px; } }
.event dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; font-size: 14px; }
.event dt { color: var(--ash); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 3px; }
.event dd { margin: 0; }

/* Next chamber ----------------------------------------------------------- */
.next { position: relative; overflow: hidden; }
.next .d-xl { color: var(--surface-high); position: absolute; inset: auto 0 -0.1em 0; pointer-events: none; z-index: 0; }
.next-body { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   9. PRODUCT PAGE
   -------------------------------------------------------------------------- */
.pdp { display: grid; gap: 32px; padding-top: 24px; }
@media (min-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr); gap: 56px; align-items: start; }
}

/* Left: five images minimum — front, back, on body, fabric macro, chamber context. */
.gallery { display: grid; gap: 4px; }
@media (min-width: 640px) { .gallery { grid-template-columns: 1fr 1fr; } }
.gallery > *:first-child { grid-column: 1 / -1; }

/* Right: sticky buy block. */
.buy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
@media (min-width: 900px) {
  .buy { position: sticky; top: calc(var(--nav-h) + 20px); }
}
.buy-line { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); margin: 0; }
.buy-name { margin: 0; }
.buy-price { font-size: 22px; font-weight: 600; margin: 0; }
.field label { display: block; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ash); margin: 0 0 7px; }

/* The bundle checkbox sits INSIDE the buy block, ABOVE add to cart. Never below. */
.bundle {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(var(--army-rgb), 0.5);
  cursor: pointer;
}
.bundle input { width: 20px; height: 20px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--bone); }
.bundle .bundle-t { font-size: 13px; font-weight: 600; margin: 0 0 3px; }
.bundle .bundle-d { font-size: 12px; color: var(--dim); margin: 0; }

.stock { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin: 0; text-align: center; }

/* ---- Patch add-on. Same placement rule as the bundle: inside the buy
   block, above add to cart. ---- */
.addons {
  padding: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(var(--army-rgb), 0.5);
}
.addons-head {
  margin: 0 0 10px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash);
}
.addon-list { display: grid; gap: 8px; }
.addon {
  display: grid;
  grid-template-columns: 20px 44px 1fr auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.addon input { width: 18px; height: 18px; margin: 0; accent-color: var(--bone); }
/* The INTERIM tag is unreadable at 44px and swamps the image, so it is
   suppressed here only. The page banner and every full-size plinth still
   carry it, so nothing on this page reads as final. */
.addon-thumb { aspect-ratio: 1 / 1; padding: 3px; }
/* Doubled selector on purpose: .plinth::after is declared later in this file
   at the same specificity and would otherwise win, exactly as .btn beat
   .btn-buy. Do not simplify to .addon-thumb::after. */
.plinth.addon-thumb::after { content: none; }
.addon-name { font-size: 12px; line-height: 1.3; }
.addons-note { margin: 10px 0 0; font-size: 11px; color: var(--ash); }

/* ---- Placement customiser ---- */
.placements { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.placement-row { margin-bottom: 10px; }
.placement-name { margin: 0 0 6px; font-size: 12px; font-weight: 600; }
.zbtns { display: flex; flex-wrap: wrap; gap: 5px; }
.zbtn {
  padding: 6px 9px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
}
.zbtn:hover { color: var(--bone); }
.zbtn[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.zbtn-note { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
.final-sale { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--dim); }
.final-sale strong { color: var(--bone); }

/* ---- Zone overlay on the garment render ---- */
.zone-layer { position: absolute; inset: 0; pointer-events: none; }
.zone { position: absolute; transform: translate(-50%, -50%); }
.zone-composite img { width: 100%; height: auto; display: block; }
/* Marker, not a composite: sleeve and hood only. Says "here", does not
   claim to show how it will look. Becomes a composite once photography
   lands — see ZONE_DEFS in catalog.js. */
.zone-marker {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.zone-dot {
  width: 100%; aspect-ratio: 1 / 1;
  border: 2px dashed rgba(var(--ink-rgb), 0.75);
  border-radius: 50%;
  background: rgba(var(--bone-rgb), 0.35);
}
.zone-tag {
  font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone); background: rgba(var(--ink-rgb), 0.8); padding: 2px 4px; white-space: nowrap;
}

/* ---- Cart panel ---- */
.cart-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: 100%; max-width: 400px;
  padding: 18px var(--pad);
  background: var(--ink);
  border-left: 1px solid var(--line-strong);
  overflow-y: auto;
}
.cart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.cart-head h2 { margin: 0; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.cart-item { padding: 12px 0; border-top: 1px solid var(--line); }
.cart-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 3px 0; }
.cart-l { font-size: 13px; }
.cart-sub { display: block; font-size: 11px; color: var(--ash); }
/* Shopify line item properties, shown rather than hidden — production works
   from these, so they must be checkable before checkout. */
.cart-sku { display: block; font-size: 10px; color: var(--ash); opacity: 0.7; font-variant-numeric: tabular-nums; }
.cart-prop { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }
.cart-prop b { color: var(--ash); font-weight: 600; }
.cart-remove { font-size: 11px; margin-top: 6px; color: var(--ash); }
.cart-empty, .cart-note { font-size: 12px; color: var(--ash); }
.cart-note { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.5; }

/* Mobile dock — appears only once the real add-to-cart leaves the viewport,
   so the buy button is never off screen and the accent is never doubled. */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(var(--ink-rgb), 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong);
  transform: translateY(110%);
  transition: transform 0.2s ease;
}
.dock[data-show="true"] { transform: none; }
.dock .dock-meta { flex: 1 1 auto; min-width: 0; }
.dock .dock-name { font-size: 12px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock .dock-price { font-size: 15px; font-weight: 600; margin: 0; }
.dock .btn { width: auto; flex: 0 0 auto; padding-inline: 24px; }
@media (min-width: 900px) { .dock { display: none; } }

/* Below the fold */
.details { border-top: 1px solid var(--line); }
.details summary {
  padding: 18px 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.details summary::-webkit-details-marker { display: none; }
.details summary::after { content: "+"; font-size: 18px; color: var(--ash); }
.details[open] summary::after { content: "\2013"; }
.details .details-body { padding: 0 0 22px; color: var(--dim); font-size: 14px; }
.details dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; }
.details dt { color: var(--ash); }
.details dd { margin: 0; }

.back-link { display: inline-flex; align-items: center; gap: 8px; padding: 20px 0;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.back-link:hover { color: var(--bone); }

/* --------------------------------------------------------------------------
   10. PASSPHRASE GATE
   Obscurity, not security. See gate.js.
   -------------------------------------------------------------------------- */
html.is-gated body > *:not(.gate) { display: none !important; }
html.is-gated { background: var(--ink); }
.gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  background: var(--ink);
}
.gate-inner { width: 100%; max-width: 340px; text-align: center; }
.gate .display { margin-bottom: 6px; }
.gate p { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin: 0 0 24px; }
.gate form { display: grid; gap: 10px; }
.gate .gate-err { font-size: 12px; color: var(--accent); min-height: 1.2em; margin: 4px 0 0;
  letter-spacing: 0.08em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   10b. SHOP — collection grid, filters, colour swatches

   One template serves both the "by line" and "by category" routes. There is
   no second collection stylesheet for the same reason there is no second
   collection template.
   -------------------------------------------------------------------------- */

/* Filters: Line, Category, Colour, Size, Availability. Nothing else. */
.filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}
@media (min-width: 760px) {
  .filters { grid-template-columns: repeat(5, 1fr) auto; align-items: end; }
}
.filter label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 6px;
}
.filters select { min-height: 44px; padding: 10px 12px; font-size: 14px; background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px; }
.filters .btn { grid-column: 1 / -1; }
@media (min-width: 760px) { .filters .btn { grid-column: auto; min-height: 44px; } }

.result-count {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}
.result-count strong { color: var(--bone); font-weight: 600; }

.empty-state { padding: 40px 0; color: var(--dim); font-size: 14px; }
.linkish {
  background: none; border: 0; padding: 0;
  color: var(--bone); font: inherit; text-decoration: underline; cursor: pointer;
}

/* ---- Product card — ONE PER STYLE, never one per colourway -------------- */
.pcard { display: flex; flex-direction: column; gap: 9px; }
.pcard-media { display: block; }

/* The frame carries the selected colourway as a tint. No photography exists,
   so it stays a marked empty frame: dashed border and PLACEHOLDER tag intact.
   --frame is set inline per card from a section 1b swatch token. */
.pcard-frame {
  aspect-ratio: 3 / 4;
  min-height: 0;
  padding: 0;
  background-color: var(--frame, var(--army));
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(var(--ink-rgb), 0.34) 0 10px,
    rgba(var(--ink-rgb), 0) 10px 20px
  );
  transition: background-color 0.15s;
}
/* Chip, not bare text: swatches run from near-black to cream, and only a
   solid ground stays legible across all of them. */
.pcard-frame [data-frame-label] {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(var(--ink-rgb), 0.82);
  padding: 4px 8px;
  max-width: none;
}

/* Gallery frames tint to the selected colourway on the product page. */
.gallery[data-swatch] .ph { background-color: var(--frame, var(--army)); }
.colour-name { color: var(--bone); letter-spacing: 0.08em; }

/* ---- Colour swatches ---------------------------------------------------- */
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sw {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--chip, var(--ash));
  cursor: pointer;
  flex: 0 0 auto;
}
.sw[aria-checked="true"] { outline: 2px solid var(--bone); outline-offset: 2px; }
.sw:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.sw-count { font-size: 10px; letter-spacing: 0.1em; color: var(--ash); margin-left: 2px; }

/* Women's block heading inside a tier. */
.group-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  margin: 44px 0 18px; padding-top: 18px; border-top: 1px solid var(--line-strong);
}
.group-head h2 { margin: 0; }
.group-head p { margin: 0; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ash); }

/* Current colourway name, always shown — the hexes are screen reference,
   not dye standards, so the name is the authority. */
.colour-now {
  margin: 0; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ash);
}
/* A colour option with no render. Still selectable — colour options are
   data — but marked so nobody reads a missing image as a missing colour. */
.sw[data-norender="true"] { border-style: dashed; opacity: 0.75; }

.stock-line {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ---- Same body, three levels ------------------------------------------- */
.ladder { display: grid; gap: 10px; }
@media (min-width: 700px) { .ladder { grid-template-columns: repeat(3, 1fr); } }
.rung {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.rung[data-current="true"] { border-color: var(--line-strong); background: var(--surface-high); }
.rung .rung-step { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); margin: 0; }
.rung .rung-line { font-size: 13px; font-weight: 600; margin: 0; }
.rung .rung-branding { font-size: 12px; color: var(--dim); margin: 0; }
.rung .rung-price { font-size: 15px; font-weight: 600; margin: 4px 0 0; }
.rung .rung-here { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }

/* --------------------------------------------------------------------------
   10c. THE PLINTH — how white-ground renders sit on dark chrome

   The renders are flat spec plates trimmed on pure rgb(255,255,255). The
   site is near-black. Three ways to reconcile that, and only one works:

     1. Knock the white out and float garments on the dark page.
        FAILS. No blend mode separates a cream hoodie from a white ground —
        they are the same value. It would silently delete the lightest
        third of the range.
     2. Lighten the site. Rejected — the chrome is the brand.
     3. Give the render its own light ground. This.

   The plinth is --bone, and the image multiplies over it. Multiply scales
   each channel by the ground, so pure white lands EXACTLY on bone: the
   white box dissolves into the plinth with no seam, by arithmetic rather
   than by masking. No image is edited and no new colour is introduced —
   bone is already one of the five interface tokens.

   The cost, knowingly taken: everything darkens by the bone ratio, about
   9%. Uniform, no hue shift. Acceptable on plates that are explicitly not
   for approving a sample.

   At shoot time this whole treatment is one class. Drop .plinth and real
   photography goes edge to edge on dark.
   -------------------------------------------------------------------------- */
.plinth {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9%;
  background: var(--bone);
  /* Confines the blend to this box so the image multiplies with the plinth
     and not with whatever is painted behind the card. */
  isolation: isolate;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.plinth img {
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Marked interim, the same way the hero is. Ink on bone — the .ph tag is
   bone on ink and would be invisible here. */
.plinth::after {
  content: "INTERIM";
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 3px 5px;
  color: var(--bone);
  background: rgba(var(--ink-rgb), 0.72);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   10d. RANGE PAGE — a visual index of the line sheet, not a shop
   -------------------------------------------------------------------------- */
.range-head { display: grid; gap: 16px; align-items: center; margin-top: 20px; }
@media (min-width: 640px) { .range-head { grid-template-columns: 180px 1fr; gap: 28px; } }
.plinth-head { aspect-ratio: 16 / 7; padding: 7%; }
.range-count { margin: 8px 0 0; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ash); }
.range-note { margin-top: 24px; }

.range-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.range-tabs a {
  padding: 9px 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  border: 1px solid var(--line);
  color: var(--dim);
}
.range-tabs a:hover { color: var(--bone); border-color: var(--line-strong); }
.range-tabs a[aria-current="page"] { color: var(--ink); background: var(--bone); border-color: var(--bone); }
.range-tabs .tab-n { color: var(--ash); margin-left: 4px; }
.range-tabs a[aria-current="page"] .tab-n { color: var(--ink); opacity: 0.6; }

.range-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .range-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .range-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 1200px) { .range-grid { grid-template-columns: repeat(5, 1fr); } }
.range-item { margin: 0; }
.range-item figcaption {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
}

/* Link from a collection page through to its line sheet. */
.range-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 14px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--bone);
}
.range-link:hover { background: var(--surface-high); }

/* --------------------------------------------------------------------------
   11. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack-sm > * + * { margin-top: 10px; }
.stack > * + * { margin-top: 22px; }
.mt-lg { margin-top: 44px; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}