/* The Beneficiary: site styles. Values come from tokens.css, rules from BRAND.md. */

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font: var(--type-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--candle); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--candle); outline-offset: 3px; }

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: var(--s-6); }
.label { font: var(--type-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); }
section { padding-block: var(--s-24); position: relative; }
.rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent); }

/* ATMOSPHERE: plaster grain and a lens vignette over the whole page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 49; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(8, 6, 4, 0.55) 100%);
}

/* HEADER: clear over the hero, becomes a smoked glass bar once you scroll */
.sentinel { position: absolute; top: 0; height: 80px; width: 1px; }
.top { position: fixed; inset: 0 0 auto; z-index: 40; }
.top::before {
  content: ""; position: absolute; inset: 0; background: rgba(21, 18, 15, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--hairline), var(--shadow-2); opacity: 0; transition: opacity var(--t-hover-out) var(--ease-out);
}
.scrolled .top::before { opacity: 1; }
.top .wrap { position: relative; display: flex; align-items: center; gap: var(--s-8); height: 72px; }
.mark { display: flex; align-items: center; gap: var(--s-3); font: 400 22px/1 var(--font-display); letter-spacing: 0.01em; }
.mark svg { width: 26px; }
.top nav { display: flex; gap: var(--s-8); margin-left: auto; font: var(--type-ui); }
.top nav a { position: relative; padding-block: var(--s-2); color: var(--text-muted); transition: color var(--t-hover-out) var(--ease-out); }
.top nav a::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--candle); transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover-out) var(--ease-out); }
.top nav a:hover { color: var(--text); transition-duration: var(--t-hover-in); }
.top nav a:hover::after { transform: scaleX(1); transition-duration: var(--t-enter); }

