/* ============================================================
   PERSONAL WEBSITE — MASTER STYLESHEET
   Design system: Research Brand (Practical Typography x Gwern.net)
   Site-specific: Homepage grid, navigation, settings toolbar,
                  search, help, reader mode, link previews
   ============================================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Palette — light, airy, and restrained. Practical Typography aesthetic. */
  --bg-primary:       #FEFEFE;
  --bg-secondary:     #F9F8F6;
  --bg-tertiary:      #F4F3F0;
  --bg-highlight:     #FEFCF0;
  --bg-aside:         #F5FAF7;

  --text-primary:     #333333;
  --text-secondary:   #5C5C5C;
  --text-tertiary:    #8E8E8E;
  --text-muted:       #B0B0B0;

  --accent-link:      #B44040;
  --accent-link-hover:#CC5555;
  --accent-dropcap:   #B44040;
  --accent-highlight: #E0C66A;
  --accent-green:     #5A9E7E;
  --accent-blue:      #5B8FA8;

  --border-light:     #E5E2DC;
  --border-medium:    #CCC8C0;

  --hover-bg:         #FDF6F4;
  --mark-bg:          #FFF8DC;
  --callout-border:   #EDE8CC;

  /* Typography */
  --font-serif:       "Source Serif 4", "Apple Garamond", "Baskerville", "Libre Baskerville", "Georgia", "Times New Roman", serif;
  --font-sans:        "Source Sans 3", "Helvetica Neue", "Helvetica", "Segoe UI", "Trebuchet MS", sans-serif;
  --font-mono:        "IBM Plex Mono", "JetBrains Mono", "Fira Code", "Liberation Mono", "Consolas", monospace;

  --font-serif-fallback: "Apple Garamond", "Baskerville", "Libre Baskerville", "Georgia", "Times New Roman", serif;
  --font-sans-fallback:  "Helvetica Neue", "Helvetica", "Segoe UI", "Trebuchet MS", sans-serif;
  --font-mono-fallback:  "JetBrains Mono", "Fira Code", "Liberation Mono", "Consolas", monospace;

  /* Scale */
  --size-base:        19px;
  --size-small:       15px;
  --size-caption:     13px;
  --size-h1:          2.4rem;
  --size-h2:          1.8rem;
  --size-h3:          1.35rem;
  --size-h4:          1.1rem;

  /* Spacing */
  --line-height:      1.58;
  --line-height-tight:1.3;
  --paragraph-spacing:1.2em;
  --section-spacing:  3rem;
  --body-max-width:   720px;
  --body-wide:        920px;
  --side-padding:     24px;
}

/* --- Dark Mode (automatic via media query) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:       #1E1E1E;
    --bg-secondary:     #262625;
    --bg-tertiary:      #2E2E2C;
    --bg-highlight:     #2C2A1F;
    --bg-aside:         #1F2C26;

    --text-primary:     #D5D3CE;
    --text-secondary:   #A5A29C;
    --text-tertiary:    #7A7874;
    --text-muted:       #555350;

    --accent-link:      #D88E7A;
    --accent-link-hover:#E8A898;
    --accent-dropcap:   #CC5555;
    --accent-highlight: #D4B65A;
    --accent-green:     #7CC4A0;
    --accent-blue:      #82B8D0;

    --border-light:     #3A3A3A;
    --border-medium:    #4A4A4A;

    --hover-bg:         #2C2220;
    --mark-bg:          #3D3518;
    --callout-border:   #4A4530;
  }
}

/* --- Dark Mode (manual toggle) --- */
:root[data-theme="dark"] {
  --bg-primary:       #1E1E1E;
  --bg-secondary:     #262625;
  --bg-tertiary:      #2E2E2C;
  --bg-highlight:     #2C2A1F;
  --bg-aside:         #1F2C26;

  --text-primary:     #D5D3CE;
  --text-secondary:   #A5A29C;
  --text-tertiary:    #7A7874;
  --text-muted:       #555350;

  --accent-link:      #D88E7A;
  --accent-link-hover:#E8A898;
  --accent-dropcap:   #CC5555;
  --accent-highlight: #D4B65A;
  --accent-green:     #7CC4A0;
  --accent-blue:      #82B8D0;

  --border-light:     #3A3A3A;
  --border-medium:    #4A4A4A;

  --hover-bg:         #2C2220;
  --mark-bg:          #3D3518;
  --callout-border:   #4A4530;
}

/* --- Light Mode (manual toggle, overrides dark OS preference) --- */
:root[data-theme="light"] {
  --bg-primary:       #FEFEFE;
  --bg-secondary:     #F9F8F6;
  --bg-tertiary:      #F4F3F0;
  --bg-highlight:     #FEFCF0;
  --bg-aside:         #F5FAF7;

  --text-primary:     #333333;
  --text-secondary:   #5C5C5C;
  --text-tertiary:    #8E8E8E;
  --text-muted:       #B0B0B0;

  --accent-link:      #B44040;
  --accent-link-hover:#CC5555;
  --accent-dropcap:   #B44040;
  --accent-highlight: #E0C66A;
  --accent-green:     #5A9E7E;
  --accent-blue:      #5B8FA8;

  --border-light:     #E5E2DC;
  --border-medium:    #CCC8C0;

  --hover-bg:         #FDF6F4;
  --mark-bg:          #FFF8DC;
  --callout-border:   #EDE8CC;
}

/* ============================================================
   PALETTE VARIANTS
   Activated via data-palette attribute on <html>.
   Default (no attribute) = "Research" palette (warm red accents).
   ============================================================ */

