/* LightHouse site — Sunset Noir, in glass.
   Tokens mirror mobile/src/theme.ts: espresso ground, ember glows, frosted panes,
   tangelo → marigold wherever a luxury label would use gold. */

:root {
  --bg: #1E130C;
  --bg-deep: #0F0B09;
  --surface: #2A1B11;
  --card: rgba(255, 232, 208, 0.06);
  --card-raised: rgba(255, 232, 208, 0.10);
  --border: rgba(255, 224, 190, 0.12);
  --border-strong: rgba(255, 224, 190, 0.24);
  --glass-edge: rgba(255, 238, 218, 0.26);
  --inset: rgba(12, 6, 3, 0.34);
  --bar: rgba(26, 16, 10, 0.94);
  --ink: #FFF3E3;
  --muted: #BFA088;
  --faint: #8A6F5A;
  --accent: #F88F22;
  --accent-strong: #F3500A;
  --accent-deep: #EA6113;
  --gold: #FBB931;
  --cream: #FFE3B3;
  --on-accent: #1A0E05;
  --rosewood: #5A0006;
  --sangria: #920004;
  --danger-deep: #D92200;
  --grad-sunset: linear-gradient(90deg, #EA6113, #F88F22, #FBB931);
  --grad-ember: linear-gradient(90deg, #920004, #D92200, #F3500A);
  --brass: linear-gradient(180deg, #FFE3B3 0%, #FBB931 30%, #B8781E 60%, #5A3A12 100%);
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 5vw, 96px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --open: 0; /* door progress, set by main.js */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Ambient ground: grid that fades, three ember glows ---------- */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background-image:
    linear-gradient(rgba(255, 214, 170, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 214, 170, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
}
body::after {
  background:
    radial-gradient(60vmax 60vmax at 8% 30%, rgba(146, 0, 4, 0.55), transparent 60%),
    radial-gradient(55vmax 55vmax at 92% 8%, rgba(234, 97, 19, 0.42), transparent 60%),
    radial-gradient(50vmax 50vmax at 70% 95%, rgba(251, 185, 49, 0.18), transparent 60%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2vw, -2vh, 0) scale(1.06); }
}
main, header, footer { position: relative; z-index: 1; }

/* The room continues past the doors: a floor that streams toward you as you scroll, and
   the two side walls of the closet, their rails receding. Both appear once the doors open. */
.walk {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  perspective: 1400px;
  overflow: hidden;
}
body.is-open .walk { opacity: 1; }
.walk__floor {
  position: absolute;
  left: -30%; right: -30%;
  bottom: 0;
  height: 46vh;
  transform-origin: 50% 100%;
  transform: rotateX(58deg);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.35) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.35) 100%);
}
.walk__floor::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -120px;
  height: calc(100% + 120px);
  background-image:
    linear-gradient(rgba(251, 185, 49, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 185, 49, 0.30) 1px, transparent 1px);
  background-size: 120px 120px;
  will-change: transform;
  transform: translate3d(0, var(--floor, 0px), 0);
}
.walk__wall {
  position: absolute;
  top: 0; bottom: 0;
  width: 16vw;
  background:
    linear-gradient(90deg, transparent 58%, rgba(251, 185, 49, 0.18) 58%, rgba(251, 185, 49, 0.18) calc(58% + 2px), transparent calc(58% + 2px)),
    repeating-linear-gradient(180deg, transparent 0 118px, rgba(251, 185, 49, 0.14) 118px 120px, transparent 120px 140px),
    linear-gradient(90deg, rgba(20, 12, 8, 0.9), rgba(20, 12, 8, 0.25) 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.walk__wall--l { left: 0; transform: perspective(900px) rotateY(48deg); transform-origin: left; }
.walk__wall--r {
  right: 0;
  transform: perspective(900px) rotateY(-48deg);
  transform-origin: right;
  background:
    linear-gradient(270deg, transparent 58%, rgba(251, 185, 49, 0.18) 58%, rgba(251, 185, 49, 0.18) calc(58% + 2px), transparent calc(58% + 2px)),
    repeating-linear-gradient(180deg, transparent 0 118px, rgba(251, 185, 49, 0.14) 118px 120px, transparent 120px 140px),
    linear-gradient(270deg, rgba(20, 12, 8, 0.9), rgba(20, 12, 8, 0.25) 70%, transparent);
}
@media (max-width: 900px) { .walk__wall { display: none; } }

/* Each section is a wall of the closet you walk up to: it rises out of the depth as you
   approach and slips overhead once you've moved on. Driven by two classes from main.js and
   animated by the compositor, so nothing is recomputed per scroll frame. */
.wall {
  transform-origin: 50% 0;
  opacity: 0;
  transform: perspective(1400px) translate3d(0, 40px, -520px);
  transition: transform 1.1s var(--ease), opacity .9s var(--ease);
}
.wall.is-here { opacity: 1; transform: none; }
.wall.is-past { opacity: 0.15; transform: perspective(1400px) translate3d(0, -70px, 160px); }
/* Off-screen racks are not laid out or painted at all. */
.rack { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
@media (prefers-reduced-motion: reduce) { .wall { transform: none !important; opacity: 1 !important; transition: none; } }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0;
  font-size: clamp(38px, 6.2vw, 80px);
  color: var(--ink);
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-weight: 500;
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
}
.kicker {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker span { color: var(--faint); }
.kicker--wordmark {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.45em;
  color: var(--cream);
}
.lede {
  margin: 18px auto 0;
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 18px);
}

/* ---------- Glass ---------- */
.pane {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-top-color: var(--glass-edge);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 238, 218, 0.10), 0 30px 60px -40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.pane::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 238, 218, 0.10), transparent 32%, transparent 68%, rgba(255, 238, 218, 0.04));
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--card-raised);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s;
  white-space: nowrap;
}
.pill:hover { transform: translateY(-1px); }
.pill--glow {
  background: var(--grad-sunset);
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 227, 179, 0.25) inset, 0 0 28px rgba(248, 143, 34, 0.55), 0 12px 30px -12px rgba(243, 80, 10, 0.8);
}
.pill--glow:hover { box-shadow: 0 0 0 1px rgba(255, 227, 179, 0.35) inset, 0 0 40px rgba(248, 143, 34, 0.75), 0 14px 34px -12px rgba(243, 80, 10, 0.9); }
.pill--small { padding: 10px 16px; font-size: 13px; }
.pill--ghost { background: transparent; color: var(--muted); }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cream);
}
.wordmark img { width: 26px; height: auto; filter: drop-shadow(0 0 10px rgba(251, 185, 49, 0.5)); }
.topbar__cta {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  font-size: 13px;
  padding: 10px 18px;
}
body.is-open .topbar__cta { opacity: 1; transform: none; }

