:root {
  --bg: #0b0b0d;
  --panel: #131316;
  --ink: #ededE8;
  --dim: #a4a49e;
  --faint: #4a4a46;
  --red: #d8232a;
  --red-text: #ff5a60;
  --display: "Oswald", "Arial Narrow", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --col: 660px;
  --margin: 270px;
  --gap: 56px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.1875rem/1.65 var(--serif); }
img, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--red-text); }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; z-index: 10; font-family: var(--sans); }
.skip:focus { left: 8px; }

.site-head { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); font: 500 .9375rem var(--sans); }
.site-head nav { display: flex; gap: clamp(16px, 3vw, 32px); }
.site-head nav a { text-decoration: none; padding: 8px 0; }
.brand img { width: 72px; height: 72px; }
.draft { position: relative; z-index: 4; margin: 0; padding: 6px var(--gutter); background: var(--red); color: #fff; font: 600 .875rem var(--sans); text-align: center; }

/* The drawing sheet: blueprint grid with the circuit drawn across it. */
.hero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: min(86vh, 860px); padding: 130px var(--gutter) clamp(36px, 6vw, 72px);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(74,74,70,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(74,74,70,.42) 1px, transparent 1px),
    linear-gradient(rgba(74,74,70,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(74,74,70,.16) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 62% 42%, transparent 25%, var(--bg) 92%); }
.track { position: absolute; z-index: 1; right: 3vw; top: 58px; width: min(50vw, 760px); height: auto; overflow: visible; }
.track path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.track-glow { stroke: #7a1218; stroke-width: 14; opacity: .28; }
.track-line { stroke: var(--ink); stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s cubic-bezier(.45,.05,.25,1) .15s forwards; }
.track-mark { opacity: 0; animation: mark .5s ease-out 2.6s forwards; }
.track-mark circle { fill: var(--red); }
.track-mark .ring { fill: none; stroke: var(--red); stroke-width: 2; }
.track-mark text { fill: var(--ink); font: 500 23px var(--sans); paint-order: stroke; stroke: var(--bg); stroke-width: 7px; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes mark { to { opacity: 1; } }

.hero-text { position: relative; z-index: 2; max-width: 780px; }
.kicker { margin: 0 0 10px; font: 500 1rem var(--sans); color: var(--red-text); }
h1 { margin: 0; font: 600 clamp(2.9rem, 6.2vw, 5.6rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; text-shadow: 0 0 28px var(--bg), 0 0 8px var(--bg); }
.deck { margin: 20px 0 0; max-width: 34em; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; color: var(--ink); text-shadow: 0 0 16px var(--bg), 0 0 4px var(--bg); }

/* Title block, as on the corner of an engineering drawing. */
.titleblock { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; border-block: 1px solid var(--faint); font-family: var(--sans); }
.titleblock div { padding: 14px var(--gutter) 16px; border-left: 1px solid var(--faint); }
.titleblock div:first-child { border-left: 0; }
.titleblock dt { font-size: .8125rem; color: var(--dim); }
.titleblock dd { margin: 3px 0 0; font-size: .9875rem; font-weight: 500; line-height: 1.35; }

/* Essay: one reading column, sources annotated in the margin. */
.essay { width: min(100% - 2 * var(--gutter), var(--col) + var(--gap) + var(--margin)); margin: clamp(40px, 6vw, 72px) auto 0; padding-right: calc(var(--margin) + var(--gap)); }
.essay-title { margin: 0 0 28px; font: 500 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--display); }
.essay > p, .essay > ul { margin: 0 0 1.25em; }
.essay > h2:not(.essay-title) { margin: 2.2em 0 .6em; font: 500 clamp(1.6rem, 3vw, 2.25rem)/1.15 var(--display); }
.essay li { margin-bottom: .4em; }
.video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 2.2em; border: 0; background: #000; text-decoration: none; }
.video img { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; left: 0; bottom: 0; padding: 10px 18px; background: var(--red); color: #fff; font: 600 1rem var(--sans); }
a.video:hover .play { background: #f03a41; }

.ref { color: var(--red-text); font: 600 .75em var(--sans); padding-left: 1px; }
.note { float: right; clear: right; width: var(--margin); margin-right: calc(-1 * (var(--margin) + var(--gap))); margin-bottom: 16px; padding-top: 7px; border-top: 1px solid var(--red); font: 400 .875rem/1.5 var(--sans); color: var(--dim); }
.note sup { color: var(--red-text); font-weight: 600; }
.note a { color: var(--ink); }

figure { margin: 2em 0; }
figure img { width: 100%; }
figcaption { margin-top: 8px; font: 400 .875rem/1.45 var(--sans); color: var(--dim); }

.verdict { display: grid; grid-template-columns: 7.5em 1fr; gap: 0 16px; padding: 16px 0; border-top: 1px solid var(--faint); }
.verdict + .verdict { margin-top: -1px; }
.verdict.record { border-bottom: 1px solid var(--faint); margin-bottom: 1.6em; }
.verdict strong { font: 600 .9375rem/1.9 var(--sans); }
.verdict p { margin: 0; font-size: 1.3rem; line-height: 1.38; }
.verdict.myth strong { color: var(--dim); }
.verdict.myth p { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.verdict.record strong { color: var(--red-text); }

.season { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin: 2em 0; font: 600 .8125rem/1.2 var(--sans); }
.season span { padding: 10px 6px; background: var(--red); color: #fff; }
.season b { display: block; margin-top: 3px; font-weight: 400; font-size: .75rem; }
.season .lost { background: transparent; box-shadow: inset 0 0 0 1px var(--faint); color: var(--ink); }

.table { overflow-x: auto; margin: 1.6em 0; }
table { width: 100%; border-collapse: collapse; font: 400 .9375rem var(--sans); font-variant-numeric: tabular-nums; }
th, td { padding: 10px 12px 10px 0; text-align: left; border-bottom: 1px solid var(--faint); }
th { color: var(--dim); font-weight: 500; }

.after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: clamp(56px, 8vw, 96px); padding: clamp(32px, 5vw, 56px) var(--gutter); border-top: 1px solid var(--faint); }
.after h2 { margin: 0 0 8px; font: 500 1.75rem var(--display); }
.after p { margin: 0; }
.next { display: block; text-decoration: none; }
.next span { font: 500 .9375rem var(--sans); color: var(--red-text); }
.next strong { display: block; margin-top: 6px; font: 500 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--display); }

.stories { padding: 0 var(--gutter); }
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 44px) 0; border-top: 1px solid var(--faint); text-decoration: none; }
.story:first-child { border-top: 0; }
.story h2 { margin: 0 0 12px; font: 500 clamp(1.9rem, 3.8vw, 3.2rem)/1.06 var(--display); }
.story p { margin: 0; max-width: 34em; }
.story .kicker { margin-bottom: 8px; }
.story .meta { margin-top: 14px; font: 400 .9375rem var(--sans); color: var(--dim); }
.story:hover h2 { color: var(--red-text); }

.site-foot { margin-top: clamp(40px, 6vw, 72px); padding: 32px var(--gutter) 40px; border-top: 1px solid var(--faint); font-family: var(--sans); font-size: 1rem; }
.site-foot p { margin: 0 0 10px; max-width: 62em; }
.site-foot .small { font-size: .8125rem; line-height: 1.5; color: var(--dim); }

@media (max-width: 1080px) {
  .essay { width: min(100% - 2 * var(--gutter), var(--col)); padding-right: 0; }
  .note { float: none; display: block; width: auto; margin: 10px 0 4px; padding: 0 0 0 12px; border-top: 0; border-left: 2px solid var(--red); }
}
@media (max-width: 760px) {
  body { font-size: 1.125rem; }
  .brand img { width: 60px; height: 60px; }
  .hero { min-height: 0; padding-top: min(78vw, 400px); }
  .track { width: 92vw; right: 4vw; top: 74px; }
  .track-mark text { display: none; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock div { padding: 12px 16px; border-left: 0; border-top: 1px solid var(--faint); }
  .titleblock div:nth-child(-n+2) { border-top: 0; }
  .titleblock div:nth-child(even) { border-left: 1px solid var(--faint); }
  .season { grid-template-columns: repeat(4, 1fr); }
  .verdict { grid-template-columns: 1fr; }
  .after, .story { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track-line { animation: none; stroke-dashoffset: 0; }
  .track-mark { animation: none; opacity: 1; }
}