/* ============================================================================
   WEAR by ZT Fusion — flagship store
   ----------------------------------------------------------------------------
   Built as a room, not a page. Materials first: plaster, travertine, walnut,
   blackened steel, aged bronze. Light is warm and directional. Nothing is
   sterile, nothing glows blue.
   ========================================================================== */

/* ── MATERIALS ─────────────────────────────────────────────────────────── */
:root {
  /* ground */
  --onyx:        #0A0806;
  --pitch:       #060403;
  --espresso:    #170F0A;
  --charcoal:    #16130F;

  /* wood + stone */
  --walnut:      #2C1D12;
  --walnut-lit:  #4A3220;
  --oak:         #3B2A1B;
  --travertine:  #6B5B47;
  --plaster:     #C9BBA6;
  --clay:        #C4956A;
  --terracotta:  #A8613C;

  /* metal */
  --bronze:      #8C6239;
  --brass:       #D4A843;
  --copper:      #B87333;
  --steel:       #2A2724;

  /* cloth */
  --cream:       #F0E8D8;
  --bone:        #E3D5BE;
  --moss:        #4A5240;
  --sage:        #8A9E7A;
  --ember:       #5C2030;

  /* light */
  --warm:        rgba(212,168,67,.55);
  --warm-soft:   rgba(196,149,106,.28);
  --pool:        rgba(232,196,140,.16);

  /* type */
  --sign:  'Bebas Neue', 'Arial Narrow', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono:  'Space Mono', ui-monospace, monospace;

  /* rhythm */
  --rail-h: 74px;
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  background: var(--pitch);
  color: var(--cream);
  font-family: var(--serif);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.scroll-ok { overflow:auto; }

/* height:auto is load-bearing — the width/height attributes on every product
   image are presentational hints that would otherwise beat aspect-ratio and
   render each plate at its full intrinsic height. */
img { display:block; max-width:100%; height:auto; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
a { color:inherit; text-decoration:none; }
::selection { background: rgba(212,168,67,.3); color: var(--cream); }

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

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link {
  position:fixed; top:-100px; left:16px; z-index:9999;
  background:var(--brass); color:var(--pitch); padding:12px 20px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  transition: top .2s var(--ease);
}
.skip-link:focus { top:16px; }

/* ── SURFACE TREATMENTS ────────────────────────────────────────────────── */
.grain {
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.038'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.vignette {
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 40%, rgba(6,4,3,.72) 100%);
}

/* ══════════════════════════════════════════════════════════════════════════
   1. THE STOREFRONT — arrival
   ══════════════════════════════════════════════════════════════════════════ */
#facade {
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(22px, 4.5vh, 48px);
  perspective: 1600px;
  perspective-origin: 50% 42%;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(44,29,18,.9), transparent 70%),
    linear-gradient(180deg, #050403 0%, #0C0806 55%, #140D08 100%);
}
#facade.gone { display:none; }

/* the street-side surround the doors are set into */
.storefront {
  position:relative; flex:0 0 auto;
  width:min(880px, 92vw);
  height:min(660px, 70vh);
  transform-style: preserve-3d;
  transition: transform 2000ms var(--ease-in-out), opacity 700ms ease;
}
#facade.opening .storefront { transform: translateZ(760px); }
#facade.leaving   { opacity:0; transition:opacity 700ms ease 900ms; }

/* Bronze door frame. It sits ON TOP of the leaves the way a real frame does —
   so it must never carry a fill, or it buries the whole storefront behind it. */
.frame {
  position:absolute; inset:0; z-index:5; pointer-events:none;
  border:14px solid transparent;
  border-image: linear-gradient(160deg, #6A4A28 0%, #C79A54 22%, #4A331C 48%, #B98B45 74%, #5C4023 100%) 1;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    0 40px 120px rgba(0,0,0,.85),
    inset 0 0 70px rgba(0,0,0,.55);
}

/* warm interior light behind the glass */
.interior-glow {
  position:absolute; inset:14px; z-index:1; overflow:hidden;
  background:
    radial-gradient(ellipse 74% 60% at 50% 64%, rgba(240,196,126,.62), transparent 74%),
    radial-gradient(ellipse 42% 34% at 26% 34%, rgba(196,124,56,.34), transparent 72%),
    radial-gradient(ellipse 42% 34% at 76% 30%, rgba(196,124,56,.26), transparent 72%),
    linear-gradient(180deg, #1C130C, #33200D 62%, #150D07);
  opacity:.72;
  transition: opacity 1400ms var(--ease);
}
#facade.warming .interior-glow { opacity:1; }

/* silhouettes of the room, just readable through the glass */
.interior-glow::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 12%, rgba(10,6,4,.55) 13%, rgba(10,6,4,.55) 15%, transparent 16%),
    linear-gradient(90deg, transparent 82%, rgba(10,6,4,.5) 83%, rgba(10,6,4,.5) 85%, transparent 86%),
    radial-gradient(ellipse 22% 40% at 24% 72%, rgba(8,5,3,.6), transparent 70%),
    radial-gradient(ellipse 20% 36% at 76% 74%, rgba(8,5,3,.55), transparent 70%);
}

/* The two glass leaves. Smoked, not opaque — the room has to read through them
   or there is nothing to walk into. */
.door {
  position:absolute; top:14px; bottom:14px; width:calc(50% - 14px); z-index:2;
  background:
    linear-gradient(180deg, rgba(24,17,11,.58), rgba(12,8,5,.74)),
    linear-gradient(115deg, rgba(255,228,186,.16) 0%, transparent 38%);
  border:1px solid rgba(198,150,84,.34);
  backdrop-filter: blur(2px);
  transform-style: preserve-3d;
  transition: transform 1700ms var(--ease-in-out), box-shadow 900ms ease;
  box-shadow: inset 0 0 60px rgba(0,0,0,.6);
  overflow:hidden;
}
/* the meeting stiles — this seam is what makes it read as two doors */
.door.left  { left:14px;  transform-origin: left center;
              border-right:2px solid rgba(214,170,98,.6); }
.door.right { right:14px; transform-origin: right center;
              border-left:2px solid rgba(214,170,98,.6); }

/* kick rail across the foot of each leaf */
.door .rail {
  position:absolute; left:0; right:0; bottom:11%; height:9px;
  background: linear-gradient(180deg, rgba(196,150,84,.5), rgba(90,64,34,.32));
  box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,214,150,.14);
}

#facade.opening .door.left  { transform: rotateY(-104deg); box-shadow: inset 0 0 30px rgba(0,0,0,.4); }
#facade.opening .door.right { transform: rotateY( 104deg); box-shadow: inset 0 0 30px rgba(0,0,0,.4); }

