@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap");
:root {
  --bg: #f3efe5;
  --accent: #173a68;
  --text: #182333;
  --panel: #d7ef3f;
  --line: color-mix(in srgb, var(--text) 20%, transparent);
  --sans: "Noto Sans SC", Arial, sans-serif;
  --display: Georgia, serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.7;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}
button,
input {
  font: inherit;
}
.mast {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 4vw;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 91%, transparent);
}
.brand {
  font-weight: 900;
  max-width: 42rem;
  line-height: 1.25;
}
.mast nav {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
}
.mast nav a,
.text-link {
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}
.btn {
  display: inline-flex;
  padding: 0.85rem 1.25rem;
  background: var(--accent);
  color: #f3efe5;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
}
.actions {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2 {
  font-family: var(--display);
  line-height: 1.08;
}
h1 {
  font-size: clamp(2.2rem, 5.5vw, 6.8rem);
  letter-spacing: -0.045em;
}
h2 {
  font-size: clamp(1.8rem, 3.6vw, 4.4rem);
  letter-spacing: -0.035em;
}
section {
  position: relative;
}
main > section:not(.hero) {
  padding: clamp(4rem, 8vw, 9rem) 6vw;
}
.tagline,
.signal-tags {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
.tagline span,
.signal-tags b {
  border: 1px solid var(--line);
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
details {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}
summary {
  cursor: pointer;
  font-weight: 700;
}
.footer {
  padding: 4rem 5vw 2rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2rem;
}
.footer-brand a,
.footer-columns > a,
.footer ol li:first-child a {
  font-size: 1.15rem;
  font-weight: 900;
}
.footer-links,
.footer-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.copyright {
  font-size: 0.75rem;
  opacity: 0.7;
}
.footer ol {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2rem;
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--text);
}
.hero {
  min-height: 82vh;
  padding: 7vw 6vw;
  overflow: hidden;
}
.hero-copy,
.obs-copy,
.lab-intro,
.stage-copy,
.station-title,
.broadcast-copy {
  position: relative;
  z-index: 3;
  max-width: 760px;
}
.hero-chronicle {
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.15)),
    var(--hero) center/cover;
}
.year-orbit {
  position: absolute;
  right: 8vw;
  top: 12vh;
  width: 32vw;
  height: 32vw;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 7vw;
  color: var(--accent);
}
.chapter-index {
  margin-left: auto;
  white-space: pre-line;
  letter-spacing: 0.2em;
}
.film-rail {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 0.7fr;
  gap: 1rem;
  align-items: end;
}
.film-rail img {
  height: 440px;
  width: 100%;
}
.film-rail img:last-child {
  height: 290px;
}
.stadium-cut {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  background: var(--panel);
}
.rings {
  min-height: 420px;
  border-radius: 50% 50% 0 0;
  border: 1px solid var(--accent);
  display: grid;
  place-items: center;
  position: relative;
}
.rings span {
  position: absolute;
}
.rings span:nth-child(1) {
  top: 10%;
}
.rings span:nth-child(2) {
  right: 8%;
  top: 45%;
}
.rings span:nth-child(3) {
  bottom: 10%;
}
.rings span:nth-child(4) {
  left: 8%;
  top: 45%;
}
.timeline {
  display: grid;
  grid-template-columns: 0.7fr 1.6fr 0.8fr;
  gap: 2rem;
}
.timeline figure,
.voices {
  margin: 0;
}
.timeline img {
  height: 520px;
  width: 100%;
}
.voices {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr;
  align-items: center;
  background: var(--panel);
}
.voices img {
  height: 420px;
  width: 100%;
}
.voices blockquote {
  font: 2rem/1.4 var(--display);
}
.news-ledger article {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  border-top: 1px solid var(--line);
  padding: 1.2rem 0;
}
.faq-manual,
.final-ticket {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.final-ticket img {
  height: 400px;
  width: 100%;
}
.hero-console {
  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.9)),
    var(--hero) center/cover;
  display: grid;
  place-items: center;
  text-align: center;
}
.status,
.live-dot {
  color: var(--accent);
  letter-spacing: 0.16em;
}
.countdown {
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  margin: 2rem auto;
  font: clamp(2.8rem, 7vw, 7rem) / 1 monospace;
}
.countdown small {
  font: 12px var(--sans);
  writing-mode: vertical-rl;
}
.mission-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.6fr 0.8fr;
  gap: 1rem;
  background: var(--panel);
}
.mission-grid ol {
  padding-left: 1rem;
}
.mission-visual {
  position: relative;
}
.mission-visual img {
  height: 520px;
  width: 100%;
}
.crosshair {
  position: absolute;
  inset: 25%;
  border: 1px solid var(--accent);
}
.heat-zone {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr 0.7fr;
  gap: 2rem;
}
.heat-map {
  position: relative;
}
.heat-map img {
  height: 520px;
  width: 100%;
}
.hot {
  position: absolute;
  background: var(--accent);
  color: var(--bg);
  padding: 0.3rem 0.6rem;
  border-radius: 50%;
}
.h1 {
  left: 20%;
  top: 30%;
}
.h2 {
  right: 25%;
  top: 55%;
}
.h3 {
  left: 50%;
  bottom: 18%;
}
.metric-stack p,
.update-log p {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 0;
}
.replay-strip,
.next-signal {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}
.replay-strip img,
.next-signal img {
  height: 420px;
  width: 100%;
}
.system-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.hero-atlas {
  text-align: center;
  background: linear-gradient(
    150deg,
    var(--bg),
    color-mix(in srgb, var(--accent) 12%, var(--bg))
  );
}
.hero-atlas .lead {
  max-width: 720px;
  margin: auto;
}
.atlas-map {
  width: min(900px, 90vw);
  height: 460px;
  margin: 3rem auto;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.atlas-map img {
  width: 48%;
  height: 80%;
  position: absolute;
  left: 26%;
  top: 10%;
  border-radius: 48%;
}
.node {
  position: absolute;
  background: var(--accent);
  color: var(--bg);
  padding: 0.5rem 0.8rem;
}
.n1 {
  left: 2%;
  top: 25%;
}
.n2 {
  right: 3%;
  top: 20%;
}
.n3 {
  left: 10%;
  bottom: 12%;
}
.n4 {
  right: 8%;
  bottom: 12%;
}
.hero-atlas .actions,
.hero-atlas .tagline {
  justify-content: center;
}
.diagnostic-ruler {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 2fr;
  gap: 1rem;
}
.diagnostic-ruler > div {
  border-top: 4px solid var(--accent);
}
.diagnostic-ruler b {
  font-size: 3rem;
}
.learning-paths {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  gap: 2rem;
}
.learning-paths ol {
  list-style: none;
  padding: 0;
}
.learning-paths li {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}
.learning-paths img {
  height: 560px;
  width: 100%;
}
.coach-notes,
.journal,
.application-tab {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--panel);
}
.coach-notes img,
.journal img,
.application-tab img {
  height: 480px;
  width: 100%;
}
.scribble {
  color: var(--accent);
  transform: rotate(-2deg);
}
.lab-table .lab-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-top: 1px solid var(--line);
  padding: 1rem;
}
.lab-table img {
  width: 70%;
  height: 360px;
  margin: 3rem 0 0 auto;
}
.academy-faq {
  max-width: 1000px;
  margin: auto;
}
.hero-search {
  text-align: center;
  display: grid;
  place-content: center;
  background: linear-gradient(135deg, var(--bg), var(--panel));
}
.search-stage {
  width: min(900px, 88vw);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  background: white;
  color: #111;
  padding: 1rem;
  margin: 2rem auto;
  align-items: center;
}
.search-stage input {
  border: 0;
  outline: 0;
}
.search-stage button {
  background: var(--accent);
  color: white;
  border: 0;
  padding: 0.8rem 1.2rem;
}
.popular {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-search .actions {
  justify-content: center;
}
.date-ruler {
  display: grid;
  grid-template-columns: 0.4fr 0.8fr 1.5fr;
  gap: 2rem;
}
.date-ruler aside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.date-ruler figure {
  margin: 0;
}
.date-ruler img {
  height: 430px;
  width: 100%;
}
.category-directory {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 2rem;
  background: var(--panel);
}
.alpha {
  display: flex;
  flex-direction: column;
}
.alpha a {
  padding: 1rem;
  border-top: 1px solid var(--line);
}
.category-directory img {
  height: 450px;
  width: 100%;
}
.table-row {
  display: grid;
  grid-template-columns: 0.5fr 1.4fr 1fr 0.7fr;
  border-top: 1px solid var(--line);
  padding: 1.1rem;
}
.service-explain,
.editor-picks,
.quick-find {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: center;
}
.service-explain img,
.lead-pick img,
.quick-find img {
  height: 430px;
  width: 100%;
}
.indexed-faq {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 3rem;
}
.quick-find {
  grid-template-columns: 1fr 0.8fr 1fr;
  background: var(--panel);
}
.hero-cover {
  padding: 0;
  min-height: 92vh;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: end;
}
.hero-cover > img {
  width: 100%;
  height: 92vh;
  grid-row: 1/5;
}
.hero-cover h1,
.hero-cover .cover-deck,
.cover-actions,
.cover-tags {
  padding-left: 4vw;
  padding-right: 4vw;
}
.cover-lines {
  display: flex;
  justify-content: space-between;
  padding: 2rem 4vw;
}
.contents-page {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
}
.contents-page ol {
  list-style: none;
}
.contents-page li {
  display: grid;
  grid-template-columns: 100px 1fr;
  border-top: 1px solid var(--line);
  padding: 1.2rem;
}
.story-rail {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr 1fr;
  gap: 1rem;
  background: var(--panel);
}
.story-rail img {
  height: 500px;
  width: 100%;
}
.story-rail blockquote {
  font: 1.8rem/1.5 var(--display);
}
.long-read {
  display: grid;
  grid-template-columns: 0.25fr 1fr 1fr;
  gap: 2rem;
}
.dropcap {
  font: 8rem var(--display);
  color: var(--accent);
}
.long-read img {
  height: 500px;
  width: 100%;
}
.image-spread {
  min-height: 78vh;
  padding: 0 !important;
}
.image-spread img {
  width: 100%;
  height: 78vh;
}
.image-spread div {
  position: absolute;
  bottom: 4vw;
  left: 4vw;
  max-width: 600px;
  background: var(--bg);
  padding: 2rem;
}
.letters,
.letter-faq,
.next-issue {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.next-issue img {
  height: 460px;
  width: 100%;
}
.hero-device {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 92vh;
}
.orbit {
  position: absolute;
  border: 1px solid var(--accent);
  border-radius: 50%;
  left: 6%;
  top: 15%;
  width: 48%;
  height: 65%;
  transform: rotate(-12deg);
}
.orbit-b {
  transform: rotate(18deg);
  opacity: 0.45;
}
.device {
  position: absolute;
  overflow: hidden;
  border: 8px solid #111;
  border-radius: 2rem;
  box-shadow: 0 30px 80px #0008;
}
.main-device {
  left: 22%;
  top: 12%;
  width: 240px;
  height: 520px;
  transform: rotate(-5deg);
}
.side-device {
  left: 8%;
  top: 28%;
  width: 190px;
  height: 390px;
  transform: rotate(10deg);
}
.device img {
  width: 100%;
  height: 100%;
}
.hero-device .hero-copy {
  grid-column: 2;
}
.scene-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 0 !important;
}
.scene-switcher article {
  padding: 2rem;
  border-left: 1px solid var(--line);
}
.scene-switcher b {
  font-size: 2rem;
  color: var(--accent);
}
.sync-path {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr;
  gap: 3rem;
  background: var(--panel);
}
.device-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.device-stack img {
  height: 520px;
  width: 100%;
  border-radius: 1.5rem;
}
.device-stack img:last-child {
  margin-top: 5rem;
}
.notification-rhythm .pulse {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 3rem;
}
.pulse span {
  border-top: 2px solid var(--accent);
  padding: 2rem;
}
.day-story,
.mobile-faq,
.download-dock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.day-story img,
.download-dock img {
  height: 520px;
  width: 100%;
}
.hero-observatory {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
}
.observatory-dial {
  width: min(600px, 80vw);
  aspect-ratio: 1;
  border: 1px solid var(--accent);
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
}
.observatory-dial:before,
.observatory-dial:after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.observatory-dial:after {
  inset: 28%;
}
.observatory-dial img {
  width: 55%;
  height: 55%;
  border-radius: 50%;
  filter: grayscale(1);
}
.dial {
  position: absolute;
  color: var(--accent);
  font-family: monospace;
}
.d1 {
  top: 5%;
}
.d2 {
  right: -5%;
  top: 48%;
}
.d3 {
  bottom: 5%;
}
.signal-band {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  background: var(--accent);
  color: var(--bg);
}
.signal-band b {
  font-size: 3rem;
  display: block;
}
.trend-profile {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr 0.8fr;
  gap: 2rem;
}
.trend-chart {
  height: 420px;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.trend-chart span {
  height: var(--h);
  background: var(--accent);
  flex: 1;
}
.trend-profile img {
  position: absolute;
  inset: 20% 30% 10% 30%;
  opacity: 0.22;
  filter: grayscale(1);
}
.experiment-board,
.research-index,
.ethics-faq {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  background: var(--panel);
}
.evidence {
  display: grid;
  grid-template-columns: 1fr 0.6fr;
}
.evidence img,
.research-index img {
  height: 460px;
  width: 100%;
  filter: grayscale(1);
}
.method-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.method-note ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.report-cta {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1fr;
  gap: 1rem;
  align-items: center;
}
.report-cta img {
  height: 420px;
  width: 100%;
  filter: grayscale(1);
}
.hero-documentary {
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)),
    var(--hero) center/cover;
  display: grid;
  place-items: center;
  text-align: center;
}
.letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 8vh;
  background: #000;
}
.letterbox.top {
  top: 0;
}
.letterbox.bottom {
  bottom: 0;
}
.ambient {
  max-width: 850px;
  margin: auto;
  text-align: center;
}
.three-acts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  background: var(--panel);
}
.three-acts img {
  height: 460px;
  width: 100%;
  filter: saturate(0.7);
}
.stand-panorama {
  min-height: 90vh;
  background:
    linear-gradient(90deg, #000b, #0002),
    var(--hero) center/cover;
  display: flex;
  align-items: center;
}
.stand-panorama > div {
  max-width: 680px;
}
.community-action .action-line {
  display: grid;
  grid-template-columns: 80px 1fr 120px;
  border-top: 1px solid var(--line);
  padding: 1.3rem;
}
.oral-news,
.credits-faq {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
.oral-news img {
  height: 520px;
  width: 100%;
}
.join-scene {
  background: var(--text);
  color: var(--bg);
  text-align: center;
}
.hero-venue {
  padding: 0;
  min-height: 90vh;
}
.hero-venue > img {
  width: 100%;
  height: 90vh;
  filter: saturate(0.6);
}
.map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#fff2 1px, transparent 1px),
    linear-gradient(90deg, #fff2 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-venue h1,
.map-intro,
.hero-venue .actions,
.hero-venue .tagline {
  position: absolute;
  left: 5vw;
  z-index: 2;
}
.hero-venue h1 {
  top: 12vh;
  max-width: 900px;
}
.map-intro {
  top: 47vh;
  max-width: 620px;
  background: var(--bg);
  padding: 1rem;
}
.hero-venue .actions {
  top: 60vh;
}
.hero-venue .tagline {
  top: 72vh;
}
.pin {
  position: absolute;
  background: var(--accent);
  color: var(--bg);
  padding: 0.5rem;
  z-index: 3;
}
.p1 {
  left: 25%;
  top: 58%;
}
.p2 {
  right: 22%;
  top: 38%;
}
.p3 {
  right: 10%;
  bottom: 15%;
}
.today-nodes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.node-row {
  border-left: 1px solid var(--line);
  padding: 1rem;
}
.node-row > * {
  display: block;
}
.route-path,
.service-windows,
.route-faq,
.departure {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
.route-path img,
.service-windows img,
.route-faq img,
.departure img {
  height: 480px;
  width: 100%;
}
.route-line {
  display: none;
}
.venue-cutaway .cutaway-image {
  position: relative;
}
.cutaway-image img {
  width: 100%;
  height: 570px;
}
.zone {
  position: absolute;
  background: var(--accent);
  color: var(--bg);
  padding: 0.4rem;
}
.z1 {
  top: 20%;
  left: 20%;
}
.z2 {
  top: 50%;
  left: 50%;
}
.z3 {
  bottom: 10%;
  right: 10%;
}
.service-windows ul {
  list-style: none;
  padding: 0;
}
.service-windows li,
.alert-stack article {
  border-top: 1px solid var(--line);
  padding: 1rem;
  display: grid;
  grid-template-columns: 0.5fr 1fr 0.5fr;
}
.hero-lab {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
}
.specimen {
  position: relative;
  border: 1px solid var(--line);
  padding: 3rem;
}
.specimen img {
  height: 550px;
  width: 100%;
  filter: grayscale(1);
}
.measure {
  position: absolute;
  background: var(--accent);
  color: var(--bg);
  padding: 0.4rem;
  font-family: monospace;
}
.m1 {
  left: 5%;
  top: 10%;
}
.m2 {
  right: 5%;
  top: 40%;
}
.m3 {
  left: 25%;
  bottom: 5%;
}
.research-question {
  border-top: 8px solid var(--accent);
  max-width: 1000px;
  margin: auto;
}
.method-slices {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  gap: 1rem;
  background: var(--panel);
}
.method-slices figure {
  margin: 0;
}
.method-slices img {
  height: 520px;
  width: 100%;
  filter: grayscale(1);
}
.variable-matrix .matrix {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  align-items: center;
}
.matrix b {
  height: 30px;
  background: linear-gradient(
    90deg,
    var(--accent) var(--v),
    var(--line) var(--v)
  );
}
.evidence-compare,
.peer-faq,
.collaboration-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
.evidence-compare img,
.peer-faq img,
.collaboration-form img {
  height: 500px;
  width: 100%;
  filter: grayscale(1);
}
.protocol ol {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.protocol li {
  border-left: 1px solid var(--line);
  padding: 1rem;
}
.protocol b {
  font-size: 2rem;
  display: block;
  color: var(--accent);
}
.hero-premium {
  min-height: 95vh;
  text-align: center;
  display: grid;
  place-items: center;
}
.stage-backdrop {
  position: absolute;
  inset: 10% 15%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 68%);
  opacity: 0.35;
}
.stage-main {
  position: absolute;
  width: 40%;
  height: 62%;
  left: 30%;
  top: 18%;
}
.stage-detail {
  position: absolute;
  width: 18%;
  height: 28%;
  right: 8%;
  bottom: 12%;
  border-radius: 50%;
  border: 8px solid var(--bg);
}
.stage-copy {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stage-copy h1 {
  mix-blend-mode: difference;
}
.stage-copy > p:not(:first-child) {
  margin-top: 38vh;
}
.three-scenes {
  display: grid;
  grid-template-columns: 1fr repeat(3, 1fr);
}
.three-scenes article {
  padding: 2rem;
  border-left: 1px solid var(--line);
}
.detail-lens {
  min-height: 85vh;
  padding: 0 !important;
  position: relative;
}
.detail-lens > img {
  width: 100%;
  height: 85vh;
}
.detail-lens .lens {
  position: absolute;
  right: 8%;
  top: 10%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid var(--bg);
}
.lens img {
  width: 100%;
  height: 100%;
}
.detail-lens article {
  position: absolute;
  left: 6%;
  bottom: 8%;
  max-width: 500px;
  background: var(--bg);
  padding: 2rem;
}
.choice-path {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.choice-path li {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  border-top: 1px solid var(--line);
  padding: 1rem;
}
.assurance {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  background: var(--panel);
}
.assurance > div {
  border-left: 1px solid var(--line);
  padding: 1rem;
}
.editorial-single,
.private-cta {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
.editorial-single img,
.private-cta img {
  height: 560px;
  width: 100%;
}
.advisor-faq {
  max-width: 1000px;
  margin: auto;
}
.hero-community {
  min-height: 92vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}
.wall-card {
  background: var(--panel);
  padding: 1.5rem;
  min-height: 220px;
}
.wall-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wc2 {
  position: relative;
  grid-row: span 2;
}
.wc3 {
  grid-column: 4;
  grid-row: 1/3;
}
.wc3 blockquote {
  font: 2rem/1.5 var(--display);
}
.wall-title {
  grid-column: 1/4;
  grid-row: 2;
  z-index: 2;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  padding: 2rem;
}
.wall-title h1 {
  font-size: clamp(2rem, 4.5vw, 5rem);
}
.today-needs {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
}
.today-needs ul {
  list-style: none;
  padding: 0;
}
.today-needs li {
  display: grid;
  grid-template-columns: 1fr auto;
  border-top: 1px solid var(--line);
  padding: 1rem;
}
.training-match,
.rules-faq,
.member-sign {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
.training-match img,
.member-sign img {
  height: 500px;
  width: 100%;
}
.match-line {
  display: grid;
  grid-template-columns: auto 1fr auto auto 1fr;
  gap: 1rem;
}
.community-table {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: auto auto;
  background: var(--panel);
}
.long-image {
  grid-row: 1/3;
}
.long-image img {
  width: 100%;
  height: 620px;
}
.community-table ol {
  list-style: none;
}
.community-table li {
  display: grid;
  grid-template-columns: 100px 1fr;
  border-top: 1px solid var(--line);
  padding: 1rem;
}
.creation-screen {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr;
  gap: 1rem;
}
.creation-screen img {
  height: 460px;
  width: 100%;
}
.growth-ladder > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.growth-ladder span {
  padding: 2rem;
  border-top: 3px solid var(--accent);
}
.hero-city {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
}
.city-map {
  position: relative;
  height: 650px;
}
.city-map img {
  width: 100%;
  height: 100%;
  filter: saturate(0.7);
}
.city-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.city-map path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
}
.city-map circle {
  fill: var(--accent);
}
.tonight-route {
  display: grid;
  grid-template-columns: 1fr repeat(3, 1fr);
}
.route-stop {
  border-left: 1px solid var(--line);
  padding: 1rem;
}
.route-stop > * {
  display: block;
}
.venue-portraits {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr;
  gap: 1rem;
  background: var(--panel);
}
.venue-portraits img {
  height: 540px;
  width: 100%;
}
.departure-board {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr 0.7fr;
}
.departure-board > * {
  border-top: 1px solid var(--line);
  padding: 1rem;
}
.mobile-tools,
.city-voices,
.departure-board-cta {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
.mobile-tools img,
.city-voices img,
.departure-board-cta img {
  height: 520px;
  width: 100%;
}
.city-voices blockquote {
  font: 2rem/1.4 var(--display);
}
.mast-news {
  display: block;
  padding: 0;
}
.mast-news .ticker {
  background: var(--accent);
  color: white;
  padding: 0.35rem 4vw;
}
.newshead {
  display: flex;
  justify-content: space-between;
  padding: 1rem 4vw;
}
.mast-news nav {
  padding: 0.7rem 4vw;
  border-top: 1px solid var(--line);
}
.hero-broadcast {
  display: grid;
  grid-template-columns: 0.55fr 1.5fr 0.8fr;
  grid-template-rows: 1fr auto;
  gap: 1rem;
}
.rundown ol {
  list-style: none;
  padding: 0;
}
.rundown li {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}
.main-signal {
  position: relative;
}
.main-signal img {
  height: 620px;
  width: 100%;
}
.main-signal h1 {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-size: clamp(2rem, 4vw, 5rem);
  text-shadow: 0 4px 20px #000;
}
.live-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--accent);
  color: white;
  padding: 0.4rem;
}
.lower-third {
  grid-column: 1/4;
  background: var(--accent);
  color: white;
  padding: 0.8rem;
}
.score-wire {
  display: grid;
  grid-template-columns: 0.5fr 1fr auto 1fr 0.7fr 1fr;
  align-items: center;
}
.lead-story,
.tactics-board,
.desk-faq {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: center;
}
.lead-story img,
.pitch img,
.desk-faq img {
  height: 520px;
  width: 100%;
}
.pitch {
  position: relative;
}
.arrow {
  position: absolute;
  color: var(--accent);
  font-size: 4rem;
}
.a1 {
  top: 20%;
  left: 25%;
}
.a2 {
  right: 15%;
  bottom: 20%;
}
.video-wall {
  display: grid;
  grid-template-columns: 0.6fr 1fr 1fr;
  gap: 1rem;
  background: var(--panel);
}
.video-wall img {
  height: 460px;
  width: 100%;
}
.schedule-editorial {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
}
.calendar-row {
  grid-column: 2;
  display: grid;
  grid-template-columns: 0.5fr 1fr 0.4fr;
  border-top: 1px solid var(--line);
  padding: 1rem;
}
.evening-brief {
  text-align: center;
  background: var(--text);
  color: var(--bg);
}
.inner-hero,
.inner-stage,
.inner-cover,
.inner-maphead {
  min-height: 62vh;
  padding: 8vw 7vw;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.inner-hero h1,
.inner-stage h1,
.inner-cover h1,
.inner-maphead h1 {
  font-size: clamp(2.8rem, 7vw, 7rem);
}
.inner-split,
.inner-grid,
.inner-longread,
.inner-route {
  padding: 7vw;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}
.inner-split img,
.inner-stage img,
.inner-cover img,
.inner-maphead img {
  height: 520px;
  width: 100%;
}
.inner-ledger {
  padding: 7vw;
  background: var(--panel);
}
.inner-console {
  display: grid;
  grid-template-columns: 180px 1fr;
}
.inner-rail {
  padding: 3rem 1rem;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.inner-stage,
.inner-grid {
  grid-column: 2;
}
.inner-stage {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
}
.inner-cover {
  display: grid;
  grid-template-columns: 0.5fr 1.2fr;
  grid-template-rows: auto auto 1fr;
  gap: 2rem;
}
.inner-cover img {
  grid-row: 1/4;
  grid-column: 2;
}
.inner-longread .dropcap {
  font-size: 9rem;
}
.inner-index {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 5vw;
  background: var(--panel);
}
.inner-index b {
  border-left: 1px solid var(--line);
  padding: 2rem;
}
.inner-maphead {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
}
.inner-maphead img {
  grid-column: 2;
  grid-row: 1/5;
}
.inner-route {
  position: relative;
}
.route-marker {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-weight: 900;
}
@media (max-width: 900px) {
  .mast {
    padding: 1rem 5vw;
    flex-wrap: wrap;
  }
  .mast nav {
    display: none;
    width: 100%;
    order: 5;
  }
  .mast.open nav {
    display: flex;
    flex-direction: column;
  }
  .nav-toggle {
    display: block;
    margin-left: auto;
  }
  main > section:not(.hero) {
    padding: 4rem 5vw;
  }
  .hero {
    padding: 5rem 5vw;
    min-height: auto;
  }
  .film-rail,
  .stadium-cut,
  .timeline,
  .voices,
  .faq-manual,
  .final-ticket,
  .mission-grid,
  .heat-zone,
  .replay-strip,
  .next-signal,
  .system-faq,
  .learning-paths,
  .coach-notes,
  .journal,
  .application-tab,
  .date-ruler,
  .category-directory,
  .service-explain,
  .editor-picks,
  .indexed-faq,
  .quick-find,
  .contents-page,
  .story-rail,
  .long-read,
  .letters,
  .letter-faq,
  .next-issue,
  .hero-device,
  .sync-path,
  .day-story,
  .mobile-faq,
  .download-dock,
  .hero-observatory,
  .trend-profile,
  .experiment-board,
  .research-index,
  .ethics-faq,
  .report-cta,
  .oral-news,
  .credits-faq,
  .route-path,
  .service-windows,
  .route-faq,
  .departure,
  .hero-lab,
  .method-slices,
  .evidence-compare,
  .peer-faq,
  .collaboration-form,
  .choice-path,
  .editorial-single,
  .private-cta,
  .training-match,
  .rules-faq,
  .member-sign,
  .community-table,
  .creation-screen,
  .hero-city,
  .venue-portraits,
  .mobile-tools,
  .city-voices,
  .departure-board-cta,
  .hero-broadcast,
  .lead-story,
  .tactics-board,
  .desk-faq,
  .inner-split,
  .inner-grid,
  .inner-longread,
  .inner-route,
  .inner-stage,
  .inner-cover,
  .inner-maphead {
    grid-template-columns: 1fr;
  }
  .hero-device .hero-copy {
    grid-column: 1;
    padding-top: 500px;
  }
  .observatory-dial {
    margin: auto;
  }
  .three-acts,
  .scene-switcher,
  .today-nodes,
  .three-scenes,
  .assurance,
  .growth-ladder > div,
  .protocol ol {
    grid-template-columns: 1fr 1fr;
  }
  .diagnostic-ruler {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-cover {
    grid-template-columns: 1fr;
    padding-bottom: 4rem;
  }
  .hero-cover > img {
    height: 62vh;
  }
  .hero-community {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .wall-title,
  .wc3 {
    grid-column: auto;
    grid-row: auto;
  }
  .score-wire {
    grid-template-columns: 1fr 1fr;
  }
  .hero-broadcast .lower-third {
    grid-column: 1;
  }
  .inner-console {
    grid-template-columns: 1fr;
  }
  .inner-rail {
    display: none;
  }
  .inner-stage,
  .inner-grid {
    grid-column: 1;
  }
  .inner-cover img,
  .inner-maphead img {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 560px) {
  h1 {
    font-size: 2.3rem;
  }
  h2 {
    font-size: 1.8rem;
  }
  .mast .brand {
    font-size: 0.85rem;
  }
  .footer ol,
  .three-acts,
  .scene-switcher,
  .diagnostic-ruler,
  .notification-rhythm .pulse,
  .today-nodes,
  .three-scenes,
  .assurance,
  .growth-ladder > div,
  .protocol ol,
  .inner-index {
    grid-template-columns: 1fr;
  }
  .year-orbit {
    display: none;
  }
  .atlas-map {
    height: 360px;
  }
  .hero-cover > img {
    height: 50vh;
  }
  .device {
    transform: none;
  }
  .main-device {
    left: 20%;
    width: 190px;
    height: 400px;
  }
  .side-device {
    left: 3%;
    width: 130px;
    height: 280px;
  }
  .signal-band,
  .today-needs,
  .tonight-route {
    grid-template-columns: 1fr;
  }
  .hero-community {
    display: block;
  }
  .wall-card {
    margin-bottom: 1rem;
  }
  .table-row,
  .service-windows li,
  .alert-stack article,
  .departure-board,
  .calendar-row {
    grid-template-columns: 1fr 1fr;
  }
  .hero-venue h1 {
    top: 8vh;
  }
  .map-intro {
    top: 40vh;
  }
  .hero-venue .actions {
    top: 58vh;
  }
  .hero-venue .tagline {
    top: 72vh;
  }
  .inner-cover,
  .inner-maphead {
    display: block;
  }
}