/* BUTTONS */
.btn {
  position: relative; display: inline-block; font: var(--type-button); padding: 14px var(--s-8); border-radius: var(--radius);
  cursor: pointer; border: 0; isolation: isolate; white-space: nowrap; transition: transform var(--t-press) var(--ease-out);
}
.btn.small { padding: 10px var(--s-6); font: 600 14px/20px var(--font-ui); }
.btn:active { transform: scale(0.97); }
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; transition: opacity var(--t-hover-out) var(--ease-out); }
.btn:hover::before, .btn:hover::after { transition-duration: var(--t-hover-in); }
.btn.primary { color: var(--on-action); }
.btn.primary::before { background: linear-gradient(180deg, #EDC062 0%, var(--candle) 50%, #CB952D 100%); box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 244, 214, 0.6), inset 0 -1px 0 rgba(90, 58, 6, 0.35); }
.btn.primary::after { box-shadow: var(--shadow-action), 0 0 0 1px rgba(255, 244, 214, 0.4), 0 0 44px rgba(224, 169, 59, 0.28); opacity: 0; }
.btn.secondary { color: var(--text); }
.btn.secondary::before { box-shadow: inset 0 0 0 1px rgba(238, 231, 216, 0.28); }
.btn.secondary::after { background: rgba(238, 231, 216, 0.08); box-shadow: inset 0 0 0 1px rgba(238, 231, 216, 0.5); opacity: 0; }
.btn:hover::after { opacity: 1; }

/* HERO: the building at night with the hall lit */
.hero { text-align: center; padding: 96px 0 var(--s-24); overflow: hidden; }
.hero .glow { position: absolute; left: 50%; top: -120px; width: 1100px; height: 860px; margin-left: -550px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, rgba(224, 169, 59, 0.24), rgba(224, 169, 59, 0.08) 34%, transparent 66%); }
.facade { position: relative; width: min(400px, 74vw, 36vh); margin: 0 auto; color: rgba(238, 231, 216, 0.82); }
.facade .rust { opacity: 0.35; }
.facade .fine { opacity: 0.55; stroke-width: 0.8; }
.facade .solid { fill: var(--ink); }
.facade .halo { filter: blur(22px); opacity: 0.75; }
.facade .spill { filter: blur(10px); opacity: 0.5; }
.hero h1 { font: var(--type-hero); letter-spacing: -0.025em; margin-top: var(--s-6); text-shadow: 0 2px 40px rgba(8, 6, 4, 0.7); }
.hero h1 .mask { display: block; overflow: hidden; padding-bottom: 0.12em; }
.hero h1 .mask span { display: block; }
.hero .tag { font: italic 400 clamp(18px, 2.2vw, 26px)/1.4 var(--font-text); color: var(--text-muted); margin: 0 0 var(--s-6); }
.hero .cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.hero .where { margin-bottom: var(--s-6); }

/* CARDS: gilt edge, a spotlight that follows the cursor, shadow that deepens */
.card {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius); isolation: isolate;
  background: linear-gradient(180deg, var(--slate-2), var(--slate)); box-shadow: var(--shadow-2), var(--top-light);
  transition: transform var(--t-hover-out) var(--ease-out);
}
.card::before { /* gilt edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gilt); pointer-events: none; z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.55; transition: opacity var(--t-hover-out) var(--ease-out);
}
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-3); opacity: 0; pointer-events: none; z-index: -1; transition: opacity var(--t-hover-out) var(--ease-out); }
.card .spot { position: absolute; left: -260px; top: -260px; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 2; opacity: 0; will-change: transform;
  background: radial-gradient(circle, rgba(224, 169, 59, 0.20), rgba(224, 169, 59, 0.06) 40%, transparent 70%); mix-blend-mode: screen; transition: opacity var(--t-hover-out) var(--ease-out); }
.card:hover { transform: translateY(-4px); transition-duration: var(--t-hover-in); }
.card:hover::before, .card:hover::after, .card:hover .spot { opacity: 1; transition-duration: var(--t-hover-in); }

/* PHOTO SLOTS: stand in stage light until real photography arrives */
.photo { position: relative; overflow: hidden; background: var(--ink); }
.photo .art { position: absolute; inset: -4%; transition: transform var(--t-dolly) var(--ease-out); will-change: transform;
  background:
    radial-gradient(ellipse 60% 16% at 50% 100%, rgba(224, 169, 59, 0.42), transparent 70%),
    conic-gradient(from 168deg at 30% -8%, transparent 0deg, rgba(238, 231, 216, 0.16) 9deg, transparent 20deg),
    conic-gradient(from 172deg at 70% -8%, transparent 0deg, rgba(224, 169, 59, 0.22) 9deg, transparent 20deg),
    conic-gradient(from 150deg at 50% -8%, transparent 20deg, rgba(158, 63, 43, 0.34) 30deg, transparent 42deg),
    linear-gradient(180deg, #1B1714, #0E0C0A); }
.photo.b .art { filter: hue-rotate(-12deg) brightness(1.05); transform-origin: 30% 60%; }
.photo.c .art { filter: hue-rotate(10deg); transform-origin: 70% 60%; }
.photo::after { /* floor fade so text over a photo always has ground to stand on */
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 4, 0.10) 0%, transparent 35%, rgba(21, 18, 15, 0.92) 100%); }
.photo small { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 1; font: var(--type-micro); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(238, 231, 216, 0.5); }
a:hover > .photo .art, .feature:hover .photo .art { transform: scale(1.05); }

/* WHAT'S ON */
.head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-12); }
.head h2 { font: var(--type-display); letter-spacing: -0.02em; margin-top: var(--s-3); }
.more { font: var(--type-ui); color: var(--text-muted); border-bottom: 1px solid var(--hairline); padding-bottom: 2px; transition: color var(--t-hover-out) var(--ease-out); }
.more:hover { color: var(--candle); transition-duration: var(--t-hover-in); }
.bill { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.show .photo { aspect-ratio: 4 / 5; }
.show .body { position: absolute; inset: auto 0 0; z-index: 4; padding: var(--s-6); display: grid; grid-template-columns: auto 1fr; gap: var(--s-4) var(--s-6); align-items: end; }
.show time { font: 600 11px/14px var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: center; }
.show time b { display: block; font: 400 56px/52px var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.show h3 { font: italic 400 26px/30px var(--font-text); }
.show p { font: var(--type-ui); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: var(--s-1); }
.show .go { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: var(--s-4); border-top: 1px solid var(--hairline); font: var(--type-ui); }
.show .go b { font: 600 16px/24px var(--font-ui); font-variant-numeric: tabular-nums; }
.show .go span { color: var(--candle); font-weight: 600; display: inline-flex; gap: var(--s-2); }
.show .go i { font-style: normal; transition: transform var(--t-hover-out) var(--ease-out); }
.show:hover .go i { transform: translateX(4px); transition-duration: var(--t-hover-in); }

/* THE HALL: photo with a paper sheet overlapping its edge, window light across the floor */
.hall { overflow: hidden; }
.windowlight { position: absolute; right: -6%; top: 6%; width: 720px; opacity: 0.09; filter: blur(14px); transform: skewX(-24deg) rotate(4deg); pointer-events: none; }
.feature { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.feature .photo { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 16 / 11; border-radius: var(--radius); box-shadow: var(--shadow-3); }
.sheet { grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 2; background: linear-gradient(180deg, #F4EEE2, var(--stucco)); color: var(--ink); padding: var(--s-16) var(--s-12); border-radius: var(--radius); box-shadow: var(--shadow-4), inset 0 1px 0 #fff; }
.sheet .label { color: var(--brick-deep); }
.sheet h2 { font: var(--type-headline); letter-spacing: -0.01em; margin: var(--s-4) 0 var(--s-6); }
.sheet blockquote { font: italic 400 19px/30px var(--font-text); border-left: 2px solid var(--brick); padding-left: var(--s-6); }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid rgba(21, 18, 15, 0.14); }
.facts b { display: block; font: 400 40px/44px var(--font-display); letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.facts span { font: var(--type-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brick-deep); }

/* STATEMENT */
.statement .panel { position: relative; overflow: hidden; background: var(--fade-brick); padding: var(--s-32) var(--s-12); border-radius: var(--radius); text-align: center; box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 220, 200, 0.2); }
.statement .panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 90% at 50% -10%, rgba(255, 214, 170, 0.28), transparent 60%); pointer-events: none; }
.statement h2 { position: relative; font: 400 clamp(40px, 6.4vw, 88px)/1 var(--font-display); letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(60, 16, 6, 0.5); }
.statement h2 em { font-family: var(--font-text); }
.statement .btn { margin-top: var(--s-12); }

/* VISIT */
.visit .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-16); align-items: start; }
.visit h2 { font: var(--type-display); letter-spacing: -0.02em; margin: var(--s-3) 0 var(--s-8); }
.visit address { font: normal 400 24px/36px var(--font-text); }
.visit .btn { margin-top: var(--s-8); }
.ways { display: grid; }
.ways div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-6); padding: var(--s-6) 0; border-top: 1px solid var(--hairline); font: var(--type-title); }
.ways div:last-child { border-bottom: 1px solid var(--hairline); }
.ways span { font: var(--type-ui); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* FOOTER */
footer { padding: var(--s-16) 0 var(--s-24); background: var(--fade-surface); box-shadow: inset 0 1px 0 var(--hairline); position: relative; }
footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-12); }
footer .mark { font-size: 28px; margin-bottom: var(--s-4); }
footer p, footer a { font: var(--type-ui); color: var(--text-muted); display: block; padding-block: var(--s-1); }
footer a:hover { color: var(--text); }
footer h4 { font: var(--type-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text); margin-bottom: var(--s-3); }

