:root {
  --sky-top: #8c5034;
  --sky-mid: #4d3028;
  --sky-bottom: #17100f;
  --ink: #dec8ba;
  --ink-bright: #f4e8df;
  --muted: #b79a89;
  --faint: rgba(244, 232, 223, .17);
  --line: rgba(244, 232, 223, .22);
  --accent: #e9976d;
  --red: #dc6770;
  --violet: #a593c8;
  --chrome: rgba(238, 190, 154, .88);
  --wash: .4;
  --milky-opacity: 0;
  --zodiac-opacity: 0;
  --darkness: 0;
  --galaxy-detail: 0;
  --serif: 'Spectral', Georgia, serif;
  --mono: 'IBM Plex Mono', monospace;
  --gutter: clamp(1.1rem, 4vw, 4.75rem);
  --max: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #08090d; overflow-x: hidden; scrollbar-color: var(--red) #08090d; scrollbar-width: thin; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: #08090d; }
html::-webkit-scrollbar-thumb { border: 3px solid #08090d; border-radius: 20px; background: var(--red); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0, var(--sky-mid) 27rem, var(--sky-bottom) 88rem, var(--sky-bottom) 100%);
  background-color: var(--sky-bottom);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  font-kerning: normal;
  font-optical-sizing: auto;
  overflow-x: clip;
  transition: color .55s cubic-bezier(.16,1,.3,1), background .9s cubic-bezier(.16,1,.3,1);
}

a { color: inherit; transition: color .25s ease, text-decoration-color .25s ease; }
button, input { font: inherit; }
button { color: inherit; }
::selection { color: #08090d; background: #e77c86; text-shadow: none; }
h1, h2, h3 { text-wrap: balance; }
p, blockquote { text-wrap: pretty; }
.live-readout, .hero-foot, .class-mark, .sky-metrics, .ledger-no, .ledger strong, .case-year, .case-metrics, .field-data, .build-metrics { font-variant-numeric: tabular-nums lining-nums; }

.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; transform: translateY(-150%); opacity: 0; pointer-events: none; padding: .65rem 1rem; background: var(--ink-bright); color: #08090d; font-family: var(--mono); font-size: .78rem; }
.skip-link:focus-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

#starfield { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; filter: saturate(calc(.75 + var(--darkness) * .4)); }
.sky-effects { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.milky-way { position: absolute; width: 165vw; height: 38vw; min-height: 260px; left: -31vw; top: 16vh; transform: rotate(-16deg); opacity: var(--milky-opacity); background: radial-gradient(ellipse at 49% 49%, rgba(246,240,226,.24) 0 3%, rgba(201,195,210,.13) 16%, rgba(150,135,174,.12) 32%, rgba(75,66,97,.04) 59%, transparent 73%), repeating-radial-gradient(ellipse at 42% 51%, rgba(244,238,228,.045) 0 1px, transparent 1px 6px); filter: blur(10px) contrast(1.2); transition: opacity .9s cubic-bezier(.16,1,.3,1); }
.milky-way::before { content: ''; position: absolute; inset: 23% 8%; background: radial-gradient(ellipse at 36% 48%, rgba(250,244,231,.24), transparent 10%), radial-gradient(ellipse at 57% 44%, rgba(205,190,221,.18), transparent 12%), radial-gradient(ellipse at 68% 55%, rgba(245,235,226,.15), transparent 9%); filter: blur(15px); opacity: var(--galaxy-detail); }
.milky-way::after { content: ''; position: absolute; inset: 42% -4% 35%; background: radial-gradient(ellipse, rgba(5,7,13,.68), rgba(10,9,18,.28) 38%, transparent 70%); filter: blur(7px); transform: rotate(.8deg); }
.zodiacal-cone { position: absolute; width: 92vw; height: 98vh; bottom: -39vh; left: 4vw; opacity: var(--zodiac-opacity); background: linear-gradient(76deg, transparent 24%, rgba(137,111,180,.02) 39%, rgba(183,151,223,.34) 50%, rgba(133,104,173,.05) 60%, transparent 76%); clip-path: polygon(49% 0, 67% 100%, 20% 100%); filter: blur(28px); mix-blend-mode: screen; transition: opacity 1.1s cubic-bezier(.16,1,.3,1); }
.horizon-glow { position: absolute; inset: auto -10vw 0; height: 35vh; opacity: var(--wash); background: radial-gradient(ellipse at 45% 100%, rgba(230,134,78,.62), rgba(178,82,54,.14) 38%, transparent 72%); transition: opacity .65s ease; }
.sky-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, transparent 25%, rgba(4,5,9,.08) 70%, rgba(3,4,8,.34) 120%); opacity: calc(.2 + var(--darkness) * .8); transition: opacity .8s ease; }
.grain { position: fixed; inset: -60%; z-index: 30; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); transform: translate3d(0,0,0); }

