/* Page styles. The WebGL scenes style their own canvases in hero/, council/ and city/. */

:root {
  --ink: #0d0b09;
  --soot: #17130f;
  --ash: #2e271f;
  --paper: #ebe2d2;
  --paper-dim: #b6aa95;
  --paper-faint: #918672;
  --sodium: #f0a248;
  --sodium-deep: #b8661f;
  --beacon: #62e0ea;
  --ember: #d4492c;

  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --devanagari: "Tiro Devanagari Hindi", "Kohinoor Devanagari", "Noto Serif Devanagari", serif;

  --gutter: clamp(1rem, 5vw, 4.5rem);
  --measure: 34rem;
  --section-space: clamp(6rem, 13vw, 11rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 1.125rem/1.65 var(--serif);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Film grain over the whole page, so type and scenes sit in the same wet air. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 { margin: 0; font-weight: 800; }
p, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
strong { font-weight: 500; color: var(--sodium); }
[lang="hi"] { font-family: var(--devanagari); font-weight: 400; }

:focus-visible { outline: 2px solid var(--sodium); outline-offset: 4px; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 60;
  padding: 0.5rem 1rem;
  background: var(--paper);
  color: var(--ink);
}
.skip-link:focus { top: 1rem; }

.section-inner {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-lede {
  max-width: var(--measure);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--paper);
}

/* A section heading set like a bilingual painted shop board: English, a rule, the same word in Devanagari. */
.signboard {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4em;
  row-gap: 0.1em;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 7.2vw, 7rem);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.signboard-hindi {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: 0.72em;
  line-height: 1;
  color: var(--sodium);
  text-transform: none;
}
.signboard-hindi::before {
  content: "";
  align-self: stretch;
  width: 2px;
  background: currentColor;
  opacity: 0.55;
}

.button {
  display: inline-block;
  padding: 0.85rem 1.5rem 0.8rem;
  border: 0;
  border-radius: 1px;
  background: var(--sodium);
  color: var(--ink);
  font: 800 1.25rem/1 var(--display);
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.button:hover { background: #ffb866; }

.text-link {
  font: 700 1.25rem/1 var(--display);
  letter-spacing: 0.03em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: rgba(235, 226, 210, 0.45);
}
.text-link:hover { text-decoration-color: var(--sodium); }

/* Scene mounts. Until a scene draws, and if WebGL is missing, each one shows a still poster. */
.stage { position: relative; overflow: hidden; background-color: var(--ink); }
.stage > canvas { display: block; width: 100%; height: 100%; }

#hero-stage {
  background-image:
    radial-gradient(18% 22% at 29% 11%, rgba(255, 176, 92, 0.55), transparent 70%),
    radial-gradient(14% 18% at 72% 27%, rgba(255, 160, 70, 0.4), transparent 70%),
    radial-gradient(60% 40% at 50% 38%, rgba(140, 70, 28, 0.35), transparent 75%),
    linear-gradient(180deg, #120d0a 0%, #1d130c 42%, #0b0907 70%, #050403 100%);
}

#council-stage {
  background-image:
    radial-gradient(34% 30% at 62% 34%, rgba(240, 162, 72, 0.22), transparent 75%),
    radial-gradient(60% 18% at 62% 62%, rgba(90, 52, 24, 0.35), transparent 80%),
    linear-gradient(180deg, #0a0807 0%, #120e0b 55%, #060504 100%);
}

#city-map {
  background-image:
    radial-gradient(30% 30% at 42% 64%, rgba(212, 73, 44, 0.18), transparent 75%),
    radial-gradient(3% 4% at 41% 63%, rgba(240, 162, 72, 0.6), transparent 80%),
    linear-gradient(180deg, #0f0c0a, #0a0807);
}

/* Loading screen: covers the page while the hero street downloads and builds (main.js, loading-screen.js),
   then lifts away like a shutter. It sits under the film grain so the grain runs unbroken into the street. */
.loading-screen { display: none; }
.is-loading { overflow: hidden; }
.is-loading .loading-screen,
.is-opening .loading-screen {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: clamp(1.25rem, 4vw, 3rem) var(--gutter);
  background:
    radial-gradient(70% 55% at 22% 105%, rgba(240, 162, 72, 0.09), transparent 70%),
    var(--ink);
  clip-path: inset(0 0 0 0);
}
.loading-place {
  font: 700 1.125rem/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.loading-place [lang="hi"] { margin-right: 0.5rem; letter-spacing: 0; text-transform: none; color: var(--sodium); }
.loading-number {
  align-self: end;
  margin-left: -0.05em;
  font: 900 clamp(9rem, 34vw, 30rem)/0.78 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.loading-stage {
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--paper-dim);
}
.loading-track { height: 2px; margin-top: 1rem; background: var(--ash); }
.loading-line {
  height: 100%;
  background: var(--sodium);
  box-shadow: 0 0 12px rgba(240, 162, 72, 0.6);
  transform: scaleX(0);
  transform-origin: left;
}
.is-opening .loading-screen { animation: loading-lift 1.1s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
@keyframes loading-lift { to { clip-path: inset(0 0 100% 0); } }
/* The street is already drawn under the screen, so its canvas skips its own fade; the copy rises in as the shutter lifts. */
.is-loading #hero #hero-stage .hero-canvas { transition: none; }
.is-opening .topbar,
.is-opening .hero-copy > *,
.is-opening .hero-caption { animation: hero-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both; }
.is-opening .hero-copy > :nth-child(2) { animation-delay: 0.45s; }
.is-opening .hero-copy > :nth-child(3) { animation-delay: 0.55s; }
.is-opening .hero-copy > :nth-child(4) { animation-delay: 0.65s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(1.5rem); } }

/* Hero */
.hero {
  position: relative;
  height: 100svh;
  min-height: 40rem;
  overflow: hidden;
}
#hero-stage { position: absolute; inset: 0; }
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Shade only where the copy sits (bottom left) and a strip under the nav; the rest of the frame keeps the grade. */
  background:
    radial-gradient(ellipse 60% 55% at 15% 75%, rgba(8, 7, 6, 0.82), transparent 70%),
    linear-gradient(180deg, rgba(8, 7, 6, 0.5) 0%, transparent 11%),
    linear-gradient(0deg, var(--ink) 0%, transparent 7%);
}

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem var(--gutter);
  font: 700 1.125rem/1 var(--display);
  letter-spacing: 0.03em;
}
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--sodium); }
.topbar-home { display: inline-flex; align-items: baseline; gap: 0.6em; }
.topbar-home [lang="hi"] { font-size: 1.15rem; color: var(--sodium); }
.topbar-links { display: flex; gap: 1.75rem; margin-left: auto; list-style: none; }
.topbar-cta {
  padding: 0.55rem 0.9rem 0.5rem;
  border: 1px solid rgba(240, 162, 72, 0.6);
  color: var(--sodium);
}

.hero-copy {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: min(100%, 64rem);
  padding: 0 var(--gutter) clamp(3.5rem, 8vh, 6rem);
}
.wordmark {
  margin-left: -0.04em;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(5rem, 11.5vw, 12rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-shadow: 0 0.04em 0.4em rgba(0, 0, 0, 0.45);
}
.hero-tagline {
  margin-top: 0.4em;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1;
  color: var(--sodium);
}
.hero-lede {
  max-width: 31rem;
  margin-top: 1.5rem;
  font-size: clamp(1.125rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin-top: 2rem; }

.hero-caption {
  position: absolute;
  right: var(--gutter);
  bottom: 1.25rem;
  z-index: 2;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--paper-dim);
}

/* The Council: the scene stays pinned while the rules scroll over it one at a time. */
.council { position: relative; background: var(--ink); }
.council-stage-frame {
  position: sticky;
  top: 0;
  height: 100svh;
}
#council-stage { position: absolute; inset: 0; }
.council-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13, 11, 9, 0.92) 0%, rgba(13, 11, 9, 0.6) 34%, transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, transparent 14%, transparent 86%, var(--ink) 100%);
}
.council-content {
  position: relative;
  z-index: 1;
  margin-top: -100svh;
  padding-inline: var(--gutter);
  max-width: 90rem;
  margin-inline: auto;
}
.council-head {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--section-space) 4rem;
}
/* On wide screens the heading and lede stay left of the lamp and the ledger, the brightest things in the scene. */
@media (min-width: 961px) {
  .council-head { max-width: 48vw; }
}
@media (min-width: 1400px) {
  .council-head .signboard { flex-direction: column; align-items: flex-start; }
}
.council-voice {
  max-width: 18ch;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.25rem, 4.4vw, 4.25rem);
  line-height: 1.05;
  color: var(--paper);
}
.council-lede {
  max-width: var(--measure);
  margin-top: 1.75rem;
  font-size: clamp(1.125rem, 1.4vw, 1.3rem);
  color: var(--paper-dim);
}