/* MOBILE STICKY ACTION */
.dock { display: none; }

/* MOTION
   On load: the building appears, the windows light one by one, the hall glows, the name rises.
   On scroll: fade into focus, once. Under the cursor: lift, spotlight, slow zoom. */
.js .facade .lines { opacity: 0; transition: opacity 500ms var(--ease-out); }
.js .facade .g { opacity: 0; transition: opacity 420ms var(--ease-out) calc(350ms + var(--d, 0) * 130ms); }
.js .facade .halo, .js .facade .spill, .js .hero .glow { opacity: 0; transition: opacity var(--t-lights) var(--ease-out) 950ms; }
.js .hero h1 .mask span { transform: translateY(105%); transition: transform var(--t-mask) var(--ease-enter) 1100ms; }
.js .hero .late { opacity: 0; transition: opacity 500ms var(--ease-out) calc(1400ms + var(--i, 0) * 120ms); }
.js.lit .facade .lines, .js.lit .facade .g, .js.lit .hero .glow, .js.lit .hero .late { opacity: 1; }
.js.lit .facade .halo { opacity: 0.75; }
.js.lit .facade .spill { opacity: 0.5; }
.js.lit .hero h1 .mask span { transform: none; }

.js .reveal { opacity: 0; filter: blur(6px); transition: opacity var(--t-reveal) var(--ease-enter) calc(var(--i, 0) * var(--stagger)), filter var(--t-reveal) var(--ease-enter) calc(var(--i, 0) * var(--stagger)), transform var(--t-hover-out) var(--ease-out); }
.js .reveal.in { opacity: 1; filter: none; }
.js .card.reveal:hover { transition-duration: var(--t-reveal), var(--t-reveal), var(--t-hover-in); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .facade .lines, .js .facade .g, .js .facade .halo, .js .facade .spill, .js .hero .glow, .js .hero .late, .js .reveal { transition-duration: 150ms; transition-delay: 0ms; }
  .js .reveal { filter: none; }
  .js .hero h1 .mask span { transform: none; transition: none; }
  .card:hover, .btn:active, a:hover > .photo .art, .feature:hover .photo .art, .show:hover .go i { transform: none; }
  .card .spot { display: none; }
}