/* brushed vertical pull handles, set just off the meeting stiles */
.door::after {
  content:''; position:absolute; top:46%; height:30%; width:7px; border-radius:4px;
  background: linear-gradient(180deg, #F2D49A, #A87A3E 38%, #7A5528 62%, #F2D49A);
  box-shadow:
    0 0 20px rgba(226,184,110,.5),
    0 3px 10px rgba(0,0,0,.8),
    inset 1px 0 0 rgba(255,242,214,.6);
}
.door.left::after  { right:26px; }
.door.right::after { left:26px;  }

/* reflection travelling across the glass */
.door .sheen {
  position:absolute; top:-30%; left:-70%; width:52%; height:170%;
  background: linear-gradient(105deg, transparent, rgba(255,232,190,.15) 45%, rgba(255,232,190,.28) 52%, transparent);
  transform: rotate(14deg);
  animation: sheen 7s var(--ease) infinite;
}
.door.right .sheen { animation-delay: .5s; }
@keyframes sheen {
  0%, 62% { left:-70%; }
  92%,100% { left:130%; }
}

/* the mark etched into the glass */
.facade-mark {
  position:absolute; left:50%; top:31%; transform:translate(-50%,-50%);
  z-index:4; text-align:center; pointer-events:none;
  transition: opacity 800ms ease, letter-spacing 1600ms var(--ease);
}
#facade.opening .facade-mark { opacity:0; }

.facade-mark .wordmark {
  font-family:var(--sign); font-size:clamp(64px, 13vw, 148px);
  letter-spacing:.3em; margin-left:.3em; line-height:.9;
  color: transparent;
  background: linear-gradient(180deg, #F3E4C4 0%, #D4A843 42%, #8C6239 100%);
  -webkit-background-clip:text; background-clip:text;
  filter: drop-shadow(0 4px 26px rgba(212,168,67,.4));
}
#facade.warming .facade-mark .wordmark { letter-spacing:.36em; }

.facade-mark .phrase {
  margin-top:14px; font-family:var(--mono); font-size:clamp(9px,1.5vw,12px);
  letter-spacing:.34em; text-transform:uppercase; color: rgba(240,232,216,.72);
}
.facade-mark .house {
  margin-bottom:20px; font-family:var(--mono); font-size:10px;
  letter-spacing:.44em; text-transform:uppercase; color: rgba(212,168,67,.6);
}

/* enter controls sit below the storefront, on the pavement */
.facade-cta {
  position:relative; z-index:5; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  transition: opacity 600ms ease;
}
#facade.opening .facade-cta { opacity:0; pointer-events:none; }

.btn-enter {
  font-family:var(--sign); font-size:22px; letter-spacing:.26em;
  padding:16px 46px; color:var(--pitch);
  background: linear-gradient(135deg, #E6C078, #D4A843 40%, #A87A32);
  box-shadow: 0 10px 34px rgba(212,168,67,.28), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s ease;
}
.btn-enter:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(212,168,67,.42); filter:brightness(1.06); }
.btn-enter:active { transform: translateY(-1px); }

.btn-ghost {
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color: rgba(240,232,216,.62); padding:9px 20px;
  border-bottom:1px solid rgba(212,168,67,.3);
  transition: color .3s ease, border-color .3s ease;
}
.btn-ghost:hover { color:var(--brass); border-color:var(--brass); }

/* light spilling out of the opened doorway */
.spill {
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background: radial-gradient(ellipse 46% 62% at 50% 55%, rgba(255,214,150,.92), rgba(232,178,110,.35) 42%, transparent 74%);
  transition: opacity 1100ms var(--ease);
}
#facade.opening .spill { opacity:1; }

/* ── SMOKE ────────────────────────────────────────────────────────────────
   Warm haze. It sits low behind the doors, billows when they open, then
   settles and keeps drifting across the floor for as long as you are in the
   room. Amber-tinted so it reads as light catching air, not fog.            */
.smoke {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.32; transition: opacity 2600ms var(--ease);
  mix-blend-mode: screen;
}
.smoke.lit   { opacity:.9;  }    /* the moment the doors part */
.smoke.linger{ opacity:.46; }    /* what stays with you on the floor */

.puff {
  position:absolute; border-radius:50%;
  filter: blur(46px);
  will-change: transform, opacity;
}
.puff.a {
  width:56vw; height:34vh; left:-14vw; bottom:-6vh;
  background: radial-gradient(ellipse at 50% 50%, rgba(226,178,110,.4), rgba(160,110,58,.14) 46%, transparent 72%);
  animation: drift-a 34s ease-in-out infinite;
}
.puff.b {
  width:48vw; height:30vh; left:32vw; bottom:-10vh;
  background: radial-gradient(ellipse at 50% 50%, rgba(240,206,150,.34), rgba(150,98,52,.12) 48%, transparent 74%);
  animation: drift-b 44s ease-in-out infinite;
}
.puff.c {
  width:62vw; height:38vh; right:-18vw; bottom:-4vh;
  background: radial-gradient(ellipse at 50% 50%, rgba(212,150,86,.3), rgba(120,78,40,.1) 50%, transparent 74%);
  animation: drift-c 52s ease-in-out infinite;
}
.puff.d {
  width:40vw; height:22vh; left:14vw; top:8vh;
  background: radial-gradient(ellipse at 50% 50%, rgba(226,190,140,.2), transparent 68%);
  animation: drift-d 62s ease-in-out infinite;
}

@keyframes drift-a {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(16vw,-5vh,0) scale(1.22); }
}
@keyframes drift-b {
  0%,100% { transform: translate3d(0,0,0) scale(1.1); }
  50%     { transform: translate3d(-13vw,-8vh,0) scale(1); }
}
@keyframes drift-c {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(-18vw,-4vh,0) scale(1.18); }
}
@keyframes drift-d {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.5; }
  50%     { transform: translate3d(10vw,6vh,0) scale(1.3); opacity:.9; }
}

