/* Layout: one South Kensington scene top to bottom. Sky + LED board, skyline, towers running down
   behind content panels, street-level footer. Sky phase (day/dawn/dusk/night) set on <html data-phase>. */

/* ===== BRAND TOKENS: swap for Imperial AI Week branding (see brand/README.md) ===== */
:root {
  --brand: #3152c4;        /* primary: logo blue (brand/logos/aihack.jpeg) */
  --mark-pale: #9dbde3;    /* logo pale square, darkened for light backgrounds */
  --wm-blue: #3152c4;      /* "$./imperial" line of the wordmark */
  --brand-ink: #ffffff;
  --glow: #ffb547;         /* secondary: lit windows, sun, "now" highlight. Illustration only */
  --glow-ink: #1c1300;

  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* ===== end brand tokens ===== */

  /* fixed, never rebranded */
  --danger: #c8191f;
  --danger-ink: #ffffff;
  --exit: #138a3e;
  --access: #1667c7;
  --board: #0d111c;
  --board-ink: #f2f3f6;
  --board-muted: #8e96a9;
  --win-day: #dfe6ef;      /* tower window glass by day (used in generated tiles) */
  --win-night: #1c2440;    /* unlit window at night */

  /* phase: day (default) */
  --canyon: #d9e1ea;
  --sky-ink: #131a2c;
  --sky-muted: #48526b;
  --b-far: #c5cfdc;
  --b-mid: #aab6c8;
  --b-near: #8d9ab0;
  --b-low: #9faabb;
  --st-bldg: #b9c2cf;
  --st-tree: #7d9389;
  --st-hedge: #6c8479;
  --st-pole: #3a404e;
  --st-trunk: #6c6a66;
  --win: #e3e9f1;
  --frieze: #c4a397;
  --copper: #7eaa98;
  --rib: #b5c0cf;
  --glass: #cdd8e4;
  --tree: #9fb1aa;
  --trunk: #8a968f;
  --panel: #fbfbfa;
  --panel-2: #f1f3f6;
  --paper: #f4f1e8;
  --paper-grid: rgba(70, 80, 100, 0.07);
  --line: #dce1e9;
  --ink: #141824;
  --muted: #586075;
  --link: var(--brand);
  --deadline: #b4570c;
  --food: #2f7d4f;
  --danger-text: #c8191f;
  --topbar: rgba(251, 251, 250, 0.86);
  --street: #353c4c;
  --kerb: #c3c9d4;
  --street-ink: #e9ecf2;
  --steel: #82401f;
  --steel-back: #4c2f26;
  --bus: #9c3b33;
  --bus-win: #d4dce6;

  --radius: 0;
  --radius-s: 0;
  --step: clamp(16px, 2.8vw, 34px);
  --cut: clamp(22px, 3.6vw, 46px);
  color-scheme: light;
  --ease: cubic-bezier(.45, .05, .25, 1);
  --t: 1.4s;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

:root[data-phase="dawn"] {
  --canyon: #e7dcd8;
  --sky-muted: #5a4f63;
  --b-far: #cbbfcd;
  --b-mid: #b2a6bc;
  --b-near: #9588a5;
  --b-low: #a497b3;
  --st-bldg: #bdb1c3;
  --st-tree: #8c8b98;
  --st-hedge: #7e7c8b;
  --st-pole: #4a4656;
  --st-trunk: #77707e;
  --win: #e2d9e6;
  --rib: #bfb3c8;
  --glass: #d6c8d6;
  --tree: #a39eae;
  --trunk: #918a9c;
}

:root[data-phase="dusk"],
:root[data-phase="night"] {
  --mark-pale: #c4dcf4;
  --wm-blue: #5f7ee6;
  --sky-ink: #eef0f7;
  --sky-muted: #aab1c6;
  --panel: #1d2640;
  --panel-2: #252f4c;
  --paper: #202a46;
  --paper-grid: rgba(255, 255, 255, 0.05);
  --line: #34405f;
  --ink: #e8ebf3;
  --muted: #9ba3b9;
  --link: #8fb0ff;
  --deadline: #ffb547;
  --food: #6fcf97;
  --danger-text: #ff7a7e;
  --topbar: rgba(16, 21, 37, 0.86);
  --street: #070a13;
  --kerb: #262d42;
  --steel: #26232a;
  --steel-back: #18161b;
  --bus: #5e2723;
  --bus-win: var(--glow);
  color-scheme: dark;
}
:root[data-phase="dusk"] {
  --canyon: #1b1834;
  --b-far: #3c3459;
  --b-mid: #2d284b;
  --b-near: #1f1b39;
  --b-low: #27224a;
  --st-bldg: #221e3d;
  --st-tree: #1a1730;
  --st-hedge: #15122a;
  --st-pole: #0e0c1d;
  --st-trunk: #15122a;
  --win: #2a2548;
  --frieze: #6b4651;
  --copper: #3f6a60;
  --rib: #463e66;
  --glass: #3a3360;
  --tree: #241f3e;
  --trunk: #1d1934;
}
:root[data-phase="night"] {
  --canyon: #0a0f1f;
  --b-far: #19213a;
  --b-mid: #141b31;
  --b-near: #0e1428;
  --b-low: #121a31;
  --st-bldg: #111830;
  --st-tree: #141c30;
  --st-hedge: #101727;
  --st-pole: #070b15;
  --st-trunk: #0d1322;
  --win: #1c2440;
  --frieze: #3a2a33;
  --copper: #2c4c45;
  --rib: #222b45;
  --glass: #1a2240;
  --tree: #0c1322;
  --trunk: #0a101d;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body {
  margin: 0; position: relative; overflow-x: hidden;
  background-color: var(--canyon);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t) var(--ease);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1; display: flex; align-items: flex-start; gap: 14px; }
/* section numbers as wayfinding signs: a blue board with a pointed arrow end */
main { counter-reset: sec; }
h2 { align-items: center; }
.panel h2::before {
  counter-increment: sec; content: counter(sec, decimal-leading-zero) " \2192";
  flex: none; font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.08em; color: #fff;
  background: var(--brand); padding: 7px 16px 7px 9px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}
.help h2::before { background: var(--danger); }
h3 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 0; }
time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.wrap { max-width: 1200px; margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.section { padding-top: 28px; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.side .panel h2 { font-size: 1.9rem; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.section-sub { color: var(--muted); font: 400 0.75rem/1.4 var(--font-mono); }

/* everything that changes with the sky */
.panel, .topbar, .deadline, .talk, .contact, .tabs, .chip, .copy, .jump a, .sky-opt, .sky-live, .footer, .room .num {
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
html.no-anim *, html.no-anim *::before, html.no-anim *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== Scene ===== */
.scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.sky { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--horizon, 900px) + 2px); opacity: 0; transition: opacity var(--t) var(--ease); }
.sky-day   { background: linear-gradient(#a3c4e4 0%, #c6d9ec 50%, #d9e1ea 100%); }
.sky-dawn  { background: linear-gradient(#8592c6 0%, #c7a5c0 45%, #efc4b2 80%, #e7dcd8 100%); }
.sky-dusk  { background: linear-gradient(#1c1e47 0%, #4d3a72 40%, #b5677a 74%, #e3966c 90%, #1b1834 100%); }
.sky-night { background: linear-gradient(#03060f 0%, #0a1230 50%, #16204a 86%, #0a0f1f 100%); }
:root[data-phase="day"] .sky-day,
:root[data-phase="dawn"] .sky-dawn,
:root[data-phase="dusk"] .sky-dusk,
:root[data-phase="night"] .sky-night { opacity: 1; }

.stars { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--horizon, 900px) * 0.72); opacity: 0; transition: opacity var(--t) var(--ease); }
.stars i { position: absolute; background: #fff; border-radius: 50%; animation: twinkle 4.5s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.25; } }
:root[data-phase="night"] .stars { opacity: 1; }
:root[data-phase="dusk"] .stars { opacity: 0.45; }

.sun, .moon { position: absolute; top: 0; border-radius: 50%; transition: transform 2.2s var(--ease), opacity var(--t) var(--ease); }
.sun {
  left: 76%; width: 92px; height: 92px; margin-left: -46px;
  background: radial-gradient(circle, #fff7df 0 40%, #ffd98a 66%, #ffc35e 70%, rgba(255, 195, 94, 0) 71%);
  box-shadow: 0 0 90px 30px rgba(255, 196, 110, 0.32);
  transform: translateY(150px);
}
:root[data-phase="dawn"] .sun { transform: translateY(calc(var(--horizon, 900px) - 330px)); }
:root[data-phase="dusk"] .sun { transform: translateY(calc(var(--horizon, 900px) - 290px)); box-shadow: 0 0 110px 40px rgba(255, 140, 90, 0.4); }
:root[data-phase="night"] .sun { transform: translateY(var(--horizon, 900px)); opacity: 0; }

.moon {
  left: 86%; width: 64px; height: 64px; margin-left: -32px;
  background:
    radial-gradient(circle at 34% 40%, rgba(160, 170, 200, 0.45) 0 7px, transparent 8px),
    radial-gradient(circle at 62% 66%, rgba(160, 170, 200, 0.35) 0 5px, transparent 6px),
    radial-gradient(circle at 60% 30%, rgba(160, 170, 200, 0.3) 0 3px, transparent 4px),
    #eef0f8;
  box-shadow: 0 0 60px 14px rgba(200, 210, 255, 0.22);
  transform: translateY(var(--horizon, 900px)); opacity: 0;
}
:root[data-phase="night"] .moon { transform: translateY(116px); opacity: 1; }
:root[data-phase="dusk"] .moon { transform: translateY(calc(var(--horizon, 900px) * 0.55)); opacity: 0.6; }

.cloud { position: absolute; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); transition: opacity var(--t) var(--ease), background-color var(--t) var(--ease); animation: drift 60s linear infinite alternate; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 48px; height: 44px; left: 22%; top: -22px; }
.cloud::after { width: 34px; height: 30px; left: 52%; top: -14px; }
.cloud-1 { top: 118px; left: 44%; width: 150px; }
.cloud-2 { top: 230px; left: 84%; width: 120px; animation-duration: 80s; }
@keyframes drift { to { transform: translateX(60px); } }
:root[data-phase="dawn"] .cloud { background: rgba(255, 226, 222, 0.7); }
:root[data-phase="dusk"] .cloud { background: rgba(255, 170, 160, 0.28); }
:root[data-phase="night"] .cloud { background: rgba(160, 175, 220, 0.07); }

/* towers continuing down the page */
.shafts { position: absolute; left: 0; right: 0; top: calc(var(--horizon, 900px) - 1px); bottom: 0; }
.shaft { position: absolute; top: 0; bottom: 0; background-color: var(--b-near); background-image: linear-gradient(90deg, transparent 88%, rgba(0, 0, 0, 0.09) 88%); transition: background-color var(--t) var(--ease); }
.shaft.back { background-color: var(--b-low); opacity: 0.82; }
.shaft::before, .shaft::after { content: ""; position: absolute; inset: 0; background-size: inherit; background-repeat: repeat-y; background-position: 0 var(--tile-y, 0); transition: opacity var(--t) var(--ease); }
/* windows stay full strength where the columns meet the skyline, then recede behind the content */
.shaft::before, .shaft::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.5) 280px);
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.5) 280px);
}
@media (min-width: 960px) {
  .shaft::before, .shaft::after {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.32) 280px);
    mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.32) 280px);
  }
}
.shaft::before { background-image: var(--tile-day); }
.shaft::after { background-image: var(--tile-night); opacity: 0; }
:root[data-phase="dusk"] .shaft::before, :root[data-phase="night"] .shaft::before { opacity: 0; }
:root[data-phase="dusk"] .shaft::after, :root[data-phase="night"] .shaft::after { opacity: 1; }
:root[data-phase="dawn"] .shaft::before { opacity: 0.8; }