/* --- Butterick palette (Practical Typography) --- */
:root[data-palette="butterick"] {
  --accent-link:      #993333;
  --accent-link-hover:#AA3333;
  --accent-dropcap:   #993333;
  --accent-highlight: #CCBBAA;
  --accent-green:     #667766;
  --accent-blue:      #667788;
  --hover-bg:         #FBF3F3;
  --mark-bg:          #FFF5EE;
  --callout-border:   #DDD5CC;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="butterick"]:not([data-theme="light"]) {
    --accent-link:      #D4937D;
    --accent-link-hover:#E0A898;
    --accent-dropcap:   #BB6655;
    --accent-highlight: #8C7A6A;
    --accent-green:     #7A9A7A;
    --accent-blue:      #8A9AAA;
    --hover-bg:         #2E2422;
    --mark-bg:          #332A24;
    --callout-border:   #4A4035;
  }
}
:root[data-palette="butterick"][data-theme="dark"] {
  --accent-link:      #D4937D;
  --accent-link-hover:#E0A898;
  --accent-dropcap:   #BB6655;
  --accent-highlight: #8C7A6A;
  --accent-green:     #7A9A7A;
  --accent-blue:      #8A9AAA;
  --hover-bg:         #2E2422;
  --mark-bg:          #332A24;
  --callout-border:   #4A4035;
}

/* --- Academic palette (traditional, conservative) --- */
:root[data-palette="academic"] {
  --accent-link:      #2B5C8A;
  --accent-link-hover:#3A6FA0;
  --accent-dropcap:   #2B5C8A;
  --accent-highlight: #C4B078;
  --accent-green:     #4A7A5A;
  --accent-blue:      #4A6A8A;
  --hover-bg:         #F0F4F8;
  --mark-bg:          #FFF8E0;
  --callout-border:   #D8D0B0;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="academic"]:not([data-theme="light"]) {
    --accent-link:      #6EAAD0;
    --accent-link-hover:#88BEE0;
    --accent-dropcap:   #5090B8;
    --accent-highlight: #9A8A5A;
    --accent-green:     #6AAA7A;
    --accent-blue:      #6A9ABB;
    --hover-bg:         #1E2630;
    --mark-bg:          #302A1E;
    --callout-border:   #3A3828;
  }
}
:root[data-palette="academic"][data-theme="dark"] {
  --accent-link:      #6EAAD0;
  --accent-link-hover:#88BEE0;
  --accent-dropcap:   #5090B8;
  --accent-highlight: #9A8A5A;
  --accent-green:     #6AAA7A;
  --accent-blue:      #6A9ABB;
  --hover-bg:         #1E2630;
  --mark-bg:          #302A1E;
  --callout-border:   #3A3828;
}

/* --- Fallback font mode (activated via data-fonts="fallback") --- */
:root[data-fonts="fallback"] {
  --font-serif: var(--font-serif-fallback);
  --font-sans:  var(--font-sans-fallback);
  --font-mono:  var(--font-mono-fallback);
}

/* ============================================================
   BASE RESET & BODY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: var(--size-base);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-serif);
  color: var(--text-primary);
  background: var(--bg-primary);
  line-height: var(--line-height);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--size-h1);
  margin: 0 0 0.4em 0;
  font-weight: 800;
  text-align: center;
}

/* Article & index page titles: left-aligned, lighter, uniform small-caps, with a
   short accent rule beneath that rhymes with the h2 top-rules. The :not([style])
   guard excludes the 404 page, whose .content-page wrapper is inline-centered. */
.content-page:not([style]) h1 {
  text-align: left;
  font-weight: 700;
  text-transform: lowercase;
  font-variant: small-caps;
}

.content-page:not([style]) h1::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin: 0.55rem 0 0;
  background: var(--accent-link);
  border-radius: 2px;
}

/* Sections + sub-sections share the title's small-caps so the hierarchy reads as
   one system; size, weight, colour, and the h2 hairline keep the levels distinct. */
.content-page:not([style]) h2,
.content-page:not([style]) h3 {
  font-weight: 600;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.02em;
}

h2 {
  font-size: var(--size-h2);
  margin: var(--section-spacing) 0 0.6em 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

h3 {
  font-size: var(--size-h3);
  margin: 2rem 0 0.5em 0;
  color: var(--text-secondary);
}

h4 {
  font-size: var(--size-h4);
  margin: 1.5rem 0 0.4em 0;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

p {
  margin-bottom: var(--paragraph-spacing);
  hanging-punctuation: first last;
}

p:last-child {
  margin-bottom: 0;
}

/* Small caps for emphasis */
.sc {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 1.05em;
}

/* Drop cap for opening paragraphs */
.drop-cap::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.8;
  padding: 0.05em 0.1em 0 0;
  font-weight: 700;
  color: var(--accent-dropcap);
  font-family: var(--font-serif);
}

strong { font-weight: 650; }
em { font-style: italic; }

/* New thought — small caps for section openers (Tufte pattern) */
.newthought {
  font-variant: small-caps;
  font-size: 1.1em;
  letter-spacing: 0.05em;
}

/* ============================================================
   LINKS
   ============================================================ */
a {
  color: var(--accent-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--accent-link-hover);
  border-bottom-color: var(--accent-link-hover);
  background: var(--hover-bg);
  border-radius: 2px;
  padding: 0 0.1em;
}

/* Internal links — Gwern-style dotted underline */
.internal-link {
  border-bottom: 1px dotted var(--accent-link);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  position: relative;
}

.internal-link:hover {
  color: var(--accent-link-hover);
  background-color: var(--hover-bg);
  border-bottom-style: solid;
}

/* External-link indicator — a small ↗ on links that leave the site.
   Scoped to <main> so it never decorates the header social icons or logo,
   and skips any link that already wraps an icon (svg/img). */
main a[href^="http"]:not(:has(svg)):not(:has(img))::after {
  /* VS15 (\00FE0E) + font-variant-emoji force the plain text glyph; without
     them iOS Safari upgrades this arrow to a blue emoji "button". */
  content: "\002197\00FE0E";
  display: inline-block;
  font-variant-emoji: text;
  font-family: var(--font-sans);
  font-size: 0.62em;
  line-height: 1;
  vertical-align: text-top;
  margin-left: 0.12em;
  color: var(--text-muted);
  border-bottom: none;
}

/* ============================================================
   SUBTITLE & METADATA
   ============================================================ */
.subtitle {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--text-tertiary);
  font-weight: 400;
  margin: 0 0 1.5em 0;
  line-height: 1.4;
  text-align: left;
  display: block;
}