/* the flash as the doors part */
.flash {
  position:fixed; inset:0; z-index:98; pointer-events:none; opacity:0;
  background:
    radial-gradient(ellipse 44% 56% at 50% 48%, rgba(255,238,208,.96), rgba(246,200,132,.5) 40%, transparent 76%);
}
.flash.fire { animation: flare 1500ms var(--ease) forwards; }
@keyframes flare {
  0%   { opacity:0; }
  14%  { opacity:.86; }
  38%  { opacity:.34; }
  100% { opacity:0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. THE STORE — shell, lighting, floor
   ══════════════════════════════════════════════════════════════════════════ */
#store {
  position:fixed; inset:0; z-index:10;
  opacity:0; visibility:hidden;
  transition: opacity 900ms ease 200ms, visibility 0s linear 1100ms;
  background: linear-gradient(180deg, #0B0806 0%, #150E09 46%, #0A0705 100%);
}
#store.open { opacity:1; visibility:visible; transition: opacity 1000ms ease 500ms, visibility 0s; }

/* plaster back wall with a wash of warm light */
.wall-wash {
  position:absolute; inset:0 0 34% 0; pointer-events:none;
  background:
    radial-gradient(ellipse 34% 90% at 16% 8%, rgba(226,178,110,.16), transparent 66%),
    radial-gradient(ellipse 34% 90% at 50% 4%, rgba(226,178,110,.19), transparent 66%),
    radial-gradient(ellipse 34% 90% at 84% 8%, rgba(226,178,110,.15), transparent 66%),
    linear-gradient(180deg, #241811 0%, #1A120C 60%, #120C08 100%);
}
.wall-wash::after {   /* plaster tooth */
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .04' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .05 0 0 0 0 .03 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* travertine floor, laid back in perspective */
.floor-plane {
  position:absolute; left:0; right:0; bottom:0; height:36%;
  transform-origin: 50% 100%;
  background:
    linear-gradient(180deg, rgba(20,13,9,.96) 0%, rgba(46,33,22,.86) 30%, rgba(64,47,32,.72) 100%);
  pointer-events:none;
}
.floor-plane::before {   /* light pools thrown by the pendants */
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 20% 58% at 16% 34%, var(--pool), transparent 70%),
    radial-gradient(ellipse 22% 62% at 50% 30%, rgba(232,196,140,.2), transparent 70%),
    radial-gradient(ellipse 20% 58% at 84% 34%, var(--pool), transparent 70%);
}
.floor-plane::after {    /* wet-stone reflection band under the fixtures */
  content:''; position:absolute; left:0; right:0; top:0; height:44%;
  background: linear-gradient(180deg, rgba(255,214,150,.09), transparent);
  filter: blur(10px);
}

/* sculptural pendants */
.pendant {
  position:absolute; top:0; width:2px; height:16vh; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, rgba(140,98,57,.7), rgba(140,98,57,.25));
}
.pendant::after {
  content:''; position:absolute; left:50%; bottom:-11px; transform:translateX(-50%);
  width:66px; height:22px; border-radius:50% 50% 46% 46%;
  background: linear-gradient(180deg, #4A331C, #1A1109);
  box-shadow: 0 22px 90px 24px rgba(232,178,110,.2), inset 0 -3px 8px rgba(255,206,140,.5);
}
.pendant.p1 { left:16%; } .pendant.p2 { left:50%; height:20vh; } .pendant.p3 { left:84%; }

/* ── the track the customer walks along ── */
#track {
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:stretch;
  will-change: transform;
  transition: transform 1100ms var(--ease-in-out);
}
#track.dragging { transition:none; cursor:grabbing; }

.zone {
  position:relative; flex:0 0 auto;
  width: 100vw; min-width:100vw;
  display:flex; flex-direction:column;
  padding: clamp(66px, 10vh, 108px) clamp(24px, 5vw, 80px) 0;
}
.zone.wide { width:150vw; min-width:150vw; }

/* department signage on the back wall */
/* in flow at the top of the room, so nothing can ever sit on top of it */
.zone-sign { position:relative; flex:0 0 auto; z-index:1; pointer-events:none; }
.zone-no {
  font-family:var(--mono); font-size:10px; letter-spacing:.4em;
  color: rgba(212,168,67,.55); text-transform:uppercase; margin-bottom:8px;
}
.zone-title {
  font-family:var(--sign); font-size:clamp(38px, 6.4vw, 88px);
  letter-spacing:.16em; line-height:.92;
  color: transparent;
  background: linear-gradient(180deg, rgba(240,232,216,.94), rgba(196,149,106,.5));
  -webkit-background-clip:text; background-clip:text;
}
.zone-note {
  margin-top:10px; max-width:34ch;
  font-family:var(--serif); font-size:clamp(14px,1.7vw,17px);
  font-style:italic; color: rgba(240,232,216,.5); line-height:1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. FIXTURES — racks, shelves, walls, cases
   ══════════════════════════════════════════════════════════════════════════ */
.fixture {
  position:relative; z-index:2;
  margin-top:auto;
  margin-bottom: clamp(44px, 10vh, 108px);
  transition: filter 500ms var(--ease);
}
/* everything dims a little when another fixture has focus */
#track.focused .fixture:not(.lit) { filter: brightness(.42) saturate(.7); }

/* ── RACK ──────────────────────────────────────────────────────────────── */
.rack { position:relative; }

.rack-rail {
  position:absolute; left:0; right:0; top:24px; height:7px; border-radius:4px; z-index:1;
  background: linear-gradient(180deg, #6A5A4C 0%, #2A2724 45%, #14110E 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,224,180,.22);
}
.rack-rail::before, .rack-rail::after {   /* uprights into the ceiling */
  content:''; position:absolute; top:-40vh; width:3px; height:40vh;
  background: linear-gradient(180deg, transparent, rgba(58,52,46,.9));
}
.rack-rail::before { left:6%; } .rack-rail::after { right:6%; }

/* a light bar that wakes when the rack is approached */
.rack-light {
  position:absolute; left:0; right:0; top:-6px; height:200px; pointer-events:none;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,214,150,.2), transparent 70%);
  opacity:0; transition: opacity 500ms var(--ease);
}
.rack:hover .rack-light, .rack.lit .rack-light { opacity:1; }

/* The rail slides. Padding leaves room for the hooks above and the tags below
   so nothing gets clipped by the scroll container. */
.rack-items {
  display:flex; align-items:flex-start;
  padding: 44px 3% 48px;
  gap: 0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type: x proximity;
  transition: gap 550ms var(--ease);
}
.rack-items::-webkit-scrollbar { display:none; }
.rack:hover .rack-items, .rack.lit .rack-items { gap: 10px; }

/* a garment hanging on the rail */
.garment {
  display:block; position:relative; flex:0 0 auto;
  scroll-snap-align: center;
  width: clamp(132px, 21vh, 220px);
  margin-left: -34px;
  transform-origin: 50% 0%;
  transform: rotate(var(--tilt, 0deg)) translateY(0);
  transition: transform 480ms var(--ease), margin 480ms var(--ease),
              filter 380ms ease, z-index 0s;
  filter: brightness(.86) saturate(.94);
}
.garment:first-child { margin-left:0; }
.rack:hover .garment, .rack.lit .garment { margin-left:-14px; }
.rack:hover .garment:first-child, .rack.lit .garment:first-child { margin-left:0; }

.garment:hover, .garment:focus-visible {
  transform: rotate(0deg) translateY(-16px) scale(1.06);
  filter: brightness(1.1) saturate(1.04);
  z-index: 8;
}

/* the hook over the rail */
.garment::before {
  content:''; position:absolute; left:50%; top:-26px; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%;
  border:2.5px solid rgba(190,150,96,.85); border-bottom-color:transparent; border-left-color:transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.garment-plate {
  width:100%; aspect-ratio: 4/5; object-fit:cover;
  background: var(--charcoal);
  border:1px solid rgba(140,98,57,.28);
  box-shadow: 0 26px 50px rgba(0,0,0,.62), inset 0 0 40px rgba(0,0,0,.4);
}

/* the hang tag */
.garment-tag {
  position:absolute; left:50%; bottom:-30px; transform:translateX(-50%) translateY(6px);
  white-space:nowrap; opacity:0; pointer-events:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--bone); background: rgba(10,7,5,.92);
  border:1px solid rgba(140,98,57,.4); padding:6px 12px;
  transition: opacity 320ms ease, transform 320ms var(--ease);
}
.garment:hover .garment-tag, .garment:focus-visible .garment-tag {
  opacity:1; transform: translateX(-50%) translateY(0);
}
.garment-tag b { color:var(--brass); font-weight:400; margin-left:8px; }

/* state pips on a garment */
.pip {
  position:absolute; top:8px; left:8px; z-index:3;
  font-family:var(--mono); font-size:8px; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 8px; border:1px solid;
}
.pip.live    { color:#0A0806; background:var(--brass); border-color:var(--brass); }
.pip.preview { color:var(--brass); background:rgba(10,7,5,.86); border-color:rgba(212,168,67,.5); }
.pip.soon    { color:rgba(240,232,216,.7); background:rgba(10,7,5,.86); border-color:rgba(240,232,216,.24); }
.pip.out     { color:rgba(240,232,216,.55); background:rgba(10,7,5,.9); border-color:rgba(240,232,216,.2); }

/* ── SHELVING (objects) ────────────────────────────────────────────────── */
.shelving { display:flex; flex-direction:column; gap:clamp(18px,3vh,34px); }

.shelf { position:relative; padding-bottom:16px; }
.shelf-board {
  position:absolute; left:0; right:0; bottom:0; height:11px;
  background: linear-gradient(180deg, #5A4029 0%, #33220F 42%, #170E06 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,214,150,.24);
}
.shelf-board::after {   /* under-shelf strip light */
  content:''; position:absolute; left:6%; right:6%; top:100%; height:60px;
  background: linear-gradient(180deg, rgba(255,206,140,.16), transparent);
  filter: blur(6px);
}
.shelf-items {
  display:flex; align-items:flex-end; gap:clamp(12px,2vw,26px);
  padding:20px 3% 0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.shelf-items::-webkit-scrollbar { display:none; }

/* a folded stack sitting in a lit niche — the label sits below the implied
   layers, so the stack reads as folded goods rather than a floating card */
.stack {
  display:block; position:relative; flex:0 0 auto;
  width:clamp(118px, 19vh, 196px); padding-bottom:66px;
  transition: transform 460ms var(--ease), filter 380ms ease;
}
.stack:hover, .stack:focus-visible { transform: translateY(-10px); filter:brightness(1.1); z-index:6; }

.stack-plate {
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid rgba(140,98,57,.26);
  box-shadow: 0 20px 40px rgba(0,0,0,.6);
  transition: transform 460ms var(--ease), box-shadow 460ms var(--ease);
}
/* the top item slides out of the stack on approach */
.stack:hover .stack-plate, .stack:focus-visible .stack-plate {
  transform: translateY(-8px) translateX(6px);
  box-shadow: 0 30px 56px rgba(0,0,0,.7);
}
/* the rest of the stack, implied underneath */
.stack::before, .stack::after {
  content:''; position:absolute; left:3%; right:3%; height:7px;
  background: linear-gradient(180deg, rgba(58,42,27,.95), rgba(24,16,10,.95));
  border:1px solid rgba(140,98,57,.2);
}
.stack::before { bottom:58px; }
.stack::after  { bottom:50px; left:5%; right:5%; opacity:.7; }

.stack-label {
  display:block; position:absolute; left:0; right:0; bottom:0;
  text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color: rgba(240,232,216,.62);
}
.stack-label b { display:block; color:var(--brass); font-weight:400; margin-top:4px; }

/* ── BAG WALL ──────────────────────────────────────────────────────────── */
.bagwall {
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(2, auto);
  grid-auto-columns:clamp(108px,15vh,164px);
  gap:clamp(14px,2vh,26px) clamp(14px,1.8vw,26px); padding:0 3%;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
.hook {
  position:relative; padding-top:30px;
  transition: transform 460ms var(--ease), filter 380ms ease;
}
.hook::before {   /* brass peg */
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #E8C88A, #8C6239);
  box-shadow: 0 0 12px rgba(212,168,67,.4), 0 2px 5px rgba(0,0,0,.7);
}
.hook::after {    /* strap over the peg */
  content:''; position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:2px; height:24px; background: linear-gradient(180deg, rgba(140,98,57,.8), rgba(140,98,57,.25));
}
.hook:hover, .hook:focus-visible { transform: translateY(-10px) rotate(-1.2deg); filter:brightness(1.1); }
.hook img {
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid rgba(140,98,57,.26);
  box-shadow: 0 24px 44px rgba(0,0,0,.6);
}

/* ── DISPLAY CASE (accessories) ────────────────────────────────────────── */
.case {
  position:relative; padding:clamp(20px,3vh,34px);
  background: linear-gradient(180deg, rgba(36,24,16,.72), rgba(14,10,7,.86));
  border:1px solid rgba(140,98,57,.34);
  box-shadow: 0 30px 70px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,214,150,.16);
}
.case::before {   /* glass */
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(118deg, rgba(255,236,200,.09) 0%, transparent 30%, transparent 68%, rgba(255,236,200,.05) 100%);
}
.case-items {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(clamp(100px,14vh,160px),1fr));
  gap:clamp(12px,1.8vw,26px);
}
.case-item { transition: transform 420ms var(--ease), filter 340ms ease; }
.case-item:hover, .case-item:focus-visible { transform: translateY(-8px) scale(1.04); filter:brightness(1.12); }
.case-item img {
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid rgba(140,98,57,.24);
  box-shadow: 0 16px 32px rgba(0,0,0,.6);
}

/* ── PLINTH (styled looks / mannequin stand-ins) ───────────────────────── */
.looks { display:flex; gap:clamp(18px,2.6vw,42px); padding:0 3%; align-items:flex-end; }

.look {
  position:relative; flex:0 0 auto; width:clamp(168px, 26vh, 268px);
  transition: transform 500ms var(--ease), filter 400ms ease;
}
.look:hover, .look:focus-within { transform: translateY(-12px); filter:brightness(1.08); }

.look-plate {
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid rgba(140,98,57,.3);
  box-shadow: 0 30px 60px rgba(0,0,0,.66);
}
.look-plinth {
  height:16px; margin-top:-2px;
  background: linear-gradient(180deg, #4A3220, #1A1109);
  box-shadow: 0 16px 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,214,150,.2);
}
.look-meta { margin-top:16px; }
.look-name { font-family:var(--sign); font-size:20px; letter-spacing:.14em; color:var(--cream); }
.look-note { margin-top:6px; font-style:italic; font-size:14px; color:rgba(240,232,216,.5); line-height:1.5; }
.look-shop {
  margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass);
  border-bottom:1px solid rgba(212,168,67,.4); padding-bottom:3px;
  transition: color .3s, border-color .3s;
}
.look:hover .look-shop { color:#F0D9A0; border-color:#F0D9A0; }

/* ══════════════════════════════════════════════════════════════════════════
   3b. THE LOBBY — where you land, before anything is for sale
   ══════════════════════════════════════════════════════════════════════════ */
.lobby {
  display:grid; grid-template-columns: auto 1fr;
  gap: clamp(24px,4vw,64px); align-items:center; padding:0 3%;
}

/* ── THE TELEVISION ───────────────────────────────────────────────────────
   A real set in the room: walnut cabinet, brass trim, speaker grille, dials,
   a standby lamp, and curved glass catching the ceiling light. It throws its
   own glow onto the wall behind it.                                        */
.screen-unit { position:relative; flex:0 0 auto; }

.tv {
  position:relative;
  width:clamp(248px, 48vh, 440px);   /* it is the centrepiece of the room */
}

.tv-body {
  position:relative; padding:clamp(9px,1.5vh,15px);
  border-radius:14px;
  background:
    linear-gradient(180deg, #4A3220 0%, #2C1D12 18%, #1E140C 62%, #120C08 100%);
  box-shadow:
    0 30px 70px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,214,150,.28),
    inset 0 -2px 6px rgba(0,0,0,.7);
}
.tv-body::before {           /* brass edge round the cabinet */
  content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  border:1px solid rgba(198,150,84,.5);
}

/* the picture tube */
.screen {
  position:relative; width:100%; aspect-ratio:16/9;
  background:#050403; overflow:hidden; border-radius:7px;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.9),
    inset 0 0 34px rgba(0,0,0,.85);
}
.screen video, .screen img {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition: opacity 900ms var(--ease);
}
.screen video.on { opacity:1; }

/* The picture. A clip that matches the tube fills it edge to edge; a narrow
   one is shown whole, with the bleed layer behind it. */
.tv-pic  { object-fit:contain; z-index:2; }
.screen.wide .tv-pic { object-fit:cover; }
.screen.wide .tv-fill { display:none; }

/* its own colour, blurred out to fill the tube instead of black bars */
.tv-fill {
  object-fit:cover; z-index:1;
  filter: blur(26px) saturate(1.5) brightness(.62);
  transform: scale(1.16);
}
.tv-pic.on  { opacity:1; }
.tv-fill.on { opacity:.9; }

/* curved glass */
.screen::after {
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:7px;
  background:
    linear-gradient(128deg, rgba(255,240,214,.14) 0%, transparent 26%, transparent 76%, rgba(255,240,214,.06) 100%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 62%, rgba(0,0,0,.6) 100%);
}

/* the chin: grille, dials, standby lamp */
.tv-chin {
  display:flex; align-items:center; gap:10px;
  margin-top:clamp(7px,1.2vh,12px); padding:0 4px;
}
.tv-grille {
  flex:1; height:clamp(9px,1.5vh,14px); border-radius:2px;
  background: repeating-linear-gradient(180deg,
    rgba(0,0,0,.55) 0 2px, rgba(196,150,84,.16) 2px 4px);
  box-shadow: inset 0 1px 0 rgba(255,214,150,.14);
}
/* the screen's own sound switch — the television asks, not the top bar */
.tv-speaker {
  flex:0 0 auto; width:clamp(20px,3vh,26px); height:clamp(20px,3vh,26px);
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(198,150,84,.4); background:rgba(10,7,5,.6);
  transition: border-color .25s, background .25s;
}
.tv-speaker:hover { border-color:var(--brass); background:rgba(212,168,67,.12); }
.tv-speaker .spk {
  width:0; height:0; border-style:solid;
  border-width:5px 8px 5px 0; border-color:transparent rgba(240,232,216,.6) transparent transparent;
  transition: border-right-color .25s;
  position:relative;
}
.tv-speaker[aria-pressed="true"] { border-color:var(--brass); background:rgba(212,168,67,.16); }
.tv-speaker[aria-pressed="true"] .spk { border-right-color:var(--brass); }
/* the little arcs, only when it is actually sounding */
.tv-speaker[aria-pressed="true"] .spk::after {
  content:''; position:absolute; left:10px; top:-3px;
  width:7px; height:12px; border-radius:50%;
  border:1.5px solid var(--brass); border-left-color:transparent; border-bottom-color:transparent;
}
/* a slash when muted */
.tv-speaker[aria-pressed="false"] .spk::after {
  content:''; position:absolute; left:8px; top:-4px;
  width:1.5px; height:14px; background:rgba(240,232,216,.45); transform:rotate(28deg);
}

.tv-dial {
  width:clamp(9px,1.4vh,13px); height:clamp(9px,1.4vh,13px); border-radius:50%;
  background: radial-gradient(circle at 34% 30%, #E8C88A, #7A5528 62%, #3A2814);
  box-shadow: 0 1px 3px rgba(0,0,0,.8), inset 0 -1px 2px rgba(0,0,0,.5);
}
.tv-led {
  width:5px; height:5px; border-radius:50%;
  background:#8A2B2B; box-shadow:0 0 5px rgba(180,60,60,.5);
  transition: background .6s ease, box-shadow .6s ease;
}
.tv.live .tv-led {
  background:#C8E39A; box-shadow:0 0 9px rgba(160,220,120,.9);
}

/* legs */
.tv-stand { display:flex; justify-content:space-between; padding:0 14%; }
.tv-stand span {
  width:clamp(8px,1.2vh,12px); height:clamp(12px,2vh,20px);
  background: linear-gradient(180deg, #3A2814, #14100A);
  border-radius:0 0 4px 4px;
  box-shadow:0 8px 16px rgba(0,0,0,.65);
}

/* what it throws on the wall */
.screen-glow {
  position:absolute; inset:-30% -40%; z-index:-1; pointer-events:none;
  background: radial-gradient(ellipse 50% 50% at 50% 44%, rgba(150,110,190,.32), rgba(226,178,110,.13) 46%, transparent 72%);
  filter: blur(34px);
  opacity:.45; transition: opacity 1.4s var(--ease);
}
.tv.live ~ .screen-glow, .screen-unit:has(.tv.live) .screen-glow { opacity:1; }

/* What the screen shows before the reel arrives. Costs nothing, and reads as a
   brand ident rather than a broken player. */
.screen-standby {
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center; gap:14px; align-content:center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(226,178,110,.2), transparent 72%),
    linear-gradient(180deg, #1A1109, #0B0705);
}
.screen-standby span {
  font-family:var(--sign); font-size:clamp(18px,2.6vh,26px); letter-spacing:.34em;
  margin-left:.34em; color:transparent;
  background:linear-gradient(180deg,#F3E4C4,#D4A843);
  -webkit-background-clip:text; background-clip:text;
  animation: standby 4.5s ease-in-out infinite;
}
@keyframes standby { 0%,100% { opacity:.5 } 50% { opacity:1 } }

.screen-standby button {
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); border:1px solid rgba(212,168,67,.5); padding:8px 12px;
  transition: background .25s;
}
.screen-standby button:hover { background:rgba(212,168,67,.12); }
.screen::after {              /* glass, and a little scan of light */
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(122deg, rgba(255,240,214,.12) 0%, transparent 34%, transparent 74%, rgba(255,240,214,.05) 100%);
}
.screen-glow {                /* the light the screen throws on the wall */
  position:absolute; inset:-24% -34%; z-index:-1; pointer-events:none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(150,110,190,.3), rgba(226,178,110,.12) 46%, transparent 72%);
  filter: blur(30px);
}

.screen-cap {
  margin-top:14px; max-width:clamp(150px, 26vh, 250px);
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(240,232,216,.5); line-height:1.8;
}
.screen-cap b { display:block; color:var(--brass); font-weight:400; margin-bottom:4px; }

.screen-controls { display:flex; gap:8px; margin-top:12px; }
.screen-controls button {
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(240,232,216,.55); border:1px solid rgba(140,98,57,.34); padding:7px 10px;
  transition: color .25s, border-color .25s;
}
.screen-controls button:hover { color:var(--brass); border-color:var(--brass); }
.screen-controls button[aria-pressed="true"] { color:var(--brass); border-color:var(--brass); }

/* the channel stepper, for when the reel outgrows named buttons */
.screen-controls.channels { align-items:center; }
.screen-controls.channels button { padding:5px 11px; font-size:14px; line-height:1; }
.reel-count {
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  color:rgba(240,232,216,.5); min-width:44px; text-align:center;
  font-variant-numeric: tabular-nums;
}

/* ── the doorways off the lobby ── */
.doorways {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(clamp(96px,13vh,132px),1fr));
  gap:clamp(10px,1.6vw,20px);
}

.doorway {
  position:relative; display:block; text-align:center;
  padding:clamp(14px,2.4vh,24px) 10px clamp(12px,2vh,20px);
  border-radius: 120px 120px 6px 6px;          /* an arched opening */
  background:
    radial-gradient(ellipse 90% 60% at 50% 96%, rgba(240,196,126,.26), transparent 72%),
    linear-gradient(180deg, rgba(30,20,13,.9), rgba(12,8,5,.95));
  border:1px solid rgba(140,98,57,.4);
  box-shadow: inset 0 -22px 40px rgba(226,178,110,.09), 0 16px 34px rgba(0,0,0,.5);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
  overflow:hidden;
}
.doorway::before {           /* light spilling out of the room beyond */
  content:''; position:absolute; left:12%; right:12%; bottom:0; height:52%;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255,214,150,.34), transparent 72%);
  opacity:.5; transition: opacity .45s var(--ease);
}
.doorway:hover, .doorway:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(212,168,67,.75);
  box-shadow: inset 0 -26px 46px rgba(226,178,110,.18), 0 24px 46px rgba(0,0,0,.6);
}
.doorway:hover::before, .doorway:focus-visible::before { opacity:1; }

.doorway .dw-no {
  font-family:var(--mono); font-size:8px; letter-spacing:.24em;
  color:rgba(212,168,67,.5); margin-bottom:6px;
}
.doorway .dw-name {
  position:relative; font-family:var(--sign); font-size:clamp(13px,1.7vh,17px);
  letter-spacing:.15em; color:var(--cream); line-height:1.1;
}
.doorway .dw-count {
  position:relative; margin-top:5px; display:block;
  font-family:var(--mono); font-size:8px; letter-spacing:.14em;
  color:rgba(240,232,216,.38);
}

.lobby-welcome { margin-bottom:clamp(14px,2.4vh,24px); max-width:44ch; }
.lobby-welcome p {
  font-size:clamp(14px,1.8vh,17px); font-style:italic; line-height:1.6;
  color:rgba(240,232,216,.58);
}

@media (max-width: 860px) {
  .lobby { grid-template-columns:1fr; }
  .screen { width:min(230px, 58vw); }
  .screen-cap { max-width:min(230px, 58vw); }
  .doorways { grid-template-columns:repeat(auto-fit, minmax(104px,1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. THE DROP ROOM
   ══════════════════════════════════════════════════════════════════════════ */
.droproom {
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap:clamp(24px,4vw,64px); align-items:center;
  padding:0 3%;
}
.drop-visual { position:relative; }
.drop-visual img {
  width:100%; aspect-ratio:1/1; max-height:40vh; object-fit:cover;
  border:1px solid rgba(140,98,57,.36);
  box-shadow: 0 40px 90px rgba(0,0,0,.72);
}
.drop-visual::after {   /* installation light from above */
  content:''; position:absolute; left:-6%; right:-6%; top:-8%; height:40%;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,214,150,.22), transparent 70%);
  pointer-events:none;
}
.drop-badge {
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  padding:8px 14px; background:var(--brass); color:var(--pitch);
}
.drop-badge.preview { background:rgba(10,7,5,.9); color:var(--brass); border:1px solid var(--brass); }

.drop-copy .cap-no {
  font-family:var(--mono); font-size:10px; letter-spacing:.4em;
  text-transform:uppercase; color:rgba(212,168,67,.62);
}
.drop-copy h2 {
  font-family:var(--sign); font-size:clamp(34px,4.6vw,62px);
  letter-spacing:.1em; line-height:1; margin:12px 0 6px;
  color:var(--cream); font-weight:400;
}
.drop-copy .energy {
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--clay);
}
.drop-copy .story {
  margin-top:16px; font-size:clamp(14px,1.6vw,17px); line-height:1.6;
  color:rgba(240,232,216,.72); max-width:46ch;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
.drop-notes {
  margin-top:20px; display:flex; flex-wrap:wrap; gap:10px 22px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(240,232,216,.46);
}
.drop-notes span b { color:var(--clay); font-weight:400; }

/* countdown */
.countdown { margin-top:24px; }
.countdown-label {
  font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--brass); margin-bottom:10px;
}
.countdown-clock { display:flex; gap:clamp(12px,2vw,28px); }
.cd-unit { text-align:left; }
.cd-num {
  font-family:var(--sign); font-size:clamp(30px,4vw,50px);
  letter-spacing:.06em; line-height:1; color:var(--cream);
  font-variant-numeric: tabular-nums;
}
.cd-word {
  margin-top:5px; font-family:var(--mono); font-size:9px;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(240,232,216,.42);
}
.cd-sep { font-family:var(--sign); font-size:clamp(24px,3vw,38px); color:rgba(212,168,67,.4); align-self:flex-start; }

.drop-actions { margin-top:26px; display:flex; flex-wrap:wrap; gap:14px; }

/* ══════════════════════════════════════════════════════════════════════════
   5. THE VAULT
   ══════════════════════════════════════════════════════════════════════════ */
.zone[data-zone="vault"] { background: linear-gradient(180deg, rgba(4,3,2,.62), transparent 60%); }

.vault-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(clamp(160px,24vh,250px),1fr));
  gap:clamp(16px,2.4vw,32px); padding:0 3%;
}
.vault-card {
  position:relative; text-align:left;
  transition: transform 460ms var(--ease), filter 400ms ease;
}
.vault-card:hover, .vault-card:focus-visible { transform:translateY(-8px); filter:brightness(1.14); }
.vault-card img {
  width:100%; aspect-ratio:1/1; object-fit:cover;
  filter: grayscale(.34) brightness(.62) sepia(.16);
  border:1px solid rgba(140,98,57,.24);
  transition: filter 500ms ease;
}
.vault-card:hover img { filter: grayscale(0) brightness(.92) sepia(0); }
.vault-card::after {   /* bronze grille over the archive */
  content:''; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(140,98,57,.15) 15px 16px);
  transition: opacity 500ms ease;
}
.vault-card:hover::after { opacity:0; }
.vault-meta { margin-top:12px; }
.vault-name { font-family:var(--sign); font-size:17px; letter-spacing:.13em; color:rgba(240,232,216,.86); }
.vault-when {
  margin-top:5px; font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(240,232,216,.4);
}
.vault-empty {
  padding:clamp(30px,6vh,60px) 3%; max-width:52ch;
  font-style:italic; font-size:17px; line-height:1.7; color:rgba(240,232,216,.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   6. STORE CHROME — top bar, nav, bag
   ══════════════════════════════════════════════════════════════════════════ */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px clamp(16px,3vw,34px);
  background: linear-gradient(180deg, rgba(6,4,3,.9), rgba(6,4,3,0));
  opacity:0; transform:translateY(-12px); pointer-events:none;
  transition: opacity 700ms ease 900ms, transform 700ms var(--ease) 900ms;
}
#store.open ~ .topbar, .topbar.on { opacity:1; transform:none; pointer-events:auto; }

.brandmark { display:flex; align-items:baseline; gap:10px; }
.brandmark .w {
  font-family:var(--sign); font-size:26px; letter-spacing:.28em; margin-left:.28em;
  color:transparent; background:linear-gradient(180deg,#F3E4C4,#D4A843);
  -webkit-background-clip:text; background-clip:text;
}
.brandmark .by {
  font-family:var(--mono); font-size:8px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(240,232,216,.4);
}

.topbar-tools { display:flex; align-items:center; gap:clamp(8px,1.4vw,20px); }

.tool {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(240,232,216,.66);
  padding:9px 12px; border:1px solid transparent;
  transition: color .3s, border-color .3s, background .3s;
}
.tool:hover { color:var(--brass); border-color:rgba(212,168,67,.32); }

.bag-btn { position:relative; }
.bag-count {
  position:absolute; top:1px; right:1px;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; color:var(--pitch); background:var(--brass);
  transform:scale(0); transition: transform .34s var(--ease);
}
.bag-count.on { transform:scale(1); }
.bag-btn.bump { animation: bagbump .5s var(--ease); }
@keyframes bagbump { 40% { transform: scale(1.16) rotate(-4deg); } }

/* department nav along the bottom */
.deptnav {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:2px;
  padding:12px clamp(16px,3vw,34px) 16px;
  background: linear-gradient(0deg, rgba(6,4,3,.94), rgba(6,4,3,.5) 60%, transparent);
  overflow-x:auto; scrollbar-width:none;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition: opacity 700ms ease 1000ms, transform 700ms var(--ease) 1000ms;
}
.deptnav::-webkit-scrollbar { display:none; }
.deptnav.on { opacity:1; transform:none; pointer-events:auto; }

.dept-link {
  flex:0 0 auto; position:relative;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(240,232,216,.46);
  padding:10px 14px; white-space:nowrap;
  transition: color .3s;
}
.dept-link:hover { color:var(--cream); }
.dept-link[aria-current="true"] { color:var(--brass); }
.dept-link[aria-current="true"]::after {
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:var(--brass);
}

/* walk arrows */
.walk {
  position:fixed; top:50%; z-index:39; transform:translateY(-50%);
  width:46px; height:74px; display:grid; place-items:center;
  background: rgba(10,7,5,.5); border:1px solid rgba(140,98,57,.28);
  color:rgba(240,232,216,.7); backdrop-filter: blur(3px);
  opacity:0; transition: opacity .5s ease 1.1s, background .3s, color .3s;
}
.walk.on { opacity:1; }
.walk:hover { background:rgba(20,13,9,.85); color:var(--brass); }
.walk.prev { left:0; } .walk.next { right:0; }
.walk svg { width:16px; height:16px; }

/* ══════════════════════════════════════════════════════════════════════════
   7. PRODUCT SPOTLIGHT
   ══════════════════════════════════════════════════════════════════════════ */
.overlay {
  position:fixed; inset:0; z-index:70;
  display:none; overflow-y:auto; overscroll-behavior:contain;
  background: rgba(4,3,2,.82); backdrop-filter: blur(14px);
}
.overlay.open { display:block; animation: fadein .34s ease; }
@keyframes fadein { from { opacity:0 } }

.sheet {
  position:relative; margin:0 auto; max-width:1180px;
  padding: clamp(56px,8vh,90px) clamp(20px,4vw,52px) clamp(40px,8vh,90px);
  animation: rise .5s var(--ease);
}
@keyframes rise { from { opacity:0; transform:translateY(26px) } }

.sheet-close {
  position:fixed; top:18px; right:18px; z-index:6;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid rgba(140,98,57,.4); background:rgba(10,7,5,.8);
  color:rgba(240,232,216,.8); transition: color .3s, border-color .3s, transform .3s;
}
.sheet-close:hover { color:var(--brass); border-color:var(--brass); transform:rotate(90deg); }

.spot { display:grid; grid-template-columns: 1.06fr .94fr; gap:clamp(26px,4vw,64px); }

.spot-gallery { position:relative; }
.spot-hero {
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid rgba(140,98,57,.3);
  box-shadow: 0 40px 90px rgba(0,0,0,.7);
  background:var(--charcoal);
}
.spot-thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.spot-thumb {
  width:66px; height:66px; flex:0 0 auto; overflow:hidden;
  border:1px solid rgba(140,98,57,.24); opacity:.55;
  transition: opacity .3s, border-color .3s, transform .3s;
}
.spot-thumb img, .spot-thumb video { width:100%; height:100%; object-fit:cover; }

/* a scene thumb wears a play mark so it is not mistaken for a still */
.spot-thumb.is-video { position:relative; }
.thumb-play {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent rgba(255,255,255,.92);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
/* the on-screen view is the only one with a person in it — give it the room */
video.spot-hero { background:#000; object-fit:cover; }
.spot-thumb:hover { opacity:.85; transform:translateY(-2px); }
.spot-thumb[aria-current="true"] { opacity:1; border-color:var(--brass); }

.spot-info { padding-top:6px; }
.spot-eyebrow {
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(212,168,67,.66);
}
.spot-name {
  font-family:var(--sign); font-size:clamp(32px,4.4vw,56px);
  letter-spacing:.09em; line-height:1.02; margin:10px 0 8px;
  color:var(--cream); font-weight:400;
}
.spot-price {
  font-family:var(--mono); font-size:17px; letter-spacing:.08em; color:var(--brass);
}
.spot-blurb {
  margin-top:16px; font-size:16px; line-height:1.66; color:rgba(240,232,216,.7); max-width:44ch;
}

.spot-state {
  margin-top:18px; padding:14px 16px;
  border:1px solid rgba(212,168,67,.3); background:rgba(212,168,67,.06);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass);
}
.spot-state.muted { border-color:rgba(240,232,216,.16); background:rgba(240,232,216,.03); color:rgba(240,232,216,.6); }
.spot-state .cd { margin-top:10px; display:flex; gap:16px; }

.field { margin-top:26px; }
.field-label {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(240,232,216,.5); margin-bottom:12px;
}
.field-label .chosen { color:var(--cream); }
.field-label button {
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--clay);
  border-bottom:1px solid rgba(196,149,106,.4); padding-bottom:2px;
}
.field-label button:hover { color:var(--brass); border-color:var(--brass); }

/* tactile swatches */
.swatches { display:flex; flex-wrap:wrap; gap:12px; }
.swatch {
  position:relative; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(240,232,216,.2);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.14), inset 0 -3px 8px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.5);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.swatch:hover { transform:scale(1.1); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--pitch), 0 0 0 3px var(--brass), inset 0 -3px 8px rgba(0,0,0,.5); }
