:root {
  --court-chalk: #F2EEE4;
  --worn-ink: #191714;
  --net-shadow: #5E5A52;
  --warm-concrete: #CFC4B2;
  --tape-beige: #A89273;
  --faded-baseline: #6F6658;
  --scuffed-white: #FFF9EC;
  --display: "Poppins", "Josefin Sans", "Futura", "Trebuchet MS", sans-serif;
  --heading: "League Spartan", "Poppins", sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

.font-audit::before { content: "IBM Plex Mono* Mono** for score ticks; Inter* Inter** for calm studio readability"; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--worn-ink);
  background: var(--court-chalk);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 249, 236, 0.72), transparent 26%),
    radial-gradient(circle at 78% 28%, rgba(168, 146, 115, 0.18), transparent 22%),
    linear-gradient(115deg, rgba(94, 90, 82, 0.08), transparent 35%, rgba(207, 196, 178, 0.22));
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle, rgba(25, 23, 20, 0.18) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 249, 236, 0.6) 0 1px, transparent 1px);
  background-size: 23px 29px, 17px 19px;
}

.chalk-dust {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 249, 236, 0.95) 0 1px, transparent 2px);
  background-size: 42px 42px;
  opacity: 0;
  animation: dustSettle 2.8s ease-out forwards;
}

.taped-index {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 20;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  background: rgba(255, 249, 236, 0.68);
  border: 1px solid rgba(94, 90, 82, 0.38);
  box-shadow: 5px 6px 0 rgba(111, 102, 88, 0.16);
  transform: rotate(-0.7deg);
  backdrop-filter: blur(7px);
}

.taped-index::before, .taped-index::after, .tape {
  content: "";
  position: absolute;
  height: 14px;
  width: 54px;
  background: rgba(168, 146, 115, 0.52);
  box-shadow: inset 0 0 12px rgba(255, 249, 236, 0.28);
}

.taped-index::before { left: -17px; top: -8px; transform: rotate(-8deg); }
.taped-index::after { right: -14px; bottom: -8px; transform: rotate(7deg); }

.taped-index span, .taped-index a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--net-shadow);
  text-decoration: none;
  text-transform: uppercase;
}

.taped-index a { color: var(--worn-ink); }

.court-stage { position: relative; min-height: 100vh; }

.court-lines {
  position: fixed;
  inset: -8vh -4vw;
  width: 108vw;
  height: 116vh;
  z-index: 0;
  fill: none;
  stroke: var(--worn-ink);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.36;
  stroke-dasharray: 3400;
  stroke-dashoffset: 3400;
  animation: drawCourt 2.9s cubic-bezier(.3,.7,.2,1) forwards 0.3s;
}

.court-lines .faint { opacity: 0.45; stroke: var(--faded-baseline); stroke-dasharray: 13 16; }

.scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 11vh 5vw;
}

.grid { display: grid; gap: clamp(16px, 2vw, 30px); }

.plan-grid {
  min-height: 78vh;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, minmax(62px, 1fr));
}

.card {
  position: relative;
  padding: clamp(18px, 2.1vw, 34px);
  background: rgba(207, 196, 178, 0.78);
  border: 1px solid rgba(94, 90, 82, 0.55);
  border-radius: 4px 8px 5px 10px;
  box-shadow: 10px 13px 0 rgba(111, 102, 88, 0.13), inset 0 0 44px rgba(255, 249, 236, 0.22);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform 360ms ease, box-shadow 360ms ease, border-color 360ms ease;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(92deg, transparent 0 48%, rgba(255,249,236,.22) 49% 50%, transparent 51%),
    radial-gradient(circle at 24% 74%, rgba(25,23,20,.09), transparent 14%);
  opacity: 0.6;
}

.interactive-card:hover {
  transform: translate(var(--x), calc(var(--y) - 7px)) rotate(var(--r));
  box-shadow: 13px 18px 0 rgba(111, 102, 88, 0.18), inset 0 0 44px rgba(255, 249, 236, 0.24);
  border-color: rgba(25, 23, 20, 0.74);
}

