/* Research-notes shared stylesheet.
   One canonical copy, served by the hub at /assets/research-notes.css; every
   note site on this host links it absolutely, so a restyle here updates the
   whole aggregator. Design system carried over from the VeraNota web pages:
   ink ground, blue accent, Source Serif 4 reading over Source Sans 3 labels.

   The reading is set in serif so the notes read like a research paper.

   Fonts are self-hosted woff2 (latin + latin-ext subsets, normal + italic)
   under /assets/fonts/, so the render chain has no third-party origin. */

@font-face {
  /* Source Serif 4 normal 400 (latin-ext) */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* Source Serif 4 normal 400 (latin) */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Source Serif 4 normal 600 (latin-ext) */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* Source Serif 4 normal 600 (latin) */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Source Serif 4 italic 400 (latin-ext) */
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* Source Serif 4 italic 400 (latin) */
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Source Serif 4 italic 600 (latin-ext) */
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-600italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* Source Serif 4 italic 600 (latin) */
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-600italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Source Serif 4 normal 500 (latin-ext) */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* Source Serif 4 normal 500 (latin) */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Source Sans 3 normal 400 (latin-ext) */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* Source Sans 3 normal 400 (latin) */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Source Sans 3 normal 600 (latin-ext) */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* Source Sans 3 normal 600 (latin) */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #14141a;
  --bg-elevated: #1b1b22;
  --bg-card: #21212a;
  --accent: #2a95ea;
  --accent-bright: #5aabf6;
  --accent-soft: #94c9f5;
  --text: #e8e6e1;
  --text-strong: #f2f0eb;
  --text-2: #9a9690;
  --text-muted: #96918a;
  --border: rgba(255, 255, 255, 0.06);
  --border-accent: rgba(42, 149, 234, 0.24);
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --space-flow: 20px;   /* paragraph and list rhythm */
  --space-block: 28px;  /* card-level blocks: blockquote, pre, table */
  --space-section: 56px; /* section seams: h2 top, hr */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.65;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* A single, barely-there cool wash at the top of the page. Anything louder
     reads as a template; the ink ground itself is the identity. */
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(42, 149, 234, 0.045) 0%, transparent 62%);
}

/* 720px frame puts the 18px serif column near an ideal ~66 characters. */
.page { max-width: 720px; margin: 0 auto; padding: 0 32px; }

/* The reading column is set in serif so the notes read like a research paper
   rather than a blog. Scoped away from the learn app (body.learn-page), whose
   interactive UI stays in the sans; chrome (nav, meta, labels) sets --sans
   explicitly and is unaffected. Source Serif 4 carries a touch more size and
   leading than the sans it replaced. */
body:not(.learn-page) main {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.72;
}

/* Figures fit the column and never force the page wider than the viewport.
   Without this, an intrinsic-width chart (e.g. a 1920px PNG) blows out the
   mobile layout and crushes the text column. */
main img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* Focus visibility (WCAG 2.1 AA). :not(:focus-visible) keeps the UA ring
   in engines without :focus-visible support instead of removing it. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  z-index: 1000;
}

/* Top nav */
nav.top {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
nav.top .wordmark {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
}
nav.top .wordmark:hover { color: var(--accent-bright); }
nav.top .crumb {
  color: var(--text-muted);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Section switcher: the Research <-> Study toggle as a compact segmented
   control next to the wordmark. Replaces the old crumb + scattered links so
   the section jump reads as one control, separate from the in-section nav. */
nav.top .section-switch {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
nav.top .section-link {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease;
}
nav.top .section-link:hover { color: var(--accent); }
nav.top .section-link.is-active {
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.08);
}

/* Back-to-hub control on article pages: an obvious, clickable return path. */
nav.top .back {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.18s ease;
  /* roomy touch target without shifting layout, matches .links */
  padding: 13px 6px;
  margin: -13px -6px;
}
nav.top .back:hover { color: var(--accent); }

/* Circular back control: a quiet ringed glyph at the top-left of an
   article. The nav's margin-bottom sets the gap above and this rule's
   margin-bottom matches it below, centering the ring in the band between
   the nav line and the title. */
.back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  margin: 0 0 18px;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.back-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-card);
  /* Override the global a:hover underline; the ring is the hover affordance. */
  text-decoration: none;
}
nav.top .links {
  margin-left: auto;
  display: flex;
  gap: 26px;
}
nav.top .links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.18s ease;
  /* Negative-margin padding grows the touch target without moving layout. */
  padding: 13px 6px;
  margin: -13px -6px;
}
nav.top .links a:hover { color: var(--accent); }

