/* ============================================================
   04 · VERNISSAGE, the year as an exhibition promenade
   ConceptCore Academy curriculum page, design-lab direction 4
   ============================================================ */

:root{
  --wall:      #f4f0e8;
  --wall-hi:   #faf7f1;
  --wall-lo:   #e9e2d2;
  --ink:       #231f18;
  --ink-2:     #3a3428;
  --mut:       #6f675a;
  --mut2:      #9a9182;
  --line:      #d9d1c0;
  --oak1:      #c39a67;
  --oak2:      #9a7040;
  --oak3:      #7a5227;
  --oak4:      #5a3a1a;
  --brass:     #8f742f;
  --brass2:    #b9994e;
  --brass3:    #e6d7a6;
  --patina:    #6b5c33;
  --vir:       #1d5949;   /* the one deep wayfinding accent: viridian */
  --vir2:      #2c7a66;
  --red:       #a13324;   /* collected dot only */
  --cream:     #f9f5ea;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --floor-y: 73.5%;          /* wall / floor junction inside the promenade */
  --guide-h: 88px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--wall);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; }
.mono{ font-family:var(--mono); }
:focus-visible{ outline:2px solid var(--vir); outline-offset:3px; }
::selection{ background:rgba(29,89,73,.16); }

.skip{
  position:fixed; left:12px; top:-64px; z-index:120;
  background:var(--ink); color:var(--cream); padding:10px 16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-decoration:none; transition:top .2s ease;
}
.skip:focus{ top:12px; }

.noscript{
  padding:120px 24px; text-align:center; font-family:var(--mono); color:var(--mut);
}
.loading{
  padding:40vh 8vw; color:var(--mut2); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
}

/* film of plaster grain over everything, under the chrome */
.grain{
  position:fixed; inset:0; z-index:56; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:240px 240px;
  opacity:.05; mix-blend-mode:multiply;
}

/* ---------------------------------------------------------- */
/* Lab chrome                                                  */
/* ---------------------------------------------------------- */
.chrome{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:56px; padding:0 18px 0 22px;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(rgba(246,242,234,.92), rgba(246,242,234,.72));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(140,120,80,.16);
}
.brand{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-2);
}
.chrome-nav{ display:flex; align-items:center; gap:4px; }
.wing-mini{ display:flex; gap:4px; margin-right:14px; }
.wing-mini button{
  width:40px; height:40px; border:1px solid rgba(143,116,47,.45);
  background:transparent; color:var(--brass);
  font-family:var(--serif); font-weight:600; font-size:13px; letter-spacing:.05em;
  cursor:pointer; transition:background .18s ease, color .18s ease;
}
.wing-mini button:hover{ background:rgba(185,153,78,.14); }
.wing-mini button[aria-pressed="true"]{
  background:linear-gradient(#b9994e,#8f742f); color:#fbf6e9; border-color:#8f742f;
}
.lab-link{
  display:inline-flex; align-items:center; min-height:40px; padding:0 12px;
  color:var(--brass); text-decoration:none;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.26em;
}
.lab-link:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; }

/* ---------------------------------------------------------- */
/* Promenade shell                                             */
/* ---------------------------------------------------------- */
.promenade{ position:relative; overflow:hidden; }
.ceiling{
  position:absolute; left:0; right:0; top:0; height:110px; z-index:6; pointer-events:none;
  background:linear-gradient(rgba(82,64,34,.10), rgba(82,64,34,.035) 55%, transparent);
  display:none;
}
.promenade-mode .ceiling{ display:block; }

.track{
  position:relative;
  will-change:transform;
}