@media (max-width: 900px) {
  section { padding-block: var(--s-16); }
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
  .head h2, .visit h2 { font-size: 44px; line-height: 46px; }
  .bill { grid-template-columns: 1fr; }
  .show .photo { aspect-ratio: 4 / 3; }
  .feature { display: block; }
  .sheet { margin: calc(var(--s-12) * -1) var(--s-4) 0; padding: var(--s-8) var(--s-6); }
  .sheet h2 { font-size: 34px; line-height: 38px; }
  .facts b { font-size: 30px; line-height: 34px; }
  .statement .panel { padding: var(--s-16) var(--s-6); }
  .visit .grid, footer .wrap { grid-template-columns: 1fr; gap: var(--s-12); }
  .ways div { font-size: 22px; }
  footer { padding-bottom: 120px; }
  .dock { position: fixed; inset: auto 0 0; z-index: 45; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background: rgba(21, 18, 15, 0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -1px 0 var(--hairline); transform: translateY(110%); transition: transform var(--t-enter) var(--ease-enter); }
  .scrolled .dock { transform: none; }
  .dock { display: flex; align-items: center; gap: var(--s-1); }
  .dock a:not(.btn) { font: 500 14px/20px var(--font-ui); color: var(--text); padding: 12px var(--s-3); min-height: 44px; white-space: nowrap; }
  .dock .btn { margin-left: auto; padding: 12px var(--s-4); }
  .scrolled .top .btn { opacity: 0; pointer-events: none; }
  .top .btn { transition: opacity var(--t-exit) var(--ease-out), transform var(--t-press) var(--ease-out); }
}

/* NEXT UP: the next show, a countdown to doors and its playbill */
.next .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; }
.next h2 { font: italic 400 clamp(40px, 5.4vw, 76px)/1.02 var(--font-text); letter-spacing: -0.01em; margin: var(--s-4) 0; }
.next .meta { font: var(--type-ui); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.count { display: flex; gap: var(--s-12); margin: var(--s-12) 0; }
.count b { display: block; font: 400 64px/60px var(--font-display); letter-spacing: -0.02em; min-width: 1.2em; }
.count span { font: var(--type-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.playbill {
  display: grid; gap: var(--s-4); justify-items: center; text-align: center; max-width: 440px; width: 100%; margin-inline: auto; padding: var(--s-16) var(--s-8);
  background: linear-gradient(180deg, #F4EEE2, var(--stucco) 60%, #E4DBC8); color: var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-4), inset 0 1px 0 #fff; outline: 1px solid rgba(21, 18, 15, 0.28); outline-offset: -12px; transform: rotate(-1.6deg);
}
.playbill:hover { transform: rotate(0deg) translateY(-4px); }
.js .playbill.reveal:hover { transition-duration: var(--t-reveal), var(--t-reveal), var(--t-enter); }
.pb-s { font: 600 11px/16px var(--font-ui); letter-spacing: 0.26em; text-transform: uppercase; }
.pb-m { font: 400 20px/26px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.pb-xl { font: 400 clamp(44px, 5vw, 64px)/0.98 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--brick-deep); }
.pb-it { font: italic 400 18px/26px var(--font-text); }
.pb-rule { width: 70%; height: 5px; border-block: 1px solid var(--ink); border-top-width: 2px; }

/* FILTER PILLS */
.pills { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pill { font: var(--type-ui); padding: 10px var(--s-4); min-height: 44px; border: 0; border-radius: var(--radius); cursor: pointer; color: var(--text-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); transition: transform var(--t-press) var(--ease-out), color var(--t-hover-in) var(--ease-out); }
.pill:hover { color: var(--text); }
.pill:active { transform: scale(0.97); }
.pill[aria-pressed="true"] { background: var(--stucco); color: var(--ink); box-shadow: var(--shadow-1); }
.show[hidden] { display: none; }
.all { text-align: center; margin-top: var(--s-12); }
.all .more { display: inline-block; }

/* THE BUILDING IS A LIGHT SWITCH */
.facade .pane { cursor: pointer; }
.js.lit .facade .pane.out, .facade .pane.out { opacity: 0.08; transition: opacity var(--t-hover-out) var(--ease-out); }
.js.lit.hall-off .facade .halo, .js.lit.hall-off .facade .spill { opacity: 0; transition: opacity 500ms var(--ease-out); }
.js.lit.hall-off .hero .glow { opacity: 0.2; transition: opacity 900ms var(--ease-out); }

/* THE LIST */
.signup { text-align: center; }
.signup h2 { font: var(--type-display); letter-spacing: -0.02em; margin: var(--s-3) 0 var(--s-8); }
.signup form { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.signup input { font: 400 16px/24px var(--font-ui); color: var(--text); width: min(340px, 100%); padding: 14px var(--s-4); border: 0; border-radius: var(--radius); background: #0F0D0B; box-shadow: inset 0 2px 3px rgba(8, 6, 4, 0.9), inset 0 0 0 1px var(--hairline), 0 1px 0 rgba(238, 231, 216, 0.06); }
.signup input::placeholder { color: rgba(185, 176, 160, 0.7); }
.signup .note { font: var(--type-ui); color: var(--text-muted); min-height: 20px; margin-top: var(--s-4); }

@media (prefers-reduced-motion: reduce) { .playbill, .playbill:hover { transform: none; } }
@media (max-width: 900px) {
  .next .grid { grid-template-columns: 1fr; gap: var(--s-12); }
  .count { gap: var(--s-8); }
  .count b { font-size: 48px; line-height: 48px; }
  .head { flex-direction: column; align-items: start; }
}

/* PHONE FIRST FIXES: most visitors are on a phone */
section[id] { scroll-margin-top: 72px; }
@media (max-width: 900px) {
  body::after { background: radial-gradient(ellipse at 50% 40%, transparent 70%, rgba(8, 6, 4, 0.35) 100%); }
  .signup form { flex-direction: column; align-items: stretch; }
  .signup input { width: 100%; }
  .signup .btn, .next .btn.primary, .hero .cta .btn { text-align: center; }
  .next .btn.primary { display: block; }
  .hero .cta { flex-wrap: nowrap; }
  .hero .cta .btn { flex: 1; padding-inline: var(--s-4); }
  footer a { padding-block: 12px; }
  footer .wrap { gap: var(--s-8); }
}

/* ============ SITE WIDE POLISH ============ */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
html { scrollbar-color: var(--slate-3) var(--ink); }
.top nav a[aria-current] { color: var(--text); }
.top nav a[aria-current]::after { transform: scaleX(1); }

/* Ornament: the fanlight over the front door, between two fading hairlines */
.ornament { display: flex; align-items: center; justify-content: center; gap: var(--s-6); color: rgba(224, 169, 59, 0.6); padding-inline: var(--s-6); }
.ornament i { height: 1px; flex: 1; max-width: 420px; background: linear-gradient(90deg, transparent, var(--hairline)); }
.ornament i:last-child { background: linear-gradient(270deg, transparent, var(--hairline)); }
.ornament svg { width: 44px; }

/* Real photographs: graded warm and a little dark so daylight shots sit in the night palette */
.ph { position: relative; overflow: hidden; background: var(--slate); }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) sepia(0.22) contrast(1.06) brightness(0.86); transition: transform var(--t-dolly) var(--ease-out); }
.photo.ph img { position: absolute; inset: 0; }
a:hover > .photo.ph img, .feature:hover .photo.ph img { transform: scale(1.05); }
.photo small a, .cred a { color: rgba(238, 231, 216, 0.6); }
.photo small { letter-spacing: 0.08em; text-transform: none; font: var(--type-micro); }

/* George */
.facade .george { opacity: 0; transition: opacity 300ms var(--ease-out); pointer-events: none; }
.hall-off .facade .george { opacity: 0.6; transition: opacity 900ms var(--ease-out) 1100ms; }

/* Inline sign up on the dark page */
.form .note { font: var(--type-ui); color: var(--text-muted); min-height: 20px; margin-top: var(--s-3); flex-basis: 100%; }
.form.inline { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-8); }
.form.inline input { flex: 1 1 220px; font: 400 16px/24px var(--font-ui); color: var(--text); padding: 14px var(--s-4); border: 0; border-radius: var(--radius); background: #0F0D0B; box-shadow: inset 0 2px 3px rgba(8, 6, 4, 0.9), inset 0 0 0 1px var(--hairline), 0 1px 0 rgba(238, 231, 216, 0.06); }
.form.inline input::placeholder { color: rgba(185, 176, 160, 0.7); }
.signup .form.inline { justify-content: center; max-width: 560px; margin-inline: auto; }
.form.sent > :not(.note):not(h2) { display: none; }
.form.sent .note { font: italic 400 22px/30px var(--font-text); color: inherit; }
.next .grid > div:first-child h2 { font: 400 clamp(40px, 5.4vw, 72px)/1 var(--font-display); letter-spacing: -0.02em; }
.playbill .pb-xl { text-wrap: balance; }

/* Sheet extras */
.sheet .link, .prose .link { display: inline-flex; gap: var(--s-2); margin-top: var(--s-8); font: 600 14px/20px var(--font-ui); color: var(--brick-deep); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link i, .go i { font-style: normal; transition: transform var(--t-hover-out) var(--ease-out); }
.link:hover i, a:hover .go i { transform: translateX(4px); transition-duration: var(--t-hover-in); }

/* Story cards */
.story { display: flex; flex-direction: column; }
.story .photo { aspect-ratio: 4 / 3; }
.story .body { position: relative; z-index: 4; padding: var(--s-6); display: grid; gap: var(--s-3); flex: 1; align-content: start; }
.story h3 { font: 400 24px/30px var(--font-display); }
.story .go { font: 600 14px/20px var(--font-ui); color: var(--candle); display: inline-flex; gap: var(--s-2); margin-top: var(--s-2); }
.stories.first { padding-top: var(--s-8); }

/* Page heads */
.pagehead { padding-top: 168px; max-width: 880px; }
.pagehead h1 { font: 400 clamp(40px, 6.4vw, 80px)/1.02 var(--font-display); letter-spacing: -0.02em; margin-top: var(--s-4); }
.pagehead .back { display: inline-block; padding-block: var(--s-3); }
.byline { font: var(--type-ui); color: var(--text-muted); margin-top: var(--s-6); }
.banner { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; padding-bottom: var(--s-16); overflow: hidden; }
.banner.short-banner { min-height: min(60vh, 520px); }
.banner .photo { position: absolute; inset: 0; }
.banner .photo::after { background: linear-gradient(180deg, rgba(21, 18, 15, 0.55) 0%, rgba(21, 18, 15, 0.15) 35%, rgba(21, 18, 15, 0.96) 100%); }
.banner .wrap { position: relative; width: 100%; }
.banner h1 { font: var(--type-hero); letter-spacing: -0.025em; margin-top: var(--s-3); text-shadow: 0 2px 40px rgba(8, 6, 4, 0.8); }
.banner .tag { font: italic 400 clamp(18px, 2.2vw, 26px)/1.4 var(--font-text); color: var(--stucco); opacity: 0.85; margin-top: var(--s-2); }
.banner .cred { position: absolute; right: var(--s-4); bottom: var(--s-3); font: var(--type-micro); }

/* Long reading */
.prose { max-width: 760px; padding-block: var(--s-12) var(--s-16); }
.prose > * + * { margin-top: var(--s-6); }
.prose h2 { font: 400 clamp(28px, 3.6vw, 40px)/1.12 var(--font-display); letter-spacing: -0.01em; margin-top: var(--s-16); }
.prose p, .prose li { font: 400 18px/31px var(--font-text); }
.prose a:not(.link) { color: var(--stucco); text-decoration: underline; text-decoration-color: var(--candle); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose a:not(.link):hover { color: var(--candle); }
.prose ul { padding-left: 1.2em; display: grid; gap: var(--s-3); }
.prose li::marker { color: var(--candle); }
.prose .drop::first-letter { font: 400 84px/66px var(--font-display); float: left; padding: 8px 12px 0 0; color: var(--candle); }
.short { background: linear-gradient(180deg, var(--slate-2), var(--slate)); padding: var(--s-8); border-radius: var(--radius); box-shadow: var(--shadow-2), var(--top-light); border-left: 2px solid var(--candle); }
.short p { margin-top: var(--s-3); font: 400 19px/31px var(--font-text); }
.said { font: 600 11px/14px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--candle); box-shadow: inset 0 0 0 1px rgba(224, 169, 59, 0.5); padding: 4px 8px; border-radius: var(--radius); margin-right: 6px; white-space: nowrap; vertical-align: 2px; }
.aside { font-style: italic; color: var(--text-muted); }
.fig { margin-block: var(--s-12); }
.fig .ph { border-radius: var(--radius); box-shadow: var(--shadow-3); max-height: 78vh; }
.fig .ph img { display: block; height: auto; max-height: 78vh; }
.fig.small { max-width: 420px; }
.fig.lead { margin-top: 0; }
.fig figcaption { font: var(--type-ui); color: var(--text-muted); margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); justify-content: space-between; }
.fig figcaption span a { font: var(--type-caption); color: rgba(185, 176, 160, 0.75); text-decoration: none; }
.sources { margin-top: var(--s-16); padding-top: var(--s-8); border-top: 1px solid var(--hairline); }
.sources h2 { font: var(--type-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--s-4); }
.sources p, .sources li { font: var(--type-ui); color: var(--text-muted); }
.sources ul { margin-top: var(--s-3); gap: var(--s-2); }

/* Timeline */
.timeline { list-style: none; padding: 0; margin-top: var(--s-8); position: relative; }
.timeline::before { content: ""; position: absolute; left: 86px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, var(--hairline) 6%, var(--hairline) 94%, transparent); }
.timeline li { display: grid; grid-template-columns: 70px 1fr; gap: var(--s-8); padding-block: var(--s-4); position: relative; align-items: baseline; }
.timeline li::before { content: ""; position: absolute; left: 82px; top: 30px; width: 9px; height: 9px; border-radius: 50%; background: var(--candle); box-shadow: 0 0 0 4px var(--ink), 0 0 16px rgba(224, 169, 59, 0.6); }
.timeline li.is-said::before { background: var(--ink); box-shadow: 0 0 0 1px var(--candle), 0 0 0 4px var(--ink); }
.timeline b { font: 400 30px/36px var(--font-display); text-align: right; font-variant-numeric: lining-nums; }
.timeline p { margin: 0; }

/* Credits */
.creditlist { list-style: none; padding: 0; }
.creditlist li { display: grid; gap: 2px; padding-block: var(--s-3); border-top: 1px solid var(--hairline); }
.creditlist span { font: var(--type-ui); color: var(--text-muted); }

/* Forms on a paper sheet */
.form.sheet { display: grid; gap: var(--s-6); grid-column: auto; padding: var(--s-12) var(--s-8); }
.form.sheet h2 { font: 400 34px/38px var(--font-display); margin: 0; }
.form.sheet label, .form.sheet legend { display: grid; gap: var(--s-2); font: 600 13px/18px var(--font-ui); letter-spacing: 0.02em; }
.form.sheet fieldset { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.form.sheet legend { margin-bottom: var(--s-2); }
.form.sheet input:not([type=radio]), .form.sheet textarea { font: 400 16px/24px var(--font-ui); color: var(--ink); width: 100%; padding: 13px var(--s-4); border: 0; border-radius: var(--radius); background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 2px 3px rgba(21, 18, 15, 0.14), inset 0 0 0 1px rgba(21, 18, 15, 0.28); }
.form.sheet input:focus-visible, .form.sheet textarea:focus-visible { outline: 2px solid var(--brick); outline-offset: 1px; }
.form.sheet textarea { resize: vertical; }
.chip { position: relative; display: inline-flex !important; }
.chip input { position: absolute; opacity: 0; inset: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(21, 18, 15, 0.3); font: 500 14px/20px var(--font-ui); cursor: pointer; }
.chip input:checked + span { background: var(--ink); color: var(--stucco); box-shadow: var(--shadow-1); }
.chip input:focus-visible + span { outline: 2px solid var(--brick); outline-offset: 2px; }
.stepper { display: grid; grid-template-columns: 48px 1fr 48px; gap: var(--s-2); }
.stepper button { font: 400 22px/1 var(--font-ui); min-height: 48px; border: 0; border-radius: var(--radius); background: transparent; box-shadow: inset 0 0 0 1px rgba(21, 18, 15, 0.3); cursor: pointer; color: var(--ink); }
.stepper button:active { transform: scale(0.97); }
.stepper input { text-align: center; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.form.sheet .btn { justify-self: start; }
.form.sheet .note { color: var(--brick-deep); margin: 0; }

/* Hire */
.enquire .grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-16); align-items: start; }
.points { list-style: none; padding: 0; display: grid; }
.points li { display: grid; grid-template-columns: 150px 1fr; align-items: baseline; gap: var(--s-6); padding: var(--s-6) 0; border-top: 1px solid var(--hairline); }
.points li:last-child { border-bottom: 1px solid var(--hairline); }
.points b { font: 400 48px/48px var(--font-display); letter-spacing: -0.02em; }
.points span { font: var(--type-ui); color: var(--text-muted); }
.ways a { border-bottom: 1px solid var(--hairline); }

/* New Year invitation */
.invite { padding-top: var(--s-12); }
.invite .count { justify-content: center; margin: var(--s-6) 0 var(--s-8); }
.invite .where { margin: var(--s-8) 0 0; color: var(--candle); }
.invite h1 { margin-top: var(--s-2); }
.nye .next .grid { align-items: start; }

/* Lost */
.lost { min-height: 100vh; display: grid; place-items: center; text-align: center; padding-top: 120px; }
.lost .stairs { width: 220px; margin: 0 auto var(--s-8); color: rgba(238, 231, 216, 0.7); }
.lost .ghost { opacity: 0.85; filter: drop-shadow(0 0 14px rgba(238, 231, 216, 0.45)); }
.lost h1 { font: 400 clamp(40px, 7vw, 88px)/1 var(--font-display); letter-spacing: -0.02em; margin: var(--s-3) 0 var(--s-4); }
.lost .tag { font: italic 400 20px/30px var(--font-text); color: var(--text-muted); max-width: 46ch; margin: 0 auto var(--s-8); }
.lost .cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* Footer */
footer .wrap { display: block; }
.foot-mark { display: flex; align-items: center; gap: var(--s-6); padding-bottom: var(--s-12); margin-bottom: var(--s-12); border-bottom: 1px solid var(--hairline); color: var(--stucco); }
.foot-mark svg { width: clamp(44px, 7vw, 84px); color: var(--candle); flex: none; }
.foot-mark span { font: 400 clamp(40px, 9vw, 120px)/0.95 var(--font-display); letter-spacing: -0.025em; }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-12); }
footer p { line-height: 22px; }

@media (max-width: 900px) {
  .feature .photo { aspect-ratio: 4 / 5; }
  .pagehead { padding-top: 120px; }
  .banner { min-height: min(70vh, 600px); padding-bottom: var(--s-12); }
  .banner.short-banner { min-height: min(52vh, 440px); }
  .prose p, .prose li { font-size: 17px; line-height: 29px; }
  .prose h2 { margin-top: var(--s-12); }
  .short { padding: var(--s-6); }
  .timeline::before { left: 62px; }
  .timeline li { grid-template-columns: 50px 1fr; gap: var(--s-6); }
  .timeline li::before { left: 58px; top: 26px; }
  .timeline b { font-size: 22px; line-height: 30px; }
  .enquire .grid { grid-template-columns: 1fr; gap: var(--s-12); }
  .points li { grid-template-columns: 110px 1fr; }
  .points b { font-size: 36px; line-height: 40px; }
  .form.sheet { margin: 0; padding: var(--s-8) var(--s-6); }
  .form.sheet .btn { justify-self: stretch; text-align: center; }
  .form.inline .btn { flex: 1 1 100%; text-align: center; }
  footer .cols { grid-template-columns: 1fr; gap: var(--s-8); }
  .foot-mark { gap: var(--s-4); }
  .nye .dock { display: none; }
  .ornament svg { width: 36px; }
}
@media (prefers-reduced-motion: reduce) { .ph img, a:hover > .photo.ph img, .feature:hover .photo.ph img { transform: none; } }

/* ============ FORMS: small print and the robot trap ============ */
.trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fine { font: var(--type-caption); color: var(--text-muted); flex-basis: 100%; margin: 0; }
.fine a { text-decoration: underline; text-underline-offset: 3px; }
.form.sheet .fine { color: rgba(21, 18, 15, 0.62); }
.company { font: var(--type-caption); color: rgba(185, 176, 160, 0.7); margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--hairline); max-width: 760px; }

/* Legal pages */
.legal h2 { font-size: clamp(24px, 3vw, 32px); margin-top: var(--s-12); }
.legal p, .legal li { font: 400 17px/28px var(--font-text); }
table.plain { width: 100%; border-collapse: collapse; font: var(--type-ui); }
table.plain th { text-align: left; font: var(--type-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
table.plain td { vertical-align: top; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--hairline); font: 400 15px/23px var(--font-text); }
@media (max-width: 900px) {
  /* a four column table cannot fit a phone, so each row becomes a labelled card */
  table.plain, table.plain tbody, table.plain tr, table.plain td { display: block; }
  table.plain tr:first-child { display: none; }
  table.plain tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline); }
  table.plain td { border: 0; padding: 4px 0; font-size: 16px; line-height: 25px; }
  table.plain td::before { display: block; font: var(--type-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--candle); margin-top: var(--s-2); }
  table.plain td:nth-child(2)::before { content: "Why"; }
  table.plain td:nth-child(3)::before { content: "Lawful basis"; }
  table.plain td:nth-child(4)::before { content: "How long"; }
}