/* Status badge next to a title (e.g. `badge: working draft`) */
.page-badge {
  display: inline-block;
  margin: 0 0 1.5em 0;
  padding: 0.2em 0.7em;
  font-family: var(--font-sans);
  font-size: var(--size-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dropcap);
  background: var(--mark-bg);
  border: 1px solid var(--callout-border);
  border-radius: 999px;
  line-height: 1.3;
  vertical-align: middle;
}

/* Multiple badges sit in a row with a small gap */
.page-badge + .page-badge {
  margin-left: 0.4em;
}

/* "synthesized" — cool sage tone to distinguish from the amber "working draft" */
.page-badge--synthesized {
  color: var(--accent-green);
  background: color-mix(in srgb, var(--accent-green) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent-green) 38%, transparent);
}

/* When a badge is followed by a subtitle, tighten the badge's bottom gap */
.page-badge + .subtitle {
  margin-top: -0.6em;
}

.metadata {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--text-tertiary);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}

/* ============================================================
   ABSTRACT / SUMMARY BOX
   ============================================================ */
.abstract {
  background: var(--bg-secondary);
  border-left: 2px solid var(--border-medium);
  padding: 1.2em 1.5em;
  margin: 1.5em 0 2em 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  border-radius: 0 3px 3px 0;
}
.abstract p:last-child { margin-bottom: 0; }

/* ============================================================
   BLOCKQUOTES
   ============================================================ */
blockquote {
  border-left: 2px solid var(--accent-highlight);
  padding: 0.8em 1.2em;
  margin: 1.5em 0;
  background: var(--bg-highlight);
  color: var(--text-secondary);
  font-style: italic;
  border-radius: 0 3px 3px 0;
}

blockquote p {
  text-align: left;
}

blockquote p:last-child { margin-bottom: 0; }

blockquote footer, blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: var(--text-muted);
}

blockquote footer::before {
  content: '\2014\00a0';
}

/* Epigraph — centered opening quote */
.epigraph {
  font-style: italic;
  margin: 2rem 3rem;
  border-left: none;
  text-align: right;
  padding: 0;
  color: var(--text-secondary);
  background: none;
}

/* ============================================================
   LISTS
   ============================================================ */
ul, ol {
  margin: 0 0 var(--paragraph-spacing) 1.8em;
}

/* Unordered lists use small filled squares, not the default disc. `square` is a
   CSS rendering primitive (not a ▪ character), so it can't be upgraded to an
   emoji on iOS Safari. Ordered lists and `list-style: none` lists are untouched. */
ul {
  list-style-type: square;
}

li {
  margin-bottom: 0.4em;
}

li > ul, li > ol {
  margin-top: 0.4em;
  margin-bottom: 0;
}

/* ============================================================
   CODE
   ============================================================ */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-tertiary);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  color: var(--text-primary);
}

pre {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 1.2em 1.4em;
  overflow-x: auto;
  margin: 1.5em 0;
  line-height: 1.5;
  font-size: 0.85rem;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* ============================================================
   TABLES
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.92rem;
  font-family: var(--font-sans);
}

thead {
  border-bottom: 2px solid var(--border-medium);
}

th {
  text-align: left;
  padding: 0.6em 0.8em;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  font-size: 0.9em;
}

td {
  padding: 0.5em 0.8em;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

tr:hover td {
  background: var(--bg-secondary);
}

/* ============================================================
   MATHEMATICAL CONTENT (KaTeX)
   ============================================================ */
.katex-display {
  margin: 1.5em 0;
  padding: 0.8em 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.equation-numbered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin: 1.5em 0;
}

.equation-numbered .eq-number {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Theorem / Definition / Proof boxes */
.theorem-box {
  background: var(--bg-secondary);
  border-left: 2px solid var(--accent-blue);
  padding: 1em 1.4em;
  margin: 1.5em 0;
  border-radius: 0 3px 3px 0;
}

.theorem-box .theorem-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--accent-blue);
  margin-bottom: 0.4em;
  font-size: 0.95rem;
}

.definition-box {
  background: var(--bg-aside);
  border-left: 2px solid var(--accent-green);
  padding: 1em 1.4em;
  margin: 1.5em 0;
  border-radius: 0 3px 3px 0;
}

.definition-box .def-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--accent-green);
  margin-bottom: 0.4em;
  font-size: 0.95rem;
}