.site-header { position: fixed; z-index: 20; top: 0; left: 0; right: 0; min-height: 76px; padding: .8rem var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(7,7,10,.84), rgba(7,7,10,.22)); backdrop-filter: blur(18px) saturate(.8); color: var(--chrome); transition: color .55s ease, border-color .55s ease; animation: headerIn .8s cubic-bezier(.16,1,.3,1) both; }
.brand { display: grid; grid-template-columns: 34px auto; grid-template-rows: 1fr 1fr; width: max-content; text-decoration: none; line-height: 1; }
.brand svg { grid-row: 1 / 3; width: 30px; height: 30px; margin-right: .7rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.brand svg circle { fill: currentColor; stroke: none; }
.brand svg { transition: transform .45s cubic-bezier(.16,1,.3,1), filter .45s ease; }
.brand:hover svg { transform: rotate(60deg); filter: drop-shadow(0 0 7px currentColor); }
.brand span { font-family: var(--mono); font-weight: 600; font-size: .82rem; letter-spacing: .15em; }
.brand small { font-family: var(--mono); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; opacity: .68; }
.site-header nav { display: flex; gap: clamp(1rem, 2.4vw, 2.7rem); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.site-header nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; position: relative; }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 7px; height: 1px; background: var(--red); transition: right .25s ease; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right: 0; }
.live-readout { justify-self: end; display: flex; align-items: center; gap: .55rem; font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mobile-guide { display: none; min-height: 44px; align-items: center; color: var(--chrome); font: 500 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-underline-offset: 4px; }
.signal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); }