/* ============ NEW YEAR PARTY ============
   The one page allowed to loop: a party invitation. Fireworks, music rising from the hall, a live countdown. */
#sky { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.nye main { position: relative; z-index: 1; }
.invite { padding-top: var(--s-12); cursor: crosshair; }
.invite .stage { position: relative; width: min(400px, 74vw, 36vh); margin: 0 auto; }
.invite .stage .facade { width: 100%; }
.invite h1 { margin-top: var(--s-2); }
.invite .where { margin: var(--s-8) 0 0; color: var(--candle); }
.invite .tag { margin-bottom: var(--s-4); }

/* notes drifting up out of the hall window */
.notes { position: absolute; left: 50%; top: 34%; width: 0; height: 0; }
.notes span { position: absolute; left: 0; top: 0; font: 400 22px/1 var(--font-text); color: var(--candle); opacity: 0; text-shadow: 0 0 12px rgba(224, 169, 59, 0.7); animation: note 4.2s linear infinite; will-change: transform, opacity; }
.notes span:nth-child(1) { --x: -64px; animation-delay: 1.8s; }
.notes span:nth-child(2) { --x: 46px; animation-delay: 2.9s; font-size: 26px; }
.notes span:nth-child(3) { --x: -18px; animation-delay: 4.1s; font-size: 18px; }
.notes span:nth-child(4) { --x: 78px; animation-delay: 5.2s; }
@keyframes note {
  0% { transform: translate(0, 0) rotate(-8deg) scale(0.6); opacity: 0; }
  12% { opacity: 0.95; }
  60% { opacity: 0.7; }
  100% { transform: translate(var(--x), -150px) rotate(14deg) scale(1.1); opacity: 0; }
}