.proof-box {
  padding: 0.5em 0 0.5em 1.4em;
  border-left: 1px dashed var(--border-medium);
  margin: 1em 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.proof-box::after {
  content: "\25AE";
  display: block;
  text-align: right;
  color: var(--text-tertiary);
  margin-top: 0.5em;
}

/* ============================================================
   SIDENOTES (Gwern-style)
   ============================================================ */
.sidenote-ref {
  font-size: 0.75em;
  vertical-align: super;
  color: var(--accent-link);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
}

.sidenote {
  font-size: var(--size-small);
  color: var(--text-tertiary);
  line-height: 1.4;
  font-family: var(--font-sans);
  margin: 0.8em 0;
  padding: 0.6em 1em;
  background: var(--bg-aside);
  border-radius: 3px;
  border-left: 2px solid var(--accent-green);
}

@media (min-width: 1100px) {
  .sidenote {
    float: right;
    clear: right;
    width: 220px;
    margin-right: -260px;
    margin-top: 0;
    margin-bottom: 0.5em;
    position: relative;
  }
}

/* ============================================================
   FIGURES & CAPTIONS
   ============================================================ */
figure {
  margin: 2em 0;
  text-align: center;
}

figure img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

figcaption {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--text-tertiary);
  margin-top: 0.6em;
  line-height: 1.4;
  text-align: center;
}

/* ============================================================
   CALLOUT / HIGHLIGHT BOX
   ============================================================ */
.callout {
  background: var(--bg-highlight);
  border: 1px solid var(--callout-border);
  padding: 1em 1.4em;
  margin: 1.5em 0;
  border-radius: 3px;
  font-size: 0.95rem;
}
.callout p:last-child { margin-bottom: 0; }

/* ============================================================
   INLINE HIGHLIGHT
   ============================================================ */
mark, .highlight {
  background: var(--mark-bg);
  padding: 0.1em 0.25em;
  border-radius: 2px;
  color: var(--text-primary);
}

/* ============================================================
   HORIZONTAL RULE / SECTION BREAK
   ============================================================ */
hr {
  border: none;
  text-align: center;
  margin: var(--section-spacing) 0;
  color: var(--text-muted);
}

hr::after {
  content: "\2042";
  font-size: 1.2em;
  letter-spacing: 0.5em;
}

.section-break {
  text-align: center;
  margin: var(--section-spacing) 0;
  color: var(--text-muted);
  font-size: 1.2em;
  letter-spacing: 0.5em;
}

.section-break:empty::before {
  content: "\2042";
}

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */
.toc {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  background: var(--bg-secondary);
  padding: 1.2em 1.5em;
  border-radius: 4px;
  margin: 2em 0;
}

.toc-title {
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  margin-bottom: 0.6em;
  color: var(--text-secondary);
}

.toc ol {
  margin: 0;
  padding-left: 1.4em;
}

.toc li {
  margin-bottom: 0.3em;
}

.toc a {
  color: var(--text-secondary);
  border-bottom: none;
}

.toc a:hover {
  color: var(--accent-link);
}

/* ============================================================
   FOOTNOTES
   ============================================================ */


/* ============================================================
   CATEGORY INDEX LISTING
   ============================================================ */
.category-listing {
  margin-top: var(--section-spacing);
}

/* Section label — quiet, uppercase, not a competing heading */
.category-listing h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-tertiary);
  margin: 0 0 1.25em 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
}

.category-item {
  display: block;
  padding: 1.05em 1.3em;
  margin-bottom: 0.7em;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}

.category-item:hover {
  border-color: var(--accent-link);
  background: var(--hover-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  /* Re-assert geometry: the global `a:hover` rule otherwise collapses padding
     to 0 0.1em and shrinks the radius, which resizes the card and causes hover
     flicker. No transform here — moving the box also triggers edge flicker. */
  padding: 1.05em 1.3em;
  border-radius: 8px;
}

/* `.category-item` prefix raises specificity above the global `.content-page h3/p`
   rules, which would otherwise inject heading/paragraph margins into the cards. */
.category-item .category-item-title {
  font-family: var(--font-sans);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--accent-link);
  margin: 0 0 0.3em 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  align-items: center;
}

/* Arrow affordance that slides on hover */
.category-item .category-item-title::after {
  content: "→";
  margin-left: auto;
  padding-left: 0.6em;
  color: var(--text-muted);
  font-weight: 400;
  transition: transform 0.18s ease, color 0.18s ease;
}

.category-item:hover .category-item-title {
  color: var(--accent-link-hover);
}

.category-item:hover .category-item-title::after {
  color: var(--accent-link-hover);
  transform: translateX(4px);
}

.category-item .category-item-excerpt {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ============================================================
   THOUGHTS INDEX — filterable list
   ============================================================ */
.t-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.15em;
  margin: var(--section-spacing) 0 1.7em;
}

.t-filter {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0 0 2px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.t-filter:hover {
  color: var(--accent-link);
}

.t-filter.is-active {
  color: var(--accent-link);
  border-bottom-color: var(--accent-link);
}

.t-item {
  padding: 1.15em 0;
  border-top: 1px solid var(--border-light);
}

.t-item:last-child {
  border-bottom: 1px solid var(--border-light);
}

.t-item.is-hidden {
  display: none;
}

/* `.t-item` prefix raises specificity over global `.content-page a/h3/p` rules */
.t-item .t-item-title {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--accent-link);
  text-decoration: none;
  border: none;
  padding: 0;
}

.t-item .t-item-title:hover {
  color: var(--accent-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.t-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.95em;
  margin: 0.45em 0 0;
}

.t-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.t-chip {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.t-chip:hover {
  color: var(--accent-link);
}

.t-chip--popular {
  color: var(--accent-link);
}

.t-item .t-item-excerpt {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0.5em 0 0;
  hyphens: none;
  -webkit-hyphens: none;
}

.category-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.65em;
}

.category-item-tags .tag {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  padding: 0.15em 0.5em;
  border-radius: 3px;
  font-size: var(--size-caption);
  font-family: var(--font-sans);
}

/* Sequential prev / up·home / next nav at the bottom of every generated page.
   The :any-link / :hover selectors intentionally outrank the header `nav a` rules. */
.page-nav {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: var(--section-spacing);
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-light);
  font-family: var(--font-sans);
  font-size: var(--size-small);
}

