/* EDHD — synthwave chrome over an editorial spine.
   The splash page is pure 80s; this has to carry 231 paper summaries, so the
   neon lives in the furniture (hero, rules, nav, cards) and the reading text
   stays high-contrast and calm. */
:root {
  --bg: #0b0616;
  --bg-2: #120a24;
  --panel: #17102b;
  --ink: #f2ecff;
  --muted: #b9aed4;
  --faint: #8579a8;
  --line: #2b1f4d;
  --cyan: #00fff7;
  --magenta: #ff2d95;
  --amber: #ffb545;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --band: #00AAAA;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 90% 45% at 50% -8%, rgba(255,45,149,.22), transparent 70%),
    radial-gradient(ellipse 70% 40% at 90% 0%, rgba(0,255,247,.10), transparent 70%);
  background-repeat: no-repeat;
}
a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 22px; }

/* ── console strip ──────────────────────────────────────────
   The same title band the splash screen wears, carried across every page so
   the site reads as one machine — and, more practically, so there is a way
   back to the menu, which there previously was not. */
.console-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 22px; padding-top: calc(7px + env(safe-area-inset-top));
  background: var(--band); color: #000;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  box-shadow: inset 0 3px 0 #55FFFF, inset 0 -3px 0 #005555;
  position: relative; z-index: 30;
}
.console-bar .bars { display: flex; height: 12px; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.console-bar .bars span { width: 6px; }
.console-bar .ch { flex: 1; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.console-bar a { color: #000; text-decoration: none; font-weight: 700;
  white-space: nowrap; padding: 4px 6px; margin: -4px -6px; }
.console-bar a:hover, .console-bar a:focus { background: #000; color: var(--band); }
@media (max-width: 560px) {
  .console-bar { padding-left: 14px; padding-right: 14px; gap: 9px; letter-spacing: .1em; }
  .console-bar .ch { font-size: 10px; }
}

/* ── header ─────────────────────────────────────────────── */
header.site {
  border-bottom: 1px solid var(--line);
  background: rgba(11,6,22,.82); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
header.site .wrap { display: flex; align-items: baseline; gap: 22px; padding: 14px 22px; }
.brand {
  font-family: Impact, "Haettenschweiler", "Arial Black", sans-serif;
  font-size: 25px; letter-spacing: .06em; text-decoration: none;
  background: linear-gradient(180deg, #fff 10%, #9df6ff 45%, var(--magenta) 55%, #ffd6ef 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(0,255,247,.45));
  white-space: nowrap;
}
.brand span { -webkit-text-fill-color: transparent; }
header.site nav { margin-left: auto; display: flex; gap: 20px; font-size: 13px;
  text-transform: uppercase; letter-spacing: .12em; }
header.site nav a { color: var(--muted); text-decoration: none; padding-bottom: 2px; }
header.site nav a:hover { color: var(--cyan); text-shadow: 0 0 10px rgba(0,255,247,.7); }
header.site nav a[aria-current] { color: var(--cyan);
  border-bottom: 2px solid var(--magenta); text-shadow: 0 0 10px rgba(0,255,247,.7); }

/* ── hero, with a horizon ───────────────────────────────── */
.hero { padding: 54px 0 34px; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line); }
.hero::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 90px;
  background-image:
    linear-gradient(90deg, rgba(0,255,247,.20) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,45,149,.20) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(180px) rotateX(66deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
  mask-image: linear-gradient(180deg, transparent, #000);
  pointer-events: none;
}
.hero h1 { font-family: var(--serif); font-size: clamp(31px, 5vw, 44px); line-height: 1.12;
  margin: 0 0 12px; letter-spacing: -.5px; }
.hero p.tagline { margin: 0; color: var(--muted); font-size: 18px; max-width: 42em; }

.eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan); font-weight: 700; margin: 0 0 12px;
  text-shadow: 0 0 12px rgba(0,255,247,.55); }

/* ── paper of the day ───────────────────────────────────── */
.banner {
  margin: 32px 0 0; padding: 26px 28px; border-radius: 0;
  background: linear-gradient(150deg, rgba(255,45,149,.14), rgba(0,255,247,.06));
  border: 0; border-left: 5px solid var(--magenta);
  box-shadow: inset 2px 2px 0 rgba(0,255,247,.14),
              inset -2px -2px 0 rgba(0,0,0,.5), 0 0 0 1px var(--line);
}
.banner h2 { font-family: var(--serif); font-size: 24px; line-height: 1.3; margin: 0 0 10px; }
.banner h2 a { color: var(--ink); text-decoration: none; }
.banner h2 a:hover { color: var(--cyan); }
.banner p { margin: 0 0 12px; color: var(--muted); font-size: 16px; }
.banner .meta { font-size: 12.5px; color: var(--faint); }

section { padding: 44px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }
h2.section { font-family: var(--serif); font-size: 27px; margin: 0 0 6px; letter-spacing: -.3px; }
h2.section::after { content: ""; display: block; width: 74px; height: 2px; margin-top: 10px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta)); }
p.section-note { margin: 14px 0 26px; color: var(--muted); font-size: 15px; }

/* ── papers ─────────────────────────────────────────────── */
ol.papers { list-style: none; margin: 0; padding: 0; counter-reset: paper; }
ol.papers > li { counter-increment: paper; position: relative;
  padding: 22px 0 22px 52px; border-bottom: 1px solid var(--line); }
ol.papers > li:last-child { border-bottom: 0; }
ol.papers > li::before {
  content: counter(paper, decimal-leading-zero); position: absolute; left: 0; top: 24px;
  font-family: Impact, "Arial Black", sans-serif; font-size: 17px;
  color: var(--magenta); text-shadow: 0 0 12px rgba(255,45,149,.55);
  width: 34px; text-align: right; letter-spacing: .04em;
}
ul.papers { list-style: none; margin: 0; padding: 0; }
ul.papers > li { padding: 18px 0; border-bottom: 1px solid var(--line); }
ul.papers > li:last-child { border-bottom: 0; }
.paper h3 { font-family: var(--serif); font-size: 19.5px; line-height: 1.35; margin: 0 0 8px; font-weight: 600; }
.paper h3 a { color: var(--ink); text-decoration: none; }
.paper h3 a:hover { color: var(--cyan); text-decoration: underline; }
.paper .takeaway { margin: 0 0 11px; color: #cfc4e6; font-size: 15.5px; }
.paper .meta { font-size: 12.5px; color: var(--faint); display: flex; flex-wrap: wrap;
  gap: 6px 12px; align-items: center; }
.paper .meta a { color: var(--faint); }
.paper .meta a:hover { color: var(--cyan); }

.tag { display: inline-block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; padding: 3px 9px; border-radius: 3px;
  border: 1px solid var(--line); color: var(--muted); background: var(--bg-2); }
.tag.strong { border-color: var(--magenta); color: #ff8ec4;
  box-shadow: 0 0 12px rgba(255,45,149,.25); }

details.category { border-top: 1px solid var(--line); }
details.category > summary { cursor: pointer; list-style: none; padding: 17px 0;
  font-family: var(--serif); font-size: 19px; display: flex; align-items: center; gap: 10px; }
details.category > summary::-webkit-details-marker { display: none; }
details.category > summary::after { content: "+"; margin-left: auto; color: var(--cyan);
  font-family: var(--sans); font-size: 20px; }
details.category[open] > summary::after { content: "‘2"; }
details.category > summary .count { font-family: var(--sans); font-size: 12.5px; color: var(--faint);
  letter-spacing: .08em; text-transform: uppercase; }
details.category > div { padding-bottom: 12px; }

/* ── episodes ───────────────────────────────────────────── */
.episode { padding: 24px 26px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(160deg, var(--panel), rgba(23,16,43,.4));
  margin-bottom: 18px; }
.episode h3 { font-family: var(--serif); font-size: 21px; line-height: 1.3; margin: 0 0 8px; }
.episode h3 a { color: var(--ink); text-decoration: none; }
.episode h3 a:hover { color: var(--cyan); }
.episode .meta { font-size: 12.5px; color: var(--faint); margin: 0 0 12px;
  display: flex; gap: 14px; flex-wrap: wrap; letter-spacing: .06em; text-transform: uppercase; }
.episode p.summary { margin: 0 0 14px; color: #cfc4e6; font-size: 15.5px; }
audio { width: 100%; margin-top: 6px; height: 38px;
  filter: hue-rotate(190deg) saturate(.8); border-radius: 8px; }
.audio-missing { font-size: 13.5px; color: var(--faint); font-style: italic; }

/* ── prose ──────────────────────────────────────────────── */
.prose h2 { font-family: var(--serif); font-size: 25px; margin: 34px 0 10px; }
.prose h3 { font-family: var(--serif); font-size: 20px; margin: 28px 0 8px; color: #e6dcff; }
.prose p { margin: 0 0 15px; color: #ded4f2; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; color: #ded4f2; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose em { color: #f0c9e4; }
.prose hr { border: 0; height: 1px; margin: 30px 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent); }
.prose code { background: var(--bg-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.table-wrap { overflow-x: auto; margin: 0 0 20px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan); }

/* ── cards ──────────────────────────────────────────────── */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { border: 0; border-radius: 0; padding: 17px 19px; min-height: 76px;
  background: var(--panel); text-decoration: none; color: var(--ink); display: block;
  box-shadow: inset 2px 2px 0 rgba(0,255,247,.16),
              inset -2px -2px 0 rgba(0,0,0,.55), 0 0 0 1px var(--line);
  transition: box-shadow .12s steps(2), transform .12s steps(2); }
.card:hover, .card:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: inset 2px 2px 0 rgba(0,255,247,.45),
              inset -2px -2px 0 rgba(0,0,0,.55), 0 0 0 2px var(--cyan); }
.card .t { font-family: var(--serif); font-size: 17px; margin-bottom: 4px; }
.card .s { font-size: 12.5px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }

.backlink { display: inline-block; margin: 26px 0 0; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; }
footer.site { border-top: 1px solid var(--line); padding: 32px 0 54px;
  color: var(--faint); font-size: 13px; background: rgba(0,0,0,.25); }
footer.site p { margin: 0 0 6px; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  header.site .wrap { flex-wrap: wrap; gap: 10px 16px; }
  header.site nav { margin-left: 0; width: 100%; gap: 14px; font-size: 11.5px; }
  ol.papers > li { padding-left: 40px; }
  ol.papers > li::before { width: 26px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

/* ── the wordmark ───────────────────────────────────────────
   A homage to the stacked gold-chrome lettering of a certain 1985 film:
   small line above, huge italic line below, gold-to-red gradient with a
   dark outline and a slight perspective tilt. Built from system fonts and
   CSS gradients — it evokes the look without using the licensed typeface. */
.bttf { font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
  font-style: italic; text-transform: uppercase; line-height: .82;
  display: inline-block; text-align: left;
  transform: perspective(560px) rotateX(12deg); transform-origin: 50% 100%; }
/* "BACK TO THE" rides small and wide above the big last word, tucked in
   tight against it, exactly as the film's lettering does. */
.bttf .lede { display: block; font-size: .235em; letter-spacing: .30em;
  margin-bottom: .10em; padding-left: .12em; }
.bttf .word { display: block; font-size: 1em; letter-spacing: -.012em; }
.bttf .lede, .bttf .word { position: relative; }
/* The dark block the gold letters sit on: one stroked copy behind, then a
   stack of offsets stepping down-right to read as a solid extrusion. */
.bttf .lede::before, .bttf .word::before {
  content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1;
  -webkit-text-stroke: .13em #5d1204; color: #5d1204;
  text-shadow:
    .008em .010em 0 #571103, .016em .020em 0 #511002, .024em .030em 0 #4b0e02,
    .032em .040em 0 #450d02, .040em .050em 0 #3f0b01, .048em .060em 0 #390a01;
}
.bttf .fill {
  background: linear-gradient(180deg, #fffdf0 0%, #ffe98a 14%, #ffc93a 34%,
                                      #ff9c22 55%, #f2571c 80%, #b3220a 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero .bttf { font-size: clamp(54px, 13vw, 118px);
  filter: drop-shadow(0 4px 0 rgba(80,14,3,.6)) drop-shadow(0 0 26px rgba(255,140,26,.35)); }
.brand.bttf { font-size: 21px; transform: perspective(300px) rotateX(8deg);
  filter: drop-shadow(0 2px 0 rgba(80,14,3,.55)); }
.brand.bttf .lede { font-size: .34em; letter-spacing: .2em; margin-bottom: .05em; }
@media (max-width: 600px) { .brand.bttf { font-size: 17px; } .sitemark { font-size: 20px; } }

.series-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 0;
  font-size: 13px; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }
.series-stats b { color: var(--cyan); font-weight: 400; }
.subscribe { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px; }
.feedlink { display: inline-flex; align-items: center; gap: 9px; min-height: 40px;
  padding: 8px 16px; text-decoration: none; color: var(--amber);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 1px 1px 0 rgba(255,181,69,.28),
              inset -1px -1px 0 rgba(0,0,0,.5), 0 0 0 1px var(--line); }
.feedlink:hover { color: var(--bg); background: var(--amber); box-shadow: none; }
.feedlink .rss { letter-spacing: -.08em; font-size: 11px; }
.subnote { font-size: 12.5px; color: var(--faint); max-width: 44ch; }
/* Episodes carry their own E-numbers, so the list counter would double up. */
ol.papers.episodes > li { padding-left: 0; }
ol.papers.episodes > li::before { content: none; }

/* ── Channel 02 wordmark ─────────────────────────────────────
   A gable over stacked slab caps, in the cyan of the EDHD mark, with
   QUALITY stamped diagonally across the right end. The roof and the
   stacked-word arrangement are generic signage devices; the lettering
   is set in system slab faces rather than copied from anywhere. */
.himark {
  position: relative; display: inline-block; margin: 6px 0 22px;
  font-family: Rockwell, "Roboto Slab", "Bookman Old Style", Georgia, serif;
  font-weight: 900; text-transform: uppercase; line-height: 1.04;
  padding: .55em 0 .14em; font-size: clamp(40px, 10.5vw, 92px);
}
.himark .hi-lede, .himark .hi-word { display: block; position: relative; }
.himark .hi-lede { font-size: .3em; letter-spacing: .36em; padding-left: .34em;
  margin-bottom: .14em; line-height: 1; }
.himark .hi-word { font-size: 1em; letter-spacing: .012em; }

/* The gable: an outer triangle with an inner one punched out, so what is
   left is a roof-shaped band. Eaves overhang the wordmark either side. */
.himark .roof {
  position: absolute; left: 7%; right: 7%; top: 0; height: .56em;
  background: linear-gradient(180deg, #ffffff 0%, #9df6ff 45%, #00b3c4 100%);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 100% 82%, 50% 18%, 0% 82%);
  filter: drop-shadow(0 0 .1em rgba(0,255,247,.6));
}
/* No separate eaves: as detached bars at the feet they read as two stray
   dashes rather than part of the roof. The pitch carries it alone. */

.himark .grain {
  background: linear-gradient(176deg, #ffffff 0%, #d7fbff 22%, #9df6ff 48%,
                                      #35e2f0 74%, #00b3c4 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* The cut behind the letters. A dark edge alone disappears into a dark
   page, so it carries a cyan keyline outside it for separation. */
.himark .hi-lede::before, .himark .hi-word::before {
  content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1;
  -webkit-text-stroke: .11em #05323b; color: #05323b;
  /* Explicit fill: .grain sets -webkit-text-fill-color:transparent and the
     pseudo-element inherits it, which painted the outline as nothing. */
  -webkit-text-fill-color: #05323b;
  text-shadow: 0 0 .05em rgba(0,255,247,.45), 0 0 .14em rgba(0,255,247,.28),
               .014em .018em 0 #032329, .03em .038em 0 #021a1f;
}

/* Struck diagonally across the right end, sloping down to the right so the
   Q rides above the Y. That is a positive rotation: CSS turns clockwise, so
   a negative angle lifts the far end of the word instead of the near one. */
.himark .stamp {
  position: absolute; right: -1%; top: 64%;
  transform: translateY(-50%) rotate(22deg); transform-origin: 50% 50%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800; font-size: .3em; letter-spacing: .14em;
  color: #ff3b42; padding: .16em .38em .18em;
  border: .055em solid #ff3b42; box-shadow: inset 0 0 0 .022em #ff3b42;
  white-space: nowrap; pointer-events: none;
  /* Enough breakup to read as rubber, not so much that the word stops
     being readable — which would defeat the point of a stamp. */
  -webkit-mask-image:
    repeating-linear-gradient(64deg, #000 0 10px, rgba(0,0,0,.7) 10px 11px, #000 11px 24px);
  mask-image:
    repeating-linear-gradient(64deg, #000 0 10px, rgba(0,0,0,.7) 10px 11px, #000 11px 24px);
  text-shadow: 0 0 .4em rgba(255,59,66,.5);
  filter: drop-shadow(0 .02em .1em rgba(0,0,0,.6));
}
@media (max-width: 560px) {
  .himark .hi-lede { letter-spacing: .22em; }
  .himark .stamp { font-size: .4em; right: 0%; }
}

/* ── the papers page headline ───────────────────────────────
   Back to the Suture is the masthead of the research strand, so on the
   papers pages it takes the top of the page at full size. EDHD stays in
   the site header as the parent brand. */
.hero-lockup { margin: 2px 0 16px; }
.hero-lockup .bttf { font-size: clamp(52px, 15vw, 104px);
  filter: drop-shadow(0 5px 0 rgba(70,12,2,.55)) drop-shadow(0 0 34px rgba(255,140,26,.34)); }
.hero-lockup .bttf .lede { color: transparent; }
/* On an archive week the lockup is a standing masthead, not the headline —
   the date below is what tells you which page you are on. */
.hero-lockup.sub { margin: 0 0 10px; }
.hero-lockup.sub .bttf { font-size: clamp(30px, 6.5vw, 56px);
  filter: drop-shadow(0 3px 0 rgba(70,12,2,.5)) drop-shadow(0 0 20px rgba(255,140,26,.28)); }
h1.week-of { margin: 0 0 4px; }
/* At phone sizes the small upper line is the first thing to become
   unreadable, so it gets proportionally bigger rather than smaller. */
@media (max-width: 560px) {
  .hero-lockup .bttf .lede { font-size: .27em; letter-spacing: .2em; }
  .hero { padding: 30px 0 24px; }
  .banner { padding: 20px 18px; margin-top: 24px; }
  .banner h2 { font-size: 21px; }
  section { padding: 32px 0; }
}

/* ── site mark (EDHD) vs section mark (Back to the Suture) ──
   EDHD is the brand and wears the splash page's cyan/magenta chrome.
   Back to the Suture is the weekly research strand and wears the gold. */
.sitemark, .hero-mark {
  font-family: Impact, "Haettenschweiler", "Arial Black", sans-serif;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #fff 8%, #9df6ff 42%, var(--magenta) 54%, #ffd6ef 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(0,255,247,.45));
}
.sitemark { font-size: 25px; }
/* Used by the About page, where EDHD itself is the subject. */
.hero-mark { font-size: clamp(52px, 12vw, 112px); line-height: .9; margin: 0 0 14px; }

/* ── weekly infographic, beside the paper of the day ────── */
.banner.has-fig { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 780px) {
  .banner.has-fig { grid-template-columns: minmax(0,1fr) 320px; align-items: start; }
  .banner.has-fig .banner-fig { grid-column: 2; grid-row: 1 / span 99; }
}
.banner-fig { margin: 0; }
.banner-fig img { width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--line); box-shadow: 0 0 24px rgba(0,255,247,.10); }
.banner-fig figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.45;
  color: var(--faint); letter-spacing: .02em; }