/* =============================================================================
   "Professor" Jiang — Offset magazine feature
   Aesthetic: Offset editorial — austere, analytical, B&W reportage.
   Type: Fraunces (display/editorial) · Cardo (long-read body) · Inter (UI, small-caps).
   FLW shows up as proportion + horizontals. Inception shows up as LEVEL structure.
   Chinatown shows up as B&W photo treatment + ink discipline. No stamps, no blinds.
   One accent: editorial red, used only where it performs work.
   ============================================================================ */

/* ---------- RESET + BASE ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- TOKENS ---------- */

:root {
  /* Palette — noir investigative. Pure ink, deeper red, cooler paper. */
  --paper:        #f1eee7;          /* cooler ivory, newsprint */
  --paper-soft:   #e7e3da;          /* sunk paper */
  --paper-card:   #faf7f0;          /* lighter for lifts */
  --ink:          #000000;          /* pure black — no compromise */
  --ink-soft:     #2a2a2a;          /* body variant */
  --ink-faint:    #7e7a74;          /* quiet meta */
  --rule:         #c0bcb3;          /* hairline dividers */
  --accent:       #a8180c;          /* dried-blood — Kane/Chinatown red */
  --accent-dim:   #7a0f06;

  /* Limbo — Xanadu chamber. */
  --limbo-bg:     #080808;
  --limbo-ink:    #e8e4dc;
  --limbo-rule:   #2a2a2a;

  /* Type */
  --serif-body:    'Cardo', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --serif-display: 'Fraunces', 'Cardo', Georgia, serif;
  --sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Measures */
  --col-wide:   124rem;
  --col-read:   64rem;
  --col-narrow: 52rem;
  --gutter:     3.2rem;

  /* Rhythm */
  --lh-body: 1.58;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med: 320ms;
  --dur-long: 640ms;
}

/* ---------- PAGE ---------- */

body {
  font-family: var(--serif-body);
  color: var(--ink);
  background-color: var(--paper);
  line-height: var(--lh-body);
  font-size: 1.8rem;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Almost imperceptible grain — just enough to feel like paper, not decoration */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
body > * { position: relative; z-index: 1; }

::selection { background: var(--ink); color: var(--paper); }

/* ---------- SCROLL-REVEAL ANIMATIONS ----------
   Elements tagged .reveal start invisible + slightly translated; the JS
   IntersectionObserver adds .is-visible as they enter the viewport,
   triggering the CSS transition. Respects prefers-reduced-motion. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger figures + pull quotes one beat slower to feel cinematic */
.reveal.reveal--slow {
  transition-duration: 1000ms;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- PROGRESS BAR ---------- */

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1000;
  pointer-events: none;
}
.progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 60ms linear;
}

/* ---------- MASTHEAD ---------- */

.mast {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  backdrop-filter: saturate(1.02);
  transition: background-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.mast-grid {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: 1.4rem var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.4rem;
}
.mast-lockup {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  line-height: 1;
}
.mast-lockup-word {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Swap-in for the real logo when dropped at img/offset-logo.svg or .png */
.mast-lockup-img {
  height: 2.4rem;
  width: auto;
  display: block;
}
.mast-nav {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 500;
}
.mast-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.mast-nav a:hover { color: var(--accent); }

.depth-indicator {
  font-family: var(--sans);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  justify-self: end;
}
.depth-label { color: var(--ink-faint); }
.depth-number { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; }
.depth-name { color: var(--ink-soft); letter-spacing: 0.04em; text-transform: none; font-family: var(--sans); font-weight: 500; }

/* ---------- HERO ---------- */

.hero {
  position: relative;
  padding-top: 6.4rem;
}
/* Hero top — Wright prairie double-rule: two 1px ink lines, 4px apart.
   Single signature architectural detail; replaces the earlier single fold-line. */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: transparent;
}
/* Remove the old frieze ornament blocks */
.hero-ornament,
.kick,
.kick-deep,
.signup-ornament {
  display: none;
}

.hero-grid {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
}
.hero-eyebrow span:first-child { color: var(--accent); font-weight: 600; }
.eyebrow-sep { color: var(--rule); }

.hero-title {
  font-family: var(--serif-display);
  /* Didone push: opsz max, SOFT down, WONK up → high thick/thin contrast, Welles-era nameplate */
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 100;
  font-weight: 400;
  font-size: clamp(4.4rem, 7.8vw, 10.4rem);
  line-height: 0.96;
  letter-spacing: -0.022em;
  margin: 1.2rem 0 0;
  text-wrap: balance;
  color: var(--ink);
  max-width: 20ch;
}
.hero-title-quote,
.hero-title-break { display: block; }
.hero-title-quote::first-letter { color: var(--ink); }  /* no red, let the type carry it */

.hero-dek {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(2rem, 2.6vw, 2.8rem);
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 2rem 0 0;
  max-width: 46ch;
  font-weight: 400;
}

.hero-byline {
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 3.2rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ink);
  max-width: 60rem;
}
.byline-author { color: var(--ink); font-weight: 600; }
.byline-dot { color: var(--rule); }