/* Three equal slots → prev left, mid centered, next right */
.page-nav-slot { flex: 1 1 0; min-width: 0; }
.page-nav-prev { text-align: left; }
.page-nav-mid  { text-align: center; }
.page-nav-next { text-align: right; }

.page-nav a:any-link {
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  text-decoration: none;
  transition: color 0.18s ease;
}

.page-nav a:hover {
  color: var(--accent-link);
  background: none;
}

.page-nav a.page-nav-mid-link:any-link { color: var(--text-tertiary); }

.page-nav-arrow {
  color: var(--text-muted);
  transition: transform 0.18s ease;
  display: inline-block;
}
.page-nav-prev a:hover .page-nav-arrow { transform: translateX(-3px); }
.page-nav-next a:hover .page-nav-arrow { transform: translateX(3px); }

/* ============================================================
   WIDE INDEX LAYOUT
   Index pages that show a card grid use a wider container; prose
   inside stays at the reading measure, the grid + nav span wider.
   ============================================================ */
.content-page.content-page--index {
  max-width: var(--body-wide);
}

/* Prose on index pages fills the full wide container (same width as the card
   grid and the article pages), so the text and cards share both edges. */

/* Responsive card grid — two columns once there's room, single column below */
@media (min-width: 720px) {
  .content-page--index .category-listing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
  }
  .content-page--index .category-listing h2 {
    grid-column: 1 / -1;
  }
  .content-page--index .category-listing .category-item {
    margin-bottom: 0;
  }
}

/* ============================================================
   HEADER & NAVIGATION (site-specific)
   ============================================================ */
header {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-medium);
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  margin-right: 0.75rem;
}

.logo:hover {
  background: none;
  padding: 0;
  border-radius: 0;
}

.logo img {
  height: 30px;
  width: auto;
  /* Logo art is light two-tone text on a transparent background. Dark themes
     show it as-is; light themes invert it to dark text, softened via opacity. */
}

/* Light mode logo — auto detection */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo img {
    filter: invert(1);
    opacity: 0.5;
  }
}
/* Light mode logo — manual toggle */
:root[data-theme="light"] .logo img {
  filter: invert(1);
  opacity: 0.5;
}
/* Dark mode logo — manual toggle (overrides light-OS auto) */
:root[data-theme="dark"] .logo img {
  filter: none;
  opacity: 1;
}

nav {
  display: flex;
  gap: 0;
}

nav a {
  color: var(--text-primary);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-medium);
  border-left: none;
  border-bottom: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.2s ease;
  background: none;
  border-radius: 0;
}

nav a:first-child {
  border-left: 1px solid var(--border-medium);
}

nav a:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
  border-radius: 0;
}

nav a.nav-active {
  color: var(--text-primary);
  background-color: rgba(128, 128, 128, 0.12);
  font-weight: 700;
}

nav a:not(.nav-active) {
  color: var(--text-muted);
}

nav a svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
main {
  padding: 2rem;
}

/* ============================================================
   HOMEPAGE — Intro & Grid Layout (site-specific)
   ============================================================ */
.intro-section {
  margin-bottom: 2rem;
}

.intro-section p {
  margin-bottom: 1rem;
}

.content-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.content-sections section {
  border: 1px dotted var(--border-light);
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease;
}

.content-sections section:hover {
  border-color: var(--accent-link);
  border-style: solid;
}

/* Homepage section headers — small caps */
.content-sections section h2 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 0;
  margin-bottom: 1rem;
  border-top: none;
  border-bottom: 1px solid var(--border-light);
  padding-top: 0;
  padding-bottom: 0.5rem;
  color: var(--text-muted);
}

/* Article lists */
.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-list li {
  margin-bottom: 0.6rem;
}

.bullet-icon {
  text-decoration: none;
  display: inline;
  margin-right: 0.15em;
  font-style: normal;
  color: var(--text-muted);
  border-bottom: none;
}

.bullet-icon svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

/* "New" sparkle icon — highlights new/notable items */
.bullet-new {
  color: var(--accent-highlight);
}

/* ============================================================
   LINK PREVIEWS — hover card + inline transclusion
   ============================================================ */
.link-preview {
  position: absolute;
  z-index: 1000;
  width: 440px;
  max-width: 92vw;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  font-family: var(--font-serif);
  color: var(--text-primary);
  overflow: hidden;
}

.lp-head {
  padding: 0.7rem 1rem 0.55rem;
  border-bottom: 1px solid var(--border-light);
}
.lp-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--accent-link);
  text-decoration: none;
  border: none;
}
.lp-title:hover { color: var(--accent-link-hover); background: none; }
.lp-badges { margin-top: 0.4em; }
.lp-badges .page-badge { margin: 0 0.3em 0 0; }

.lp-body.is-clipped {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.lp-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--border-light);
  background: var(--bg-tertiary);
}
.lp-action,
.lp-action:any-link {
  font-family: var(--font-sans);
  font-size: var(--size-caption);
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border-medium);
  border-radius: 5px;
  padding: 0.25em 0.7em;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.lp-action:hover { color: var(--accent-link); border-color: var(--accent-link); background: none; }

/* Strip .content-page framing inside previews so it fits the card/aside */
.link-preview .content-page,
.lp-transclusion .content-page {
  max-width: none;
  margin: 0;
  padding: 0;
}
.link-preview .lp-body {
  padding: 0.65rem 1rem 0.25rem;
  max-height: 15rem;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.5;
}
.link-preview .lp-body > :first-child { margin-top: 0; }