.swatch .sw-name {
  position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--mono); font-size:8px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(240,232,216,.45);
}
.swatches { padding-bottom:22px; }

/* sizes */
.sizes { display:flex; flex-wrap:wrap; gap:8px; }
.size {
  min-width:52px; padding:12px 10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  border:1px solid rgba(240,232,216,.2); color:rgba(240,232,216,.78);
  transition: border-color .25s, color .25s, background .25s;
}
.size:hover:not(:disabled) { border-color:var(--clay); color:var(--cream); }
.size[aria-checked="true"] { background:var(--cream); border-color:var(--cream); color:var(--pitch); }
.size:disabled {
  opacity:.34; cursor:not-allowed; text-decoration:line-through;
}

.spot-buy { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.btn-primary {
  flex:1 1 220px;
  font-family:var(--sign); font-size:19px; letter-spacing:.2em;
  padding:17px 34px; color:var(--pitch);
  background: linear-gradient(135deg, #E6C078, #D4A843 42%, #A87A32);
  box-shadow: 0 10px 30px rgba(212,168,67,.24), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .28s var(--ease), box-shadow .28s, filter .28s;
}
.btn-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 16px 40px rgba(212,168,67,.36); filter:brightness(1.05); }
.btn-primary:disabled { background:rgba(240,232,216,.1); color:rgba(240,232,216,.4); box-shadow:none; cursor:not-allowed; }

.btn-outline {
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  padding:16px 22px; border:1px solid rgba(240,232,216,.24); color:rgba(240,232,216,.78);
  transition: border-color .28s, color .28s, background .28s;
}
.btn-outline:hover { border-color:var(--brass); color:var(--brass); }
.btn-outline.saved { border-color:var(--brass); color:var(--brass); background:rgba(212,168,67,.08); }

/* spec tables */
.spot-details { margin-top:34px; border-top:1px solid rgba(140,98,57,.22); }
.acc { border-bottom:1px solid rgba(140,98,57,.18); }
.acc-head {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; font-family:var(--mono); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(240,232,216,.68);
  transition: color .25s;
}
.acc-head:hover { color:var(--brass); }
.acc-head .mark { color:var(--clay); font-size:14px; transition:transform .3s var(--ease); }
.acc[open] .acc-head .mark { transform:rotate(45deg); }
.acc-body { padding:0 0 18px; font-size:15px; line-height:1.7; color:rgba(240,232,216,.62); }
.acc-body dl { display:grid; grid-template-columns:auto 1fr; gap:8px 20px; }
.acc-body dt { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:rgba(212,168,67,.6); padding-top:3px; }
.acc-body dd { color:rgba(240,232,216,.72); }

/* related */
.related { margin-top:46px; }
.related h3 {
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(240,232,216,.5); font-weight:400; margin-bottom:16px;
}
.related-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; }
.related-item { transition: transform .35s var(--ease), filter .3s; }
.related-item:hover { transform:translateY(-6px); filter:brightness(1.1); }
.related-item img { width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid rgba(140,98,57,.22); }
.related-item span {
  display:block; margin-top:8px; font-family:var(--mono); font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(240,232,216,.55);
}