.title-card {
  grid-column: 3 / span 6;
  grid-row: 2 / span 5;
  background: rgba(255, 249, 236, 0.84);
  opacity: 0;
  animation: paperSlide 1.45s cubic-bezier(.2,.8,.22,1) forwards 0.58s;
}

.small-card { grid-column: 9 / span 3; grid-row: 2 / span 3; }
.route-card { grid-column: 8 / span 4; grid-row: 5 / span 3; }
.scoreboard { grid-column: 1 / span 2; grid-row: 5 / span 2; }

.tape-top { top: -7px; left: 42%; transform: rotate(3deg); z-index: 2; }

h1, h2, h3, p { position: relative; margin: 0; }

h1 {
  font-family: var(--display);
  font-size: clamp(74px, 12vw, 188px);
  line-height: 0.78;
  letter-spacing: -0.08em;
  font-weight: 600;
  text-transform: lowercase;
}

h2 {
  font-family: var(--display);
  font-size: clamp(42px, 7vw, 112px);
  line-height: 0.88;
  letter-spacing: -0.055em;
  font-weight: 500;
  text-transform: lowercase;
}

h3 {
  font-family: var(--heading);
  font-size: clamp(28px, 3.8vw, 58px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-transform: lowercase;
}

p { color: var(--net-shadow); line-height: 1.65; font-size: clamp(14px, 1.3vw, 18px); }

.intro { max-width: 520px; margin-top: 28px; font-size: clamp(17px, 1.5vw, 22px); }
.eyebrow, .label, .scene-heading span, .baseline-tab, .stamp, .paper-tab {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--faded-baseline);
}

.label { display: block; margin-bottom: 16px; }
.baseline-tab, .paper-tab {
  display: inline-block;
  margin-top: 30px;
  padding: 10px 14px;
  background: rgba(168, 146, 115, 0.34);
  border: 1px solid rgba(94, 90, 82, 0.4);
  color: var(--worn-ink);
  text-decoration: none;
  transform: rotate(0.8deg);
}

.vellum { background: rgba(255, 249, 236, 0.48); backdrop-filter: blur(2px); }
.swatch { background: rgba(207, 196, 178, 0.88); }
.scoreboard { background: rgba(94, 90, 82, 0.92); color: var(--scuffed-white); }
.scoreboard p, .scoreboard .label { color: rgba(255, 249, 236, 0.74); }
.flip-number { font-family: var(--heading); font-size: clamp(62px, 8vw, 126px); line-height: 0.8; letter-spacing: -0.06em; }

.route-svg, .diagram, .large-viz, .sound-wave { position: relative; width: 100%; height: auto; fill: none; stroke: var(--worn-ink); stroke-linecap: round; stroke-linejoin: round; }
.route, .wobble, .sound-wave path { stroke-width: 3; stroke-dasharray: 720; stroke-dashoffset: 720; animation: tracePath 3.2s ease forwards; }
.route-two { animation-delay: .5s; stroke: var(--faded-baseline); stroke-dasharray: 8 12; }
.heat, .dot-field circle { fill: var(--net-shadow); stroke: none; opacity: 0; animation: heatIn 1.8s ease forwards 1.6s; }
.court-box, .diagram path:first-child { stroke: rgba(25, 23, 20, 0.58); stroke-width: 2; }

.scrape-bars { display: flex; gap: 8px; margin-top: 28px; height: 78px; align-items: end; }
.scrape-bars i { display: block; flex: 1; background: rgba(94, 90, 82, 0.44); border-radius: 3px; transform: rotate(var(--bar-r, -1deg)); }
.scrape-bars i:nth-child(1){height:38%;}.scrape-bars i:nth-child(2){height:72%;--bar-r:2deg}.scrape-bars i:nth-child(3){height:52%;}.scrape-bars i:nth-child(4){height:90%;--bar-r:-3deg}.scrape-bars i:nth-child(5){height:45%;--bar-r:1deg}