/* ---------- The doors ---------- */
.doors { height: 230vh; }
.doors__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  perspective: 1400px;
}

.room {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 100%, #2A1B11 0%, var(--bg) 55%, var(--bg-deep) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.room__light {
  position: absolute;
  left: 50%; top: -10vh;
  width: 120vmax; height: 90vh;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 0%, rgba(255, 227, 179, 0.28), rgba(248, 143, 34, 0.10) 40%, transparent 70%);
  opacity: calc(0.3 + var(--open) * 0.7);
}
.room__floor {
  position: absolute;
  left: -40%; right: -40%;
  top: 50%;
  height: 64vh; /* kept short so the near edge stays well inside the stage's perspective */
  transform-origin: 50% 0;
  transform: rotateX(60deg) translateZ(0);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.6) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.6) 100%);
  opacity: calc(0.2 + var(--open) * 0.8);
}
.room__floor::before {
  /* The grid slides toward the viewer on its own compositor layer, so nothing repaints. */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -120px;
  height: calc(100% + 120px);
  background-image:
    linear-gradient(rgba(251, 185, 49, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 185, 49, 0.28) 1px, transparent 1px);
  background-size: 120px 120px;
  will-change: transform;
  animation: floor 6s linear infinite;
}
@keyframes floor { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 120px, 0); } }
.room__rail {
  position: absolute;
  top: 26%;
  width: 34vw;
  height: 6px;
  background: var(--brass);
  border-radius: 3px;
  box-shadow: 0 0 18px rgba(251, 185, 49, 0.45), 0 40px 60px -20px rgba(0,0,0,.8);
  opacity: calc(var(--open) * 1);
}
.room__rail::after {
  content: "";
  position: absolute;
  left: 4%; right: 4%; top: 6px;
  height: 46vh;
  /* Hanging clothes in silhouette under each rail. Kept faint and faded toward the middle of
     the room, so the sides never read as lit panels with a dark gap between them. */
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 232, 208, 0.09) 42px 44px, transparent 44px 80px),
    linear-gradient(180deg, rgba(255, 232, 208, 0.04), transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent);
  mask-image: linear-gradient(180deg, #000 20%, transparent);
}
.room__rail--l { left: 0; transform: perspective(700px) rotateY(40deg) translateX(calc(var(--mx, 0) * -6px)); transform-origin: left; }
.room__rail--r { right: 0; transform: perspective(700px) rotateY(-40deg) translateX(calc(var(--mx, 0) * 6px)); transform-origin: right; }
.room__rail--l::after { -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent), linear-gradient(90deg, #000 40%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 20%, transparent), linear-gradient(90deg, #000 40%, transparent); mask-composite: intersect; }
.room__rail--r::after { -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent), linear-gradient(270deg, #000 40%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 20%, transparent), linear-gradient(270deg, #000 40%, transparent); mask-composite: intersect; }
.room__lantern {
  position: absolute;
  left: 50%; top: 20vh;
  width: clamp(150px, 17vw, 240px);
  transform: translateX(-50%) translateY(calc(var(--my, 0) * 6px));
  filter: drop-shadow(0 0 24px rgba(251, 185, 49, 0.55));
  /* Appears once the doors have parted enough that the split mark on them has moved aside. */
  opacity: clamp(0, calc((var(--open) - 0.45) * 2.2), 1);
}
.room__copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: start center;
  text-align: center;
  padding: calc(20vh + clamp(150px, 17vw, 240px) * 1.15 + 5vh) var(--gutter) 10vh;
  opacity: clamp(0, calc((var(--open) - 0.55) * 2.4), 1);
  transform: translateY(calc((1 - var(--open)) * 40px));
}
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.scroll-cue i {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: scaleY(0.6); transform-origin: top; opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

.door {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;
  z-index: 3;
  transition: none;
  will-change: transform;
}
.door--l { left: 0; transform: translate3d(calc(var(--open) * -104%), 0, 0); }
.door--r { right: 0; transform: translate3d(calc(var(--open) * 104%), 0, 0); }
.door__panel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 232, 208, 0.05), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.45)),
    linear-gradient(180deg, rgba(255, 227, 179, 0.06), transparent 22%),
    repeating-linear-gradient(90deg, rgba(255, 214, 170, 0.05) 0 1px, rgba(0, 0, 0, 0.12) 1px 3px, transparent 3px 16px),
    linear-gradient(180deg, #2C1B11, #1C120B 55%, #130C07);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 190, 0.08), inset 0 0 120px rgba(0, 0, 0, 0.35);
}
.door__panel::before, .door__panel::after {
  content: "";
  position: absolute;
  border-radius: 2px;
  pointer-events: none;
}
.door__panel::before {
  /* Brass inlay, a hairline set into the lacquer. */
  inset: 5% 8%;
  border: 1px solid rgba(251, 185, 49, 0.42);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 30px rgba(251, 185, 49, 0.06);
}
.door__panel::after {
  inset: 7.5% 10.5%;
  border: 1px solid rgba(255, 224, 190, 0.09);
}
.door--r .door__panel { transform: scaleX(-1); }
.door__handle {
  /* A slim pull, set low so it never crosses the words. */
  /* Anchored to the bottom so it clears the words on short screens as well as tall ones. */
  position: absolute;
  bottom: 6vh;
  width: 4px; height: clamp(90px, 18vh, 170px);
  border-radius: 2px;
  background: var(--brass);
  box-shadow: 0 0 14px rgba(251, 185, 49, 0.55), 0 0 36px rgba(248, 143, 34, 0.25), inset 0 0 0 1px rgba(255, 238, 218, 0.3);
}
.door__handle::before, .door__handle::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 10px; height: 3px;
  border-radius: 2px;
  background: var(--brass);
}
.door__handle::before { top: -2px; }
.door__handle::after { bottom: -2px; }
.door--l .door__handle { right: 26px; }
.door--r .door__handle { left: 26px; }
.door::after {
  /* Light leaking through the seam as the doors begin to part. */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 14px;
  background: linear-gradient(90deg, transparent, rgba(255, 227, 179, 0.55), transparent);
  filter: blur(2px);
  opacity: clamp(0, calc(var(--open) * 5), 1);
  pointer-events: none;
}
.door--l::after { right: -7px; }
.door--r::after { left: -7px; }