.hero-figure {
  max-width: var(--col-wide);
  margin: 5.6rem auto 0;
  padding: 0 var(--gutter);
  position: relative;
}
.hero-figure-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.hero-figure img {
  width: 100%;
  height: 110%;            /* slight overscan so parallax translate doesn't expose edges */
  object-fit: cover;
  background: var(--paper-soft);
  /* Deeper B&W — Kane chiaroscuro */
  filter: grayscale(1) contrast(1.14) brightness(0.95);
  transform: translate3d(0, 0, 0);   /* primed for JS to drive translateY */
  will-change: transform;
}
/* Vignette — darken the edges of the hero photo, Welles close-up */
.hero-figure-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px 18px rgba(0, 0, 0, 0.42);
  z-index: 2;
}
/* Halftone dot overlay — newsprint reproduction signature */
.hero-figure-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='1' cy='1' r='0.55' fill='black'/></svg>");
  background-size: 4px 4px;
  opacity: 0.08;
  mix-blend-mode: multiply;
}
.hero-figure-plate { position: relative; z-index: 3; }
.hero-figure-plate {
  margin-top: 1.2rem;
  font-family: var(--sans);
  font-size: 1.15rem;
  color: var(--ink-faint);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  max-width: 60rem;
}
.plate-label {
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.plate-caption {
  color: var(--ink-soft);
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1.4rem;
}

/* ---------- ARTICLE ACTIONS (PDF download, above the contents) ---------- */

.article-actions {
  max-width: calc(var(--col-read) + var(--gutter) * 2);
  margin: 5.6rem auto 0;
  padding: 2.4rem var(--gutter);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.btn-pdf {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 1rem 1.6rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn-pdf:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn-pdf-icon {
  font-size: 1.4em;
  line-height: 0.8;
  transform: translateY(-1px);
}
.article-actions-meta {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink-faint);
}

/* ---------- TOC ---------- */

.toc { display: none; }
@media (min-width: 1280px) {
  .toc {
    display: block;
    position: fixed;
    top: 14rem;
    left: 2.4rem;
    width: 15rem;
    z-index: 50;
    font-family: var(--sans);
    font-size: 1.15rem;
    color: var(--ink-faint);
  }
  .toc-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
  .toc-label  { color: var(--ink-faint); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.14em; }
  .toc-rule { flex: 1; height: 1px; background: var(--rule); }
  .toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
  .toc li { display: flex; gap: 0.8rem; align-items: baseline; position: relative; }
  .toc li::before {
    content: attr(data-level);
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
    font-size: 0.98rem;
    font-weight: 600;
    min-width: 2.4rem;
  }
  .toc li[data-level="limbo"]::before { content: "∞"; color: var(--accent); font-size: 1.4rem; }
  .toc a {
    text-decoration: none;
    color: var(--ink-soft);
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .toc a:hover { color: var(--accent); }
  .toc li.is-current a { color: var(--accent); transform: translateX(3px); }
  .toc li.is-current::before { color: var(--accent); }
}

/* ---------- CHAPTER ---------- */

.chapter {
  padding: 9.6rem var(--gutter);
  max-width: calc(var(--col-read) + var(--gutter) * 2);
  margin: 0 auto;
}
.chapter-marker {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 4.8rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--ink);
}
.chapter-level {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding: 0;
  border: none;
  background: transparent;
}
.chapter-divider { display: none; }
.chapter-name {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-transform: none;
}

.chapter-body {
  max-width: var(--col-read);
  margin: 0 auto;
}

.chapter-heading {
  font-family: var(--serif-display);
  font-variation-settings: "opsz" 80, "SOFT" 0, "WONK" 60;
  font-weight: 400;
  font-size: clamp(2.8rem, 3.6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.014em;
  margin: 0 0 1.6rem;
  text-wrap: balance;
  color: var(--ink);
}

.standfirst {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 3.2rem;
  padding: 0;
  border: none;
  max-width: 52ch;
}

.subhead {
  font-family: var(--serif-display);
  font-variation-settings: "opsz" 48, "SOFT" 10, "WONK" 0;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.2;
  letter-spacing: -0.006em;
  margin: 5.2rem 0 1.4rem;
  color: var(--ink);
  padding: 0;
}
.subhead::before { content: none; }
.subhead em {
  font-family: var(--serif-body);
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.8em;
  font-weight: 400;
}

.chapter-body p { margin: 0 0 1.4rem; }
.chapter-body p + p { text-indent: 1.6em; }
.chapter-body > p:first-of-type,
.chapter-body h2 + p,
.chapter-body h3 + p,
.chapter-body blockquote + p,
.chapter-body figure + p,
.chapter-body aside + p,
.chapter-body .standfirst + p,
.chapter-body .lede,
.chapter-body .lede + p { text-indent: 0; }

.lede {
  font-size: 2rem;
  line-height: 1.5;
}

.dropcap {
  float: left;
  font-family: var(--serif-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: 5.6rem;
  line-height: 0.88;
  padding: 0.55rem 0.9rem 0 0;
  color: var(--ink);
  font-weight: 500;
}

.chapter-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-faint);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.chapter-body a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ---------- STANZA + EDITOR NOTE + PULL QUOTE ---------- */

.stanza {
  text-align: center;
  margin: 4.8rem auto;
  max-width: 38ch;
  padding: 0 var(--gutter);
}
.stanza::before, .stanza::after { content: none; }
.stanza p {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--ink-faint);
  margin: 0;
}

.pullquote {
  margin: 5.6rem 0;
  padding: 0.4rem 0 0.4rem 2.8rem;
  border: none;
  border-left: 4px solid var(--ink);
  background: transparent;
  text-align: left;
  position: relative;
}
.pullquote-ornament { display: none; }
.pullquote p {
  font-family: var(--serif-display);
  /* Didone italic at high contrast — newsroom callout */
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 80;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.8rem, 3.2vw, 3.8rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  max-width: 22ch;
}
.pullquote footer {
  margin-top: 1.6rem;
  font-family: var(--sans);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  font-weight: 500;
}

.editor-note {
  margin: 4.8rem 0 0;
  padding: 2rem 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--rule);
  position: relative;
}
.editor-note::before {
  content: "Editor's note";
  display: block;
  position: static;
  background: transparent;
  padding: 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.editor-note p {
  font-family: var(--serif-body);
  font-size: 1.5rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

/* ---------- FIGURES ---------- */

.inline-figure { margin: 4.8rem 0; position: relative; }
.inline-figure img {
  width: 100%;
  background: var(--paper-soft);
  filter: grayscale(1) contrast(1.12) brightness(0.96);
}
/* Halftone overlay — newsprint reproduction */
.inline-figure::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  /* height matches the image; figcaption excluded */
  bottom: auto;
  height: calc(100% - 4.4rem);
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='1' cy='1' r='0.55' fill='black'/></svg>");
  background-size: 4px 4px;
  opacity: 0.07;
  mix-blend-mode: multiply;
}
.inline-figure figcaption { position: relative; z-index: 2; }
.inline-figure figcaption {
  margin-top: 1.2rem;
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink-faint);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}
.fig-num {
  font-family: var(--sans);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.05rem;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .figure-wide { margin-left: -6rem; margin-right: -6rem; }
  .figure-right {
    float: right;
    width: 30rem;
    margin: 0.6rem -4rem 1.2rem 2.8rem;
    shape-outside: inset(0);
  }
  .figure-right figcaption { font-size: 1.2rem; }
}

/* ---------- LIMBO OPENER — full-bleed background image, Shorthand-style ---------- */

.limbo-opener {
  position: relative;
  width: 100%;
  min-height: 70vh;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background: var(--limbo-bg);
}
.limbo-opener-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(1) contrast(1.2) brightness(0.65);
  transform: scale(1.08);
  z-index: 0;
}
.limbo-opener-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 35%, rgba(168, 24, 12, 0.18) 0, transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}
.limbo-opener-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--gutter);
  max-width: 80rem;
}
.limbo-opener-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin-bottom: 1.6rem;
}
.limbo-opener-title {
  font-family: var(--serif-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 100;
  font-weight: 400;
  font-size: clamp(4.8rem, 8vw, 9.6rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}

.chapter-marker--hidden {
  display: none;
}

@media (max-width: 767px) {
  .limbo-opener { min-height: 60vh; }
  .limbo-opener-title { font-size: clamp(4rem, 12vw, 6.4rem); }
}

/* ---------- LIMBO — the one visual inversion ---------- */

.chapter-limbo {
  background: var(--limbo-bg);
  color: var(--limbo-ink);
  padding: 12rem var(--gutter);
  max-width: none;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  position: relative;
  overflow: hidden;
}
/* Single warm ember glow — Xanadu chamber, Chinatown single-lamp */
.chapter-limbo::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 55%;
  height: 80%;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 40%, rgba(168, 24, 12, 0.08) 0, rgba(168, 24, 12, 0.03) 35%, transparent 65%);
  z-index: 0;
}
.chapter-limbo > * { position: relative; z-index: 1; }
.chapter-limbo .chapter-body { margin: 0 auto; }
.chapter-limbo .chapter-marker {
  border-bottom-color: var(--limbo-rule);
}
.chapter-limbo .chapter-level { color: var(--accent); }
.chapter-limbo .chapter-name { color: var(--limbo-ink); opacity: 0.6; }
.chapter-limbo .chapter-heading { color: var(--paper); }
.chapter-limbo .standfirst { color: var(--limbo-ink); opacity: 0.8; }
.chapter-limbo p { color: var(--limbo-ink); }
.chapter-limbo a { color: var(--paper); text-decoration-color: rgba(244,242,236,0.35); }
.chapter-limbo a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.chapter-limbo .editor-note {
  border-top-color: var(--limbo-rule);
}
.chapter-limbo .editor-note::before { color: var(--accent); }
.chapter-limbo .editor-note p { color: var(--limbo-ink); opacity: 0.75; }

