/* Design tokens. Every colour and font below comes from these. */
:root {
  --bg: #fcfcfb;
  --fg: #1a1a1c;
  --muted: #66646a;
  --rule: #e2e0e2;
  --accent: #a3182b;
  --placeholder-bg: #f0eff0;
  --mark: #f6e6ad;
  --agree-bg: #e3efe4; --agree-fg: #2c6236;
  --disagree-bg: #f8e1e4; --disagree-fg: #a3182b;
  --qualified-bg: #f4ead2; --qualified-fg: #74540a;
  --shadow: 0 10px 30px rgba(30, 20, 25, 0.18);

  --font-display: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --font-label: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;

  --measure: 42rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161416;
    --fg: #ece9ea;
    --muted: #a29da2;
    --rule: #302c30;
    --accent: #e8707f;
    --placeholder-bg: #221f22;
    --mark: #54451a;
    --agree-bg: #1e3222; --agree-fg: #9fd1a8;
    --disagree-bg: #3a1c21; --disagree-fg: #f0a1ab;
    --qualified-bg: #372d16; --qualified-fg: #e3c27a;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
}

.site {
  max-width: calc(var(--measure) + 2rem);
  margin: 0 auto;
  padding-inline: 1rem;
  padding-block: 2rem 3rem;
  display: grid;
  gap: 3rem;
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; text-wrap: balance; }
h1 { font-size: 2.25rem; font-weight: 500; margin: 0; }
/* Section headings are set in the accent red, like the rubrics in a printed confession. Sentence case only. */
h2 { font-size: 1.125rem; font-weight: 700; color: var(--accent); margin: 0; }

img { max-width: 100%; height: auto; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--bg); padding: 0.5rem; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}
.site-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--fg); text-decoration: none; }
.site-header ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-family: var(--font-label); font-size: 1rem; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.3em; }
.menu { position: relative; }
.menu summary { color: var(--muted); cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; width: 0.35em; height: 0.35em; margin-left: 0.4em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-0.2em) rotate(45deg); }
.menu[open] summary::after { transform: translateY(0) rotate(-135deg); }
.menu summary.is-current { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.3em; }
.menu summary:hover, .site-header nav a:hover { color: var(--fg); }
.site-header .menu ul { position: absolute; z-index: 10; top: calc(100% + 0.4rem); left: -0.75rem; display: grid; gap: 0.1rem; min-width: 11rem; padding: 0.4rem 0; background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.08); }
.site-header .menu li a { display: block; padding: 0.3rem 0.75rem; }
.site-header .menu li:last-child { border-top: 1px solid var(--rule); margin-top: 0.25rem; padding-top: 0.25rem; }

main { display: grid; gap: 3rem; }
.intro { display: grid; gap: 0.75rem; }

.site-footer {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.site-footer a { color: var(--accent); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }

/* Footer pages */
.lede { margin: 0; color: var(--muted); }
.feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.feed-list code { display: block; font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.changelog-day h2 { font-size: 1.125rem; margin: 0 0 0.25rem; }
.changelog-day ul { margin: 0; padding-left: 1.25rem; }
.commit { font-family: ui-monospace, monospace; font-size: 0.75rem; color: var(--muted); }

/* Marks text that is still to be written. Remove the element once real text replaces it. */
.placeholder, .placeholder-inline {
  background: var(--placeholder-bg);
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 400;
}
.placeholder { margin: 0; padding: 0.6rem 0.75rem; border-radius: 4px; }
.placeholder-inline { padding: 0.1em 0.4em; border-radius: 3px; }

/* Writing */
.home-section, .page { display: grid; gap: 1rem; }
.page > h1, .post-header h1 { font-size: 2rem; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { display: grid; gap: 0.15rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.post-list li:first-child { border-top: 1px solid var(--rule); }
.post-title { color: var(--fg); text-decoration: none; font-weight: 500; font-size: 1.125rem; }
.post-title:hover { color: var(--accent); }

.post-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; font-family: var(--font-label); font-size: 0.9375rem; color: var(--muted); }
.post-meta .level { color: var(--muted); text-decoration: none; border: 1px solid var(--rule); border-radius: 2px; padding: 0 0.4em; }
.post-meta .level:hover { text-decoration: underline; }
.post-meta .draft { color: var(--accent); font-weight: 700; }

.filters { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-family: var(--font-label); }
.filters a { color: var(--muted); text-decoration: none; }
.filters a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.3em; }

.empty { color: var(--muted); margin: 0; }
.more, .subscribe { margin: 0; font-family: var(--font-label); }

.post { display: grid; gap: 1.5rem; }
.post-header { display: grid; gap: 0.5rem; }
.post-body > :first-child { margin-top: 0; }
.post-body h2 { margin-top: 2rem; }
.post-body blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--rule); color: var(--muted); }
.post-body pre { overflow-x: auto; padding: 1rem; background: var(--placeholder-bg); border-radius: 4px; }
.post-tags { margin: 0; font-family: var(--font-label); color: var(--muted); }