/* Desktop promenade: one long wall with a floor */
.promenade-mode .track{
  display:flex; height:100vh; width:max-content;
  background:
    linear-gradient(180deg,
      #efe9db 0%, #f7f3eb 7%, var(--wall) 38%, #eee7d8 64%,
      #e4dac5 73.2%, #bda17b 73.6%, #a98c62 76%,
      #93724a 89%, #7d5c36 100%);
}
.promenade-mode .track::after{ /* floorboards */
  content:''; position:absolute; left:0; right:0; top:var(--floor-y); bottom:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(56,36,14,.09) 0 1px, transparent 1px 128px),
    linear-gradient(180deg, rgba(255,244,218,.18), transparent 42%),
    linear-gradient(180deg, transparent 55%, rgba(56,34,10,.12));
}
.promenade-mode .track::before{ /* skirting board at the junction */
  content:''; position:absolute; left:0; right:0; top:var(--floor-y); height:8px;
  transform:translateY(-100%); pointer-events:none;
  background:linear-gradient(#efe8d6, #dcd1b8);
  border-top:1px solid rgba(120,98,60,.22);
  border-bottom:1px solid rgba(80,56,20,.32);
}

/* ---------------------------------------------------------- */
/* Panels (shared)                                             */
/* ---------------------------------------------------------- */
.panel{ position:relative; }
.promenade-mode .panel{
  flex:0 0 auto; height:100%; z-index:2;
  display:flex; align-items:center;
  padding:56px 5vw calc(26.5vh + 22px); /* bottom clears the floor junction */
}
.panel:focus{ outline:none; }

/* ---------------------------------------------------------- */
/* Entrance wall                                               */
/* ---------------------------------------------------------- */
.ent-grid{ display:grid; grid-template-columns:minmax(460px, 640px) 400px; gap:5vw; align-items:center; }
.eyebrow{
  margin:0 0 22px; font-family:var(--mono); font-size:10px;
  letter-spacing:.36em; color:var(--brass);
}
.ent-title{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(56px, 6.4vw, 92px); line-height:.96; letter-spacing:.02em;
  text-transform:uppercase; text-wrap:balance; color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.55); /* letterpress into the plaster */
}
.ent-title em{ font-style:normal; color:var(--vir); }
.ent-session{
  margin:26px 0 6px; display:flex; align-items:baseline; gap:14px;
}
.ent-session .s-key{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--mut); }
.ent-session .s-val{ font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:.08em; color:var(--ink); }
.ent-sub{ margin:0 0 30px; font-family:var(--serif); font-style:italic; font-size:17px; color:var(--mut); }