/* skyline drawing */
.skyline-wrap { position: relative; line-height: 0; margin-top: 12px; }
#skyline { display: block; width: 100%; height: auto; overflow: visible; }
#skyline .b-far { fill: var(--b-far); }
#skyline .b-mid { fill: var(--b-mid); }
#skyline .b-near { fill: var(--b-near); }
#skyline .b-low { fill: var(--b-low); }
#skyline .frieze { fill: var(--frieze); }
#skyline .copper { fill: var(--copper); }
#skyline .arch { fill: var(--win); }
#skyline .dome-rib { fill: none; stroke: var(--rib); stroke-width: 1.6; }
#skyline .glass { fill: var(--glass); }
#skyline .copper-hi { fill: #fff; opacity: 0.14; }
#skyline .shade { fill: #000; opacity: 0.09; }
#skyline .tree { fill: var(--tree); }
#skyline .trunk { fill: var(--trunk); }
#skyline .beacon { fill: #e5484d; opacity: 0.5; }
#skyline .haze-0 { stop-color: var(--canyon); stop-opacity: 0; }
#skyline .haze-1 { stop-color: var(--canyon); stop-opacity: 1; }
#skyline .win { fill: var(--win); }
#skyline .b-far, #skyline .b-mid, #skyline .b-near, #skyline .b-low, #skyline .frieze, #skyline .copper, #skyline .arch, #skyline .dome-rib, #skyline .glass, #skyline .tree, #skyline .trunk, #skyline stop {
  transition: fill var(--t) var(--ease), stroke var(--t) var(--ease), stop-color var(--t) var(--ease);
}
#skyline .win { transition: fill 0.5s ease var(--d, 0s); }
:root[data-phase="night"] #skyline .win.lit,
:root[data-phase="dusk"] #skyline .win.lit { fill: var(--glow); }
:root[data-phase="night"] #skyline .beacon { opacity: 1; animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