/* Mobile hamburger: a no-JS checkbox toggle. On desktop the checkbox and burger
   are removed and the links sit inline (unchanged). On narrow screens the links
   collapse into a tap-to-open menu so the bar never wraps to a second line. */
nav.top { position: relative; }
nav.top .nav-toggle,
nav.top .nav-burger { display: none; }

/* Long-form typography */
main { display: block; padding-bottom: 24px; }

h1 {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 8px 0 20px;
  /* Centered so a title that wraps to two or three lines stays symmetric at
     any viewport width; the dek and meta below center with it. */
  text-align: center;
  text-wrap: balance;
}
/* The hub is an index, not an article; its title defers to note titles. */
body.hub h1 { font-size: 42px; }

h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: var(--space-section) 0 16px;
  padding-top: 20px;
  color: var(--text);
  position: relative;
}
/* A short blue tick above each section header marks the seam in the
   blue-on-ink register without a heavy rule. Shared by article h2s and the
   landing's small-caps section labels. */
h2::before,
.section-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 40px 0 12px;
}

/* Body paragraphs set ragged-right. Justification on the web opens rivers
   of whitespace unless hyphenation is aggressive; a quiet left axis reads
   better and is what every serious reading surface does. */
p {
  margin: 0 0 var(--space-flow);
  text-align: left;
}



/* The hub is a short centered index: its prose centers and keeps block-style
   spacing, with no first-line indent. */
body.hub main p {
  text-align: center;
  text-indent: 0;
  margin-bottom: var(--space-flow);
}

/* Article opening: a serif drop cap on the article's actual first
   paragraph (notes open with prose before any h2, so the old h2-anchored
   selector landed mid-article). The landing opts out with .no-dropcap. */
body:not(.hub) main:not(.no-dropcap) > p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 58px;
  line-height: 0.84;
  margin: 5px 11px 0 0;
  color: var(--accent);
}

/* Standfirst under an article h1, and the small meta row beneath it. */
.dek {
  font-size: 19px;
  font-style: italic;
  color: var(--text-2);
  margin: 0 0 10px;
  text-align: center;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.meta {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 var(--space-block);
  text-align: center;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.meta a { color: var(--text-2); }

/* Closing credit line, centered. */
.byline { text-align: center; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Content links carry a quiet warm underline so they are distinguishable
   from body text by more than color (WCAG 1.4.1). Nav, note cards, and
   headings opt out below. */
main p a, main li a, main blockquote a, footer a {
  text-decoration: underline;
  text-decoration-color: var(--border-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
main p a:hover, main li a:hover, main blockquote a:hover, footer a:hover {
  text-decoration-color: var(--accent-bright);
}

strong { font-weight: 600; color: var(--text-strong); }

ul, ol { margin: 0 0 var(--space-flow); padding-left: 26px; }
li { margin-bottom: 10px; }
li::marker { color: var(--accent); }

blockquote {
  /* A quiet pull: one accent hairline and indented text. No box; space
     and the rule carry the structure. */
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 0 0 var(--space-block);
  color: var(--text-2);
  text-align: left;
}
blockquote p { text-align: left; }
blockquote p:last-child { margin-bottom: 0; }
blockquote strong { color: var(--text); }

/* A quiet centered line carrying the repo + contact links. No box; it
   belongs to the masthead block above it. */
.contact-card {
  margin: -14px auto var(--space-block);
  max-width: 560px;
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-muted);
}
.contact-card a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--border-accent);
  text-underline-offset: 3px;
  /* let long repo URLs wrap instead of overflowing the card on mobile */
  overflow-wrap: anywhere;
}
.contact-card a:hover { color: var(--accent); }
.contact-card a:hover { text-decoration-color: var(--accent-bright); }
.contact-card .sep { color: var(--text-muted); margin: 0 8px; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
  color: var(--accent-soft);
}

pre {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 0 0 var(--space-block);
  /* Wrap long lines inside the card instead of letting them run off the
     right edge. macOS auto-hides the overflow scrollbar, so a scrolling
     code block reads as silently clipped; wrapping keeps every character
     visible. overflow-x stays as a fallback for content that cannot wrap. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
  line-height: 1.55;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
}

/* Rouge highlight roles, kept to the same restrained palette. */
.highlight .c, .highlight .c1, .highlight .cm { color: var(--text-muted); font-style: italic; }
.highlight .s, .highlight .s1, .highlight .s2 { color: var(--accent-soft); }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr { color: var(--accent-bright); }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-section) 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-block);
  font-size: 15px;
  /* Results tables are mostly numbers; lining tabular figures keep columns
     of ranks and scores optically aligned. */
  font-variant-numeric: tabular-nums;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}
