:root {
  --paper: #fafafa;
  --paper-2: #f2f3f5;
  --ink: #16161a;
  --mute: #6b6b70;
  --rule: #dcdde0;
  --accent: #27404d;
  --on-accent: #fafafa;
  --star: #edb31a;
  --star-edge: #a8760b;
  --hero-bg: #cfdce3;
  --hero-ink: #16262e;
  --hero-mute: #4d6470;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121316;
    --paper-2: #1a1c1f;
    --ink: #f0f1f3;
    --mute: #a5a6ac;
    --rule: #2d2e32;
    --accent: #6fa0b8;
    --on-accent: #0d1a20;
    --star: #f5c542;
    --star-edge: #8a5f08;
    --hero-bg: #1e2d34;
    --hero-ink: #e7edf0;
    --hero-mute: #9db0b9;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Layout: .wrap is the 1020px structural container; .prose is the 62ch
   text column that sits inside it. Structure breathes wide, text stays narrow. */
.wrap {
  max-width: 1020px;
  margin: 0 auto;
  padding-inline: 1.5rem;
}

.prose {
  max-width: 62ch;
}

/* Section spacing: one symmetric rule, same value on every section and
   the hero. Two adjacent sections each contribute their own half, so
   the visible gap is double this number (2.5rem stacks into 5rem,
   3.5rem into 7rem) — deliberate, not the old bug where 5rem stacked
   into 10rem. No per-section overrides. */
main > section,
header {
  padding-block: 2.5rem;
}

@media (min-width: 768px) {
  main > section,
  header {
    padding-block: 3.5rem;
  }
}

/* Collapse trailing margins so each section's padding-bottom is the
   ONLY thing creating the gap to whatever follows. A shallow
   "section > *:last-child" isn't enough: in most sections the direct
   child is .prose (or .contact-layout, or figure), and the actual
   trailing text sits one or two levels deeper, so these selectors
   reach to where the content really ends. */
header .prose > *:last-child,
main > section > .prose:last-child > *:last-child,
main > section > figure:last-child,
main > section .contact-layout .prose > *:last-child {
  margin-bottom: 0;
}

article > *:last-child {
  margin-bottom: 0;
}

article:last-of-type {
  margin-bottom: 0;
}

/* First-child margins: currently a no-op (nothing here sets margin-top),
   kept as a defensive rule so a future addition can't silently reopen
   this bug on the top side. */
main > section > *:first-child,
header .prose > *:first-child {
  margin-top: 0;
}

/* Alternating section tone: full-bleed band on the section itself,
   the .wrap/.prose children inside stay centered and capped as usual.
   Same padding-bottom as every section — no extra padding added here. */
main > section:nth-child(even) {
  background: var(--paper-2);
}

/* Hero band: full-bleed pale blue, distinct from the paper/ink system
   used for the rest of the page. The inner .wrap stays capped and
   centered like every other section. */
header {
  background: var(--hero-bg);
  color: var(--hero-ink);
}

footer {
  padding-block: 2rem;
  color: var(--mute);
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  footer {
    padding-block: 3rem;
  }
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  margin: 0 0 1rem;
}

h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.8rem);
  line-height: 1.1;
  max-width: 16ch;
  margin-bottom: 1.25rem;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.25;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Numbered index line, replaces the old sans-serif eyebrow: a monospace
   "01  SECTION" marker instead of a plain label. */
.eyebrow {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--mute);
  margin-bottom: 0.75rem;
}

/* Small monospace annotations — distinct from .eyebrow (section index)
   so they read as marginalia on the page, not headers. Used for
   case-study tags, sourcing notes, and tier callouts. */
.tag-label {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  margin: 0 0 0.5rem;
}

/* Hero-only text elements: pale blue band, so they use the hero ink/mute
   pair rather than the page's ink/mute (calibrated for --paper). */
.hero-name {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--hero-mute);
  margin: 0 0 1.25rem;
}

.hero-subhead {
  color: var(--hero-mute);
  font-size: 1.1rem;
  max-width: 52ch;
  margin: 0 0 1rem;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.5rem;
  row-gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hero-mute);
}

.proof-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.proof-num {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--hero-ink);
}

.proof-stars {
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--star);
  -webkit-text-stroke: 0.5px var(--star-edge);
}

.proof-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hero-mute);
}

p {
  margin: 0 0 1rem;
}

.subhead {
  color: var(--mute);
  font-size: 1.1rem;
}

.lead {
  font-weight: 600;
}

article {
  margin-bottom: 2rem;
}

/* Recommended entry point: a rule, not a card or badge. */
.tier-entry {
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
}

.proof {
  color: var(--mute);
  font-size: 0.95rem;
}

ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.5rem;
}

a {
  color: var(--accent);
}

a:hover,
a:focus {
  text-decoration: none;
}

/* Stats row: full-width structural element, sits directly in .wrap
   rather than .prose so it can use the wider 1020px canvas. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin: 0 0 3rem;
}

@media (max-width: 700px) {
  .stats {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.stat-number {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.75rem;
  line-height: 1.1;
  color: var(--accent);
}

.stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--mute);
  margin-top: 0.35rem;
}

/* Method sequence: a bordered grid, auto-fit with a 150px minimum,
   hairline rules on the right and bottom of each cell. Forces to one
   column on mobile rather than relying on auto-fit alone. */
.sequence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0 0 2.5rem;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

@media (max-width: 700px) {
  .sequence {
    grid-template-columns: 1fr;
  }
}

.stage {
  padding: 1.25rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.stage-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--mute);
  margin: 0 0 0.5rem;
}

.stage-name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.stage-desc {
  font-size: 0.85rem;
  color: var(--mute);
  margin: 0;
}

form {
  margin-top: 1.5rem;
}

.field {
  margin-bottom: 1rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.hint {
  font-size: 0.85rem;
  color: var(--mute);
  margin-top: 0.35rem;
}

input,
textarea {
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

input:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
button:focus {
  opacity: 0.9;
}

.privacy-note {
  font-size: 0.9rem;
  color: var(--mute);
  margin-top: 1rem;
}

/* Contact layout: photo stacks above the text on mobile, sits to its
   left on desktop. */
.contact-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

@media (min-width: 700px) {
  .contact-layout {
    flex-direction: row;
  }
}

.contact-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Citation matrix chart, inlined so it can inherit theme colors */
.chart {
  margin: 1.5rem 0 1rem;
}

.chart svg {
  display: block;
}

.chart-caption {
  color: var(--mute);
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

/* Scroll-driven reveal. The hidden starting state lives ONLY inside this
   @supports block, gated further by prefers-reduced-motion, so browsers
   without view() support (or users who asked for less motion) always see
   sections fully visible with no opacity/transform applied at all. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section {
      opacity: 0;
      transform: translateY(12px);
      animation: reveal 1s ease-out both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Article pages: back-link and byline */
.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.byline {
  color: var(--mute);
  font-size: 0.95rem;
}

/* Source tables: text-led, hairline row separators only, horizontal
   scroll on mobile instead of shrinking the type. Tables are structure,
   not text, so they're placed outside .prose to use the wider column. */
.table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0 3rem;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1.5rem 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

th {
  font-weight: 600;
  color: var(--mute);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--ink);
}

td:first-child,
th:first-child {
  width: 200px;
  font-weight: 600;
}