/* ===== Top bar ===== */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--topbar); z-index: 30; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; background: var(--ink); color: var(--panel); padding: 10px 14px; border-radius: 0; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--topbar); color: var(--ink);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1280px; margin-inline: auto; padding: 10px var(--gutter-r) 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand ctrl" "nav nav"; gap: 6px 12px; align-items: center;
}
.brand { grid-area: brand; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.brand-mark { flex: none; width: 40px; height: 40px; overflow: visible; }
/* logo mark, redrawn from brand/logos/aihack.jpeg */
.brand-mark .m-b { fill: #3152c4; }
.brand-mark .m-p { fill: var(--mark-pale); }
.brand-mark .m-c { fill: #14bff0; }
.brand-mark .m-mag { fill: #ff2bd6; }
.brand-mark .m-cyn { fill: #22e6ff; }
.brand-mark .m-dash { fill: none; stroke: var(--mark-pale); stroke-width: 2.5; stroke-dasharray: 4 3; }
/* pixel wordmark lockup, after brand/logos/aihack.jpeg */
.wordmark { display: grid; gap: 4px; line-height: 1; min-width: 0; }
.wm-cmd { font: 600 0.76rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--wm-blue); }
.wm-name {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 700 1.3rem/1 "Silkscreen", var(--font-mono); letter-spacing: 0.05em; color: var(--ink);
  text-shadow: -1.5px 0 #ff2bd6, 1.5px 0 #22e6ff;
}
.wm-arrow { font: 600 0.8rem/1 var(--font-mono); color: var(--wm-blue); text-shadow: none; }
.wm-cursor { display: inline-block; width: 0.5em; height: 0.95em; margin-left: 2px; background: currentColor; box-shadow: -1.5px 0 #ff2bd6, 1.5px 0 #22e6ff; animation: blink 1.1s steps(1) infinite; }
.sky-controls { grid-area: ctrl; display: flex; align-items: center; gap: 6px; }
.sky-opt, .sky-live {
  font: 500 0.78rem/1 var(--font-body); color: var(--ink); background: transparent; border: 1px solid var(--line);
  border-radius: 0; cursor: pointer; touch-action: manipulation;
}
.sky-live { padding: 0 11px; height: 34px; display: inline-flex; align-items: center; gap: 6px; }
.sky-live svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sky-live[hidden] { display: none; }
.sky-live:hover, .sky-opt:hover { background: var(--panel-2); }
.sky-pick { display: flex; }
@media (max-width: 350px) { .wm-cursor { display: none; } .sky-controls { gap: 4px; } .sky-opt, .sky-live { width: 28px !important; } }
.sky-opt { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: var(--muted); transition: background 0.3s, color 0.3s; }
.sky-opt + .sky-opt { margin-left: -1px; }
.sky-opt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sky-opt svg .fill { fill: currentColor; stroke: none; }
.sky-opt[aria-pressed="true"] { color: #fff; background: var(--brand); border-color: var(--brand); position: relative; z-index: 1; }
.sky-opt:focus-visible { position: relative; z-index: 2; }
@media (max-width: 420px) {
  .sky-opt { width: 30px; height: 32px; }
  .sky-opt svg { width: 16px; height: 16px; }
  .sky-live { padding: 0; width: 30px; height: 32px; justify-content: center; }
  .wm-name { font-size: 1.04rem; gap: 4px; }
  .wm-cmd { font-size: 0.68rem; }
  .sl-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.jump { grid-area: nav; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1); padding-inline: calc(var(--gutter) - 10px) var(--gutter-r); }
.jump::-webkit-scrollbar { display: none; }
.jump a {
  flex: none; position: relative; color: var(--muted); text-decoration: none; font-size: 0.85rem; font-weight: 500;
  padding: 10px 10px 12px; transition: color 0.2s;
}
.jump a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transition: transform 0.25s var(--ease); }
.jump a:hover { color: var(--ink); }
.jump a[aria-current] { color: var(--ink); }
.jump a[aria-current]::after { transform: scaleX(1); }
.jump a.jump-help { color: var(--danger-text); display: inline-flex; align-items: center; gap: 6px; }
.jump a.jump-help::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
@media (min-width: 960px) {
  .topbar-inner { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav ctrl"; padding-block: 0; }
  .brand, .sky-controls { padding-block: 10px; }
  .jump { justify-content: end; margin-inline: 0; padding-inline: 0; }
  .jump a { padding-block: 20px; }
}

/* ===== Hero ===== */
main { position: relative; z-index: 1; }
.hero { padding-block: clamp(48px, 8vw, 96px) 8px; display: grid; gap: 22px; color: var(--sky-ink); transition: color var(--t) var(--ease); }
.hero .eyebrow { color: var(--sky-muted); }
/* Title in the logo's pixel face, with the wordmark's magenta/cyan split and short bursts of static. */
.hero h1 {
  position: relative; max-width: 11ch;
  font: 700 clamp(2.5rem, 1.1rem + 6.6vw, 6.6rem)/0.98 "Silkscreen", var(--font-mono);
  letter-spacing: 0.02em; text-transform: uppercase;
  text-shadow: -0.04em 0 #ff2bd6, 0.04em 0 #22e6ff;
}
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  text-shadow: none; opacity: 0;
}
.glitch::before { color: #ff2bd6; animation: glitch-a 4.2s steps(1) infinite; }
.glitch::after { color: #22e6ff; animation: glitch-b 4.2s steps(1) infinite; }
.glitch { animation: glitch-jitter 4.2s steps(1) infinite; }
@keyframes glitch-a {
  0%, 82%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  83% { opacity: 0.9; transform: translate(-0.08em, 0); clip-path: inset(12% 0 62% 0); }
  85% { opacity: 0.9; transform: translate(0.06em, 0); clip-path: inset(58% 0 18% 0); }
  87% { opacity: 0.9; transform: translate(-0.12em, 0); clip-path: inset(34% 0 44% 0); }
  89% { opacity: 0.9; transform: translate(0.04em, 0); clip-path: inset(78% 0 4% 0); }
  91% { opacity: 0; }
}
@keyframes glitch-b {
  0%, 82%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  84% { opacity: 0.9; transform: translate(0.1em, 0); clip-path: inset(44% 0 36% 0); }
  86% { opacity: 0.9; transform: translate(-0.05em, 0); clip-path: inset(6% 0 80% 0); }
  88% { opacity: 0.9; transform: translate(0.08em, 0); clip-path: inset(66% 0 12% 0); }
  90% { opacity: 0; }
}
@keyframes glitch-jitter {
  0%, 82%, 92%, 100% { transform: none; }
  84% { transform: translate(0.02em, -0.01em) skewX(-4deg); }
  86% { transform: translate(-0.02em, 0.01em); }
  88% { transform: translate(0.01em, 0) skewX(3deg); }
  90% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glitch, .glitch::before, .glitch::after { animation: none; }
}
.hero-meta { margin: 6px 0 0; display: grid; gap: 0; border-top: 1px solid color-mix(in srgb, var(--sky-ink) 16%, transparent); transition: border-color var(--t) var(--ease); }
.hero-meta > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--sky-ink) 10%, transparent); }
.hero-meta dt { font: 500 0.68rem/1.6 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky-muted); }
.hero-meta dd { margin: 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.hero-meta time { font-family: var(--font-body); }
@media (min-width: 720px) {
  .hero-meta { grid-template-columns: 1fr 1.8fr; }
  .hero-meta > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 20px 0 0; border-bottom: 0; }
  .hero-meta > div + div { padding-left: 20px; border-left: 1px solid color-mix(in srgb, var(--sky-ink) 10%, transparent); }
}
.board {
  margin-top: 10px; background: #0a0c12; color: var(--board-ink);
  border-radius: 0; overflow: hidden; border: 6px solid #15181f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 60px -30px rgba(5, 8, 20, 0.75);
}
.board-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; background: #12151d; border-bottom: 1px solid #000;
  font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--board-muted);
}
.bh-sep { color: #3a4152; margin-inline: 4px; }
.board-clock .flap { font-size: 0.9rem; }
.board-row { display: grid; grid-template-columns: 1fr; }
.board-cell { padding: 16px 18px 18px; display: grid; gap: 7px; align-content: start; min-width: 0; border-top: 1px solid #1a1e29; }
.board-cell:first-child { border-top: 0; }
.board-label { font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--board-muted); display: flex; align-items: center; gap: 8px; }
.board-title { font: 600 1.08rem/1.3 var(--font-body); letter-spacing: -0.005em; }
.board-sub { font: 400 0.78rem/1.4 var(--font-mono); color: var(--board-muted); }
.board-sub a { color: inherit; }
.board-count { font-size: 1.5rem; line-height: 1; }
#board-now { box-shadow: inset 3px 0 0 var(--glow); }
#board-now .board-title { color: var(--glow); }
#board-now .board-label { color: var(--glow); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
@media (min-width: 720px) {
  .board-row { grid-template-columns: 1.3fr 1.2fr 1fr; }
  .board-cell { border-top: 0; border-left: 1px solid #1a1e29; }
  .board-cell:first-child { border-left: 0; }
}
/* split-flap tiles */
.flap { display: inline-flex; gap: 2px; perspective: 300px; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.fl {
  position: relative; display: inline-block; min-width: 0.78em; padding: 0.14em 0.08em 0.1em; text-align: center;
  background: linear-gradient(#20242f 0 50%, #191c25 50% 100%); color: var(--glow); border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 #000; font-weight: 500;
}
.fl::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.7); }
.fl-gap { display: inline-block; width: 0.32em; }
.fl.flip { animation: flapIn 0.42s cubic-bezier(.3, .7, .4, 1) both; transform-origin: 50% 50%; }
@keyframes flapIn { 0% { transform: rotateX(-88deg); filter: brightness(1.8); } 60% { transform: rotateX(8deg); } 100% { transform: none; filter: none; } }
.board-clock .fl { color: var(--board-ink); }

/* ===== Panels ===== */
/* Panels are cut like building silhouettes (clip-path), so the shadow sits on the parent as a filter. */
.layout, .section { filter: drop-shadow(0 1px 0 rgba(8, 12, 30, 0.06)) drop-shadow(0 22px 26px rgba(8, 12, 30, 0.16)); }
/* at night a faint light rim traces each panel's cut shape so it lifts off the dark buildings */
:root[data-phase="night"] .layout, :root[data-phase="night"] .section,
:root[data-phase="dusk"] .layout, :root[data-phase="dusk"] .section {
  filter: drop-shadow(0 -1px 0 rgba(160, 180, 255, 0.22)) drop-shadow(0 1px 0 rgba(160, 180, 255, 0.1)) drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45));
}
.panel {
  background: var(--panel); color: var(--ink);
  border: 0; border-radius: 0;
  padding: clamp(20px, 3.4vw, 40px);
  display: grid; gap: 24px; min-width: 0;
  position: relative;
}

/* ===== Schedule + deadlines ===== */
.layout { display: grid; gap: 24px; margin-top: -24px; position: relative; }
@media (min-width: 720px) { .layout { margin-top: -56px; } }
.layout > * { min-width: 0; }
@media (min-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .side { position: sticky; top: 84px; }
}
.tabs { display: inline-flex; gap: 18px; }
.tabs button {
  font: 500 0.95rem/1 var(--font-body); color: var(--muted); background: none; border: 0; padding: 8px 0 10px;
  border-bottom: 2px solid transparent; cursor: pointer; touch-action: manipulation; transition: color 0.2s, border-color 0.2s;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs button small { font: 400 0.75rem/1 var(--font-mono); margin-left: 5px; color: var(--muted); }

.filters { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.chip {
  font: 500 0.82rem/1 var(--font-body); color: var(--ink); background: none; border: 0; padding: 6px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; touch-action: manipulation;
}
.chip i { width: 9px; height: 9px; border-radius: 0; background: var(--c); border: 1.5px solid var(--c); flex: none; transition: background-color 0.15s; }
.chip:hover { color: var(--link); }
.chip[aria-pressed="false"] { color: var(--muted); }
.chip[aria-pressed="false"] i { background: transparent; }
.tag i { width: 7px; height: 7px; border-radius: 0; background: var(--c); flex: none; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 66px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.slot { display: grid; grid-template-columns: 54px 26px minmax(0, 1fr); padding: 12px 0; position: relative; }
.slot time { font-size: 0.88rem; font-weight: 500; padding-top: 1px; letter-spacing: -0.02em; }
.slot time span { display: block; font-weight: 400; font-size: 0.72rem; color: var(--muted); }
.slot .dot { justify-self: center; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--panel); border: 2px solid var(--c); position: relative; z-index: 1; }
.slot-body { display: grid; gap: 4px; padding-left: 8px; min-width: 0; }
.slot-title { font-weight: 600; font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.012em; }
.slot-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.85rem; color: var(--muted); align-items: center; }
.slot-meta a { color: inherit; }
.slot-meta a:hover { color: var(--link); }
.slot-detail { font-size: 0.9rem; color: var(--muted); max-width: 60ch; }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); }
.slot.is-past .slot-title, .slot.is-past time { color: var(--muted); }
.slot.is-past .tag, .slot.is-past .dot { filter: grayscale(1); opacity: 0.6; }
.slot.is-now::before { content: ""; position: absolute; inset: 0 -12px; border-radius: 0; background: color-mix(in srgb, var(--glow) 18%, transparent); z-index: -1; }
.slot.is-now { isolation: isolate; }
.slot.is-now .dot { background: var(--glow); border-color: var(--glow-ink); }
.now-badge { font: 600 0.62rem/1 var(--font-mono); letter-spacing: 0.12em; background: var(--glow); color: var(--glow-ink); padding: 4px 6px; border-radius: 0; }
.slot.type-deadline .slot-title { color: var(--deadline); }
.slot.type-food .slot-title { color: var(--food); }
.slot.type-food .dot { background: var(--food); }
/* building closes: impossible to miss */
.slot.is-alert { isolation: isolate; }
.slot.is-alert::before { content: ""; position: absolute; inset: 4px -12px; background: color-mix(in srgb, var(--danger) 12%, transparent); border-left: 4px solid var(--danger); z-index: -1; }
.slot.is-alert .slot-title { color: var(--danger-text); font-size: 1.15rem; }
.slot.is-alert .slot-detail { color: var(--ink); font-weight: 500; }
.deadline.is-alert:not(.is-past) strong { color: var(--danger-text); }
.deadline.is-alert:not(.is-past) strong::before { content: "\26A0\FE0E  "; }
.empty { color: var(--muted); padding: 16px 0; }