.doors__copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--open) * 2.6), 1);
  transform: translateY(calc(var(--open) * -60px)) scale(calc(1 - var(--open) * 0.08));
}
.doors__copy > * { pointer-events: auto; }
.doors__copy .display { text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
.doors__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 32px; }
.doors__price { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }

/* ---------- Closet map ---------- */
.map {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity .4s;
}
body.is-open .map { opacity: 1; }
.map a { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; color: var(--faint); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.map a span { opacity: 0; transform: translateX(6px); transition: .25s var(--ease); }
.map a:hover span, .map a.is-active span { opacity: 1; transform: none; color: var(--muted); }
.map a i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transition: .25s; }
.map a.is-active i { background: var(--gold); box-shadow: 0 0 12px var(--gold); transform: scale(1.3); }
@media (max-width: 1100px) { .map { display: none; } }

/* ---------- Racks ---------- */
.rack, .drawers, .price, .mirror { padding: clamp(72px, 11vh, 140px) 0; }
.rack__head { text-align: center; padding: 0 var(--gutter); margin: 0 auto 40px; max-width: 900px; }
.rack__foot { text-align: center; color: var(--faint); font-size: 13px; margin: 26px var(--gutter) 0; }

.rail-wrap {
  position: relative;
  --hanger-w: 300px;
  --gap: 44px;
  --hook-w: 150px;
  --hook-h: 55px;
  --bar-top: 9px;
  --garment-h: 300px;
}
.rail-wrap::before {
  /* The brass bar the hangers hang from. */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--bar-top);
  height: 7px;
  border-radius: 4px;
  background: var(--brass);
  box-shadow: 0 0 22px rgba(251, 185, 49, 0.35), 0 8px 24px -10px rgba(0,0,0,.9);
  z-index: 0;
}
.rail {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  cursor: grab;
  overscroll-behavior-x: contain;
  padding: 0 var(--gutter) 30px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
/* The belt runs out of sight at both ends; pieces emerge from the edges. */
.rail-clip {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.rail.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.rail.is-dragging .hanger { pointer-events: none; }
.hangers { display: flex; gap: var(--gap); }
.hanger {
  position: relative;
  flex: 0 0 auto;
  width: var(--hanger-w);
  scroll-snap-align: center;
  padding-top: calc(var(--hook-h) - 3px);
  transform-origin: 50% calc(var(--bar-top) + 3px);
  opacity: 0;
  transform: translateX(60px) scale(0.92) rotate(2deg);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.hanger.is-visible { opacity: 1; transform: none; }
.hanger:hover { animation: sway 2.6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { rotate: 0deg; } 30% { rotate: 1.4deg; } 70% { rotate: -1.2deg; } }
.hook {
  position: absolute;
  top: 2px; left: 50%;
  width: var(--hook-w); height: var(--hook-h);
  transform: translateX(-50%);
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 1;
}
.garment {
  position: relative;
  height: var(--garment-h);
  display: grid;
  place-items: start center;
  margin-top: -2px;
}
.garment svg {
  width: calc(var(--garment-h) * 0.8); height: var(--garment-h);
  fill: var(--g-fill, rgba(255, 232, 208, 0.08));
  stroke: var(--g-stroke, rgba(255, 224, 190, 0.7));
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill .4s, stroke .4s, opacity .4s;
}
.garment::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: -6px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.45), transparent 70%);
  pointer-events: none;
}
.garment svg .thin { stroke-width: 1; opacity: .55; }
.garment svg .dot { fill: var(--g-stroke, rgba(255, 224, 190, 0.7)); stroke: none; }
.garment--cream { --g-fill: rgba(255, 227, 179, 0.16); --g-stroke: #FFE3B3; }
.garment--tangelo { --g-fill: rgba(234, 97, 19, 0.22); --g-stroke: #F88F22; }
.garment--gold { --g-fill: rgba(251, 185, 49, 0.18); --g-stroke: #FBB931; }
.garment--rose { --g-fill: rgba(146, 0, 4, 0.34); --g-stroke: #FF6A4D; }
.garment--espresso { --g-fill: rgba(255, 232, 208, 0.07); --g-stroke: rgba(255, 224, 190, 0.62); }
.garment--grey { --g-fill: rgba(201, 206, 211, 0.12); --g-stroke: #C9CED3; }
.garment--ghost svg { stroke-dasharray: 5 6; fill: transparent; opacity: .7; }
.badge {
  position: absolute;
  top: 28px; right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent-strong);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 0 18px rgba(243, 80, 10, 0.7);
  transform: rotate(6deg);
}

.tag {
  position: relative;
  margin: -14px 14px 0;
  padding: 22px 18px 18px;
  background: var(--card-raised);
  border: 1px solid var(--border);
  border-top-color: var(--glass-edge);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 238, 218, 0.10), 0 24px 40px -30px rgba(0,0,0,.9);
}
.tag::before {
  /* The punched hole and string that ties the tag to the hanger. */
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 -18px 0 -2px rgba(251, 185, 49, 0.35);
}
.tag__kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.tag p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tag__state { font-size: 11px !important; color: var(--faint) !important; margin-bottom: 6px !important; letter-spacing: 0.04em; }

.rail__btn {
  position: absolute;
  top: calc(var(--garment-h) * 0.55);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bar);
  color: var(--cream);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.9);
  transition: transform .2s var(--ease), opacity .2s;
}
.rail__btn:hover { transform: scale(1.06); }
.rail__btn--prev { left: max(10px, calc(var(--gutter) - 40px)); }
.rail__btn--next { right: max(10px, calc(var(--gutter) - 40px)); }
.rail__btn:active { transform: scale(0.96); }
@media (max-width: 720px) { .rail__btn { display: none; } }

/* ---------- Rack 01: the scan ---------- */
.scanline {
  position: absolute;
  top: 30px; bottom: 20px;
  left: -8%;
  width: 3px;
  z-index: 4;
  background: linear-gradient(180deg, transparent, var(--gold) 20%, var(--cream) 50%, var(--gold) 80%, transparent);
  box-shadow: 0 0 24px rgba(251, 185, 49, 0.9), 0 0 60px rgba(248, 143, 34, 0.5);
  opacity: 0;
  pointer-events: none;
}
.rack--scan.is-in .scanline { animation: scan 2.2s var(--ease) .6s 1 forwards; }
@keyframes scan { 0% { opacity: 0; left: -2%; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; left: 102%; } }
/* ---------- Rack 02: the stylist ---------- */
.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 var(--gutter); margin-bottom: 34px; }
.chip {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .25s var(--ease);
}
.chip:hover { color: var(--ink); background: var(--card-raised); }
.chip.is-active {
  color: var(--on-accent);
  background: var(--grad-sunset);
  border-color: transparent;
  box-shadow: 0 0 22px rgba(248, 143, 34, 0.55);
}
.rack--stylist .hanger.is-picked .garment svg {
  filter: drop-shadow(0 0 16px rgba(248, 143, 34, 0.9));
  stroke: var(--gold);
}
.rack--stylist .hanger.is-picked .tag { border-color: rgba(251, 185, 49, 0.55); box-shadow: 0 0 30px -8px rgba(248, 143, 34, 0.6); }
.rack--stylist .hanger.is-picked .tag__state::before { content: "In the outfit · "; color: var(--gold); }
.rack--stylist .hanger.is-laundry .garment svg { opacity: .28; }
.rack--stylist .hanger.is-laundry .tag__state::before { content: "In the laundry · "; color: #FF6A4D; }
.rack--stylist .hanger.is-laundry .tag__state { text-decoration: none; }
.reply {
  margin: 8px var(--gutter) 0;
  padding: 22px 24px;
  max-width: 720px;
  margin-inline: auto;
  width: calc(100% - var(--gutter) * 2);
}
.reply__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.reply__who { color: var(--gold); font-weight: 700; }
.reply__text { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; min-height: 2.6em; }
.reply__text::after { content: "▍"; color: var(--gold); animation: blink 1s steps(2) infinite; }
.reply.is-done .reply__text::after { content: ""; }
@keyframes blink { to { opacity: 0; } }
.reply__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.reply__hint { font-size: 12.5px; color: var(--faint); }

/* ---------- Rack 03: the week ---------- */
.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 0 auto 40px;
  padding: 16px;
  width: min(880px, calc(100% - var(--gutter) * 2));
}
.week__day { position: relative; padding: 12px 10px 14px; border-radius: 12px; background: var(--inset); border: 1px solid transparent; min-height: 96px; }
.week__day span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.week__day i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin: 8px 3px 0 0; box-shadow: 0 0 8px var(--gold); }
.week__day b { display: block; margin-top: 8px; font-weight: 600; font-size: 14px; color: var(--ink); }
.week__day em { display: block; margin-top: 6px; font-style: normal; font-size: 11px; line-height: 1.35; color: var(--accent); }
.week__day--wash { border-color: rgba(248, 143, 34, 0.5); box-shadow: 0 0 20px -6px rgba(248, 143, 34, 0.6); }
.week__day--split b { color: var(--cream); }
@media (max-width: 720px) { .week { grid-template-columns: repeat(4, 1fr); } .week__day { min-height: 80px; } }