.council-rules {
  list-style: none;
  counter-reset: rule;
}
.council-rules > li {
  counter-increment: rule;
  min-height: 82svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 36rem;
  transition: opacity 700ms ease, transform 700ms ease;
}
.council-rules > li::before {
  content: counter(rule, devanagari);
  font-family: var(--devanagari);
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--sodium);
}
.council-rules h3 {
  margin-top: 0.75rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  line-height: 0.9;
  text-transform: uppercase;
}
.council-rules p {
  max-width: 30rem;
  margin-top: 1.25rem;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.5;
}
.council-rules > li:nth-child(3) h3 { color: var(--ember); }

/* main.js adds .is-revealing once it is tracking which rule is in view. */
.council.is-revealing .council-rules > li { opacity: 0.12; transform: translateY(1.5rem); }
.council.is-revealing .council-rules > li.is-active { opacity: 1; transform: none; }

.council-coda {
  min-height: 70svh;
  display: flex;
  align-items: center;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--paper-dim);
}

/* Three ways to live: an intro, then one full-bleed band per way, each framed on its own still from the street. */
.ways { background: var(--ink); }
.ways-intro {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
  align-items: end;
  padding-block: var(--section-space) clamp(3.5rem, 7vw, 6rem);
}
.ways-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.75rem, 5.6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.ways-intro .section-lede { color: var(--paper-dim); }

