/* carebun.css — one design system for every reading surface on carebun.
   Source of the tokens: ~/apps/system-design/voice-agent/index.html (the reader the owner likes).
   Three forms share it: the Article (study reader), the Book (interactive chapters), the Paper (preprint).
   The Paper swaps only the body face and the page colour; the bar, the ladder and the doors stay. */
:root {
  --bg: #f3f4f6; --surface: #ffffff; --sunken: #e9ebef; --fg: #171a20; --muted: #5f6673; --faint: #8b92a0;
  --line: #dde0e6; --accent: #0d7c78; --accent-ink: #ffffff; --accent-soft: #e0f2f1;
  --hot: #d9541f; --hot-soft: #fbe9e0; --code-bg: #f0f1f4;
  --shadow: 0 1px 2px rgba(23,26,32,.06), 0 8px 24px -12px rgba(23,26,32,.18);
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --paper: "STIX Two Text", "Latin Modern Roman", "Times New Roman", Times, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #111318; --surface: #191c23; --sunken: #0d0f13; --fg: #e8eaee; --muted: #a0a7b4; --faint: #6f7684;
  --line: #2a2f3a; --accent: #4cc5bf; --accent-ink: #0b1a19; --accent-soft: #15302f; --hot: #ff8a5c; --hot-soft: #3a2218;
  --code-bg: #0f1116; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #111318; --surface: #191c23; --sunken: #0d0f13; --fg: #e8eaee; --muted: #a0a7b4; --faint: #6f7684;
  --line: #2a2f3a; --accent: #4cc5bf; --accent-ink: #0b1a19; --accent-soft: #15302f; --hot: #ff8a5c; --hot-soft: #3a2218;
  --code-bg: #0f1116; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
code, pre, kbd { font-family: var(--mono); }
code { font-size: .86em; background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }
.eyebrow { font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- the bar: the same on every page of the portal ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; text-decoration: none; color: inherit; }
.brand .mark { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: .95rem; }
.brand .t { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; }
.brand .s { font-size: .78rem; color: var(--muted); font-family: var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; gap: 2px; background: var(--sunken); padding: 3px; border-radius: 10px; overflow-x: auto; max-width: 100%; }
.tabs a, .tabs button { font-family: var(--display); font-weight: 600; font-size: .85rem; padding: 6px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabs [aria-selected="true"], .tabs .on { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.iconbtn { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); flex: none; }
.iconbtn:hover { background: var(--sunken); color: var(--fg); }
.iconbtn svg { width: 18px; height: 18px; }
.ring { width: 34px; height: 34px; position: relative; display: grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring .pct { font-family: var(--display); font-size: .6rem; font-weight: 700; color: var(--muted); }
.who { font-family: var(--display); font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); text-decoration: none; white-space: nowrap; }

/* ---------- the ladder: article -> experiments -> paper. The signature of a research piece. ---------- */
.ladder { display: flex; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 16px; overflow-x: auto; }
.ladder .piece { border: 0; border-radius: 0; background: none; font-family: var(--display); font-size: .8rem; color: var(--muted); padding: 10px 16px 10px 0; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.ladder .piece b { color: var(--fg); font-weight: 700; }
.rung { display: flex; align-items: center; gap: 9px; padding: 9px 16px; font-family: var(--display); font-size: .85rem; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.rung .n { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--faint); display: grid; place-items: center; font-size: .68rem; font-weight: 700; }
.rung small { font-weight: 500; color: var(--faint); font-size: .75rem; }
.rung.on { color: var(--accent); border-bottom-color: var(--accent); }
.rung.on .n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rung.done .n { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ladder .ask { margin-left: auto; align-self: center; }

/* ---------- parts ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: .88rem; padding: 9px 16px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.btn.hot { background: var(--hot); color: #fff; }
.btn.ghost { background: none; color: var(--fg); border: 1px solid var(--line); }
.btn.sm { padding: 6px 12px; font-size: .8rem; border-radius: 8px; }
.pill { font-family: var(--display); font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--sunken); color: var(--muted); white-space: nowrap; }
.pill.hot { color: var(--hot); background: var(--hot-soft); }
.pill.acc { color: var(--accent); background: var(--accent-soft); }
.box { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 16px 18px; }
.box > h2, .box > h3 { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.takeaway { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: 1rem; line-height: 1.5; }
.takeaway .eyebrow { color: var(--accent); padding-top: 3px; }
.stat { display: grid; gap: 2px; }
.stat .v { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: var(--hot); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .l { font-family: var(--display); font-size: .78rem; color: var(--muted); line-height: 1.35; }
.stat .src { font-family: var(--mono); font-size: .64rem; color: var(--faint); }
.tablewrap { overflow-x: auto; }
table.t { border-collapse: collapse; width: 100%; font-size: .88rem; font-family: var(--display); }
table.t th, table.t td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.t th { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
table.t td.n, table.t th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t tr.us td { background: var(--accent-soft); font-weight: 700; }
.prose { font-size: 1.0625rem; line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: 0; }
.prose li + li { margin-top: .4em; }
.foot { border-top: 1px solid var(--line); margin-top: 56px; padding: 22px 0 40px; font-family: var(--display); font-size: .8rem; color: var(--faint); display: flex; gap: 8px 18px; flex-wrap: wrap; }
.foot a { color: var(--muted); }

/* the bar across the top of every mock: says what the page is a mock of. Not part of the design. */
.mock { background: #171a20; color: #c9ced8; font-family: var(--mono); font-size: .7rem; padding: 6px 16px; display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; }
.mock b { color: #fff; font-weight: 500; }
.mock a { color: #7fd6d1; text-decoration: none; }
.mock .sp { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- charts ---------- */
.cv { width: 100%; height: auto; display: block; overflow: visible; }
.cv-grid { stroke: var(--line); stroke-width: 1; }
.cv-ax { font-family: var(--display); font-size: 12.5px; fill: var(--muted); }
.cv-lab { font-family: var(--display); font-size: 13.5px; fill: var(--fg); font-weight: 500; }
.cv-lab.us { font-weight: 800; font-size: 15px; }
.cv-us, .cv-keep { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.cv-them { fill: var(--faint); stroke: var(--surface); stroke-width: 2; }
.cv-discard { fill: var(--surface); stroke: var(--faint); stroke-width: 1.8; }
.cv-info { fill: var(--faint); opacity: .55; }
.cv-line { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .55; }
.cv-range { stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
.cv circle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cv-note { font-family: var(--display); font-size: .76rem; color: var(--faint); margin-top: 8px; }
.cv-tip { position: absolute; z-index: 50; max-width: 300px; background: var(--fg); color: var(--bg); font-family: var(--display); font-size: .76rem; line-height: 1.45; padding: 8px 11px; border-radius: 8px; pointer-events: none; }
.cv-tip b { font-weight: 800; }
.legend { display: flex; gap: 6px 16px; flex-wrap: wrap; font-family: var(--display); font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: var(--faint); }
.legend i.k { background: var(--accent); } .legend i.d { background: none; border: 1.8px solid var(--faint); } .legend i.n { width: 7px; height: 7px; opacity: .55; }

/* ---------- an essay: one column of prose ---------- */
.essay { max-width: 72ch; margin: 0 auto; padding: 34px 22px 80px; }
.essay .kick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.essay h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); font-weight: 700; letter-spacing: -.025em; }
.essay .tagline { font-size: 1.2rem; color: var(--muted); margin-top: 10px; }
.essay .meta { margin: 14px 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: .8rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.essay .prose h2 { font-size: 1.45rem; margin-top: 2em; }
.essay .prose h3 { font-size: 1.15rem; margin-top: 1.7em; }
.essay .prose h4 { font-size: 1rem; margin-top: 1.4em; }
.essay .prose blockquote { margin: 1.2em 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.essay .prose blockquote p + p { margin-top: .6em; }
.essay .prose pre { max-width: 100%; overflow-x: auto; background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: .8rem; line-height: 1.5; }
.essay .prose pre code { background: none; padding: 0; font-size: inherit; }
.essay .prose img, .essay .prose iframe, .essay .prose video { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.essay .prose iframe { width: 100%; min-height: 420px; }
.essay .prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-family: var(--display); font-size: .88rem; }
.essay .prose th, .essay .prose td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.essay .prose th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.essay .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.essay .keep { margin-top: 40px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap; font-family: var(--display); font-size: .9rem; color: var(--muted); }
.essay .keep .btn { margin-left: auto; }
.essay .pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.essay .pn a { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: inherit; display: grid; gap: 2px; }
.essay .pn a:hover { border-color: var(--accent); }
.essay .pn small { font-family: var(--display); font-size: .72rem; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.essay .pn b { font-family: var(--display); font-size: .95rem; }
.essay .pn .r { text-align: right; }
/* the writing index: every series on one page */
.wr-page { max-width: 900px; margin: 0 auto; padding: 40px 20px 70px; }
.wr-page h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.035em; }
.wr-page .lede { color: var(--muted); font-size: 1.08rem; margin: 10px 0 8px; max-width: 60ch; }
.wr-jump { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 6px; }
.wr-series { margin-top: 40px; scroll-margin-top: 70px; }
.wr-series h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.015em; display: flex; gap: 12px; align-items: baseline; }
.wr-series h2 span { font-family: var(--display); font-size: .8rem; font-weight: 500; color: var(--faint); }
.wr-series > p { color: var(--muted); font-size: .95rem; margin: 4px 0 12px; max-width: 70ch; }
.wr-row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: inherit; }
.wr-row + .wr-row { margin-top: 8px; }
.wr-row:hover { border-color: var(--accent); }
.wr-row .n { font-family: var(--display); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.wr-row b { font-family: var(--display); font-size: 1.02rem; }
.wr-row .t { display: block; font-size: .9rem; color: var(--muted); margin-top: 2px; }
.wr-row .m { font-family: var(--display); font-size: .76rem; color: var(--faint); white-space: nowrap; }
@media (max-width: 560px) { .essay .pn { grid-template-columns: 1fr; } .wr-row { grid-template-columns: 1.8em minmax(0, 1fr); } .wr-row .m { grid-column: 2; } }
.ladder .ask + .btn { margin-left: 8px; align-self: center; }

/* ---------- a project row: name, tag, one line, and a door for each step ---------- */
.rs-page { max-width: 1120px; margin: 0 auto; padding: 36px 20px 70px; }
.rs-page .sech { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.rs-page h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.rs-page .sech p { font-family: var(--display); font-size: .9rem; color: var(--muted); }
.piece { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 24px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.piece + .piece { margin-top: 10px; }
.piece h3 { font-size: 1.12rem; font-weight: 700; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.piece h3 a { color: inherit; text-decoration: none; } .piece h3 a:hover { color: var(--accent); }
.piece p { color: var(--muted); font-size: .95rem; margin-top: 4px; max-width: 64ch; }
.doors { display: flex; gap: 6px; flex-wrap: wrap; }
.door { display: grid; gap: 1px; padding: 8px 14px; border-radius: 10px; background: var(--sunken); text-decoration: none; color: var(--fg); font-family: var(--display); min-width: 104px; }
.door b { font-size: .84rem; font-weight: 700; } .door span { font-size: .7rem; color: var(--muted); }
.door:hover { background: var(--accent-soft); }
@media (max-width: 760px) { .piece { grid-template-columns: 1fr; } }

/* ============================================================================
   The portal's shell: a left-side menu of all reading, then the page.
   Home, Research, Writing, Books and the indexes all sit in it. A reader keeps
   its own contents list and a way back here.
   ========================================================================== */
body.pshell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.pbar { display: none; }
.menu { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 16px 12px 14px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
.menu .brand, .pbar .brand { flex: none; padding: 2px 6px 14px; }
.menu nav { display: grid; gap: 2px; }
.menu nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--fg); text-decoration: none; }
.menu nav a svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu nav a:hover { background: var(--sunken); }
.menu nav a.on { background: var(--accent-soft); color: var(--accent); }
.menu nav a.on svg { stroke: var(--accent); }
.menu nav a.mine { display: none; margin-top: 8px; }
:root[data-signed-in] .menu nav a.mine { display: flex; }
.menu-foot { margin-top: auto; display: grid; gap: 10px; padding: 12px 6px 0; border-top: 1px solid var(--line); justify-items: start; }
.menu-foot .kept { font-family: var(--display); font-size: .76rem; line-height: 1.45; color: var(--muted); }
:root[data-signed-in] .menu-foot .kept { display: none; }
.scrim { display: none; }
.pmain { min-width: 0; }
.pshell .ladder .back { display: none; }
.pshell .ladder { position: sticky; top: 0; z-index: 15; }
.pg { max-width: 1120px; margin: 0 auto; padding: 36px 24px 60px; }
.pg h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.pg .lede { color: var(--muted); margin: 8px 0 24px; max-width: 62ch; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; color: inherit; min-height: 150px; }
.card:hover { box-shadow: var(--shadow); border-color: var(--accent); }
.card h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.card p { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.card .meta { margin-top: auto; font-family: var(--display); font-size: .74rem; color: var(--faint); }
.sech { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 38px 0 14px; }
.sech h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; }
.sech p { font-family: var(--display); font-size: .84rem; color: var(--muted); }
.sech > a { margin-left: auto; font-family: var(--display); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.rs-page .sech:first-child { margin-top: 0; }
.home .hero { padding: 8px 0 6px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.home .hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.home .hero h1 em { font-style: normal; color: var(--accent); }
.home .hero p { margin-top: 14px; color: var(--muted); font-size: 1.06rem; max-width: 52ch; }
.home .how ol { margin: 0; padding-left: 1.2em; display: grid; gap: 7px; font-family: var(--display); font-size: .88rem; color: var(--muted); }
.ladder .back, .all-reading { font-family: var(--display); font-size: .8rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.ladder .back { align-self: center; padding-right: 16px; margin-right: 4px; border-right: 1px solid var(--line); }
.all-reading { display: block; padding: 2px 10px 12px; }
.ladder .back:hover, .all-reading:hover { color: var(--accent); }
@media (max-width: 860px) {
  body.pshell { display: block; }
  .pbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
  .pbar .brand { padding: 0; flex: 1 1 auto; }
  .menu-btn { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--fg); flex: none; }
  .menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .menu { position: fixed; z-index: 50; top: 0; left: 0; bottom: 0; width: min(280px, 84vw); height: auto; transform: translateX(-105%); transition: transform .2s; box-shadow: var(--shadow); }
  body.menu-open .menu { transform: none; }
  body.menu-open .scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.35); }
  .menu-foot .who { display: none; }
  .pg { padding: 24px 16px 50px; }
  .home .hero { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================================
   The Books shelf, in the look of the first interactive site: warm paper, a
   coloured spine for each book, and the reading order as numbered steps.
   ========================================================================== */
body.warm { --bg: #f7f3ea; --surface: #fffdf8; --sunken: #f0ebdf; --fg: #1d1a16; --muted: #4d473e; --faint: #7d766a; --line: #e3dccd;
  --shadow: 0 1px 2px rgba(40,30,10,.06), 0 8px 24px rgba(40,30,10,.06); background: var(--bg); color: var(--fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.warm {
  --bg: #12100d; --surface: #191612; --sunken: #0d0b09; --fg: #f3eee4; --muted: #c9c1b2; --faint: #958d7e; --line: #2e2922;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); } }
:root[data-theme="dark"] body.warm {
  --bg: #12100d; --surface: #191612; --sunken: #0d0b09; --fg: #f3eee4; --muted: #c9c1b2; --faint: #958d7e; --line: #2e2922;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); }
.bk-hero { padding: 20px 0 8px; }
.bk-hero .eyebrow { color: var(--accent); margin-bottom: 10px; }
.pg.shelf .bk-hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); line-height: .98; letter-spacing: -.035em; }
.bk-hero h1 em { font-style: normal; color: var(--accent); }
.pg.shelf .bk-hero .lede { font-size: 1.1rem; line-height: 1.55; margin: 18px 0 0; max-width: 64ch; }
.bk-group { margin-top: 40px; }
.bk-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bk-head h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.bk-head p { font-family: var(--display); font-size: .9rem; color: var(--muted); }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.bk { display: flex; min-height: 220px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; text-decoration: none; color: var(--fg); box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.bk:hover { transform: translateY(-3px); border-color: hsl(var(--hue) 70% 45%); }
.bk-spine { flex: 0 0 18px; background: hsl(var(--hue) 78% 40%); }
.bk-b { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px 18px; min-width: 0; }
.bk-step { font-family: var(--display); font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; background: hsl(var(--hue) 78% 36%); }
.bk-b small { font-family: var(--display); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.bk-b h3 { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.015em; }
.bk-b p { font-size: .97rem; line-height: 1.5; color: var(--muted); }
.bk-why { font-family: var(--display); font-size: .86rem; font-weight: 600; line-height: 1.4; padding-left: 10px; border-left: 3px solid hsl(var(--hue) 70% 45%); }
.bk-facts { margin-top: auto; padding-top: 6px; font-family: var(--display); font-size: .78rem; color: var(--faint); }
/* the private part of the menu and of the shelf: written by account.js for a signed-in admin, or a reader given an edition */
.menu-private { display: grid; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.menu-private p { font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 0 10px 4px; }
.menu .menu-private a { font-size: .88rem; line-height: 1.25; align-items: flex-start; }
.menu .menu-private a svg { margin-top: 1px; }
.bk-private { margin-top: 28px; padding: 18px 18px 20px; border: 1px dashed var(--faint); border-radius: 22px; }