/* Concept D — Under One Roof: the walk-in and the sections the inner pages reuse (pages.css has the rest) */
:root {
  --night: #110f0d; --night-2: #1a1714; --night-3: #241f1b;
  --paper: #f2ebdf; --paper-2: #e9dfcd; --ink: #1b1815;
  --brass: #d6b06b; --brass-2: #b88d45; --brick: #9c4a2c; --canal: #3f5d5e;
  --mut-n: #b7ab97; --mut-p: #5d5548; --line-n: rgba(242,235,223,.14); --line-p: rgba(27,24,21,.16);
  --f-disp: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --f-serif: "Libre Caslon Text", Georgia, serif;
  --f-body: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.33,1,.68,1);
  /* shared component tokens */
  --lw-bg: var(--night); --lw-fg: var(--paper); --lw-muted: var(--mut-n); --lw-line: var(--line-n); --lw-panel: var(--night-2);
  --lw-accent: var(--brass); --lw-accent-fg: var(--night); --lw-alert: #ff9b86;
  --lw-display: var(--f-serif); --lw-body: var(--f-body); --lw-mono: var(--f-mono);
  --lwp-bg: #0c0a09; --lwp-accent: var(--brass); --lwp-display: var(--f-disp); --lwp-body: var(--f-body); --lwp-mono: var(--f-mono);
}
html { scroll-behavior: smooth; }
body { background: var(--night); color: var(--paper); font: 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.k { font: 500 11px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mut-n); }
.paper .k { color: var(--mut-p); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.proto-banner { position: relative; z-index: 60; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- header ---------- */
.site { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .4s, top .3s; }
.site.is-solid { background: rgba(17,15,13,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-n); }
.site .bar { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
.mark { font: 700 20px/1 var(--f-serif); text-decoration: none; letter-spacing: .01em; display: flex; align-items: baseline; gap: 10px; }
.mark small { font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mut-n); }
#nav { display: flex; align-items: center; gap: 4px; }
#nav a { text-decoration: none; font-size: 14.5px; padding: 8px 12px; border-radius: 999px; color: var(--paper); }
#nav a:hover { background: rgba(242,235,223,.08); }
#nav .cta { border: 1px solid rgba(214,176,107,.6); color: var(--brass); margin-left: 6px; }
.menu-btn { display: none; font: 500 14px var(--f-body); color: var(--paper); background: rgba(17,15,13,.5); border: 1px solid var(--line-n); border-radius: 999px; padding: 9px 16px; }

/* ---------- ACT I: arrival ---------- */
.arrive { position: relative; height: 430vh; background: var(--night); }
.arrive .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sky { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 100%, #2a211a 0%, var(--night) 62%); }
.dusk { position: absolute; inset: 0; background: linear-gradient(180deg, #1d2333 0%, #3a3a4c 38%, #6a4c45 66%, #2a201a 100%); }
.dusk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: radial-gradient(60% 80% at 50% 100%, rgba(232,160,96,.28), transparent 70%); }
.bloom { --b: 0; position: absolute; inset: 0; pointer-events: none; opacity: var(--b);
  background: radial-gradient(circle at 50% 62%, rgba(255,214,150,.95) 0%, rgba(214,150,80,.55) calc(var(--b) * 30%), #3a2a1a calc(var(--b) * 85% + 10%), #1b140f 140%); }
.facade { position: absolute; left: 50%; bottom: 0; width: max(1400px, 118vw); transform: translateX(-50%); height: auto; max-height: 96vh; }
.facade .ln { fill: none; stroke: #cdbb99; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .82; transition: stroke-dashoffset 2.6s cubic-bezier(.45,0,.2,1); }
.facade.drawn .ln, .static .facade .ln { stroke-dashoffset: 0; }
.facade .ln.faint { transition-delay: .5s; transition-duration: 2.2s; }
.facade .ln.faint { opacity: .35; }
.facade .bldg { fill: #17130f; }
.facade .win { fill: #f3c77a; opacity: 0; transition: opacity .9s; }
.facade .win.on { opacity: .92; }
.facade .gate { fill: url(#gateGlow); }
.facade text { font: 500 13px var(--f-mono); letter-spacing: .3em; fill: #8d826f; }
.arrive h1 { position: absolute; left: 0; right: 0; top: 17vh; margin: 0 auto; text-align: center; padding: 0 20px; transition: opacity .3s; }
.arrive h1 .big { display: block; font: 400 clamp(46px, 8.2vw, 124px)/.95 var(--f-disp); letter-spacing: -.01em; color: var(--paper); }
.arrive h1 .sub { display: block; margin-top: 18px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.frags { position: absolute; inset: 0; pointer-events: none; }
.frag { position: absolute; font: 400 13px/1.3 var(--f-mono); color: var(--paper); opacity: 0; transform: translateY(6px); transition: opacity .7s var(--ease), transform .7s var(--ease); white-space: nowrap; display: flex; gap: 8px; align-items: center; background: rgba(17,15,13,.82); padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid rgba(214,176,107,.25); }
.frag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 12px var(--brass); }
.frag.on { opacity: .9; transform: none; }
.frags-k { position: absolute; left: 28px; bottom: 28px; opacity: 0; transition: opacity .6s; }
.frags-k.on { opacity: 1; }
.inside { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; padding: 120px max(28px, 8vw) 60px; opacity: 0; visibility: hidden; z-index: 4;
  background: radial-gradient(80% 70% at 30% 40%, #3a2a1a 0%, #1b140f 55%, #120e0b 100%); }
.inside.on { visibility: visible; }
.inside .k { color: var(--brass); }
.ladder { margin: 18px 0 26px; font: 400 clamp(40px, 6.2vw, 92px)/1.02 var(--f-disp); letter-spacing: -.01em; max-width: 15ch; }
.ladder span { display: inline; color: rgba(242,235,223,.38); transition: color .5s; }
.ladder span.on { color: var(--paper); }
.ladder em { display: block; font-family: var(--f-serif); font-style: italic; color: var(--brass); font-size: .62em; margin-top: .25em; }
.inside p.intro { max-width: 54ch; font-size: clamp(17px, 1.5vw, 20px); color: #ddd2bf; margin: 0 0 28px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15.5px; border: 1px solid transparent; }
.btn-brass { background: var(--brass); color: var(--night); }
.btn-ghost { border-color: rgba(242,235,223,.35); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); }
.paper .btn-ghost { border-color: var(--line-p); color: var(--ink); }
.skip-arrival { position: absolute; right: 28px; bottom: 26px; font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut-n); }
.drawing-note { position: absolute; right: 28px; bottom: 56px; font: 400 11px var(--f-mono); color: #8d826f; letter-spacing: .06em; }

/* art-directed placeholders (no photos invented) */
.art { position: absolute; inset: 0; }
.art-stage { background: radial-gradient(40% 55% at 62% 30%, rgba(255,176,92,.55), transparent 70%), radial-gradient(30% 40% at 30% 20%, rgba(170,60,90,.45), transparent 70%), linear-gradient(180deg, #24120f, #120c0a); }
.art-school { background: radial-gradient(60% 60% at 75% 25%, rgba(246,236,214,.55), transparent 70%), linear-gradient(160deg, #3d4a4f, #1c2224); }
.art-crew { background: radial-gradient(18% 30% at 70% 22%, rgba(255,226,170,.75), transparent 70%), radial-gradient(50% 50% at 20% 80%, rgba(80,120,140,.35), transparent 70%), linear-gradient(180deg, #121417, #0b0c0d); }
.art-make { background: radial-gradient(50% 60% at 30% 30%, rgba(255,130,60,.5), transparent 70%), linear-gradient(200deg, #3a2316, #15100c); }
.art-ideas { background: radial-gradient(40% 50% at 50% 35%, rgba(215,170,50,.35), transparent 70%), linear-gradient(180deg, #151515, #070707); }
.art-basement { background: radial-gradient(45% 50% at 40% 40%, rgba(255,186,110,.35), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 60px), linear-gradient(180deg, #2a2420, #120f0d); }
.art-blueprint { background: linear-gradient(rgba(143,179,199,.16) 1px, transparent 1px) 0 0/40px 40px, linear-gradient(90deg, rgba(143,179,199,.16) 1px, transparent 1px) 0 0/40px 40px, radial-gradient(60% 60% at 60% 30%, #1b3446, #0f1a22); }
.art-bake { background: radial-gradient(45% 50% at 65% 35%, rgba(240,200,140,.6), transparent 70%), linear-gradient(170deg, #5a3a22, #2a1b11); }
.art-mifa { background: radial-gradient(40% 50% at 35% 30%, rgba(200,170,220,.35), transparent 70%), linear-gradient(180deg, #2a2230, #141017); }
.art-studio { background: radial-gradient(55% 55% at 70% 30%, rgba(240,220,190,.45), transparent 70%), linear-gradient(200deg, #4a3d33, #1d1814); }
.art-yard { background: radial-gradient(60% 50% at 50% 20%, rgba(150,200,190,.35), transparent 70%), linear-gradient(180deg, #23383a, #0f1819); }
/* ---------- ACT III: outside ---------- */
.paper { background: var(--paper); color: var(--ink); position: relative; }
.outside { padding: 130px 0 110px; }
.outside .lead { font: 400 clamp(34px, 4.6vw, 64px)/1.06 var(--f-disp); max-width: 20ch; margin: 14px 0 12px; letter-spacing: -.01em; }
.outside .attr { font: 400 13px var(--f-mono); color: var(--mut-p); }
.walk { margin-top: 56px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: start; }
.plan { position: relative; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line-p); overflow: hidden; }
.plan svg { display: block; width: 100%; height: auto; }
.plan .note { position: absolute; left: 14px; bottom: 12px; font: 400 11px var(--f-mono); color: var(--mut-p); }
.zones { display: grid; gap: 26px; }
.zone h3 { font: 700 24px/1.12 var(--f-serif); margin: 0 0 4px; display: flex; gap: 12px; align-items: baseline; }
.zone h3 .n { font: 500 11px var(--f-mono); color: var(--brick); letter-spacing: .14em; }
.zone ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.zone li { display: grid; grid-template-columns: 1fr; padding: 10px 0; border-top: 1px solid var(--line-p); }
.zone li b { font: 400 19px/1.2 var(--f-serif); }
.zone li span { font-size: 14px; color: var(--mut-p); }
.zone .z-note { font-size: 13px; color: var(--mut-p); margin: 8px 0 0; }
.city { margin-top: 100px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; border-top: 1px solid var(--line-p); padding-top: 50px; }
.city h2 { font: 400 clamp(32px, 3.8vw, 52px)/1.05 var(--f-disp); margin: 10px 0; }
.city p { color: #3d372e; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.fact { padding: 20px 20px 20px 0; border-top: 1px solid var(--line-p); }
.fact .v { font: 400 clamp(30px, 3.4vw, 46px)/1 var(--f-disp); color: var(--brick); }
.fact .l { font-size: 15px; margin: 6px 0; }
.fact .s { font: 400 11.5px/1.45 var(--f-mono); color: var(--mut-p); }
.fact.asset .v { color: var(--canal); }
.curious { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.curious a, .curious div { display: grid; gap: 6px; padding: 22px; border-radius: 14px; border: 1px solid var(--line-p); text-decoration: none; background: rgba(255,255,255,.35); }
.curious b { font: 700 20px/1.15 var(--f-serif); }
.curious span { font-size: 14.5px; color: var(--mut-p); }

/* ---------- ACT IV: history ---------- */
.history { background: #1a1612; padding: 120px 0 90px; position: relative; }
.history h2 { font: 400 clamp(40px, 5.4vw, 80px)/1 var(--f-disp); margin: 12px 0 14px; max-width: 16ch; letter-spacing: -.01em; }
.history .intro { max-width: 60ch; color: #d4c9b6; }
.eras { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 22px; }
.eras button { font: 500 13px var(--f-body); background: none; color: var(--paper); border: 1px solid var(--line-n); padding: 9px 14px; border-radius: 999px; cursor: pointer; }
.eras button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.tl { position: relative; }
.tl-scroll { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 150px; padding-bottom: 14px; scrollbar-color: var(--brass-2) transparent; cursor: grab; }
.tl-scroll.dragging { cursor: grabbing; scroll-snap-type: none; }
.tl-grid { display: grid; grid-template-columns: 150px repeat(var(--cols), minmax(270px, 300px)); grid-auto-rows: auto; min-width: max-content; }
.tl-h { position: sticky; left: 0; z-index: 2; background: #1a1612; padding: 18px 16px 18px 0; border-top: 1px solid var(--line-n); font: 500 11px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.tl-era { padding: 0 14px 14px; border-left: 1px solid var(--line-n); scroll-snap-align: start; }
.tl-era b { display: block; font: 700 28px/1.12 var(--f-serif); }
.tl-era span { font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut-n); }
.tl-cell { border-left: 1px solid var(--line-n); border-top: 1px solid var(--line-n); padding: 14px; display: grid; gap: 10px; align-content: start; min-height: 120px; }
.ev { border-radius: 12px; padding: 14px 16px; background: var(--night-3); display: grid; gap: 6px; }
.ev .when { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.ev .what { font: 400 18px/1.3 var(--f-serif); }
.ev .src { font: 400 11px/1.4 var(--f-mono); color: var(--mut-n); }
.ev.verify .when::after { content: " · verify"; color: #f0b9a6; }
.ev.gap { background: none; border: 1px dashed rgba(242,235,223,.35); }
.ev.gap .when { color: #f0b9a6; }
.ev.gap .what { font-style: italic; color: #d9cdb9; }
.ev.future { background: none; border: 1px solid rgba(143,179,199,.5); }
.ev.future .when { color: #a9c7d6; }
.tl-ctrl { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.tl-ctrl button { font: 500 14px var(--f-body); color: var(--paper); background: none; border: 1px solid var(--line-n); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--mut-n); margin: 0 0 0 auto; list-style: none; padding: 0; }
.unwritten { margin-top: 36px; padding: 22px 24px; border: 1px dashed rgba(242,235,223,.35); border-radius: 14px; max-width: 76ch; color: #d4c9b6; }
.unwritten b { color: var(--paper); font-family: var(--f-serif); font-weight: 400; font-size: 20px; display: block; margin-bottom: 4px; }

/* ---------- ACT VI: future ---------- */
.future { padding: 120px 0; }
.future h2 { font: 400 clamp(40px, 5.2vw, 76px)/1 var(--f-disp); margin: 12px 0 14px; max-width: 18ch; }
.future .intro { max-width: 62ch; color: #3d372e; }
.horizon { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.hz { padding: 24px 24px 24px 0; }
.hz + .hz { padding-left: 24px; border-left: 1px solid var(--line-p); }
.hz h3 { font: 700 28px/1.12 var(--f-serif); margin: 8px 0 14px; }
.hz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hz li b { display: block; font: 400 18px/1.25 var(--f-serif); }
.hz li span { font-size: 14px; color: var(--mut-p); }
.hz.prop { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(63,93,94,.06) 10px 11px); }
.doors { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.doors a { display: grid; gap: 8px; padding: 22px; border-radius: 14px; background: var(--ink); color: var(--paper); text-decoration: none; min-height: 170px; align-content: space-between; }
.doors a b { font: 700 22px/1.12 var(--f-serif); }
.doors a span { font-size: 14px; color: var(--mut-n); }
.doors a:hover { background: #2a241e; }
.support { margin-top: 44px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: 30px; border-radius: 16px; border: 1px solid var(--line-p); }
.support p { margin: 0; max-width: 56ch; }
.depth-note { font: 400 12px var(--f-mono); color: var(--mut-p); margin-top: 14px; }

.local-foot { background: #0c0a09; border-top: 1px solid var(--line-n); padding: 40px 0 0; font-size: 14px; color: var(--mut-n); }
.local-foot .wrap { display: flex; flex-wrap: wrap; gap: 20px 60px; }
.local-foot b { color: var(--paper); font-weight: 500; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .roof-head, .walk, .city { grid-template-columns: 1fr; }
  .doors { grid-template-columns: 1fr 1fr; }
  .horizon { grid-template-columns: 1fr; } .hz + .hz { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-p); }
  .curious { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .menu-btn { display: inline-block; }
  #nav { display: none; position: fixed; inset: 0; top: 0; background: rgba(17,15,13,.98); flex-direction: column; align-items: stretch; justify-content: center; padding: 90px 28px 40px; gap: 0; z-index: -1; }
  #nav.open { display: flex; }
  #nav a { font: 700 28px/1.2 var(--f-serif); padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--line-n); }
  #nav .cta { border: 0; margin: 18px 0 0; font: 600 16px var(--f-body); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .arrive { height: 340vh; }
  .facade { width: 300vw; max-height: 72vh; bottom: 9svh; }
  .arrive h1 { top: 17vh; }
  .mark small { display: none; }
  .drawing-note { bottom: auto; top: 31vh; left: 20px; right: 20px; text-align: center; }
  .frags-k { bottom: 132px; left: 20px; right: 20px; }
  .skip-arrival { right: 20px; }
  .frag { font-size: 11.5px; }
  .facts { grid-template-columns: 1fr; }
  .doors { grid-template-columns: 1fr; }
  .ev-card { flex-basis: 82vw; }
  .tl-grid { grid-template-columns: 96px repeat(var(--cols), 78vw); }
  .tl-scroll { scroll-padding-left: 96px; }
}

/* ---------- reduced motion / static: composed final states, no scroll-linking ---------- */
.static .arrive { height: auto; }
.static .arrive .stage { position: relative; height: auto; min-height: 0; display: grid; }
.static .arrive .sky, .static .arrive .facade, .static .frags { position: relative; }
.static .arrive .stage > * { grid-area: auto; }
.static .facade { left: 0; transform: none; width: 100%; max-height: none; margin-top: 30vh; }
.static .arrive h1 { top: 140px; }
.static .frag { opacity: .9; transform: none; position: static; }
.static .frags { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 24px 28px 0; inset: auto; }
.static .frags-k { position: static; opacity: 1; width: 100%; }
.static .inside { position: relative; opacity: 1; visibility: visible; }
.static .skip-arrival, .static .steps, .static .bloom, .static .dusk { display: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-height: 820px) and (min-width: 761px) {
  .cards { inset: 84px max(28px, 6vw) 84px; }
  .card h3 { font-size: clamp(34px, 4.2vw, 60px); }
}

/* ---------- ACT IV v2: vertical scroll timeline with era plates ---------- */
.history2 { position: relative; background: #120f0c; padding-bottom: 120px; }
.tl2-bg { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; z-index: 0; }
.plate { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.plate.on { opacity: 1; }
.plate::after { content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.plate svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,238,210,.13); stroke-width: 2; }
.plate-sepia { background: radial-gradient(80% 70% at 60% 35%, #7a5d40, #3a2a1c 60%, #1c140d); }
.plate-sepia2 { background: radial-gradient(70% 60% at 40% 40%, #6e4f3e, #34241c 60%, #18110c); }
.plate-sepia3 { background: radial-gradient(70% 60% at 55% 30%, #6a604a, #332d22 60%, #16130e); }
.plate-warm { background: radial-gradient(60% 55% at 60% 30%, #8a4e2c, #3a2014 60%, #160d08); }
.plate-warm2 { background: radial-gradient(60% 55% at 45% 45%, #7a5232, #33231a 60%, #15100c); }
.plate-now { background: radial-gradient(60% 55% at 55% 40%, #6d5436, #2b2119 60%, #120e0b); }
.plate-blue { background: radial-gradient(60% 55% at 55% 35%, #23415a, #12202c 60%, #0b1219); }
.plate-sepia svg, .plate-sepia2 svg, .plate-sepia3 svg { filter: sepia(1); }
.plate figcaption { position: absolute; right: 28px; bottom: 24px; max-width: 300px; font: 400 11.5px/1.5 var(--f-mono); color: rgba(242,235,223,.72); text-align: right; z-index: 2; }
.plate figcaption::before { content: "Archival photo placeholder"; display: block; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; color: var(--brass); margin-bottom: 4px; }
.plate figcaption b { display: block; font: 700 20px/1.12 var(--f-serif); color: var(--paper); margin-bottom: 4px; }
.tl2-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,15,12,.62), rgba(18,15,12,.2) 50%, rgba(18,15,12,.62)), linear-gradient(180deg, rgba(18,15,12,.5), transparent 25%, transparent 75%, rgba(18,15,12,.7)); }
.tl2-head { position: relative; z-index: 1; padding-top: 130px; padding-bottom: 30px; }
.tl2-head h2 { font: 400 clamp(40px, 5.6vw, 84px)/1 var(--f-disp); margin: 12px 0 16px; max-width: 16ch; letter-spacing: -.01em; }
.tl2-head .intro { max-width: 58ch; color: #e2d8c6; }
.lane { display: inline-block; font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border-radius: 3px; border: 1px solid currentColor; }
.lane-city { color: #8fc3bd; } .lane-building { color: #e59a7c; } .lane-org { color: var(--brass); }
.tl2-wrap { position: relative; z-index: 1; }
.tl2-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(242,235,223,.18); }
.tl2-fill { position: absolute; inset: 0; background: linear-gradient(180deg, #8a6a3a, var(--brass) 60%, #f3d49a); transform-origin: top; transform: scaleY(0); }
.tl2-head-dot { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #f6d7a0; box-shadow: 0 0 0 6px rgba(214,176,107,.22), 0 0 30px #f3c77a; }
.tl2 { list-style: none; margin: 0; padding: 30px 0 60px; position: relative; }
.tl2-era { position: relative; text-align: center; padding: 110px 0 40px; }
.tl2-era h2 { display: inline-grid; gap: 8px; margin: 0; padding: 14px 30px; font: 400 clamp(46px, 6.4vw, 92px)/1 var(--f-disp); background: radial-gradient(closest-side, rgba(18,15,12,.9), rgba(18,15,12,.6) 70%, transparent); }
.tl2-era h2 span { font: 500 11px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.tl2-knot { position: absolute; left: 50%; top: 72px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 2px solid rgba(242,235,223,.4); background: #120f0c; transition: border-color .5s, background .5s; }
.tl2-era.past .tl2-knot { border-color: var(--brass); background: var(--brass); }
.tl2-ev { position: relative; width: 50%; padding: 18px 56px 18px 0; }
.tl2-ev.r { margin-left: 50%; padding: 18px 0 18px 56px; }
.tl2-ev::before { content: ""; position: absolute; top: 50px; height: 1px; width: 44px; right: 8px; background: rgba(242,235,223,.25); transition: background .5s; }
.tl2-ev.r::before { left: 8px; right: auto; }
.tl2-dot { position: absolute; top: 44px; right: -6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(242,235,223,.45); background: #120f0c; transition: all .5s; }
.tl2-ev.r .tl2-dot { left: -6px; right: auto; }
.tl2-ev.past .tl2-dot { background: var(--brass); border-color: var(--brass); }
.tl2-ev.past::before { background: var(--brass); }
.tl2-card { max-width: 440px; background: rgba(24,20,16,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(242,235,223,.14); border-radius: 14px; padding: 20px 22px;
  transform: translateY(22px); transition: transform .9s var(--ease), border-color .6s, box-shadow .6s; }
.tl2-ev.l .tl2-card { margin-left: auto; }
.tl2-ev.past .tl2-card, .tl2-ev.near .tl2-card { transform: none; }
.tl2-ev.near .tl2-card { border-color: rgba(214,176,107,.55); box-shadow: 0 30px 60px -30px #000, 0 0 40px -18px rgba(243,199,122,.5); }
.tl2-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 10px; }
.tl2-meta .when { font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }
.tl2-meta .vf { font: 500 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #f0b9a6; }
.tl2-card .what { margin: 0 0 8px; font: 400 clamp(18px, 1.6vw, 21px)/1.4 var(--f-serif); color: var(--paper); }
.tl2-card .src { margin: 0; font: 400 11.5px/1.4 var(--f-mono); color: var(--mut-n); }
.tl2-ev.gap .tl2-card { background: rgba(18,15,12,.7); border-style: dashed; border-color: rgba(240,185,166,.5); }
.tl2-ev.gap .what { font-style: italic; color: #e9dccb; }
.tl2-ev.future .tl2-card { border-color: rgba(143,179,199,.6); background: rgba(14,24,32,.85); }
.history2 .unwritten { position: relative; z-index: 1; background: rgba(18,15,12,.85); }
@media (max-width: 760px) {
  .tl2-line { left: 18px; }
  .tl2-era { text-align: left; padding: 80px 0 24px 40px; }
  .tl2-era h2 { padding: 8px 0; background: none; text-shadow: 0 2px 20px #000; }
  .tl2-knot { left: 18px; top: 56px; }
  .tl2-ev, .tl2-ev.r { width: 100%; margin-left: 0; padding: 12px 0 12px 44px; }
  .tl2-ev::before, .tl2-ev.r::before { left: 22px; right: auto; width: 16px; top: 42px; }
  .tl2-dot, .tl2-ev.r .tl2-dot { left: 12px; right: auto; top: 36px; }
  .tl2-ev.l .tl2-card { margin-left: 0; }
  .plate figcaption { left: auto; right: 16px; top: 84px; bottom: auto; text-align: right; max-width: 60%; }
  .plate figcaption b, .plate figcaption .cap-t { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tl2-card { transform: none !important; transition: none; } .plate { transition: none; } }
.static .tl2-card { transform: none; }

/* ---------- ACT I v4: the campus draws itself, opens floor by floor, then the courtyard ---------- */
.arrive.v4 { height: 480vh; }
.v4 .scene { position: absolute; inset: 0; }
.v4 .scene-axon { background: radial-gradient(90% 70% at 50% 30%, #2a2540 0%, #1b1726 45%, #0f0c0b 100%); }
.v4 .axon { position: absolute; left: 50%; top: 57%; width: min(1340px, 98vw); height: min(84vh, 860px); transform: translate(-50%, -50%); overflow: visible; }
.v4 h1 { top: max(10vh, 92px); text-shadow: 0 2px 30px rgba(14,11,9,.7); }
.v4 h1 .kick { display: block; margin-bottom: 14px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: #ffd690; }
.v4 h1 .sub { color: #f3e6cc; }

/* line work: draws itself on landing, then the colour arrives */
.v4 .axon .ln { stroke: #f3d9a8; stroke-width: .42; stroke-linejoin: round; fill-opacity: 0; transition: fill-opacity 1.1s ease, stroke-opacity 1.2s ease; }
.v4 .axon:not(.drawing):not(.drawn) .ln { stroke-opacity: 0; }
.v4 .axon.drawing .ln { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); animation: lnDraw 1.6s cubic-bezier(.55,.1,.3,1) var(--d) forwards; }
.v4 .axon.drawn .ln { stroke-dasharray: none; animation: none; stroke-dashoffset: 0; stroke-opacity: .6; }
.v4 .axon.filled .ln { fill-opacity: 1; }
@keyframes lnDraw { to { stroke-dashoffset: 0; } }
.v4 .bx .f-front { fill: #a64e33; } .v4 .bx .f-side { fill: #7c3624; } .v4 .bx .f-top { fill: #3c2c27; }
.v4 .lvl .f-top { fill: #6b4a3a; } .v4 .lvl-3 .f-top { fill: #3c2c27; }
.v4 .lvl-b .f-front, .v4 .lvl-b .f-side { fill: #3a2620; }
.v4 .axon.drawn .lvl-b .ln { stroke-dasharray: 1.4 1; }
.v4 .bx-cafe .f-front { fill: #b0603f; }
.v4 .bx-stage .f-front { fill: #93432f; } .v4 .bx-stage .f-top { fill: #312a2d; }
.v4 .wins polygon { fill: #ffcf7a; opacity: 0; transition: opacity .5s; }
.v4 .wins polygon.on { opacity: .96; }
.v4 .wins { filter: drop-shadow(0 0 1.2px rgba(255,190,90,.9)); }
.v4 .bx-stage .wins polygon { fill: #ff86bf; } .v4 .bx-stage .wins { filter: drop-shadow(0 0 1.4px rgba(255,110,180,.9)); }
.v4 .bx-cafe .wins polygon { fill: #ffe1a6; }
.v4 .door { fill: #2b2320; stroke: #f3d9a8; stroke-width: .3; }
.v4 .door-gap { fill: #ffe2a8; opacity: 0; filter: drop-shadow(0 0 2px #ffcf7a); }

/* the canal, Race Street and the courtyard */
.v4 .water { fill: url(#water); }
.v4 .canal .bank { stroke: #9cc8e2; stroke-opacity: .7; }
.v4 .ripples path { fill: none; stroke: #8fc3e0; stroke-width: .3; stroke-linecap: round; stroke-dasharray: 3 2.2; opacity: 0; transition: opacity 1.2s; animation: ripple 7s linear infinite; }
.v4 .axon.filled .ripples path { opacity: .55; }
.v4 .ripples path:nth-child(2n) { animation-duration: 9s; animation-direction: reverse; }
@keyframes ripple { to { stroke-dashoffset: -26; } }
.v4 .reflect .rf { fill: #ffcf7a; opacity: 0; transition: opacity 1.4s; }
.v4 .reflect .rf-s { fill: #ff86bf; }
.v4 .axon.lit .reflect .rf { opacity: .3; animation: shimmer 4.5s ease-in-out infinite alternate; }
.v4 .reflect .rf:nth-child(3n) { animation-delay: -1.5s; } .v4 .reflect .rf:nth-child(3n+1) { animation-delay: -3s; }
@keyframes shimmer { from { opacity: .18; } to { opacity: .38; } }
.v4 .street { fill: #221c19; }
.v4 .curb { stroke: rgba(243,217,168,.4); }
.v4 .court { fill: #4a372a; }
.v4 .court-glow { fill: url(#courtGlow); opacity: 0; }
.v4 .chairs circle { fill: #f2c94c; } .v4 .chairs { opacity: 0; }
.v4 .flow { fill: none; stroke: #ffe2a8; stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* labels */
.v4 .axon-labels { position: absolute; inset: 0; pointer-events: none; }
.v4 .al { position: absolute; left: 0; top: 0; display: grid; gap: 2px; padding: 8px 12px 8px 22px; margin: -16px 0 0 -6px; border-radius: 10px; background: rgba(17,14,11,.86); border: 1px solid rgba(214,176,107,.4); opacity: 0; visibility: hidden; white-space: nowrap; }
.v4 .al::before { content: ""; position: absolute; left: 6px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 10px var(--brass); }
.v4 .al b { font: 400 17px/1.15 var(--f-serif); color: var(--paper); }
.v4 .al i { font: 400 12px/1.3 var(--f-body); font-style: normal; color: #e2d6c0; }
.v4 .al-floor { padding: 7px 14px; margin: -16px 0 0; text-align: right; }
.v4 .al-floor::before { left: auto; right: -19px; top: 50%; width: 18px; height: 1px; border-radius: 0; box-shadow: none; }
.v4 .al-floor b { font-size: 12px; font-family: var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #ffd690; }
.v4 .al-floor i { font: 400 16px/1.2 var(--f-serif); color: var(--paper); }
.v4 .al.main { border-color: var(--brass); } .v4 .al.main b { font-size: 20px; color: #ffe2a8; }
.v4 .al-canal { border-color: rgba(156,200,226,.55); } .v4 .al-canal::before { background: #9cc8e2; box-shadow: 0 0 10px #9cc8e2; }
.v4 .al-street { background: none; border: 0; } .v4 .al-street::before { display: none; } .v4 .al-street b { font: 500 11px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: #cbbfa8; }
.v4 .axon-note { position: absolute; left: 28px; bottom: 26px; max-width: 70ch; margin: 0; font: 400 12px/1.5 var(--f-mono); color: #b9ad97; }
.v4 .axon-legend .lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); list-style: none; margin: 0; padding: 0; }
.v4 .scene-court { opacity: 0; background: linear-gradient(90deg, rgba(14,11,9,.88) 0%, rgba(14,11,9,.6) 42%, rgba(14,11,9,.05) 100%), url("media/courtyard.jpg") center/cover; }
.v4 .inside { background: none; }
@media (prefers-reduced-motion: reduce) { .v4 .ripples path, .v4 .reflect .rf { animation: none; } }
@media (max-width: 640px) {
  .arrive.v4 { height: 420vh; }
  .v4 .axon { width: 112vw; height: 60vh; top: 58%; }
  .v4 h1 { top: 12vh; }
  .v4 .axon-note { left: 20px; right: 20px; bottom: 58px; font-size: 11px; }
  .v4 .scene-court { background-position: 40% center; }
  .v4 .al, .v4 .al-floor { padding: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); border: 0; text-align: center; }
  .v4 .al-canal { background: #9cc8e2; }
  .v4 .al::before, .v4 .al b, .v4 .al i { display: none; }
  .v4 .al::after { content: attr(data-n); font: 600 12px var(--f-mono); color: var(--night); }
  .v4 .al-street { display: none; }
  .v4 .axon-legend .lg { width: auto; height: auto; clip: auto; overflow: visible; left: 20px; right: 20px; top: 72px; display: grid; gap: 3px; font-size: 13px; line-height: 1.35; color: #e2d6c0; background: rgba(17,14,11,.82); padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(214,176,107,.3); }
  .v4 .axon-legend .lg span { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--brass); color: var(--night); font: 600 10.5px var(--f-mono); }
  .v4 .axon-legend .lg b { color: var(--paper); font-weight: 500; }
  .v4 .axon-legend .lg-h { font: 500 10.5px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #ffd690; margin-bottom: 4px; }
}
/* static (reduced motion): the opened building, then the courtyard */
.static .arrive.v4 .stage { display: flex; flex-direction: column; }
.static .v4 h1 { order: -1; position: relative; top: auto; padding: 120px 20px 0; }
.static .v4 .scene { position: relative; inset: auto; height: 92vh; opacity: 1 !important; }
.static .v4 .scene-court { display: none; }
.static .v4 .inside { position: relative; background: linear-gradient(90deg, rgba(14,11,9,.9), rgba(14,11,9,.4)), url("media/courtyard.jpg") center/cover; min-height: 90vh; }
@media (max-width: 640px) { .static .v4 .scene-axon { height: 120vh; } .static .v4 .axon-legend .lg-places { top: auto; bottom: 90px; } }
@media (min-width: 1101px) { .v4 .axon-note { max-width: min(70ch, calc(100vw - 640px)); } }

/* ---------- ACT I v4, first view: the street front from across the canal ---------- */
.arrive.v4 { height: 640vh; }
.v4 .scene-axon { opacity: 0; }
.v4 .scene-front { background: #0f1330; overflow: hidden; }
.v4 .front { position: absolute; inset: 0; width: 100%; height: 100%; }
.v4 h1 .big { font-size: clamp(40px, 6.2vw, 96px); }
.front .sky { fill: url(#dusk); }
.front .skyline { fill: #2a2443; stroke: rgba(243,217,168,.35); stroke-width: 1; }
/* pen lines: drawn in left to right, then settle back under the colour */
.front .ln { stroke: #f6dcaa; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; fill-opacity: 0; transition: fill-opacity 1.2s ease, stroke-opacity 1.4s ease; }
.front .ln-fine, .front .ln-joint, .front .ln-slat { stroke-width: .7; }
.front:not(.drawing):not(.drawn) .ln { stroke-opacity: 0; }
.front.drawing .ln { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); animation: lnDraw 1.5s cubic-bezier(.55,.1,.3,1) var(--d) forwards; }
.front.drawn .ln { stroke-dasharray: none; animation: none; stroke-dashoffset: 0; stroke-opacity: .5; }
.front.drawn .ln-fine, .front.drawn .ln-joint, .front.drawn .ln-slat { stroke-opacity: .28; }
.front.filled .ln { fill-opacity: 1; }
.front path.ln:not(.brick):not(.stone):not(.canopy):not(.canopy-cu):not(.ramp):not(.skyline) { fill: none; }
.front .brick { fill: #a54a2f; } .front .brick.side { fill: #7c3523; } .front .brick.cafe { fill: #9c4c33; }
.front .brick.ss { fill: #96432d; }
.front .b92, .front .ss { fill: #a54a2f; }
.front .pilaster { fill: #8f3e27; } .front .panel { fill: #8c3b26; }
.front .stone { fill: #e2d6c1; } .front .coping { fill: #2a2422; } .front .base { fill: #cfc5b3; }
.front .dentil { fill: #e8dcc6; opacity: 0; transition: opacity 1s 1.3s; } .front.filled .dentil { opacity: .9; }
.front .canopy { fill: #1f1b1d; } .front .canopy-cu { fill: #5d9483; } .front .rod { stroke: #3c4a45; }
.front .door-frame { fill: #ec8a4c; } .front .stage-door, .front .rollup { fill: #2a2220; } .front .case { fill: #1c1716; }
.front .ramp { fill: #b9ad9a; } .front .rail { stroke: #1d1a1c !important; stroke-opacity: .9 !important; }
.front .paving { fill: url(#paveG); }
.front .bench { stroke: #1d1a1c; stroke-width: 3; }
.front .road { fill: #241e1c; } .front .walk { fill: #514640; } .front .bank { fill: #4a4038; }
.front .lane { stroke-dasharray: 18 14 !important; stroke-opacity: .35 !important; }
.front .curb { stroke-opacity: .3 !important; }
.front .water { fill: url(#canalW); }
.front .sg { font: 600 13px var(--f-body); letter-spacing: .18em; }
.front .sg.sm { font-size: 8.6px; letter-spacing: .14em; } .front .sg.tag { font-size: 11px; letter-spacing: 0; } .front .sg.sm2 { font-size: 8px; }
.front .sg.tiny { font-size: 4.4px; letter-spacing: .06em; }
.front .signs, .front .star-sign, .front .bench-y, .front .chair, .front .table, .front .leaf, .front .planter, .front .poster, .front .door-sign, .front .front text { opacity: 0; transition: opacity 1s; }
.front.filled .signs, .front.filled .star-sign, .front.filled .bench-y, .front.filled .chair, .front.filled .table, .front.filled .leaf, .front.filled .planter, .front.filled .door-sign { opacity: 1; }
.front .bench-y { fill: none; stroke: #f2c94c; stroke-width: 2.4; }
.front .chair { fill: none; stroke: #f2c94c; stroke-width: 1.3; } .front .table { fill: #f2c94c; }
.front .leaf { fill: #5c9a4f; } .front .planter { fill: #6b4a33; }
.front .door-sign { fill: #3a2c2a; }
/* light: windows, posters, doors, sconces — the courtyard comes on last */
.front .pane { fill: #ffcf7a; opacity: 0; transition: opacity .6s; }
.front .pane.on { opacity: .95; } .front .pane.dark.on { fill: #33405e; opacity: .9; }
.front .pane.low.on { fill: #ffd796; opacity: .8; }
.front .pane.stage-win { fill: url(#stageG); }
.front .pane.side-win { fill: #ffcf7a; } .front.lit .pane.side-win { opacity: .8; }
.front.lit .pane.stage-win, .front.lit .pane.cafe-win { opacity: .95; }
.front .pane.cafe-win { fill: #ffe1a6; }
.front .poster { fill: #f5d562; } .front.lit .poster { opacity: .95; filter: drop-shadow(0 0 6px rgba(255,214,110,.7)); }
.front .door-seam { fill: #ffcf7a; opacity: 0; transition: opacity 1s; } .front.lit .door-seam { opacity: .9; }
.front .door-light { fill: #ffe2a8; opacity: 0; transition: opacity 1.4s; } .front.beckon .door-light { opacity: 1; filter: drop-shadow(0 0 6px #ffcf7a); }
.front .spill { fill: url(#spillG); opacity: 0; transition: opacity 2s; } .front.beckon .spill { opacity: 1; }
.front .sconce { fill: #fff2c8; opacity: 0; transition: opacity 1s; } .front .sconce-glow { fill: url(#lampG); opacity: 0; transition: opacity 1.6s; }
.front.lit .sconce, .front.lit .sconce-glow { opacity: 1; }
.front .reflection { opacity: .42; }
.front .ripples path { fill: none; stroke: #9cc8e2; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 10 8; opacity: 0; transition: opacity 1.4s; animation: ripple 8s linear infinite; }
.front.filled .ripples path { opacity: .4; }
.front .ripples path:nth-child(2n) { animation-duration: 11s; animation-direction: reverse; }
/* the eight details */
.fd-card { position: absolute; left: 0; top: 0; max-width: 300px; padding: 12px 16px 14px; border-radius: 12px; background: rgba(17,14,11,.9); border: 1px solid rgba(214,176,107,.45); box-shadow: 0 12px 40px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; pointer-events: none; }
.fd-card.on { opacity: 1; visibility: visible; }
.fd-card .n { display: block; font: 500 10.5px var(--f-mono); letter-spacing: .16em; color: #ffd690; margin-bottom: 4px; }
.fd-card b { display: block; font: 400 21px/1.15 var(--f-serif); color: var(--paper); }
.fd-card i { display: block; margin-top: 4px; font: 400 13.5px/1.4 var(--f-body); font-style: normal; color: #e2d6c0; }
@media (prefers-reduced-motion: reduce) { .front .ripples path { animation: none; } }
@media (max-width: 640px) {
  .arrive.v4 { height: 580vh; }
  .fd-card { left: 16px; right: 16px; top: auto; bottom: 84px; max-width: none; transform: none !important; }   /* clear of the step rail */
}
/* static: the street front as a still, with its details listed */
.static .v4 .scene-front { height: auto !important; } .static .v4 .front { position: relative; display: block; height: 92vh; }
.static .v4 .scene-front { overflow: visible; }
.front .win-frame, .front .case, .front .ln-sill { fill: none !important; }
.front .win-frame { stroke: #2a1d17; stroke-width: 1.6; } .front.drawn .win-frame { stroke-opacity: .85; }
.front .door-frame { fill: none !important; stroke: #ec8a4c !important; stroke-width: 3; stroke-opacity: 1 !important; }
.front .cafe-sign { fill: #2b3c3a; }
.front .stage-door { fill: #241c1b; }
.front .pane { fill: url(#paneG); } .front .pane.low.on { fill: url(#paneG); }
.front .ln-mull, .front .ln-fine { transition: stroke 1.2s, stroke-opacity 1.2s; }
.front.drawn .lines .ln-mull, .front.drawn .lines .ln-fine { stroke: #5a3420; stroke-opacity: .75; }
.front .rfp { fill: #ffcf7a; opacity: 0; transition: opacity 1.6s; } .front.lit .rfp { opacity: .5; }
/* the rest of Race Street: present, quiet, out of focus */
.front .nbr { opacity: 0; transition: opacity 2.4s 1s; }
.front.filled .nbr { opacity: .42; }
.front .nb-wall { fill: #4a3240; } .front .nb-cap { fill: #2b2233; }
.front .nb-win { fill: #2c2a44; } .front .nb-win.on { fill: #b88a5c; }
.front .nb-shop { fill: #3c5a58; }
/* the grassy bank down to the canal */
.front .grass { fill: url(#grassG); opacity: 0; transition: opacity 1.4s 1.2s; } .front.filled .grass { opacity: 1; }
.front .tufts { fill: none; stroke: #7fae5a; stroke-width: 1; stroke-linecap: round; opacity: 0; transition: opacity 1.4s 1.6s; } .front.filled .tufts { opacity: .7; }
/* water: the reflection wavers; small glints drift and fade */
.front .water { fill: url(#canalW); }
.front .rfp { fill: #ffc874; }
.front .glints path { fill: none; stroke: #c4e2f4; stroke-width: .9; stroke-linecap: round; opacity: 0; transform-box: fill-box; animation: glint 6.5s ease-in-out var(--dl) infinite; }
.front:not(.filled) .glints { visibility: hidden; }
@keyframes glint { 0% { opacity: 0; transform: translateX(calc(var(--dx) * -1)); } 45% { opacity: .55; } 100% { opacity: 0; transform: translateX(var(--dx)); } }
/* the lights: slow, each flickers before it holds */
.front .pane { --o: .95; transition: none; }
.front .pane.low { --o: .82; } .front .pane.dark { --o: .9; }
.front .pane.on { opacity: var(--o); animation: flickOn 2.2s linear both; }
.front .pane.dark.on { animation: fadeOn 1.6s ease both; }
.front.instant .pane.on { animation: none; }
@keyframes flickOn { 0% { opacity: 0; } 5% { opacity: calc(var(--o) * .55); } 9% { opacity: .04; } 17% { opacity: calc(var(--o) * .75); } 22% { opacity: .15; } 30% { opacity: .1; } 42% { opacity: calc(var(--o) * .9); } 48% { opacity: calc(var(--o) * .5); } 62%, 100% { opacity: var(--o); } }
@keyframes fadeOn { from { opacity: 0; } to { opacity: var(--o); } }
.front .sconce, .front .sconce-glow, .front .poster, .front .door-seam { transition-duration: 2.4s; }
.front.lit .sconce, .front.lit .sconce-glow { animation: flickOn 2.6s linear both; --o: 1; }
@media (prefers-reduced-motion: reduce) { .front .glints path { animation: none; opacity: .35; } .front .pane.on, .front.lit .sconce, .front.lit .sconce-glow { animation: none; } }
.front.lit .rfp { opacity: .7; }
/* the courtyard, closer to the real thing */
.front .ln-pave { stroke: #6a4a33 !important; stroke-width: .6; stroke-opacity: .5 !important; }
.front .door-white { fill: none !important; stroke: #f4efe6 !important; stroke-width: 1.4; stroke-opacity: 1 !important; }
.front .cafe-sign { fill: #3e8f86; stroke: #f4efe6; stroke-width: .8; }
.front .conduit { stroke: #b9b4ac !important; stroke-width: 1.4; stroke-opacity: .8 !important; }
.front .planter-top { fill: #3a2a1f; } .front polygon.planter { fill: #5a3b26; }
.front .concrete { fill: #a59a88; } .front .concrete-top { fill: #c2b7a3; }
.front .portico-glass { fill: #ffe2a8; } .front .portico-glass.side { fill: #f6cf8e; }
.front .glass-frame { fill: none !important; stroke: #2a2422 !important; stroke-width: 1.6; stroke-opacity: 1 !important; }
.front .glass-mull { stroke: #2a2422 !important; stroke-width: 1; stroke-opacity: .9 !important; }
.front .rail { stroke: #161314 !important; stroke-width: 1.2; stroke-opacity: .95 !important; fill: none !important; }
.front .bench { stroke: #161314 !important; stroke-width: 3.4; stroke-opacity: 1 !important; }
.front .bench-leg { stroke: #161314 !important; stroke-width: 2; stroke-opacity: 1 !important; }
.front .post { stroke: #161314 !important; stroke-width: 2.6; stroke-opacity: 1 !important; }
.front .canopy { fill: #1f1b1d; } .front .canopy-under { fill: #2c2627; }
.front .barrel { fill: #6b4a33; } .front .white-pot { fill: #ece6dc; } .front .teal-pot { fill: #3e8f86; }
.front .barrel, .front .white-pot, .front .teal-pot, .front .planter-top { opacity: 0; transition: opacity 1s; }
.front.filled .barrel, .front.filled .white-pot, .front.filled .teal-pot, .front.filled .planter-top { opacity: 1; }
/* the street-level front door */
.front .door-surround { fill: #ec8a4c; }
.front .door-leaf { fill: #221b1a; }
.front .door-bar { fill: none; stroke: #b9b2a8; stroke-width: 1.2; stroke-linecap: round; }
.front .plaque { fill: #f1ece2; } .front .plaque-text { fill: none; stroke: #8a8178; stroke-width: .7; }
.front .rod { fill: none; stroke: #4c5d57 !important; stroke-width: 1.2; stroke-opacity: 1 !important; }
.front .rod-anchor { fill: #4c5d57; }
.front .canopy-cu { fill: #5d9483; } .front .canopy-lip { fill: #7fb3a1; } .front .canopy-band { stroke: #3f6c5e; stroke-width: 1.4; }
.front .canopy-ribs { fill: none; stroke: #4a7c6d; stroke-width: .9; }
.front .canopy-soffit { fill: #ffe7b8; opacity: 0; transition: opacity 1.4s; } .front.lit .canopy-soffit { opacity: .85; }
.front .downlight { fill: #fff3cf; opacity: 0; transition: opacity 1s; } .front.lit .downlight { opacity: 1; }
.front .bench-slats { fill: none; stroke: #e9a93a; stroke-width: 2.2; opacity: 0; transition: opacity 1s; } .front.filled .bench-slats { opacity: 1; }
.front .door-spill { fill: url(#spillG); opacity: 0; transition: opacity 2s; } .front.lit .door-spill { opacity: .9; }
.front .door-surround, .front .door-leaf, .front .canopy-lip, .front .canopy-ribs, .front .canopy-band, .front .rod, .front .rod-anchor, .front .plaque, .front .plaque-text, .front .door-bar { opacity: 0; transition: opacity 1.1s; }
.front.filled .door-surround, .front.filled .door-leaf, .front.filled .canopy-lip, .front.filled .canopy-ribs, .front.filled .canopy-band, .front.filled .rod, .front.filled .rod-anchor, .front.filled .plaque, .front.filled .plaque-text, .front.filled .door-bar { opacity: 1; }
/* the mural on the Soundstage's roll-up door */
.front .mural { opacity: 0; transition: opacity 1.4s; } .front.filled .mural { opacity: 1; }
.front .mu-back { fill: #0f1819; }
.front .mu-floor { fill: #e4bf5e; }
.front .mu-curtain { fill: #1f5b55; } .front .mu-folds { fill: none; stroke: #133c38; stroke-width: 1.1; }
.front .mu-valance { fill: #276b63; stroke: #133c38; stroke-width: .6; }
.front .mu-beam { fill: #ffe2a0; opacity: .12; transition: opacity 2.4s; } .front.lit .mu-beam { opacity: .42; }
.front .mu-lamp { fill: #fff2c8; }
.front .mu-cable { stroke: #b48a3a; stroke-width: .8; } .front .mu-mic { fill: #c9a24a; }
.front .rollup + .mural ~ .ln-slat, .front .ln-slat { stroke-opacity: .16 !important; }
.front .ln-slat { stroke: #0b1112 !important; stroke-opacity: .45 !important; }
.front .dll-logo { opacity: 0; transition: opacity 1.4s .4s; } .front.filled .dll-logo { opacity: 1; }
.front .dll-dots { isolation: isolate; } .front .dll-dots circle { mix-blend-mode: multiply; opacity: .95; }
.front .dll-ground { fill: #1c1a1f; opacity: 0; transition: opacity 1.4s .3s; } .front.filled .dll-ground { opacity: .96; }
/* unlit glass, before the lights come on */
.front .glass { fill: #2b3858; opacity: 0; transition: opacity 1.2s; } .front.filled .glass { opacity: .95; }
.front .star-sign .bracket { fill: none; stroke: #5a3a2a; stroke-width: .9; }
.front .pilaster-side { fill: #6c2e1f; }
.front.drawn .court .ln-mull { stroke: #2a1d17; stroke-opacity: .85; stroke-width: 1.1; }

/* ---------- the Soundstage, opened ---------- */
.arrive.v4 { height: 760vh; }
@media (max-width: 640px) { .arrive.v4 { height: 680vh; } }
.front .b92-all, .front .court, .front .nbr, .front .reflection { transition: opacity .9s, filter .9s; }
.front.focus-ss .b92-all, .front.focus-ss .court { opacity: .38; filter: saturate(.6); }
.front.focus-ss .nbr { opacity: .18; }
.ss-in { visibility: hidden; }
.ss-in polyline { fill: none; }
.ss-floor { fill: #2a2127; }
.ss-floor-glow { fill: #4a2f5a; opacity: .7; }
.ss-curtain { fill: #1d2758; } .ss-curtain.side { fill: #18214a; }
.ss-fold { stroke: #10173a; stroke-width: 1.2; }
.ss-gobo { fill: #46d6c4; opacity: 0; transition: opacity 1.2s .6s; } .ss-in.on .ss-gobo { opacity: .55; }
.ss-stage-front { fill: #1a1520; } .ss-stage-top { fill: #3c3466; }
.ss-in.on .ss-stage-top { fill: #5a4f8f; transition: fill 1s; }
.ss-perf { fill: #e8e2f2; } .ss-head { fill: #2a2026; } .ss-piano { fill: #a0643a; }
.ss-guitar { stroke: #e0a24a; stroke-width: 2.6; stroke-linecap: round; }
.ss-mic { stroke: #8a8494; stroke-width: .8; }
.ss-drum { fill: #c9c2d6; } .ss-cymbal { fill: #e6c35a; }
.ss-truss { stroke: #0e0c10; stroke-width: 1.6; } .ss-truss.web { stroke-width: .7; }
.ss-can { fill: #0e0c10; }
.ss-beam { opacity: 0; transition: opacity 1s; mix-blend-mode: screen; }
.ss-beam.blue { fill: #5b7bff; } .ss-beam.magenta { fill: #ff5ad0; } .ss-beam.amber { fill: #ffc46a; } .ss-beam.teal { fill: #49e0c8; }
.ss-in.on .ss-beam { opacity: .34; animation: beam 3.2s ease-in-out calc(var(--i) * -.45s) infinite alternate; }
@keyframes beam { from { opacity: .18; } to { opacity: .46; } }
.ss-disco { fill: #e8eef6; stroke: #fff; stroke-width: .6; }
.ss-body { fill: #2b2230; } .ss-body.t2 { fill: #3a2b2e; } .ss-body.t3 { fill: #4a3a4a; } .ss-body.t4 { fill: #5a3434; } .ss-body.t5 { fill: #2d3346; }
.ss-hd { fill: #3a2a2a; } .ss-hd.t2 { fill: #6a4a3a; } .ss-hd.t3 { fill: #1e1a1e; } .ss-hd.t4 { fill: #8a6a52; } .ss-hd.t5 { fill: #c2a58a; }
.ss-in.on .ss-hd { stroke: rgba(255,160,220,.35); stroke-width: .7; }
.ss-phone { fill: #e8f2ff; opacity: 0; transition: opacity .8s 1s; } .ss-in.on .ss-phone { opacity: 1; }
.ss-table { fill: #e9e2d6; } .ss-candle { fill: #ffd27a; filter: drop-shadow(0 0 2px #ffb84a); }
.ss-string { stroke: #2a2228; stroke-width: .6; }
.ss-lantern { fill: #c9b9a8; transition: fill 1.2s, filter 1.2s; }
.ss-in.on .ss-lantern.coral { fill: #ff7a62; } .ss-in.on .ss-lantern.pink { fill: #ff9ed8; } .ss-in.on .ss-lantern.cream { fill: #fff0c4; }
.ss-in.on .ss-lantern.magenta { fill: #e87adf; } .ss-in.on .ss-lantern.amber { fill: #ffbe6e; }
.ss-in.on .ss-lantern { filter: drop-shadow(0 0 5px rgba(255,190,150,.9)); }
.ss-rib { stroke: rgba(120,60,50,.35); stroke-width: .5; }
.ss-joist { stroke: #0e0c10; stroke-width: 2.4; }
.ss-rim { fill: #7c3523; }
.ss-roof-top { fill: #2c2729; } .ss-roof-edge { fill: #1c1a1c; } .ss-roof-seam { stroke: #3a3437; stroke-width: 1; } .ss-roof-unit { fill: #4a4548; }
.ss-roof { transition: none; }
/* the caption while the room is open */
.ss-card { left: 6vw; top: 34%; transform: none; max-width: 330px; }
@media (max-width: 640px) { .ss-card { left: 16px; right: 16px; top: auto; bottom: 64px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .ss-in.on .ss-beam { animation: none; } }
.static .v4 .ss-card { position: relative; left: auto; top: auto; margin: 0 28px 24px; opacity: 1; visibility: visible; max-width: 60ch; }
.static .v4 .ss-card { transition: none; }
/* the Soundstage at eye level (v2) */
.ss-floor { fill: #1c1519; }
.ss-curtain { fill: #1b2560; } .ss-curtain.side { fill: #141c4a; }
.ss-in.on .ss-curtain.back { fill: #22307a; transition: fill 1.2s; }
.ss-gobo { fill: #4fe0cc; }
.ss-stage-front { fill: #120e14; } .ss-stage-top { fill: #4b3f86; }
.ss-perf { fill: #f1ecf8; } .ss-head { fill: #2a1f24; }
.ss-in.on .ss-perf { filter: drop-shadow(0 0 3px rgba(190,170,255,.8)); }
.ss-body { fill: #231a22; } .ss-body.t2 { fill: #2c2028; } .ss-body.t3 { fill: #3a2630; } .ss-body.t4 { fill: #1d1b26; } .ss-body.t5 { fill: #33262c; }
.ss-hd { fill: #2d2024; } .ss-hd.t2 { fill: #4a3328; } .ss-hd.t3 { fill: #1a1416; } .ss-hd.t4 { fill: #6a4d3c; } .ss-hd.t5 { fill: #b49a86; }
.ss-in.on .ss-body, .ss-in.on .ss-hd { stroke: rgba(255,150,210,.4); stroke-width: .8; }
.ss-cloth { fill: #3a2c34; } .ss-table { fill: #cfc4b6; }
.ss-cut { fill: #8a3b26; stroke: #5a2618; stroke-width: .8; }
.ss-joist { stroke: #0b090c; stroke-width: 2.6; }
.ss-lid { transition: none; }
@media (min-width: 641px) { .ss-card { top: auto; bottom: 7vh; left: 3vw; max-width: 300px; } }
/* the Soundstage (v3): teal velvet, a peaked ceiling, three roof trusses, three crowd treatments */
.ss-curtain { fill: #0f4f4b; } .ss-curtain.side { fill: #0b3d3a; } .ss-curtain.side.r { fill: #0d4744; }
.ss-in.on .ss-curtain.back { fill: #136059; }
.ss-fold { stroke: #062b29; stroke-width: 1.1; }
.ss-gobo { fill: #a8f3e6; }
.ss-ceiling { fill: #22182a; } .ss-ceiling.r { fill: #2a1d33; }
.ss-in.on .ss-ceiling { fill: #2d1d3e; } .ss-in.on .ss-ceiling.r { fill: #3a2350; }
.ss-plank { stroke: #3d2c48; stroke-width: .7; } .ss-ridge { stroke: #4a3557; stroke-width: 1.2; }
.ss-chord { fill: none; stroke: #0a080b; stroke-width: 2.6; stroke-linejoin: round; }
.ss-web { stroke: #0a080b; stroke-width: 1.2; }
.ss-perf { fill: #f1ecf8; } .ss-perf-head { fill: #3a2a2a; }
.ss-in.on .ss-perf { filter: drop-shadow(0 0 3px rgba(190,170,255,.8)); }
/* b — illustrated: hair and clothes in colour, softened by the room's light */
.crowd-b .ss-people { filter: saturate(.85) brightness(.82); }
.crowd-b .c1 { fill: #d9a441; } .crowd-b .c2 { fill: #2f7f7a; } .crowd-b .c3 { fill: #e07a5f; } .crowd-b .c4 { fill: #46628a; }
.crowd-b .c5 { fill: #2a2530; } .crowd-b .c6 { fill: #e9dcc4; } .crowd-b .c7 { fill: #7a4a6e; } .crowd-b .c8 { fill: #6f7a45; }
.crowd-b .h1 { fill: #2a1d18; } .crowd-b .h2 { fill: #5a3a24; } .crowd-b .h3 { fill: #c9a46a; } .crowd-b .h4 { fill: #8f8f96; } .crowd-b .h5 { fill: #151416; }
.ss-in.on.crowd-b .ss-pb, .ss-in.on.crowd-b .ss-ph { stroke: rgba(255,170,220,.35); stroke-width: .7; }
.ss-card { pointer-events: auto; }
/* people v2: oval heads on broad shoulders, legs to the floor, chairs for the seated */
.ss-pl { fill: #2a3346; } .ss-pl.l2 { fill: #1d1b20; } .ss-pl.l3 { fill: #4a4038; }
.ss-chair { fill: #2a1f1a; }
.crowd-b .c1 { fill: #c4553a; } .crowd-b .c2 { fill: #d9a441; } .crowd-b .c3 { fill: #6f8f6a; } .crowd-b .c4 { fill: #5f86a8; }
.crowd-b .c5 { fill: #8c847a; } .crowd-b .c6 { fill: #e6dccb; } .crowd-b .c7 { fill: #6d4a62; } .crowd-b .c8 { fill: #2c2a30; }
.crowd-b .h1 { fill: #2a1d18; } .crowd-b .h2 { fill: #5a3a24; } .crowd-b .h3 { fill: #b5602e; } .crowd-b .h4 { fill: #c9a46a; } .crowd-b .h5 { fill: #a3a3a8; } .crowd-b .h6 { fill: #151416; }
.crowd-b .k1 { fill: #e2bd98; } .crowd-b .k2 { fill: #c08c68; } .crowd-b .k3 { fill: #8a5a3c; } .crowd-b .k4 { fill: #5a3826; }
.crowd-b .ss-pb, .crowd-b .ss-pl { stroke: rgba(20,10,20,.25); stroke-width: .7; }

/* ---------- the café and the bistro kitchen ---------- */
.arrive.v4 { height: 1100vh; }
@media (max-width: 640px) { .arrive.v4 { height: 980vh; } }
.front .ss-lid, .front .ss-street { transition: opacity .9s, filter .9s; }
.front.focus-cafe .b92-all, .front.focus-cafe .ss-lid, .front.focus-cafe .ss-street { opacity: .4; filter: saturate(.6); }
.front.focus-cafe .nbr { opacity: .16; }
.front polyline { fill: none; }
/* café */
.cf-floor { fill: #4a4a4e; } .cf-grout { stroke: #3a3a3e; stroke-width: .5; }
.cf-cream { fill: #efe2c4; } .cf-mint { fill: #9fe0cf; }
.cf-window { fill: #cfe3ee; } .cf-mullion { stroke: #2a2626; stroke-width: 1; }
.cf-ac { fill: #f6f4ee; }
.cf-brick { fill: #a5543a; } .cf-brick.r { fill: #9a4a32; } .cf-course { stroke: rgba(60,20,10,.25); stroke-width: .4; }
.cf-black { fill: #1d1a1c; }
.cf-cab { fill: #2a2628; } .cf-cab-top { fill: #8a8a8e; } .cf-machine { fill: #3a3536; }
.cf-rack { fill: rgba(200,200,205,.25); stroke: #8c8c90; stroke-width: .4; } .cf-rack-line { stroke: #8c8c90; stroke-width: .4; } .cf-bagel { fill: #d9a75e; }
.cf-sconce { fill: #fff2c8; } .cf-sconce-glow { fill: url(#lampG); }
.cf-deck { fill: #b9773c; }
.cf-beam { fill: #1d1a1c; } .cf-deck-edge { fill: #c4823f; }
.cf-panel { fill: rgba(205,210,214,.55); stroke: rgba(120,125,130,.6); stroke-width: .4; }
.cf-pipe { stroke: #4a4442; stroke-width: 1.4; }
.cf-chair { stroke: #c9cdd2; stroke-width: 1; }
.cf-counter { fill: #a6e6d3; } .cf-counter.side { fill: #8fd2bf; } .cf-plank { stroke: #86c9b6; stroke-width: .5; }
.cf-wood { fill: #b26a35; } .cf-wood-edge { fill: #9a5a2c; } .cf-register { fill: #2a2628; }
.cf-menu-frame { fill: #1d1a1c; } .cf-menu { fill: #f7f6f1; } .cf-menu-line { stroke: #9a9890; stroke-width: .5; }
.cf-fridge { fill: #efe9dc; stroke: #1d1a1c; stroke-width: .8; } .cf-fridge-glass { fill: #f4f8fa; }
.cf-bottle.b0 { fill: #e8a33a; } .cf-bottle.b1 { fill: #6fb36a; } .cf-bottle.b2 { fill: #d9603c; } .cf-bottle.b3 { fill: #c9d6de; }
.cf-fridge-sign { fill: #2a2422; }
.cf-shelf { fill: #9a5a2c; } .cf-chips.c0 { fill: #e0463a; } .cf-chips.c1 { fill: #f2c94c; } .cf-chips.c2 { fill: #8fc46a; }
.cf-rod, .cf-arm { stroke: #3a2c22; stroke-width: .7; } .cf-hub { fill: #3a2c22; }
.cf-bulb { fill: #ffd98a; filter: drop-shadow(0 0 2px #ffb84a); }
.cf-legs { fill: #2a3346; } .cf-neck, .cf-face { fill: #c08c68; }
.cf-body.c1 { fill: #c4553a; } .cf-body.c4 { fill: #5f86a8; } .cf-body.apron-under { fill: #2c2a30; } .cf-body.apron { fill: #2f7f7a; } .cf-body.chef { fill: #f4f2ec; stroke: #c9c4b8; stroke-width: .6; }
.cf-hair.h2 { fill: #5a3a24; } .cf-hair.h3 { fill: #b5602e; } .cf-hair.h4 { fill: #c9a46a; } .cf-hair.h6 { fill: #151416; }
/* kitchen */
.k-floor { fill: #c9c6bf; } .k-tile { stroke: rgba(120,120,120,.35); stroke-width: .5; }
.k-wall { fill: #e6e3dc; } .k-wall.r { fill: #dcd8d0; } .k-back { fill: #f3f1ec; }
.k-ceil { fill: #d8d6d0; } .k-light { fill: #fffbe8; filter: drop-shadow(0 0 3px #fff4c8); }
.k-hood { fill: #b9bdc2; stroke: #8c9096; stroke-width: .6; } .k-hood-under { fill: #8c9096; }
.k-unit { fill: #a9adb2; stroke: #7d8186; stroke-width: .6; } .k-unit.oven { fill: #9da1a6; } .k-unit.fryer { fill: #b1b5ba; }
.k-steel-top { fill: #d4d7da; } .k-burner { fill: #2a2628; } .k-knob { fill: #2a2628; }
.k-basket { stroke: #3a3536; stroke-width: 1; } .k-oven-window { fill: #ff9a4a; filter: drop-shadow(0 0 3px #ff7a2a); }
.k-island { fill: #b9bdc2; stroke: #8c9096; stroke-width: .6; } .k-shelf { stroke: #7d8186; stroke-width: 1; }
.k-pan { fill: #3a3536; } .k-board { fill: #c98a4a; }
.k-slab { fill: #5a504a; } .k-slab-edge { fill: #4a403a; }
/* the café card */
.cf-card { left: 3vw; top: auto; bottom: 7vh; max-width: 320px; pointer-events: auto; }
@media (max-width: 640px) { .cf-card { left: 16px; right: 16px; bottom: 64px; max-width: none; } }
.static .v4 .cf-card { position: relative; left: auto; bottom: auto; margin: 0 28px 24px; opacity: 1; visibility: visible; max-width: 60ch; transition: none; }
@media (min-width: 641px) { .cf-card { left: auto; right: 3vw; } }

/* ---------- 92 Race Street, floor by floor ---------- */
.front.focus-b92 .court > :not(.b92-side), .front.focus-b92 .ss-lid, .front.focus-b92 .ss-street { opacity: .3; filter: saturate(.5); }
.front.focus-b92 .nbr { opacity: .14; }
.fl-labels { position: absolute; inset: 0; pointer-events: none; }
.fl-label { position: absolute; left: 0; top: 0; display: grid; justify-items: end; gap: 3px; padding: 11px 18px 12px; border-radius: 12px; text-align: right; background: rgba(17,14,11,.9); border: 1px solid rgba(214,176,107,.5); box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; visibility: hidden; max-width: 300px; box-sizing: border-box; }
.fl-label b { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #ffd690; }
.fl-label i { font: 400 19px/1.2 var(--f-serif); font-style: normal; color: var(--paper); }
/* the leader lines and dots joining each label to its floor (front.js placeLabels) */
.fl-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; visibility: hidden; }
.fl-lead { fill: none; stroke: rgba(214,176,107,.8); stroke-width: 1.2; }
.fl-dot { fill: var(--brass); stroke: #fff3d6; stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(214,176,107,.8)); }
@media (max-width: 640px) { .fl-label { justify-items: start; text-align: left; padding: 7px 12px 8px; max-width: min(256px, calc(100% - 115px)); box-sizing: border-box; white-space: normal; } .fl-label i { font-size: 15px; } }
.k-card { left: auto; right: 3vw; top: auto; bottom: 7vh; max-width: 320px; pointer-events: auto; }
@media (max-width: 640px) { .k-card { left: 16px; right: 16px; bottom: 64px; max-width: none; } }
.static .v4 .k-card { position: relative; left: auto; right: auto; bottom: auto; margin: 0 28px 24px; opacity: 1; visibility: visible; max-width: 60ch; transition: none; }
.k-pad { fill: #6a6460; } .k-back.upper { fill: #c9c6bf; } .k-duct { stroke: #9a9ea3; stroke-width: 7; stroke-linecap: round; }
.static .v4 .fl-labels { position: relative; inset: auto; display: grid; gap: 6px; margin: 0 28px 24px; }
.static .v4 .fl-label { position: static; opacity: 1; visibility: visible; justify-self: start; }
.static .v4 .fl-leads { display: none; }

/* café interior and kitchen stay hidden until the café front lifts (front.js cafeTo) */
.front .cafe-in, .front .cafe-kitchen { visibility: hidden; }

/* ---- v78: slower reveals with resting points; facades fade to glass; cards above the building ---- */
.arrive.v4 { height: 1500vh; }
@media (max-width: 640px) { .arrive.v4 { height: 1300vh; } }
/* resting points: the page settles on each reveal once it has finished (proximity, so a quick scroll passes through) */
html:has(.arrive.v4) { scroll-snap-type: y proximity; }
.arrive .snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
.static .arrive .snap { display: none; }
html.static:has(.arrive.v4) { scroll-snap-type: none; }
/* the cards sit just above their building (front.js placeCard), wider now that they have the sky */
.ss-card, .cf-card, .k-card { left: 0 !important; right: auto !important; top: 0 !important; bottom: auto !important; max-width: 440px; width: max-content; }
@media (max-width: 640px) { .ss-card, .cf-card, .k-card { width: calc(100% - 32px); max-width: none; } }
.static .v4 .ss-card, .static .v4 .cf-card, .static .v4 .k-card { position: relative; transform: none !important; width: auto; }
/* panes and sconces redrawn during a pan are already lit: no flicker-on, no strobe */
.front .court.steady .pane.on, .front .court.steady .sconce, .front .court.steady .sconce-glow { animation: none !important; }
.front .ss-lid, .front .cafe-lid { transition: none; }

/* the courtyard furniture: yellow metal chairs and square tables, half-barrel planter */
.front .fur { opacity: 0; transition: opacity 1s; } .front.filled .fur { opacity: 1; }
.front .ty-seat { fill: #f4cd4f; } .front .ty-edge { fill: #c99a2c; } .front .ty-back { fill: #e9bd3e; }
.front .ty-leg { fill: none; stroke: #d9ad38; stroke-linecap: round; } .front .ty-slot { fill: none; stroke: #9a7420; stroke-width: .6; }
.front .tub { fill: #5a3f2c; }

/* the café, darker behind the counter */
.cf-mint { fill: #24403c; } .cf-subway { stroke: #31534e; stroke-width: .45; }
.cf-cream { fill: #dccba6; }
.cf-wshelf { stroke: #8a5a34; stroke-width: 1.6; }
.cf-mug.m0 { fill: #f2efe8; } .cf-mug.m1 { fill: #e7b94a; } .cf-mug.m2 { fill: #c9d8d4; }
.cf-espresso { fill: #c4c8cc; stroke: #8a8e92; stroke-width: .5; } .cf-espresso-top { fill: #9a9ea2; }
.cf-group { fill: #2a2628; } .cf-cup { fill: #faf8f2; } .cf-hopper { fill: rgba(120,80,50,.75); } .cf-pot { fill: #1d1a1c; }
.cf-case { fill: rgba(220,236,240,.35); stroke: rgba(240,248,250,.8); stroke-width: .5; } .cf-case-top { fill: rgba(235,245,248,.5); }
.cf-register { fill: #2a2628; }

/* the kitchen: darker, one storey, cooking */
.k-pad { fill: #4a4542; }
.k-floor { fill: #6a3a2c; } .k-grout { stroke: rgba(30,14,10,.45); stroke-width: .45; }
.k-back { fill: #8c918d; } .k-back.upper { fill: #5b605d; } .k-tile { stroke: rgba(40,46,44,.45); stroke-width: .45; }
.k-wall.r { fill: #6a6e6b; } .k-ceil { fill: #3e4142; }
.k-light { fill: #fff3d6; filter: drop-shadow(0 0 4px #ffe2a8); }
.k-slab { fill: #2c2a2a; } .k-slab-edge { fill: #4a4644; }
.k-hood { fill: #8d9399; stroke: #6a7076; stroke-width: .6; } .k-hood-under { fill: #4e5358; }
.k-unit { fill: #747a80; stroke: #565c62; stroke-width: .6; } .k-unit.oven { fill: #6a7076; } .k-unit.fryer { fill: #7e848a; }
.k-steel-top { fill: #a9afb5; } .k-island { fill: #7e848a; stroke: #5e646a; stroke-width: .6; } .k-shelf { stroke: #565c62; }
.k-duct { stroke: #7a7f84; stroke-width: 6; }
.k-rail { stroke: #3a3638; stroke-width: 1.2; } .k-ticket { fill: #f6f3ea; }
.k-wshelf { stroke: #9aa0a6; stroke-width: 1.4; } .k-tub.t0 { fill: #e9e6de; } .k-tub.t1 { fill: rgba(230,236,238,.7); } .k-tub.t2 { fill: #c9463a; }
.k-rack { fill: none; stroke: #9aa0a6; stroke-width: 1; } .k-rack-line { stroke: #b9bec3; stroke-width: .7; }
.k-flame { fill: #4a8cff; filter: drop-shadow(0 0 2px #6aa8ff); } .k-flame.hot { fill: #ff9a3a; filter: drop-shadow(0 0 5px #ff7a1a); }
.k-pot { fill: #b9bec3; stroke: #7e848a; stroke-width: .5; } .k-pot-top { fill: #6a4a2a; }
.k-pan { fill: #2a2628; } .k-handle { stroke: #2a2628; stroke-width: 1.4; stroke-linecap: round; }
.k-oil { fill: #d9a53a; } .k-basket { stroke: #2a2628; stroke-width: 1; } .k-basket-fill { fill: #e8b94a; stroke: #3a3536; stroke-width: .5; }
.k-food { fill: #e7a64a; } .k-patty { fill: #5a3020; }
.k-board { fill: #c98a4a; } .k-knife { stroke: #d9dde0; stroke-width: 1; stroke-linecap: round; }
.k-veg.g { fill: #5fa04a; } .k-veg.r { fill: #d9483a; } .k-veg.o { fill: #e8933a; }
.k-bowl { fill: #d9dde0; } .k-bowl-in { fill: #c0563a; } .k-plates { fill: #f4f2ec; }
.k-plate { fill: #f4f2ec; } .k-plate.full { fill: #f4f2ec; stroke: #c96a3a; stroke-width: 1.4; }
.k-sheet { fill: #9aa0a6; } .k-dough { fill: #ecd9b0; } .k-hang { fill: #3a3638; }
.k-toque { fill: #fbfaf6; stroke: #cfcac0; stroke-width: .6; }
.cf-sleeve { fill: none; stroke-width: 5.6; stroke-linecap: round; stroke-linejoin: round; }
.cf-sleeve.chef { stroke: #f4f2ec; } .cf-sleeve.c1 { stroke: #c4553a; } .cf-sleeve.c4 { stroke: #5f86a8; }
.cf-hand, .cf-neck.s0, .cf-face.s0 { fill: #c08c68; }
.cf-neck.s1, .cf-face.s1, .cf-hand.s1 { fill: #8a5a3c; } .cf-neck.s2, .cf-face.s2, .cf-hand.s2 { fill: #e2b48e; } .cf-neck.s3, .cf-face.s3, .cf-hand.s3 { fill: #6a4430; }
.k-steam { fill: none; stroke: rgba(236,236,232,.6); stroke-width: 2.2; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: steam 3.8s ease-out var(--dl, 0s) infinite; }
@keyframes steam { 0% { opacity: 0; transform: translateY(2px) scale(.6, .7); } 25% { opacity: .75; } 100% { opacity: 0; transform: translateY(-18px) scale(1.4, 1.2); } }
@media (prefers-reduced-motion: reduce) { .k-steam { animation: none; opacity: .4; } }
.front .tt-top { fill: #e3a72a; } .front .tt-edge { fill: #9c6e18; }

/* v86: 92 Race Street's floors lift whole — the slabs between them show only while they are apart */
.front .b92-slab { visibility: hidden; fill: #2e2a2a; stroke: #a99a8a; stroke-width: .8; }
.front .b92-slab.top { fill: #6b5a48; }
.front.exploding .b92-slab { visibility: visible; }
/* the walk-in glides between its resting points itself (arrival.js): no CSS snapping or smooth scrolling to fight it */
html.glide:has(.arrive.v4) { scroll-snap-type: none; scroll-behavior: auto; }

/* the step rail, centred at the foot of the screen: the walk-in's six steps as dots on a line, the bar filling
   from dot to dot as you go, the current dot lit; a dot or an arrow takes you to that step. Kept quiet: a soft
   dark wash, no border, no words (the cards name each step). Pinned to the screen while the walk-in runs. */
.steps { position: fixed; left: 50%; bottom: 12px; z-index: 3; transform: translateX(-50%); width: min(300px, calc(100% - 32px)); box-sizing: border-box; padding: 4px 6px; border-radius: 999px; background: rgba(17,14,11,.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; column-gap: 4px; transition: opacity .3s, visibility .3s; }
.steps.away { opacity: 0; visibility: hidden; }
.st-arrow { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: rgba(242,235,223,.75); transition: color .2s, background .2s; }
.st-arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.st-arrow:hover { color: var(--brass); background: rgba(214,176,107,.14); }
.st-rail { position: relative; height: 26px; margin: 0 8px; }
.st-track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: rgba(242,235,223,.22); }
.st-fill { position: absolute; inset: 0; border-radius: 1px; background: var(--brass); transform-origin: left; transform: scaleX(0); }
.st-dot { all: unset; cursor: pointer; position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; border-radius: 50%; }
.st-dot { transition: background .2s; }
.st-dot i { width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; background: #1b1815; border: 1.5px solid rgba(242,235,223,.5); transition: width .25s, height .25s, background .25s, border-color .25s, box-shadow .25s, transform .2s; }
.st-dot.reached i { background: var(--brass); border-color: var(--brass); }
.st-dot[aria-current] i { width: 11px; height: 11px; background: var(--brass); border-color: #fff3d6; box-shadow: 0 0 8px rgba(214,176,107,.6); }
/* hover: a soft disc behind the dot and the dot swells, gold or not; pressed: it gives a little; on its way: a ring pulses until you arrive */
.st-dot:hover { background: rgba(242,235,223,.16); }
.st-dot:hover i { transform: scale(1.45); border-color: #fff3d6; box-shadow: 0 0 8px rgba(214,176,107,.55); }
.st-dot:active i { transform: scale(1.1); }
.st-dot.going i { animation: st-going 1s ease-out infinite; }
@keyframes st-going { 0% { box-shadow: 0 0 0 0 rgba(255,243,214,.7); } 100% { box-shadow: 0 0 0 8px rgba(255,243,214,0); } }
@media (prefers-reduced-motion: reduce) { .st-dot.going i { animation: none; box-shadow: 0 0 0 3px rgba(255,243,214,.6); } }
.st-dot:focus-visible, .st-arrow:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
@media (max-width: 640px) { .arrive.v4 .skip-arrival { bottom: 54px; } }   /* above the step rail */

/* ---------- 92 Race Street labels, revealed in order: the box fades up, its border draws round, the line runs
   to the floor, the dot pops. The scroll fades the whole set; the sequence runs on the clock. ---------- */
.fl-labels { opacity: 0; visibility: hidden; }
.fl-leads { opacity: 1; visibility: inherit; }
.fl-label { visibility: inherit; opacity: 0; translate: 0 10px; border-color: transparent; transition: opacity .2s, translate .2s; }
.fl-labels.in .fl-label { opacity: 1; translate: 0 0; transition: opacity .45s calc(var(--j) * .2s), translate .6s cubic-bezier(.2,.7,.2,1) calc(var(--j) * .2s); }
.fl-edge { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fl-edge rect { fill: none; stroke: rgba(214,176,107,.75); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .2s; }
.fl-labels.in .fl-edge rect { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.55,.1,.3,1) calc(.35s + var(--j) * .2s); }
.fl-lead { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .15s; }
.fl-labels.in .fl-lead { stroke-dashoffset: 0; transition: stroke-dashoffset .55s cubic-bezier(.55,.1,.3,1) calc(1.1s + var(--j) * .2s); }
.fl-dot { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .12s; }
.fl-labels.in .fl-dot { scale: 1; transition: scale .4s cubic-bezier(.3,1.8,.5,1) calc(1.6s + var(--j) * .2s); }
@media (prefers-reduced-motion: reduce) { .fl-labels .fl-label, .fl-labels .fl-edge rect, .fl-labels .fl-lead, .fl-labels .fl-dot { transition: none !important; } }
.static .v4 .fl-labels { opacity: 1; visibility: visible; }
.static .v4 .fl-label { translate: none; border-color: rgba(214,176,107,.5); }
.static .v4 .fl-edge { display: none; }

/* ---------- the Soundstage, alive: lanterns breathing, stage lights sweeping (soundstage.js), the band small and far ---------- */
.ss-rib { stroke: rgba(120,60,50,.12); stroke-width: .4; }
.ss-in.on .ss-lantern { animation: lantern 5.5s ease-in-out calc(var(--i) * -.9s) infinite alternate; }
@keyframes lantern { from { filter: drop-shadow(0 0 2px rgba(255,190,150,.45)) brightness(.9); } to { filter: drop-shadow(0 0 9px rgba(255,205,165,.95)) brightness(1.08); } }
.ss-perf, .ss-in.on .ss-perf { fill: #2a2234; stroke: rgba(170,235,225,.55); stroke-width: .7; vector-effect: non-scaling-stroke; filter: none; }
.ss-perf-head { fill: #2a2234; stroke: rgba(170,235,225,.55); stroke-width: .7; vector-effect: non-scaling-stroke; }
.ss-gtr { fill: #d9923e; } .ss-gtr.bass { fill: #8e3a2c; }
.ss-kit { fill: #b9b2c8; } .ss-kit.kick { fill: #3a3048; stroke: #b9b2c8; stroke-width: .6; vector-effect: non-scaling-stroke; }
.ss-cymbal { fill: #d9b850; }
.ss-riser { fill: #1c1724; } .ss-riser.top { fill: #3e3570; }
.ss-keys { fill: #1a1620; } .ss-keys.top { fill: #e9e4f0; }
.ss-stand { stroke: #6e6880; stroke-width: .7; }
@media (prefers-reduced-motion: reduce) { .ss-in.on .ss-lantern { animation: none; } }
/* curtain folds as bands (soundstage.js): a shadow and a sheen, opacity set per fold */
.ss-fold { fill: #052826; stroke: none; } .ss-fold.hi { fill: #3fa595; mix-blend-mode: soft-light; }
.ss-curtain.side ~ .ss-fold { fill: #041f1d; }
.ss-pa { fill: #141117; stroke: #4a4552; stroke-width: .6; vector-effect: non-scaling-stroke; }
.ss-pa-grille { stroke: #2c2832; stroke-width: 2.2; }
.ss-rigging { stroke: #0e0c10; stroke-width: .6; }

/* floor labels with content: floor, name, tagline; the paragraph opens on click/tap */
.fl-labels.in .fl-label { pointer-events: auto; }
.fl-head { all: unset; box-sizing: border-box; display: grid; justify-items: inherit; gap: 2px; cursor: pointer; padding-right: 22px; position: relative; }
.fl-head:focus-visible { outline: 2px solid #ffd690; outline-offset: 6px; border-radius: 4px; }
.fl-label em { font: italic 400 14px/1.3 var(--f-serif); color: #e6c98e; }
.fl-more { position: absolute; right: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 1px solid rgba(214,176,107,.7); }
.fl-more::before, .fl-more::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 1px; background: #ffd690; transition: transform .25s; }
.fl-more::after { transform: rotate(90deg); }
.fl-label.open .fl-more::after { transform: rotate(0); }
.fl-head:hover .fl-more { background: rgba(214,176,107,.2); }
.fl-body { display: none; margin: 8px 0 0; max-width: 34ch; text-align: left; font: 400 13.5px/1.45 var(--f-body); color: #e2d6c0; }
.fl-label.open .fl-body { display: block; animation: flBody .35s ease-out; }
@keyframes flBody { from { opacity: 0; translate: 0 -4px; } }
.fl-label { max-width: 320px; }
@media (max-width: 640px) {
  .fl-label { max-width: min(256px, calc(100% - 115px)); }
  .fl-label.open { max-width: calc(100% - 32px); }
  .fl-label em { font-size: 13px; } .fl-body { font-size: 13px; max-width: none; }
  .fl-labels .aside { opacity: 0 !important; visibility: hidden; transition: opacity .2s; }
}
.static .v4 .fl-body { display: block; }
.static .v4 .fl-more { display: none; }
/* the closing slide on a phone: the text runs the full width, so the photo darkens evenly behind it */
@media (max-width: 640px) {
  .v4 .scene-court { background: linear-gradient(180deg, rgba(14,11,9,.84) 0%, rgba(14,11,9,.74) 60%, rgba(14,11,9,.88) 100%), url("media/courtyard.jpg") center/cover; }
  .v4 .inside { padding-top: 92px; padding-bottom: 112px; }   /* clear of the skip link and the step rail */
  .v4 .inside p.intro { font-size: 15.5px; line-height: 1.5; margin-bottom: 20px; }
}

/* ---------- performance: the same look without the effects WebKit paints in software every frame ----------
   the crowd's saturate/brightness filter is baked into its colours; candles, lanterns, fold sheens and
   beams no longer use filters or blend modes */
.crowd-b .ss-people { filter: none; }
.crowd-b .ss-people .c1 { fill: #964836; } .crowd-b .ss-people .c2 { fill: #ac8742; } .crowd-b .ss-people .c3 { fill: #5e745a; } .crowd-b .ss-people .c4 { fill: #526d85; } .crowd-b .ss-people .c5 { fill: #726c65; } .crowd-b .ss-people .c6 { fill: #bbb5a9; } .crowd-b .ss-people .c7 { fill: #563e4f; } .crowd-b .ss-people .c8 { fill: #242327; } .crowd-b .ss-people .h1 { fill: #211815; } .crowd-b .ss-people .h2 { fill: #473021; } .crowd-b .ss-people .h3 { fill: #8c512e; } .crowd-b .ss-people .h4 { fill: #a1875f; } .crowd-b .ss-people .h5 { fill: #868689; } .crowd-b .ss-people .h6 { fill: #111012; } .crowd-b .ss-people .k1 { fill: #b59c82; } .crowd-b .ss-people .k2 { fill: #98745b; } .crowd-b .ss-people .k3 { fill: #6c4b36; } .crowd-b .ss-people .k4 { fill: #462f22; }
.crowd-b .ss-people .ss-pl { fill: #232a37; } .crowd-b .ss-people .ss-pl.l2 { fill: #18161a; } .crowd-b .ss-people .ss-pl.l3 { fill: #3c352f; } .crowd-b .ss-people .ss-chair { fill: #211a16; } .crowd-b .ss-people .ss-cloth { fill: #2e252a; } .crowd-b .ss-people .ss-table { fill: #a9a197; } .crowd-b .ss-people .ss-candle { fill: #ccad6f; } .crowd-b .ss-people .ss-phone { fill: #bfc6cf; }
.ss-candle { filter: none; }
.ss-fold.hi { mix-blend-mode: normal; fill: #5fc4b2; fill-opacity: .16; }
.ss-beam { mix-blend-mode: normal; }
.ss-in.on .ss-beam { opacity: .26; animation: beamN 3.2s ease-in-out calc(var(--i) * -.45s) infinite alternate; }
@keyframes beamN { from { opacity: .14; } to { opacity: .34; } }
.ss-in.on .ss-lantern, .ss-in.on .ss-lantern { filter: none; animation: none; }
.ss-glow { fill: url(#ssGlow); opacity: 0; transition: opacity 1.2s; }
.ss-in.on .ss-glow { animation: lanternGlow 5.5s ease-in-out calc(var(--i) * -.9s) infinite alternate; }
@keyframes lanternGlow { from { opacity: .35; } to { opacity: .9; } }
.ss-in.on .ss-perf { filter: none; }
@media (prefers-reduced-motion: reduce) { .ss-in.on .ss-glow { animation: none; opacity: .6; } .ss-in.on .ss-beam { animation: none; } }

/* ---------- performance, Safari: the camera pans redraw the whole street every frame, so nothing in it may need
   a filter or a blend. Window glows are a soft stroke, the reflection's streaks are its own striped fill,
   the dimmed buildings are dimmed by opacity alone, and the pinned bars are solid instead of frosted ---------- */
.front .b92-panes .pane:not(.dark) { stroke: rgba(255,196,120,.28); stroke-width: 2.6; }
.front .rfp, .front.lit .rfp { fill: url(#streakP); }
.front .b92-all, .front .court, .front .nbr, .front .reflection { transition: opacity .9s; }
.front.focus-ss .b92-all, .front.focus-ss .court, .front.focus-cafe .b92-all, .front.focus-cafe .ss-lid, .front.focus-cafe .ss-street,
.front.focus-b92 .court > :not(.b92-side), .front.focus-b92 .ss-lid, .front.focus-b92 .ss-street { filter: none; }
.front.focus-ss .b92-all, .front.focus-ss .court { opacity: .32; }
.front.focus-cafe .b92-all, .front.focus-cafe .ss-lid, .front.focus-cafe .ss-street { opacity: .34; }
.front.lit .poster, .front.beckon .door-light, .v4 .door-gap, .cf-bulb { filter: none; }
.v4 .wins, .v4 .bx-stage .wins { filter: none; }
.front .dll-dots { isolation: auto; } .front .dll-dots circle { mix-blend-mode: normal; opacity: .82; }
.site.is-solid { background: rgba(17,15,13,.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
.steps { background: rgba(17,14,11,.62); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the step rail stays above the closing slide's text layer (z 4), which covers the screen */
.steps { z-index: 5; }
/* the courtyard photo is only a picture: even faded out it lay over the street and took the floor labels' clicks */
.scene-court { pointer-events: none; }
/* while a floor's text is open (desktop) the other labels show just their floor and name, and a long text
   scrolls inside its box (front.js placeLabels) rather than running off the screen */
.fl-labels.one-open .fl-label:not(.open) em { display: none; }
.fl-label.open .fl-body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(214,176,107,.5) transparent; }
/* the opening headline fades out but stays in place: it must not take the clicks meant for the labels under it */
.arrive h1 { pointer-events: none; }

/* History v3: real archival plates, era notes, images inside cards */
.plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.55) saturate(.8) brightness(.62) contrast(1.05); }
.plate.bw > img { filter: sepia(.35) brightness(.58) contrast(1.1); transform: scale(1.12); }
.plate.real figcaption::before { content: "Archival image"; }
.tl2-note { margin: 14px auto 0; max-width: 34ch; font: 400 clamp(17px, 1.5vw, 20px)/1.4 var(--f-serif); font-style: italic; color: #e9dccb; text-shadow: 0 2px 16px #000; }
.tl2-img { margin: 4px 0 10px; }
.tl2-img img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; filter: sepia(.25); }
.tl2-img figcaption { margin-top: 6px; font: 400 10.5px/1.4 var(--f-mono); color: var(--mut-n); }
@media (max-width: 760px) { .tl2-note { margin-left: 0; text-align: left; } }