.way {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
}
.way-still {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.85) contrast(1.08);
}
.way::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.way-inner {
  display: flex;
  flex-direction: column;
  padding-block: clamp(4.5rem, 10vw, 8rem);
}
.way-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.3em;
  row-gap: 0.1em;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-shadow: 0 0.05em 0.5em rgba(0, 0, 0, 0.5);
}
.way-hindi {
  font-size: 0.6em;
  line-height: 1.2;
  color: var(--sodium);
  text-transform: none;
}
.way-motto {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
}
.way-body > p + p, .way-copy { margin-top: 1rem; }
.way-body > p:not(.way-motto), .way-copy {
  font-size: 1.1875rem;
  color: var(--paper-dim);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* The gang member: the crew stands in the middle of the frame; the name runs along the bottom, the creed beside it. */
.way-gang-member::before {
  background: linear-gradient(0deg, rgba(13, 11, 9, 0.95) 0%, rgba(13, 11, 9, 0.6) 28%, transparent 56%),
    linear-gradient(180deg, var(--ink) 0%, transparent 18%);
}
.way-gang-member .way-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  justify-content: space-between;
  align-items: first baseline;
  align-content: end;
  column-gap: clamp(2rem, 6vw, 6rem);
}

/* The hitman: he stands alone under the lamp, left of centre; his terms sit against the El on the right. */
.way-hitman::before {
  background: linear-gradient(270deg, rgba(13, 11, 9, 0.92) 0%, rgba(13, 11, 9, 0.55) 34%, transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, transparent 16%, transparent 84%, var(--ink) 100%);
}
.way-hitman .way-inner { justify-content: center; align-items: flex-end; }
.way-hitman .way-name, .way-hitman .way-body { width: min(100%, 34rem); }
.way-hitman .way-body p { max-width: 28rem; }
.way-hitman .way-body { margin-top: 1.5rem; }