.series { border-left: 3px solid var(--accent); padding-left: 1rem; font-family: var(--font-label); }
.series p { margin: 0 0 0.25rem; }
.series ol { margin: 0; padding-left: 1.25rem; }

.post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-family: var(--font-label); }


.levels { margin: 0; display: grid; gap: 1rem; }
.levels dt { font-weight: 700; color: var(--accent); }
.levels dd { margin: 0.25rem 0 0; }

/* Projects */
.project-group { display: grid; gap: 0.75rem; }
.project-group + .project-group { margin-top: 1.5rem; }
.project-list { list-style: none; margin: 0; padding: 0; }
.project-list li { display: grid; gap: 0.15rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.project-list li:first-child { border-top: 1px solid var(--rule); }
.summary { color: var(--muted); margin: 0; }
.status { font-family: var(--font-label); border-radius: 2px; padding: 0 0.45em; border: 1px solid var(--rule); }
.status-active { color: var(--accent); border-color: var(--accent); }
.project-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-family: var(--font-label); }
.post-meta .proj { color: var(--fg); text-decoration: none; }
.post-meta .proj:hover { text-decoration: underline; }

/* Annotations. Expanded shows each figure in the text; Compact (html[data-annotations="compact"])
   hides the figures and opens them as popups from the highlighted phrase or a small button. */
mark, .anno-phrase { background: var(--mark); color: inherit; padding: 0 0.1em; border-radius: 2px; }
figure.annotation { margin: 0.5rem 0 1.5rem; display: grid; gap: 0.5rem; }
figure.annotation blockquote, .anno-pop blockquote, blockquote.passage { margin: 0; padding-left: 1rem; border-left: 3px solid var(--rule); }
figure.annotation blockquote p, .anno-pop blockquote p, blockquote.passage p { margin: 0 0 0.5rem; }
figure.annotation blockquote p:last-child, .anno-pop blockquote p:last-child, blockquote.passage p:last-child { margin: 0; }
figure.annotation figcaption { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; font-family: var(--font-label); font-size: 0.875rem; color: var(--muted); }
.anno-note { padding-left: 1rem; }
.anno-note p { margin: 0 0 0.5rem; }
.anno-note p:last-child { margin: 0; }

.stance { display: inline-block; font-family: var(--font-label); font-size: 0.8125rem; font-weight: 500; padding: 0.05em 0.6em; border-radius: 999px; background: var(--placeholder-bg); color: var(--muted); }
.stance-agree { background: var(--agree-bg); color: var(--agree-fg); }
.stance-disagree { background: var(--disagree-bg); color: var(--disagree-fg); }
.stance-qualified { background: var(--qualified-bg); color: var(--qualified-fg); }

