/* ==========================================================================
   Editorial theme — loaded AFTER style.css (see templates/website/base.html).
   Cream paper, serif headings, small-caps labels, black rules, one clay accent.
   Path colours: infra = steel blue, gov = ochre, foundation = sage (equal weight).
   Fonts are self-hosted from static/fonts/ (no third-party requests, see /privacy).
   Files are the Fontsource latin subsets, SIL Open Font License 1.1.
   ========================================================================== */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --paper: #f3eee4;
  --paper-2: #ece5d8;
  --ink: #1a1814;
  --dim: #5e574c;
  --hair: rgba(26, 24, 20, 0.18);
  --rule: #1a1814;
  --accent: #a8452a;
  --accent-ink: #ffffff;
  --infra: #3e6079;
  --gov: #7a5a2e;
  --found: #56664a;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ed-width: 73.75rem; /* 1180px */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14120e; --paper-2: #1c1914; --ink: #ede7da; --dim: #b3aa9a;
    --hair: rgba(237, 231, 218, 0.2); --rule: #ede7da;
    --accent: #e08a66; --accent-ink: #14120e;
    --infra: #8fb0cc; --gov: #d2ae78; --found: #a9b892;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #14120e; --paper-2: #1c1914; --ink: #ede7da; --dim: #b3aa9a;
  --hair: rgba(237, 231, 218, 0.2); --rule: #ede7da;
  --accent: #e08a66; --accent-ink: #14120e;
  --infra: #8fb0cc; --gov: #d2ae78; --found: #a9b892;
  color-scheme: dark;
}

/* ---------- Base (overrides style.css) ---------- */
html, body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
body { font-size: 1rem; line-height: 1.55; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Align every page's content column with the header and footer */
.container-max { max-width: var(--ed-width); }

.ed-wrap { width: 100%; max-width: var(--ed-width); margin: 0 auto; padding: 0 1.5rem; box-sizing: border-box; }

/* Shared typographic atoms */
.ed-label {
  margin: 0;
  font: 700 0.6875rem/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ed-label--accent { color: var(--accent); }
.ed-label--dim { color: var(--dim); }
.ed-label--infra { color: var(--infra); }
.ed-label--gov { color: var(--gov); }
.ed-label--found { color: var(--found); }
.ed-mono { font-family: var(--mono); font-size: 0.8125rem; color: var(--dim); }
.ed-dim { color: var(--dim); }

/* Buttons */
.ed-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1rem; box-sizing: border-box;
  border: 1px solid var(--hair); background: transparent; color: var(--ink);
  font: 700 0.6875rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
}
.ed-btn:hover { border-color: var(--ink); text-decoration: none; }
.ed-btn--outline { border-color: var(--accent); color: var(--accent); }
.ed-btn--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ed-btn--solid:hover { filter: brightness(1.08); border-color: var(--accent); }
.ed-btn[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.ed-btn--icon { width: 2.75rem; padding: 0; }

/* Section heading: small caps over a heavy rule */
.ed-section { padding-bottom: 4.5rem; }
.ed-section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  margin: 0 0 1.5rem; padding-bottom: 0.625rem; border-bottom: 2px solid var(--rule);
}
.ed-section-head--tight { margin-bottom: 0.5rem; }
.ed-section-head .ed-aside { color: var(--dim); font-size: 0.8125rem; }

/* ---------- Header ---------- */
.ed-header { border-bottom: 1px solid var(--hair); background: var(--paper); }
.ed-header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding-top: 0.875rem; padding-bottom: 0.875rem;
}
.ed-logo { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--accent); letter-spacing: -0.01em; }
.ed-logo:hover { text-decoration: none; }
.ed-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ed-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

/* ---------- Footer ---------- */
.ed-footer { border-top: 2px solid var(--rule); margin-top: auto; }
.ed-footer-inner { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.75rem; padding-bottom: 2.5rem; }
.ed-footer p { margin: 0; }
.ed-footer-note { color: var(--dim); font-size: 0.8125rem; max-width: 40rem; }
.ed-footer-links { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; font-size: 0.8125rem; font-weight: 600; list-style: none; margin: 0; padding: 0; }
.ed-footer-sep { color: var(--dim); font-weight: 400; user-select: none; }