.pullquote-limbo {
  border-top-color: var(--limbo-rule);
}
.pullquote-limbo p { color: var(--paper); }

/* ---------- SIGNUP ---------- */

.signup {
  max-width: var(--col-wide);
  margin: 6.4rem auto;
  padding: 0 var(--gutter);
}
.signup-inner {
  max-width: 64rem;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 3.2rem 0;
  box-shadow: none;
}
.signup-heading { margin-bottom: 2rem; }
.signup-label {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.signup-heading h3 {
  font-family: var(--serif-display);
  font-variation-settings: "opsz" 72, "SOFT" 20, "WONK" 0;
  font-weight: 400;
  font-size: clamp(2.4rem, 2.8vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0.6rem 0 0.8rem;
  color: var(--ink);
  text-wrap: balance;
}
.signup-heading p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.6rem;
  line-height: 1.5;
  max-width: 68ch;
}

.signup-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.8rem;
  align-items: stretch;
  margin-top: 1rem;
}
.signup-form label { display: contents; }
.signup-form input[type="email"] {
  font-family: var(--serif-body);
  font-size: 1.6rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.signup-form input[type="email"]::placeholder { color: var(--ink-faint); font-style: italic; }
.signup-form input[type="email"]:focus { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.signup-form button {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 600;
  padding: 1.2rem 2rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.signup-form button:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-arrow { transition: transform var(--dur-fast) var(--ease); }
.signup-form button:hover .btn-arrow { transform: translateX(3px); }

.signup-status {
  grid-column: 1 / -1;
  margin: 0.8rem 0 0;
  font-family: var(--sans);
  font-size: 1.15rem;
  color: var(--ink-soft);
  min-height: 1.6rem;
}
.signup-status.is-ok { color: #2d6a3e; }
.signup-status.is-err { color: var(--accent); }

.signup-fineprint {
  font-family: var(--sans);
  font-size: 1.1rem;
  color: var(--ink-faint);
  margin: 1.6rem 0 0;
}
.signup-fineprint strong { color: var(--ink); font-weight: 600; }

/* SUREPTITIOUS — invite-only, inverted palette */
.signup-surreptitious {
  background: var(--ink);
  color: var(--paper);
  padding: 4rem var(--gutter);
  max-width: none;
  margin: 6.4rem calc(var(--gutter) * -1) 0;
}
.signup-surreptitious .signup-inner {
  border-top: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
  padding: 3.2rem 0;
  max-width: 64rem;
  margin: 0 auto;
}
.signup-surreptitious .signup-label { color: var(--accent); }
.signup-surreptitious .signup-heading h3 {
  color: var(--paper);
  font-family: var(--serif-display);
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 100;
  letter-spacing: -0.02em;
}
.signup-surreptitious .signup-heading p { color: #c9c5bb; }
.signup-surreptitious .signup-form input[type="email"] {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.signup-surreptitious .signup-form input[type="email"]::placeholder { color: #8e8a82; }
.signup-surreptitious .signup-form input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.signup-surreptitious .signup-form button {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.signup-surreptitious .signup-form button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.signup-surreptitious .signup-status { color: #c9c5bb; }
.signup-surreptitious .signup-status.is-ok { color: #7ec99a; }
.signup-surreptitious .signup-status.is-err { color: var(--accent); }
.signup-surreptitious .signup-fineprint { color: #8e8a82; }
.signup-surreptitious .signup-fineprint strong { color: var(--paper); }

/* ---------- FURTHER READING ---------- */

.further {
  max-width: var(--col-read);
  margin: 6.4rem auto;
  padding: 4.8rem var(--gutter) 0;
  border-top: 1px solid var(--ink);
}
.further-heading {
  font-family: var(--sans);
  font-size: 1.2rem;
  margin: 0 0 2.4rem;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.further-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2rem; }
.further-list li {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 0.5rem;
}
.further-list li:last-child { border-bottom: none; }
.further-title {
  font-family: var(--serif-display);
  font-variation-settings: "opsz" 36, "SOFT" 20, "WONK" 0;
  font-weight: 400;
  font-size: 1.9rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-faint);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}
.further-list a { text-decoration: none; }
.further-list a:hover .further-title { color: var(--accent); text-decoration-color: var(--accent); }
.further-meta {
  font-family: var(--sans);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  font-weight: 500;
}
.further-blurb {
  font-family: var(--serif-body);
  font-size: 1.5rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- COLOPHON ---------- */

.colophon {
  background: var(--ink);
  background-image: none;
  color: var(--paper);
  padding: 5.6rem var(--gutter);
  margin-top: 8rem;
  border-top: 1px solid var(--ink);
  position: relative;
}
.colophon::before { content: none; }
.colophon-inner {
  max-width: var(--col-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4rem;
}
.totem { display: none; }  /* cut — too theme-specific */

.colophon-text { display: flex; flex-direction: column; gap: 0.4rem; }
.colophon-line {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  color: var(--paper);
}
.colophon-word { color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; }
.colophon-sep { color: #555; }
.colophon-small {
  font-family: var(--sans);
  font-size: 1.1rem;
  color: #8a8680;
  margin: 0;
}
.colophon-links { display: flex; gap: 2rem; justify-self: end; font-family: var(--sans); font-size: 1.2rem; font-weight: 500; }
.colophon-links a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--accent); transition: color var(--dur-fast) var(--ease); }
.colophon-links a:hover { color: var(--accent); }

/* ---------- MOBILE ---------- */

@media (max-width: 767px) {
  :root { --gutter: 2rem; }

  .mast-grid { grid-template-columns: auto auto; gap: 1.2rem; }
  .mast-nav { display: none; }
  .depth-indicator .depth-name { display: none; }

  .hero { padding-top: 3.2rem; }
  .hero-figure { margin-top: 3.6rem; }

  .article-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.8rem var(--gutter);
  }
  .btn-pdf { justify-content: center; }

  .chapter { padding: 6.4rem var(--gutter); }

  .signup-form { grid-template-columns: 1fr; }

  .figure-right { float: none; width: 100%; margin: 2.4rem 0; }
  .figure-wide { margin-left: 0; margin-right: 0; }

  .colophon-inner { grid-template-columns: 1fr; gap: 2.4rem; }
  .colophon-links { justify-self: flex-start; }
}

/* ---------- PRINT ---------- */

@media print {
  :root { --paper: white; --ink: black; --accent: black; --rule: #999; }
  @page { margin: 16mm 14mm 18mm 14mm; }

  body { background: white; color: black; font-size: 10.5pt; }
  body::after { display: none; }

  /* Hide all screen-only chrome */
  .mast, .toc, .signup, .progress, .colophon, .article-actions, .btn-pdf, .mast-pdf {
    display: none !important;
  }

  /* Hero: keep it, tighten it, make sure it doesn't split */
  .hero { padding-top: 0; page-break-after: avoid; }
  .hero::before { display: none; }
  .hero-figure { margin-top: 2rem; padding: 0; page-break-inside: avoid; }
  .hero-figure::before, .hero-figure::after { display: none; }
  .hero-title { font-size: 34pt; max-width: none; color: black; }
  .hero-dek { color: #333; font-size: 13pt; }
  .hero-byline { color: #333; font-size: 9pt; }

  /* Chapters */
  .chapter { padding: 2rem 0; max-width: none; }
  .chapter-marker { page-break-inside: avoid; page-break-after: avoid; }
  .chapter-heading { font-size: 20pt; color: black; page-break-after: avoid; }
  .standfirst, .subhead { color: #333; }
  .subhead { page-break-after: avoid; }

  /* LIMBO: strip inversion for print */
  .chapter-limbo {
    background: white; color: black;
    padding: 2rem 0; margin: 0;
  }
  .chapter-limbo::before { display: none; }
  .chapter-limbo .chapter-heading,
  .chapter-limbo .chapter-name,
  .chapter-limbo p,
  .chapter-limbo a,
  .chapter-limbo .standfirst { color: black; }
  .chapter-limbo .editor-note p { color: #333; }

  /* Pull quotes — keep the left-rule callout in print */
  .pullquote {
    page-break-inside: avoid;
    border-left: 3px solid black; border-top: none;
    padding: 0.4rem 0 0.4rem 1.4rem;
    margin: 2rem 0;
  }
  .pullquote p { color: black; }
  .pullquote-limbo { border-left: 3px solid black; }

  /* Figures — strip halftone overlays + contrast shifts */
  .inline-figure { page-break-inside: avoid; margin: 2rem 0; }
  .inline-figure::before { display: none; }
  .inline-figure img, .hero-figure img {
    filter: grayscale(1) contrast(1.02);
    box-shadow: none;
    break-inside: avoid;
  }
  .figure-wide, .figure-right { float: none; width: 100%; margin: 2rem 0; }

  /* Links materialize their URLs (investigative PDF convention) */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt; color: #555; word-break: break-all;
  }
  /* But not for links inside figcaptions or bylines (too noisy) */
  .hero-byline a[href^="http"]::after,
  figcaption a[href^="http"]::after { content: ""; }

  /* Further reading */
  .further { padding: 0; border-top: 1px solid black; margin-top: 2rem; }
  .further-list li { page-break-inside: avoid; }

  /* Heading orphan protection */
  h2, h3 { page-break-after: avoid; }
  p { orphans: 3; widows: 3; }
}