/* The boogeyman: the name hangs over him, the definition waits underneath. */
.way-boogeyman::before {
  background: linear-gradient(180deg, var(--ink) 0%, rgba(13, 11, 9, 0.7) 22%, transparent 42%, transparent 58%, rgba(13, 11, 9, 0.88) 78%, var(--ink) 100%);
}
.way-boogeyman .way-inner { align-items: center; justify-content: space-between; text-align: center; }
.way-boogeyman .way-name { justify-content: center; }
.way-boogeyman .way-name { color: var(--ember); font-size: clamp(3.5rem, 8vw, 8rem); }
.way-boogeyman .way-hindi { color: var(--ember); }
.way-boogeyman .way-motto { margin-top: 0.75rem; }
.way-boogeyman .way-motto + .way-definition { margin-top: auto; }
.way-definition {
  max-width: 34rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ember);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.45;
}
.way-definition dfn { font-style: normal; font-weight: 500; color: var(--paper); }
.way-definition i { color: var(--paper-faint); }
.way-copy { max-width: 34rem; }

/* The city */
.city { padding-block: var(--section-space); background: var(--ink); }
.city-intro p + p { margin-top: 1.25rem; max-width: var(--measure); color: var(--paper-dim); }

.city-figure { margin: clamp(3rem, 6vw, 5rem) 0 0; }
.city-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 92svh;
  min-height: 18rem;
  border-block: 1px solid var(--ash);
}
.city-caption {
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--paper-faint);
}

.district-index-title {
  margin-top: clamp(4rem, 8vw, 6rem);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
}
.district-index {
  margin-top: 1.5rem;
  list-style: none;
  columns: 3 16rem;
  column-gap: clamp(2rem, 4vw, 4rem);
}
.district-index li {
  break-inside: avoid;
  padding: 0.7rem 0 0.8rem;
  border-top: 1px solid var(--ash);
  line-height: 1.3;
}
.district-name { display: block; font: 700 1.375rem/1.1 var(--display); letter-spacing: 0.01em; color: var(--paper-dim); }
.district-note { display: block; margin-top: 0.25rem; font-size: 1rem; font-style: italic; color: var(--paper-faint); }
.district-index .is-open .district-name { color: var(--paper); }
.district-index .is-open .district-name::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.5em;
  border-radius: 50%;
  background: var(--beacon);
  box-shadow: 0 0 0.6em var(--beacon);
  vertical-align: 0.15em;
}
.district-index .is-open .district-note { color: var(--paper-dim); }

.landmarks {
  max-width: 44rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: 1.125rem;
  color: var(--paper-dim);
}

/* Waitlist: centred over the El fading into smoke. */
.waitlist {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  text-align: center;
  background: var(--ink);
}
.waitlist-still {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78) saturate(0.85) contrast(1.05);
}
.waitlist::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(48% 46% at 50% 54%, rgba(13, 11, 9, 0.72), transparent 100%),
    linear-gradient(180deg, var(--soot) 0%, transparent 22%, transparent 70%, var(--ink) 100%);
}
.waitlist-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--section-space);
}
.waitlist-title {
  max-width: 13ch;
  margin-bottom: 1.75rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.25rem, 7vw, 7rem);
  line-height: 0.86;
  text-transform: uppercase;
  text-shadow: 0 0.04em 0.4em rgba(0, 0, 0, 0.5);
}
.waitlist .section-lede { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
.waitlist-form { width: min(100%, 38rem); margin-top: 2.5rem; text-align: left; }
.waitlist-form label { display: block; font: 700 1.125rem/1 var(--display); letter-spacing: 0.03em; color: var(--paper-dim); }
.waitlist-row { display: flex; gap: 1rem; margin-top: 0.75rem; }
.waitlist-row input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--paper-dim);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font: 400 1.25rem/1.2 var(--serif);
}
.waitlist-row input::placeholder { color: var(--paper-faint); }
.waitlist-row input:focus { outline: none; border-bottom-color: var(--sodium); }
.waitlist-row input[aria-invalid="true"] { border-bottom-color: var(--ember); }
.waitlist-error { margin-top: 0.75rem; font-size: 1rem; color: #f07a5c; }
.waitlist-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.waitlist-row .button:disabled { opacity: 0.7; cursor: progress; }
.waitlist-thanks {
  max-width: 34rem;
  margin-top: 2.5rem;
  font-size: 1.375rem;
  font-style: italic;
}
.waitlist-thanks:focus { outline: none; }
.small-print {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--paper-dim);
}