/* ---------- Rack 04: swatches ---------- */
.swatches { width: min(880px, calc(100% - var(--gutter) * 2)); margin: 0 auto 40px; padding: 18px 20px 20px; }
.swatches__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.swatches__head .kicker { margin: 0; color: var(--gold); }
.swatches__meta { font-size: 12px; color: var(--faint); letter-spacing: .04em; }
.swatches__row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 16px; }
.swatch { display: grid; gap: 6px; text-align: center; font-size: 11px; color: var(--muted); }
.swatch::before { content: ""; display: block; aspect-ratio: 1; border-radius: 12px; background: var(--c); border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px -4px var(--c); }
.swatch b { font-weight: 600; color: var(--ink); }
.swatch i { font-style: normal; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; font-size: 9.5px; }
.swatch--avoid::before { opacity: .5; filter: saturate(.6); box-shadow: none; }
.swatch--avoid i { color: #FF6A4D; }
@media (max-width: 720px) { .swatches__row { grid-template-columns: repeat(4, 1fr); } }
.garment--rated::after {
  content: attr(data-rating);
  position: absolute;
  right: 16px; top: 34px;
  padding: 4px 9px 4px 20px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card-raised) radial-gradient(circle at 10px 50%, var(--gold) 3.5px, transparent 4px);
  border: 1px solid var(--border-strong);
}
.garment--rated[data-rating="avoid"]::after { background-image: radial-gradient(circle at 10px 50%, #FF6A4D 3.5px, transparent 4px); }

/* ---------- Rack 05: forecast ---------- */
.forecast { width: min(720px, calc(100% - var(--gutter) * 2)); margin: 0 auto 40px; padding: 18px 20px; }
.forecast .kicker { margin: 0 0 12px; color: var(--gold); }
.forecast__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.forecast__days span { display: grid; gap: 4px; padding: 12px 8px; border-radius: 12px; background: var(--inset); text-align: center; }
.forecast__days b { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.forecast__days i { font-style: normal; font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--ink); }
.forecast__days em { font-style: normal; font-size: 11px; color: var(--muted); }

/* ---------- The drawer ---------- */
.drawers__stack { width: min(760px, calc(100% - var(--gutter) * 2)); margin: 0 auto; display: grid; gap: 12px; }
.drawer { border-radius: 16px; }
.drawer summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--ink);
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary i {
  flex: 0 0 auto;
  width: 44px; height: 8px;
  border-radius: 4px;
  background: var(--brass);
  box-shadow: 0 0 12px rgba(251, 185, 49, 0.45);
  transition: transform .35s var(--ease);
}
.drawer[open] summary i { transform: translateX(-10px) scaleX(1.25); }
.drawer p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 15px; max-width: 60ch; }