/* The header seam reads one step firmer than the row seams; the last row
   hands off to surrounding space instead of double-ruling. */
thead th { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
tbody tr:last-child td { border-bottom: none; }
td:first-child, th:first-child { padding-left: 0; }
td:last-child, th:last-child { padding-right: 0; }
th {
  color: var(--text-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

/* ---- Landing page components ------------------------------------------- */

/* Section label: quiet small-caps kicker above each group of studies,
   replacing heading + table with label + list. */
.section-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-section) 0 6px;
  padding-top: 20px;
  position: relative;
}
.section-note {
  color: var(--text-2);
  font-size: 15.5px;
  margin-bottom: 26px;
}
.section-note a { color: var(--accent); }

/* The featured synthesis tile: image + one-line invitation, one target. */
.feature-tile {
  display: block;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 26px 22px;
  margin: 40px 0 8px;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.feature-tile:hover, .feature-tile:focus-visible {
  border-color: var(--border-accent);
  background: var(--bg-elevated);
  text-decoration: none;
}
.feature-tile img {
  margin: 0 0 20px;
  border: none;
  border-radius: 10px;
}
.feature-tile .feature-kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.feature-tile .feature-title {
  display: block;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  text-wrap: balance;
  margin-bottom: 8px;
}
.feature-tile .feature-sub {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}
.feature-tile:hover .feature-title, .feature-tile:focus-visible .feature-title { color: var(--accent-bright); }

/* The study list: each study is one link row: number rail, title,
   one-line finding. Space and a hairline do the work; no cards. */
.study-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-flow);
}
.study-list li {
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.study-list li:last-child { border-bottom: none; }
.study-link {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 18px;
  padding: 22px 4px;
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.18s ease;
}
.study-link:hover, .study-link:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
}
.study-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
  padding-top: 5px;
  letter-spacing: 0.04em;
}
.study-title {
  /* May be an h3 (semantic outline); reset the element-level h3 treatment. */
  margin: 0 0 6px;
  text-transform: none;
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  text-wrap: balance;
  transition: color 0.18s ease;
}
.study-find { margin: 0; }
.study-link:hover .study-title, .study-link:focus-visible .study-title { color: var(--accent-bright); }
.study-find {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

/* The hub Notes list: the generator emits <ul role="list"> inside
   .notes-list, and each entry becomes a quiet card row. role="list"
   survives list-style: none in VoiceOver. */
.notes-list ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-flow);
}
.notes-list li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 14px;
  transition: border-color 0.2s ease;
  /* Centered so a title that wraps stays symmetric, like the masthead. */
  text-align: center;
}
.notes-list li:hover { border-color: var(--border-accent); }
.notes-list a { text-decoration: none; }
.notes-list .note-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
  display: block;
  margin-bottom: 10px;
  color: var(--text);
}
.notes-list .note-title:hover { color: var(--accent-bright); }
.notes-list .note-code {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
}
.notes-list .note-code:hover {
  color: var(--accent);
  border-color: var(--border-accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* Reading position: a hairline of accent that fills along the top of the
   viewport as the article scrolls. Pure CSS scroll-driven animation; engines
   without support simply never show it, and reduced-motion turns it off. */
@supports (animation-timeline: scroll()) {
  body:not(.hub) main:not(.no-dropcap)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--accent);
    opacity: 0.7;
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: read-progress linear forwards;
    animation-timeline: scroll(root);
    z-index: 50;
    pointer-events: none;
  }
  @keyframes read-progress {
    to { transform: scaleX(1); }
  }
}