.scene-heading { margin-bottom: 34px; max-width: 920px; }
.scene-heading h2 { margin-top: 8px; }

.wall-grid { grid-template-columns: repeat(12, 1fr); align-items: stretch; }
.line-memory { grid-column: 1 / span 7; min-height: 520px; }
.ruling-card { grid-column: 8 / span 4; background: rgba(255, 249, 236, 0.62); }
.pattern-card { grid-column: 4 / span 6; background: rgba(207, 196, 178, 0.64); }

ul { position: relative; padding: 0; margin: 28px 0 0; list-style: none; }
li { padding: 10px 0; border-bottom: 1px dashed rgba(94, 90, 82, 0.44); font-family: var(--mono); color: var(--net-shadow); }
.stamp { margin-top: 30px; padding: 12px; border: 2px solid var(--tape-beige); display: inline-block; transform: rotate(-4deg); color: var(--tape-beige); }

.retro-pattern { height: 220px; margin: 8px 0 22px; opacity: 0.55; background: linear-gradient(45deg, transparent 42%, var(--faded-baseline) 42% 48%, transparent 48% 52%, var(--faded-baseline) 52% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, rgba(25,23,20,.42) 42% 48%, transparent 48% 52%, rgba(25,23,20,.42) 52% 58%, transparent 58%); background-size: 54px 54px; }

.archive-grid { grid-template-columns: repeat(12, 1fr); }
.data-board { grid-column: 2 / span 8; background: rgba(255, 249, 236, 0.58); }
.tally-card { grid-column: 10 / span 3; background: rgba(207, 196, 178, 0.86); }
.coordinate-card { grid-column: 5 / span 4; background: rgba(94, 90, 82, 0.84); }
.coordinate-card .label, .coordinate-card .mono { color: rgba(255, 249, 236, 0.82); }
.mono { font-family: var(--mono); }
.tallies { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 28px 0; }
.tallies i { height: 82px; width: 4px; background: var(--worn-ink); transform: rotate(var(--r2, -5deg)); opacity: .64; }
.tallies i:nth-child(3n) { --r2: 6deg; }.tallies i:nth-child(5n) { --r2: 82deg; transform-origin: bottom; }

.dusk-grid { grid-template-columns: repeat(12, 1fr); }
.room-card { grid-column: 2 / span 6; min-height: 430px; }
.sound-card { grid-column: 8 / span 4; align-self: end; background: rgba(255, 249, 236, 0.55); }
.sample-row { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.sample-row b { height: 118px; border: 1px solid rgba(94,90,82,.42); background: var(--scuffed-white); box-shadow: inset 0 0 28px rgba(94,90,82,.18); }
.sample-row b:nth-child(2){background:var(--warm-concrete)}.sample-row b:nth-child(3){background:var(--tape-beige)}.sample-row b:nth-child(4){background:var(--faded-baseline)}

.rest { display: grid; place-items: center; }
.final-card { max-width: 760px; background: rgba(255, 249, 236, 0.78); text-align: left; }
.final-card p { margin-top: 22px; max-width: 570px; }

@keyframes drawCourt { to { stroke-dashoffset: 0; } }
@keyframes paperSlide { from { opacity: 0; transform: translate(-18px, 38px) rotate(-2.5deg); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@keyframes dustSettle { 0% { opacity: .9; transform: translateY(-20px); } 70% { opacity: .34; } 100% { opacity: 0; transform: translateY(26px); } }
@keyframes tracePath { to { stroke-dashoffset: 0; } }
@keyframes heatIn { to { opacity: .35; } }

@media (max-width: 900px) {
  .taped-index { right: 12px; left: 12px; flex-wrap: wrap; }
  .scene { padding: 14vh 18px 8vh; }
  .plan-grid, .wall-grid, .archive-grid, .dusk-grid { display: block; }
  .card { margin: 18px 0; }
  .title-card { min-height: 56vh; }
  h1 { font-size: clamp(70px, 19vw, 116px); }
}