/* Footer */
.site-footer { padding-block: 2.5rem 3rem; border-top: 1px solid var(--ash); background: var(--ink); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; font-size: 0.9375rem; color: var(--paper-faint); }
.footer-mark { font: 800 1.25rem/1.2 var(--display); letter-spacing: 0.02em; color: var(--paper-dim); }

/* Tablet and phone */
@media (max-width: 960px) {
  .topbar-links { display: none; }
  .topbar-cta { margin-left: auto; }
  .ways-intro { grid-template-columns: minmax(0, 1fr); }
  .way-gang-member .way-inner { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .way-gang-member .way-body { max-width: 30rem; }
  .council-scrim {
    background:
      linear-gradient(0deg, rgba(13, 11, 9, 0.92) 0%, rgba(13, 11, 9, 0.7) 45%, rgba(13, 11, 9, 0.3) 100%),
      linear-gradient(180deg, var(--ink) 0%, transparent 14%, transparent 86%, var(--ink) 100%);
  }
}

/* Portrait phones: the street frame fills the top of the screen, so a lamp and the beacon sit above the wordmark
   instead of behind it. The frame stays taller than wide, which switches the scene to its portrait lens. */
@media (max-width: 760px) and (orientation: portrait) {
  .hero { background: var(--ink); }
  #hero-stage {
    inset: 0 0 auto 0;
    height: 62svh;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
}

@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .topbar { gap: 1rem; padding-top: 1rem; }
  .topbar-home { font-size: 1rem; }
  .topbar-cta { padding: 0.5rem 0.7rem 0.45rem; font-size: 1rem; }
  .wordmark { font-size: clamp(4rem, 21vw, 6rem); }
  .hero-tagline { font-size: 1.6rem; }
  .hero-lede { margin-top: 1rem; font-size: 1.0625rem; }
  .hero-actions { margin-top: 1.25rem; }
  .hero-copy { padding-bottom: 3.75rem; }
  .hero-caption { left: var(--gutter); right: auto; bottom: 1rem; }
  .hero-scrim {
    background:
      linear-gradient(0deg, rgba(8, 7, 6, 0.96) 0%, rgba(8, 7, 6, 0.75) 36%, transparent 52%),
      linear-gradient(180deg, rgba(8, 7, 6, 0.5) 0%, transparent 10%);
  }
  .council-rules > li { min-height: 75svh; }
  .way { min-height: 92svh; }
  .way-gang-member .way-still { object-position: 42% 50%; }
  .way-hitman .way-still { object-position: 31% 50%; }
  .way-boogeyman .way-still { object-position: 62% 50%; }
  /* On a phone the hitman's terms sit at the top, so he stands clear in his lamp's pool below them. */
  .way-hitman::before {
    background: linear-gradient(180deg, var(--ink) 0%, rgba(13, 11, 9, 0.85) 34%, transparent 58%),
      linear-gradient(0deg, var(--ink) 0%, transparent 14%);
  }
  .way-hitman .way-inner { justify-content: flex-start; align-items: flex-start; }
  .district-index { columns: 2; column-gap: 1.25rem; }
  .district-index li { padding: 0.55rem 0 0.65rem; }
  .district-name { font-size: 1.125rem; }
  .district-note { font-size: 0.875rem; line-height: 1.35; }
  .waitlist-row { flex-direction: column; }
  .waitlist-row .button { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .council-rules > li, .button { transition: none; }
  .council.is-revealing .council-rules > li { transform: none; }
  .is-opening .loading-screen,
  .is-opening .topbar,
  .is-opening .hero-copy > *,
  .is-opening .hero-caption { animation: none; }
}