/* ══════════════════════════════════════════════════════════════════════════
   8. THE BAG
   ══════════════════════════════════════════════════════════════════════════ */
.drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(430px, 100vw);
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, #14100B, #0A0705);
  border-left:1px solid rgba(140,98,57,.34);
  box-shadow: -30px 0 90px rgba(0,0,0,.7);
  transform:translateX(102%); transition: transform .52s var(--ease);
}
.drawer.open { transform:none; }
.drawer-scrim {
  position:fixed; inset:0; z-index:79; background:rgba(4,3,2,.6);
  opacity:0; visibility:hidden; transition: opacity .4s, visibility 0s .4s;
}
.drawer-scrim.on { opacity:1; visibility:visible; transition: opacity .4s; }

.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(18px,4vw,26px); border-bottom:1px solid rgba(140,98,57,.22);
}
.drawer-title { font-family:var(--sign); font-size:22px; letter-spacing:.2em; color:var(--cream); }
.drawer-body { flex:1; overflow-y:auto; padding:clamp(14px,3vw,22px); }
.drawer-foot { padding:clamp(18px,4vw,26px); border-top:1px solid rgba(140,98,57,.22); }

.bagline { display:grid; grid-template-columns:78px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid rgba(140,98,57,.14); }
.bagline img { width:78px; height:98px; object-fit:cover; border:1px solid rgba(140,98,57,.2); }
.bagline-name { font-family:var(--sign); font-size:16px; letter-spacing:.11em; color:var(--cream); }
.bagline-var {
  margin-top:5px; font-family:var(--mono); font-size:9px; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(240,232,216,.5);
}
.bagline-row { display:flex; align-items:center; justify-content:space-between; margin-top:11px; gap:10px; }
.qty { display:flex; align-items:center; border:1px solid rgba(240,232,216,.18); }
.qty button { width:28px; height:28px; display:grid; place-items:center; color:rgba(240,232,216,.7); font-family:var(--mono); font-size:13px; transition:color .2s,background .2s; }
.qty button:hover { color:var(--brass); background:rgba(212,168,67,.08); }
.qty span { min-width:30px; text-align:center; font-family:var(--mono); font-size:11px; }
.bagline-price { font-family:var(--mono); font-size:12px; color:var(--brass); }
.bagline-remove {
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(240,232,216,.38); transition:color .25s;
}
.bagline-remove:hover { color:var(--ember); }