.anno-toggle:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-family: var(--font-label); font-size: 0.875rem; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.seg button { font: inherit; color: var(--fg); background: transparent; border: 0; padding: 0.2rem 0.7rem; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.anno-chip { display: none; }
html[data-annotations="compact"] figure.annotation { display: none; }
html[data-annotations="compact"] .anno-phrase { cursor: pointer; border-bottom: 1px dashed var(--accent); }
html[data-annotations="compact"] .anno-phrase:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-annotations="compact"] .anno-chip { display: inline-block; margin: 0 0 1rem; font: inherit; font-family: var(--font-label); font-size: 0.875rem; color: var(--accent); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 0.15rem 0.7rem; cursor: pointer; }

.anno-pop { margin: auto; inset: 0; width: min(34rem, calc(100vw - 32px)); max-height: min(80vh, 40rem); overflow: auto; background: var(--bg); color: var(--fg); border: 1px solid var(--rule); border-radius: 10px; padding: 1.25rem; box-shadow: var(--shadow); }
.anno-pop:popover-open { display: grid; gap: 0.75rem; justify-items: start; }
.anno-pop::backdrop { background: rgba(10, 8, 10, 0.35); }
.anno-pop > blockquote, .anno-pop > .anno-note { justify-self: stretch; }
.anno-pop-top { justify-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--font-label); font-size: 0.875rem; }
.anno-close { font: inherit; color: var(--accent); background: transparent; border: 1px solid var(--rule); border-radius: 6px; padding: 0.2rem 0.6rem; cursor: pointer; }

.anno-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.anno-entries li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.anno-entries time, .anno-entries q, .muted { color: var(--muted); font-size: 0.9375rem; }
.anno-entries q { flex-basis: 100%; }

/* Search (Pagefind UI), themed with the site tokens. */
.search {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--fg);
  --pagefind-ui-background: var(--bg);
  --pagefind-ui-border: var(--rule);
  --pagefind-ui-tag: var(--placeholder-bg);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 6px;
  --pagefind-ui-font: var(--font-body);
}
.search mark { background: var(--mark); color: inherit; }
.search .pagefind-ui__search-clear { color: var(--accent); background: var(--bg); }

/* Figures, notes and bibliography */
.post-body figure.figure { margin: 1.5rem 0; display: grid; gap: 0.5rem; }
.post-body figure.figure img { display: block; border-radius: 2px; }
.post-body figure.figure figcaption { font-family: var(--font-label); font-size: 0.9375rem; color: var(--muted); }
.footnote-ref { font-family: var(--font-label); font-size: 0.75em; line-height: 0; }
.footnote-ref a { text-decoration: none; padding: 0 0.1em; }
.footnotes, .bibliography { display: grid; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
.footnotes-list { margin: 0; padding-left: 1.5rem; display: grid; gap: 0.4rem; }
.footnotes-list p { margin: 0; }
.footnote-backref { text-decoration: none; font-family: var(--font-label); }
.footnote-item:target, .footnote-ref:target { background: var(--mark); border-radius: 2px; }
.bibliography .csl-entry { padding-left: 1.5rem; text-indent: -1.5rem; }
.footnotes + .bibliography { margin-top: 1rem; }

/* Cross-links: preview card and reading overlay */
.backlinks { display: grid; gap: 0.5rem; font-family: var(--font-label); }
.backlinks ul { margin: 0; padding-left: 1.25rem; }
::highlight(xref-target) { background-color: var(--mark); color: inherit; }
.xref-preview {
  position: fixed; inset: auto; margin: 0; width: min(24rem, calc(100vw - 32px));
  display: grid; gap: 0.5rem; padding: 1rem; overflow: auto; max-height: min(60vh, 26rem);
  background: var(--bg); color: var(--fg); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow);
}
.xref-preview:popover-open, .xref-preview:not([popover]):not([hidden]) { display: grid; }
.xref-preview[popover]:not(:popover-open) { display: none; }
.xref-title { margin: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.xref-preview .post-meta { font-size: 0.8125rem; }
.xref-excerpt { font-size: 0.9375rem; }
.xref-excerpt > * { margin: 0; }
.xref-actions { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-family: var(--font-label); }
.xref-actions button {
  font: inherit; font-weight: 500; color: var(--bg); background: var(--accent);
  border: 0; border-radius: 6px; padding: 0.3rem 0.8rem; cursor: pointer;
}
html.reader-open { overflow: hidden; }
.reader {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--fg);
}
.reader[open] { display: grid; grid-template-rows: auto 1fr; }
.reader::backdrop { background: var(--bg); }
.reader-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding: 0.6rem 16px;
  border-bottom: 1px solid var(--rule); font-family: var(--font-label); font-size: 0.9375rem;
}
.reader-back { font: inherit; font-weight: 500; color: var(--accent); background: none; border: 0; padding: 0.2rem 0; cursor: pointer; text-align: left; }
.reader-trail { flex: 1; display: flex; flex-wrap: wrap; gap: 0 0.4rem; list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: 0.875rem; min-width: 0; }
.reader-trail li + li::before { content: "›"; margin-right: 0.4rem; }
.reader-trail [aria-current] { color: var(--fg); }
.reader-scroll { overflow: auto; overscroll-behavior: contain; }
.reader-page { max-width: var(--measure); margin: 0 auto; padding: 2rem 16px 4rem; }
.reader-page h1:focus { outline: none; }
.reader figure.annotation { display: grid !important; }
.reader .anno-chip { display: none !important; }
.reader-flash { background: var(--mark); transition: background 1s; }
.reader-open { margin-left: auto; }
@media (max-width: 34rem) {
  .reader-trail { display: none; }
}

