/* ══════════════════════════════════════════════════════════════════════════
   NOTE PAGE (v2) — the reading room
   ──────────────────────────────────────────────────────────────────────────
   Loaded by every generated /notes/*.html page after fractionalkyle.css,
   site.css and notes.css. notes.css is still needed for the nav, footer,
   graph card (.kgv-*), connections list (.sb-*) and modals; everything about
   the article itself lives here.

   System: two fonts — JetBrains Mono (structure, chrome) + Literata (reading).
   Mono never appears in a running heading. The reading surface is
   --reading-paper (brand token), a green-undertoned grey.

   Two layouts, chosen by publish.js per note:
     body.note-v2            title layout  — the note name is the page title,
                                            body headings are section heads.
     body.note-v2.layout-blog blog layout   — no page title; the body's own
                                            h1 / h2 / h3 carry the page.
   ══════════════════════════════════════════════════════════════════════════ */

html, body.note-v2{ background:var(--reading-paper); }
body.note-v2{ color:var(--text); font-family:var(--serif); line-height:1.7; font-variation-settings:'opsz' 16; font-weight:400; letter-spacing:0; }

/* ── Layout: article left, rail right ───────────────────────────────────── */
.np-layout{ max-width:1180px; margin:0 auto; padding:56px 48px 0; display:grid; grid-template-columns:minmax(0,720px) 300px; gap:80px; justify-content:center; }
.np-main{ min-width:0; }
/* Sticky offset = nav height (2 lines + 1px border) + the layout's 56px top padding, so the rail pins exactly where it starts and never slides under the nav. */
.np-rail{ position:sticky; top:calc(var(--line) * 2 + 1px + 56px); align-self:start; display:flex; flex-direction:column; gap:28px; }
.np-rail-heading{ font-family:var(--type); font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--g-600); margin-bottom:8px; }
.np-rail .sb-link{ font-family:var(--serif); font-size:.95rem; white-space:normal; align-items:baseline; line-height:1.4; }
.np-rail .sb-link .sb-dot{ position:relative; top:-1px; }
.np-rail .sb-sub-heading{ margin-top:10px; }
.np-rail .kgv-note .kgv-canvas{ height:240px; }

/* Stems-from trail: a stacked descent, topic map on top, this note at the bottom.
   Each level indents one step; long titles wrap within their own line. */
.np-trail{ margin:2px 0 10px; }
.np-trail-step{ position:relative; padding:2px 0 2px calc(var(--lvl) * 14px + 16px); font-family:var(--serif); font-size:.95rem; line-height:1.45; color:var(--ink-700); }
.np-trail-step::before{ content:"↳"; position:absolute; left:calc(var(--lvl) * 14px); top:2px; font-family:var(--type); font-size:.7rem; color:var(--ink-300); }
.np-trail-step.is-topic::before{ content:"⌂"; color:var(--lime-deep); }
.np-trail-step a{ color:var(--ink-700); }
.np-trail-step a:hover{ color:var(--lime-deep); }
.np-trail-step.is-topic a{ color:var(--lime-deep); font-weight:500; }
.np-trail-step.is-draft span{ color:var(--ink-500); cursor:pointer; }
.np-trail-step.is-self span{ color:var(--ink); font-weight:600; }
.np-trail-step.is-self::before{ color:var(--lime-deep); }

/* Rail meta: note type + date, mono, quiet */
.np-meta{ margin-top:-14px; font-family:var(--type); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); display:flex; flex-wrap:wrap; gap:6px 14px; }
.np-meta .np-type{ color:var(--lime-deep); font-weight:600; }