/* ---------- The price tag ---------- */
.price { padding-inline: var(--gutter); }
.price .display { font-size: clamp(34px, 4.8vw, 64px); }
.pricetags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 36px;
  max-width: 960px;
  margin: 0 auto;
}
.pricetag {
  width: min(440px, 100%);
  padding: 44px 32px 30px;
  text-align: center;
  border-radius: 26px 26px 22px 22px;
  transition: transform .5s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255, 238, 218, 0.12), 0 40px 80px -40px rgba(0,0,0,.9);
}
.pricetag--free { transform: rotate(1.5deg); margin-top: 28px; }
.pricetag--free .pricetag__amount b { background: none; color: var(--cream); -webkit-text-fill-color: currentColor; }
.pricetag--free .pricetag__hole { border-color: var(--cream); box-shadow: 0 0 10px rgba(255, 227, 179, 0.6), 0 -60px 0 -5px rgba(255, 227, 179, 0.3); }
.pricetag--free .kicker { color: var(--cream); }
.pricetag--stylist { transform: rotate(-2deg); box-shadow: inset 0 1px 0 rgba(255, 238, 218, 0.12), 0 0 80px -20px rgba(248, 143, 34, 0.45), 0 40px 80px -40px rgba(0,0,0,.9); }
.pricetag:hover { transform: rotate(0deg) translateY(-4px); }
.pricetag__hole {
  position: absolute;
  top: 14px; left: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 12px var(--gold), 0 -60px 0 -5px rgba(251, 185, 49, 0.35);
}
.pricetag--stylist .kicker { color: var(--gold); }
.pricetag__amount { margin: 8px 0 0; font-family: var(--font-display); line-height: 1; }
.pricetag__amount b { display: block; font-size: clamp(72px, 12vw, 108px); font-weight: 600; letter-spacing: -0.02em; background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pricetag__amount span { display: block; font-size: 22px; font-style: italic; color: var(--cream); margin-top: 2px; }
.pricetag__anchor { margin: 16px 0 0; color: var(--muted); font-size: 15px; }
.pricetag__list { margin: 24px 0 0; text-align: left; display: grid; gap: 8px; font-size: 14px; color: var(--ink); }
.pricetag__list li { padding-left: 22px; position: relative; }
.pricetag__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.pricetag__fine { margin: 16px 0 0; font-size: 12px; color: var(--faint); }

.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.store {
  display: inline-grid;
  text-align: left;
  padding: 10px 20px 11px 18px;
  min-width: 168px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--bar);
  color: var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.store small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.store b { font-size: 18px; font-weight: 600; }
.store:hover { transform: translateY(-2px); box-shadow: 0 0 28px -6px rgba(248, 143, 34, 0.6); border-color: rgba(251, 185, 49, 0.5); }
.store--glow { border-color: rgba(251, 185, 49, 0.45); box-shadow: 0 0 30px -8px rgba(248, 143, 34, 0.6); }

/* ---------- The mirror ---------- */
.mirror { display: grid; place-items: center; padding-inline: var(--gutter); }
.mirror__frame {
  width: min(680px, 100%);
  padding: 10px;
  border-radius: 340px 340px 28px 28px;
  background: var(--brass);
  box-shadow: 0 0 60px -10px rgba(251, 185, 49, 0.5), 0 60px 100px -50px rgba(0,0,0,1);
}
.mirror__glass {
  position: relative;
  border-radius: 330px 330px 20px 20px;
  padding: clamp(70px, 12vw, 120px) clamp(20px, 5vw, 56px) 48px;
  text-align: center;
  background:
    linear-gradient(160deg, rgba(255, 238, 218, 0.14), transparent 40%, transparent 60%, rgba(255, 238, 218, 0.05)),
    radial-gradient(70% 50% at 50% 100%, rgba(248, 143, 34, 0.25), transparent 70%),
    linear-gradient(180deg, #23150D, #150D08);
  overflow: hidden;
}
.mirror__glass::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 238, 218, 0.10) 50%, transparent 60%);
  animation: sheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen { 0%, 60% { transform: translateX(-40%); } 100% { transform: translateX(40%); } }