.bag-empty { padding:60px 20px; text-align:center; }
.bag-empty p { font-style:italic; font-size:16px; color:rgba(240,232,216,.44); line-height:1.7; }

.totals { display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.total-row { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:rgba(240,232,216,.6); }
.total-row.grand { font-size:15px; color:var(--cream); padding-top:11px; border-top:1px solid rgba(140,98,57,.22); }
.total-row.grand b { color:var(--brass); font-weight:400; }
.ship-note { font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:rgba(240,232,216,.36); margin-bottom:14px; line-height:1.7; }

/* add-to-bag confirmation */
.toast {
  position:fixed; right:clamp(16px,3vw,28px); top:74px; z-index:85;
  display:flex; align-items:center; gap:14px; max-width:340px;
  padding:14px 16px; background:rgba(16,11,7,.96);
  border:1px solid rgba(212,168,67,.4); box-shadow:0 20px 50px rgba(0,0,0,.6);
  transform:translateX(120%); opacity:0;
  transition: transform .5s var(--ease), opacity .4s;
}
.toast.on { transform:none; opacity:1; }
.toast img { width:48px; height:60px; object-fit:cover; }
.toast-msg { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
.toast-sub { margin-top:5px; font-size:13px; color:rgba(240,232,216,.7); }
.toast-acts { display:flex; gap:12px; margin-top:9px; }
.toast-acts button {
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(240,232,216,.6); border-bottom:1px solid rgba(240,232,216,.24); padding-bottom:2px;
}
.toast-acts button:hover { color:var(--brass); border-color:var(--brass); }

/* a piece flying to the bag */
.fly {
  position:fixed; z-index:90; pointer-events:none; object-fit:cover;
  border:1px solid rgba(212,168,67,.5);
  transition: all .8s cubic-bezier(.5,-0.2,.7,1);
}

/* ══════════════════════════════════════════════════════════════════════════
   9. QUICK SHOP / SEARCH / PANELS
   ══════════════════════════════════════════════════════════════════════════ */
.panel-head { margin-bottom:clamp(20px,4vh,38px); }
.panel-head h2 {
  font-family:var(--sign); font-size:clamp(30px,4.4vw,54px);
  letter-spacing:.14em; color:var(--cream); font-weight:400;
}
.panel-head p { margin-top:10px; font-style:italic; color:rgba(240,232,216,.5); font-size:16px; }

.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.chip {
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:9px 15px; border:1px solid rgba(240,232,216,.18); color:rgba(240,232,216,.62);
  transition: border-color .25s, color .25s, background .25s;
}
.chip:hover { border-color:var(--clay); color:var(--cream); }
.chip[aria-pressed="true"] { background:var(--cream); border-color:var(--cream); color:var(--pitch); }

.qs-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(160px,17vw,230px),1fr));
  gap:clamp(14px,2vw,26px);
}
.qs-card { text-align:left; transition: transform .35s var(--ease); }
.qs-card:hover { transform:translateY(-6px); }
.qs-card .qs-img { position:relative; overflow:hidden; }
.qs-card img {
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid rgba(140,98,57,.2);
  transition: transform .6s var(--ease), filter .4s;
}
.qs-card:hover img { transform:scale(1.05); filter:brightness(1.08); }
.qs-name { margin-top:11px; font-family:var(--sign); font-size:16px; letter-spacing:.11em; color:var(--cream); }
.qs-var { margin-top:4px; font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:rgba(240,232,216,.46); }
.qs-price { margin-top:6px; font-family:var(--mono); font-size:11px; color:var(--brass); }
.qs-empty { padding:50px 0; font-style:italic; color:rgba(240,232,216,.44); }

