/* ============================================================================
   STYLISTA — "THE MIRROR ROOM"
   A fitting room at midnight. Near-black and chrome-lit, where the only
   bright thing in the room is you.

   DESIGN LAW (read before editing)
   1. ONE bold device: the mirror portal. It is the hero, the try-on surface,
      and the category frame. Nothing else competes with it.
   2. ONE signal colour: --flare (acid). Rationed to live state, active state
      and the primary action. Never decorative, never a gradient.
   3. Neutrals are WARM-shifted. Never pure #000 / #fff.
   4. Chrome is a MATERIAL, not a colour. Only the wordmark and mirror rims
      carry it. Never chrome a body element.
   5. No centred badge-pill hero. No icon-tile card triplets. No coloured
      left-border cards. No gradient text. These read AI-generated.
   6. Type does the work: display is huge, wide and tight-tracked; labels are
      tiny mono with wide tracking. The gap between them IS the design.
   7. Motion encodes meaning. One orchestrated moment per surface. Exits are
      faster than entrances. Everything gated on prefers-reduced-motion.
   ========================================================================= */

:root {
  /* ---- canvas: warm near-black, never #000 ---------------------------- */
  --void:      #0B0A0C;
  --room:      #100E11;
  --riser:     #17141A;
  --raised:    #1E1A21;

  /* ---- ink: warm off-white, never #fff -------------------------------- */
  --ink:       #F5F1EA;
  --ink-2:     rgba(245, 241, 234, 0.72);
  --ink-3:     rgba(245, 241, 234, 0.48);
  --ink-4:     rgba(245, 241, 234, 0.28);

  /* ---- hairlines: alpha, never solid grey boxes ----------------------- */
  --rule:      rgba(245, 241, 234, 0.10);
  --rule-2:    rgba(245, 241, 234, 0.18);

  /* ---- the ONE signal ------------------------------------------------- */
  /* Aqua-teal, not acid: it reads as the cold edge of polished chrome and
     sits opposite the warm tungsten in every photograph, which is why the
     imagery pops against it. --flare-rgb exists so nothing has to hard-code
     the channels again — every alpha use derives from the token. */
  --flare:     #3EE8D4;
  --flare-rgb: 62, 232, 212;
  --flare-dim: rgba(var(--flare-rgb), 0.16);
  --flare-ink: #0B0A0C;

  /* ---- chrome: a material, for the wordmark + mirror rim only ---------- */
  --chrome: linear-gradient(
      168deg,
      #FFFFFF 0%,  #C9C6CE 14%, #7E7A86 27%, #E9E6EE 41%,
      #A3A0AA 56%, #F6F4F8 69%, #8B8792 82%, #DEDBE4 100%);
  --chrome-rim: linear-gradient(
      150deg,
      rgba(255,255,255,.92), rgba(160,157,168,.28) 32%,
      rgba(255,255,255,.55) 54%, rgba(120,117,128,.22) 78%,
      rgba(255,255,255,.80));

  /* ---- type ----------------------------------------------------------- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- motion --------------------------------------------------------- */
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --gutter: clamp(18px, 4vw, 60px);
  --maxw: 1440px;
}

/* ---------- reset ---------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
/* `display:block` above is an AUTHOR rule, so it beats the UA stylesheet's
   [hidden]{display:none} — every hidden <img> kept rendering its alt text.
   Restore the attribute's meaning. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--flare); color: var(--flare-ink); }

:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- grain: the whole room sits under film ---------------------- */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9999;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ============================================================================
   TYPE
   ========================================================================= */

.display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  text-transform: uppercase;
  line-height: .84;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* the scale gap between display and label IS the design */
.d-xl { font-size: clamp(3.2rem, 15vw, 15rem); letter-spacing: -.05em; }
.d-lg { font-size: clamp(2.6rem, 9vw, 7.5rem); }
.d-md { font-size: clamp(2rem, 5.2vw, 4rem); }
.d-sm { font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -.025em; }

.label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--ink-3);
}
.label--flare { color: var(--flare); }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}

.folio {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* the chrome wordmark — the only chromed type on the site */
.chrome-type {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* background-clip:text clips ascenders without breathing room */
  padding: .08em .06em .12em;
  margin: -.08em -.06em -.12em;
}

/* ============================================================================
   SHELL
   ========================================================================= */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1720px; }