.side .panel { gap: 6px; }
.deadlines { list-style: none; margin: 0; padding: 0; display: grid; }
.deadline { border-bottom: 1px solid var(--line); padding: 14px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
.deadline:last-child { border-bottom: 0; }
.deadline strong { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.deadline .when { font: 400 0.75rem/1.4 var(--font-mono); color: var(--muted); grid-column: 1; }
.deadline .left { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 500 0.9rem/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--deadline); text-align: right; }
.deadline p { grid-column: 1 / -1; font-size: 0.83rem; color: var(--muted); margin-top: 4px; }
.deadline.is-past strong { color: var(--muted); font-weight: 500; }
.deadline.is-past .left { color: var(--muted); }
.deadline.is-past p { display: none; }
.deadline.is-next { position: relative; }
.deadline.is-next::before { content: ""; position: absolute; left: -14px; top: 14px; bottom: 14px; width: 2px; background: var(--deadline); border-radius: 0; }

/* ===== Map ===== */
.map-grid { display: grid; gap: 20px; }
@media (min-width: 860px) { .map-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.map-figure {
  margin: 0; border: 1px solid var(--line); border-radius: 0; padding: 14px; display: grid; gap: 12px;
  background-color: var(--paper);
  background-image: linear-gradient(var(--paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--line);
}
.map-title { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 500 0.66rem/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.map-title span:first-child { color: var(--ink); }
/* floor tabs */
.floor-tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.floor-tabs button {
  display: grid; gap: 2px; text-align: left; padding: 10px 16px 11px; margin-bottom: -1px; cursor: pointer; touch-action: manipulation;
  font: 600 0.95rem/1.1 var(--font-body); color: var(--muted); background: transparent; border: 1px solid transparent; border-bottom-color: var(--line);
}
.floor-tabs button span { font: 500 0.62rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.floor-tabs button:hover { color: var(--ink); }
.floor-tabs button[aria-selected="true"] { color: var(--ink); background: var(--panel); border-color: var(--line); border-bottom-color: var(--panel); box-shadow: inset 0 3px 0 var(--brand); }
@media (max-width: 560px) { .floor-tabs { display: grid; grid-template-columns: 1fr 1fr; } .floor-tabs button { padding: 9px 12px; } }

/* the drawing */
.map-figure { position: relative; }
/* fixed-size window: zooming changes the viewBox, not the element */
.map-viewport { --ar: 0.8; position: relative; overflow: hidden; }
#venue-map { display: block; width: min(100%, calc(min(74vh, 780px) * var(--ar))); aspect-ratio: var(--ar); height: auto; margin-inline: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.map-viewport.zoomed #venue-map { cursor: grab; touch-action: none; outline: 1px dashed var(--line); outline-offset: 2px; }
.map-viewport.zoomed #venue-map.dragging { cursor: grabbing; }
.map-zoom #zoom-fit { width: auto; padding-inline: 10px; font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.map-foot { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.map-zoom { display: flex; flex: none; }
.map-zoom button { width: 34px; height: 34px; font: 500 1.1rem/1 var(--font-mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.map-zoom button + button { margin-left: -1px; }
.map-zoom button:disabled { color: var(--line); cursor: default; }
.map-note { margin: 0; font-size: 0.85rem; color: var(--muted); }
#venue-map .fl-floor { fill: var(--panel); stroke: none; }
#venue-map .fl-wall { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: miter; pointer-events: none; }
#venue-map .fl-block { fill: color-mix(in srgb, var(--ink) 9%, var(--panel)); stroke: color-mix(in srgb, var(--ink) 30%, var(--panel)); stroke-width: 1.2; }
#venue-map .fl-void { fill: var(--paper); stroke: color-mix(in srgb, var(--ink) 30%, var(--panel)); stroke-width: 1.2; stroke-dasharray: 6 5; }
#venue-map .fl-room { fill: color-mix(in srgb, var(--brand) 22%, var(--panel)); stroke: var(--brand); stroke-width: 1.75; transition: fill 0.25s; }
#venue-map .fl-room.overflow { fill: color-mix(in srgb, var(--brand) 7%, var(--panel)); stroke-dasharray: 9 6; }
#venue-map .fl-room.active { fill: color-mix(in srgb, var(--glow) 45%, var(--panel)); stroke: var(--glow); }
#venue-map .fl-stairs { fill: url(#stair-hatch); stroke: color-mix(in srgb, var(--ink) 45%, var(--panel)); stroke-width: 1.2; }
#venue-map .hatch { stroke: color-mix(in srgb, var(--ink) 45%, var(--panel)); stroke-width: 1.4; }
#venue-map .fl-wc rect { fill: var(--panel); stroke: var(--muted); stroke-width: 1.2; }
#venue-map .fl-wc text { fill: var(--muted); font: 700 13px var(--font-mono); }
#venue-map .fl-label text { fill: var(--muted); font: 600 14px var(--font-mono); letter-spacing: 0.5px; paint-order: stroke; stroke: var(--panel); stroke-width: 5px; }
/* entrances: brand-blue arrow + filled pill, so they stand out from rooms and assembly points */
#venue-map .fl-door path { fill: var(--brand); stroke: var(--panel); stroke-width: 2; vector-effect: none; }
#venue-map .fl-door rect { fill: var(--brand); }
#venue-map .fl-door text { fill: #fff; font: 700 16px var(--font-mono); letter-spacing: 0.3px; }
/* fire assembly points: green safety-sign squares outside the building */
#venue-map .fl-assembly rect { fill: var(--exit); stroke: #fff; stroke-width: 2; vector-effect: none; }
#venue-map .fl-assembly .ap { fill: #fff; font: 700 14px var(--font-mono); }
#venue-map .fl-assembly .ap-lbl { fill: var(--exit); font: 700 15px var(--font-body); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
/* hackspaces: solid rooms */
#venue-map .fl-room.hackspace { fill: color-mix(in srgb, var(--brand) 34%, var(--panel)); stroke-width: 2.5; }
#venue-map .north path { fill: var(--ink); }
#venue-map .north text { fill: var(--muted); font: 700 14px var(--font-mono); }
#venue-map .ui { transform: scale(var(--ui, 1)); }
#venue-map polygon, #venue-map rect, #venue-map path { vector-effect: non-scaling-stroke; }
#venue-map .pin { cursor: pointer; }
#venue-map .pin circle { fill: var(--brand); stroke: var(--panel); stroke-width: 2; vector-effect: none; }
#venue-map .pin .num { fill: var(--brand-ink); font: 700 15px var(--font-mono); }
#venue-map .pin .lbl { fill: var(--ink); font: 700 18px var(--font-body); paint-order: stroke; stroke: var(--panel); stroke-width: 6px; stroke-linejoin: round; }
#venue-map .pin.overflow circle { fill: var(--panel); stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 5 3.5; vector-effect: none; }
#venue-map .pin.overflow .num { fill: var(--brand); }
#venue-map .pin.overflow .lbl { fill: var(--muted); }
#venue-map .pin.active circle { fill: var(--glow); stroke: var(--glow); }
#venue-map .pin.active .num { fill: var(--glow-ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 14px; height: 12px; display: inline-block; border-radius: 0; }
.lg-room { background: color-mix(in srgb, var(--brand) 22%, var(--panel)); border: 1.5px solid var(--brand); }
.lg-overflow { border: 1.5px dashed var(--brand); }
.lg-block { background: color-mix(in srgb, var(--ink) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--ink) 30%, var(--panel)); }
.lg-stairs { border: 1px solid var(--muted); background: repeating-linear-gradient(-45deg, var(--muted) 0 1.2px, transparent 1.2px 4px); }
.lg-door { width: 0; height: 0; border: 7px solid transparent; border-left: 12px solid var(--brand); border-right: 0; }
.lg-ap { width: 12px; height: 12px; background: var(--exit); border-radius: 2px; }

/* room list, grouped by floor */
.rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: start; }
.rooms ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.room-floor { margin: 0 0 4px; font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.room button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border: 1px solid transparent; cursor: pointer; }
.room button:disabled { cursor: default; }
.room button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.room button:not(:disabled):hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.room.active button { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 18%, transparent); }
.room .num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font: 700 0.75rem/1 var(--font-mono); }
.room.overflow .num { background: transparent; color: var(--brand); border: 1.5px dashed var(--brand); }
.room.unpinned .num { background: transparent; color: var(--muted); border: 1.5px solid var(--line); }
.room strong { display: block; }
.room-text > span { font-size: 0.85rem; color: var(--muted); }

/* ===== Talks: programme cards ===== */
.talks { display: grid; gap: 0 36px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.talk { border-top: 1px solid var(--line); padding: 20px 0 24px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-content: start; }
.talk-when { display: grid; gap: 3px; align-content: start; padding-right: 14px; border-right: 1px solid var(--line); }
.talk-day { font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.talk-time { font: 400 1.9rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.talk-end { font: 400 0.72rem/1.2 var(--font-mono); color: var(--muted); }
.talk-body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.talk h3 { font: 400 1.55rem/1.1 var(--font-display); letter-spacing: -0.01em; }
.talk-who { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.talk-who small { display: block; color: var(--muted); font-size: 0.78rem; }
.mono-tile { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--ink); color: var(--panel); font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.04em; }
.talk p { font-size: 0.9rem; color: var(--muted); }
.talk-room { font: 400 0.76rem/1.4 var(--font-mono); color: var(--muted); }
.talk-room a { color: inherit; }

/* ===== Tracks: ranked plaques ===== */
.tracks { display: grid; gap: 0 36px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.track { position: relative; border-top: 1px solid var(--line); padding: 20px 0 26px; display: grid; gap: 8px; align-content: start; }
.track .rank { position: absolute; top: 16px; right: 0; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--muted); }
.track h3 { font: 400 clamp(1.7rem, 2.6vw, 2.1rem)/1.05 var(--font-display); letter-spacing: -0.01em; color: var(--ink); padding-right: 36px; text-wrap: balance; }
.track .sponsor { font: 500 0.64rem/1.45 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.track p { font-size: 0.9rem; color: var(--muted); }
.prize-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.track .prize { font: 600 1.05rem/1.2 var(--font-body); color: var(--ink); letter-spacing: -0.01em; }
.track .places { font: 400 0.76rem/1.4 var(--font-mono); color: var(--muted); }
.extras summary { cursor: pointer; list-style: none; font: 500 0.72rem/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--link); }
.extras summary::-webkit-details-marker { display: none; }
.extras summary::before { content: "+ "; }
.extras[open] summary::before { content: "\2212  "; }
.track ul { margin: 6px 0 0; padding: 0; list-style: none; font: 400 0.74rem/1.6 var(--font-mono); color: var(--muted); }
.track li { position: relative; padding-left: 14px; }
.track li::before { content: "\2192"; position: absolute; left: 0; color: var(--brand); }
@media (min-width: 720px) {
  .tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Lists ===== */
.two-col { display: grid; gap: 32px; }
.two-col > div { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 800px) { .two-col { grid-template-columns: 1fr 1fr; gap: 48px; } }
.two-col h3, .help-grid h3 { font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.checklist, .plain { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.checklist li::before { content: ""; width: 14px; height: 14px; margin-top: 4px; border: 1.5px solid var(--muted); border-radius: 0; }
.plain li { padding-left: 18px; position: relative; }
.plain li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 8px; height: 1px; background: var(--muted); }
.note { font-size: 0.9rem; color: var(--muted); }

.info { margin: 0; display: grid; border-top: 1px solid var(--line); }
.info div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info dt { font-weight: 600; letter-spacing: -0.01em; }
.info dd { margin: 0; color: var(--muted); max-width: 65ch; }
@media (min-width: 720px) { .info div { grid-template-columns: 220px 1fr; gap: 24px; } }

.meals { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.meals li { display: grid; grid-template-columns: 52px 84px minmax(0, 1fr); gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.meals time { font-weight: 500; font-size: 0.85rem; }
.meals .day { font: 400 0.75rem/1 var(--font-mono); color: var(--muted); }
.meals strong { font-weight: 600; }

/* ===== Help ===== */
.panel.help { box-shadow: inset 0 4px 0 var(--danger); }
.help h2 { color: var(--danger-text); }
.contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.contact { border-top: 1px solid var(--line); padding: 16px 0; display: grid; gap: 6px; align-content: start; }
.contact.urgent { border-top: 2px solid var(--danger); }
.contact .label { font: 500 0.66rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.contact.urgent .label { color: var(--danger-text); }
.contact .number { font: 500 1.35rem/1.2 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; user-select: all; overflow-wrap: anywhere; }
.contact .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.contact small { color: var(--muted); font-size: 0.82rem; }
.copy { font: 500 0.75rem/1 var(--font-body); background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 7px 10px; cursor: pointer; flex: none; touch-action: manipulation; }
.copy:hover { background: var(--panel-2); }
.help-grid { display: grid; gap: 28px; }
.help-grid > div { display: grid; gap: 10px; align-content: start; }
.help-grid p { color: var(--muted); font-size: 0.93rem; }
@media (min-width: 800px) { .help-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* ===== FAQ ===== */
.faq { display: grid; border-top: 1px solid var(--line); counter-reset: q; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 500; letter-spacing: -0.01em; list-style: none; display: flex; align-items: baseline; gap: 16px; }
.faq summary::before { counter-increment: q; content: "Q" counter(q, decimal-leading-zero); flex: none; width: 2.6rem; font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.06em; color: var(--muted); }
.faq summary::after { margin-left: auto; }
.faq details p { padding-left: calc(2.6rem + 16px); }
.faq summary:hover { color: var(--link); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.3rem/1 var(--font-body); color: var(--muted); transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--muted); max-width: 65ch; }

/* ===== Street-level footer ===== */
.footer {
  position: relative; z-index: 1; margin-top: clamp(180px, 140px + 8vw, 270px);
  background: var(--street); color: var(--street-ink);
  border-top: 10px solid var(--kerb);
  padding-block: 36px calc(100px + env(safe-area-inset-bottom, 0px));
}
.footer::before { /* road markings */
  content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 34px, transparent 34px 70px);
}
.footer .wrap { display: grid; gap: 16px; padding-top: 34px; }
.footer .eyebrow { color: rgba(233, 236, 242, 0.7); }
.footer .wrap > .eyebrow:first-child { text-align: center; font-size: 0.8rem; letter-spacing: 0.3em; color: var(--street-ink); }
/* Supported by: one street, each tier drawn differently */
.sponsor-street { display: grid; gap: 40px; min-width: 0; padding-block: 8px 12px; }
.sponsor-street, .tier, .tier-row, .tier-row > li { min-width: 0; }
.tier { display: grid; gap: 14px; }
.tier-name { margin: 0; display: flex; align-items: center; gap: 14px; font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(233, 236, 242, 0.6); }
.tier-name::before, .tier-name::after { content: ""; flex: 1; height: 1px; background: rgba(233, 236, 242, 0.16); }
.tier-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.logo-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.logo { display: block; width: 100%; height: calc(var(--logo-h, 28px) * var(--k, 1)); background: var(--street-ink);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.logo.icon { width: var(--logo-h); height: var(--logo-h); flex: none; }
.logo-text { font: 600 calc(var(--logo-h, 28px) * 0.62)/1.15 var(--font-body); color: var(--street-ink); text-align: center; }

/* headline: a lit billboard on legs, full width */
.tier-billboard .tier-row > li { flex: 1 1 100%; }
.billboard { display: grid; justify-items: center; --logo-h: clamp(52px, 8vw, 96px); }
.bb-face {
  position: relative; width: 100%; display: grid; justify-items: center; gap: 14px; padding: clamp(26px, 4vw, 44px) clamp(18px, 6vw, 80px);
  border: 2px solid rgba(233, 236, 242, 0.5); background: rgba(233, 236, 242, 0.04);
}
.bb-face::before { /* marquee bulbs */
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background:
    radial-gradient(circle, var(--bulb) 0 2px, transparent 2.6px) top left / 18px 6px repeat-x,
    radial-gradient(circle, var(--bulb) 0 2px, transparent 2.6px) bottom left / 18px 6px repeat-x,
    radial-gradient(circle, var(--bulb) 0 2px, transparent 2.6px) top left / 6px 18px repeat-y,
    radial-gradient(circle, var(--bulb) 0 2px, transparent 2.6px) top right / 6px 18px repeat-y;
}
.tier-billboard { --bulb: rgba(233, 236, 242, 0.45); }
:root[data-phase="night"] .tier-billboard, :root[data-phase="dusk"] .tier-billboard { --bulb: var(--glow); }
:root[data-phase="night"] .bb-face, :root[data-phase="dusk"] .bb-face { border-color: color-mix(in srgb, var(--glow) 70%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--glow) 25%, transparent), inset 0 0 30px color-mix(in srgb, var(--glow) 10%, transparent); }
.bb-face .logo-wrap { max-width: 560px; }
.bb-kicker { font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(233, 236, 242, 0.65); }
.bb-legs { width: min(60%, 420px); height: 26px; background: linear-gradient(90deg, rgba(233,236,242,0.35) 0 6px, transparent 6px calc(100% - 6px), rgba(233,236,242,0.35) calc(100% - 6px)); }

/* gold, silver & bronze: shopfronts that share the row equally */
.tier-shops .tier-row > li { flex: 1 1 var(--shop-w); max-width: var(--shop-max); }
.tier-lg { --shop-w: 240px; --shop-max: 420px; --logo-h: 44px; }
.tier-md { --shop-w: 200px; --shop-max: 340px; --logo-h: 32px; }
.shop { position: relative; display: grid; grid-template-rows: auto auto 1fr; border-inline: 1px solid rgba(233, 236, 242, 0.16); }
.shop .awning { /* scalloped */
  height: 38px; margin-inline: 0;
  background: repeating-linear-gradient(90deg, rgba(233, 236, 242, 0.78) 0 36px, rgba(233, 236, 242, 0.22) 36px 72px);
  -webkit-mask: linear-gradient(#000, #000) left top / 100% calc(100% - 18px) no-repeat, radial-gradient(circle at 18px 0, #000 0 17.5px, transparent 18px) left bottom / 36px 18px repeat-x;
          mask: linear-gradient(#000, #000) left top / 100% calc(100% - 18px) no-repeat, radial-gradient(circle at 18px 0, #000 0 17.5px, transparent 18px) left bottom / 36px 18px repeat-x;
}
.tier-md .shop .awning { height: 12px; -webkit-mask: none; mask: none; background: rgba(233, 236, 242, 0.55); margin-inline: -4px; }
.plate { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 3px 8px; font: 600 0.58rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--street); background: var(--street-ink); }
.shop-sign { display: grid; place-items: center; margin: 14px 10px 0; padding: 18px 14px; border: 1px solid rgba(233, 236, 242, 0.26); }
.tier-md .shop-sign { margin-top: 22px; padding: 14px 12px; }
.shop-window { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 10px 0; min-height: 52px; }
.tier-md .shop-window { min-height: 34px; }
.shop-window i { background: rgba(233, 236, 242, 0.08); transition: background-color var(--t) var(--ease); }
:root[data-phase="night"] .shop-window i, :root[data-phase="dusk"] .shop-window i { background: color-mix(in srgb, var(--glow) 28%, transparent); }

/* bounty: hanging signs on wall brackets */
.tier-hanging .tier-row { gap: clamp(24px, 8vw, 120px); }
.hang { display: grid; justify-items: center; width: min(280px, 42%); --logo-h: 30px; }
.hang-bracket { width: 70%; height: 22px; border-top: 3px solid rgba(233, 236, 242, 0.5);
  background: linear-gradient(rgba(233,236,242,0.5), rgba(233,236,242,0.5)) 20% 0 / 1.5px 100% no-repeat, linear-gradient(rgba(233,236,242,0.5), rgba(233,236,242,0.5)) 80% 0 / 1.5px 100% no-repeat; }
.hang-sign { width: 100%; padding: 16px 18px; border: 2px solid rgba(233, 236, 242, 0.4); background: rgba(233, 236, 242, 0.05); transform: rotate(-1.2deg); }
.hang:nth-child(2n) .hang-sign { transform: rotate(1.2deg); }

/* tech: one long arcade, a bay per partner, spanning the street */
.tier-arcade .tier-row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(233, 236, 242, 0.22); border-top: 6px solid rgba(233, 236, 242, 0.3); }
.bay { --logo-h: 22px; display: grid; place-items: center; padding: 22px 12px; min-height: 84px; position: relative; }
.bay + .bay { border-left: 1px solid rgba(233, 236, 242, 0.16); }
.bay::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 4px; background: rgba(233, 236, 242, 0.12); }
@media (max-width: 900px) { .tier-arcade .tier-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bay:nth-child(3n + 1) { border-left: 0; } .bay:nth-child(n + 4) { border-top: 1px solid rgba(233, 236, 242, 0.16); } }

/* community: posters pasted along the wall */
.tier-posters .tier-row { gap: 12px 28px; align-items: center; }
.poster { --logo-h: 18px; flex: 0 1 180px; padding: 12px 10px; opacity: 0.85; border-bottom: 1px dashed rgba(233, 236, 242, 0.2); }
.credits { display: grid; gap: 24px; margin-top: 18px; padding-top: 22px; border-top: 1px solid rgba(233, 236, 242, 0.14); }
.credits ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.92rem; }
.credits a { color: var(--street-ink); text-decoration: none; border-bottom: 1px solid rgba(233, 236, 242, 0.3); }
.credits a:hover { border-bottom-color: currentColor; }
.credit-note { margin-top: 8px; font: 400 0.75rem/1.4 var(--font-mono); color: rgba(233, 236, 242, 0.6); }
@media (min-width: 720px) { .credits { grid-template-columns: 1.4fr 1fr 1fr; } }
.footnote { padding-top: 18px; border-top: 1px solid rgba(233, 236, 242, 0.1); }
.footnote { font-size: 0.8rem; color: rgba(233, 236, 242, 0.65); }

/* ===== Floating help button ===== */
.help-fab {
  position: fixed; z-index: 25;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--danger); color: var(--danger-ink); text-decoration: none;
  font: 600 0.8rem/1 var(--font-body); letter-spacing: 0.01em; padding: 11px 14px; border-radius: 0;
  box-shadow: 0 10px 30px -8px rgba(120, 10, 14, 0.55);
  touch-action: manipulation;
}
.help-fab i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; }
.help-fab:hover { filter: brightness(1.08); }

/* ===== Street life: ALERT, bus, birds, plane ===== */
.street { position: absolute; left: 0; bottom: calc(100% + 10px); width: 100%; height: clamp(150px, 112px + 7vw, 240px); display: block; pointer-events: none; overflow: visible; }
.street .st-bldg { fill: var(--st-bldg); }
.street .st-cap { fill: #000; opacity: 0.08; }
.street .st-base { fill: #000; opacity: 0.12; }
.street .win { fill: var(--win); transition: fill 0.5s ease var(--d, 0s); }
:root[data-phase="night"] .street .win.lit, :root[data-phase="dusk"] .street .win.lit { fill: var(--glow); }
.street .st-tree { fill: var(--st-tree); }
.street .st-trunk { fill: var(--st-trunk); }
.street .st-hedge { fill: var(--st-hedge); transition: fill var(--t) var(--ease); }
.street .st-pole { fill: var(--st-pole); transition: fill var(--t) var(--ease); }
.street .st-lantern { fill: #e9e4d6; transition: fill var(--t) var(--ease); }
:root[data-phase="night"] .street .st-lantern, :root[data-phase="dusk"] .street .st-lantern { fill: var(--glow); filter: drop-shadow(0 0 6px var(--glow)); }
.street .st-sign rect { fill: var(--panel); stroke: var(--st-pole); stroke-width: 1.5; transition: fill var(--t) var(--ease); }
.street .st-sign line { stroke: var(--st-pole); stroke-width: 1.5; }
.street .st-sign text { fill: var(--ink); font: 600 7.5px var(--font-mono); letter-spacing: 0.12em; }
.street .st-trunk-br { fill: none; stroke: var(--st-trunk); stroke-width: 3; stroke-linecap: round; }
.street .st-bldg, .street .st-tree, .street .st-trunk { transition: fill var(--t) var(--ease); }
.plaza { position: absolute; bottom: calc(100% + 10px); left: 46%; pointer-events: none; }
.alert { display: block; height: clamp(160px, 110px + 8vw, 240px); width: auto; aspect-ratio: 80 / 124; overflow: visible; }
.alert .steel { fill: var(--steel); transition: fill var(--t) var(--ease); }
.alert .steel-back { fill: var(--steel-back); transition: fill var(--t) var(--ease); }
.plaza::before { /* floodlight at the base after dark */
  content: ""; position: absolute; left: -30%; right: -30%; bottom: -6px; height: 70%;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
:root[data-phase="night"] .plaza::before, :root[data-phase="dusk"] .plaza::before { opacity: 1; }
.alert { position: relative; }

.traffic { position: absolute; left: 0; right: 0; top: 0; height: 58px; overflow: hidden; pointer-events: none; }
.bus { position: absolute; left: -140px; top: 2px; width: 118px; height: 51px; animation: drive 34s linear 3s infinite; }
@keyframes drive { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(calc(100vw + 140px)); } }
.bus .bus-body { fill: var(--bus); transition: fill var(--t) var(--ease); }
.bus .bus-band { fill: rgba(255, 255, 255, 0.35); }
.bus .bus-win { fill: var(--bus-win); opacity: 0.85; transition: fill var(--t) var(--ease); }
.bus .bus-door { fill: rgba(0, 0, 0, 0.25); }
.bus .wheel { fill: #12151d; }
.bus .hub { fill: #8a92a3; }
.bus .bus-light { fill: #ffe9b0; }
:root[data-phase="night"] .bus .bus-light, :root[data-phase="dusk"] .bus .bus-light { filter: drop-shadow(0 0 4px #ffd27a); }
.footer .wrap { position: relative; }

.birds { position: absolute; top: 150px; left: -120px; width: 84px; opacity: 0.7; transition: opacity var(--t) var(--ease); animation: fly 55s linear 2s infinite; }
.birds svg { display: block; width: 100%; overflow: visible; animation: flap 0.7s ease-in-out infinite alternate; transform-origin: center; }
.birds path { fill: none; stroke: var(--sky-muted); stroke-width: 2; stroke-linecap: round; }
@keyframes fly { 0% { transform: translate(0, 0); } 50% { transform: translate(calc(50vw + 60px), -40px); } 100% { transform: translate(calc(100vw + 240px), 10px); } }
@keyframes flap { to { transform: scaleY(0.55); } }
:root[data-phase="night"] .birds, :root[data-phase="dusk"] .birds { opacity: 0; }

.plane { position: absolute; top: 84px; left: -20px; width: 10px; height: 4px; opacity: 0; transition: opacity var(--t) var(--ease); animation: cruise 95s linear infinite; }
.plane i { position: absolute; top: 0; width: 3px; height: 3px; border-radius: 50%; }
.plane .nav-r { left: 0; background: #ff5a5f; animation: blink 1.4s steps(1) infinite; }
.plane .nav-w { left: 7px; background: #fff; animation: blink 1.4s steps(1) 0.7s infinite; }
@keyframes cruise { to { transform: translate(calc(100vw + 40px), 60px); } }
:root[data-phase="night"] .plane, :root[data-phase="dusk"] .plane { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) { .birds, .plane, .traffic { display: none; } }

/* phones: keep the sun and clouds clear of the title */
@media (max-width: 719px) {
  .sun { left: 88%; width: 58px; height: 58px; margin-left: -29px; transform: translateY(112px); }
  .moon { width: 48px; height: 48px; margin-left: -24px; }
  :root[data-phase="night"] .moon { transform: translateY(116px); }
  .cloud-1 { display: none; }
  .cloud-2 { display: none; }
}

@media (max-width: 479px) { .bh-place { display: none; } }

/* ===== Panel silhouettes ===== */
.panel-schedule { clip-path: polygon(0 var(--step), 58% var(--step), 58% 0, 100% 0, 100% 100%, 0 100%); }
#deadlines { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
#talks .panel { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
#tracks .panel {
  padding-top: calc(var(--step) * 2 + clamp(20px, 3.4vw, 40px));
  clip-path: polygon(0 calc(var(--step) * 2), 16% calc(var(--step) * 2), 16% var(--step), 32% var(--step), 32% 0, 68% 0, 68% var(--step), 84% var(--step), 84% calc(var(--step) * 2), 100% calc(var(--step) * 2), 100% 100%, 0 100%);
}
#guide .panel { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
#food .panel { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
#faq .panel { padding-top: calc(var(--step) + clamp(20px, 3.4vw, 40px)); clip-path: polygon(0 0, 44% 0, calc(44% + var(--step)) var(--step), 100% var(--step), 100% 100%, 0 100%); }

/* How to Submit: an admission ticket. Concave corners and side notches are punched out with an
   intersected mask; an inner rule follows the same curves (drawn with background layers on ::after). */
#submit .panel {
  --tc: 28px;   /* corner scallop */
  --tn: 20px;   /* side notch */
  padding-inline: clamp(36px, 5vw, 64px);
  -webkit-mask:
    radial-gradient(circle at 0 0, #0000 var(--tc), #000 calc(var(--tc) + 0.5px)),
    radial-gradient(circle at 100% 0, #0000 var(--tc), #000 calc(var(--tc) + 0.5px)),
    radial-gradient(circle at 0 100%, #0000 var(--tc), #000 calc(var(--tc) + 0.5px)),
    radial-gradient(circle at 100% 100%, #0000 var(--tc), #000 calc(var(--tc) + 0.5px)),
    radial-gradient(circle at 0 50%, #0000 var(--tn), #000 calc(var(--tn) + 0.5px)),
    radial-gradient(circle at 100% 50%, #0000 var(--tn), #000 calc(var(--tn) + 0.5px));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 0 0, #0000 var(--tc), #000 calc(var(--tc) + 0.5px)),
    radial-gradient(circle at 100% 0, #0000 var(--tc), #000 calc(var(--tc) + 0.5px)),
    radial-gradient(circle at 0 100%, #0000 var(--tc), #000 calc(var(--tc) + 0.5px)),
    radial-gradient(circle at 100% 100%, #0000 var(--tc), #000 calc(var(--tc) + 0.5px)),
    radial-gradient(circle at 0 50%, #0000 var(--tn), #000 calc(var(--tn) + 0.5px)),
    radial-gradient(circle at 100% 50%, #0000 var(--tn), #000 calc(var(--tn) + 0.5px));
  mask-composite: intersect;
}
#submit .panel::after {
  /* inner rule: arcs around each scallop and notch, straight runs between them */
  --g: 12px; --w: 1.5px; --c: var(--ink); --r: calc(var(--tc) + var(--g)); --rn: calc(var(--tn) + var(--g));
  content: ""; position: absolute; inset: var(--g); pointer-events: none; opacity: 0.55;
  background:
    radial-gradient(circle at 0 0, #0000 calc(var(--r) - var(--g) - var(--w)), var(--c) calc(var(--r) - var(--g) - var(--w)), var(--c) calc(var(--r) - var(--g)), #0000 calc(var(--r) - var(--g) + 0.5px)) 0 0 / var(--tc) var(--tc) no-repeat,
    radial-gradient(circle at 100% 0, #0000 calc(var(--r) - var(--g) - var(--w)), var(--c) calc(var(--r) - var(--g) - var(--w)), var(--c) calc(var(--r) - var(--g)), #0000 calc(var(--r) - var(--g) + 0.5px)) 100% 0 / var(--tc) var(--tc) no-repeat,
    radial-gradient(circle at 0 100%, #0000 calc(var(--r) - var(--g) - var(--w)), var(--c) calc(var(--r) - var(--g) - var(--w)), var(--c) calc(var(--r) - var(--g)), #0000 calc(var(--r) - var(--g) + 0.5px)) 0 100% / var(--tc) var(--tc) no-repeat,
    radial-gradient(circle at 100% 100%, #0000 calc(var(--r) - var(--g) - var(--w)), var(--c) calc(var(--r) - var(--g) - var(--w)), var(--c) calc(var(--r) - var(--g)), #0000 calc(var(--r) - var(--g) + 0.5px)) 100% 100% / var(--tc) var(--tc) no-repeat,
    radial-gradient(circle at 0 50%, #0000 calc(var(--rn) - var(--g) - var(--w)), var(--c) calc(var(--rn) - var(--g) - var(--w)), var(--c) calc(var(--rn) - var(--g)), #0000 calc(var(--rn) - var(--g) + 0.5px)) 0 50% / var(--tn) calc(var(--tn) * 2) no-repeat,
    radial-gradient(circle at 100% 50%, #0000 calc(var(--rn) - var(--g) - var(--w)), var(--c) calc(var(--rn) - var(--g) - var(--w)), var(--c) calc(var(--rn) - var(--g)), #0000 calc(var(--rn) - var(--g) + 0.5px)) 100% 50% / var(--tn) calc(var(--tn) * 2) no-repeat,
    linear-gradient(var(--c), var(--c)) 50% 0 / calc(100% - var(--tc) * 2) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 50% 100% / calc(100% - var(--tc) * 2) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 var(--tc) / var(--w) calc(50% - var(--tc) - var(--tn)) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 calc(100% - var(--tc)) / var(--w) calc(50% - var(--tc) - var(--tn)) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% var(--tc) / var(--w) calc(50% - var(--tc) - var(--tn)) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% calc(100% - var(--tc)) / var(--w) calc(50% - var(--tc) - var(--tn)) no-repeat;
}
.ticket-stub {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 14px; border-bottom: 1.5px solid var(--line);
}
.ticket-stub span { color: var(--ink); }
#submit .section-head { justify-content: center; text-align: center; }
#submit h2 { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); }
#submit h2::before { display: none; }
#submit .panel { counter-increment: sec; } /* keep numbering: the ticket has no arrow tag */
#submit h2::after { content: none; }
#submit .ticket-stars { color: var(--ink); letter-spacing: 0.3em; font-size: 0.8rem; }
@media (min-width: 800px) {
  #submit .two-col { position: relative; }
  #submit .two-col::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: 50%; border-left: 2px dashed var(--line); }
}
/* the "next" deadline gets a pennant flag instead of a plain bar */
.deadline.is-next::before { width: 10px; left: -24px; top: 16px; bottom: auto; height: 14px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (max-width: 479px) {
  .ticket-stub { white-space: nowrap; gap: 8px; font-size: 0.64rem; letter-spacing: 0.14em; }
  #submit .ticket-stars { letter-spacing: 0.05em; font-size: 0.6rem; }
  #submit .panel { padding-inline: 30px; }
}

/* ===== Venue map: an unrolled parchment map ===== */
#map { position: relative; padding-top: 44px; }
#map .panel {
  --paper: transparent;
  --tint: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink); clip-path: none; margin-inline: 6px;
  padding-block: clamp(34px, 4vw, 52px);
  background:
    /* curl shading where the sheet wraps the rollers */
    linear-gradient(color-mix(in srgb, var(--ink) 16%, transparent), transparent 26px) top / 100% 26px no-repeat,
    linear-gradient(transparent, color-mix(in srgb, var(--ink) 18%, transparent)) bottom / 100% 26px no-repeat,
    /* wear: faint stains and a slightly darker rim, in the panel's own ink */
    radial-gradient(ellipse 30% 22% at 18% 30%, var(--tint), transparent 70%),
    radial-gradient(ellipse 26% 30% at 82% 72%, var(--tint), transparent 70%),
    radial-gradient(ellipse 14% 10% at 64% 18%, var(--tint), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 60%, color-mix(in srgb, var(--ink) 10%, transparent)),
    var(--panel);
  -webkit-mask: linear-gradient(#000, #000) center / calc(100% - 34px) 100% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%22220%22%20viewBox%3D%220%200%2018%20220%22%20preserveAspectRatio%3D%22none%22%3E%3Cpolygon%20points%3D%2218%2C0%203.3%2C0.0%201.5%2C6.9%201.4%2C12.1%2010.5%2C15.3%206.8%2C20.9%205.4%2C25.2%203.8%2C31.7%207.0%2C35.0%201.8%2C38.8%202.3%2C46.7%203.6%2C53.5%201.4%2C56.9%204.0%2C64.0%204.2%2C70.5%205.9%2C78.3%204.7%2C84.7%203.0%2C92.1%203.9%2C95.8%2013.3%2C99.7%205.0%2C107.3%205.9%2C112.2%204.2%2C118.7%204.3%2C127.3%205.9%2C130.7%206.8%2C139.7%2012.3%2C145.0%2013.8%2C149.0%202.7%2C152.8%201.6%2C161.0%207.2%2C167.3%202.9%2C175.5%207.2%2C180.6%202.2%2C184.5%204.4%2C188.9%201.0%2C193.5%205.0%2C198.7%204.6%2C205.9%201.4%2C212.9%203.3%2C220.0%2018%2C220%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") left top / 18px 220px repeat-y, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%22220%22%20viewBox%3D%220%200%2018%20220%22%20preserveAspectRatio%3D%22none%22%3E%3Cpolygon%20points%3D%220%2C0%2010.9%2C0.0%2014.2%2C5.4%207.0%2C12.2%208.0%2C16.1%2016.3%2C20.0%2010.9%2C23.2%2015.2%2C27.1%2016.1%2C32.3%2013.7%2C41.2%2016.3%2C44.7%2011.2%2C49.3%2010.3%2C52.5%205.4%2C56.4%2011.0%2C65.2%2014.4%2C69.8%2013.3%2C77.4%2015.4%2C82.4%2011.0%2C91.3%2011.8%2C99.2%207.9%2C105.3%2015.2%2C110.0%2013.9%2C118.7%2010.3%2C127.7%2015.4%2C132.0%2012.6%2C136.2%2013.6%2C144.3%2016.4%2C152.1%2011.5%2C160.5%2015.8%2C166.4%2011.4%2C171.4%2014.2%2C176.8%2015.8%2C184.1%2010.7%2C188.0%2011.2%2C191.9%2014.5%2C198.8%2016.9%2C202.6%2013.3%2C209.5%2010.9%2C215.1%2015.2%2C219.4%2010.9%2C220.0%200%2C220%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") right top / 18px 220px repeat-y;
  mask: linear-gradient(#000, #000) center / calc(100% - 34px) 100% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%22220%22%20viewBox%3D%220%200%2018%20220%22%20preserveAspectRatio%3D%22none%22%3E%3Cpolygon%20points%3D%2218%2C0%203.3%2C0.0%201.5%2C6.9%201.4%2C12.1%2010.5%2C15.3%206.8%2C20.9%205.4%2C25.2%203.8%2C31.7%207.0%2C35.0%201.8%2C38.8%202.3%2C46.7%203.6%2C53.5%201.4%2C56.9%204.0%2C64.0%204.2%2C70.5%205.9%2C78.3%204.7%2C84.7%203.0%2C92.1%203.9%2C95.8%2013.3%2C99.7%205.0%2C107.3%205.9%2C112.2%204.2%2C118.7%204.3%2C127.3%205.9%2C130.7%206.8%2C139.7%2012.3%2C145.0%2013.8%2C149.0%202.7%2C152.8%201.6%2C161.0%207.2%2C167.3%202.9%2C175.5%207.2%2C180.6%202.2%2C184.5%204.4%2C188.9%201.0%2C193.5%205.0%2C198.7%204.6%2C205.9%201.4%2C212.9%203.3%2C220.0%2018%2C220%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") left top / 18px 220px repeat-y, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%22220%22%20viewBox%3D%220%200%2018%20220%22%20preserveAspectRatio%3D%22none%22%3E%3Cpolygon%20points%3D%220%2C0%2010.9%2C0.0%2014.2%2C5.4%207.0%2C12.2%208.0%2C16.1%2016.3%2C20.0%2010.9%2C23.2%2015.2%2C27.1%2016.1%2C32.3%2013.7%2C41.2%2016.3%2C44.7%2011.2%2C49.3%2010.3%2C52.5%205.4%2C56.4%2011.0%2C65.2%2014.4%2C69.8%2013.3%2C77.4%2015.4%2C82.4%2011.0%2C91.3%2011.8%2C99.2%207.9%2C105.3%2015.2%2C110.0%2013.9%2C118.7%2010.3%2C127.7%2015.4%2C132.0%2012.6%2C136.2%2013.6%2C144.3%2016.4%2C152.1%2011.5%2C160.5%2015.8%2C166.4%2011.4%2C171.4%2014.2%2C176.8%2015.8%2C184.1%2010.7%2C188.0%2011.2%2C191.9%2014.5%2C198.8%2016.9%2C202.6%2013.3%2C209.5%2010.9%2C215.1%2015.2%2C219.4%2010.9%2C220.0%200%2C220%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") right top / 18px 220px repeat-y;
}
#map .panel::after { content: none; }
/* wooden rollers above and below the sheet */
#map::before, #map::after {
  content: ""; position: absolute; z-index: 2; height: 30px; pointer-events: none;
  left: max(0px, calc(var(--gutter) - 18px)); right: max(0px, calc(var(--gutter-r) - 18px));
  background:
    radial-gradient(circle at 42% 40%, #7f97e8 0 3px, var(--brand) 4px 8px, #1f357f 9px 13px, transparent 14px) left center / 30px 30px no-repeat,
    radial-gradient(circle at 42% 40%, #7f97e8 0 3px, var(--brand) 4px 8px, #1f357f 9px 13px, transparent 14px) right center / 30px 30px no-repeat,
    linear-gradient(var(--roll-1), var(--roll-2) 28%, var(--roll-3) 42%, var(--roll-2) 66%, var(--roll-1)) center / calc(100% - 40px) 22px no-repeat;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3));
}
#map { --roll-1: #2a3142; --roll-2: #57627c; --roll-3: #a3aec5; }
:root[data-phase="night"] #map, :root[data-phase="dusk"] #map { --roll-1: #1a2033; --roll-2: #4a5677; --roll-3: #8f9cbf; }
#map::before { top: 29px; }
#map::after { bottom: -15px; }
#map .section-head { border-bottom-style: dashed; }
#map h2 { font-style: italic; }
#map .map-figure { border-style: dashed; box-shadow: none; background-color: color-mix(in srgb, var(--panel-2) 60%, transparent); }
#map .room.active button { background: rgba(255, 181, 71, 0.22); }

/* ---------- CTF ("Lights Out"): Morse windows, beacon target, terminal dialog ---------- */
#skyline .ctf-morse { transition: none; }
#skyline .beacon-hit { fill: transparent; -webkit-tap-highlight-color: transparent; } /* no pointer cursor: it shouldn't look clickable */
#skyline .beacon-hit.solved { cursor: pointer; } /* once solved on this device it reopens the win screen */
#ctf {
  width: min(420px, calc(100vw - 32px)); padding: 22px 20px 18px; border: 1px solid #343a4a; border-radius: 0;
  background: #20242f; color: var(--glow); font: 500 0.86rem/1.6 var(--font-mono);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
#ctf::backdrop { background: rgba(3, 6, 15, 0.72); }
#ctf .ctf-close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--glow); font: inherit; font-size: 1.3rem; cursor: pointer; padding: 4px 8px; }
#ctf .ctf-line { margin: 0 0 4px; }
#ctf .ctf-grid { display: grid; gap: 6px; margin: 14px 0 16px; justify-content: start; }
#ctf .ctf-row { display: grid; grid-template-columns: repeat(5, 18px); gap: 6px; }
#ctf .ctf-row i { display: block; height: 26px; background: var(--win-night); }
#ctf .ctf-row i.on { background: var(--glow); box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 60%, transparent); }
#ctf .ctf-form { display: grid; gap: 8px; }
#ctf .ctf-form[hidden] { display: none; }
#ctf label { display: flex; gap: 8px; align-items: baseline; }
#ctf input { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid #4a5166; color: #fff; font: inherit; padding: 2px 0; border-radius: 0; }
#ctf input:focus { outline: none; border-bottom-color: var(--glow); }
#ctf button[type="submit"] { justify-self: start; margin-top: 4px; background: var(--glow); color: var(--glow-ink); border: 0; border-radius: 0; font: 600 0.8rem/1 var(--font-mono); padding: 9px 14px; cursor: pointer; }
#ctf .ctf-out { margin: 12px 0 0; min-height: 1.6em; }
#ctf .ctf-out:empty { display: none; }
#ctf .ok { color: #7ee2a8; }
#ctf .bad { color: #ff8a8d; }
#ctf strong { color: #fff; letter-spacing: 0.12em; }
/* phones: tighter street */
@media (max-width: 560px) {
  .sponsor-street { gap: 30px; }
  .tier-lg { --shop-w: 28%; --logo-h: 24px; }
  .tier-md { --shop-w: 28%; --logo-h: 20px; }
  .tier-shops .tier-row { gap: 6px; flex-wrap: nowrap; }
  .shop-sign, .tier-md .shop-sign { margin-inline: 5px; padding: 12px 6px; }
  .shop-window { margin-inline: 5px; min-height: 30px; }
  .shop .logo-wrap { flex-direction: column; gap: 4px; }
  .shop .logo-text { font-size: 0.72rem; }
  .plate { font-size: 0.5rem; padding: 2px 5px; }
  .tier-hanging .tier-row { gap: 6%; flex-wrap: nowrap; }
  .hang { width: 47%; --logo-h: 20px; }
  .hang-sign { padding: 12px 8px; }
  .bay { min-height: 64px; padding: 16px 8px; --logo-h: 18px; }
  .poster { flex-basis: 40%; }
}

/* phones: give the floor map the full panel width */
@media (max-width: 560px) {
  #map .map-figure { padding: 10px 6px; margin-inline: -6px; }
}

/* ===== My pass: login, meal QR passes, credits ===== */
.btn { font: 600 0.9rem/1 var(--font-body); color: #fff; background: var(--brand); border: 0; border-radius: 0; padding: 12px 18px; cursor: pointer; flex: none; touch-action: manipulation; }
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.linklike { font: inherit; color: var(--link); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pass-login { display: grid; gap: 14px; max-width: 520px; }
.pass-form { display: grid; gap: 6px; }
.pass-form label { font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pass-row { display: flex; gap: 8px; }
.pass-row input { flex: 1; min-width: 0; font: 500 1rem/1.2 var(--font-body); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 0; padding: 11px 12px; }
.pass-row input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.pass-row input.pass-code { font: 600 1.3rem/1 var(--font-mono); letter-spacing: 0.3em; }
.pass-msg { min-height: 1.3em; font-size: 0.9rem; color: var(--danger-text); }
.meal-passes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 16px; }
.meal-pass { border: 1px solid var(--line); padding: 16px; display: grid; gap: 10px; align-content: start; background: var(--panel); }
.meal-pass header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meal-pass .when { font: 400 0.75rem/1.4 var(--font-mono); color: var(--muted); }
.meal-pass .qr { background: #fff; padding: 6px; aspect-ratio: 1; display: grid; place-items: center; }
.meal-pass .qr svg { width: 100%; height: auto; display: block; }
.meal-pass .short { font: 400 0.75rem/1 var(--font-mono); color: var(--muted); text-align: center; }
.meal-pass .short span { font-weight: 600; font-size: 1rem; letter-spacing: 0.12em; color: var(--ink); }
.meal-pass .state { font-size: 0.88rem; color: var(--muted); }
.meal-pass.is-open { border-color: var(--food); box-shadow: inset 0 4px 0 var(--food); }
.meal-pass.is-open .state { color: var(--food); font-weight: 600; }
.meal-pass.is-upcoming .qr { opacity: 0.55; }
.meal-pass.is-used, .meal-pass.is-missed { background: var(--panel-2); }
.meal-pass.is-used h3, .meal-pass.is-missed h3 { color: var(--muted); }
.meal-pass .stamp { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--food); color: var(--food); display: grid; place-items: center; font-size: 2rem; transform: rotate(-12deg); }
.credits { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.credits h3 { font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.credit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.credit-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.credit-list code { font: 600 0.85rem/1 var(--font-mono); background: var(--panel-2); padding: 4px 6px; }
@media (max-width: 560px) { .meal-passes { grid-template-columns: 1fr; } .pass-row { flex-direction: column; } }

/* ===== Hackspaces box (under deadlines) ===== */
.side { display: grid; gap: 24px; }
.hackspaces { list-style: none; margin: 0; padding: 0; display: grid; }
.hackspaces a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hackspaces a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.hackspaces .hs-num { width: 30px; height: 30px; display: grid; place-items: center; background: var(--brand); color: #fff; font: 700 0.85rem/1 var(--font-mono); }
.hackspaces strong { display: block; font-weight: 600; }
.hackspaces small { display: block; font: 400 0.75rem/1.4 var(--font-mono); color: var(--muted); }