.searchbar {
  display:flex; align-items:center; gap:12px; margin-bottom:24px;
  border-bottom:1px solid rgba(140,98,57,.34); padding-bottom:12px;
}
.searchbar input {
  flex:1; background:none; border:none; outline:none;
  font-family:var(--serif); font-size:clamp(20px,3vw,32px); color:var(--cream);
}
.searchbar input::placeholder { color:rgba(240,232,216,.26); font-style:italic; }

/* drop list signup */
.droplist { max-width:520px; }
.droplist form { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.droplist input[type=email] {
  flex:1 1 240px; background:rgba(240,232,216,.05); border:1px solid rgba(140,98,57,.34);
  padding:15px 16px; color:var(--cream); font-family:var(--mono); font-size:12px; outline:none;
  transition:border-color .3s;
}
.droplist input[type=email]:focus { border-color:var(--brass); }
.consent {
  display:flex; gap:10px; align-items:flex-start; margin-top:16px;
  font-size:13px; line-height:1.6; color:rgba(240,232,216,.5);
}
.consent input { margin-top:3px; accent-color:var(--brass); }
.form-note { margin-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--sage); }
.form-note.err { color:var(--clay); }

/* ══════════════════════════════════════════════════════════════════════════
   10. MOBILE — vertical retail zones
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  body.entered { overflow-y:auto; overflow-x:hidden; }

  #store { position:relative; inset:auto; height:auto; min-height:100vh; overflow:visible; }
  .floor-plane, .pendant { display:none; }
  .wall-wash { position:fixed; inset:0; }

  #track {
    position:relative; inset:auto;
    flex-direction:column; transform:none !important; transition:none;
  }
  .zone, .zone.wide {
    width:100%; min-width:0;
    padding: clamp(56px,10vh,90px) 18px clamp(40px,7vh,70px);
    justify-content:flex-start;
    border-bottom:1px solid rgba(140,98,57,.16);
  }
  .zone-sign { margin-bottom:26px; }
  .fixture { margin-bottom:0; }
  /* the department nav is fixed over the bottom — the last zone has to clear it */
  .zone:last-child { padding-bottom: 104px; }

  /* racks become swipeable rails */
  .rack-items, .shelf-items, .looks {
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding:0 0 18px; gap:12px; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .rack-items::-webkit-scrollbar, .shelf-items::-webkit-scrollbar, .looks::-webkit-scrollbar { display:none; }
  .garment, .stack, .look { scroll-snap-align:start; margin-left:0 !important; width:64vw; max-width:260px; }
  .garment { transform:none; }
  .garment::before { display:none; }
  .garment-tag { opacity:1; position:relative; left:auto; bottom:auto; transform:none; display:block; margin-top:12px; text-align:center; background:none; border:none; padding:0; }

  .rack-rail::before, .rack-rail::after { display:none; }

  .droproom { grid-template-columns:1fr; }
  .spot { grid-template-columns:1fr; }
  .topbar { padding:12px 14px; }
  .tool.hide-sm { display:none; }
  .walk { display:none; }
  .deptnav { padding:10px 12px 12px; }
  .drawer { width:100%; }
  .toast { left:14px; right:14px; max-width:none; top:64px; }
  .storefront { height:min(560px, 66vh); }
  .sheet-close { top:12px; right:12px; }
}