/* Tables */
.post-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9375rem; display: block; overflow-x: auto; }
.post-body th, .post-body td { border: 1px solid var(--rule); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.post-body th { font-family: var(--font-label); font-weight: 500; background: var(--placeholder-bg); }
.post-body th p, .post-body td p { margin: 0; }
.post-body sup, .post-body sub { line-height: 0; }

/* Writing grouped by research level */
.level-group { margin-top: 2rem; }
.level-group h2 { margin-bottom: 0.5rem; }
.level-group h2 a { color: inherit; text-decoration: none; }
.level-group h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.count { color: var(--muted); font-family: var(--font-label); font-size: 0.875rem; font-weight: 400; }
.level-intro { color: var(--muted); }
.post-meta .since { color: var(--muted); }

/* Nested tags */
.tag-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.tag-tree .tag-tree { margin: 0.35rem 0 0.25rem 1.25rem; padding-left: 0.75rem; border-left: 1px solid var(--rule); }
.tag-family { margin-bottom: 1rem; }

/* Graph */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.graph { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.graph[hidden] { display: none; }
.graph-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-family: var(--font-label); font-size: 0.9375rem; }
.graph-filters { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; border: 0; margin: 0; padding: 0; }
.graph-filters label, .graph-key-static { display: inline-flex; align-items: center; gap: 0.35rem; }
.graph-key { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.key-post { background: var(--accent); }
.key-project { background: var(--fg); }
.key-tag { background: var(--muted); }
.key-passage { background: var(--qualified-fg); }
.key-note { background: var(--agree-fg); }
.key-commentary { background: var(--bg); outline: 2px solid var(--accent); outline-offset: -2px; }
.key-source { background: var(--rule); outline: 1px solid var(--muted); outline-offset: -1px; }
.key-visual { background: var(--disagree-fg); box-shadow: inset 0 0 0 2px var(--bg); outline: 1.5px solid var(--disagree-fg); }
.graph-hint { color: var(--muted); }
.graph-reset { margin-left: auto; font: inherit; color: var(--accent); background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 0.2rem 0.6rem; cursor: pointer; }
/* The graph uses the full width of the window, not just the text column. */
.graph-frame { width: min(100vw - 2rem, 72rem); margin-left: 50%; transform: translateX(-50%); }
.graph-canvas {
  display: block; width: 100%; height: min(75vh, 44rem); border: 1px solid var(--rule); border-radius: 8px;
  touch-action: none; cursor: grab; user-select: none; background: var(--bg);
}
.graph-canvas.is-panning { cursor: grabbing; }
.graph-link { stroke: var(--rule); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.graph-link.link-xref { stroke: var(--accent); stroke-opacity: 0.45; }
.graph-link.link-visual { stroke: var(--disagree-fg); stroke-opacity: 0.5; stroke-dasharray: 4 3; }
.graph-node circle { stroke: var(--bg); stroke-width: 1.5; }
.node-post circle { fill: var(--accent); }
.node-project circle { fill: var(--fg); }
.node-tag circle { fill: var(--muted); }
.node-passage circle { fill: var(--qualified-fg); }
.node-note circle { fill: var(--agree-fg); }
.node-commentary circle { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; }
.node-source circle { fill: var(--rule); stroke: var(--muted); }
.graph-link.link-source { stroke: var(--accent); stroke-opacity: 0.35; }
.node-visual circle { fill: var(--bg); stroke: var(--disagree-fg); stroke-width: 2.5; }
.graph-node text { font-family: var(--font-label); font-size: calc(13px / var(--zoom, 1)); fill: var(--fg); paint-order: stroke; stroke: var(--bg); stroke-width: calc(3px / var(--zoom, 1)); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.graph-node.is-hub text, .is-zoomed .graph-node text, .graph-node.is-active text, .graph-node.is-near text { opacity: 1; }
.graph-node { cursor: pointer; outline: none; }
.graph-node:focus-visible circle { stroke: var(--fg); stroke-width: 3; }
.has-active .graph-node:not(.is-active, .is-near) { opacity: 0.2; }
.has-active .graph-node:not(.is-active, .is-near) text { opacity: 0; }
.has-active .graph-link:not(.is-near) { opacity: 0.15; }
.graph-link.is-near { stroke-width: 2; }
.graph-focus { min-height: 1.5em; margin: 0; font-family: var(--font-label); color: var(--muted); }
.graph-list { margin-top: 1rem; }
.graph-list summary { cursor: pointer; font-family: var(--font-label); color: var(--accent); }
.graph-list h2 { font-size: 1.125rem; }
@media (prefers-reduced-motion: reduce) { .graph-node text { transition: none; } }

/* Notes */
.note-list { list-style: none; margin: 0; padding: 0; }
.note-list li { display: grid; gap: 0.2rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.note-list li:first-child { border-top: 1px solid var(--rule); }
.note-list .note-line { color: var(--fg); text-decoration: none; font-size: 1.125rem; }
.note-list .note-line:hover { color: var(--accent); }
.note-list .is-quote .note-line::before { content: "“"; }
.note-list .is-quote .note-line::after { content: "”"; }
.note-credit { margin: 0; color: var(--muted); }
.note-credit::before { content: "— "; }
.note-credit cite { font-style: italic; }
.note-meta { font-family: var(--font-label); font-size: 0.875rem; color: var(--muted); }
.note-meta a { color: var(--accent); text-decoration: none; }
.note-meta .draft { color: var(--accent); font-weight: 700; }
.note-kicker { font-family: var(--font-label); color: var(--muted); margin: 0; }
.note-kicker a { color: var(--accent); text-decoration: none; }
.note-page .note-line { font-size: 1.75rem; line-height: 1.3; margin: 0; }
.note-page .note-credit { font-size: 1.0625rem; }
.note-header { display: grid; gap: 0.35rem; }

/* Visuals: a sandboxed frame, or a poster with a Run button until the reader starts it. */
figure.visual { margin: 1.75rem 0; display: grid; gap: 0.5rem; }
.visual-stage, .visual-frame {
  display: block; width: 100%; border: 1px solid var(--rule); border-radius: 6px; background: var(--placeholder-bg);
}
.visual-stage { position: relative; overflow: hidden; display: grid; place-items: center; }
.visual-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visual-run {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.2rem 0.55rem 1rem;
  border-radius: 999px; background: var(--accent); color: var(--bg); font-family: var(--font-label); font-weight: 500;
  text-decoration: none; box-shadow: var(--shadow);
}
.visual-run::before { content: ""; width: 0; height: 0; border-left: 0.7em solid currentColor; border-top: 0.42em solid transparent; border-bottom: 0.42em solid transparent; }
.visual-run:hover { filter: brightness(1.08); }
.visual-run:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.visual-frame { height: auto; background: var(--bg); }
.visual-frame.is-sized { aspect-ratio: auto !important; }
figure.visual figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; font-family: var(--font-label); font-size: 0.9375rem; color: var(--muted); }
.visual-caption { flex: 1 1 18rem; min-width: 0; }
.visual-links { display: flex; gap: 1rem; }
.visual-description { flex-basis: 100%; }
.visual-description summary { cursor: pointer; width: fit-content; }
.visual-description p { margin: 0.35rem 0 0; color: var(--fg); }
.visual-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem 1.25rem; }
.visual-list li { display: grid; gap: 0.25rem; align-content: start; }
.visual-thumb { display: block; aspect-ratio: 16 / 10; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--placeholder-bg); margin-bottom: 0.25rem; }
.visual-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Commentary */
.commentary-list { list-style: none; margin: 0; padding: 0; }
.commentary-list li { display: grid; gap: 0.15rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.commentary-list li:first-child { border-top: 1px solid var(--rule); }
.commentary-on { color: var(--muted); }
.commentary-on cite { font-style: italic; }
.source-card { display: grid; gap: 0.35rem; margin: 1.5rem 0; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 4px; }
.source-card p { margin: 0; }
.source-title { font-size: 1.125rem; font-weight: 500; }
.source-title a { color: var(--fg); text-decoration-color: var(--accent); }
.source-type { font-family: var(--font-label); font-size: 0.875rem; font-weight: 400; color: var(--accent); margin-right: 0.35rem; }
.source-meta, .source-archive { font-family: var(--font-label); font-size: 0.9375rem; color: var(--muted); }
.source-archive a { color: var(--muted); }
.source-text { margin: 0 0 0.25rem; font-size: 1.0625rem; }
.source-text p { margin: 0 0 0.5rem; }
.source-text p:last-child { margin: 0; }
.excerpt, .moment { margin: 1.5rem 0; display: grid; gap: 0.4rem; }
.post-body .excerpt blockquote, .post-body .moment blockquote, .source-card .source-text { margin: 0; padding: 0.1rem 0 0.1rem 1rem; border-left: 3px solid var(--mark); color: var(--fg); }
.excerpt blockquote p, .moment blockquote p { margin: 0 0 0.6rem; }
.excerpt blockquote p:last-child, .moment blockquote p:last-child { margin: 0; }
.excerpt figcaption, .moment figcaption { font-family: var(--font-label); font-size: 0.875rem; padding-left: 1rem; }
.excerpt figcaption a, .moment-time { color: var(--muted); }
.moment-time { font-variant-numeric: tabular-nums; }
.player { position: relative; aspect-ratio: 16 / 9; background: var(--placeholder-bg); border-radius: 4px; overflow: hidden; }
.player-still { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 0.1rem;
  padding: 0.6rem 1.2rem; font: inherit; font-weight: 700; color: #fff; background: rgb(20 18 20 / 0.82); border: 0; border-radius: 6px; cursor: pointer;
}
.player-play:hover, .player-play:focus-visible { background: var(--accent); }
.player-site { font-family: var(--font-label); font-size: 0.8125rem; font-weight: 400; opacity: 0.85; }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.source-card .player { margin-bottom: 0.4rem; }
.commentary-browse { font-family: var(--font-label); font-size: 0.9375rem; color: var(--muted); margin-top: 1.5rem; }
.commentary-browse p { margin: 0.25rem 0; }
.source-meta a { color: inherit; }
.source-check { font-family: var(--font-label); font-size: 0.9375rem; margin: 0.25rem 0 0; }