@keyframes headerIn { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

main { position: relative; z-index: 2; }
.hero { min-height: 100svh; padding: clamp(7rem, 15vh, 10rem) var(--gutter) 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 540px); grid-template-rows: 1fr auto; align-items: center; gap: 2rem clamp(2rem, 7vw, 8rem); position: relative; isolation: isolate; }
.hero::before { content: 'PRESERVE / 21'; position: absolute; right: var(--gutter); top: 21%; color: var(--chrome); opacity: .34; font: 500 .55rem/1 var(--mono); letter-spacing: .28em; writing-mode: vertical-rl; }
.hero-copy { max-width: 830px; text-shadow: 0 2px 25px rgba(32,14,10,.35); }
.hero-kicker { margin: 0 0 clamp(1rem, 3vh, 2.5rem); color: var(--ink-bright); font: 500 clamp(.67rem, .9vw, .78rem)/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { margin: 0; color: var(--ink-bright); font-size: clamp(4.2rem, 10vw, 10rem); font-weight: 250; line-height: .72; letter-spacing: -.072em; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { margin-left: clamp(1rem, 8vw, 7.5rem); font-weight: 200; line-height: .95; color: var(--accent); }
.hero-intro { max-width: 26ch; margin: clamp(2rem, 4vh, 3.5rem) 0 0 clamp(1rem, 8vw, 7.5rem); font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.4; }
.sky-verdict { width: min(420px, calc(100% - clamp(1rem, 8vw, 7.5rem))); margin: clamp(2rem, 4vh, 3rem) 0 0 clamp(1rem, 8vw, 7.5rem); padding: .9rem 0 0; border-top: 1px solid var(--line); }
.sky-verdict span { color: var(--ink-bright); font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .15em; }
.sky-verdict p { max-width: 42ch; margin: .65rem 0 0; color: var(--ink-bright); font: .69rem/1.55 var(--mono); }
.hero-kicker, .hero h1 span, .hero h1 em, .hero-intro, .sky-verdict { animation: revealUp .95s cubic-bezier(.16,1,.3,1) both; }
.hero h1 span { animation-delay: .08s; }
.hero h1 em { animation-delay: .16s; }
.hero-intro { animation-delay: .25s; }
.sky-verdict { animation-delay: .34s; }
.hero-orbit { position: absolute; z-index: -1; width: min(68vw, 900px); aspect-ratio: 1; left: 25%; top: 47%; transform: translate(-50%, -50%); opacity: .18; }
.orbit { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; transform: rotate(-21deg) scaleY(.34); }
.orbit-two { inset: 13%; transform: rotate(-21deg) scaleY(.45); }
.orbit-three { inset: 26%; transform: rotate(-21deg) scaleY(.62); }

.bortle-console { position: relative; align-self: center; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--line); border-top-color: var(--chrome); background: linear-gradient(145deg, rgba(12,10,13,.72), rgba(8,8,12,.42)); backdrop-filter: blur(22px) saturate(.82); box-shadow: 0 35px 100px rgba(4,3,7,.34), inset 0 1px rgba(255,255,255,.025); animation: revealUp 1s .18s cubic-bezier(.16,1,.3,1) both; overflow: hidden; }
.bortle-console::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(233,151,109,.14), transparent calc((1 - var(--darkness)) * 100%)), linear-gradient(270deg, rgba(161,132,194,.12), transparent calc(var(--darkness) * 100%)); opacity: .7; }
.bortle-console::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--darkness) * 100%); width: 1px; background: linear-gradient(transparent, var(--red), transparent); box-shadow: 0 0 18px var(--red); opacity: .6; transition: left .7s cubic-bezier(.16,1,.3,1); }
.bortle-console > * { position: relative; z-index: 1; }
.console-command { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; margin: -.2rem 0 1.5rem; color: var(--chrome); font: 500 .53rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.console-command i { height: 1px; background: linear-gradient(90deg, var(--chrome), transparent); opacity: .55; }
.console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.7rem; }
.console-label, .range-label { display: block; margin-bottom: .42rem; font: 500 .63rem/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.console-head strong { color: var(--ink-bright); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 400; }
.class-mark { flex: 0 0 auto; display: flex; align-items: baseline; color: var(--red); font-family: var(--mono); line-height: .8; }
.class-mark span { font-size: .75rem; }
.class-mark b { font-size: 4.4rem; font-weight: 200; letter-spacing: -.09em; }
.bortle-console input[type="range"] { width: 100%; min-height: 44px; margin: 0; appearance: none; background: transparent; cursor: grab; }
.bortle-console input[type="range"]:active { cursor: grabbing; }
.bortle-console input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, #e99c69, #8c4f3f 35%, #3a2930 60%, #10101a 100%); border: 1px solid rgba(244,232,223,.28); }
.bortle-console input[type="range"]::-moz-range-track { height: 8px; background: linear-gradient(90deg, #e99c69, #8c4f3f 35%, #3a2930 60%, #10101a 100%); border: 1px solid rgba(244,232,223,.28); }
.bortle-console input[type="range"]::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; margin-top: -11px; border: 2px solid var(--ink-bright); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(220,103,112,.15), 0 0 20px rgba(220,103,112,.45); }
.bortle-console input[type="range"]::-moz-range-thumb { width: 25px; height: 25px; border: 2px solid var(--ink-bright); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(220,103,112,.15), 0 0 20px rgba(220,103,112,.45); }
.darkness-gauge { height: 6px; margin: -.45rem 0 .45rem; display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; }
.darkness-gauge i { background: var(--line); transform-origin: left; transition: background .45s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.darkness-gauge i.is-on { background: var(--red); transform: scaleY(1.6); }
.scale-labels { display: flex; justify-content: space-between; margin-top: .2rem; color: var(--ink-bright); font: 500 .72rem/1.35 var(--mono); }
.scale-labels span:nth-child(2) { text-align: center; }
.scale-labels span:last-child { text-align: right; }
.scale-labels small { color: var(--muted); font-size: .53rem; letter-spacing: .12em; }
.console-note { margin: 1.2rem 0 1rem; color: var(--muted); font: .68rem/1.5 var(--mono); }
.sky-metrics { border-top: 1px solid var(--line); padding-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; font: .6rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.sky-metrics span { display: block; }
.sky-metrics b { color: var(--ink-bright); font-weight: 500; }
.hero-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font: .62rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; animation: revealUp 1s .35s cubic-bezier(.2,.8,.2,1) both; }

@keyframes revealUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.motion-ready .reveal-section > * { transform: translateY(18px); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.motion-ready .reveal-section.is-revealed > * { transform: none; }
.motion-ready .reveal-section.is-revealed > :nth-child(2) { transition-delay: .1s; }
.motion-ready .reveal-section.is-revealed > :nth-child(3) { transition-delay: .2s; }

.manifesto { min-height: 72svh; max-width: var(--max); margin: 0 auto; padding: clamp(7rem, 15vw, 13rem) var(--gutter); display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(230px, 340px); align-items: center; gap: clamp(2rem, 6vw, 7rem); border-top: 1px solid var(--line); }
.manifesto-side { font: .62rem/1 var(--mono); letter-spacing: .22em; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--red); }
.manifesto h2 { max-width: 18ch; margin: 0; color: var(--ink-bright); font-size: clamp(2.5rem, 5vw, 5.2rem); font-weight: 300; line-height: .96; letter-spacing: -.045em; }
.manifesto > div:nth-child(2) > p { max-width: 52ch; margin: 2.3rem 0 0; font-size: clamp(1.05rem, 1.5vw, 1.32rem); color: var(--ink); }
.moon-index { align-self: end; padding: 2rem 0 0; border-top: 1px solid var(--line); }
.moon-disc { display: block; width: clamp(100px, 12vw, 160px); aspect-ratio: 1; margin-bottom: 2rem; border-radius: 50%; background: radial-gradient(circle at 65% 45%, var(--ink-bright), #bfaea6 43%, #776a69 46%, #27242b 66%); box-shadow: 0 0 55px rgba(206,195,193,.12); }
.moon-index p { max-width: 26ch; margin: 0; color: var(--muted); font: .73rem/1.6 var(--mono); }
.moon-index b { color: var(--ink-bright); font-weight: 500; }

.ledger-section { padding: clamp(7rem, 12vw, 11rem) var(--gutter); background: radial-gradient(ellipse at 82% 30%, rgba(161,132,194,.065), transparent 34rem), rgba(7,8,12,.55); border-block: 1px solid var(--line); }
.section-head { max-width: var(--max); margin: 0 auto clamp(4rem, 8vw, 7rem); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr); gap: 1rem 6vw; }
.eyebrow { grid-column: 1 / -1; margin: 0; color: var(--red); font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .2em; }
.section-head h2 { margin: 0; color: var(--ink-bright); font-size: clamp(3.4rem, 8vw, 7.6rem); font-weight: 200; line-height: .8; letter-spacing: -.055em; }
.section-head > p:last-child { align-self: end; max-width: 43ch; margin: 0; color: var(--ink); }
.ledger-wrap { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 48px 1fr; gap: 2rem; }
.ledger-axis { display: flex; flex-direction: column; align-items: center; color: var(--muted); font: .55rem/1 var(--mono); letter-spacing: .12em; writing-mode: vertical-rl; transform: rotate(180deg); }
.ledger-axis i { flex: 1; width: 1px; margin: 1rem 0; background: linear-gradient(var(--accent), var(--violet), var(--line)); }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { --row-depth: .1; position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 3.5rem); min-height: 126px; padding: 1.25rem 1rem; border-top: 1px solid var(--line); opacity: .32; transition: opacity .55s ease, background .55s ease, transform .55s cubic-bezier(.16,1,.3,1); overflow: hidden; }
.ledger li::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--row-depth) * 100%); background: linear-gradient(90deg, var(--red), var(--violet)); opacity: .65; transform-origin: left; transform: scaleX(.05); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.ledger li.is-visible::after, .ledger li.is-current::after { transform: scaleX(1); }
.ledger li:nth-child(1){--row-depth:.08}.ledger li:nth-child(2){--row-depth:.16}.ledger li:nth-child(3){--row-depth:.27}.ledger li:nth-child(4){--row-depth:.39}.ledger li:nth-child(5){--row-depth:.52}.ledger li:nth-child(6){--row-depth:.66}.ledger li:nth-child(7){--row-depth:.79}.ledger li:nth-child(8){--row-depth:.9}.ledger li:nth-child(9){--row-depth:1}
.ledger li:last-child { border-bottom: 1px solid var(--line); }
.ledger li.is-visible { opacity: 1; }
.ledger li.is-current { opacity: 1; background: linear-gradient(90deg, rgba(220,103,112,.19), rgba(161,132,194,.04) 64%, transparent); transform: translateX(10px); }
.ledger-no { color: var(--red); font: 300 1.5rem/1 var(--mono); }
.ledger h3 { margin: 0 0 .25rem; color: var(--ink-bright); font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 400; line-height: 1; }
.ledger p { max-width: 58ch; margin: 0; color: var(--ink); font-size: .92rem; }
.ledger strong { color: var(--chrome); font: 400 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }

.ordinance { max-width: var(--max); margin: 0 auto; padding: clamp(6rem, 12vw, 12rem) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.town-sky { --case-split: 50%; grid-area: 1 / 1; position: relative; min-height: 640px; border: 1px solid var(--line); border-top-color: var(--chrome); background: linear-gradient(180deg, rgba(25,29,49,.74), rgba(7,8,13,.3)); overflow: hidden; box-shadow: inset 0 -90px 100px rgba(3,4,8,.32), 0 35px 90px rgba(3,4,8,.18); }
.case-pollution, .case-recovered { position: absolute; inset: 0; pointer-events: none; transition: clip-path .12s linear; }
.case-pollution { z-index: 0; clip-path: inset(0 calc(100% - var(--case-split)) 0 0); background: radial-gradient(ellipse at 46% 84%, rgba(238,145,84,.58), rgba(154,75,52,.2) 30%, transparent 66%), linear-gradient(180deg, rgba(129,78,58,.68), rgba(36,24,28,.2)); }
.case-recovered { z-index: 1; clip-path: inset(0 0 0 var(--case-split)); background: radial-gradient(ellipse at 62% 25%, rgba(174,151,209,.19), transparent 38%), radial-gradient(circle at 76% 16%, rgba(244,232,223,.95) 0 1px, transparent 1.7px), radial-gradient(circle at 64% 31%, rgba(244,232,223,.8) 0 1px, transparent 1.6px), radial-gradient(circle at 88% 42%, rgba(244,232,223,.8) 0 1px, transparent 1.7px); background-size: auto, 83px 71px, 117px 109px, 149px 131px; }
.case-recovered::after { content: ''; position: absolute; width: 120%; height: 34%; left: -8%; top: 17%; transform: rotate(-14deg); background: radial-gradient(ellipse, rgba(205,183,229,.32), rgba(154,132,190,.09) 45%, transparent 72%); filter: blur(10px); }
.town-sky svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.terrain-back { fill: rgba(87,75,82,.72); }
.terrain-front { fill: rgba(9,10,15,.98); }
.town-lights rect { fill: var(--accent); filter: drop-shadow(0 0 7px var(--accent)); }
.galaxy-path { fill: none; stroke: rgba(201,179,226,.62); stroke-width: 34; stroke-linecap: round; filter: blur(13px); }
.chart-stars { fill: var(--ink-bright); }
.case-phase { position: absolute; z-index: 4; top: 1.2rem; color: var(--chrome); font: 500 .56rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.case-phase-before { left: 1rem; }
.case-phase-after { right: 1rem; color: var(--red); }
.case-divider { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--case-split); width: 1px; background: linear-gradient(transparent, var(--red) 20% 80%, transparent); box-shadow: 0 0 24px rgba(220,103,112,.45); transform: translateX(-.5px); transition: left .12s linear; }
.case-divider i { display: none; }
.case-coordinate { position: absolute; z-index: 4; left: 1rem; bottom: 1rem; color: var(--muted); font: .62rem/1 var(--mono); letter-spacing: .12em; }
.case-control { grid-area: 1 / 1; position: relative; z-index: 5; align-self: center; height: 0; pointer-events: none; }
.case-control label { position: absolute; right: 1rem; top: 5.2rem; color: var(--ink-bright); font: 500 .55rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 9px #07080d; }
.case-control input { width: 100%; height: 48px; margin: 0; appearance: none; background: transparent; cursor: ew-resize; pointer-events: auto; }
.case-control input::-webkit-slider-runnable-track { height: 1px; background: transparent; }
.case-control input::-moz-range-track { height: 1px; background: transparent; }
.case-control input::-webkit-slider-thumb { appearance: none; width: 44px; height: 44px; margin-top: -22px; border: 1px solid var(--red); border-radius: 50%; background: rgba(8,8,13,.88); box-shadow: 0 0 0 1px rgba(8,8,13,.6), 0 0 26px rgba(220,103,112,.5); }
.case-control input::-moz-range-thumb { width: 42px; height: 42px; border: 1px solid var(--red); border-radius: 50%; background: rgba(8,8,13,.88); box-shadow: 0 0 0 1px rgba(8,8,13,.6), 0 0 26px rgba(220,103,112,.5); }
.case-control input:focus-visible { outline: 2px solid var(--ink-bright); outline-offset: 5px; }
.case-control p { position: absolute; right: 1rem; top: 6.3rem; margin: 0; color: var(--muted); font: .52rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.case-control p b { color: var(--red); font-weight: 500; }
.case-copy { grid-area: 1 / 2; position: relative; }
.case-year { position: absolute; right: 0; top: -4.2rem; color: var(--red); font: 300 2.4rem/.8 var(--mono); text-align: right; }
.case-copy h2 { margin: 0; color: var(--ink-bright); font-size: clamp(2.7rem, 5vw, 5.2rem); font-weight: 300; line-height: .92; letter-spacing: -.045em; }
.case-copy > p { max-width: 48ch; margin: 2rem 0 0; color: var(--ink); font-size: 1.05rem; }
blockquote { margin: 3.2rem 0; padding: 1.8rem 0 1.8rem 2rem; border-left: 2px solid var(--red); color: var(--ink-bright); font-size: clamp(1.25rem, 2vw, 1.65rem); font-style: italic; line-height: 1.35; }
blockquote cite { display: block; margin-top: 1rem; color: var(--muted); font: normal .63rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.case-metrics { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.case-metrics div { padding: 1.3rem .7rem; border-right: 1px solid var(--line); }
.case-metrics div:last-child { border: 0; }
.case-metrics dt { color: var(--red); font: 300 clamp(1.35rem, 2.1vw, 2.2rem)/1 var(--mono); white-space: nowrap; }
.case-metrics dd { margin: .45rem 0 0; color: var(--muted); font: .58rem/1.35 var(--mono); text-transform: uppercase; }

.fixtures { padding: clamp(7rem, 12vw, 11rem) var(--gutter); background: radial-gradient(ellipse at 18% 20%, rgba(220,103,112,.06), transparent 32rem), linear-gradient(180deg, rgba(8,8,12,.82), rgba(5,7,12,.72)); border-block: 1px solid var(--line); }
.fixture-intro { max-width: var(--max); margin: 0 auto 5rem; display: grid; grid-template-columns: 1fr minmax(280px, .5fr); gap: 1rem 8vw; }
.fixture-intro h2 { grid-row: 1 / 3; margin: 0; color: var(--ink-bright); font-size: clamp(3.6rem, 8vw, 8rem); font-weight: 200; line-height: .8; letter-spacing: -.06em; }
.fixture-intro > p:not(.cutoff-status) { align-self: end; max-width: 40ch; margin: 0; color: var(--ink); }
.cutoff-toggle { justify-self: start; align-self: end; min-height: 48px; min-width: 210px; padding: .65rem .7rem .65rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border: 1px solid var(--red); border-radius: 0; background: transparent; font: .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }
.cutoff-toggle i { position: relative; width: 42px; height: 22px; border: 1px solid currentColor; border-radius: 20px; }
.cutoff-toggle i::after { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: var(--red); transition: transform .25s ease; }
.cutoff-toggle[aria-pressed="true"] i::after { transform: translateX(20px); }
.cutoff-toggle:hover { color: var(--ink-bright); background: rgba(220,103,112,.1); box-shadow: inset 0 0 0 1px rgba(220,103,112,.16), 0 0 30px rgba(220,103,112,.08); }
.cutoff-toggle:active { transform: translateY(1px); }
.cutoff-status { align-self: start; max-width: 30ch; margin: .3rem 0 0; color: var(--muted); font: .66rem/1.55 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.cutoff-status span { display: inline-block; min-width: 2.4ch; margin-right: .4rem; color: var(--red); font: 300 1.8rem/1 var(--mono); vertical-align: -.2em; }
.fixture-stage { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); }
.fixture-diagram { position: relative; min-height: 590px; padding: 1.2rem; text-align: center; transition: opacity .6s cubic-bezier(.16,1,.3,1), background .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.fixture-diagram:first-child { border-right: 1px solid var(--line); }
.fixture-diagram svg { width: min(100%, 430px); height: 430px; }
.diagram-label { position: absolute; left: 1.3rem; top: 1.3rem; color: var(--muted); font: .65rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; }
.lamp, .shield, .ground { fill: none; stroke: var(--ink-bright); stroke-width: 3; }
.shield { fill: var(--red); stroke: none; }
.upward-ray { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 9; transition: opacity .35s ease; }
.fixture-diagram p { margin: .5rem auto 0; color: var(--muted); font: .68rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.fixture-diagram p b { display: block; color: var(--ink-bright); font-size: 2.8rem; font-weight: 300; }
.fixture-stage[data-shielded="false"] .shielded { opacity: .22; transform: scale(.975); }
.fixture-stage[data-shielded="true"] .exposed { opacity: .18; transform: scale(.975); }
.fixture-stage[data-shielded="true"] .shielded { background: rgba(220,103,112,.07); }
.fixture-stage[data-shielded="true"] .exposed .upward-ray { opacity: .2; }
.ordinance-rules { max-width: var(--max); margin: 2rem auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.ordinance-rules li { padding: 1.5rem; border-right: 1px solid var(--line); }
.ordinance-rules li:last-child { border: 0; }
.ordinance-rules span { color: var(--red); font: .65rem/1 var(--mono); }
.ordinance-rules b { display: block; margin: 1rem 0 .25rem; color: var(--ink-bright); font-size: 1.45rem; font-weight: 400; }
.ordinance-rules p { margin: 0; color: var(--muted); font-size: .88rem; }

.field-record { max-width: var(--max); margin: 0 auto; padding: clamp(8rem, 14vw, 14rem) var(--gutter); display: grid; grid-template-columns: minmax(280px, .8fr) minmax(380px, 1.2fr); grid-template-rows: 1fr auto; gap: 4rem clamp(3rem, 10vw, 10rem); align-items: center; }
.field-copy h2 { margin: 1.6rem 0 0; color: var(--ink-bright); font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 300; line-height: .95; letter-spacing: -.04em; }
.field-copy > p:not(.eyebrow) { max-width: 44ch; margin: 2rem 0; color: var(--ink); }
.field-link { display: inline-flex; min-height: 48px; align-items: center; gap: 2rem; text-decoration: none; border-bottom: 1px solid var(--red); font: .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.field-link span { color: var(--red); transition: transform .25s ease; }
.field-link:hover, .field-link:focus-visible { color: var(--ink-bright); }
.field-link:hover span, .field-link:focus-visible span { transform: translate(5px, -5px); }
.dark-seal { width: 154px; aspect-ratio: 1; margin-top: 3.6rem; display: grid; place-content: center; border: 1px solid var(--red); border-radius: 50%; color: var(--red); text-align: center; transform: rotate(-7deg); box-shadow: inset 0 0 0 7px var(--sky-bottom), inset 0 0 0 8px rgba(220,103,112,.38); }
.dark-seal span { font: 300 2.15rem/1 var(--mono); letter-spacing: -.08em; }
.dark-seal small { max-width: 12ch; margin: .55rem auto 0; font: .5rem/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.preserve-map { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; }
.preserve-map svg { width: 100%; height: 100%; fill: none; stroke: rgba(220,103,112,.38); stroke-width: 1.2; }
.preserve-map svg > path:nth-child(4) { fill: rgba(165,147,200,.08); stroke: var(--violet); }
.stations { fill: var(--red); stroke: none; }
.transect { stroke: rgba(244,232,223,.17); stroke-dasharray: 4 7; }
.map-north { position: absolute; right: 9%; top: 10%; color: var(--red); font: 1rem/1 var(--mono); }
.map-key { position: absolute; left: 4%; bottom: 2%; display: flex; gap: 1.5rem; padding: .6rem 1rem; background: #0b0c11; color: var(--muted); font: .55rem/1.4 var(--mono); text-transform: uppercase; }
.map-key span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: .5rem; border: 1px solid var(--violet); }
.map-key span:last-child::before { border-radius: 50%; border-color: var(--red); background: var(--red); }
.field-data { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.field-data div { padding: 1.5rem 1rem; border-right: 1px solid var(--line); }
.field-data div:last-child { border: 0; }
.field-data span { display: block; color: var(--muted); font: .58rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.field-data b { display: block; margin-top: .8rem; color: var(--ink-bright); font: 300 clamp(1.45rem, 3vw, 2.6rem)/1 var(--mono); }

.closing { min-height: 78svh; padding: 8rem var(--gutter); display: grid; place-content: center; text-align: center; position: relative; overflow: hidden; border-top: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, rgba(161,132,194,.07), transparent 43%); }
.closing h2 { position: relative; z-index: 1; max-width: 17ch; margin: 0 auto; color: var(--ink-bright); font-size: clamp(3rem, 7vw, 7rem); font-weight: 200; line-height: .94; letter-spacing: -.05em; }
.closing h2 em { color: var(--violet); font-weight: 250; text-shadow: 0 0 45px rgba(161,132,194,.18); }
.closing > p { margin: 3rem 0 0; color: var(--muted); font: .62rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.closing-constellation { position: absolute; width: min(70vw, 900px); height: 500px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .34; }
.closing-constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--violet); stroke-width: .6; }
.closing-constellation i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-bright); box-shadow: 0 0 16px var(--ink-bright); }
.closing-constellation i:nth-child(1){left:8%;top:77%}.closing-constellation i:nth-child(2){left:27%;top:50%}.closing-constellation i:nth-child(3){left:48%;top:69%}.closing-constellation i:nth-child(4){left:65%;top:19%}.closing-constellation i:nth-child(5){left:92%;top:48%}.closing-constellation i:nth-child(6){left:73%;top:66%}

.site-footer { position: relative; z-index: 2; padding: 2rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--line); background: #07080b; color: #c9bfc0; font: .63rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem 2.5rem; }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; text-decoration-color: rgba(201,191,192,.4); text-underline-offset: 4px; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--red); text-decoration-color: var(--red); }

@media (max-width: 1000px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: 1.2rem; }
  .site-header nav { display: none; }
  .mobile-guide { display: inline-flex; }
  .hero { min-height: auto; grid-template-columns: 1fr; grid-template-rows: auto; padding-top: 10rem; }
  .hero-copy { align-self: auto; }
  .hero h1 { font-size: clamp(5.2rem, 14vw, 8rem); }
  .bortle-console { width: min(100%, 680px); justify-self: end; }
  .manifesto { grid-template-columns: 40px 1fr; }
  .moon-index { grid-column: 2; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2rem; }
  .moon-disc { margin: 0; width: 100px; }
  .ordinance { grid-template-columns: 1fr; }
  .town-sky { min-height: 520px; }
  .case-copy { grid-area: 2 / 1; margin-left: 10vw; }
  .fixture-intro { grid-template-columns: 1fr; }
  .fixture-intro h2 { grid-row: auto; }
  .fixture-intro p { margin-top: 1.5rem; }
  .cutoff-toggle { margin-top: 1rem; }
  .ordinance-rules { grid-template-columns: repeat(2, 1fr); }
  .ordinance-rules li:nth-child(2) { border-right: 0; }
  .ordinance-rules li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .field-record { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .closing { min-height: 68svh; }
  .closing h2 { font-size: clamp(4rem, 8vw, 6.4rem); }
}

@media (max-width: 680px) {
  :root { --gutter: 1.1rem; }
  body { font-size: 16px; }
  .site-header { min-height: 66px; padding-block: .55rem; }
  .brand { grid-template-columns: 30px auto; }
  .brand svg { width: 26px; height: 26px; }
  .site-header { grid-template-columns: 1fr auto auto; gap: .7rem; }
  .live-readout { font-size: .53rem; }
  .mobile-guide { font-size: .55rem; }
  .hero { min-height: auto; padding-top: 6.2rem; gap: 1.25rem; }
  .hero::before { display: none; }
  .hero-copy { min-height: 35svh; display: flex; flex-direction: column; justify-content: center; }
  .hero h1 { font-size: clamp(3.85rem, 20.5vw, 5.6rem); line-height: .77; }
  .hero h1 em { margin-left: .35rem; }
  .hero-intro { margin: 1.05rem 0 0 .35rem; font-size: 1rem; }
  .hero-kicker { font-size: .61rem; }
  .sky-verdict { width: calc(100% - .35rem); margin: 1.05rem 0 0 .35rem; padding-top: .6rem; }
  .sky-verdict p { display: none; }
  .sky-verdict span { font-size: .54rem; }
  .bortle-console { padding: .8rem 1rem .9rem; background: rgba(8,8,12,.68); }
  .console-command { margin-bottom: .75rem; font-size: .45rem; }
  .console-command span:last-child { display: none; }
  .console-head { margin-bottom: .65rem; }
  .console-head strong { font-size: 1.25rem; }
  .class-mark b { font-size: 2.6rem; }
  .console-note { margin: .7rem 0 .65rem; }
  .sky-metrics { grid-template-columns: repeat(2, 1fr); gap: .25rem .7rem; padding-top: .65rem; }
  .sky-metrics span:last-child { grid-column: 1 / -1; }
  .hero-foot { flex-wrap: wrap; font-size: .53rem; }
  .hero-foot span:last-child { width: 100%; }
  .hero-orbit { width: 120vw; left: 42%; top: 25%; }
  .manifesto { min-height: auto; grid-template-columns: 1fr; gap: 2rem; padding-block: 7rem; }
  .manifesto-side { display: none; }
  .manifesto h2 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .moon-index { grid-column: auto; grid-template-columns: 76px 1fr; }
  .moon-disc { width: 76px; }
  .section-head { display: block; }
  .section-head h2 { margin: 1rem 0 2rem; font-size: clamp(3.3rem, 17vw, 5rem); }
  .ledger-section { padding-inline: 0; }
  .ledger-section .section-head { padding-inline: var(--gutter); }
  .ledger-wrap { grid-template-columns: 1fr; }
  .ledger-axis { display: none; }
  .ledger li { grid-template-columns: 45px 1fr; min-height: 146px; padding-inline: var(--gutter); gap: 1rem; }
  .ledger strong { grid-column: 2; }
  .ledger li.is-current { transform: none; box-shadow: inset 3px 0 var(--red); }
  .ledger p { font-size: .86rem; }
  .ordinance { padding: 4.5rem 0; }
  .town-sky { min-height: 400px; border-left: 0; }
  .case-control label, .case-control p { right: var(--gutter); }
  .case-phase { font-size: .48rem; }
  .case-copy { margin: 0; padding: 2rem var(--gutter) 0; }
  .case-year { top: -1rem; right: 1.2rem; font-size: 1.5rem; }
  .case-copy h2 { font-size: clamp(2.65rem, 13vw, 4rem); }
  .case-metrics { grid-template-columns: 1fr; }
  .case-metrics div { border-right: 0; border-bottom: 1px solid var(--line); }
  .case-metrics div:last-child { border: 0; }
  .fixtures { padding-top: 5rem; }
  .fixture-intro { margin-bottom: 3rem; }
  .fixture-intro h2 { font-size: clamp(3.5rem, 17vw, 5rem); }
  .fixture-stage { grid-template-columns: 1fr; }
  .fixture-diagram { min-height: 490px; }
  .fixture-diagram:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .fixture-diagram svg { height: 360px; }
  .ordinance-rules { grid-template-columns: 1fr; }
  .ordinance-rules li { border-right: 0; border-bottom: 1px solid var(--line); }
  .ordinance-rules li:nth-child(2) { border-bottom: 1px solid var(--line); }
  .field-record { grid-template-columns: 1fr; gap: 4rem; }
  .dark-seal { width: 124px; margin-top: 2.6rem; }
  .preserve-map { width: 100%; }
  .field-data { grid-column: auto; grid-template-columns: repeat(2, 1fr); }
  .field-data div:nth-child(2) { border-right: 0; }
  .field-data div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .field-data b { font-size: 1.35rem; }
  .map-key { left: 0; bottom: -2.2rem; width: 100%; justify-content: center; }
  .closing { min-height: 70svh; padding-inline: 1rem; }
  .closing h2 { font-size: clamp(2.8rem, 14vw, 4.8rem); }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .site-footer nav { justify-content: flex-start; flex-direction: column; gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .motion-ready .reveal-section > * { opacity: 1; transform: none; }
}