@media (max-width: 480px) {
  .facade-mark .wordmark { font-size:clamp(52px,17vw,84px); }
  .btn-enter { font-size:18px; padding:14px 32px; letter-spacing:.2em; }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. REDUCED MOTION — the store still works, it just stops performing
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .door .sheen { display:none; }
  #track { transition:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   11b. THE INVITE — shown once, after the doors settle
   ══════════════════════════════════════════════════════════════════════════ */
.invite {
  position:fixed; inset:0; z-index:95;
  display:none; place-items:center; padding:20px;
  background: rgba(4,3,2,.74); backdrop-filter: blur(10px);
}
.invite.open { display:grid; animation: fadein .5s ease; }

.invite-card {
  position:relative; width:min(520px, 100%);
  padding: clamp(28px,5vw,46px);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(226,178,110,.14), transparent 70%),
    linear-gradient(180deg, #191008, #0C0805);
  border:1px solid rgba(198,150,84,.4);
  box-shadow: 0 40px 110px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,214,150,.2);
  animation: rise .6s var(--ease);
}
.invite-card::before {   /* a thread of brass across the top */
  content:''; position:absolute; left:0; right:0; top:-1px; height:2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.invite-eyebrow {
  font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--clay);
}
.invite-card h2 {
  font-family:var(--sign); font-size:clamp(30px,5vw,44px); letter-spacing:.13em;
  line-height:1.02; margin:12px 0 10px; font-weight:400; color:var(--cream);
}
.invite-card p {
  font-size:16px; line-height:1.66; color:rgba(240,232,216,.66); max-width:40ch;
}
.invite-when {
  margin-top:18px; padding:12px 14px;
  border:1px solid rgba(212,168,67,.3); background:rgba(212,168,67,.07);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass);
}
.invite form { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.invite input[type=email] {
  flex:1 1 220px; background:rgba(240,232,216,.05);
  border:1px solid rgba(140,98,57,.4); padding:15px 16px;
  color:var(--cream); font-family:var(--mono); font-size:12px; outline:none;
  transition:border-color .3s;
}
.invite input[type=email]:focus { border-color:var(--brass); }
.invite-skip {
  display:block; margin:16px auto 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(240,232,216,.4);
  transition:color .25s;
}
.invite-skip:hover { color:var(--cream); }

/* ── SOUND ──────────────────────────────────────────────────────────────── */
.sound-btn .dot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:rgba(240,232,216,.3); margin-right:7px; vertical-align:1px;
  transition: background .3s, box-shadow .3s;
}
.sound-btn[aria-pressed="true"] .dot {
  background:var(--brass); box-shadow:0 0 8px rgba(212,168,67,.7);
}
.sound-btn[disabled] { opacity:.35; cursor:default; }

.enter-hint {
  font-family:var(--mono); font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(212,168,67,.55); margin-top:-4px;
}
.enter-alts { display:flex; gap:clamp(10px,2vw,24px); align-items:center; flex-wrap:wrap; justify-content:center; }

/* the facade's own switch, so a visitor can choose before walking in */
.facade-cta .sound-btn {
  display:inline-flex; align-items:center; gap:2px;
  border-bottom-color:transparent; opacity:.72;
}
.facade-cta .sound-btn:hover { opacity:1; }
.facade-cta .sound-btn[aria-pressed="true"] { color:var(--brass); opacity:1; }

/* the set is audible — say so on the wall glow */
.tv.sounding ~ .screen-glow, .screen-unit:has(.tv.sounding) .screen-glow { opacity:1; }
.tv.sounding .tv-led { animation: onair 2.4s ease-in-out infinite; }
@keyframes onair { 0%,100% { opacity:1 } 50% { opacity:.55 } }

/* ══════════════════════════════════════════════════════════════════════════
   12. LINKS AS FIXTURES
   Every product is a real <a href> so the store works without JavaScript and
   crawls properly. These rules make anchors behave like the fixtures they are.
   ══════════════════════════════════════════════════════════════════════════ */
.hook, .case-item, .related-item, .qs-card, .vault-card { display:block; }

.hook  { padding-bottom:0; }
.hook .stack-label,
.case-item .stack-label { position:static; margin-top:12px; }

.looks {
  overflow-x:auto; overflow-y:hidden; padding-bottom:8px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.looks::-webkit-scrollbar { display:none; }
.look { display:block; }

.qs-card .qs-img { display:block; position:relative; overflow:hidden; }
.qs-card .qs-name, .qs-card .qs-var, .qs-card .qs-price { display:block; }

.vault-card .vault-meta { display:block; margin-top:12px; }
.vault-card .vault-name, .vault-card .vault-when { display:block; }

/* the overlay and the drawer own the scroll while they are up */
body.locked { overflow:hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   13. NOSCRIPT / CRAWLABLE CATALOG
   ══════════════════════════════════════════════════════════════════════════ */
#seo-catalog { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.noscript-shop {
  padding:40px 20px; max-width:1100px; margin:0 auto;
  background:var(--onyx); color:var(--cream);
}
.noscript-shop h1 { font-family:var(--sign); font-size:44px; letter-spacing:.2em; margin-bottom:8px; }
.noscript-shop h2 { font-family:var(--sign); font-size:24px; letter-spacing:.14em; margin:34px 0 12px; color:var(--brass); }
.noscript-shop ul { list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.noscript-shop a { color:var(--clay); border-bottom:1px solid rgba(196,149,106,.3); }