/* Inline transclusion (the "Expand here" action) */
.lp-transclusion {
  display: block;
  margin: 1.5rem 0;
  border: 1px solid var(--border-medium);
  border-left: 3px solid var(--accent-link);
  border-radius: 6px;
  background: var(--bg-secondary);
  overflow: hidden;
}
.lp-tr-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-tertiary);
}
.lp-tr-title {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--accent-link);
  text-decoration: none;
  border: none;
}
.lp-tr-badges { display: inline-flex; gap: 0.3em; }
.lp-tr-link {
  margin-left: auto;
  font-family: var(--font-sans);
  color: var(--text-tertiary);
  text-decoration: none;
  border: none;
}
.lp-tr-link:hover { color: var(--accent-link); background: none; }
.lp-tr-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-tertiary);
  padding: 0 0.15em;
}
.lp-tr-close:hover { color: var(--accent-link); }
.lp-transclusion .lp-tr-body { padding: 1rem 1.25rem; }

.article-list a {
  color: var(--accent-link);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.4;
}

.article-list a:hover {
  color: var(--accent-link-hover);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  margin-top: 4rem;
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Footer end-mark: a quiet asterism, the classical "end of work" sign. */
.footer-mark {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text-tertiary);
}

/* ============================================================
   CONTENT PAGE STYLING
   ============================================================ */
.content-page {
  max-width: var(--body-wide);
  margin: 0 auto;
  padding: 2rem;
  line-height: var(--line-height);
}

.content-page h1 {
  font-size: var(--size-h1);
  margin-bottom: 0.5rem;
}

.content-page h2 {
  font-size: var(--size-h2);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.content-page h3 {
  font-size: var(--size-h3);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Content paragraphs — justified with hyphens */
.content-page p {
  margin-bottom: var(--paragraph-spacing);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Content lists */
.content-page ul, .content-page ol {
  margin: var(--paragraph-spacing) 0;
  padding-left: 1.5rem;
}

.content-page li {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}

/* Nested sub-lists sit snug under their parent item (not the full 1.2em
   paragraph gap, which made them read as a separate list). */
.content-page li > ul,
.content-page li > ol {
  margin: 0.2rem 0 0.3rem;
}

/* Ordered lists carry Devanagari numerals by default — १, २, ३ … — a small nod to
   origins that stays readable for short lists. Footnotes and the section TOC keep
   decimal (numbers must match in-text refs / stay scannable); a single list opts out
   with an {ol:decimal|roman|upper-roman|alpha} directive in the markdown. The class
   overrides sit at higher specificity than the devanagari default so they win. */
.content-page ol {
  list-style-type: devanagari;
}
.content-page ol.footnotes-list,
.content-page ol.section-toc-list,
.content-page ol.ol-decimal {
  list-style-type: decimal;
}
.content-page ol.ol-roman { list-style-type: lower-roman; }
.content-page ol.ol-upper-roman { list-style-type: upper-roman; }
.content-page ol.ol-alpha { list-style-type: lower-alpha; }

/* Images & figures */
.content-page img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}

.content-page figure.content-figure {
  margin: 2rem auto;
  text-align: center;
}

.content-page figure.content-figure img {
  margin: 0 auto;
}

.content-page figcaption {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--text-tertiary);
  line-height: 1.45;
  margin-top: 0.7em;
}

/* Image gallery / grid (:::gallery ... :::) — responsive, wraps automatically */
.content-page .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  align-items: start;
}

.content-page .gallery figure.content-figure {
  margin: 0;            /* grid gap handles spacing */
}

.content-page .gallery figure.content-figure img {
  width: 100%;          /* fill the tile */
}

.content-page .gallery figcaption {
  font-size: var(--size-caption);
  margin-top: 0.4em;
}

/* Values grid (:::values ... :::) — one card per value, facets listed inside.
   Auto-fits to 2x2 on desktop, single column on narrow screens. */
.content-page .values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  align-items: start;        /* sparse cards keep their natural height */
}
@media (max-width: 600px) {
  .content-page .values-grid { grid-template-columns: 1fr; }
}
.content-page .value-card {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 1.15rem 1.3rem 1.3rem;
}
/* The value name is an <h2> for outline/semantics, restyled as a card label
   (cancel the global h2 hairline + small-caps). */
.content-page .value-card .value-name {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variant: normal;
  color: var(--accent-link);
  margin: 0 0 0.7rem;
  padding: 0;
  border-top: none;
}
.content-page .value-facets {
  margin: 0;
  padding: 0;
  list-style: none;
}
.content-page .value-facets li {
  position: relative;
  margin: 0.3rem 0;
  padding-left: 0.95rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* A small accent square (a CSS box, not a glyph — emoji-safe + theme-aware). */
.content-page .value-facets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.3em;
  height: 0.3em;
  background: var(--accent-link);
  opacity: 0.55;
}

/* Hidden sections */
section[style*="display: none"] {
  display: none;
}

/* ============================================================
   FLOATING SETTINGS TOOLBAR (site-specific)
   ============================================================ */
.settings-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.settings-floating.faded {
  opacity: 0.15;
}

.settings-floating:hover {
  opacity: 1;
}

.sf-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  padding: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
}

.sf-btn:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--accent-link);
}

.sf-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sf-gear {
  border-radius: 4px;
}

.sf-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
}

.settings-floating.expanded .sf-menu {
  display: flex;
}