/* Back-to-top: a quiet ringed glyph fixed at the bottom-right, matching the
   back-icon language. A tiny inline script adds .is-hidden while near the top
   and removes it once the reader has scrolled past the first screen. The base
   state is visible, so if the script never runs the control still works (just
   always shown); the transition is the only motion, so reduced-motion just
   makes the toggle instant. */
.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
  background: var(--bg-elevated);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1;
  text-decoration: none;
  /* Works as both an <a> (notes) and a <button> (the hash-routed learn app,
     where an href="#..." would corrupt the router); reset the button chrome. */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.18s ease,
    border-color 0.18s ease, background 0.18s ease;
}
.to-top.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}
.to-top:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-card);
  text-decoration: none;
  transform: translateY(-2px);
}
@media (max-width: 720px) {
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* Article pagination: quiet previous/next between notes, above the footer. */
.note-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding-top: 24px;
}
.note-pager a {
  display: block;
  text-decoration: none;
  padding: 6px 4px;
  border-radius: 12px;
}
.note-pager a:hover { text-decoration: none; }
.note-pager .pager-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.note-pager .pager-title {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-2);
  transition: color 0.18s ease;
  text-wrap: balance;
}
.note-pager a:hover .pager-title, .note-pager a:focus-visible .pager-title { color: var(--accent-bright); }
.note-pager .pager-next { text-align: right; }

footer {
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding: 28px 0 48px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}
/* The pager already draws the seam; don't double it. */
.note-pager + footer { border-top: none; margin-top: 8px; }
footer a {
  color: var(--text-2);
  padding: 13px 6px;
  margin: -13px -6px;
}
footer a:hover { color: var(--accent); }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .page { padding: 0 20px; }
  h1 { font-size: 36px; }
  body.hub h1 { font-size: 32px; }
  h2 { font-size: 27px; }
  nav.top { flex-wrap: nowrap; align-items: center; }
  /* Keep the always-visible section switcher from crowding the burger. */
  nav.top .wordmark { font-size: 21px; }
  nav.top .section-switch { gap: 1px; padding: 2px; }
  nav.top .section-link { padding: 5px 11px; font-size: 12px; }
  nav.top .nav-toggle {
    display: block; position: absolute; width: 1px; height: 1px;
    margin: 0; opacity: 0; pointer-events: none;
  }
  nav.top .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto;
    width: 44px; height: 44px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  nav.top .nav-burger:hover { color: var(--accent); }
  nav.top .nav-burger .x { display: none; }
  nav.top .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--accent); outline-offset: 3px; }
  nav.top .nav-toggle:checked ~ .nav-burger { color: var(--accent); }
  nav.top .nav-toggle:checked ~ .nav-burger .bars { display: none; }
  nav.top .nav-toggle:checked ~ .nav-burger .x { display: inline; }
  nav.top .links {
    display: none;
    position: absolute; top: calc(100% + 6px); right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    border-radius: 12px;
    min-width: 172px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
    z-index: 60;
  }
  nav.top .nav-toggle:checked ~ .links { display: flex; }
  nav.top .links a { margin: 0; padding: 11px 12px; border-radius: 6px; text-align: center; }
  nav.top .links a:hover { background: rgba(255, 255, 255, 0.04); }
  blockquote { padding: 2px 0 2px 18px; }
  table { display: block; overflow-x: auto; }
  .study-link { grid-template-columns: 1fr; row-gap: 2px; padding: 20px 2px; }
  .study-num { padding-top: 0; margin-bottom: 2px; }
  .study-title { font-size: 20px; }
  .feature-tile { padding: 18px 18px 16px; }
  .feature-tile .feature-title { font-size: 22px; }
  .note-pager { grid-template-columns: 1fr; }
  .note-pager .pager-next { text-align: left; }
}

@media (max-width: 360px) {
  nav.top .section-switch { display: none; }
  nav.top .wordmark { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  body:not(.hub) main:not(.no-dropcap)::before { display: none; }
}