@font-face { font-family: "Playfair Display SC"; src: url("fonts/PlayfairDisplaySC-Black.woff2") format("woff2"); font-weight: 900; font-display: block; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("fonts/BodoniModa-Italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("fonts/BodoniModa-Italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/BodoniModa-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/BodoniModa-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/SchibstedGrotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/SchibstedGrotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tilt Neon"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/TiltNeon-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tilt Neon"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/TiltNeon-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --night: #0d0507; --wine: #2b0712; --blood: #e0162b; --pink: #ff4d8d; --gold: #f4b03c; --copper: #d99a5b;
  --bone: #f6e6dc; --smoke: #b8a0a8; --tube-off: #3a1723; --lacquer: #170609;
  --f-neon: "Tilt Neon", "Schibsted Grotesk", system-ui, sans-serif;
  --f-gilt: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-cast: "Playfair Display SC", Georgia, serif;
  --f-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4.2vw, 88px);
  --wrap: min(1480px, 100% - 2 * var(--gutter));
  --s-1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --s0: clamp(1rem, 0.96rem + 0.22vw, 1.14rem);
  --s1: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  --s2: clamp(1.55rem, 1.25rem + 1.3vw, 2.5rem);
  --s3: clamp(2.3rem, 1.6rem + 3.2vw, 4.8rem);
  --s4: clamp(3rem, 1.6rem + 6.5vw, 9rem);
  /* Cast lettering sizes: titles and wordmark 0.8 of the T335 prototype; plate labels at the prototype's size and the door at its old size, the smallest a chamfer still reads. */
  --lt-l: clamp(2.08rem, 1.2rem + 3.36vw, 4.96rem); --lt-m: clamp(1.3rem, 1rem + 1.1vw, 2rem); --lt-b: clamp(.92rem, .8rem + .4vw, 1.2rem);
  --lt-s: clamp(.84rem, .8rem + .1vw, .92rem); --lt-c: clamp(1.02rem, .95rem + .3vw, 1.2rem);
  /* Cast lettering metal: light champagne gold faces, muted olive-brown gold shade (read by js/lettering.js). */
  --lt-face: #f7e6b5; --lt-shade: #857650;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Copper, one palette for every frame, rail, rivet, key, finial and logo (read by js/metal.js too). */
  --cu-spec: #fff1df; --cu-hi: #ffd7b0; --cu-light: #ffeedd; --cu-lt: #eaa97c; --cu: #cd8352; --cu-mid: #ad6236; --cu-face: #a85d33;
  --cu-dk: #8e4a25; --cu-edge: #7a3b1c; --cu-sh: #4a1d0a; --cu-deep: #160704; --cu-verd: #2c5e55; --cu-env: #ff7a3a; --cu-wall: #070102;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--bone); font: 400 var(--s0)/1.6 var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--gutter); top: 10px; z-index: 50; transform: translateY(-200%); background: var(--gold); color: var(--night); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { transform: none; }

/* The fixed WebGL street wall and eye; the DOM is the sign, the doors and the paper on top of it. */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; background: radial-gradient(ellipse at 50% 45%, #3a0a16 0, #1a0509 45%, var(--night) 80%); }
.nogl #gl { background: radial-gradient(ellipse at 50% 42%, #4a0c1a 0, #1c060b 40%, var(--night) 75%); }
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .06; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.page { position: relative; z-index: 2; }

/* Top bar: brand, street names, language and the +16 roundel, always on screen. */
.bar { position: fixed; z-index: 20; inset: 0 0 auto 0; display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); padding: clamp(10px, 1.4vw, 18px) var(--gutter); background: linear-gradient(#0d0507e6, #0d050700); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: italic 600 clamp(1rem, .9rem + .4vw, 1.3rem)/1 var(--f-gilt); font-variation-settings: "opsz" 24; color: var(--gold); white-space: nowrap; }
.brand svg { width: clamp(30px, 2.6vw, 40px); height: auto; }
.logo { fill: #d4101e; filter: url(#cu-s); overflow: visible; }
.foot-logo { width: clamp(64px, 7vw, 104px); height: auto; filter: url(#cu-m); }
.nav { display: none; gap: clamp(14px, 1.6vw, 30px); margin-inline: auto; }
.nav a { position: relative; text-decoration: none; font-size: var(--s-1); color: var(--smoke); padding: 6px 0; transition: color .25s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--pink); box-shadow: 0 0 8px var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav a:hover { color: var(--bone); }
.nav a:hover::after { transform: scaleX(1); }
.bar-end { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); margin-left: auto; }
.lang { display: flex; padding: 4px; border-radius: 999px; background: #1a070cc0; }
.lang button { border: 0; background: none; cursor: pointer; font: 600 .78rem/1 var(--f-body); letter-spacing: .04em; padding: 8px 10px; border-radius: 999px; color: var(--smoke); transition: color .2s, background .2s, box-shadow .2s; }
.lang button[aria-pressed="true"] { color: var(--night); background: var(--gold); box-shadow: 0 0 14px #f4b03c88; }
/* Sound toggle: a small neon speaker, dark glass when off, lit pink when on. */
.snd { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 999px; background: #1a070cc0; cursor: pointer; color: var(--pink); }
.snd svg { width: 24px; height: 24px; overflow: visible; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.snd path { stroke: #7a3346; transition: stroke .25s, filter .25s, opacity .25s; }
.snd .wave { opacity: 0; }
.snd[aria-pressed="true"] path { stroke: #ffd6e4; filter: drop-shadow(0 0 2px var(--pink)) drop-shadow(0 0 6px var(--pink)); }
.snd[aria-pressed="true"] .wave { opacity: 1; }
.snd[aria-pressed="true"] .mute { opacity: 0; }
.snd:hover path, .snd:focus-visible path { stroke: #c0587a; }
.snd[aria-pressed="true"]:hover path, .snd[aria-pressed="true"]:focus-visible path { stroke: #fff0f5; }
.snd:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
@media (max-width: 440px) { .brand .lt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.snd .tip { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% -4px; padding: 5px 9px; border-radius: 6px; background: #12040ae6; box-shadow: 0 0 0 1px #ff4d8d55, 0 0 12px #ff4d8d33; font: 600 .74rem/1 var(--f-body); letter-spacing: .04em; color: var(--bone); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s, translate .2s; }
.snd:hover .tip, .snd:focus-visible .tip { opacity: 1; translate: -50% 0; }
.age { position: relative; display: grid; place-items: center; width: clamp(44px, 4vw, 54px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #f4b03c22, #f4b03c00 70%); flex: none; }
.neon-mini { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px #f4b03c99) drop-shadow(0 3px 3px #000a); }
.neon-mini .lt .halo path { stroke-width: 10; } .neon-mini .lt .gas path { stroke-width: 6.5; } .neon-mini .lt .glass, .neon-mini .lt .dust path { stroke-width: 9; } .neon-mini path.core { stroke-width: 2.4; }
@media (min-width: 1100px) { .nav { display: flex; } .nav + .bar-end { margin-left: 0; } }

/* Hero: the hanging neon sign, the big eye below, the door and two blank stubs. */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto auto minmax(clamp(150px, 22svh, 540px), 1fr) auto auto; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: clamp(78px, 11svh, 120px) var(--gutter) clamp(20px, 4svh, 44px); }
.sign { position: relative; margin: 0; width: min(100%, max(880px, 46vw), 112svh); }
.sign::before, .sign::after { content: ""; position: absolute; bottom: 77%; width: 1px; height: 100vh; background: linear-gradient(to top, #c88a52 0, #6b3a2a 70px, #6b3a2a00 170px); }
.sign::before { left: 9%; } .sign::after { right: 9%; }
.sign svg { width: 100%; height: auto; overflow: visible; }
.rig { position: relative; }
.rig.stack { display: none; }
@media (max-aspect-ratio: 1/1), (max-width: 700px) { .sign { width: min(100%, 560px, 52svh); } .sign::before, .sign::after { bottom: 88%; } .rig.wide { display: none; } .rig.stack { display: block; } }
/* Glass neon in three depth layers: the smoked board on the wall, the tube on its clips, the hot core. */
.rig .l-tube, .rig .l-core, .rig .l-solo { position: absolute; inset: 0; pointer-events: none; transform: translate(calc(var(--nx, 0) * 5px), calc(var(--ny, 0) * 3.5px)); transition: transform .6s var(--ease-out); }
.l-board .panel { fill: url(#nf-board); stroke: #14060a99; stroke-width: 14; stroke-linejoin: round; }
.l-board .panel-edge { fill: none; stroke: #ffd3e01f; stroke-width: 1.2; stroke-linejoin: round; }
.l-board .wires path { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.l-board .wallglow path { fill: none; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.l-board .shadow path { fill: none; stroke: #000; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.l-board .posts circle { fill: #2a1d1a; stroke: #6d5a52; stroke-width: 1; }
.l-board .screws circle { fill: url(#nf-screw); stroke: #000a; stroke-width: 1; }
.l-tube .air path { fill: none; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.word-air, .word-wall { transition: opacity .06s; }
.l-tube .jumps path { fill: none; stroke: #1a0b0f; stroke-width: 12; stroke-linecap: round; opacity: .9; }
.lt path, path.core { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lt .bb { fill: none; stroke: none; }
.lt .halo path { stroke-width: 19; opacity: .75; }
.lt .glass { stroke-width: 14; opacity: .2; }
.lt.red .glass { opacity: .13; }
.lt .gas path { stroke-width: 10; }
.lt .dust path { stroke: #000; stroke-width: 14; opacity: .4; }
.lt .hl { stroke: #fff; stroke-width: 1.6; opacity: .35; transform: translate(-2px, -4px); }
path.core { stroke-width: 3.2; }
.lt .halo, .lt .gas, path.core { transition: opacity .04s; }
.lt.off .halo, .lt.off .gas, path.core.off, path.core.warm { opacity: 0; }
.lt.warm .gas { opacity: .32; } .lt.warm .halo { opacity: .12; }
.lt.weak .gas { opacity: .55; } .lt.weak .halo { opacity: .3; } path.core.weak { opacity: .35; }
.l-tube .clips rect { fill: #3a302c; stroke: #a8968a66; stroke-width: .6; opacity: .85; }
.l-tube .boot circle { fill: #120a0b; stroke: #3a2c2a; stroke-width: 1.2; }
.l-tube .boot .boot-hl { fill: none; stroke: #ffffff30; stroke-width: 1; stroke-dasharray: 8 40; }
.rig.stack .lt .gas path { stroke-width: 11; } .rig.stack path.core { stroke-width: 3.6; } .rig.stack .lt .glass, .rig.stack .lt .dust path { stroke-width: 15; }
.sub { margin: clamp(6px, 1.2svh, 14px) 0 0; text-align: center; max-width: 34ch; font: italic 600 var(--s1)/1.25 var(--f-gilt); font-variation-settings: "opsz" 36; text-wrap: balance; }
.eye-slot { position: relative; width: 100%; align-self: stretch; }
.eye-fallback { display: none; position: absolute; inset: 10% 15%; margin: auto; width: min(100%, 520px); }
.nogl .eye-fallback { display: block; }
.hero-act { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 2.4vw, 40px); width: min(100%, 980px); }
@media (max-width: 760px) { .hero-act { grid-template-columns: 1fr 1fr; } .hero-act .cta { grid-column: 1 / -1; order: -1; justify-self: stretch; } }

/* Breaking news: an LED lower third under the eye, a red PARTY lightbox on the left, the crawl behind gold tubes. */
.news { --h: clamp(46px, 1.9rem + 1.6vw, 78px); position: relative; justify-self: stretch; display: flex; height: var(--h); margin: clamp(6px, 1.6svh, 20px) calc(-1 * var(--gutter)) clamp(12px, 2.6svh, 30px); background: linear-gradient(#0b0305f0, #040102f5); box-shadow: 0 0 34px #e0162b40, inset 0 0 30px #e0162b1f; }
.news::before, .news::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; height: 2px; border-radius: 2px; background: #ffe6b0; box-shadow: 0 0 3px #f4b03c, 0 0 10px #f4b03c, 0 0 22px #d99a5b88; pointer-events: none; }
.news::before { top: -1px; } .news::after { bottom: -1px; }
.news-tag { position: relative; z-index: 1; flex: none; display: flex; filter: drop-shadow(0 0 6px #ff2a3d) drop-shadow(0 0 18px #e0162b); }
.news-tag > span { display: flex; align-items: center; gap: calc(var(--h) * .2); padding: 0 calc(var(--h) * .62) 0 var(--gutter); clip-path: polygon(0 0, 100% 0, calc(100% - var(--h) * .36) 100%, 0 100%);
  font: 400 calc(var(--h) * .52)/1 var(--f-neon); letter-spacing: .08em; color: #fff6f6; text-shadow: 0 0 2px #fff, 0 0 8px #ffd0d4, 0 0 16px #ff2a3d;
  background: radial-gradient(120% 90% at 40% 30%, #ff4656, #d3001e 55%, #8a0013); box-shadow: inset 0 0 0 2px #ff8a9655, inset 0 0 22px #ffb3bb88; }
.news-tag i { width: calc(var(--h) * .17); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff, 0 0 10px #ffd0d4; animation: rec 1.6s steps(2, jump-none) infinite; animation-play-state: paused; }
.news.run .news-tag i { animation-play-state: running; }
@keyframes rec { 50% { opacity: .15; } }
.news-crawl { position: relative; flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; margin-left: calc(var(--h) * -.36);
  -webkit-mask: linear-gradient(90deg, #0000 calc(var(--h) * .36), #000 calc(var(--h) * .9), #000 94%, #0000); mask: linear-gradient(90deg, #0000 calc(var(--h) * .36), #000 calc(var(--h) * .9), #000 94%, #0000); }
.news-crawl::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(#0000 0 2px, #00000059 2px 3px); }
.news-track { display: flex; width: max-content; padding-left: calc(var(--h) * .5); animation: crawl 40s linear infinite; animation-play-state: paused; }
.news.run .news-track { animation-play-state: running; }
.news-run { display: flex; align-items: center; }
.news-run span { padding: 0 .85em; white-space: nowrap; font: 400 calc(var(--h) * .44)/1 var(--f-neon); letter-spacing: .02em; color: #ffe2b0; text-shadow: 0 0 2px #ffb347, 0 0 9px #ff7a1a, 0 0 20px #ff7a1a88; }
.news-run svg { flex: none; width: calc(var(--h) * .44); height: auto; color: #ff8db3; filter: drop-shadow(0 0 3px var(--pink)) drop-shadow(0 0 8px var(--pink)); }
@keyframes crawl { to { transform: translateX(-50%); } }

/* The door: a pink neon tube that brightens under the hand, ripples on press. */
.cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 16px clamp(26px, 3vw, 44px); border-radius: 999px; text-decoration: none; cursor: pointer; border: 0;
  font: 700 clamp(1.02rem, .95rem + .3vw, 1.2rem)/1 var(--f-body); letter-spacing: .01em; color: #fff0f5; background: radial-gradient(120% 140% at var(--mx, 50%) var(--my, 50%), #ff4d8d55, #2b071299 60%);
  box-shadow: 0 0 18px #ff4d8d99, 0 0 46px #e0162b55, 0 12px 20px -8px #000; text-shadow: 0 0 10px #ff4d8d;
  transition: box-shadow .3s var(--ease-out), transform .2s var(--ease-out), background .3s; }
.cta::before, .cta::after { content: ""; position: absolute; z-index: -1; border-radius: inherit; pointer-events: none; }
.cta::before { inset: 6px; border: 5px solid #ff3d88; filter: blur(.7px); box-shadow: inset 0 0 10px #ff4d8d, 0 0 6px #ff4d8d; }
.cta::after { inset: 7.5px; border: 2px solid #fff1f7; box-shadow: 0 0 2px #fff, inset 0 0 2px #fff; }
.cta:hover { box-shadow: 0 0 30px #ff4d8d, 0 0 80px #e0162b, 0 12px 20px -8px #000; }
.cta:active { transform: scale(.975); }
.cta .horn { width: 22px; height: 22px; flex: none; }
.ripple { position: absolute; z-index: -1; border-radius: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: radial-gradient(circle, #fff 0, #ff4d8d 35%, #ff4d8d00 70%); pointer-events: none; animation: ripple .7s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(40); opacity: 0; } }
.cta.zap { animation: zap .32s steps(1) 1; }
@keyframes zap { 0% { filter: brightness(.4); } 25% { filter: brightness(1.6); } 50% { filter: brightness(.7); } 75% { filter: brightness(1.3); } }

/* Ticket stubs: the confirmed date and place, filled from the event data. */
.stub { position: relative; display: grid; gap: 4px; padding: 12px 18px 12px 22px; min-width: 0; color: var(--bone); background: linear-gradient(90deg, #f4b03c14, #f4b03c05); border-radius: 6px;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000) ; mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000); }
.stub:nth-child(3) { text-align: right; padding: 12px 22px 12px 18px; -webkit-mask: radial-gradient(circle 7px at 100% 50%, #0000 98%, #000); mask: radial-gradient(circle 7px at 100% 50%, #0000 98%, #000); }
.entry { grid-column: 1 / -1; margin: 0; text-align: center; font: italic 600 var(--s0)/1.3 var(--f-gilt); color: var(--gold); text-shadow: 0 0 14px #f4b03c66; text-wrap: balance; }
.stub span { font-size: var(--s-1); line-height: 1.3; color: var(--bone); text-wrap: balance; }

@media (max-aspect-ratio: 1/1) and (max-width: 700px) {
  .hero { padding-top: clamp(62px, 9svh, 110px); padding-bottom: clamp(12px, 2svh, 30px); grid-template-rows: auto auto minmax(clamp(104px, 17svh, 420px), 1fr) auto auto; }
  .sub { font-size: clamp(1rem, .9rem + .5vw, 1.2rem); }
  .news { --h: clamp(40px, 6svh, 56px); margin-block: 4px clamp(8px, 1.6svh, 18px); }
  .stub, .stub:nth-child(3) { padding-block: 8px; }
  .hero-act { align-items: stretch; }
}
@media (max-width: 700px) {
  .brand { min-height: 44px; }
  .lang button { min-width: 44px; min-height: 44px; padding-inline: 8px; }
  .foot-row a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
}

/* Neon tube dividers, dark glass until the section arrives. */
.tube { position: relative; width: var(--wrap); margin: clamp(40px, 7vw, 110px) auto; height: clamp(40px, 6vw, 80px); }
.tube::before, .tube::after { content: ""; position: absolute; top: var(--y0, 50%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a3a36, #120a0b 70%); box-shadow: 0 0 0 1px #3a2c2a, 0 3px 6px #000c; }
.tube::before { left: 0; } .tube::after { left: 100%; }
.tube svg { width: 100%; height: 100%; overflow: visible; }
.tube path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tube .shade { stroke: #000; stroke-width: 9; opacity: .5; transform: translateY(6px); filter: blur(3px); }
.tube .glass { stroke: #f6e6dc22; stroke-width: 10; }
.tube .gas { stroke: var(--tube-off); stroke-width: 6; transition: stroke .06s; }
.tube .core { stroke: #ffffff10; stroke-width: 2; transition: stroke .06s; }
.tube .hl { stroke: #fff; stroke-width: 1; opacity: .3; transform: translateY(-3px); }
.tube.on .gas { stroke: var(--c); filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 12px var(--c)) drop-shadow(0 0 30px var(--c)); }
.tube.on .core { stroke: #fff6f9; }

/* Shared section bones. */
.sec { position: relative; width: var(--wrap); margin-inline: auto; }
.sec-head { display: grid; gap: clamp(8px, 1.4vw, 18px); margin-bottom: clamp(28px, 4.4vw, 64px); }
.neon { position: relative; margin: 0; font: 900 var(--lt-l)/1.08 var(--f-cast); letter-spacing: .035em; }
.neon::before { content: attr(data-t); position: absolute; inset: 0; color: transparent; pointer-events: none; transition: text-shadow .08s; }
.neon.lit::before { text-shadow: 0 0 10px var(--c), 0 0 28px var(--c), 0 0 70px var(--c2, var(--c)); }
.lede { margin: 0; max-width: 46ch; font: italic 400 var(--s1)/1.35 var(--f-gilt); font-variation-settings: "opsz" 30; color: #e9cfc0; text-wrap: pretty; }

/* Programa: six blade signs hanging from one gilt rail; each swings when touched. */
.rail { --bh: clamp(48px, 2.4rem + 2.2vw, 86px); position: relative; padding-top: calc(var(--bh) * .62 + 26px); }
.cast-bar { position: absolute; z-index: 3; top: 0; left: calc(var(--bh) * -.3); right: calc(var(--bh) * -.3); height: var(--bh); color: var(--cu-face); filter: url(#cu-bar); pointer-events: none; }
.cast-bar svg { position: absolute; top: 0; height: 100%; width: auto; fill: url(#copper-v); overflow: visible; }
/* With WebGL2 the bar is drawn lit by js/metalgl.js; the DOM pieces stay only for layout. */
.cast-bar.gl { filter: none; } .cast-bar.gl > :not(canvas) { visibility: hidden; }
.cb-cap { left: 0; } .cb-cap.r { left: auto; right: 0; transform: scaleX(-1); }
/* Reeded copper rod: a stretched (brushed) highlight and a neon reflection that slide with the light, over a three-reed cylinder. */
.cb-rod { position: absolute; left: calc(var(--bh) * .6); right: calc(50% + var(--bh) * .5); top: 40%; height: 30%;
  -webkit-mask: linear-gradient(#000 0 22%, #0000 22% 32%, #000 32% 68%, #0000 68% 78%, #000 78%); mask: linear-gradient(#000 0 22%, #0000 22% 32%, #000 32% 68%, #0000 68% 78%, #000 78%);
  background:
    radial-gradient(60% 9% at calc(50% - var(--lx, 0) * 45%) 40%, #fff1dfcc, #fff1df00),
    radial-gradient(45% 7% at calc(50% - var(--lx, 0) * 45%) 7%, #ffd7b0aa, #ffd7b000),
    radial-gradient(30% 8% at calc(30% + var(--lx, 0) * 35%) 60%, #ff4d8d66, #ff4d8d00),
    repeating-linear-gradient(90deg, #ffffff08 0 1px, #0000 1px 3px, #00000012 3px 4px),
    linear-gradient(var(--cu-hi), var(--cu-mid) 22%, #0000 22% 32%, var(--cu-lt) 32%, var(--cu-face) 50%, var(--cu-sh) 68%, #0000 68% 78%, var(--cu) 78%, var(--cu-sh)); }
.cb-rod.r { left: calc(50% + var(--bh) * .5); right: calc(var(--bh) * .6); }
.cast-bar .cb-eye { left: 50%; top: calc(var(--bh) * -.17); height: calc(var(--bh) * 1.44); transform: translateX(-50%); }
.cast-bar .cb-mount { transform: translateX(-50%); }
@media (max-width: 700px) { .cast-bar .cb-mount.alt { display: none; } }
.cb-gem { position: absolute; z-index: 2; top: calc(var(--bh) * .55); left: 50%; width: calc(var(--bh) * .62); height: calc(var(--bh) * .3); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, #fff 0, #ffb3cd 22%, #ff4d8d 50%, #8a0a2a 100%); box-shadow: 0 0 calc(var(--bh) * .5) #ff4d8d; }
.blades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr)); gap: clamp(26px, 3vw, 40px) clamp(12px, 1.6vw, 24px); }
@media (max-width: 520px) { .blades { grid-template-columns: 1fr 1fr; } }
.blade { --c: var(--pink); position: relative; padding-top: 30px; transform-origin: 50% 0; perspective: 900px; }
.blade::before, .blade::after { content: ""; position: absolute; top: -26px; width: 2px; height: 58px; background: repeating-linear-gradient(var(--cu) 0 5px, var(--cu-sh) 5px 7px); }
.blade::before { left: 24%; } .blade::after { right: 24%; }
.board { position: relative; overflow: hidden; height: 100%; display: grid; align-content: start; gap: 10px; padding: clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 22px) clamp(20px, 2.2vw, 28px); border-radius: 6px;
  background: radial-gradient(140% 90% at var(--mx, 50%) var(--my, 0%), #ffffff14, #0000 55%), linear-gradient(170deg, #2a0b12, var(--lacquer) 60%, #0c0305); }
.blade-icon { width: clamp(44px, 4vw, 58px); height: auto; color: var(--tube-off); transition: color .1s; }
.blade.lit .blade-icon { color: #fff0f5; filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 9px var(--c)) drop-shadow(0 0 22px var(--c)); }
.blade h3 { margin: 6px 0 0; font: italic 600 var(--s2)/1.02 var(--f-gilt); font-variation-settings: "opsz" 72; color: var(--bone); letter-spacing: -.01em; hyphens: auto; }
.blade p { margin: 0; font-size: var(--s-1); line-height: 1.5; color: var(--smoke); }
.blade.swing .board-wrap { animation: swing 1.4s var(--ease-out); }
.board-wrap { height: 100%; transform-origin: 50% -30px; }
@keyframes swing { 0% { transform: rotate(0); } 15% { transform: rotate(var(--sw, 5deg)); } 35% { transform: rotate(calc(var(--sw, 5deg) * -.6)); } 55% { transform: rotate(calc(var(--sw, 5deg) * .35)); } 75% { transform: rotate(calc(var(--sw, 5deg) * -.15)); } 100% { transform: rotate(0); } }

/* Ahora mismo: an LED ticker over a reception board with split flaps and lamps. */
.led { position: relative; z-index: 2; overflow: hidden; margin: 0 0 clamp(26px, 4vw, 56px); padding: clamp(14px, 1.8vw, 24px) 0; background: #070203; box-shadow: 0 0 40px #e0162b22 inset; }
.led::before, .led::after { content: ""; position: absolute; z-index: 1; left: -10px; right: -10px; height: 6px; background: linear-gradient(currentColor 0 40%, #0000 40% 58%, currentColor 58%); color: var(--cu-face); filter: url(#cu-s); pointer-events: none; }
.led::before { top: 1px; } .led::after { bottom: 1px; }
.led-track { display: flex; width: max-content; animation: tick 38s linear infinite; animation-play-state: paused; }
.led.run .led-track { animation-play-state: running; }
.led span { padding-right: 3ch; white-space: nowrap; font: 400 clamp(1.6rem, 1.1rem + 2.4vw, 3.4rem)/1 var(--f-neon); color: #ffb347; text-shadow: 0 0 10px #ff7a1a;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 52%, #0000 62%) 0 0 / 5px 5px; mask: radial-gradient(circle at 50% 50%, #000 52%, #0000 62%) 0 0 / 5px 5px; }
@keyframes tick { to { transform: translateX(-50%); } }
.desk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(20px, 3vw, 48px); align-items: stretch; }
.flapboard { display: grid; align-content: center; justify-items: start; gap: 18px; padding: clamp(22px, 3vw, 40px); border-radius: 8px; background: linear-gradient(160deg, #1f080e, #0c0305); }
.flaps { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); flex-wrap: wrap; font: italic 500 var(--s2)/1 var(--f-gilt); color: #e9cfc0; }
.flap { position: relative; display: grid; place-items: center; width: clamp(64px, 7vw, 96px); aspect-ratio: .74; border-radius: 10px; font: 700 clamp(2.6rem, 2rem + 2.6vw, 4.4rem)/1 var(--f-body); color: #fff0d6; background: linear-gradient(#2a1218 0 49.5%, #000 49.5% 50.5%, #1d0b10 50.5%); box-shadow: inset 0 1px 0 #ffffff1a, 0 10px 24px #000a; text-shadow: 0 0 14px #f4b03c88; perspective: 400px; }
.flap.flip { animation: flip .09s linear; }
@keyframes flip { 50% { transform: rotateX(-70deg) scaleY(.9); filter: brightness(.6); } }
.flapnote { margin: 0; max-width: 38ch; color: var(--smoke); font-size: var(--s-1); }
.status { margin: 0; display: grid; gap: 0; padding: clamp(10px, 1.4vw, 18px) clamp(18px, 2.4vw, 32px); border-radius: 8px; background: linear-gradient(200deg, #1a070c, #0c0305); }
.status > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: clamp(14px, 1.6vw, 20px) 0; background: linear-gradient(90deg, #0000, #000c 8% 92%, #0000) 0 calc(100% - 1px) / 100% 1px no-repeat, linear-gradient(90deg, #0000, #ffd9a024 8% 92%, #0000) 0 100% / 100% 1px no-repeat; }
.status > div:last-child { background: none; }
.status dt { font: italic 500 var(--s1)/1.1 var(--f-gilt); font-variation-settings: "opsz" 40; color: var(--bone); }
.status dd { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--s-1); color: var(--smoke); }
.lamp { width: 12px; height: 12px; border-radius: 50%; background: #3b1a12; box-shadow: inset 0 0 0 1px #0006; flex: none; }
.lamp.on { background: #ffd27a; box-shadow: 0 0 6px #f4b03c, 0 0 16px #f4b03c; }
.lamp.wait { background: #ff6b8f; box-shadow: 0 0 6px #ff4d8d, 0 0 14px #ff4d8d; animation: wait 2.4s steps(2, jump-none) infinite; animation-play-state: paused; }
.in-view .lamp.wait { animation-play-state: running; }
@keyframes wait { 50% { background: #4a1622; box-shadow: none; } }

/* Redes: two phones held up in the crowd, screens on, tilting toward the hand. */
.phones { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 6vw, 110px); perspective: 1400px; }
.phone-wrap { display: grid; justify-items: center; gap: 18px; width: min(100%, 320px); }
@media (max-width: 620px) {
  .phones { flex-wrap: nowrap; gap: 0; }
  .phone-wrap { width: 50%; gap: 10px; }
  .phone { width: 320px; zoom: calc((min(100vw, 620px) - 2 * var(--gutter)) / 640px * .96); }
}
.phone { --rx: 0deg; --ry: 0deg; position: relative; width: 100%; aspect-ratio: 9 / 18.5; border-radius: 40px; padding: 12px; background: linear-gradient(150deg, #3a2a2e, #120a0c 40%, #2a1d20); box-shadow: 0 40px 70px #000d, 0 0 60px var(--glow); transform: rotate(var(--tilt)) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s var(--ease-out); }
.screen { position: relative; overflow: hidden; height: 100%; border-radius: 30px; background: linear-gradient(#1b070c, #0b0305); display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 46px 16px 18px; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 60% at var(--mx, 30%) var(--my, 10%), #ffffff22, #0000 60%); mix-blend-mode: screen; }
.notch { position: absolute; top: 12px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: #000; }
.ph-head { display: flex; align-items: center; gap: 12px; }
.ph-av { width: 48px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 200deg, var(--pink), var(--gold), var(--blood), var(--pink)); padding: 2px; }
.ph-av span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #14050a; }
.ph-av svg { width: 66%; }
.ph-name { display: grid; line-height: 1.25; }
.ph-name b { font-size: .98rem; }
.ph-name span { font-size: .8rem; color: var(--smoke); }
.ph-bio { margin: 0; font-size: .82rem; color: #dcc3b8; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-content: start; }
.ph-grid i { aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, var(--g, #e0162b33), #12040800 70%), #1c0910; }
.ph-grid i svg { width: 46%; color: var(--gc, #ff4d8d); opacity: .9; filter: drop-shadow(0 0 4px currentColor); }
.ph-reel { position: relative; border-radius: 16px; overflow: hidden; background: radial-gradient(80% 60% at 50% 40%, #e0162b55, #0000 70%), linear-gradient(#250a12, #0e0407); display: grid; place-items: center; }
.ph-reel svg { width: 34%; color: #fff0f5; filter: drop-shadow(0 0 8px var(--pink)); }
.ph-reel .bars { position: absolute; left: 12px; right: 40%; bottom: 14px; display: grid; gap: 6px; }
.ph-reel .bars i { height: 8px; border-radius: 4px; background: #ffffff22; }
.ph-reel .bars i:last-child { width: 60%; }
.ph-soon { justify-self: center; text-decoration: none; text-align: center; padding: 10px 16px; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--night); background: var(--gold); box-shadow: 0 0 18px #f4b03c88; }
.phone-label { font: italic 600 var(--s1)/1 var(--f-gilt); color: var(--bone); }

/* Preguntas: a rack of copper room keys; opening a question turns its key. */
.faq { display: grid; gap: 12px; max-width: 980px; }
.q-item { border-radius: 8px; background: linear-gradient(100deg, #1d080e, #0f0406 70%); }
.q-btn { width: 100%; min-height: 56px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(14px, 2vw, 24px); padding: clamp(16px, 2vw, 22px) clamp(16px, 2.2vw, 28px); background: none; border: 0; border-radius: 8px; cursor: pointer; text-align: left; }
.q-btn span { font: 500 var(--s1)/1.25 var(--f-gilt); font-variation-settings: "opsz" 28; color: var(--bone); }
.key { width: clamp(34px, 3vw, 44px); height: auto; color: var(--cu-face); filter: url(#cu-s); transition: transform .6s var(--ease-out); transform-origin: 50% 22%; }
.q-item.open .key { transform: rotate(-90deg); }
.q-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.q-item.open .q-panel { grid-template-rows: 1fr; }
.q-panel > div { overflow: hidden; }
.q-panel p { margin: 0; padding: 0 clamp(16px, 2.2vw, 28px) clamp(18px, 2.2vw, 26px) calc(clamp(16px, 2.2vw, 28px) + clamp(34px, 3vw, 44px) + clamp(14px, 2vw, 24px)); max-width: 70ch; color: #dcc3b8; }

/* Sobre nosotros: gilt lettering on the hotel window, arched like a sign painter would. */
.window { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(26px, 4vw, 70px); align-items: center; padding: clamp(26px, 4vw, 64px); border-radius: clamp(24px, 5vw, 200px) clamp(24px, 5vw, 200px) 8px 8px;
  background: linear-gradient(120deg, #ffffff0a 0 18%, #0000 18% 22%, #ffffff06 22% 26%, #0000 26%), linear-gradient(#1a070dcc, #0b0306e6); }
.arch { width: 100%; }
.arch text { font: 900 60px var(--f-cast); letter-spacing: 2px; }
.window h2 { margin: 0 0 14px; font: italic 700 var(--s2)/1.1 var(--f-gilt); font-variation-settings: "opsz" 60; text-wrap: balance; }
.window p { margin: 0 0 14px; max-width: 58ch; color: #dcc3b8; }

/* Cómo llegar: a neon street map that draws itself, the venue and a plain link out to a real map. */
.mapbox { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(22px, 3vw, 48px); align-items: center; }
.map { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 11; background: radial-gradient(70% 60% at 55% 50%, #2b071288, #0a0204 80%); }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .blk { fill: none; stroke: #ff4d8d; stroke-width: 1.4; opacity: .55; filter: drop-shadow(0 0 3px #ff4d8d); }
.map .ave { fill: none; stroke: #ffd0de; stroke-width: 3; filter: drop-shadow(0 0 4px #ff4d8d) drop-shadow(0 0 12px #e0162b); }
.map .sea { fill: none; stroke: #f4b03c; stroke-width: 1.6; opacity: .7; stroke-dasharray: 2 7; }
.pin { width: clamp(54px, 6vw, 80px); transform: translate(-50%, -100%); filter: drop-shadow(0 0 6px #f4b03c) drop-shadow(0 0 18px #e0162b); }
.pin-pulse { position: absolute; left: 56%; top: 46%; width: 90px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 2px #f4b03c99, 0 0 30px #f4b03c66; }
.gmap { grid-column: 1 / -1; position: relative; min-width: 0; height: clamp(320px, 38vw, 380px); border-radius: 12px; overflow: hidden; border: 3px solid #1a070c; background: #0a0204; box-shadow: 0 0 0 1px #ff4d8d55, 0 0 28px #e0162b33, 0 18px 40px #000a; }
.gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.arrive { display: grid; gap: 14px; }
.arrive h3 { margin: 0; font: italic 600 var(--s2)/1.1 var(--f-gilt); font-variation-settings: "opsz" 60; text-wrap: balance; }
.arrive p { margin: 0; color: #dcc3b8; max-width: 46ch; }
.transit { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.roundel { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; min-height: 44px; background: #1a070c; font-size: var(--s-1); color: var(--smoke); }
.roundel i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 400 1.05rem/1 var(--f-neon); font-style: normal; color: #fff2d0; box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px #f4b03c88; }
.maplink { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border-radius: 999px; min-height: 48px; text-decoration: none; font-weight: 700; color: #fff2d0; background: #1a070c; }
.maplink svg { width: 16px; height: auto; flex: none; color: var(--gold); }
.locked { display: flex; align-items: center; gap: 12px; color: var(--copper); font: italic 500 var(--s0)/1.3 var(--f-gilt); }
.locked svg { width: 26px; flex: none; }

.sec-head.center { justify-items: center; text-align: center; }
.sec-head.center .lede { text-wrap: balance; }
@media (min-width: 1000px) { .faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(30px, 5vw, 90px); align-items: start; } .faq-wrap .sec-head { position: sticky; top: 120px; } .faq { max-width: none; } }
.pin-drop { position: absolute; left: 56%; top: 46%; width: 0; height: 0; }
.map .pin-drop .pin { position: absolute; inset: 0 auto auto 0; width: clamp(54px, 6vw, 80px); height: auto; max-width: none; overflow: visible; }
.arrive .neon { margin-bottom: 4px; }
.arrive .lede { margin-bottom: 10px; }

/* Footer: the wet street, the sign reflected in a puddle, the door one more time. */
.foot { position: relative; margin-top: clamp(60px, 9vw, 140px); padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(28px, 4vw, 48px); background: linear-gradient(#0d050700, #0d0507 30%); overflow: hidden; }
.puddle path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.puddle .gas { stroke-width: 8; filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 22px currentColor); } .puddle .core { stroke: #fff3f7; stroke-width: 2.6; }
.puddle { width: min(100%, 980px); margin: 0 auto; transform: scaleY(-1); opacity: .5; filter: blur(2px) url(#wet); -webkit-mask: linear-gradient(to top, #000 10%, #0000 85%); mask: linear-gradient(to top, #000 10%, #0000 85%); }
.foot-in { width: min(1480px, 100%); margin: clamp(-60px, -4vw, -20px) auto 0; display: grid; justify-items: center; gap: clamp(16px, 2vw, 26px); text-align: center; }
.foot-in h2 { margin: 0; font: italic 700 var(--s3)/1.05 var(--f-gilt); font-variation-settings: "opsz" 96; text-wrap: balance; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; color: var(--smoke); font-size: var(--s-1); }
.foot-row a { text-decoration: none; border-bottom: 1px solid #f4b03c55; }
.foot-row a:hover { color: var(--bone); border-color: var(--gold); }
.legal { max-width: 70ch; margin: 0; color: #8f7780; font-size: .82rem; }

/* Cast metal: brass lettering, copper frames, keys and the Programa bar; js/metal.js steers their light from the pointer. */
.cast { color: transparent; text-shadow: none; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(176deg, var(--cu-light) 0%, var(--cu-lt) 20%, var(--cu-mid) 42%, var(--cu-hi) 60%, var(--cu-dk) 80%, var(--cu-lt) 100%); background-size: 100% 260%; background-position: 50% calc(50% - var(--ly, 0) * 35%); filter: url(#metal-l); }
.cast.m { filter: url(#metal-m); } .cast.s { filter: url(#metal-s); }
@media (max-width: 700px) { .cast { filter: url(#metal-m); } .cast.m, .cast.s { filter: url(#metal-s); } .neon { font-weight: 800; } }
span.cast { display: inline-block; max-width: 100%; padding-bottom: .08em; }
.mtl { --bz: 4px; --lift: 18px; --soft: 34px; position: relative; isolation: isolate;
  box-shadow: calc(var(--lx, 0) * -10px) calc(var(--lift) - var(--ly, 0) * 8px) var(--soft) -10px #000e, 0 3px 5px -1px #000d, inset 0 12px 26px -10px #000e, inset 0 -8px 18px -12px #000c; }
.mtl::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; border: var(--bz) solid var(--cu-face);
  border-image: conic-gradient(from calc(20deg + var(--lx, 0) * 50deg), var(--cu-hi), var(--cu-dk) 9%, var(--cu) 20%, var(--cu-sh) 33%, #e8946a 41%, var(--cu-lt) 47%, var(--cu-edge) 60%, var(--cu-spec) 73%, var(--cu-face) 80%, var(--cu-sh) 86%, var(--cu-hi)) 1;
  background: var(--o1), var(--o2), var(--o3), var(--o4); background-origin: border-box; background-clip: border-box; background-repeat: no-repeat; background-position: 0 0, 100% 0, 0 100%, 100% 100%; background-size: clamp(24px, 2vw, 34px) auto; filter: url(#cu-m); }
.mtl.thin { --bz: 2.5px; --lift: 8px; --soft: 18px; }
.mtl.thin::before { filter: url(#cu-s); background-size: 16px auto; }
.mtl.round::before { background: none; border-image: none; }
.mtl.arch-top::before { border-image: none; background: none, none, var(--o3), var(--o4); background-origin: border-box; background-repeat: no-repeat; background-position: 0 0, 100% 0, 0 100%, 100% 100%; background-size: clamp(24px, 2vw, 34px) auto; }
.phone.mtl { --bz: 3px; box-shadow: 0 40px 70px #000d, 0 0 60px var(--glow), inset 0 0 18px #000c; }
.mtl.px > * { transform: translate(calc(var(--lx, 0) * 1.6px), calc(var(--ly, 0) * 1.2px)); }
@property --lift { syntax: "<length>"; inherits: true; initial-value: 18px; }
@property --soft { syntax: "<length>"; inherits: true; initial-value: 34px; }
.lift { transition: transform .35s var(--ease-out), --lift .35s var(--ease-out), --soft .35s var(--ease-out); }
.lift:hover { --lift: 30px; --soft: 50px; transform: translateY(-4px); }
.lift:active { --lift: 6px; --soft: 14px; transform: translateY(1px) scale(.995); transition-duration: .08s; }
.cta .rim { position: absolute; inset: 0; z-index: -2; border-radius: inherit; border: 4px solid var(--cu-face); filter: url(#cu-s); pointer-events: none; }
.stub .lt { justify-self: start; } .stub:nth-child(3) .lt { justify-self: end; }

/* Cast pale-metal lettering: the real text under its own image (js/lettering.js); flat pale text without WebGL2. */
.lt { position: relative; display: inline-block; max-width: 100%; font-family: var(--f-cast); font-style: normal; font-weight: 900; font-variation-settings: normal; letter-spacing: .035em; line-height: 1.08; }
.lt-t { color: var(--lt-face); text-shadow: 0 2px 3px #000a; }
.lt.on .lt-t { color: transparent; text-shadow: none; }
.lt-t::selection { color: transparent; background: #ff4d8d55; }
.lt-img { position: absolute; max-width: none; pointer-events: none; }
/* Small labels and the header wordmark: a lighter variant of the same metal; `plain-sm` on <html> keeps them plain pale text instead. */
.lt-s, .lt-c, .lt-b { --lt-face: #fff0dc; --lt-shade: #fff0dc; --lt-expo: 6; }
.plain-sm :is(.lt-s, .lt-c, .lt-b) { --lt-plain: 1; --lt-face: var(--cu-hi); } .plain-sm .lt-s { font-size: var(--s0); }
.lt-l { font-size: var(--lt-l); } .lt-m { font-size: var(--lt-m); } .lt-s { font-size: var(--lt-s); } .lt-c { font-size: var(--lt-c); } .lt-b { font-size: var(--lt-b); }
.arch text.on { fill: transparent; filter: none; }
.arch:has(text.on) .shine { display: none; }

/* The cursor: a pink ring with a lagging dot that turns into a slit eye over anything you can press. */
.cur, .cur-dot { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0; }
.has-cur .cur, .has-cur .cur-dot { opacity: 1; }
.cur { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; box-shadow: 0 0 0 1.5px #ffc2d6, 0 0 12px #ff4d8d, inset 0 0 8px #ff4d8d88; transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), border-radius .3s var(--ease-out), box-shadow .3s; }
.cur.over { width: 64px; height: 30px; margin: -15px 0 0 -32px; border-radius: 100% 0; transform-origin: center; box-shadow: 0 0 0 1.5px #ffe2a3, 0 0 16px #f4b03c, inset 0 0 10px #f4b03c88; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff0f5; box-shadow: 0 0 8px #ff4d8d; }
.cur.over + .cur-dot { width: 4px; height: 16px; margin: -8px 0 0 -2px; border-radius: 4px; background: #1a0508; box-shadow: 0 0 0 1px #f4b03c; }
@media (hover: hover) and (pointer: fine) { .has-cur, .has-cur a, .has-cur button { cursor: none; } }

/* The intro: nothing lit until the eye opens. */
.intro .bar, .intro .sub, .intro .hero-act, .intro .news { opacity: 0; }
.no-intro .bar, .no-intro .sub, .no-intro .hero-act, .no-intro .news { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .led-track, .news-track, .news-tag i { animation: none; }
  .intro .bar, .intro .sub, .intro .hero-act, .intro .news { opacity: 1; }
}