/* ── Title layout ───────────────────────────────────────────────────────── */
h1.np-title{ font-family:var(--serif); font-variation-settings:'opsz' 72; font-weight:700; font-size:2.5rem; letter-spacing:-.015em; line-height:1.12; color:#141816; margin:0 0 .6em; }

/* ── Article typography ─────────────────────────────────────────────────── */
.article{ font-family:var(--serif); font-variation-settings:'opsz' 16; font-size:1.18rem; line-height:1.7; color:var(--text); }
.article p{ margin:0 0 1.3em; }
.article p:has(+ ul), .article p:has(+ ol){ margin-bottom:.5em; }
.article em{ font-variation-settings:'opsz' 24; }
.article strong{ font-weight:600; }

/* Headings: one voice (Literata bold, near-black), sized by level. */
.article .section-h{ font-family:var(--serif); font-variation-settings:'opsz' 36; font-weight:700; font-size:1.5rem; letter-spacing:-.01em; line-height:1.25; color:#141816; margin:2.2em 0 .6em; }
.article .section-h.h-2{ font-size:1.3rem; }
.article .section-h.h-3{ font-size:1.12rem; margin-top:1.8em; }
.article .section-h + .section-h{ margin-top:.4em; }
.article .divider:first-child{ display:none; }
.article :is(.section-h:first-child, .divider:first-child + .section-h){ margin-top:0; }

/* Blog layout: h1 = title, h2 = deck, h3 = section. */
.layout-blog .article .section-h.h-1{ font-variation-settings:'opsz' 72; font-size:2.5rem; letter-spacing:-.015em; line-height:1.12; margin:1.2em 0 .35em; }
.layout-blog .article .section-h.h-1:first-child, .layout-blog .article .divider:first-child + .section-h.h-1{ margin-top:.4em; }
.layout-blog .article .section-h.h-2{ font-variation-settings:'opsz' 48; font-weight:400; font-size:1.45rem; letter-spacing:0; line-height:1.3; color:#2C3230; margin:0 0 1.2em; }
.layout-blog .article .section-h.h-1 + .section-h.h-2{ margin-top:0; }
.layout-blog .article .section-h.h-3, .layout-blog .article .section-h.is-tldr{ font-size:1.3rem; font-weight:700; margin-top:2.2em; }
.layout-blog .article .divider + .section-h.h-3{ margin-top:0; }

/* TLDR: the opening summary reads as an upright lead paragraph. */
.article .section-h.is-tldr + p{ font-size:1.3rem; line-height:1.55; color:#2C3230; padding-bottom:1.4em; margin-bottom:2.2em; border-bottom:1px solid var(--rule-soft); }
.article .section-h.is-tldr + p em{ font-style:normal; font-variation-settings:'opsz' 24; font-weight:500; }

.article .divider{ height:1px; border-top:1px solid var(--rule-soft); margin:2.4em 0; }

.article ol, .article ul{ margin:0 0 1.3em; padding-left:1.5em; }
.article li{ margin:0 0 .5em; padding-left:.15em; }
.article li::marker{ font-family:var(--type); font-size:.8em; color:var(--lime-deep); font-weight:600; }
.article img{ display:block; max-width:100%; height:auto; margin:2em auto; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08); background:#fff; }
.article .video-embed{ display:block; width:100%; aspect-ratio:16/9; margin:2em auto; border-radius:6px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08); }
.article .video-embed iframe{ display:block; width:100%; height:100%; border:0; }
.article code{ font-family:var(--type); font-size:.85em; background:#E4E5E1; padding:2px 6px; border-radius:4px; }
.article pre{ background:#E4E5E1; padding:16px; border-radius:8px; overflow-x:auto; margin:0 0 1.3em; font-family:var(--type); font-size:.9rem; }
.article pre code{ background:none; padding:0; }
.article table{ border-collapse:collapse; margin:0 0 1.3em; font-size:1rem; }
.article th, .article td{ text-align:left; padding:6px 12px; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
.article th{ font-family:var(--type); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); }

/* ── Links — the brand's two-state grammar (index-card glyph + dotted rule) ─ */
.article a.link{ font-family:var(--serif); font-weight:500; text-decoration:none; }
.article a.link::before{ content:""; display:inline-block; width:.85em; height:.85em; margin-right:.28em; vertical-align:-.08em; background:currentColor; -webkit-mask:var(--ico-card) center/contain no-repeat; mask:var(--ico-card) center/contain no-repeat; }
.article a.link .lt{ text-decoration:underline; text-decoration-style:dotted; text-decoration-thickness:1.5px; text-underline-offset:4px; text-decoration-color:var(--ink-300); }
.article a.link.is-published{ color:var(--lime-deep); }
.article a.link.is-draft{ color:var(--ink-700); cursor:pointer; }
.article a.link.is-published:hover .lt{ text-decoration-color:var(--lime-deep); }
.article a.book-link{ color:var(--lime-deep); font-weight:500; border-bottom:1.5px solid rgba(98,153,43,.35); cursor:pointer; }
.article a.book-link:hover{ color:var(--g-700); border-bottom-color:var(--g-700); }
.article a[data-coming-soon]{ cursor:pointer; }
.article a:not(.link):not(.book-link){ color:var(--lime-deep); border-bottom:1.5px solid rgba(98,153,43,.35); }

/* ── Stems From — structural list, mono label, quiet ─────────────────────── */
.article .stems{ margin:0 0 2em; padding-left:14px; border-left:2px solid var(--g-300); font-size:1rem; }
.article .stems .lbl{ font-family:var(--type); font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--g-600); margin-bottom:4px; }
.article .stems a{ display:block; color:var(--lime-deep); font-weight:500; line-height:1.5; padding:2px 0; border:0; overflow-wrap:anywhere; }
.article .stems a::before{ content:"↑ "; color:var(--g-400); }
.article .stems a[data-coming-soon]{ color:var(--ink-700); }

/* ── References — works cited, not words quoted ──────────────────────────
   An excerpt is someone else's words, inline, on the page's one vertical
   rule. References is the bibliography that closes the note: a top rule,
   one row per source — cover, title, author, pages quoted — built from the
   [!references] callout plus every book the excerpts cite (lib/references.js). */
.article .refs{ margin:3.2em 0 0; padding:1.1em 0 0; border:0; border-top:1px solid var(--g-300); font-size:1rem; }
.article .refs .lbl{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--type); font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--g-600); margin-bottom:.5em; }
.article .refs .lbl .n{ font-weight:400; letter-spacing:.06em; text-transform:none; color:var(--ink-500); }
.article .divider + .refs{ margin-top:1.4em; }
.article .refs ol{ list-style:none; margin:0; padding:0; }
.article .refs ol li.ref{ display:grid; grid-template-columns:36px minmax(0,1fr) auto; column-gap:14px; align-items:center; margin:0; padding:.55em 0; line-height:1.4; border-bottom:1px dotted var(--ink-300); }
.article .refs ol li.ref::before, .article .refs ol li.ref::marker{ content:none; }
.article .refs .ref a.t, .article .refs .ref a.book-link{ border:0; color:var(--text); }
.article .refs .ref:last-child{ border-bottom:0; }
.article .refs .cvl{ display:block; border:0; line-height:0; }
.article .refs .cv{ display:block; margin:0; width:36px; height:54px; object-fit:cover; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); background:var(--g-300); }
.article .refs .gl{ display:grid; place-items:center; width:36px; height:54px; border-radius:2px; background:rgba(11,41,25,.05); font-family:var(--type); font-size:.9rem; color:var(--g-600); }
.article .refs .rb{ min-width:0; }
.article .refs .t{ display:inline; font-family:var(--serif); font-size:1rem; font-weight:500; line-height:1.35; color:var(--text); border:0; text-decoration:none; overflow-wrap:anywhere; }
.article .refs a.t:hover{ color:var(--lime-deep); }
.article .refs a::before{ content:none; }
.article .refs .by{ display:block; margin-top:2px; font-family:var(--serif); font-size:.85rem; line-height:1.4; color:var(--ink-500); }
.article .refs .pp{ font-family:var(--type); font-size:.66rem; letter-spacing:.08em; color:var(--ink-500); white-space:nowrap; align-self:center; }
/* A placeholder that never went through buildReferences still reads as a plain list. */
.article .refs[data-refs] .ri{ display:block; padding:2px 0; }
.article .refs[data-refs] .ri a{ color:var(--lime-deep); font-weight:500; border:0; }
.article .refs[data-refs]:has(> .lbl:only-child){ display:none; }

/* ── Quiet quote grammar ─────────────────────────────────────────────────
   ASIDE (blockquote) = Kyle's own voice. Indented body text, a touch smaller.
   No rule, no box, no label.
   SOURCE (.q-source, book excerpts) = someone else's words. The ONE vertical
   rule on the page, plus an attribution line. No label.
   A source that follows an aside indents one step deeper.               */
.article blockquote{ margin:1.6em 0 1.6em 2em; padding:0; background:none; border:0; border-radius:0; font-family:var(--serif); font-variation-settings:'opsz' 16; font-weight:400; font-style:normal; font-size:1.06rem; line-height:1.65; color:var(--text); }
.article blockquote p{ margin:0 0 .8em; }
.article blockquote p:last-child{ margin-bottom:0; }
.article blockquote em{ font-variation-settings:'opsz' 20; }
.article blockquote + .q-source, .article blockquote + .callout-exerpt, .article blockquote + .callout-excerpt{ margin-top:-.3em; margin-left:3.3em; }

.article .q-source, .article .callout{ margin:1.8em 0; padding:.05em 0 .05em 1.3em; border:0; border-left:2px solid var(--g-300); background:none; border-radius:0; box-shadow:none; }
.article .q-source .slip{ display:none; }
.article .q-source .qt, .article .callout-body{ font-family:var(--serif); font-variation-settings:'opsz' 16; font-size:1.06rem; line-height:1.6; color:#3A403D; }
.article .q-source .attr{ margin-top:.5em; font-family:var(--serif); font-size:.9rem; color:var(--ink-500); display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; align-items:baseline; line-height:1.5; }
.article .q-source .attr .title{ font-weight:400; }
.article .q-source .attr .title a{ color:var(--g-700); font-weight:500; border:0; }
.article .q-source .attr .title a::before{ content:"— "; color:var(--ink-500); }
.article .q-source .attr .pg{ font-family:var(--type); font-size:.66rem; letter-spacing:.08em; color:var(--ink-500); white-space:nowrap; }

/* Central plate (one anchor quote per note) keeps the brand's dark plate; only the margins change. */
.article .q-central{ margin:2em 0; }

/* Book excerpt callout: same as a source; the book title sits beneath the passage as its attribution */
.article .callout-exerpt, .article .callout-excerpt{ display:flex; flex-direction:column; }
.article :is(.callout-exerpt, .callout-excerpt) .callout-title{ order:2; margin-top:.5em; font-family:var(--serif); font-size:.9rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-500); display:block; }
.article :is(.callout-exerpt, .callout-excerpt) .callout-title .callout-icon{ display:none; }
.article :is(.callout-exerpt, .callout-excerpt) .callout-title a{ color:var(--g-700); font-weight:500; border:0; }
.article :is(.callout-exerpt, .callout-excerpt) .callout-title a::before{ content:"— "; color:var(--ink-500); }
.article :is(.callout-exerpt, .callout-excerpt) .callout-body{ order:1; margin-top:0; }
.article .callout-body p{ margin:0; }
.article .callout-body ul{ margin:0; padding-left:18px; }
.article .callout-body em{ font-family:var(--type); font-style:normal; font-size:.66rem; letter-spacing:.08em; color:var(--ink-500); }
.article .callout-title{ font-family:var(--type); font-size:.6rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-500); margin-bottom:.55em; display:flex; align-items:center; gap:8px; }
/* generic callouts (note / tip / warning) keep a soft tint so they stay distinct from quotes */
.article .callout-warning, .article .callout-danger, .article .callout-note, .article .callout-tip, .article .callout-info{ padding:14px 20px; background:#fff; border-radius:0 6px 6px 0; }
.article .callout-danger{ border-left-color:var(--margin-rule); }

/* ── Series box — table of contents for a multi-part note ──────────────────
   Deliberately NOT part of the reading surface: it borrows the graph card's
   dark green and dot-grid so it reads as navigation. Numbered when it lists
   several parts; the current part is marked rather than linked.          */
.article .callout.callout-series{ position:relative; overflow:hidden; margin:1.6em 0 2.4em; padding:18px 24px 16px; background:var(--grad-zone); border:1px solid rgba(153,219,66,.22); border-left:3px solid var(--lime); border-radius:12px; box-shadow:0 10px 26px rgba(11,41,25,.18); }
.article > :is(.callout.callout-series:first-child, .divider:first-child + .callout.callout-series){ margin-top:0; }
.article .callout.callout-series::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:24px 24px; }
.article .callout.callout-series > *{ position:relative; }
.article .callout.callout-series .callout-title{ font-family:var(--type); font-size:.86rem; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--cool-paper); margin-bottom:.8em; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.article .callout.callout-series .callout-title::before{ content:"Series"; font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--lime); }
.article .callout.callout-series .callout-icon{ display:none; }
.article .callout.callout-series .callout-body{ font-family:var(--serif); font-size:1rem; line-height:1.5; color:var(--g-100); counter-reset:part; }
.article .callout.callout-series .callout-body p{ margin:0; padding:7px 0; display:flex; align-items:baseline; gap:4px; }
    .article .callout.callout-series .callout-body p > a, .article .callout.callout-series .callout-body p > span{ flex:1 1 0; min-width:0; }