/* ---------- Hero ---------- */
.ed-hero { display: flex; flex-wrap: wrap; gap: 3rem; padding: 4rem 0 4.5rem; align-items: stretch; }
.ed-hero-main { flex: 1 1 32rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.ed-hero h1 {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.375rem); line-height: 1.06; letter-spacing: -0.02em;
}
.ed-hero-sub { margin: 0; font-family: var(--serif); font-size: 1.3125rem; line-height: 1.4; font-weight: 500; }
.ed-hero-body { margin: 0; color: var(--dim); max-width: 35rem; }
.ed-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; border-top: 1px solid var(--hair); padding-top: 1rem; margin: 0; list-style: none; padding-left: 0; }
.ed-proof {
  align-self: flex-start; color: var(--found);
  border-bottom: 1px dashed var(--found); padding-bottom: 2px;
}
.ed-proof:hover { text-decoration: none; border-bottom-style: solid; }
.ed-path-buttons { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.ed-path-btn {
  flex: 1 1 13.75rem; min-height: 2.75rem; box-sizing: border-box;
  padding: 0.75rem 0.875rem; border: 1px solid; display: flex; flex-direction: column; gap: 2px;
}
.ed-path-btn:hover { text-decoration: none; background: var(--paper-2); }
.ed-path-btn--infra { border-color: var(--infra); }
.ed-path-btn--gov { border-color: var(--gov); }
.ed-path-btn strong { font: 700 0.75rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.ed-path-btn--infra strong { color: var(--infra); }
.ed-path-btn--gov strong { color: var(--gov); }
.ed-path-btn span { color: var(--dim); font-size: 0.8125rem; }

/* Now box */
.ed-now {
  flex: 1 1 21rem; min-width: 0; max-width: 26.25rem; box-sizing: border-box;
  border: 2px solid var(--rule); padding: 1.625rem 1.625rem 1.375rem;
  display: flex; flex-direction: column; gap: 1.125rem;
}
.ed-now-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.ed-now-item { display: flex; flex-direction: column; gap: 0.375rem; border-top: 3px solid; padding-top: 0.75rem; }
.ed-now-item--infra { border-top-color: var(--infra); }
.ed-now-item--gov { border-top-color: var(--gov); }
.ed-now-focus { margin: 0; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.3; font-weight: 500; }
.ed-now-next { margin: 0; color: var(--dim); font-size: 0.8125rem; }
.ed-now .ed-btn--solid { min-height: 2.875rem; margin-top: auto; } /* button + note sit at the bottom of the stretched box */
.ed-now-foot { margin: 0; color: var(--dim); font-size: 0.75rem; }

/* ---------- Two paths ---------- */
.ed-paths { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.ed-path {
  flex: 1 1 25rem; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--hair); padding: 0 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.ed-path::before { content: ""; display: block; height: 6px; margin: 0 -1.5rem 0.75rem; }
.ed-path--infra::before { background: var(--infra); }
.ed-path--gov::before { background: var(--gov); }
.ed-path h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.875rem; line-height: 1.15; }
.ed-path p { margin: 0; }
.ed-path .ed-label { margin-top: 0.5rem; }
.ed-path .ed-label:first-child { margin-top: 0; }
.ed-path-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-weight: 600; }
.ed-next {
  list-style: none; margin: 0; padding: 0.75rem 1rem;
  border: 1px dashed var(--hair); color: var(--dim); font-size: 0.875rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.ed-foundation {
  margin-top: 1.25rem; border: 2px solid var(--rule); padding: 1.25rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: baseline;
}
.ed-foundation p:last-child { margin: 0; flex: 1 1 32rem; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.4; }

/* ---------- Evidence register ---------- */
.ed-table-scroll { overflow-x: auto; }
.ed-table { width: 100%; min-width: 47.5rem; border-collapse: collapse; font-size: 0.875rem; }
.ed-table th {
  text-align: left; padding: 0.75rem; color: var(--dim);
  font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  border-bottom: 1px solid var(--hair);
}
.ed-table td { padding: 0.875rem 0.75rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.ed-table th:first-child, .ed-table td:first-child { padding-left: 0; }
.ed-table th:last-child, .ed-table td:last-child { padding-right: 0; text-align: right; }
.ed-table .ed-skill { font-weight: 600; white-space: nowrap; }
.ed-table .ed-evidence a { font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.ed-table .ed-evidence a:hover { color: var(--accent); }
.ed-table .ed-kind { color: var(--dim); font: 700 0.6875rem/1.9 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.ed-table .ed-mono { white-space: nowrap; }
.ed-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 0.625rem; vertical-align: baseline; }
.ed-swatch--infra { background: var(--infra); }
.ed-swatch--gov { background: var(--gov); }
.ed-swatch--found { background: var(--found); }
.ed-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin: 0.75rem 0 0; padding: 0; list-style: none; color: var(--dim); font-size: 0.75rem; }
.ed-legend .ed-swatch { margin-right: 0.375rem; }

/* ---------- Lists (posts, credentials) ---------- */
.ed-list { list-style: none; margin: 0; padding: 0; }
.ed-post {
  padding: 1.125rem 0; border-bottom: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-items: baseline; justify-content: space-between;
}
.ed-post-main { flex: 1 1 32rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ed-post h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.375rem; line-height: 1.25; }
.ed-post h3 a { color: var(--ink); }
.ed-post h3 a:hover { color: var(--accent); }

.ed-cred {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--hair); color: var(--ink);
}
a.ed-cred:hover { text-decoration: none; }
a.ed-cred:hover .ed-cred-name { color: var(--accent); }
.ed-cred-name { flex: 1 1 21rem; min-width: 0; font-family: var(--serif); font-size: 1.1875rem; font-weight: 500; }
.ed-cred-issuer { flex: 0 1 13.75rem; color: var(--dim); font-size: 0.875rem; }
.ed-cred-kind { flex: 0 0 8.125rem; }
.ed-cred-date { flex: 0 0 8.5rem; text-align: right; }
.ed-cred-group { margin: 1.5rem 0 0; }
.ed-studying { margin: 1rem 0 0; color: var(--dim); font-size: 0.875rem; }
.ed-studying strong { color: var(--ink); }

/* ---------- Second brain banner ---------- */
.ed-banner {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  border: 1px solid var(--hair); background: var(--paper-2); padding: 1.75rem; color: var(--ink);
}
.ed-banner:hover { text-decoration: none; border-color: var(--ink); }
.ed-banner-main { flex: 1 1 30rem; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.ed-banner-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.75rem; line-height: 1.2; }
.ed-banner p { margin: 0; }

@media (max-width: 40rem) {
  .ed-hero { padding-top: 2.5rem; gap: 2rem; }
  .ed-now { max-width: none; }
  .ed-section { padding-bottom: 3rem; }
}

/* ==========================================================================
   /progress (and the shared "Now" partial): no white panels.
   Cards become hairline frames on the paper; pills become small-caps labels.
   ========================================================================== */
:root { --cat-course: #3e6079; --cat-reading: #56664a; --cat-practice: #8a8174; --cat-review: #a8452a; }
:root[data-theme="dark"] { --cat-course: #8fb0cc; --cat-reading: #a9b892; --cat-practice: #b3aa9a; --cat-review: #e08a66; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cat-course: #8fb0cc; --cat-reading: #a9b892; --cat-practice: #b3aa9a; --cat-review: #e08a66; }
}

/* Page titles shared with /notes */
.note-title { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.note-meta, .progress-intro, .now-updated { color: var(--dim); }
.notes-section-title, .home-section-title {
  font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.progress-link, .now-link { color: var(--accent); }

/* Panels: transparent, square, hairline */
.progress-card, .progress-stat, .now-card {
  background-color: transparent;
  border: 1px solid var(--hair);
  border-radius: 0;
  box-shadow: none;
}
.progress-card-header { border-bottom: 2px solid var(--rule); }
.progress-card-title { font-family: var(--serif); font-weight: 500; color: var(--ink); }
.progress-card-meta, .progress-stat dt, .now-list dt { color: var(--dim); }
.progress-stat dd, .now-list dd { color: var(--ink); }
.progress-stat dd { font-family: var(--serif); font-weight: 500; }

/* Now cards: a path-coloured bar on top instead of a coloured left edge */
.now-card { border-left-width: 1px; border-top-width: 3px; }
.now-card-infra { border-top-color: var(--infra); border-left-color: var(--hair); }
.now-card-gov { border-top-color: var(--gov); border-left-color: var(--hair); }
.now-card-infra .track-kicker { color: var(--infra); }
.now-card-gov .track-kicker { color: var(--gov); }
.track-kicker { font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }

/* Status pills and path chips -> outlined small caps */
.progress-status, .path-chip, .note-badge {
  border-radius: 0; background-color: transparent; border: 1px solid var(--hair); color: var(--dim);
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.625rem;
}
.status-passed, .status-done { border-color: var(--found); color: var(--found); background-color: transparent; }
.status-studying, .status-in-progress { border-color: var(--accent); color: var(--accent); background-color: transparent; }
.path-chip-infra { border-color: var(--infra); color: var(--infra); background-color: transparent; }
.path-chip-gov { border-color: var(--gov); color: var(--gov); background-color: transparent; }
.note-badge-framework { border-color: var(--gov); color: var(--gov); background-color: transparent; }
.note-badge-post { border-color: var(--accent); color: var(--accent); background-color: transparent; }
.note-badge-how-to { border-color: var(--infra); color: var(--infra); background-color: transparent; }

/* Certification timeline */
.cert-track::before { background-color: var(--hair); }
.cert-dot { border-radius: 0; background-color: var(--paper); border-color: var(--dim); }
.cert-path-infra .cert-dot { border-color: var(--infra); }
.cert-path-gov .cert-dot { border-color: var(--gov); }
.cert-path-foundation .cert-dot { border-color: var(--found); }
.cert-passed.cert-path-infra .cert-dot { background-color: var(--infra); }
.cert-passed.cert-path-gov .cert-dot { background-color: var(--gov); }
.cert-passed.cert-path-foundation .cert-dot { background-color: var(--found); }
.cert-studying .cert-dot { box-shadow: 0 0 0 4px var(--paper-2); }
.cert-name { font-family: var(--serif); font-weight: 500; color: var(--ink); }
.cert-planned .cert-name, .cert-when, .cert-meta, .course-state { color: var(--dim); }
.course-item { border-bottom-color: var(--hair); }

/* Study-time chart */
.hours-month, .hours-legend, .hours-note { color: var(--dim); }
.hours-month, .hours-value, .hours-legend-value { font-family: var(--mono); }
.hours-value, .hours-legend-value { color: var(--ink); }
.hours-bar-track { border-radius: 0; background-color: var(--paper-2); }
.hours-bar, .hours-bar:last-child { border-radius: 0; }
.hours-bar + .hours-bar { box-shadow: inset 1px 0 0 var(--paper); }
.hours-course { background-color: var(--cat-course); }
.hours-reading { background-color: var(--cat-reading); }
.hours-practice { background-color: var(--cat-practice); }
.hours-review { background-color: var(--cat-review); }
.hours-swatch { border-radius: 0; }
.review-subjects-title { color: var(--ink); }

.progress-footer { border-top: 2px solid var(--rule); color: var(--dim); }

/* Note and course titles (/progress, /notes): serif, readable in both themes */
.notes-item-link { font-family: var(--serif); font-weight: 500; font-size: 1.125rem; color: var(--ink); }
a.notes-item-link:hover { color: var(--accent); }

/* ==========================================================================
   /notes and single notes: no white panels, prose in the editorial voice.
   ========================================================================== */
:root { --warn: #8a5a0e; --danger: #a3352b; --code-bg: #1f1c17; --code-ink: #ede7da; }
:root[data-theme="dark"] { --warn: #e0b45c; --danger: #ef8a7c; --code-bg: #1c1914; --code-ink: #ede7da; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --warn: #e0b45c; --danger: #ef8a7c; --code-bg: #1c1914; --code-ink: #ede7da; }
}

/* Index: sections become ruled lists on the paper */
.notes-index-intro, .note-breadcrumb, .note-source { color: var(--dim); }
.note-breadcrumb a, .note-source a { color: var(--accent); }
.notes-index .notes-section {
  background-color: transparent; border: none; border-radius: 0; box-shadow: none;
  border-top: 2px solid var(--rule); padding-left: 0; padding-right: 0;
}
.notes-list { border-top-color: var(--hair); }
.notes-item { border-bottom-color: var(--hair); }
.notes-empty { color: var(--dim); }
.note-status { color: var(--warn); }
.note-header { border-bottom: 2px solid var(--rule); }
.note-footer { border-top: 1px solid var(--hair); }

/* Prose */
.prose { font-family: var(--sans); color: var(--ink); }
.prose h2, .prose h3, .prose h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.prose a { color: var(--accent); }
.prose a:hover { color: var(--accent); text-decoration: underline; }
.prose strong { color: var(--ink); }
.prose hr { border-top-color: var(--hair); }
.prose .wikilink-missing { color: var(--dim); border-bottom-color: var(--hair); }
.prose blockquote {
  background-color: transparent; border-radius: 0; border-left: 2px solid var(--rule);
  color: var(--dim); font-family: var(--serif); font-size: 1.0625rem;
}
.prose code { border-radius: 2px; background-color: var(--paper-2); color: var(--ink); font-family: var(--mono); }
.prose pre { border-radius: 0; background-color: var(--code-bg); color: var(--code-ink); border: 1px solid var(--hair); }
.prose pre code { background: none; color: inherit; }
.prose th, .prose td { border-color: var(--hair); }
.prose th {
  background-color: var(--paper-2); color: var(--ink);
  font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.prose img { border-radius: 0; }

/* Table of contents */
.prose .note-toc { background-color: transparent; border: 1px solid var(--hair); border-radius: 0; }
.prose .note-toc-title { font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }

/* Callouts: hairline frame with a type-coloured bar on top, like the "Now" cards */
.prose .callout {
  --callout-accent: var(--infra);
  --callout-bg: var(--paper-2);
  border: 1px solid var(--hair); border-top: 3px solid var(--callout-accent);
  border-radius: 0; background-color: var(--callout-bg); color: var(--ink);
}
.prose .callout-tip, .prose .callout-success, .prose .callout-check, .prose .callout-done { --callout-accent: var(--found); --callout-bg: var(--paper-2); }
.prose .callout-important, .prose .callout-example, .prose .callout-abstract, .prose .callout-summary { --callout-accent: var(--gov); --callout-bg: var(--paper-2); }
.prose .callout-warning, .prose .callout-caution, .prose .callout-attention, .prose .callout-question { --callout-accent: var(--warn); --callout-bg: var(--paper-2); }
.prose .callout-danger, .prose .callout-error, .prose .callout-failure, .prose .callout-bug { --callout-accent: var(--danger); --callout-bg: var(--paper-2); }
.prose .callout-quote, .prose .callout-cite { --callout-accent: var(--dim); --callout-bg: transparent; }
.prose .callout-title, .prose .callout > summary { color: var(--ink); }

/* Review cards */
.prose .review-card {
  --callout-accent: var(--accent);
  --callout-bg: transparent;
  border: 1px solid var(--hair); border-top: 3px solid var(--callout-accent); border-radius: 0;
}
.prose .review-card[open] .callout-body { border-top-color: var(--hair); }
.prose .callout-label, .review-kind .callout-label {
  border-radius: 0; background-color: transparent; border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.625rem;
}

/* ==========================================================================
   Inner pages: shared page header, and /projects
   ========================================================================== */
.ed-page { padding: 3.5rem 0 4.5rem; }
.ed-page-head {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding-bottom: 1.75rem; margin-bottom: 2.5rem; border-bottom: 2px solid var(--rule);
}
.ed-page-head h1 {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink);
}
.ed-page-intro { margin: 0; max-width: 40rem; color: var(--dim); font-size: 1.0625rem; }

.ed-projects { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.ed-project {
  flex: 1 1 26rem; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--hair); padding: 1.5rem 1.5rem 1.375rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.ed-project-num { margin: 0; }
.ed-project-name { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.875rem; line-height: 1.15; color: var(--ink); }
.ed-project-desc { margin: 0 0 0.5rem; color: var(--dim); flex-grow: 1; }
.ed-stack {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0;
  font-family: var(--mono); font-size: 0.8125rem; color: var(--ink);
}
.ed-stack li:not(:last-child)::after { content: "·"; margin: 0 0.5rem; color: var(--dim); }
.ed-project-links {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--hair);
}

/* ==========================================================================
   /homelab
   ========================================================================== */
.ed-page-head code, .ed-post code { font-family: var(--mono); font-size: 0.875em; background: var(--paper-2); padding: 0 0.25em; }
.ed-page-head .ed-facts { margin-top: 0.5rem; }
.ed-post p { margin: 0; }

/* Phases: numbered outlined steps; "next" is dashed because it hasn't happened */
.ed-phases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.ed-phase {
  flex: 1 1 18rem; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--hair); border-top: 3px solid; padding: 1.25rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.ed-phase--done { border-top-color: var(--found); }
.ed-phase--ongoing { border-top-color: var(--accent); }
.ed-phase--next { border-style: dashed; border-top: 3px dashed var(--dim); }
.ed-phase-head { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.ed-phase h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.ed-phase p { margin: 0; }

/* Architecture diagram */
.ed-figure { margin: 0; border: 1px solid var(--hair); padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ed-figure img { display: block; max-width: 100%; height: auto; }
.ed-figure figcaption { font-size: 0.8125rem; }

/* Usage snapshot */
.ed-meters { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.ed-meter {
  flex: 1 1 15rem; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--hair); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem;
}
.ed-meter p { margin: 0; }
.ed-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.ed-meter-val { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; line-height: 1; color: var(--ink); }
.ed-meter-track { height: 6px; background: var(--paper-2); }
.ed-meter-fill { height: 100%; }
.ed-meter-fill--infra { background: var(--infra); }
.ed-meter-fill--gov { background: var(--gov); }
.ed-meter-fill--found { background: var(--found); }

/* Stack facts */
.ed-specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0; border-top: 1px solid var(--hair); }
.ed-specs > div { padding: 0.875rem 1rem 0.875rem 0; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 0.25rem; }
.ed-specs dd { margin: 0; font-family: var(--serif); font-size: 1.1875rem; font-weight: 500; color: var(--ink); }

/* ==========================================================================
   /account and /review: no white panels, square outlined controls, full
   light/dark support.
   ========================================================================== */

/* Shared buttons (/review and /account forms) */
.btn {
  min-height: 2.75rem; padding: 0 1.25rem; box-sizing: border-box;
  border: 1px solid var(--hair); border-radius: 0; box-shadow: none;
  background-color: transparent; color: var(--ink);
  font: 700 0.6875rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  transition: none;
}
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn-primary {
  background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: none;
}
.btn-primary:hover {
  background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  filter: brightness(1.08); text-decoration: none;
}
.link-button {
  color: var(--accent); font: 700 0.6875rem/1.4 var(--sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--accent);
}
.link-button:hover { filter: brightness(1.08); }

/* Accounts (/account/login, /account/set-password) */
.account-page .note-title {
  padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--rule);
}
.account-intro, .account-help { font-family: var(--sans); color: var(--dim); }
.account-intro a, .account-help a, .review-intro a, .review-help a { color: var(--accent); }
.form-label {
  font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); margin-top: 0.75rem;
}
.form-input {
  font-family: var(--sans); font-size: 1rem; padding: 0.65rem 0.8rem;
  border: 1px solid var(--hair); border-radius: 0;
  background-color: var(--paper-2); color: var(--ink);
}
.form-input:focus {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--ink);
}
.form-error {
  border: 1px solid var(--hair); border-top: 3px solid var(--danger); border-radius: 0;
  background-color: var(--paper-2); color: var(--danger);
}

/* Review (/review) */
.review-header {
  padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--rule);
}
.review-header .note-title { margin-bottom: 0.5rem; }
.review-intro { font-family: var(--sans); color: var(--dim); margin: 0; }
.review-logout {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--dim);
  align-items: center; padding-top: 0.35rem;
}
.review-chip {
  padding: 0.4rem 0.75rem; border: 1px solid var(--hair); border-radius: 0;
  background-color: transparent; color: var(--dim);
  font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}
.review-chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.review-chip.is-active {
  border-color: var(--accent); background-color: var(--accent); color: var(--accent-ink);
}

.review-counts { font-family: var(--mono); font-size: 0.8125rem; color: var(--dim); }
.review-counts strong { color: var(--ink); }
.review-saved { color: var(--found); font-weight: 600; }

.review-question-card, .review-empty {
  background-color: transparent; border: 1px solid var(--hair);
  border-top: 3px solid var(--accent); border-radius: 0; box-shadow: none;
}
.review-empty {
  border-top-color: var(--found); font-family: var(--sans); color: var(--dim);
}
.review-empty-title {
  font-family: var(--serif); font-size: 1.375rem; font-weight: 500; color: var(--ink);
  margin: 0 0 0.35rem 0;
}

.review-new {
  padding: 0.05rem 0.45rem; border: 1px solid var(--infra); color: var(--infra);
  font: 700 0.625rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.review-source { color: var(--dim); font-size: 0.8125rem; }
a.review-source { color: var(--accent); }
.review-private {
  border-radius: 0; background-color: transparent; border: 1px solid var(--hair); color: var(--dim);
  font: 700 0.625rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
}

.review-question {
  font-family: var(--serif); font-weight: 500; font-size: 1.5rem;
  line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
}
.review-answer { border-top: 1px solid var(--hair); }
.review-page kbd {
  font-family: var(--mono); border-radius: 0; border-color: currentColor; opacity: 0.75;
}

.review-option {
  font-family: var(--sans); background-color: transparent;
  border: 1px solid var(--hair); border-radius: 0; color: var(--ink);
}
.review-option:hover { border-color: var(--ink); background-color: var(--paper-2); }

.review-option-result {
  font-family: var(--sans); background-color: transparent;
  border: 1px solid var(--hair); border-radius: 0; color: var(--dim);
}
.review-option-result.is-correct {
  border-color: var(--found); border-left: 3px solid var(--found);
  background-color: var(--paper-2); color: var(--ink);
}
.review-option-result.is-chosen:not(.is-correct) {
  border-color: var(--danger); border-left: 3px solid var(--danger);
  background-color: var(--paper-2); color: var(--ink);
}
.review-mark {
  font: 700 0.625rem/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.review-option-result.is-correct .review-mark { color: var(--found); }
.review-option-result.is-chosen:not(.is-correct) .review-mark { color: var(--danger); }

.review-verdict { font-family: var(--serif); font-size: 1.1875rem; font-weight: 500; }
.review-verdict.is-right { color: var(--found); }
.review-verdict.is-wrong { color: var(--danger); }

.review-rate-label {
  font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
.review-rate-btn {
  font: 700 0.6875rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  background-color: transparent; border: 1px solid var(--hair); border-top-width: 3px;
  border-radius: 0; padding: 0.75rem 0.5rem;
}
.review-rate-again { color: var(--danger); border-top-color: var(--danger); }
.review-rate-hard { color: var(--warn); border-top-color: var(--warn); }
.review-rate-good { color: var(--found); border-top-color: var(--found); }
.review-rate-easy { color: var(--infra); border-top-color: var(--infra); }
.review-rate-btn:hover { background-color: var(--paper-2); border-color: currentColor; }

.review-mastery { border-top: 2px solid var(--rule); padding-top: 1.5rem; margin-top: 3rem; }
.review-mastery h2 {
  font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 0.5rem 0;
}
.review-mastery-rule { color: var(--dim); font-size: 0.875rem; }
.mastery-name { font-family: var(--serif); font-weight: 500; font-size: 1.0625rem; color: var(--ink); }
.mastery-kind {
  font: 700 0.625rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); margin-top: 0.15rem;
}
.mastery-bar { border-radius: 0; background-color: var(--paper-2); }
.mastery-fill { border-radius: 0; background-color: var(--accent); }
.mastery-row.is-mastered .mastery-fill { background-color: var(--found); }
.mastery-target { background-color: var(--rule); }
.mastery-figures { font-family: var(--mono); font-size: 0.8125rem; color: var(--dim); }

.review-help {
  font-family: var(--sans); color: var(--dim);
  border-top: 1px solid var(--hair); padding-top: 1.25rem; margin-top: 2.5rem;
}
.review-help summary {
  font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.review-help strong { color: var(--ink); }

/* ==========================================================================
   404 error page (templates/website/404.html)
   ========================================================================== */
.error-section {
  padding: 5rem 0 7rem 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 55vh;
}
.error-card {
  border: 1px solid var(--hair); border-top: 3px solid var(--accent);
  padding: 2.5rem 2.25rem; max-width: 28rem; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
}
.error-code {
  font-family: var(--serif); font-size: 4.5rem; font-weight: 500;
  line-height: 1; letter-spacing: -0.03em; color: var(--ink);
}
.error-card .error-title {
  font-family: var(--serif); font-size: 1.75rem; font-weight: 500;
  line-height: 1.2; color: var(--ink); margin: 0;
}
.error-message {
  color: var(--dim); font-size: 0.95rem; line-height: 1.6; margin: 0 0 0.5rem 0;
}

/* ==========================================================================
   /zettelkasten/graph: paper canvas, square hairline frames, editorial tokens
   ========================================================================== */
.graph-layout { margin: 2.5rem 0 4rem 0; }
.sidebar-panel {
  background-color: transparent; color: var(--ink);
  border: 1px solid var(--hair); border-top: 3px solid var(--rule);
  border-radius: 0; box-shadow: none;
}
.sidebar-title {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink);
}
.sidebar-subtitle { color: var(--dim); font-size: 0.875rem; line-height: 1.5; }
.sidebar-version {
  color: var(--dim); border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: 0.75rem;
}
.sidebar-version-dot { background-color: var(--found); border-radius: 0; }

.search-input {
  background-color: var(--paper-2); color: var(--ink);
  border-radius: 0; border: 1px solid var(--hair);
  font-family: var(--sans); transition: none;
}
.search-input::placeholder { color: var(--dim); }
.search-input:focus {
  border-color: var(--ink); box-shadow: none;
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.search-clear-icon { color: var(--dim); transition: none; }
.search-clear-btn:hover .search-clear-icon { color: var(--ink); }

.sidebar-section-title, .physics-summary, .connections-title {
  font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.tags-container {
  background-color: transparent; border-radius: 0;
  border: 1px solid var(--hair); padding: 0.5rem;
}
.tags-placeholder, .tag-none, .connection-none { color: var(--dim); font-style: normal; }
.tag-pill, .tag-badge {
  border-radius: 0; background-color: transparent;
  border: 1px solid var(--hair); color: var(--dim);
  font: 700 0.625rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; transition: none;
}
.tag-pill:hover { border-color: var(--ink); color: var(--ink); background-color: transparent; }
.tag-pill.active {
  background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}

.node-details-box {
  background-color: var(--paper-2); border-radius: 0;
  border: 1px solid var(--hair); border-top: 2px solid var(--rule);
  transition: none;
}
.node-details-placeholder { color: var(--dim); font-size: 0.8125rem; }
.selected-node-label {
  font: 700 0.625rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.selected-node-title {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--ink);
}
.selected-node-filename {
  font-family: var(--mono); font-size: 0.75rem; color: var(--dim);
}
.selected-node-connections { border-top: 1px solid var(--hair); }
.connection-btn {
  background-color: var(--paper); border: 1px solid var(--hair); color: var(--ink);
  border-radius: 0; font-family: var(--serif); font-size: 0.9375rem; transition: none;
}
.connection-btn:hover { border-color: var(--accent); color: var(--accent); }
.connection-arrow { color: var(--dim); font-family: var(--sans); }

.physics-settings { border-top: 1px solid var(--hair); }
.physics-options { color: var(--dim); }
.range-input { accent-color: var(--accent); }

.graph-container {
  background-color: var(--paper-2); border-radius: 0;
  border: 1px solid var(--hair); border-top: 3px solid var(--rule);
  box-shadow: none;
}
.legend-box {
  background-color: var(--paper); border: 1px solid var(--hair);
  border-radius: 0; color: var(--dim); font-size: 0.75rem;
}
.legend-dot { border-radius: 0; width: 0.625rem; height: 0.625rem; }
.dot-blue { background-color: var(--infra); }
.dot-indigo { background-color: var(--accent); }
.dot-emerald { background-color: var(--found); }
.reset-zoom-btn {
  background-color: transparent; border: 1px solid var(--hair); color: var(--ink);
  border-radius: 0; font: 700 0.625rem/1.4 var(--sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4rem 0.625rem; transition: none;
}
.reset-zoom-btn:hover { border-color: var(--ink); background-color: var(--paper-2); }

.error-overlay { background-color: var(--paper); }
.error-box {
  background-color: var(--paper-2); border: 1px solid var(--hair);
  border-top: 3px solid var(--danger); border-radius: 0; box-shadow: none;
}
.error-icon-wrapper {
  border-radius: 0; background-color: transparent; border: 1px solid var(--danger);
}
.error-icon { color: var(--danger); }
.error-box .error-title {
  font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.error-desc { color: var(--dim); }
.error-hint { color: var(--dim); border-top-color: var(--hair); }
.code-light {
  font-family: var(--mono); color: var(--ink);
  background-color: var(--paper); padding: 0 0.25rem;
}