/* ---------- nav: a drafting title block ------------------------------
   One rectangle spanning the page, divided into equal cells by hairlines —
   the same language as the technical plates the bench draws. Identical on
   every page. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  /* The box is the page's title block, so it should span the page — a narrow
     inset made it read as a floating pill instead. */
  padding: 12px clamp(10px, 1.4vw, 22px);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav[data-stuck='true'] {
  background: linear-gradient(to bottom, rgba(11,10,12,.92), rgba(11,10,12,.55) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* Flex, not grid: pages carry different numbers of cells (some have no
   action cell at all) and a fixed column count would leave a gap or wrap. */
.nav-box {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule-2);
  background: rgba(11, 10, 12, .74);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  max-width: 1860px;
  margin-inline: auto;
}

.nav-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 8px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-left: 1px solid var(--rule-2);
  transition: color .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
  min-width: 0;
}
.nav-cell:first-child { border-left: 0; }
.nav-cell:hover { color: var(--ink); background: rgba(245,241,234,.04); }

/* the page you are on, marked the way a drawing marks its sheet */
.nav-cell[aria-current='page'] { color: var(--flare); }
.nav-cell[aria-current='page']::before { content: '·'; color: var(--flare); }

/* every cell shares the width equally; the mark gets a little more */
.nav-cell { flex: 1 1 0; }
.nav-mark { flex: 1.4 1 0; }
.nav-mark {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* the last cell is the action: filled, so there is exactly one bright thing */
.nav-cell--act { background: var(--flare); color: var(--flare-ink); }
.nav-cell--act:hover { background: var(--flare); color: var(--flare-ink); filter: brightness(1.06); }
.nav-cell--meta { color: var(--ink-4); }

/* ---------- mobile: the box keeps its rules, the rest folds into MORE ----
   On a phone the wide cells are unreadable, but hiding them outright made
   Wardrobe / Feed / Account unreachable. So they fold into a MORE cell that
   opens a panel drawn in the same ruled language. */
.nav-more { display: none; }
/* a glyph, not a word: kill the letter-spacing that would push it off-centre
   and give it enough size to read at cell scale */
.nav-more { font-size: 15px; letter-spacing: 0; line-height: 1; flex: 0 0 46px; }

/* full labels on desktop, short ones on a phone — measured, not guessed */
.lbl-short { display: none; }
.nav-panel {
  display: none;
  border: 1px solid var(--rule-2);
  border-top: 0;
  background: rgba(11, 10, 12, .96);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  max-width: var(--maxw);
  margin-inline: auto;
}
.nav-panel[data-open='true'] { display: grid; grid-template-columns: 1fr 1fr; }
.nav-panel a {
  padding: 15px 12px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-top: 1px solid var(--rule-2);
  border-left: 1px solid var(--rule-2);
}
.nav-panel a:nth-child(odd) { border-left: 0; }
.nav-panel a[aria-current='page'] { color: var(--flare); }

@media (max-width: 900px) {
  /* the box stays a box — it just carries fewer cells */
  .nav-cell--drop { display: none; }
  .nav-more { display: flex; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .nav-cell { font-size: 9px; letter-spacing: .12em; padding: 12px 6px; }

  /* Solid, not translucent. Mobile browsers sample the top of the page to
     tint their own chrome, and over the hero image that came out pale. */
  .nav { background: var(--void); padding-bottom: 0; padding-inline: 8px; }
  .nav[data-stuck='true'] { background: var(--void); }
  .nav-box { background: var(--void); }
}

/* ---------- the action ------------------------------------------------- */
.act {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--flare);
  color: var(--flare-ink);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  will-change: transform;
}
.act:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -10px var(--flare-dim); }
.act--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-2);
}
.act--ghost:hover { border-color: var(--ink-3); box-shadow: none; }

/* ============================================================================
   THE MIRROR — the one bold device
   ========================================================================= */

.mirror {
  position: relative;
  border-radius: 50% 50% 46% 46% / 34% 34% 8% 8%;
  overflow: hidden;
  isolation: isolate;
  background: var(--riser);
}
/* the chrome rim */
.mirror::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--chrome-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 3;
  pointer-events: none;
}
/* the bulb bloom, top-left, like a real fitting-room lamp */
.mirror::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(60% 42% at 22% 6%, rgba(255,251,240,.30), transparent 62%),
    radial-gradient(40% 30% at 88% 94%, rgba(var(--flare-rgb), .07), transparent 70%);
  z-index: 2;
  pointer-events: none;
}
.mirror > img,
.mirror > video { width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.mirror--rect { border-radius: 4px; }
.mirror--live::after { animation: bloom 5s var(--ease) infinite; }
@keyframes bloom { 0%,100% { opacity: 1 } 50% { opacity: .62 } }

/* ============================================================================
   SECTIONS
   ========================================================================= */

.section { padding-block: clamp(80px, 12vh, 170px); }

.rule-top { border-top: 1px solid var(--rule); }

/* editorial header: label left, folio right, headline below full width */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: clamp(24px, 4vw, 48px);
}

