:root {
  --concrete: #0b1220;
  --slab: #141f33;
  --bone: #efe9dc;
  --silver: #dfe6f0;
  --silver-2: #aab8cc;
  --paste: #e8731a;
  --col: calc(100vw / 12);
  --rail: 40px;
  --line: 0px;
  --band: min(14.3vw, 206px);   /* the title's ink is 1.135em tall: a 150px band cut its tops off under the rail */
  --table: max(84px, 11svh);
  --shadow: none;
  --display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --carve: "Cinzel", Georgia, serif;
  --wide: "Michroma", "Manrope", sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --brut: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --curve: cubic-bezier(.2, .9, .2, 1);
  --metal: linear-gradient(180deg, #f7fafe 0%, #c4cfde 30%, #8696b0 50%, #e9eef6 58%, #a9b6ca 80%, #6c7b93 100%);

  --tikka-beside-bg: #0b1220;
  --tikka-beside-ink: #efe9dc;
  --tikka-beside-accent: #e8731a;
  --tikka-beside-edge: #efe9dc;
  --tikka-beside-veil: rgba(4, 7, 14, .78);
  --tikka-beside-radius: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; background: var(--concrete); }
html.gated, html.gated body { overflow: hidden; }
body {
  margin: 0;
  color: var(--bone);
  font: 400 13px/1.5 var(--body);
  background: var(--concrete);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol, dl { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dd { margin: 0; }
button { font: inherit; }

/* the stone's grain, and the twelve column lines the whole page is set on */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(223, 230, 240, .14) 0 1px, transparent 1px var(--col)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .78 0 0 0 0 .9 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the three materials ---------- */
.plate { background: var(--bone); color: #000; border: 1px solid #000; box-shadow: var(--shadow); }
.slab { background: var(--slab); color: var(--bone); border: 1px solid var(--bone); box-shadow: var(--shadow); }
.rail-line {
  position: relative; z-index: 2;
  min-width: 0;
  height: var(--line);
  padding: 0 0 0 12px;
  background: var(--bone); color: #000;
  border-top: 1px solid #000; border-bottom: 1px solid #000;
  font: 400 2.2vw/50px var(--brut); text-transform: uppercase; white-space: nowrap;
  overflow: clip;
}
.rail-line .marquee { margin-left: -12px; padding-left: 12px; }
/* the section rails are gone: their headings stay in the markup for screen readers, at no height */
.rail-line { height: 0; padding: 0; border: 0; overflow: clip; }
.rail-line .marquee__track { animation: none; }

.cell--bone { background: var(--bone) !important; color: #000 !important; }
.idx {
  position: absolute; top: 10px; left: 12px; z-index: 2;
  font: 400 10px/1 var(--wide); font-style: normal; letter-spacing: .2em; text-transform: uppercase;
}
.carved { font: 700 1em/1.05 var(--carve); letter-spacing: .02em; text-transform: uppercase; text-align: left; }

/* ---------- marquees: one track, written twice, moved by transform only ---------- */
.marquee { min-width: 0; overflow: clip; white-space: nowrap; }
.marquee__track { display: inline-flex; will-change: transform; animation: marquee var(--mq, 40s) linear infinite; }
.marquee__half { display: inline-block; flex: none; }
.marquee__half h2 { display: inline; font: inherit; letter-spacing: inherit; margin: 0; }
.marquee.paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- the door ---------- */
.door { position: fixed; inset: 0; z-index: 50; }
/* the flyer, taken apart: it builds itself while the page loads and comes apart on scroll */
.gate { position: absolute; inset: 0; overflow: clip; background: #05080f; }
.gate__stage {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(100vw, 100svh * 16 / 9); aspect-ratio: 16 / 9;
}
.gate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(5,8,15,.75)); }
.piece { position: absolute; display: block; transform-origin: 50% 100%; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; will-change: transform, opacity; }
.piece--base, [data-piece="letters"] { transform-origin: 50% 50%; }
.piece--base { inset: 0; width: 100%; }
.piece:not(.piece--base) { left: var(--x); top: var(--y); width: var(--w); }
/* tall screens get the pieces rearranged on a 9:16 stage, so the statues stay in view */
@media (max-aspect-ratio: 4/5) {
  .gate__stage { width: max(100vw, 100svh * 9 / 16); aspect-ratio: 9 / 16; }
  .piece--base { height: 100%; object-fit: cover; }
  .piece:not(.piece--base) { left: var(--px); top: var(--py); width: var(--pw); }
}
html.js .piece { opacity: 0; }

/* the chrome: a frame and a rail, pasted over the stage once the flyer stands */
.door__chrome { position: absolute; inset: 12px; z-index: 2; transition: translate 320ms var(--curve), opacity 320ms var(--curve); }
.door__chrome::before { content: ""; position: absolute; inset: 0; border: 3px solid var(--bone); pointer-events: none; }
.door__chrome::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--bone); pointer-events: none; }
html.js .door:not(.ready) .door__chrome { translate: 0 100%; opacity: 0; pointer-events: none; }
.door__rail {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1;
  height: 56px;
  display: grid; grid-template-columns: 176px minmax(0, 1fr) 56px;
  background: var(--bone); color: #000;
  border: 3px solid #000;
}
.door__enter {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 0 16px 0 20px;
  background: none; border: 0; border-right: 3px solid #000;
  color: #000; cursor: pointer;
  font: 400 20px/1 var(--brut); letter-spacing: .24em; text-transform: uppercase;
}
.door__enter:hover, .door__enter:focus-visible { background: #000; color: var(--bone); outline: none; }
.door__arrow { width: 14px; height: 18px; flex: none; animation: step 1.2s steps(2, jump-none) infinite; }
@keyframes step { to { translate: 0 3px; } }
.marquee--gate { font: 400 22px/50px var(--brut); text-transform: uppercase; }
/* once the gate is through its rail is hidden, so its marquee rests */
html:not(.gated):not(.veiled) .marquee--gate .marquee__track { animation-play-state: paused; }
.door__glyph { display: grid; place-items: center; border-left: 3px solid #000; }
.door__glyph svg { width: 20px; height: 32px; filter: brightness(0); }

/* ---------- the fixed rail ---------- */
.rail {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--rail);
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  background: var(--bone); color: #000;
  border-bottom: 1px solid #000;
}
.rail__glyph { display: grid; place-items: center; border-right: 1px solid #000; }
.rail__glyph svg { width: 18px; height: 28px; filter: brightness(0); }
.marquee--rail { --mq: 60s; font: 400 18px/37px var(--brut); text-transform: uppercase; }

.sound {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 0 14px;
  border: 0; cursor: pointer;
  font: 400 11px/1 var(--wide); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.sound svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.sound svg path:first-child { fill: currentColor; }
.sound__waves { display: none; }
.sound[aria-pressed="true"] .sound__waves { display: inline; }
.sound[aria-pressed="true"] .sound__x { display: none; }
.sound--song { position: static; height: 37px; background: var(--bone); color: #000; border-left: 1px solid #000; }
.sound--song:hover, .sound--song:focus-visible, .sound--song[aria-pressed="true"] { background: #000; color: var(--bone); outline: none; }
.led { display: none; width: 8px; height: 8px; background: var(--paste); flex: none; }
.sound--song[aria-pressed="true"] .led { display: block; }
html.playing .led { animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { to { opacity: 0; } }

/* ---------- shared ---------- */
main { display: block; }
section, footer { position: relative; overflow-x: clip; overflow-y: visible; }

/* things arrive the way a poster goes up: pressed on, then still */
html.js .rise { opacity: 0; }
html.js .rise.in { animation: rise 560ms var(--curve) both; animation-delay: var(--d, 0ms); }
@keyframes rise {
  from { opacity: 0; translate: 0 56px; }
  to { opacity: 1; translate: 0 0; }
}
/* the name plates are pasted on from the left */
html.js .god__plate.rise.in { animation-name: paste; }
@keyframes paste {
  from { opacity: 0; translate: -64px 0; }
  to { opacity: 1; translate: 0 0; }
}
html.js .rise--stamp.in, html.js .stamp.rise.in { animation: stamp 180ms ease-out both; }
@keyframes stamp {
  from { opacity: 0; scale: 1.12; }
  to { opacity: 1; scale: 1; }
}

/* ---------- s1 the threshold ---------- */
/* the hero holds still for a run of scroll while the gate comes apart */
.run { position: relative; height: calc(100svh + 170svh); }
.run > .threshold { position: sticky; top: 0; height: 100svh; }
.threshold { isolation: isolate; }
.threshold__bed {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%;
}
/* the light between the opening and the film */
.threshold__flash { position: absolute; inset: 0; z-index: -1; background: #f4f7fc; opacity: 0; pointer-events: none; }
/* the band */
.threshold__words {
  position: absolute; z-index: 2; top: var(--rail); left: 0; right: 0;
  height: var(--band);
  background: rgba(11, 18, 32, .84);
  border-bottom: 1px solid var(--bone);
}
.mark {
  position: absolute; left: 24px; bottom: 22px;
  white-space: nowrap;
  font: 900 100px/1 var(--display);
  letter-spacing: -.01em;
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(4px 4px 0 #000);
}
.mark__of { font-size: .62em; }
/* the 11 plate */
.hero__eleven {
  position: absolute; z-index: 3; left: 0; top: calc(var(--rail) + var(--band));
  width: calc(2 * var(--col)); aspect-ratio: 1;
  border-left: 0;
  /* the second layer fills the gap down to the years strip, so no video shows beside the shadow */
  box-shadow: none;
}
.hero__num { position: absolute; left: 20px; bottom: 14px; font: 400 15vw/.8 var(--brut); letter-spacing: -.02em; }
.hero__years {
  position: absolute; left: 0; right: -3px; top: calc(100% + 11px);
  height: 36px; padding: 0 12px;
  border-left: 0; box-shadow: none;
  font: 400 10px/30px var(--wide); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.hero__eleven.kick, .hero__eleven.kick .hero__years { background: #000; color: var(--bone); }
/* the date rail */
.hero__date {
  position: absolute; z-index: 3; right: 0;
  top: calc(var(--rail) + var(--band)); bottom: var(--table);
  width: max(var(--col), 64px);
  padding: 12px 10px;
  border-right: 0;
  writing-mode: vertical-rl;
  /* two columns of Anton: the width allows two lines, the height the longer line (9.1em) */
  font: 400 min(4.2vw, calc((max(var(--col), 64px) - 23px) / 2.05), calc((100svh - var(--rail) - var(--band) - var(--table) - 24px) / 9.1))/.95 var(--brut);
  text-transform: uppercase; white-space: nowrap;
  overflow: clip;
}
/* the lineup table */
.hero__lineup {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  height: var(--table);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px;
  background: #000;
  border-top: 1px solid #000;
  box-shadow: 0 -1px 0 var(--bone);
}
.hero__lineup a { position: relative; display: block; background: var(--bone); color: #000; text-decoration: none; overflow: clip; }
.hero__lineup a:hover, .hero__lineup a:focus-visible { background: #000; color: var(--bone); outline: none; }
.hero__lineup b { position: absolute; left: 12px; bottom: 10px; font: 400 2.6vw/.9 var(--brut); white-space: nowrap; }
/* the plates slam in from off their edge once the gate is through */
html.js .threshold__words, html.js .hero__eleven, html.js .hero__years, html.js .hero__date, html.js .hero__lineup { transition: translate 420ms var(--curve); }
html.js:not(.open) .threshold__words { translate: 0 -101%; }
html.js:not(.open) .hero__eleven { translate: -101% 0; }
html.js:not(.open) .hero__years { translate: -101% 0; }
html.js:not(.open) .hero__date { translate: 101% 0; }
html.js:not(.open) .hero__lineup { translate: 0 101%; }
html.open .hero__eleven { transition-delay: 80ms; }
html.open .hero__years { transition-delay: 120ms; }
html.open .hero__date { transition-delay: 160ms; }
html.open .hero__lineup { transition-delay: 240ms; }

/* ---------- s2 the five gods ---------- */
.doorway { z-index: 2; height: 100svh; }
.lintel { position: absolute; top: 0; left: 0; right: 0; }
.marquee--gods, .marquee--altar { --mq: 50s; }
.gods {
  position: absolute; inset: var(--line) 0 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  background: var(--slab);   /* the step above the dropped panels is slab, never bare concrete */
}
.god { position: relative; background: var(--slab); border-right: 1px solid var(--bone); overflow: visible; }
.god:last-child { border-right: 0; }
.god:nth-child(even) { translate: none; }
.arch { position: absolute; inset: 0; overflow: hidden; background: #0b1424; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
/* five press shoots in five palettes, cast in the temple's cold blue; their own colour comes back on hover */
.god .arch img { filter: grayscale(1) contrast(1.1) brightness(1.05); }
.god .arch::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #b7c9e4, #6f86ab); mix-blend-mode: multiply; }
.god:hover .arch img { filter: none; }
.god:hover .arch::after { opacity: 0; }
html.js .god .arch img { opacity: 0; translate: 0 -18px; }
html.js .god.in .arch img { animation: drop 520ms var(--curve) both; animation-delay: var(--d, 0ms); }
@keyframes drop {
  from { opacity: 0; translate: 0 -40px; }
  to { opacity: 1; translate: 0 0; }
}
.god__plate { position: absolute; z-index: 2; left: -3px; bottom: 7svh; width: 78%; padding: 30px 16px 14px; }
.god__plate .idx { left: auto; right: 12px; }
.god h3 { font: 400 2.7vw/.95 var(--brut); text-transform: uppercase; white-space: nowrap; }
.god p { margin-top: 8px; font: 400 13px/1.4 var(--body); color: #000; }
.stamp { position: absolute; z-index: 3; width: 72px; height: 72px; display: grid; place-items: center; }
.stamp svg { width: 28px; height: 44px; filter: brightness(0); }
.stamp--top { top: 53px; left: calc(20vw - 36px); }
.stamp--low { bottom: 24svh; left: calc(80vw - 36px); }   /* on the last seam, above the plates */

/* ---------- s3 the wall ---------- */
.wall {
  z-index: 1; height: 100svh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 3px;
  background: var(--bone);
  border-top: 1px solid var(--bone); border-bottom: 1px solid var(--bone);
}
.wall > * { position: relative; overflow: clip; background: var(--concrete); color: var(--bone); }
.wall__a { grid-column: 1 / 7; grid-row: 1 / 5; }
/* the pair fills the cell: sized past its height so the top clips, stretched to span the width */
.wall__eleven {
  position: absolute; left: 20px; bottom: 6px;
  font: 400 min(92svh, 57.5vw)/.8 var(--brut); letter-spacing: -.02em;
  transform: scaleX(1.33); transform-origin: 0 100%;
}
.wall__b { grid-column: 7 / 9; grid-row: 1 / 5; display: grid; grid-template-columns: 1fr 1fr; align-items: end; justify-items: center; padding: 0 10px; }
.wall__b::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--bone); pointer-events: none; }
.wall__arrow { height: 90%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
.wall__c { grid-column: 9 / 13; grid-row: 1 / 3; }
/* the god panels overlap the wall's top by 6svh, so this label sits just under them */
.wall__c .idx { top: calc(6svh + 12px); left: 12px; }
/* both numerals fill their cell's width within 24px */
.wall__date {
  position: absolute; left: 20px; bottom: 12px;
  font: 400 min(16vw, 29svh)/.85 var(--brut);
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wall__d { grid-column: 9 / 13; grid-row: 3 / 5; }
.wall__year { position: absolute; left: 20px; bottom: 12px; font: 400 min(15.2vw, 28svh)/.85 var(--brut); }
.wall__e { grid-column: 1 / 4; grid-row: 5 / 7; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.wall__e li { position: relative; display: flex; align-items: end; padding: 0 12px 6px; border-bottom: 1px solid #000; font: 400 2.4vw/1 var(--brut); overflow: clip; }
.wall__e li:last-child { border-bottom: 0; }
.wall__f { grid-column: 4 / 8; grid-row: 5 / 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--bone); }
.wall__f span { position: relative; display: grid; align-items: end; justify-items: center; background: var(--concrete); overflow: clip; }
.sticker { height: 80%; width: auto; max-width: 92%; object-fit: contain; object-position: bottom; transform-origin: 50% 92%; }
html.playing .sticker { animation: nod .98s cubic-bezier(.4, 0, .3, 1) infinite; }
.wall__f span:nth-child(2) .sticker { animation-delay: -.49s; }
.wall__f span:nth-child(3) .sticker { animation-delay: -.25s; }
.wall__f span:nth-child(4) .sticker { animation-delay: -.74s; }
@keyframes nod {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  18% { rotate: -2.4deg; translate: 0 3px; }
  50% { rotate: 1.2deg; translate: 0 0; }
}
.wall__g { grid-column: 8 / 13; grid-row: 5 / 7; display: grid; align-content: end; font: 700 2.2vw/1.15 var(--carve); text-transform: uppercase; white-space: nowrap; }
.wall__g span { display: block; padding-left: 16px; }
.wall__g span:nth-child(2) { padding-left: calc(16px + 1ch); }
.wall__g span:nth-child(3) { padding-left: calc(16px + 2ch); }
.wall__g span:nth-child(4) { padding-left: calc(16px + 3ch); }
.wall__g span:nth-child(5) { padding-left: calc(16px + 4ch); }
.wall__g span:nth-child(6) { padding-left: calc(16px + 5ch); }
.wall__g span:nth-child(7) { padding-left: calc(16px + 6ch); background: var(--bone); color: var(--concrete); }

/* ---------- s4 the memories ---------- */
.nave { min-height: 100svh; display: grid; grid-template-rows: var(--line) auto minmax(84px, 1fr); }
.nave__row {
  margin-top: 11px;
  display: grid; grid-template-columns: min(calc(9 * var(--col)), calc((100svh - 148px) * 16 / 9)) minmax(0, 1fr);
}
.nave__window { position: relative; z-index: 2; aspect-ratio: 16 / 9; border: 1px solid var(--bone); border-left: 0; box-shadow: var(--shadow); background: #000; overflow: clip; }
.nave__window video { width: 100%; height: 100%; object-fit: cover; }
/* the slab is two rows: the heading, then a keylined cell the statue stands in, taking the rest */
.nave__slab {
  position: relative; border-left: 0; border-right: 0; box-shadow: none; padding: 24px; overflow: clip;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px;
}
.nave__slab h2 { font-size: 3.3vw; }
.nave__statue { position: relative; min-height: 0; border: 1px solid var(--bone); display: grid; place-items: end center; padding: 8px; }
.nave__statue img { height: 90%; width: auto; max-width: 90%; object-fit: contain; object-position: bottom; }
.houses { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2px; background: var(--bone); border-top: 1px solid var(--bone); min-height: 84px; }
.houses li { position: relative; display: flex; align-items: end; padding: 0 0 8px 10px; background: var(--concrete); color: var(--bone); overflow: clip; }
.houses b { font: 400 min(7.8vw, 18svh)/.8 var(--brut); }
.houses__now { background: var(--bone) !important; color: #000 !important; }
.houses__now::after { content: ""; position: absolute; inset: 6px; border: 1px solid #000; pointer-events: none; }
html.playing .houses__now::after { animation: keyline 1s steps(2, jump-none) infinite; }
@keyframes keyline { to { border-color: var(--paste); } }

/* ---------- s5 the floor ---------- */
.niches { height: 100svh; }
.niches__rail { position: absolute; top: 0; left: 0; right: 0; }
/* the row is a slab the frames hang on, so nothing behind them is bare concrete */
.niches__row { position: absolute; inset: var(--line) 0 0; background: var(--slab); border-top: 1px solid var(--bone); }
.niche {
  position: absolute; top: 0;
  height: calc(90svh - var(--line)); aspect-ratio: 3 / 4;
  border: 1px solid var(--bone); box-shadow: none; background: #000; overflow: clip;
}
.niche img { width: 100%; height: 100%; object-fit: cover; }
.niche:nth-child(1) { left: 0; z-index: 1; }
.niche:nth-child(2) { left: calc(3 * var(--col)); top: 10svh; z-index: 2; }
.niche:nth-child(3) { left: calc(6 * var(--col)); z-index: 3; }
.niche:nth-child(4) { right: 0; top: 10svh; z-index: 4; }
/* the plate and the city slab meet at the eighth column, so the foot is solid */
.niches__plate {
  position: absolute; z-index: 5; left: 0; bottom: 0;
  width: calc(8 * var(--col)); height: 20svh;
  border-left: 0;
  display: grid; align-content: end; padding: 0 24px 20px;
}
.niches__plate h2 { font-size: 3.2vw; }
.niches__city {
  position: absolute; z-index: 5; right: 0; bottom: 0;
  width: calc(4 * var(--col)); height: 20svh;
  border-right: 0;
  display: grid; align-content: end; padding: 0 20px 14px;
  font: 400 min(12.6vw, 20svh)/.85 var(--brut);
}

/* ---------- s6 the future ---------- */
.sanctum { height: 100svh; }
.sanctum__door { position: absolute; top: 0; left: 0; bottom: 0; width: calc(100svh * 9 / 16); border-right: 1px solid var(--bone); background: #000; }
.sanctum__film { width: 100%; height: 100%; object-fit: cover; }
.sanctum .sound {
  position: absolute; z-index: 3; left: 0; bottom: 10svh; translate: none;
  height: 48px; padding: 0 16px;
  border: 1px solid #000; border-left: 0; box-shadow: none;
}
.sanctum .sound:hover, .sanctum .sound:focus-visible { background: #000; color: var(--bone); outline: none; }
.sanctum .sound[aria-pressed="true"] { background: var(--paste); color: #000; }
.sanctum__side {
  position: absolute; top: 0; bottom: 0; right: 0; left: calc(100svh * 9 / 16);
  display: grid; grid-template-rows: 46svh 14svh minmax(0, 1fr);
}
/* the heading fills the slab's foot, its label the head */
.sanctum__words { position: relative; background: var(--slab); color: var(--bone); padding: 0 2vw 3svh; overflow: clip; display: grid; align-content: end; }
.sanctum__words h2 { font-size: min(8.6vw, 15svh); line-height: .95; }
.sanctum__strip {
  border-left: 0; border-right: 0; box-shadow: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px;
  padding: 0 2vw 12px; overflow: clip;
}
.sanctum__line { font: 400 1.1vw/1.4 var(--wide); letter-spacing: .2em; text-transform: uppercase; padding-bottom: .5em; }
.sanctum__date { font: 400 min(6vw, 11svh)/.85 var(--brut); white-space: nowrap; }
.sanctum__table { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 3px; background: var(--bone); min-height: 0; }
/* the angels stand at their own size, crisp, each in a labelled niche */
.sanctum__angel { position: relative; display: grid; align-items: end; justify-items: center; background: var(--concrete); overflow: clip; }
.sanctum__angel::after { content: ""; position: absolute; left: 12px; right: 12px; top: 36px; border-top: 1px solid var(--bone); pointer-events: none; }
.sanctum__angel img { height: auto; width: auto; max-height: 150px; max-width: 90%; object-fit: contain; object-position: bottom; }
.manifest { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 2px; background: var(--bone); min-height: 0; }
.manifest > div { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; background: var(--concrete); color: var(--bone); padding: 0 16px 8px; overflow: clip; }
.manifest dt { font: 400 9px/1 var(--wide); letter-spacing: .2em; text-transform: uppercase; padding-bottom: 4px; white-space: nowrap; }
.manifest dd { font: 400 2vw/.85 var(--brut); text-transform: uppercase; text-align: right; white-space: nowrap; }

/* ---------- s7 the altar ---------- */
.altar { min-height: 100svh; display: grid; grid-template-rows: var(--line) minmax(0, 1fr); }
.altar__stone { display: grid; grid-template-columns: var(--col) minmax(0, 1fr) var(--col); }
.altar__pillar { position: relative; background: var(--slab); border-left: 1px solid var(--bone); border-right: 1px solid var(--bone); overflow: clip; }
.pillar { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pillar .g { stroke: var(--bone); stroke-width: 1.6; fill: none; stroke-linecap: square; opacity: .45; }
html.playing .pillar.climb .g { animation: glyph 2.4s ease-out infinite; animation-delay: var(--gd); }
@keyframes glyph { 0% { opacity: .45; } 12% { opacity: 1; } 40%, 100% { opacity: .45; } }
.altar__centre { position: relative; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) 14svh auto; }
.tiers { display: grid; grid-template-rows: repeat(4, minmax(16svh, 1fr)); }
.tier {
  position: relative;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 180px; align-items: end;
  background: var(--bone); color: #000;
  border-bottom: 1px solid #000;
}
.tier .idx { position: static; align-self: stretch; padding: 10px 0 0 12px; border-right: 1px solid #000; }
.tier__name { padding: 0 16px 10px 20px; font: 400 4.6vw/.85 var(--brut); text-transform: uppercase; white-space: nowrap; }
.tier__price { display: grid; justify-items: end; padding: 0 24px 10px 16px; font: 400 4.6vw/.85 var(--brut); text-align: right; white-space: nowrap; }
.tier__price a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tier__price a:hover, .tier__price a:focus-visible { outline: none; background: #000; color: var(--bone); text-decoration-color: var(--bone); }
.tier--tables .tier__state { display: block; margin-top: 12px; font: 400 10px/1 var(--wide); letter-spacing: .2em; text-transform: uppercase; }
.tier__act {
  position: relative; align-self: stretch;
  display: grid; place-items: center;
  border-left: 1px solid #000;
  font: 400 11px/1 var(--wide); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: #000;
}
a.tier__act:hover, a.tier__act:focus-visible { background: #000; color: var(--bone); outline: none; }
.tier__act--none { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .25) 0 2px, transparent 2px 8px); }
.tier--gone .tier__name, .tier--gone .tier__price { opacity: .45; }
/* the bar strikes through the name and price, which sit at the row's foot */
.chisel { position: absolute; z-index: 2; left: 56px; right: 180px; bottom: calc(7px + 1.96vw); height: 6px; background: #000; transform-origin: 0 50%; }
html.js .tier--gone .chisel { scale: 0 1; }
html.js .tier--gone.in .chisel { animation: chisel 300ms steps(4) .3s both; }
@keyframes chisel { from { scale: 0 1; } to { scale: 1 1; } }
.tier--gone .tier__state {
  position: absolute; z-index: 3; right: calc(180px + 2vw); top: 18%;
  rotate: -6deg;
  padding: 6px 14px 4px;
  border: 1px solid var(--paste); color: var(--paste);
  font: 400 2.4vw/1 var(--brut); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.btn--altar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  height: 14svh; padding: 0 24px 14px;
  background: var(--paste); color: #000;
  border: 1px solid #000; border-top: 0; box-shadow: var(--shadow);
  font: 400 5vw/.85 var(--brut); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  overflow: clip;
}
.btn--altar:hover, .btn--altar:focus-visible { background: #000; color: var(--paste); outline: none; }
.btn--altar svg { width: 1em; height: .8em; }
.altar__note {
  margin-top: 11px; height: 36px; padding: 0 12px;
  background: var(--bone); color: #000; border-top: 1px solid #000;
  font: 400 10px/33px var(--wide); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; overflow: clip;
}

/* ---------- the phone ---------- */
@media (max-width: 900px) {
  /* the band holds the two title lines and nothing more, the lineup is two rows in 10svh (the headliner wide over two, three under): the doorway gets the rest */
  :root { --col: 25vw; --rail: 36px; --line: 0px; --band: 28vw; --table: 10svh; --shadow: none; }
  .rail-line { font-size: 14px; line-height: 38px; }
  .rail { grid-template-columns: 36px minmax(0, 1fr) 36px; }
  .rail__glyph svg { width: 15px; height: 24px; }
  .marquee--rail { font-size: 15px; line-height: 33px; }
  .sound--song { height: 33px; width: 36px; padding: 0; justify-content: center; gap: 0; }
  .sound--song span { display: none; }
  .sound--song .led { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; }
  .sound--song { position: relative; }
  /* the gate */
  .door__chrome { inset: 8px; }
  .door__chrome::after { inset: 5px; }
  .door__rail { left: 9px; right: 9px; bottom: 9px; height: 48px; grid-template-columns: 120px minmax(0, 1fr) 48px; }
  .door__enter { font-size: 16px; padding: 0 12px 0 14px; letter-spacing: .18em; }
  .marquee--gate { font-size: 18px; line-height: 42px; }
  .door__glyph svg { width: 16px; height: 26px; }
  /* the hero */
  .mark { left: 12px; bottom: 8px; white-space: normal; font-size: 9.4vw; line-height: .8; }
  .mark__l:first-child { display: block; font-size: 18vw; }
  .mark__of { font-size: inherit; }
  /* the 11 plate and the date rail stay, narrower, so the door is clear between them */
  .hero__eleven { width: 20vw; height: 24vw; aspect-ratio: auto; box-shadow: var(--shadow); }
  .hero__num { left: 8px; bottom: 6px; font-size: 24vw; }
  .hero__years { display: none; }
  .hero__date { width: max(9.4vw, 36px); padding: 8px 4px; font-size: min(6.4vw, calc((100svh - var(--rail) - var(--band) - var(--table) - 16px) / 17.8)); line-height: 1; text-align: start; }
  .hero__date br { display: none; }
  .hero__lineup { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; }
  .hero__lineup a { grid-column: span 2; }
  .hero__lineup a:first-child { grid-column: span 4; }
  .hero__lineup .idx { display: none; }
  .hero__lineup b { left: 10px; bottom: 7px; font-size: 5vw; }
  /* the gods */
  .doorway { height: auto; min-height: 100svh; }
  .lintel { position: relative; }
  .gods { position: relative; inset: auto; grid-template-columns: 1fr 1fr; }
  .god { height: 60svh; border-right: 0; }
  /* the headliner takes the full width over a 2x2 of the other four */
  .god:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--bone); }
  .god:nth-child(even) { border-right: 1px solid var(--bone); translate: none; }
  /* the plate is the panel's headline: nearly its full width, hung off the left edge, in the lower third */
  .god__plate { width: calc(94% + 3px); padding: 24px 10px 10px; bottom: 5svh; }
  .god__plate .idx { top: 8px; right: 10px; }
  .god h3 { font-size: 8.5vw; white-space: normal; }
  .god p { font-size: 12px; line-height: 1.35; margin-top: 6px; }
  .stamp--low { display: none; }
  .stamp--top { top: 41px; left: calc(50vw - 36px); }
  /* the wall */
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 36svh repeat(4, minmax(0, 1fr)); gap: 2px; }
  .wall__a { grid-column: 1 / 5; grid-row: 1; }
  .wall__eleven { left: 12px; bottom: 4px; font-size: 46svh; transform: scaleX(1.5); }
  .wall__b { grid-column: 1 / 3; grid-row: 2 / 4; padding: 0 6px; }
  .wall__b::before { inset: 6px; }
  .wall__c { grid-column: 3 / 5; grid-row: 2; }
  .wall__c .idx { top: 8px; left: 10px; }
  .wall__date { left: 12px; bottom: 8px; font-size: 20vw; }
  .wall__d { grid-column: 3 / 5; grid-row: 3; }
  .wall__year { left: 12px; bottom: 8px; font-size: 20vw; }
  .wall__e { grid-column: 1 / 5; grid-row: 4; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: #000 !important; }
  .wall__e li { border: 0; background: var(--bone); padding: 0 8px 6px; font-size: 5vw; }
  .wall__e .idx { left: 8px; top: 8px; font-size: 9px; }
  .wall__f { grid-column: 1 / 5; grid-row: 5; }
  .wall__g { display: none; }
  .wall__g span { padding-left: 10px; }
  .wall__g span:nth-child(2) { padding-left: calc(10px + 1ch); }
  .wall__g span:nth-child(3) { padding-left: calc(10px + 2ch); }
  .wall__g span:nth-child(4) { padding-left: calc(10px + 3ch); }
  .wall__g span:nth-child(5) { padding-left: calc(10px + 4ch); }
  .wall__g span:nth-child(6) { padding-left: calc(10px + 5ch); }
  .wall__g span:nth-child(7) { padding-left: calc(10px + 6ch); }
  /* the memories */
  .nave { min-height: 0; grid-template-rows: var(--line) auto 56px; }
  .nave__row { grid-template-columns: minmax(0, 1fr); }
  .nave__window { border-left: 0; border-right: 0; box-shadow: none; }
  .nave__slab { display: block; min-height: 44vw; padding: 16px 16px 20px; border-top: 0; }
  .nave__slab h2 { font-size: 8vw; max-width: calc(100% - 92px); }
  .nave__statue { position: absolute; right: 12px; bottom: 12px; width: 72px; height: 96px; padding: 4px; }
  .nave__statue .idx { display: none; }
  .nave__statue img { height: 100%; max-width: 100%; }
  .houses { min-height: 56px; }
  .houses li { padding: 0 0 7px 7px; }
  .houses b { font-size: 4.6vw; }
  .houses .idx { display: none; }
  .houses__now::after { inset: 3px; border-width: 2px; }
  /* the floor */
  .niches { height: auto; }
  .niches__rail { position: relative; }
  /* the row is exactly the frames' union: the last frame's top plus a 3:4 frame's height */
  .niches__row { position: relative; inset: auto; height: calc(107vw + 58vw * 4 / 3 + 3px); }
  .niche { width: 58vw; height: auto; box-shadow: var(--shadow); }
  .niche:nth-child(1) { left: 0; top: 0; }
  .niche:nth-child(2) { left: 42vw; top: 15vw; }
  .niche:nth-child(3) { left: 0; top: 92vw; }
  .niche:nth-child(4) { left: 42vw; right: auto; top: 107vw; }
  .niches__plate { position: relative; width: auto; height: auto; min-height: 22vw; padding: 30px 16px 16px; border-right: 0; }
  .niches__plate h2 { font-size: 5vw; }
  .niches__city { display: none; }
  /* the future */
  .sanctum { height: auto; }
  .sanctum__door { position: relative; top: auto; bottom: auto; width: 100vw; height: 177.7vw; border-right: 0; }
  .sanctum .sound { bottom: 16px; height: 44px; }
  .sanctum__side { position: relative; inset: auto; grid-template-rows: auto auto auto; }
  .sanctum__words { padding: 30px 16px 24px; border-top: 1px solid var(--bone); }
  .sanctum__words h2 { font-size: 11vw; }
  .sanctum__strip { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .sanctum__line { font-size: 12px; padding-bottom: 0; }
  .sanctum__date { display: none; }
  .sanctum__table { grid-template-columns: 1fr 1fr; }
  .sanctum__angel { height: 28vw; }
  .sanctum__angel::after { top: 28px; left: 8px; right: 8px; }
  .sanctum__angel img { max-height: 20vw; }
  .manifest { grid-column: 1 / 3; grid-template-rows: repeat(6, 40px); }
  .manifest > div { padding: 0 12px 6px; }
  .manifest dd { font-size: 5vw; }
  /* the altar */
  .altar { grid-template-rows: 40px minmax(0, 1fr); }
  .altar__rail { height: 40px; line-height: 34px; }
  .altar__stone { grid-template-columns: minmax(0, 1fr); }
  .altar__pillar { position: absolute; width: 18px; height: 0; overflow: hidden; visibility: hidden; border: 0; }
  /* the name over the price fills the row within 12px */
  .tiers { grid-template-rows: repeat(4, minmax(15svh, auto)); }
  .tier { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .tier .idx { grid-row: 1 / 3; padding-left: 8px; }
  .tier__name { grid-column: 2; align-self: end; padding: 14px 12px 4px 14px; font-size: 13vw; }
  .tier__price { grid-column: 2; justify-items: start; padding: 0 12px 12px 14px; font-size: 9.5vw; text-align: left; }
  .tier--tables .tier__state { margin-top: 8px; font-size: 9px; }
  .tier__act { display: none; }
  .chisel { left: 40px; right: 14px; bottom: calc(13px + 13.6vw); }
  .tier--gone .tier__state { right: 14px; top: 10%; font-size: 18px; padding: 5px 10px 3px; }
  .btn--altar { height: 12svh; padding: 0 16px 12px; font-size: 7vw; }
  .altar__note { height: auto; padding: 8px 12px; font-size: 9px; line-height: 1.5; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track, .door__arrow, .led, .sticker, .pillar .g, .houses__now::after, .rise, .rise.in, .rise--stamp.in, .stamp.rise.in, .god .arch img, .god.in .arch img, .chisel {
    animation-name: none !important;
  }
  html.js .rise, html.js .god .arch img { opacity: 1 !important; translate: none !important; scale: none !important; }
  html.js .tier--gone .chisel { scale: 1 1 !important; }
  html.js .threshold__words, html.js .hero__eleven, html.js .hero__years, html.js .hero__date, html.js .hero__lineup { translate: none !important; transition: none !important; }
  .door__chrome { transition: none; }
  html.js .door:not(.ready) .door__chrome { translate: none; }
}

/* ---------- dark: every bone surface becomes slab, and its black ink and keylines turn bone ---------- */
.plate, .door__rail, .rail, .sound--song, .hero__lineup a, .tier, .altar__note { background: var(--slab); color: var(--bone); }
.cell--bone, .houses__now { background: var(--slab) !important; color: var(--bone) !important; }
.plate, .door__rail, .sanctum .sound { border-color: var(--bone); }
.door__enter { color: var(--bone); border-right-color: var(--bone); }
.door__glyph { border-left-color: var(--bone); }
.rail { border-bottom-color: var(--bone); }
.rail__glyph { border-right-color: var(--bone); }
.sound--song { border-left-color: var(--bone); }
.door__glyph svg, .rail__glyph svg, .stamp svg { filter: none; }
.hero__lineup { background: var(--bone); border-top-color: var(--bone); }
.god p { color: var(--bone); }
.houses__now::after { border-color: var(--bone); }
.tier { border-bottom-color: var(--bone); }
.tier .idx { border-right-color: var(--bone); }
.tier__act { border-left-color: var(--bone); color: var(--bone); }
.tier__act--none { background: repeating-linear-gradient(45deg, rgba(239, 233, 220, .16) 0 2px, transparent 2px 8px); }
.chisel { background: var(--bone); }
.altar__note { border-top-color: var(--bone); }
.door__enter:hover, .door__enter:focus-visible,
.sound--song:hover, .sound--song:focus-visible, .sound--song[aria-pressed="true"],
.hero__lineup a:hover, .hero__lineup a:focus-visible,
.tier__price a:hover, .tier__price a:focus-visible,
a.tier__act:hover, a.tier__act:focus-visible,
.sanctum .sound:hover, .sanctum .sound:focus-visible { background: var(--bone); color: #000; }
.hero__eleven.kick, .hero__eleven.kick .hero__years { background: var(--bone); color: #000; }


/* ---------- the foot: the mark, where to find them, who backs them, the way back ---------- */
.foot { border-top: 1px solid var(--bone); background: var(--concrete); color: var(--bone); }
.foot__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.foot__main > * { min-width: 0; padding: 32px; }
.foot__main > * + * { border-left: 1px solid var(--bone); }
.foot__mark { display: grid; place-items: center; }
.foot__mark img { width: min(100%, 300px); height: auto; }
.foot__links { display: grid; align-content: center; margin: 0; list-style: none; padding: 0 !important; }
.foot__links li + li { border-top: 1px solid var(--bone); }
.foot__links a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 18px; align-items: center;
  padding: 18px 32px; color: inherit; text-decoration: none;
}
.foot__links svg { grid-row: 1 / 3; width: 24px; height: 24px; }
.foot__links span { font: 400 10px/1 var(--wide); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.foot__links b { margin-top: 6px; font: 400 min(2.2vw, 34px)/1 var(--brut); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot__links a:hover, .foot__links a:focus-visible { background: var(--bone); color: #000; outline: none; }
.foot__partners { display: grid; grid-template-rows: auto 1fr 1fr; gap: 12px; }
.foot__label { font: 400 10px/1 var(--wide); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.plaque { display: grid; place-items: center; min-height: 72px; background: var(--bone); color: #000; overflow: clip; }
.plaque--word { font: 400 32px/1 var(--brut); color: #0b2a6e; text-transform: uppercase; }
.plaque img { width: 60%; height: 60px; object-fit: contain; mix-blend-mode: multiply; }
.foot__base { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border-top: 1px solid var(--bone); }
.steps__back {
  padding: 16px 24px; border-right: 1px solid var(--bone); color: inherit; text-decoration: none;
  font: 400 10px/1 var(--wide); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.steps__back:hover, .steps__back:focus-visible { background: var(--bone); color: #000; outline: none; }
.foot__line { margin: 0; padding: 0 24px; text-align: right; font: 700 14px/1.2 var(--carve); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 900px) {
  .foot__main { grid-template-columns: minmax(0, 1fr); }
  .foot__main > * { padding: 24px 16px; }
  .foot__main > * + * { border-left: 0; border-top: 1px solid var(--bone); }
  .foot__mark img { width: min(70%, 240px); }
  .foot__links a { padding: 14px 16px; }
  .foot__links b { font-size: 7vw; }
  .foot__partners { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
  .foot__label { grid-column: 1 / 3; }
  .plaque--word { font-size: 7vw; }
  .foot__base { grid-template-columns: minmax(0, 1fr); }
  .steps__back { border-right: 0; border-bottom: 1px solid var(--bone); text-align: center; }
  .foot__line { padding: 14px 16px; text-align: center; font-size: 12px; }
}

/* ---------- the future, simplified: one line of type over the screen, the facts in one ruled row ---------- */
.sanctum { height: auto; min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--concrete); }
.sanctum__words { display: grid; align-content: center; gap: 3svh; padding: calc(var(--rail) + 6svh) 4vw 6svh; background: none; }
.sanctum__words .idx { position: static; }
.sanctum__words h2 { font-size: min(11vw, 22svh); line-height: .92; }
.sanctum__line { padding: 0; font-size: max(11px, .9vw); }
.manifest { grid-template-rows: none; grid-template-columns: 1.1fr 1fr 1fr .6fr 1.7fr 1.2fr; gap: 3px; border-top: 1px solid var(--bone); }
.manifest > div { grid-template-columns: none; align-content: end; gap: 10px; min-height: 18svh; padding: 16px 20px 18px; }
.manifest dt { padding: 0; }
.manifest dd { text-align: left; font-size: min(2.6vw, 6svh); }
@media (max-width: 900px) {
  .sanctum__words { padding: 56px 16px 40px; }
  .sanctum__words h2 { font-size: 15vw; }
  .manifest { grid-column: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .manifest > div { min-height: 96px; padding: 12px 14px 14px; }
  .manifest dd { font-size: 7vw; }
}

/* the four gods stand in the future: two shelves of two beside the heading; one row under it on the phone */
.sanctum { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.sanctum__words h2 { font-size: min(7.6vw, 17svh); }
.manifest { grid-column: 1 / -1; }
.effigies { align-self: center; display: grid; gap: 4svh; margin: calc(var(--rail) + 4svh) 4vw 4svh 0; }
.effigies__shelf { position: relative; display: flex; align-items: flex-end; justify-content: space-evenly; padding-bottom: 10px; border-bottom: 1px solid var(--bone); }
.effigies__shelf::before { content: ""; position: absolute; inset: -6% 0 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 62% 58% at 50% 82%, rgba(150, 178, 230, .24), transparent 74%); }
.effigies img { position: relative; z-index: 1; height: calc(var(--h) * 1svh); width: auto; max-width: 48%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55)); }
@media (max-width: 900px) {
  .sanctum { grid-template-columns: none; grid-template-rows: auto auto auto; }
  .sanctum__words { padding-bottom: 28px; }
  .sanctum__words h2 { font-size: 15vw; }
  .effigies { position: relative; display: flex; gap: 0; align-items: flex-end; justify-content: space-evenly; margin: 0 16px 36px; padding-bottom: 8px; border-bottom: 1px solid var(--bone); }
  .effigies__shelf { display: contents; }
  .effigies img { height: calc(var(--h) * .5svh); max-width: 24%; }
}

/* the facts row is gone: the future is the heading and the four gods */
.sanctum { grid-template-rows: minmax(0, 1fr); }
.manifest { display: none; }
@media (max-width: 900px) { .sanctum { grid-template-rows: auto auto; } }

/* ---------- the beat: 122 BPM, laid on the song's clock by app.js. Where there are four of a thing (the floor
   photos, the effigies) each takes one beat of the bar; the lineup and the gods are five, so the fifth comes round on
   the downbeat with the first; single things take every kick ---------- */
.effigy { display: block; max-width: 48%; }
.effigy img { display: block; height: calc(var(--h) * 1svh); width: auto; max-width: 100%; transform-origin: 50% 100%; }
.hero__num { transform-origin: 0 100%; }
.hero__lineup a::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--paste); opacity: 0; pointer-events: none; }
.nave__statue img { transform-origin: 50% 100%; }
@media (max-width: 900px) {
  .effigy { max-width: 24%; }
  .effigy img { height: calc(var(--h) * .5svh); }
  .hero__lineup a::after { inset: 3px; border-width: 2px; }
}
html.playing .led { animation: blink var(--beat) steps(2, jump-none) infinite; }
html.playing .houses__now::after { animation: keyline calc(var(--beat) * 2) steps(2, jump-none) infinite; }
html.playing .pillar.climb .g { animation-name: glyph; animation-duration: calc(var(--beat) * 4); }
@media (prefers-reduced-motion: no-preference) {
  html.playing .hero__num, html.playing .btn--altar { animation: b-pump var(--beat) infinite; }
  html.playing .nave__statue img { animation: b-hop calc(var(--beat) * 2) infinite; }
  html.playing .hero__lineup a::after { animation: b-flash calc(var(--beat) * 4) infinite; }
  html.playing .god:not(:hover) .arch::after { animation: b-colour calc(var(--beat) * 4) infinite; }
  html.playing .niche img { animation: b-zoom calc(var(--beat) * 4) infinite; }
  html.playing .effigy img { animation: b-stomp calc(var(--beat) * 4) infinite; }
  html.playing .hero__lineup a:nth-child(2)::after, html.playing .god:nth-child(2):not(:hover) .arch::after,
  html.playing .niche:nth-child(2) img { animation-delay: var(--beat); }
  html.playing .hero__lineup a:nth-child(3)::after, html.playing .god:nth-child(3):not(:hover) .arch::after,
  html.playing .niche:nth-child(3) img { animation-delay: calc(var(--beat) * 2); }
  html.playing .hero__lineup a:nth-child(4)::after, html.playing .god:nth-child(4):not(:hover) .arch::after,
  html.playing .niche:nth-child(4) img { animation-delay: calc(var(--beat) * 3); }
  html.playing .effigies__shelf:first-child .effigy:nth-child(2) img { animation-delay: var(--beat); }
  html.playing .effigies__shelf:last-child .effigy:nth-child(1) img { animation-delay: calc(var(--beat) * 2); }
  html.playing .effigies__shelf:last-child .effigy:nth-child(2) img { animation-delay: calc(var(--beat) * 3); }
}
@keyframes b-pump { 0% { scale: 1.06; animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 55%, 100% { scale: 1; } }
@keyframes b-hop { 0% { translate: 0 -8px; animation-timing-function: cubic-bezier(.3, 0, .5, 1); } 30%, 100% { translate: 0 0; } }
@keyframes b-flash { 0% { opacity: 1; animation-timing-function: ease-out; } 20%, 100% { opacity: 0; } }
@keyframes b-colour { 0% { opacity: 0; } 14% { opacity: 0; animation-timing-function: ease-in; } 25%, 100% { opacity: 1; } }
@keyframes b-zoom { 0% { scale: 1.07; animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 22%, 100% { scale: 1; } }
@keyframes b-stomp { 0% { scale: .94 1.1; rotate: -3deg; animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 16% { scale: 1.02 .98; rotate: 1deg; } 26%, 100% { scale: 1; rotate: 0deg; } }

/* the gate's cue: OPEN, centred under the lettering where a thumb finds it, its keyline blinking */
.door__rail, .door__rail { grid-template-columns: minmax(0, 1fr) 56px; }
.door__chrome .door__enter {
  position: absolute; left: 50%; bottom: 92px; z-index: 2; translate: -50% 0;
  height: 64px; padding: 0 26px 0 32px; gap: 18px;
  background: var(--bone); color: #000; border: 3px solid #000; box-shadow: 8px 8px 0 #000;
  font-size: 30px; letter-spacing: .3em;
}
.door__chrome .door__enter::after { content: ""; position: absolute; inset: -10px; border: 3px solid var(--bone); pointer-events: none; animation: cue 1.1s steps(2, jump-none) infinite; }
.door__chrome .door__enter:hover, .door__chrome .door__enter:focus-visible { background: #000; color: var(--bone); border-color: var(--bone); }
.door__chrome .door__enter .door__arrow { width: 16px; height: 20px; }
@keyframes cue { to { opacity: 0; } }
@media (max-width: 900px) {
  .door__rail { grid-template-columns: minmax(0, 1fr) 48px; }
  .door__chrome .door__enter { bottom: 18svh; height: 56px; padding: 0 20px 0 26px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .door__chrome .door__enter::after { animation: none; } }

/* ---------- lighter: below the hero the page sets in one mono at light weights, smaller, on hairlines.
   The gate and the hero keep their type; the carved headings keep Cinzel at a book weight ---------- */
.rail, #gods, #nave, #niches, #sanctum, #altar, .foot {
  --brut: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wide: var(--brut); --body: var(--brut);
}
.carved { font-weight: 400; letter-spacing: .04em; }
.marquee--rail { font: 400 11px/37px var(--brut); letter-spacing: .16em; }
.idx { font-size: 9px; letter-spacing: .16em; }
/* the gods */
.doorway { height: 76svh; }
.god__plate { width: 72%; padding: 22px 14px 12px; bottom: 6svh; }
.god h3 { font: 500 1.25vw/1.1 var(--brut); letter-spacing: .04em; }
.god p { font-size: 11px; line-height: 1.45; margin-top: 6px; }
/* the memories */
.nave { min-height: 0; grid-template-rows: var(--line) auto 64px; }
.nave__row { grid-template-columns: min(calc(7 * var(--col)), calc(62svh * 16 / 9)) minmax(0, 1fr); }
.nave__slab { padding: 20px 24px; }
.nave__slab h2 { font-size: 2.1vw; }
.houses { min-height: 64px; gap: 1px; }
.houses b { font: 300 2.2vw/1 var(--brut); letter-spacing: -.02em; }
/* the floor */
.niches { height: 72svh; }
.niche { height: calc(62svh - var(--line)); }
.niche:nth-child(2), .niche:nth-child(4) { top: 8svh; }
.niches__plate, .niches__city { height: 13svh; }
.niches__plate { padding-bottom: 16px; }
.niches__plate h2 { font-size: 2vw; }
.niches__city { font: 300 min(5.4vw, 10svh)/.9 var(--brut); letter-spacing: -.03em; padding-bottom: 12px; }
/* the future */
.sanctum { min-height: 80svh; }
.sanctum__words { gap: 2.4svh; }
.sanctum__words h2 { font-size: min(4.8vw, 11svh); }
.sanctum__line { font-size: 10px; letter-spacing: .18em; }
.effigies { gap: 3svh; }
.effigy img { height: calc(var(--h) * .7svh); }
/* the altar: the button first, the tiers open under it */
.altar { min-height: 0; }
.altar__centre { grid-template-rows: none; align-content: center; padding: 8svh 0; }
.btn--altar {
  align-items: center; height: 72px; padding: 0 24px;
  border-top: 1px solid #000;
  font: 500 1.4vw/1 var(--brut); letter-spacing: .12em;
}
.btn--altar svg { width: 1.1em; height: 1.1em; transition: rotate 300ms var(--curve); }
.btn--altar[aria-expanded="true"] svg { rotate: 90deg; }
.tickets { display: grid; grid-template-rows: 1fr; }
html.js .tickets { grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--curve); }
html.js .tickets.open { grid-template-rows: 1fr; }
.tickets__inner { min-height: 0; overflow: hidden; }
.tiers { grid-template-rows: repeat(4, 76px); }
.tier { grid-template-columns: 56px minmax(0, 1fr) auto 140px; }
.tier__name, .tier__price { font: 400 1.5vw/1 var(--brut); letter-spacing: .02em; padding-bottom: 14px; }
.tier__act { font-size: 10px; }
.chisel { right: 140px; bottom: calc(14px + .7vw); height: 1px; }
.tier--gone .tier__state { right: calc(140px + 1.5vw); top: 14px; padding: 5px 10px 4px; font: 400 10px/1 var(--brut); letter-spacing: .2em; }
.tier--tables .tier__state { margin-top: 8px; font-size: 9px; }
.tier__price a { text-underline-offset: 4px; }
.altar__note { margin-top: 0; font-size: 9px; }
/* the foot */
.foot__main > * { padding: 24px; }
.foot__links a { padding: 14px 24px; }
.foot__links b { font: 400 min(1.2vw, 18px)/1 var(--brut); letter-spacing: .04em; }
.plaque { min-height: 56px; }
.plaque--word { font: 500 18px/1 var(--brut); letter-spacing: .12em; }
.foot__mark img { width: min(100%, 200px); }
.foot__line { font-weight: 400; font-size: 12px; }
@media (max-width: 900px) {
  .marquee--rail { font-size: 10px; line-height: 33px; }
  .doorway { height: auto; min-height: 0; }
  .god { height: 44svh; }
  .god__plate { width: calc(94% + 3px); padding: 20px 10px 9px; bottom: 4svh; }
  .god h3 { font-size: 3.8vw; white-space: nowrap; }
  .god p { font-size: 10px; }
  .nave { grid-template-rows: var(--line) auto 44px; }
  .nave__row { grid-template-columns: minmax(0, 1fr); }
  .nave__slab { min-height: 34vw; padding: 14px 16px 16px; }
  .nave__slab h2 { font-size: 5.2vw; }
  .nave__statue { width: 56px; height: 76px; }
  .houses { min-height: 44px; }
  .houses b { font-size: 3.4vw; }
  .niches { height: auto; }
  /* smaller frames on the same stagger: the row is the last frame's top plus its height */
  .niches__row { height: calc(80vw + 46vw * 4 / 3 + 1px); }
  .niche { width: 46vw; height: auto; }
  .niche:nth-child(1) { left: 0; top: 0; }
  .niche:nth-child(2) { left: 54vw; top: 12vw; }
  .niche:nth-child(3) { left: 0; top: 68vw; }
  .niche:nth-child(4) { left: 54vw; top: 80vw; }
  .niches__plate { height: auto; min-height: 0; padding: 22px 16px 14px; }
  .niches__plate h2 { font-size: 5.2vw; }
  .niches__city { height: auto; font-size: 9vw; }
  .sanctum { min-height: 0; }
  .sanctum__words { padding: 40px 16px 20px; }
  .sanctum__words h2 { font-size: 9vw; }
  .effigies { gap: 0; margin-bottom: 28px; }
  .effigy img { height: calc(var(--h) * .36svh); }
  .altar__centre { padding: 32px 0; }
  .btn--altar { height: 56px; padding: 0 16px; font-size: 3.6vw; }
  .tiers { grid-template-rows: repeat(4, auto); }
  .tier { grid-template-columns: 40px minmax(0, 1fr); }
  .tier__name { padding: 14px 12px 4px 14px; font-size: 4.6vw; }
  .tier__price { padding: 0 12px 14px 14px; font-size: 3.6vw; }
  .chisel { left: 40px; right: 14px; bottom: calc(18px + 3.6vw + 2.3vw); }
  .tier--gone .tier__state { right: 14px; top: 12px; font-size: 9px; }
  .foot__main > * { padding: 20px 16px; }
  .foot__mark img { width: min(50%, 180px); }
  .foot__links a { padding: 12px 16px; }
  .foot__links b { font-size: 3.8vw; }
  .plaque--word { font-size: 4.4vw; }
  .foot__line { font-size: 11px; }
}

/* the gate's cue, quieter: dark glass on hairlines in the carved face, a slow breath instead of a blink */
.door__chrome .door__enter {
  height: 54px; padding: 0 24px 0 30px; gap: 16px;
  background: rgba(5, 8, 15, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--bone); border: 1px solid rgba(239, 233, 220, .85); box-shadow: none;
  font: 600 15px/1 var(--carve); letter-spacing: .42em;
  transition: background .4s var(--curve), color .4s var(--curve);
}
.door__chrome .door__enter::after { inset: 4px; border: 1px solid rgba(239, 233, 220, .35); animation: cue-breathe 3.2s ease-in-out infinite; }
.door__chrome .door__enter:hover, .door__chrome .door__enter:focus-visible { background: var(--bone); color: #000; border-color: var(--bone); }
.door__chrome .door__enter .door__arrow { width: 12px; height: 16px; animation: cue-bob 2.4s ease-in-out infinite; }
@keyframes cue-breathe { 50% { border-color: rgba(239, 233, 220, .75); box-shadow: 0 0 22px rgba(160, 190, 255, .22); } }
@keyframes cue-bob { 50% { translate: 0 3px; } }
@media (max-width: 900px) {
  .door__chrome .door__enter { height: 50px; padding: 0 20px 0 26px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .door__chrome .door__enter .door__arrow { animation: none; } }

/* ---------- five gods: Aniko's shot is a dark room, not a lit shoot, so it is lifted to sit with the other four;
   on the phone the headliner stands full width, near his whole portrait, over a 2x2 of the other four ---------- */
.god--aniko .arch img { object-position: 64% 50%; }
.god--aniko:not(:hover) .arch img { filter: grayscale(1) contrast(1.15) brightness(1.45); }
@media (max-width: 900px) {
  .hero__lineup b { left: 9px; font-size: 4.6vw; }
  .hero__lineup a:first-child b { font-size: 6vw; }
  .god:first-child { height: 56svh; }
  .god:first-child .arch img { object-position: 50% 8%; }
  .god:first-child .god__plate { bottom: 7svh; }
  /* the sign keys the headliner to the four: on his panel's foot, over the seam of the 2x2 */
  .stamp--top { top: calc(56svh - 36px); }
}