/* ============================================================
   SEARCH OVERLAY (site-specific)
   ============================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  justify-content: center;
  padding-top: 15vh;
}

.search-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  width: 90%;
  max-width: 600px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.search-container input {
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 18px;
  outline: none;
}

.search-container input::placeholder {
  color: var(--text-muted);
}

.search-results {
  overflow-y: auto;
  padding: 0.5rem;
}

.search-result-item {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: none;
}

.search-result-item:hover,
.search-result-item.active {
  background: rgba(128, 128, 128, 0.1);
}

.search-result-item .result-title {
  font-weight: bold;
  color: var(--accent-link);
  margin-bottom: 0.25rem;
}

.search-result-item .result-excerpt {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}

.search-no-results {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}

/* ============================================================
   HELP MODAL (site-specific)
   ============================================================ */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.help-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.help-modal h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-style: normal;
  color: var(--text-primary);
}

.help-modal dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
}

.help-modal dt {
  font-weight: bold;
  color: var(--accent-link);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.help-modal dt svg {
  width: 16px;
  height: 16px;
}

.help-modal dd {
  color: var(--text-secondary);
  margin: 0;
}

.help-modal .help-close {
  margin-top: 1.5rem;
  text-align: right;
}

.help-modal .help-close button {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  border-radius: 4px;
  font-family: var(--font-serif);
}

.help-modal .help-close button:hover {
  background: var(--bg-tertiary);
}

/* ============================================================
   READER MODE (site-specific)
   ============================================================ */
.reader-mode main {
  max-width: 700px;
  margin: 0 auto;
}

.reader-mode .content-sections {
  grid-template-columns: 1fr;
}

.reader-mode nav {
  display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --size-base: 17px;
    --size-h1: 1.9rem;
    --size-h2: 1.5rem;
    --body-max-width: 100%;
    --side-padding: 16px;
  }

  header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  nav {
    flex-wrap: wrap;
  }

  nav a {
    font-size: 11px;
    padding: 0.5rem 0.75rem;
  }

  main {
    padding: 1rem;
  }

  .content-sections {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .content-page p {
    text-align: left;
    hyphens: none;
  }

  .epigraph {
    margin: 1.5rem 1rem;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
    max-width: 100%;
  }

  h2 {
    border-top: none;
    page-break-after: avoid;
  }

  nav, .settings-floating {
    display: none;
  }

  .content-sections section {
    break-inside: avoid;
  }

  .theorem-box, .definition-box, .callout, pre {
    page-break-inside: avoid;
  }

  a {
    color: #000;
    border-bottom: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* --- Footnotes / citations --- */
.footnote-ref {
  font-size: 0.72em;
  line-height: 0;
  white-space: nowrap;
}
.footnote-ref a {
  text-decoration: none;
  padding: 0 0.12em;
}
.footnotes {
  margin-top: 2.75rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.footnotes hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin-bottom: 1rem;
}
.footnotes-list {
  padding-left: 1.5rem;
}
.footnotes-list li {
  margin: 0.45rem 0;
  line-height: 1.5;
}
.footnote-back {
  text-decoration: none;
  margin-left: 0.3rem;
  font-size: 0.9em;
}

/* ============================================================
   HOVER TOOLTIPS (footnotes + inline definitions)
   Built by src/tooltips.ts. One shared floating card showing a footnote's text
   or a marked term's definition on hover/focus. Theme-aware via design tokens.
   ============================================================ */
/* Marked term produced by `[term](def: …)` — a sage-green dotted underline (vs
   the red dotted of internal links) signals "hover for a definition". */
.defn {
  border-bottom: 1px dotted var(--accent-green);
  cursor: help;
  text-decoration: none;
}
.defn:hover,
.defn:focus {
  border-bottom-style: solid;
  background: var(--bg-aside);
  outline: none;
}

.hover-tip {
  position: absolute;
  z-index: 1100;
  max-width: 22rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.hover-tip-body {
  padding: 0.6rem 0.85rem;
  max-height: 40vh;
  overflow-y: auto;
  overflow-wrap: break-word;
}
.hover-tip-body > :first-child { margin-top: 0; }
.hover-tip-body > :last-child { margin-bottom: 0; }
.hover-tip-body a {
  color: var(--accent-link);
  border-bottom: 1px solid transparent;
}
.hover-tip-body a:hover {
  border-bottom-color: var(--accent-link);
  background: none;
}

/* --- Section table of contents (category index, `toc: true`) --- */
.section-toc {
  margin: 1.75rem 0 1rem;
}
.section-toc-list {
  list-style: decimal;
  padding-left: 1.7rem;
}
.section-toc-list li {
  margin: 0.6rem 0;
}
.section-toc-link {
  font-weight: 600;
}
.section-toc-excerpt {
  display: block;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ============================================================
   FLOATING PAGE TOC (LessWrong / AlignmentForum-style scroll-spy)
   Built by src/page-toc.ts on article pages. The site <body> is capped
   at 1000px and centred, so the rail lives in the viewport gutter OUTSIDE
   the reading column and never overlaps it: its right edge hugs the left
   edge of the body (half-width = 500px). Hidden until JS adds `.is-ready`,
   and only revealed once the viewport is wide enough to hold the rail clear
   of the text.

   Two states (LW-style "landmark" behaviour):
   - Idle / collapsed (default): a slim rail showing only short marker lines,
     one per heading, with the current section's marker highlighted.
   - Active / expanded: opens to the full nested text TOC on hover or keyboard
     focus, then tucks back to the lines when idle again.
   ============================================================ */
.page-toc {
  display: none;
}

@media (min-width: 1320px) {
  /* Idle / collapsed: just wide enough for the markers. The rail is anchored by
     its LEFT edge (fixed in the gutter), so expanding grows it rightward toward
     the column and the markers never move — no horizontal jump. The fixed left
     is positioned so the expanded right edge lands a 1.5rem gap from the body. */
  .page-toc.is-ready {
    --toc-w: min(14rem, calc(50vw - 500px - 3rem));
    display: block;
    position: fixed;
    top: 7rem;
    left: calc(50% - 500px - 1.5rem - var(--toc-w));
    width: 2.1rem;
    max-height: calc(100vh - 9rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-tertiary);
    /* Soft-fade the scroll edges so a long, scrolled TOC doesn't hard-clip. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.7rem, #000 calc(100% - 0.7rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 0.7rem, #000 calc(100% - 0.7rem), transparent 100%);
    z-index: 50;
  }
  /* Active / expanded: open rightward to the full-width text TOC. */
  .page-toc.is-ready:hover,
  .page-toc.is-ready:focus-within,
  .page-toc.is-ready.is-expanded {
    width: var(--toc-w);
  }
}

.page-toc-title {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.55rem;
  padding-left: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.page-toc:hover .page-toc-title,
.page-toc:focus-within .page-toc-title,
.page-toc.is-expanded .page-toc-title {
  opacity: 1;
}

.page-toc-list,
.page-toc-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* h3 entries indent under their parent h2 (collapsed markers and expanded text). */
.page-toc-sublist {
  padding-left: 0.6rem;
}

.page-toc-item {
  margin: 0;
}

.page-toc-link {
  display: flex;
  align-items: center;
  padding: 0.17rem 0 0.17rem 0.35rem;
  border-left: 2px solid transparent;
  border-bottom: none;
  color: var(--text-tertiary);
  text-decoration: none;
  /* Geometry (width / padding) switches instantly; only opacity + colour fade,
     so the labels never re-wrap or slide while the rail opens. */
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* The marker line — the only thing shown when the rail is idle/collapsed. */
.page-toc-marker {
  flex: 0 0 auto;
  width: 1rem;
  height: 2px;
  border-radius: 1px;
  background: var(--border-medium);
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.page-toc-item--h3 .page-toc-marker {
  width: 0.62rem;
}
/* Demos read as an up-pointing triangle (vs the heading lines), rendered as a
   glyph so filled/outlined is just a character swap: outlined + subtle grey when
   idle, filled + accent when it is the active entry. */
.page-toc-item--demo .page-toc-marker {
  width: auto;
  height: auto;
  background: none;
  clip-path: none;
  border-radius: 0;
  font-size: 0.62rem;
  line-height: 1;
  color: var(--text-tertiary);
}
.page-toc-item--demo .page-toc-marker::before {
  content: '\25B5'; /* ▵ outlined up-pointing small triangle */
}

/* Active heading line fills with the accent. */
.page-toc-link.is-active .page-toc-marker {
  background: var(--accent-link);
}
/* Active demo triangle takes the accent and fills in (▲). */
.page-toc-item--demo .page-toc-link.is-active .page-toc-marker {
  background: none;
  color: var(--accent-link);
}
.page-toc-item--demo .page-toc-link.is-active .page-toc-marker::before {
  content: '\25B4'; /* ▴ filled up-pointing small triangle */
}

/* The full label — hidden when collapsed, revealed when expanded. Kept to a
   single ellipsised line (never wraps) so it never re-flows as the rail opens. */
.page-toc-label {
  min-width: 0;
  flex: 1 1 auto;
  padding-left: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.page-toc-item--h3 .page-toc-label {
  font-size: 0.95em;
  color: var(--text-muted);
}

/* --- Expanded state: show the labels, restore the left rail. A heading's own
   line collapses away; demo triangles stay as the entry's landmark. The child
   combinators matter: a demo nested inside a heading's sublist must keep its
   triangle, so we only hide a non-demo item's *own* marker. --- */
.page-toc:hover .page-toc-item:not(.page-toc-item--demo) > .page-toc-link > .page-toc-marker,
.page-toc:focus-within .page-toc-item:not(.page-toc-item--demo) > .page-toc-link > .page-toc-marker,
.page-toc.is-expanded .page-toc-item:not(.page-toc-item--demo) > .page-toc-link > .page-toc-marker {
  width: 0;
  opacity: 0;
}
.page-toc:hover .page-toc-label,
.page-toc:focus-within .page-toc-label,
.page-toc.is-expanded .page-toc-label {
  opacity: 1;
}
.page-toc:hover .page-toc-link,
.page-toc:focus-within .page-toc-link,
.page-toc.is-expanded .page-toc-link {
  /* Only the rail colour changes on expand — padding stays put so the markers
     keep their exact x-position (no shift). The label's own padding spaces the
     text off the rail. */
  border-left-color: var(--border-light);
}
.page-toc:hover .page-toc-link.is-active,
.page-toc:focus-within .page-toc-link.is-active,
.page-toc.is-expanded .page-toc-link.is-active {
  border-left-color: var(--accent-link);
}

/* Per-entry states (meaningful once expanded; neutralise the global a:hover pill).
   The padding MUST be restated here: the global `a:hover` sets `padding: 0 .1em`,
   which would otherwise shrink the row on hover, move the row boundary off the
   cursor, and flicker the highlight between adjacent rows. Pinning it kills that. */
.page-toc-link:hover {
  color: var(--accent-link);
  background: none;
  border-radius: 0;
  padding: 0.17rem 0 0.17rem 0.35rem;
}
.page-toc-link.is-active {
  color: var(--accent-link);
  font-weight: 600;
}
.page-toc-link:hover .page-toc-label,
.page-toc-link.is-active .page-toc-label {
  color: var(--accent-link);
}

/* Honour reduced-motion for the click-scroll: the global smooth scroll-behavior
   would otherwise still animate programmatic jumps. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}