.article .callout.callout-series .callout-body p + p{ border-top:1px solid rgba(153,219,66,.14); }
.article .callout.callout-series .callout-body:has(p:nth-of-type(2)) p::before{ counter-increment:part; content:counter(part, decimal-leading-zero); flex:0 0 2.1em; font-family:var(--type); font-size:.66rem; font-weight:700; letter-spacing:.06em; color:var(--lime); }
.article .callout.callout-series a.link::before{ display:none; }
.article .callout.callout-series a.link .lt{ text-decoration:none; }
.article .callout.callout-series a.link, .article .callout.callout-series a.link.is-draft, .article .callout.callout-series a.link.is-published{ color:var(--g-100); font-weight:400; }
.article .callout.callout-series a.link:hover{ color:var(--lime-bright); }
.article .callout.callout-series .is-current{ font-weight:600; color:#fff; }
.article .callout.callout-series .is-current::after{ content:"you are here"; margin-left:10px; padding:2px 8px; border-radius:999px; background:var(--lime); color:var(--g-900); font-family:var(--type); font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; vertical-align:middle; }

/* ── End of note: dark-green hand-off, so the grey is bracketed by green ─── */
.np-next{ max-width:1180px; margin:72px auto 0; padding:0 48px; }
.np-next-inner{ background:var(--grad-hero); border-radius:16px; padding:40px 48px; display:flex; justify-content:space-between; align-items:center; gap:32px; position:relative; overflow:hidden; }
.np-next-inner::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.np-next .k{ font-family:var(--type); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lime); margin-bottom:8px; }
.np-next h3{ font-family:var(--type); font-weight:800; font-size:1.6rem; letter-spacing:-.025em; color:var(--cool-paper); margin:0 0 6px; }
.np-next p{ font-family:var(--serif); font-size:1.02rem; color:var(--ink-300); max-width:520px; line-height:1.5; margin:0; }
.np-next a.btn{ position:relative; white-space:nowrap; }
body.note-v2 .footer{ margin-top:48px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .np-layout{ grid-template-columns:minmax(0,1fr); padding:32px 20px 0; gap:40px; }
  .np-rail{ position:static; }
  h1.np-title, .layout-blog .article .section-h.h-1{ font-size:2.1rem; }
  .np-next{ padding:0 20px; }
  .np-next-inner{ flex-direction:column; align-items:flex-start; padding:28px 24px; }
  .article{ font-size:1.1rem; }
  .article blockquote{ margin-left:1.2em; }
  .article blockquote + .q-source, .article blockquote + .callout-exerpt, .article blockquote + .callout-excerpt{ margin-left:2em; }
}