/* ---------- interstitial: the rhythm break ---------------------------- */
.band {
  padding-block: clamp(70px, 14vh, 150px);
  background: var(--room);
  border-block: 1px solid var(--rule);
}

/* ---------- marquee --------------------------------------------------- */
.marquee { overflow: hidden; display: flex; gap: 0; user-select: none; }
.marquee-track {
  display: flex;
  gap: clamp(28px, 5vw, 70px);
  padding-right: clamp(28px, 5vw, 70px);
  flex-shrink: 0;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }
.marquee-item {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: clamp(2rem, 5.5vw, 4.6rem);
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink-4);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
}
.marquee-item::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--flare);
  flex-shrink: 0;
}

/* ---------- steps: numbered editorial rows, NOT icon cards ------------- */
.steps { border-top: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(18px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(32px, 5vw, 60px);
  border-bottom: 1px solid var(--rule);
  transition: background .5s var(--ease);
}
.step:hover { background: rgba(245, 241, 234, .022); }
.step-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--flare);
  font-variant-numeric: tabular-nums;
  padding-top: .6em;
}
.step-t { font-family: var(--display); font-weight: 700; font-stretch: 112%;
          text-transform: uppercase; font-size: clamp(1.4rem, 3.2vw, 2.5rem);
          letter-spacing: -.028em; line-height: .96; }
.step-b { color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 42ch; }
@media (max-width: 860px) {
  .step { grid-template-columns: auto minmax(0, 1fr); }
  .step-b { grid-column: 2; }
}

/* ---------- category strips: full-bleed editorial, not cards ----------- */
.strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 5vw, 80px);
  padding-block: clamp(40px, 7vw, 90px);
  border-bottom: 1px solid var(--rule);
}
/* media is already first in the DOM, so order:-1 was a no-op. Push it right
   to actually alternate. */
.strip:nth-child(even) > .strip-media { order: 2; }
@media (max-width: 900px) {
  .strip { grid-template-columns: 1fr; }
  .strip:nth-child(even) > .strip-media { order: 0; }
}
.strip-media { position: relative; aspect-ratio: 4 / 5; }
.strip-media .mirror { position: absolute; inset: 0; }
/* the rhythm break: one element deliberately off-axis */
.strip:nth-child(3) .strip-media { transform: rotate(-2.2deg); }

.strip-body { display: flex; flex-direction: column; gap: 16px; }
.strip-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink-3);
  transition: border-color .3s, color .3s;
}
.tag:hover { border-color: var(--flare); color: var(--flare); }

/* ---------- the two endings ------------------------------------------- */
.ends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
        background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 820px) { .ends { grid-template-columns: 1fr; } }
.end {
  background: var(--void);
  padding: clamp(28px, 4vw, 52px);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 340px;
  transition: background .5s var(--ease);
}
.end:hover { background: var(--room); }
.end-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.end-body { color: var(--ink-2); font-size: 15px; line-height: 1.62; max-width: 40ch; flex: 1; }

/* ---------- footer as destination -------------------------------------- */
.foot { padding-top: clamp(60px, 9vh, 120px); border-top: 1px solid var(--rule); }
/* The wordmark must fill the wrap exactly. vw sizing overflows once .wrap
   caps at --maxw (the viewport keeps growing, the box doesn't), so size it
   against the CONTAINER. vw clamp stays as the pre-container-query fallback. */
.foot .wrap { container-type: inline-size; }
.foot-mark {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 15.2vw, 13rem);
  line-height: .74;
  letter-spacing: -.055em;
  color: var(--ink-4);
  padding-block: clamp(20px, 4vw, 50px);
  user-select: none;
  white-space: nowrap;
}
@supports (font-size: 1cqw) {
  .foot-mark { font-size: 16.2cqw; }
}
.foot-rows {
  display: flex; flex-wrap: wrap; gap: 18px 40px;
  justify-content: space-between; align-items: center;
  padding-block: 26px; border-top: 1px solid var(--rule);
}

/* ============================================================================
   MOTION — one orchestrated moment, staggers trace reading order
   ========================================================================= */

.rv { opacity: 0; transform: translateY(22px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

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

/* scroll reveals must not print blank */
@media print {
  .rv { opacity: 1 !important; transform: none !important; }
  body::after { display: none; }
}