.wings{ display:flex; gap:10px; flex-wrap:wrap; }
.wing{
  min-height:56px; min-width:128px; padding:9px 18px 10px;
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  border:1px solid rgba(143,116,47,.55); background:transparent; cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.wing .w-no{ font-family:var(--mono); font-size:8.5px; letter-spacing:.3em; color:var(--brass); }
.wing .w-name{ font-family:var(--serif); font-size:17px; font-weight:500; color:var(--ink); }
.wing:hover{ background:rgba(185,153,78,.12); }
.wing[aria-pressed="true"]{
  background:linear-gradient(#20604f, #17473a); border-color:#17473a;
}
.wing[aria-pressed="true"] .w-no{ color:var(--brass3); }
.wing[aria-pressed="true"] .w-name{ color:#f2ede0; }

.legend{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:36px;
  padding-top:18px; border-top:1px solid var(--line);
}
.legend .lg{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--mut);
}
.legend .lg i{ width:11px; height:11px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
.legend .lg i.round{ border-radius:50%; }

/* On-view poster + audio rail column */
.ent-right{ display:flex; flex-direction:column; gap:30px; }
.poster{ position:relative; }
.poster-eyebrow{
  margin:0 0 16px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.3em; color:var(--vir);
}
.poster-row{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.poster-walk{ margin-top:20px; }
.poster .frame{ padding:9px; }
.poster .mat{ padding:13px; }
.poster .mat::before{ inset:9px; }
.poster .lamp{ top:-24px; height:7px; }
.poster .lamp::before{ height:15px; }
.poster .art-col::before{ inset:-60px -70px -80px; }
.poster-meta{ flex:1 1 140px; min-width:140px; }
.poster .p-name{ margin:0 0 2px; font-family:var(--serif); font-weight:600; font-size:23px; line-height:1.08; text-wrap:balance; }
.poster .p-artist{ margin:0 0 6px; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink-2); }
.poster .p-frac{ margin:0 0 16px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--mut); }

.walk-btn{
  display:inline-flex; align-items:center; gap:12px; min-height:46px; padding:0 20px;
  border:1px solid var(--vir); color:var(--vir); background:transparent;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  cursor:pointer; text-decoration:none; transition:background .18s ease, color .18s ease;
}
.walk-btn::after{ content:'\2192'; font-family:var(--sans); font-size:14px; transition:transform .18s ease; }
.walk-btn:hover{ background:var(--vir); color:#f2ede0; }
.walk-btn:hover::after{ transform:translateX(4px); }

.rail{ max-width:340px; }
.rail-cap{
  margin:0 0 10px; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.24em; color:var(--mut2);
}
.dots{ display:flex; flex-wrap:wrap; gap:4px; width:216px; }
.dots i{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.dots i.done{
  background:linear-gradient(145deg,#79693c,#544628);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.45);
}
.dots i.ahead{
  background:linear-gradient(145deg,#f0e0ae,#c3a45c);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6), inset 0 0 0 1px rgba(120,95,40,.4);
}
.rail-plaque{
  margin:14px 0 0; padding:10px 14px; display:inline-flex; align-items:baseline; gap:10px;
  background:var(--cream); border:1px solid var(--line);
  box-shadow:0 6px 16px -10px rgba(60,40,10,.4);
}
.rail-plaque b{ font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:.02em; }
.rail-plaque span{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--mut); }

/* ---------------------------------------------------------- */
/* Room thresholds (semesters)                                 */
/* ---------------------------------------------------------- */
.threshold .arch{
  position:relative; width:520px; text-align:center; padding:70px 56px 66px;
}
.arch::before{ /* outer pilaster frame */
  content:''; position:absolute; inset:0;
  border:1px solid rgba(120,98,60,.5);
  background:
    linear-gradient(90deg, rgba(233,226,210,.9) 0 14px, transparent 14px calc(100% - 14px), rgba(233,226,210,.9) calc(100% - 14px)),
    linear-gradient(rgba(233,226,210,.9) 0 14px, transparent 14px);
  pointer-events:none;
}
.arch::after{ /* inner engraved line */
  content:''; position:absolute; inset:14px;
  border:1px solid rgba(120,98,60,.35);
  pointer-events:none;
}
.t-room{
  margin:0 0 16px; padding-top:16px; position:relative;
  font-family:var(--mono); font-size:10px; letter-spacing:.4em; color:var(--brass);
}
.t-room::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:46px; height:1px; background:var(--brass2);
}
.t-name{
  margin:0 0 4px; font-family:var(--serif); font-weight:600;
  font-size:46px; line-height:1; letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.t-range{ margin:0 0 26px; font-family:var(--serif); font-style:italic; font-size:18px; color:var(--mut); }
.t-works{ margin:0 0 26px; font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; color:var(--ink-2); }
.t-meter{
  position:relative; height:2px; width:300px; margin:0 auto 10px;
  background:var(--line);
}
.t-fill{
  position:absolute; left:0; top:0; bottom:0; background:var(--vir);
}
.t-fill::after{
  content:''; position:absolute; right:-4px; top:50%; transform:translate(0,-50%);
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(145deg,#e6d7a6,#8f742f);
  box-shadow:0 1px 2px rgba(60,40,10,.4);
}
.t-viewed{ margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--mut); }
.t-here{ color:var(--vir); }

/* ---------------------------------------------------------- */
/* Works (course frames + wall labels)                         */
/* ---------------------------------------------------------- */
.work{ --acc:var(--mut2); }
.hang{ display:flex; align-items:center; gap:60px; }
.art-col{ position:relative; width:var(--cw, 420px); flex:0 0 auto; }

.lamp{
  position:absolute; left:50%; top:-30px; transform:translateX(-50%);
  width:42%; height:9px; border-radius:5px 5px 2px 2px; z-index:3;
  background:linear-gradient(#e3cd8e,#8f742f 70%,#6b5624);
  box-shadow:0 2px 3px rgba(60,40,10,.35);
}
.lamp::before{ /* two stems down to the frame */
  content:''; position:absolute; top:100%; left:16%; right:16%; height:21px;
  background-image:linear-gradient(#8f742f,#6b5624), linear-gradient(#8f742f,#6b5624);
  background-size:3px 100%, 3px 100%;
  background-position:0 0, 100% 0;
  background-repeat:no-repeat;
}
.lamp::after{ /* light cone */
  content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:190%; height:min(320px, calc(var(--cw, 420px) * .82)); pointer-events:none;
  background:radial-gradient(52% 92% at 50% 0%, rgba(255,244,206,.5), rgba(255,244,206,.1) 52%, transparent 72%);
  clip-path:polygon(34% 0, 66% 0, 100% 100%, 0 100%);
}

.frame{
  margin:0; position:relative; z-index:2;
  padding:15px;
  background:linear-gradient(135deg,#4c3921,#6d5434 32%,#402f18 68%,#5b452b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 26px 44px -20px rgba(50,32,8,.5),
    0 8px 16px -8px rgba(50,32,8,.38);
  transition:transform .3s ease, box-shadow .3s ease;
}
.mat{
  display:block; position:relative; padding:26px; background:#f8f4e9;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09), inset 0 3px 7px rgba(0,0,0,.14);
}
.mat::before{ /* accent bevel line around the plate */
  content:''; position:absolute; inset:21px; pointer-events:none; z-index:2;
  border:1px solid color-mix(in srgb, var(--acc) 55%, #cec2a6);
}
.mat img{ display:block; width:100%; height:auto; aspect-ratio:var(--arr, 1); object-fit:cover; }

.floor-shadow{
  position:absolute; left:6%; right:6%; top:calc(100% + 12px); height:26px;
  background:radial-gradient(50% 60% at 50% 40%, rgba(48,30,8,.26), transparent 72%);
  pointer-events:none;
}
.work-no{
  position:absolute; left:2px; top:calc(100% + 16px);
  font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--brass);
}

/* status treatments -------------------------------------------------- */
.status-completed .mat img{ filter:saturate(.55) contrast(.96) brightness(1.01); }
.status-completed .frame{
  background:linear-gradient(135deg,#382914,#544028 32%,#2e2110 68%,#46341e);
}
.status-upcoming .frame{
  padding:12px;
  background:linear-gradient(135deg,#ddcda4,#c8b184 40%,#b39a6b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(90,70,30,.35),
    0 20px 36px -20px rgba(50,32,8,.4),
    0 6px 12px -8px rgba(50,32,8,.3);
}
.status-upcoming .mat{ padding:20px; }
.status-upcoming .mat::before{ inset:15px; }
.status-upcoming .mat img{ filter:saturate(.8) contrast(.93) brightness(1.04); }
.status-upcoming .mat::after{ /* awaiting varnish: raw scrim sheen */
  content:''; position:absolute; inset:20px; pointer-events:none; z-index:3;
  background:linear-gradient(158deg, rgba(250,247,238,.28), rgba(250,247,238,.05) 46%, rgba(250,247,238,0) 62%);
}
.status-current .frame{
  background:linear-gradient(135deg,#6b5426,#9a7d3c 30%,#54401b 70%,#7d6330);
  box-shadow:
    inset 0 1px 0 rgba(255,235,170,.4),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 30px 54px -22px rgba(50,32,8,.55),
    0 10px 18px -8px rgba(50,32,8,.4);
}
.status-current .art-col::before{ /* wall spotlight */
  content:''; position:absolute; inset:-140px -180px -200px; z-index:0;
  background:radial-gradient(46% 52% at 50% 38%, rgba(255,246,212,.7), rgba(255,246,212,0) 72%);
  pointer-events:none;
}
.status-current .lamp::after{
  background:radial-gradient(52% 96% at 50% 0%, rgba(255,246,206,.72), rgba(255,246,206,.16) 55%, transparent 74%);
}


/* the visitor: NOW floor stand ---------------------------------------- */
.now-stand{
  position:absolute; z-index:8; bottom:calc(var(--guide-h) + 2.6vh);
  left:calc(5vw + var(--cw) * .86);
  display:flex; flex-direction:column; align-items:center;
}
.ns-plaque{
  display:flex; flex-direction:column; align-items:center; gap:0;
  background:var(--cream); border:1px solid rgba(120,98,60,.5);
  padding:8px 18px 9px; box-shadow:0 8px 18px -8px rgba(50,32,8,.5);
}
.ns-plaque b{ font-family:var(--serif); font-weight:600; font-size:17px; line-height:1.15; }
.ns-plaque i{ font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--mut); }
.ns-post{ width:3px; height:74px; background:linear-gradient(#c3a45c,#6b5624); }
.ns-base{
  width:34px; height:8px; border-radius:50%;
  background:radial-gradient(closest-side, #6b5624, #4a3a17);
  box-shadow:0 3px 6px rgba(40,24,4,.5);
}

/* pool of lamp light on the floor */
.floor-pool{
  position:absolute; bottom:calc(var(--guide-h) - 22px); left:5vw;
  width:calc(var(--cw) + 90px); height:96px; pointer-events:none; z-index:1;
  background:radial-gradient(50% 55% at 50% 45%, rgba(255,240,200,.26), transparent 74%);
}

/* wall label ---------------------------------------------------------- */
.label{ width:330px; flex:0 0 auto; position:relative; z-index:2; }
.chip{
  margin:0; display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.3em; color:var(--mut);
}
.chip i{ width:12px; height:12px; background:var(--acc); box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); }
.l-status .red-dot{ margin-left:4px; }
.red-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #c1503d, var(--red) 60%);
  box-shadow:0 1px 2px rgba(60,10,0,.3);
}
.l-name{
  margin:16px 0 6px; font-family:var(--serif); font-weight:600;
  font-size:30px; line-height:1.08; letter-spacing:.004em; text-wrap:balance;
}
.l-artist{ margin:0 0 14px; font-family:var(--serif); font-style:italic; font-size:18.5px; color:var(--ink-2); }
.tbd-note{
  display:inline-block; margin-left:9px; padding:2px 8px 3px; vertical-align:3px;
  border:1px solid var(--line); color:var(--mut);
  font-family:var(--mono); font-style:normal; font-size:8.5px; letter-spacing:.18em;
}
.l-dates{ margin:0 0 9px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--mut); }
.l-media{ margin:0 0 10px; font-style:italic; font-size:12.5px; color:var(--mut); }
.l-blurb{ margin:0 0 15px; font-size:14px; line-height:1.62; max-width:34ch; text-wrap:pretty; color:var(--ink-2); }
.l-status{
  margin:0 0 12px; display:flex; align-items:center; gap:9px;
  font-family:var(--serif); font-weight:600; font-size:11.5px;
  letter-spacing:.22em; text-transform:uppercase;
}
.st-dot{ width:7px; height:7px; border-radius:50%; background:var(--mut2); flex:0 0 auto; }
.status-upcoming .st-dot{ background:transparent; box-shadow:inset 0 0 0 1px var(--mut2); }
.status-current .st-dot{ background:var(--vir2); box-shadow:0 0 0 3px rgba(44,122,102,.2); }
.status-current .l-status{ color:var(--vir); }
.l-days{ display:flex; align-items:center; gap:10px; margin:0 0 20px; }
.l-days .frac{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; }
.ticks{ display:flex; gap:3px; }
.ticks i{
  width:7px; height:15px; flex:0 0 auto;
  border:1px solid color-mix(in srgb, var(--brass) 46%, var(--line));
  background:transparent;
}
.ticks i.on{ background:var(--brass2); border-color:var(--brass); }
.l-days .left{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--mut); }

.open-btn{
  display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:0 22px;
  border:1px solid var(--brass); color:var(--brass); text-decoration:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  background:linear-gradient(rgba(191,157,80,.05), rgba(191,157,80,.13));
  transition:background .18s ease, color .18s ease;
}
.open-btn::after{ content:'\2192'; font-family:var(--sans); font-size:14px; transition:transform .18s ease; }
.open-btn:hover{ background:linear-gradient(#b9994e,#8f742f); color:#fbf6e9; }
.open-btn:hover::after{ transform:translateX(4px); }

/* ---------------------------------------------------------- */
/* Winter passage                                              */
/* ---------------------------------------------------------- */
.passage .pass-wrap{ display:flex; align-items:center; gap:72px; }
.doors{
  position:relative; display:flex; gap:5px; filter:saturate(.82) brightness(.97);
  padding:12px 12px 0;
  background:linear-gradient(#ece4d1,#dcd1b6);
  border:1px solid rgba(120,98,60,.4); border-bottom:0;
}
.promenade-mode .doors{ transform:translateY(calc(36.75vh - 231px)); }
.doors::after{ /* ground shadow at the doorway */
  content:''; position:absolute; left:-8%; right:-8%; top:100%; height:26px;
  background:radial-gradient(50% 70% at 50% 0%, rgba(48,30,8,.3), transparent 76%);
}
.door{
  position:relative; width:168px; height:430px; display:block;
  background:linear-gradient(#8a6740,#6b4a26);
  border:1px solid #4c3315;
  box-shadow:inset 0 0 0 6px rgba(60,40,15,.25), 0 24px 40px -22px rgba(40,24,4,.55);
}
.door::before, .door::after{ /* recessed panels */
  content:''; position:absolute; left:22px; right:22px;
  border:1px solid rgba(46,28,8,.55);
  box-shadow:inset 0 0 0 4px rgba(122,90,50,.5), inset 0 6px 12px rgba(30,18,4,.35);
  background:linear-gradient(#7c5a33,#5f3f1f);
}
.door::before{ top:24px; height:150px; }
.door::after{ top:198px; bottom:24px; }
.door b{
  position:absolute; top:49%; width:11px; height:11px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 32% 28%, #ecd9a0, #8f742f 70%);
  box-shadow:0 1px 3px rgba(30,18,4,.6);
}
.door.l b{ right:10px; }
.door.r b{ left:10px; }

.pass-plaque{
  width:330px; padding:30px 32px 28px;
  background:var(--cream); border:1px solid var(--line);
  box-shadow:0 14px 30px -18px rgba(60,40,10,.45);
}
.pass-eyebrow{ margin:0 0 14px; font-family:var(--mono); font-size:9px; letter-spacing:.34em; color:var(--mut2); }
.pass-title{
  margin:0 0 10px; font-family:var(--serif); font-weight:600;
  font-size:27px; line-height:1.12; text-wrap:balance;
}
.pass-dates{ margin:0 0 12px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--mut); }
.pass-sub{ margin:0; font-size:13.5px; color:var(--mut); }

/* ---------------------------------------------------------- */
/* Exit wall                                                   */
/* ---------------------------------------------------------- */
.exit-inner{ text-align:center; max-width:520px; }
.exit-eyebrow{ margin:0 0 18px; font-family:var(--mono); font-size:10px; letter-spacing:.4em; color:var(--brass); }
.exit-title{
  margin:0 0 8px; font-family:var(--serif); font-weight:600;
  font-size:52px; line-height:1; letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.exit-sub{ margin:0 0 34px; font-family:var(--serif); font-style:italic; font-size:17px; color:var(--mut); }
.exit-actions{ display:flex; justify-content:center; }

/* ---------------------------------------------------------- */
/* Floor guide: the 38-week year calendar                      */
/* ---------------------------------------------------------- */
#floorGuide{ position:fixed; left:0; right:0; bottom:0; z-index:50; }
html:not(.promenade-mode) #floorGuide{ display:none; }

.fg{
  display:flex; align-items:stretch; height:var(--guide-h);
  background:linear-gradient(#5e3f1d,#452b0f);
  border-top:1px solid #2e1c08;
  box-shadow:inset 0 1px 0 rgba(240,214,150,.28);
}
.fg-cap{
  flex:0 0 auto; width:112px; padding-left:20px;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  color:#d9c9a2; font-family:var(--mono); font-size:8.5px; letter-spacing:.22em;
  border-right:1px solid rgba(240,214,150,.16);
}
.fg-cap b{ font-weight:500; color:#f0e2b6; font-size:9.5px; }
.fg-body{ position:relative; flex:1; padding:26px 20px 6px; min-width:0; }
.fg-cells{ display:flex; height:40px; align-items:flex-end; }
.wk{
  position:relative; flex:1 1 0; min-width:0; height:100%;
  margin:0; padding:0; border:0; background:transparent; cursor:pointer;
}
.wk:disabled{ cursor:default; }
.wk:focus-visible{ outline-color:var(--brass3); outline-offset:-2px; }
.wk::before{
  content:''; position:absolute; left:1px; right:1px; bottom:0; height:22px;
  transition:filter .15s ease, transform .15s ease;
}
.wk.crs::before{
  background:var(--acc);
  box-shadow:inset 0 1px 0 rgba(255,246,214,.4); /* polished, still ahead */
}
.wk.crs.past::before{
  background:color-mix(in srgb, var(--acc) 44%, #241708);
  box-shadow:none; /* patinated */
}
.wk.self::before{ height:7px; background:#83653a; }
.wk.hol::before{
  height:14px;
  background:repeating-linear-gradient(45deg, #8a6a3e 0 3px, transparent 3px 6px);
}
.wk.crs:hover::before, .wk.hol:hover::before{ filter:brightness(1.25); }
.wk.nowwk::before{ box-shadow:0 0 0 1px #f2e3b6; }
.wk.live::after{
  content:''; position:absolute; top:9px; left:0; right:0; height:3px;
  background:#e8d49a;
}
.fg-months{ position:relative; height:13px; margin-top:5px; }
.fg-months span{
  position:absolute; top:0; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.2em; color:#cbb684; transform:translateX(3px); text-transform:uppercase;
}
.fg-now{ position:absolute; top:0; bottom:0; width:0; z-index:5; pointer-events:none; }
.fg-now i{
  position:absolute; left:-.5px; width:1px; top:24px; bottom:0;
  background:linear-gradient(#f6e7b6, rgba(246,231,182,.2));
}
.fg-now-plaque{
  position:absolute; top:3px; left:0; transform:translateX(-50%);
  display:flex; align-items:baseline; gap:7px; white-space:nowrap;
  background:#f6efdd; color:#3a2c12; padding:2px 11px 3px;
  box-shadow:0 2px 8px rgba(20,10,0,.4);
}
.fg-now-plaque b{ font-family:var(--serif); font-weight:600; font-size:12.5px; }
.fg-now-plaque span{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; }
.fg-legend{
  flex:0 0 auto; width:156px; padding:0 16px;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  border-left:1px solid rgba(240,214,150,.16);
  color:#cbb684; font-family:var(--mono); font-size:8px; letter-spacing:.16em;
}
.fg-legend .row{ display:flex; align-items:center; gap:8px; }
.fg-legend .row i{ width:12px; height:8px; flex:0 0 auto; }
.fg-legend .sw-past{ background:#5c4a22; }
.fg-legend .sw-ahead{ background:#b9994e; }
.fg-legend .sw-self{ background:#7d5f36; height:3px; }
.fg-legend .sw-hol{ background:repeating-linear-gradient(45deg, #8a6a3e 0 3px, transparent 3px 6px); }

/* the same guide, embedded in the flow (mobile / reduced motion) */
#calSlot .fg{ height:auto; flex-direction:column; box-shadow:inset 0 1px 0 rgba(240,214,150,.28), 0 18px 34px -22px rgba(50,32,8,.6); }
#calSlot .fg-cap{ width:auto; border-right:0; padding:14px 20px 0; flex-direction:row; gap:10px; align-items:baseline; }
#calSlot .fg-body{ padding:30px 16px 8px; }
#calSlot .fg-cells{ height:44px; }
#calSlot .fg-legend{
  width:auto; border-left:0; flex-direction:row; flex-wrap:wrap; gap:12px;
  padding:10px 16px 14px;
}

/* ---------------------------------------------------------- */
/* Vertical gallery (mobile + reduced motion)                  */
/* ---------------------------------------------------------- */
html:not(.promenade-mode) body{ background:var(--wall); }
html:not(.promenade-mode) .track{ display:block; }
html:not(.promenade-mode) .panel{
  padding:72px 22px;
  display:flex; flex-direction:column; align-items:center;
}
html:not(.promenade-mode) .panel.entrance{ padding-top:120px; }
html:not(.promenade-mode) .ent-grid{
  display:flex; flex-direction:column; gap:44px; max-width:640px; width:100%;
}
html:not(.promenade-mode) .hang{
  flex-direction:column; gap:34px; align-items:center; width:100%; max-width:640px;
}
html:not(.promenade-mode) .art-col{ width:min(var(--cw, 420px), 100%); }
html:not(.promenade-mode) .label{ width:100%; max-width:440px; }
html:not(.promenade-mode) .now-stand,
html:not(.promenade-mode) .floor-pool{ display:none; }
html:not(.promenade-mode) .work{
  border-bottom:1px solid var(--line);
}
html:not(.promenade-mode) .pass-wrap{
  flex-direction:column; gap:40px; align-items:center;
}
html:not(.promenade-mode) .doors{ transform:scale(.82); transform-origin:top center; margin-bottom:-60px; }
html:not(.promenade-mode) .threshold .arch{ width:min(520px, 100%); }
html:not(.promenade-mode) .now-inline{ display:flex; }

.now-inline{
  display:none; align-items:baseline; gap:9px; margin:0 0 14px;
  padding:7px 14px 8px; width:fit-content;
  background:var(--cream); border:1px solid rgba(120,98,60,.5);
  box-shadow:0 6px 14px -8px rgba(50,32,8,.4);
}
.now-inline b{ font-family:var(--serif); font-weight:600; font-size:15px; }
.now-inline span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--mut); }

@media (max-width: 760px){
  .chrome{ height:52px; padding:0 10px 0 14px; }
  .brand{ font-size:10px; letter-spacing:.22em; }
  .ent-title{ font-size:clamp(44px, 12.5vw, 64px); }
  .wings{ width:100%; }
  .wing{ flex:1 1 auto; min-width:0; }
  .fg-cap{ padding:14px 16px 0; }
  .mat{ padding:16px; }
  .mat::before{ inset:12px; }
  .frame{ padding:10px; }
  .status-upcoming .frame{ padding:8px; }
  .status-upcoming .mat{ padding:13px; }
  .status-upcoming .mat::before{ inset:9px; }
  .label{ max-width:none; }
  .l-name{ font-size:26px; }
  html:not(.promenade-mode) .panel{ padding:56px 18px; }
}

/* ---------------------------------------------------------- */
/* Motion gating                                               */
/* ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .status-current .st-dot{ animation:onview 2.4s ease-in-out infinite; }
  @keyframes onview{
    0%,100%{ box-shadow:0 0 0 3px rgba(44,122,102,.2); }
    50%{ box-shadow:0 0 0 6px rgba(44,122,102,.08); }
  }
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}