.mirror__glass .display { font-size: clamp(34px, 5.4vw, 64px); }
.mirror__price { margin: 18px 0 0; font-size: 13px; color: var(--muted); letter-spacing: .04em; }

/* ---------- Footer ---------- */
.footer { padding: 40px var(--gutter) 60px; text-align: center; color: var(--faint); font-size: 13px; border-top: 1px solid var(--border); }
.footer__wordmark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); letter-spacing: .4em; text-transform: uppercase; color: var(--cream); font-size: 13px; }
.footer p { margin: 12px 0 0; }
.footer nav { display: flex; justify-content: center; gap: 22px; margin-top: 16px; }
.footer nav a { color: var(--muted); }
.footer__legal { font-size: 11.5px; max-width: 60ch; margin-inline: auto; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after, .room__floor::before, .scroll-cue i, .mirror__glass::before, .reply__text::after { animation: none !important; }
  .hanger { transition: none; opacity: 1 !important; transform: none !important; }
  .hanger:hover { animation: none; }
  .rack--scan .scanline { display: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  .rail-wrap { --hanger-w: 236px; --gap: 28px; --hook-w: 120px; --hook-h: 44px; --bar-top: 7px; --garment-h: 236px; }
  .rail-clip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .topbar__cta { font-size: 12px; padding: 9px 14px; }
  .wordmark span { display: none; }
  .room__rail { width: 40vw; top: 22%; }
  .door__handle { height: 14vh; bottom: 5vh; }
}