/* the windows flicker like a full room */
.nye.lit .facade .pane:not(.out):not(#hallglass), .js.lit .nye .facade .pane:not(.out):not(#hallglass) { animation: party 2.6s ease-in-out infinite alternate; animation-delay: calc(1.6s + var(--d, 1) * 0.37s); }
@keyframes party { from { opacity: 1; } to { opacity: 0.62; } }

/* countdown */
.invite .count { justify-content: center; gap: var(--s-8); margin: var(--s-4) 0 var(--s-8); }
.invite .count div { min-width: 64px; }
.invite .count b { font-variant-numeric: tabular-nums lining-nums; overflow: hidden; }
.invite .count [data-u="s"] { color: var(--candle); }
.count.done { font: italic 400 clamp(34px, 7vw, 64px)/1.1 var(--font-text); color: var(--candle); text-shadow: 0 0 30px rgba(224, 169, 59, 0.6); }
.tap { margin-top: var(--s-8); color: var(--stone); animation: tap 2.4s ease-in-out infinite alternate; }
@keyframes tap { from { opacity: 0.35; } to { opacity: 0.9; } }

/* order of the evening */
.running { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-6); position: relative; }
.running::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--hairline), var(--hairline) 85%, transparent); }
.running li { position: relative; padding-top: var(--s-8); display: grid; gap: var(--s-2); }
.running li::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--candle); box-shadow: 0 0 0 4px var(--ink), 0 0 16px rgba(224, 169, 59, 0.6); }
.running b { font: 400 clamp(44px, 5.2vw, 68px)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.running span { font: var(--type-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.running .is-midnight b { color: var(--candle); text-shadow: 0 0 34px rgba(224, 169, 59, 0.55); }
.running .is-midnight span { color: var(--candle); }
.byo .panel .label { color: var(--stucco); opacity: 0.85; position: relative; margin-bottom: var(--s-4); }
.nye .next .grid { align-items: start; }

@media (max-width: 900px) {
  .invite { padding-top: var(--s-8); }
  .invite .count { gap: var(--s-4); }
  .invite .count div { min-width: 58px; }
  .invite .count b { font-size: 44px; line-height: 46px; }
  .invite .cta { flex-direction: column; }
  .invite .cta .btn { flex: none; }
  .running { grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-6); }
  .running::before { display: none; }
  .running li { padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
  .running .is-midnight { grid-column: 1 / -1; text-align: center; padding-block: var(--s-6); }
  .running .is-midnight::before { left: 50%; margin-left: -4px; }
  .running .is-midnight b { font-size: 72px; }
  .tap { margin-top: var(--s-6); }
}
@media (prefers-reduced-motion: reduce) {
  .notes, .tap { display: none; }
  .nye .facade .pane { animation: none !important; }
  .invite { cursor: auto; }
}

/* Order of the evening on a phone: three acts in a row, then midnight and the last song centred */
@media (max-width: 900px) {
  .running { grid-template-columns: repeat(3, 1fr); gap: var(--s-8) var(--s-3); }
  .running b { font-size: 36px; }
  .running span { letter-spacing: 0.14em; line-height: 16px; }
  .running li:last-child { grid-column: 1 / -1; text-align: center; }
  .running li:last-child::before { left: 50%; margin-left: -4px; }
}