:root{--spring:linear(0, 0.0165, 0.058, 0.1154, 0.1817, 0.2521, 0.323, 0.3921, 0.4578, 0.5192, 0.5758, 0.6273, 0.6738, 0.7155, 0.7527, 0.7855, 0.8145, 0.8399, 0.8621, 0.8814, 0.8982, 0.9128, 0.9254, 0.9362, 0.9456, 0.9536, 0.9605, 0.9664, 0.9714, 0.9758, 0.9794, 0.9826, 0.9852, 0.9875, 0.9894, 0.9911, 0.9925, 0.9936, 0.9946, 0.9955, 0.9962, 0.9968, 0.9973, 0.9977, 0.9981, 0.9984, 0.9986, 0.9989, 1);--spring-ms:813ms;--spring-soft:linear(0, 0.0148, 0.0536, 0.1091, 0.1755, 0.2481, 0.3233, 0.3983, 0.471, 0.54, 0.6043, 0.6632, 0.7165, 0.7641, 0.8062, 0.8429, 0.8747, 0.9018, 0.9247, 0.9439, 0.9598, 0.9727, 0.983, 0.9912, 0.9976, 1.0023, 1.0058, 1.0082, 1.0098, 1.0107, 1.0111, 1.011, 1.0107, 1.0101, 1.0094, 1.0086, 1.0078, 1.007, 1.0062, 1.0054, 1.0046, 1.004, 1.0034, 1.0028, 1.0023, 1.0019, 1.0015, 1.0012, 1);--spring-soft-ms:580ms;--spring-snap:linear(0, 0.0137, 0.0495, 0.1003, 0.161, 0.2271, 0.2956, 0.364, 0.4305, 0.494, 0.5535, 0.6086, 0.6591, 0.7048, 0.746, 0.7826, 0.815, 0.8436, 0.8685, 0.8901, 0.9088, 0.9248, 0.9384, 0.95, 0.9598, 0.9679, 0.9747, 0.9804, 0.985, 0.9888, 0.9918, 0.9943, 0.9962, 0.9977, 0.9989, 0.9997, 1.0004, 1.0009, 1.0012, 1.0014, 1.0015, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.0011, 1);--spring-snap-ms:400ms}
/* mutaafaziz.com/library — the Leadership Library.
   Two forms from one document:
   · the app form (every device, and any device without JS): a hero, the sections, then
     the shelf (studio.css and music.css restyle it; see docs/DESIGN.md);
   · the book form (the iPhone Duo): closed is one page, open is a two-page spread with the
     hinge as the gutter. html.duo + [data-fold="closed|open"], set before first paint.
   Motion is springs (--spring*, generated by src/render/spring.mjs) on transform/opacity. */

@font-face { font-family: 'Instrument Serif'; src: url(fonts/instrument-serif-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; src: url(fonts/instrument-serif-400-italic.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Next'; src: url(fonts/atkinson-next.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Atkinson Next'; font-style: italic; src: url(fonts/atkinson-next-italic.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Fragment Mono'; src: url(fonts/fragment-mono-400.woff2) format('woff2'); font-display: swap; }

:root {
  --ink: #151B20;
  --night: #0F1316;
  --night-2: #171C20;
  --night-ink: #F2EBDD;
  --night-soft: #B5AC9B;
  --walnut: #473426;
  --walnut-deep: #2A1E15;
  --parchment: #F2EBDD;
  --paper: #F8F4EA;
  --brass: #B48A48;
  --brass-hi: #D7B06C;
  --brass-ink: #7E5D27;
  --sage: #83947B;
  --sage-ink: #4E6146;
  --text: #1E2328;
  --soft: #5E5850;
  --faint: #857D70;
  --edge: #DDD3C1;
  --card: #FFFDF8;
  --display: 'Instrument Serif', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --body: 'Atkinson Next', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Fragment Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter-x: clamp(16px, 5vw, 56px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --hinge: 2px;
  color-scheme: light only;
}
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  :root {
    --parchment: #14100D; --paper: #1B1612; --card: #221C17; --text: #EFE6D4; --soft: #B6AA96; --faint: #8C8172;
    --edge: #3A3027; --brass-ink: #D7B06C; --sage-ink: #A9BA9F; --walnut: #5A4331; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
html:not(.still) { scroll-behavior: smooth; }
body { margin: 0; background: var(--parchment); color: var(--text); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; padding: 10px 14px; border-radius: 10px; background: var(--brass); color: var(--ink); }
.skip:focus { left: 8px; }
.kicker { margin: 0 0 12px; font: 400 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--brass-ink); }

/* ── Nav: transparent over the sky, a frosted pill once you scroll (Hearth's) ── */
.nav {
  position: fixed; z-index: 40; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 20px), 1080px); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 999px; color: var(--night-ink); border: 1px solid transparent;
  transition: background .35s, border-color .35s, color .35s, box-shadow .35s; view-transition-name: lib-nav;
}
.nav.scrolled, .page-book .nav, .page-404 .nav { background: #14110ecc; border-color: #ffffff14; color: var(--night-ink); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 10px 30px -18px #000; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 400 26px/1 var(--display); text-decoration: none; letter-spacing: -.01em; }
.glyph { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.glyph i { display: block; width: 4px; border-radius: 1px; background: var(--brass-hi); box-shadow: 0 0 10px #d7b06c66; }
.glyph i:nth-child(1) { height: 16px; } .glyph i:nth-child(2) { height: 12px; background: var(--parchment); } .glyph i:nth-child(3) { height: 18px; transform: rotate(9deg); transform-origin: bottom; }
.nav nav { display: flex; align-items: center; gap: 4px; }
.nav-link { display: inline-flex; padding: 10px 12px; border-radius: 999px; font-size: 14px; text-decoration: none; opacity: .82; }
.nav-link:hover { opacity: 1; background: #ffffff12; }
.nav-cta { padding: 10px 16px; border-radius: 999px; background: var(--brass); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.nav-cta:hover { background: var(--brass-hi); }

/* ── Night: the hero band ── */
.night { position: relative; overflow: clip; background: var(--night); color: var(--night-ink); isolation: isolate; }
.night::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 50% at 70% 18%, #b48a4824, transparent 70%), radial-gradient(60% 40% at 15% 85%, #83947b1c, transparent 70%); }
.hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding: 120px var(--gutter-x) 96px; position: relative; max-width: 1180px; margin: 0 auto; }
.hero-copy { max-width: 620px; }
.hero .kicker, .story .kicker { color: var(--brass-hi); }
.hero h1 { margin: 0 0 22px; font-size: clamp(48px, 8.4vw, 104px); line-height: .95; }
.lede { margin: 0 0 30px; max-width: 34em; color: var(--night-soft); font-size: clamp(17px, 1.6vw, 19px); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.cta, .cta-ghost { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .25s var(--ease), background .25s; }
.cta { background: var(--brass); color: var(--ink); }
.cta:hover { background: var(--brass-hi); transform: translateY(-1px); }
.cta-ghost { border: 1px solid #f2ebdd40; color: var(--night-ink); }
.cta-ghost:hover { background: #ffffff10; }
.cta-ghost-dark { border-color: var(--edge); color: var(--text); }
.proof { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 34px 0 0; padding: 0; list-style: none; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--night-soft); }
.proof li::before { content: '◆'; margin-right: 8px; color: var(--brass); font-size: 8px; vertical-align: 2px; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 40px; border: 1px solid #f2ebdd40; border-radius: 14px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--brass-hi); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

.story { max-width: 1180px; margin: 0 auto; padding: 40px var(--gutter-x) 140px; }
.story-head { max-width: 560px; margin-bottom: 48px; }
.story-head h2 { margin: 0 0 14px; font-size: clamp(38px, 5vw, 64px); }
.story-head p:not(.kicker) { margin: 0; color: var(--night-soft); }

/* ── Claim labels (PRD §12): whose claim is it ── */
.claim { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--soft); }
.claim::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.claim-book { color: var(--brass-ink); }
.claim-interpretation { color: var(--sage-ink); }
.claim-application { color: #3E6A8A; }
.claim-critique { color: #A2453A; }
.claim-context { color: var(--soft); }
.night .claim-book { color: var(--brass-hi); } .night .claim-interpretation { color: #A9BA9F; } .night .claim-application { color: #8DB6D4; } .night .claim-critique { color: #E0877B; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .claim-application { color: #8DB6D4; } .claim-critique { color: #E0877B; } }

/* ── The shelf ── */
.shelf { position: relative; max-width: 1180px; margin: 0 auto; padding: 96px var(--gutter-x) 80px; }
.page-home .shelf { scroll-margin-top: 20px; }
.shelf-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 24px; margin-bottom: 26px; }
.shelf-head .kicker { grid-column: 1 / -1; margin: 0; }
.shelf-head h2 { margin: 0; font-size: clamp(36px, 5vw, 60px); }
.counts { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; color: var(--soft); font-size: 14px; }
.counts b { display: block; font: 400 34px/1 var(--display); color: var(--text); }
.tools { display: none; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.js .tools { display: flex; }
.search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--edge); }
.search:focus-within { border-color: var(--brass); box-shadow: 0 0 0 4px #b48a4822; }
.search svg { width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; padding: 10px 0; }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }
.tool-btn, .seg button, .btn, .btn-ghost { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--edge); background: var(--card); cursor: pointer; font-size: 15px; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.tool-btn:hover, .btn-ghost:hover, .seg button:hover { border-color: var(--brass); }
.tool-btn[aria-expanded="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.badge[hidden] { display: none; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 10px; background: var(--brass); color: var(--ink); font: 700 11px/1 var(--body); }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--card); border: 1px solid var(--edge); }
.seg button { min-height: 40px; padding: 0 14px; border: 0; background: none; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--parchment); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .seg button[aria-pressed="true"], .tool-btn[aria-expanded="true"] { background: var(--night-ink); color: var(--ink); border-color: var(--night-ink); } .btn { background: var(--brass); color: var(--ink); border-color: var(--brass); } }
.btn { background: var(--ink); color: var(--parchment); border-color: var(--ink); font-weight: 700; }
.btn:active, .tool-btn:active, .btn-ghost:active, .seg button:active { transform: scale(.97); }
.filters { margin: 4px 0 14px; padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--edge); }
.filters[hidden] { display: none; }
.filters fieldset { margin: 0 0 14px; padding: 0; border: 0; }
.filters legend { margin-bottom: 8px; font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--edge); font-size: 14px; transition: background .2s, color .2s, border-color .2s; }
.chip input:checked + span { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.selects { display: flex; flex-wrap: wrap; gap: 12px; }
.selects label { display: grid; gap: 6px; font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--soft); }
.selects select { min-height: 44px; min-width: 200px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--edge); background: var(--paper); font: 400 16px var(--body); text-transform: none; letter-spacing: 0; color: var(--text); }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.sheet-grip { display: none; }
.status-line { min-height: 1.4em; margin: 0 0 6px; color: var(--soft); font-size: 14px; }
.empty { padding: 40px 0; text-align: center; }
.empty[hidden] { display: none; }
.empty p { margin: 0 0 14px; }

.books { list-style: none; margin: 0; padding: 0; }
.bk { position: relative; }
.bk[hidden] { display: none; }
.bk-link { display: block; text-decoration: none; color: inherit; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.bk-meta { display: grid; gap: 2px; }
.bk-title { font: 400 21px/1.15 var(--display); }
.bk-by { font-size: 14px; color: var(--soft); }
.bk-line { font-size: 14px; color: var(--soft); }
.bk-status { font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--sage-ink); margin-top: 6px; }

/* Shelf view: spines standing on walnut planks. */
.shelf[data-view="shelf"] .books { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px 6px; padding: 0 12px 32px; --row: 248px;
  background: repeating-linear-gradient(to bottom, transparent 0 var(--row), var(--walnut) var(--row) calc(var(--row) + 14px), #00000026 calc(var(--row) + 14px) calc(var(--row) + 20px), transparent calc(var(--row) + 20px) calc(var(--row) + 32px)); }
.shelf[data-view="shelf"] .bk { height: var(--row); display: flex; align-items: flex-end; }
.shelf[data-view="shelf"] .bk-link { height: 100%; display: flex; align-items: flex-end; }
.shelf[data-view="shelf"] .cover, .shelf[data-view="shelf"] .bk-meta { display: none; }
.shelf[data-view="shelf"] .bk-meta { display: grid; position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.spine { display: none; }
.shelf[data-view="shelf"] .spine { display: flex; }
.shelf-caption { display: none; }
.js .shelf[data-view="shelf"] .shelf-caption { display: block; min-height: 3.4em; margin: 0 0 18px; padding-left: 12px; border-left: 2px solid var(--brass); color: var(--soft); font-size: 15px; }
.shelf-caption b { display: block; color: var(--text); font: 400 24px/1.1 var(--display); }

/* Grid view: covers. */
.shelf[data-view="grid"] .books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 34px 22px; }
.shelf[data-view="grid"] .bk-link { display: grid; gap: 12px; }
.shelf[data-view="grid"] .bk-line { display: none; }
/* List view: rows. */
.shelf[data-view="list"] .books { display: grid; gap: 2px; }
.shelf[data-view="list"] .bk-link { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; padding: 12px; }
.shelf[data-view="list"] .bk-link:hover { background: var(--card); }
.shelf[data-view="list"] .bk + .bk { border-top: 1px solid var(--edge); }
.plank { display: none; }

/* ── Covers and spines: typographic, rights-safe, CSS only ── */
.cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 2 / 3; width: 100%; padding: 14% 12% 12% 16%; overflow: hidden;
  background: radial-gradient(120% 80% at 80% 0%, #ffffff1f, transparent 60%), repeating-linear-gradient(45deg, #ffffff06 0 2px, transparent 2px 4px), var(--cv-bg); color: var(--cv-ink);
  border-radius: 3px 7px 7px 3px; box-shadow: inset 5px 0 0 -1px #00000033, inset 7px 0 8px -4px #00000055, 0 1px 1px #0000001a, 0 18px 30px -18px #000000aa, 0 3px 0 -1px var(--paper), 0 4px 0 -1px var(--edge);
  container-type: inline-size; transition: transform var(--spring-soft-ms) var(--spring-soft), box-shadow .3s; }
.cover::after { content: ''; position: absolute; inset: 0 auto 0 6%; width: 1px; background: #ffffff1c; }
.cv-rule { display: block; width: 34%; height: 2px; background: var(--cv-foil); box-shadow: 0 0 6px color-mix(in srgb, var(--cv-foil) 60%, transparent); }
.cv-title { font: 400 15cqi/1.02 var(--display); hyphens: auto; overflow-wrap: break-word; }
.cv-author { font: 400 max(6px, 5.6cqi)/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.cover[data-type="grotesk"] .cv-title { font: 800 9.5cqi/1.08 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.cover[data-type="slab"] .cv-title { font-style: italic; }
.cover[data-type="mono"] .cv-title { font: 400 9cqi/1.15 var(--mono); text-transform: uppercase; letter-spacing: .02em; }
.cover-xs { width: 44px; padding: 7px 5px 5px 7px; }
.cover-xs .cv-author, .cover-xs .cv-rule { display: none; }
.cover-lg { width: min(260px, 60vw); }
.spine { position: relative; flex-direction: column; align-items: center; width: var(--w); height: var(--h); max-height: 100%; padding: 16px 0 44px; overflow: hidden; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #00000040, transparent 18%, #ffffff1a 48%, transparent 70%, #00000038), var(--cv-bg); color: var(--cv-ink);
  box-shadow: 0 -1px 0 #ffffff1a inset, 2px 0 4px -2px #0000004d; transform-origin: bottom center; transition: transform var(--spring-soft-ms) var(--spring-soft), filter .3s; }
.spine::before, .spine::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--cv-foil); opacity: .9; }
.spine::before { top: 8px; } .spine::after { bottom: 34px; }
.sp-title { writing-mode: vertical-rl; flex: 1 1 auto; min-height: 0; font: 400 17px/1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spine[data-type="grotesk"] .sp-title { font: 800 12px/1 var(--body); text-transform: uppercase; letter-spacing: .08em; }
.spine[data-type="mono"] .sp-title { font: 400 12px/1 var(--mono); text-transform: uppercase; }
.spine[data-type="slab"] .sp-title { font-style: italic; }
.sp-author { position: absolute; left: 2px; right: 2px; bottom: 10px; text-align: center; font: 400 7.5px/1.15 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.bk-link:hover .spine, .bk-link:focus-visible .spine, .bk.is-here .spine { transform: translateY(-8px); }
.bk-link:hover .cover, .bk-link:focus-visible .cover { transform: translateY(-6px) rotate(-.6deg); box-shadow: inset 5px 0 0 -1px #00000033, inset 7px 0 8px -4px #00000055, 0 26px 40px -18px #000000b3, 0 3px 0 -1px var(--paper), 0 4px 0 -1px var(--edge); }
.bk-link:active .spine, .bk-link:active .cover { transform: translateY(-2px) scale(.98); }
.bk.is-here .spine { filter: brightness(1.15); box-shadow: 0 0 0 2px var(--brass), 0 10px 20px -8px #000; }

/* ── Closer and footer ── */
.closer { max-width: 1180px; margin: 0 auto; padding: 120px var(--gutter-x) 120px; border-top: 1px solid var(--edge); }
.closer h2 { margin: 0 0 10px; font-size: clamp(40px, 6vw, 76px); }
.closer p { margin: 0 0 26px; color: var(--soft); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 26px var(--gutter-x) calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--edge); font-size: 14px; color: var(--soft); }
.foot a { color: var(--text); text-underline-offset: 3px; }
.gutter, .colophon { display: none; }

/* ── Book page ── */
.page-book .shelf { display: none; }
.hero-cover { perspective: 1200px; }
.hero-cover .cover { transform: rotateY(-14deg) rotateX(2deg); transform-origin: left center; box-shadow: inset 5px 0 0 -1px #00000033, inset 7px 0 8px -4px #00000055, 30px 40px 60px -30px #000, 0 3px 0 -1px #eee5d4, 0 4px 0 -1px #bbb, 4px 6px 0 -1px #e6dcc8; }
.back { display: none; margin-bottom: 18px; color: var(--night-soft); text-decoration: none; font-size: 15px; }
.back span { font-size: 20px; margin-right: 4px; }
.book-hero h1 { margin: 0 0 8px; font-size: clamp(42px, 6.4vw, 84px); line-height: .96; }
.book-sub { margin: 0 0 14px; font: italic 400 clamp(19px, 2.2vw, 26px)/1.25 var(--display); color: var(--night-soft); }
.book-by { margin: 0 0 22px; font-size: 17px; }
.facts { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0; }
.facts div { display: grid; gap: 4px; }
.facts dt { font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--night-soft); }
.facts dd { margin: 0; font-size: 15px; }
.book-body { max-width: 760px; margin: 0 auto; padding: 40px var(--gutter-x) 80px; }
.toc { position: sticky; top: max(76px, calc(env(safe-area-inset-top) + 68px)); z-index: 5; display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter-x)) 22px; padding: 10px var(--gutter-x); scrollbar-width: none; background: var(--parchment); box-shadow: 0 -80px 0 var(--parchment); }
.toc::-webkit-scrollbar { display: none; }
.toc a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--card); font-size: 14px; text-decoration: none; }
.toc a:hover { border-color: var(--brass); }
.sec { padding: 34px 0; border-top: 1px solid var(--edge); }
.sec:first-of-type { border-top: 0; }
.sec h2 { margin: 0 0 16px; font-size: clamp(32px, 4vw, 44px); }
.prose p { margin: 0 0 14px; } .prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose blockquote { margin: 0 0 14px; padding-left: 16px; border-left: 2px solid var(--brass); font-style: italic; }
#thesis .prose { font: 400 clamp(22px, 2.5vw, 27px)/1.35 var(--display); }
.ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.idea { padding: 22px 22px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--edge); }
.idea h3 { display: flex; gap: 12px; align-items: baseline; margin: 0 0 10px; font-size: 27px; }
.idea-n { font: 400 12px/1 var(--mono); color: var(--brass-ink); }
.idea p { margin: 0 0 10px; } .idea p:last-child { margin-bottom: 0; }
.caveat, .example { font-size: 15px; color: var(--soft); }
.caveat b, .example b { margin-right: 6px; font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text); }
.pair { display: grid; gap: 0 28px; border-top: 1px solid var(--edge); }
.pair .sec { border-top: 0; }
@media (min-width: 900px) { .pair { grid-template-columns: 1fr 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--edge); }
.refl { position: relative; padding: 0 0 26px; }
.refl::before { content: ''; position: absolute; left: -23px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); }
.refl time { font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--soft); }
.refl h3 { margin: 8px 0; font-size: 24px; }
.tags { display: flex; gap: 6px; } .tags span { padding: 3px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--edge); font-size: 13px; }
.experiments { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.exp { padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--edge); }
.exp p { margin: 0 0 6px; } .exp b { font-weight: 700; }
.exp-status { font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--sage-ink); }
.conns { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.conn { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--edge); text-decoration: none; transition: border-color .2s, transform .3s var(--ease); }
.conn:hover { border-color: var(--brass); transform: translateX(3px); }
.conn > span { display: grid; gap: 2px; }
.conn b { font: 400 22px/1.1 var(--display); }
.conn-theme { font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--brass-ink); }
.conn-by { font-size: 14px; color: var(--soft); }
.conns li > .claim { margin: 12px 0 4px 14px; } .conns li > p { margin: 0 14px; }
.res { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.res li { display: grid; gap: 2px; } .res span { font-size: 14px; color: var(--soft); }
.provenance { margin: 28px 0 0; padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--edge); color: var(--soft); font-size: 14px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.pg { display: grid; gap: 4px; padding: 18px; border-radius: 16px; border: 1px solid var(--edge); text-decoration: none; transition: border-color .2s; }
.pg:hover { border-color: var(--brass); }
.pg .kicker { margin: 0; } .pg b { font: 400 22px/1.15 var(--display); }
.pg-next { text-align: right; }

.lost { max-width: 760px; margin: 0 auto; padding: 140px var(--gutter-x) 80px; }
.lost h1 { margin: 0 0 12px; font-size: clamp(40px, 7vw, 72px); }
.lost-list { padding: 0; list-style: none; display: grid; gap: 10px; }
.lost-list a { font: 400 22px var(--display); } .lost-list span { color: var(--soft); font-size: 14px; }

/* ── Phones (app form) ── */
@media (max-width: 699px) {
  .nav-link { display: none; }
  .hero { padding-top: 110px; align-content: end; }
  .shelf { padding-top: 72px; }
  .shelf-head { grid-template-columns: 1fr; }
  .tools { display: none; }
  .js .tools { display: grid; grid-template-columns: 1fr auto; }
  .js .tools .search { grid-column: 1 / -1; }
  .shelf[data-view="grid"] .books { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .shelf[data-view="shelf"] .books { --row: 210px; }
  .book-hero { grid-template-columns: 1fr; padding-top: 100px; justify-items: start; }
  .cover-lg { width: min(200px, 52vw); }
  .pager { grid-template-columns: 1fr; } .pg-next { text-align: left; }
  /* Filters become a bottom sheet you can drag down. */
  .filters { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; margin: 0; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; border-width: 1px 0 0; box-shadow: 0 -20px 60px -20px #000000a0; transform: translateY(var(--drag, 0)); }
  .filters.sheet-in { animation: sheet-in var(--spring-soft-ms) var(--spring-soft) both; }
  .sheet-grip { display: block; width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--edge); }
  .selects select { min-width: 0; width: 100%; } .selects label { flex: 1 1 140px; }
}
@keyframes sheet-in { from { transform: translateY(100%); } }
.sheet-scrim { position: fixed; inset: 0; z-index: 54; background: #0b0d0f80; animation: fade-in .25s ease both; }
.sheet-scrim.out { animation: fade-out .2s ease both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ================================================================
   THE BOOK FORM (iPhone Duo). html.duo is set in <head> before paint.
   ================================================================ */
.duo .night, .duo .closer, .duo .nav-link, .duo .nav-cta, .duo .scroll-cue { display: none; }
.duo body { background: var(--paper); }
.duo .nav { width: auto; background: #14110ecc; border-color: #ffffff14; color: var(--night-ink); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); left: max(14px, env(safe-area-inset-left)); transform: none; padding: 6px 10px; }
.duo .shelf { padding: calc(70px + env(safe-area-inset-top)) 22px 40px; }
.duo .shelf[data-view="shelf"] .books { --row: 200px; padding: 0 6px 32px; }
.duo .shelf-head h2 { font-size: 40px; }
.duo .counts b { font-size: 28px; }
.duo .book-hero { padding: calc(64px + env(safe-area-inset-top)) 22px 34px; grid-template-columns: 1fr; justify-items: start; }
.duo .back { display: inline-flex; align-items: center; }
.duo .cover-lg { width: min(140px, 36vw); }
.duo .book-body { padding: 26px 22px 60px; }
.duo .toc { top: 0; box-shadow: none; background: var(--paper); margin: 0 -22px 18px; padding: 10px 22px; }
.duo .pager { grid-template-columns: 1fr; } .duo .pg-next { text-align: left; }

/* Closed: one page. The shelf on /library/, the book on a book's page. */
.duo[data-fold="closed"] .book-hero { grid-template-columns: 112px 1fr; gap: 20px; align-items: end; }
.duo[data-fold="closed"] .cover-lg { width: 112px; }
.duo[data-fold="closed"] .book-hero h1 { font-size: 42px; }
.duo[data-fold="closed"] .book-sub { font-size: 18px; }
.duo[data-fold="closed"] .facts { gap: 10px 18px; }
.duo[data-fold="closed"] .book-hero { align-items: start; }
.duo[data-fold="closed"] .book-hero { margin: calc(8px + env(safe-area-inset-top)) 10px 0; padding-top: 72px; border-radius: 24px; overflow: hidden; }
.duo[data-fold="closed"] .page-book .shelf { display: none; }

/* Open: a two-page spread; the gutter sits on the hinge. */
.duo[data-fold="open"] body { height: 100vh; height: 100dvh; overflow: hidden; background: var(--walnut-deep); }
.duo[data-fold="open"] .spread { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--hinge) minmax(0, 1fr);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--walnut-deep); }
.duo[data-fold="open"] .leaf { display: block; grid-row: 1; height: 100%; min-height: 0; max-width: none; margin: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); -webkit-overflow-scrolling: touch; }
.duo[data-fold="open"] .leaf-shelf { grid-column: 1; border-radius: 10px 0 0 10px; box-shadow: inset -28px 0 32px -28px #0000004d; view-transition-name: lib-shelf; }
.duo[data-fold="open"] .leaf-book { grid-column: 3; border-radius: 0 10px 10px 0; box-shadow: inset 28px 0 32px -28px #0000004d; view-transition-name: lib-page; }
.duo[data-fold="open"] .gutter { display: block; grid-column: 2; grid-row: 1; background: repeating-linear-gradient(to bottom, var(--brass) 0 6px, transparent 6px 11px), #00000040; opacity: .55; }
.duo[data-fold="open"] .foot { display: none; }
.duo[data-fold="open"] .nav { position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
.duo[data-fold="open"] .page-book .shelf { display: block; }
.duo[data-fold="open"] .shelf { padding-top: calc(62px + env(safe-area-inset-top)); }
.duo[data-fold="open"] .shelf-head h2 { font-size: 34px; }
.duo[data-fold="open"] .book-hero { grid-template-columns: auto 1fr; align-items: end; padding-top: calc(28px + env(safe-area-inset-top)); }
.duo[data-fold="open"] .book-hero .back { display: none; }
.duo[data-fold="open"] .cover-lg { width: 128px; }
.duo[data-fold="open"] .book-hero h1 { font-size: 44px; }
.duo[data-fold="open"] .book-sub { font-size: 19px; }
.duo[data-fold="open"] .facts { gap: 10px 18px; }
.duo[data-fold="open"] .colophon { display: grid; place-items: center; }
.colo-inner { max-width: 360px; padding: 40px 28px; text-align: center; }
.colophon h1 { margin: 0 0 10px; font-size: 44px; }
.colo-lede { margin: 0 0 26px; font: italic 400 22px/1.2 var(--display); color: var(--soft); }
.colophon > .colo-inner > p:not(.kicker):not(.colo-lede) { color: var(--soft); font-size: 15px; }
.colo-orn { display: flex; justify-content: center; align-items: flex-end; gap: 3px; height: 54px; margin: 0 auto 24px; padding-bottom: 4px; border-bottom: 3px solid var(--walnut); width: 96px; }
.colo-orn i { width: 12px; border-radius: 2px 2px 0 0; background: var(--brass); }
.colo-orn i:nth-child(1) { height: 38px; background: #6B2D2A; } .colo-orn i:nth-child(2) { height: 46px; background: #2E4A3F; } .colo-orn i:nth-child(3) { height: 50px; } .colo-orn i:nth-child(4) { height: 40px; background: #24344F; } .colo-orn i:nth-child(5) { height: 44px; transform: rotate(10deg); transform-origin: bottom left; background: #5A4A2E; }
.colo-feature { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; margin-top: 24px; padding: 14px; border-radius: 16px; border: 1px solid var(--edge); background: var(--card); text-align: left; text-decoration: none; }
.colo-feature > span { display: grid; gap: 2px; } .colo-feature .kicker { margin: 0; } .colo-feature b { font: 400 22px/1.1 var(--display); } .colo-feature > span > span:last-child { font-size: 14px; color: var(--soft); }

/* ================================================================
   MOTION. Opening a book: a cross-document view transition; the tapped cover (or spine)
   becomes the book's hero cover. Folding the Duo: a same-document view transition around
   the form change (library.js). Everything rides on the generated springs.
   ================================================================ */
@view-transition { navigation: auto; }
#heroCover { view-transition-name: lib-cover; }
::view-transition-group(*) { animation-duration: var(--spring-ms); animation-timing-function: var(--spring); }
::view-transition-group(lib-cover) { z-index: 20; }
::view-transition-group(lib-nav) { z-index: 30; animation: none; }
::view-transition-old(lib-cover), ::view-transition-new(lib-cover) { animation-duration: calc(var(--spring-ms) * .5); height: 100%; object-fit: fill; }
/* Into a book: the shelf recedes like a card stack, the page rises into place. */
::view-transition-old(root) { animation: var(--spring-ms) var(--spring) both lib-recede; }
::view-transition-new(root) { animation: var(--spring-ms) var(--spring) both lib-rise; }
@keyframes lib-recede { to { opacity: 0; transform: scale(.94); } }
@keyframes lib-rise { from { opacity: 0; transform: translateY(32px); } }
/* Back to the shelf: the reverse. */
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: lib-sink; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: lib-return; }
@keyframes lib-sink { to { opacity: 0; transform: translateY(40px); } }
@keyframes lib-return { from { opacity: 0; transform: scale(.95); } }

/* In the open Duo the shelf stays put; only the right-hand page turns. */
.duo[data-fold="open"]::view-transition-old(root), .duo[data-fold="open"]::view-transition-new(root) { animation: none; }
.duo[data-fold="open"]::view-transition-group(lib-page) { animation: none; }
.duo[data-fold="open"]::view-transition-old(lib-page) { animation: var(--spring-ms) var(--spring) both lib-page-out; }
.duo[data-fold="open"]::view-transition-new(lib-page) { animation: var(--spring-ms) var(--spring) both lib-page-in; }
@keyframes lib-page-out { to { opacity: 0; transform: translateX(4%); } }
@keyframes lib-page-in { from { opacity: 0; transform: translateX(-7%); } }

/* Unfolding and folding (library.js sets data-fold-anim during the transition). The page
   that appears swings open from the hinge; the page that stays glides into its half. */
html[data-fold-anim] .leaf-shelf { view-transition-name: lib-shelf; }
html[data-fold-anim] .leaf-book { view-transition-name: lib-page; }
html[data-fold-anim] #heroCover { view-transition-name: none; }
html[data-fold-anim]::view-transition-old(root), html[data-fold-anim]::view-transition-new(root) { animation: none; }
html[data-fold-anim]::view-transition-image-pair(lib-page), html[data-fold-anim]::view-transition-image-pair(lib-shelf) { perspective: 1600px; }
html[data-fold-anim="opening"]::view-transition-new(lib-page):only-child { transform-origin: left center; animation: var(--spring-ms) var(--spring) both swing-from-left; }
html[data-fold-anim="opening"]::view-transition-new(lib-shelf):only-child { transform-origin: right center; animation: var(--spring-ms) var(--spring) both swing-from-right; }
html[data-fold-anim="closing"]::view-transition-old(lib-page):only-child { transform-origin: left center; animation: calc(var(--spring-ms) * .8) var(--spring) both swing-to-left; }
html[data-fold-anim="closing"]::view-transition-old(lib-shelf):only-child { transform-origin: right center; animation: calc(var(--spring-ms) * .8) var(--spring) both swing-to-right; }
@keyframes swing-from-left { from { transform: rotateY(-96deg); filter: brightness(.55); opacity: .4; } 60% { opacity: 1; } }
@keyframes swing-from-right { from { transform: rotateY(96deg); filter: brightness(.55); opacity: .4; } 60% { opacity: 1; } }
@keyframes swing-to-left { to { transform: rotateY(-96deg); filter: brightness(.5); opacity: 0; } }
@keyframes swing-to-right { to { transform: rotateY(96deg); filter: brightness(.5); opacity: 0; } }

/* Shelf / Grid / List and filtering: books glide to their new places. */
::view-transition-group(*.bk) { animation-duration: var(--spring-soft-ms); animation-timing-function: var(--spring-soft); }

/* Reduced motion: a short crossfade, nothing spatial. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .12s !important; animation-timing-function: linear !important; }
  ::view-transition-group(*) { animation-name: none !important; }
  ::view-transition-old(*) { animation-name: fade-out !important; transform: none !important; }
  ::view-transition-new(*) { animation-name: fade-in !important; transform: none !important; }
  .cover, .spine, .cta, .conn, .scroll-cue span { transition: none !important; animation: none !important; }
  .filters.sheet-in { animation: none; }
}

/* ── Touch ── */
@media (pointer: coarse) {
  .nav-cta, .toc a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-link { min-height: 44px; align-items: center; }
  .chip span { min-height: 44px; }
  .bk-link:hover .spine, .bk-link:hover .cover { transform: none; }
}
@media (hover: none) { .conn:hover { transform: none; } }


/* ================================================================
   V2: the lamp-lit library (owner's mockup, 2026-10-22) merged with the app pattern.
   ================================================================ */
.night { background: radial-gradient(120% 90% at 78% 30%, #3a2a1c 0%, #1b1511 45%, #0d0f11 100%); }
.night::before { background:
  radial-gradient(38% 30% at 80% 22%, #f5c77a2e, transparent 70%),
  radial-gradient(30% 40% at 12% 90%, #b48a481a, transparent 70%),
  repeating-linear-gradient(90deg, #ffffff05 0 9px, transparent 9px 13px, #00000014 13px 22px, transparent 22px 30px); }
.night::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #0d0f11cc 0%, transparent 22%, transparent 70%, #0d0f11 100%), repeating-linear-gradient(180deg, transparent 0 150px, #00000059 150px 160px); opacity: .9; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; min-height: min(100svh, 860px); padding-top: 110px; padding-bottom: 40px; }
.hero h1 { font-size: clamp(54px, 7vw, 96px); line-height: .94; margin: 0 0 18px; }
.hero-tag { margin: 0 0 14px; font: 400 clamp(20px, 2vw, 26px)/1.25 var(--display); color: var(--night-ink); }
.cta { gap: 10px; }
.play { display: inline-block; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; border: 1px solid currentColor; position: relative; }
.play::after { content: ''; position: absolute; left: 8px; top: 6px; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.epigraph { position: relative; margin: 48px 0 0; padding: 0 0 0 56px; max-width: 30em; }
.epigraph::before { content: '\201C'; position: absolute; left: 0; top: -18px; font: 400 76px/1 var(--display); color: var(--brass-hi); }
.epigraph p { margin: 0 0 8px; font: italic 400 22px/1.35 var(--display); color: var(--night-ink); }
.epigraph footer { font-size: 14px; color: var(--night-soft); }

/* The desk and the stack of nine books: CSS 3D, each book a link. */
.desk { position: relative; align-self: end; justify-self: center; width: min(520px, 100%); padding-bottom: 34px; }
.desk::after { content: ''; position: absolute; left: -12%; right: -12%; bottom: 0; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, #000000b0, transparent); filter: blur(4px); }
.stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; perspective: 1200px; }
.stk { position: relative; z-index: 1; width: var(--w); margin-top: -2px; transform: translateX(var(--shift)) rotate(var(--tilt)); animation: stk-in var(--spring-ms) var(--spring) both; animation-delay: calc(var(--i) * 55ms + 120ms); }
@keyframes stk-in { from { opacity: 0; transform: translate(var(--shift), -60px) rotate(calc(var(--tilt) * 4)); } }
.stk-link { position: relative; display: block; height: 42px; text-decoration: none; transform-style: preserve-3d; transition: transform var(--spring-soft-ms) var(--spring-soft), filter .3s; }
.stk-face { position: absolute; inset: 0 14px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-radius: 3px 0 0 3px; color: var(--cv-ink);
  background: linear-gradient(180deg, #ffffff2e, transparent 30%, transparent 70%, #00000038), var(--cv-bg); box-shadow: inset 0 1px 0 #ffffff33, inset 0 -2px 0 #00000040, 0 10px 18px -12px #000; }
.stk-face::before, .stk-face::after { content: ''; position: absolute; top: 5px; bottom: 5px; width: 2px; background: var(--cv-foil); opacity: .8; }
.stk-face::before { left: 7px; } .stk-face::after { right: 26%; opacity: .35; }
.stk-title { font: 400 clamp(15px, 1.5vw, 20px)/1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-face[data-type="grotesk"] .stk-title { font: 800 13px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; }
.stk-face[data-type="mono"] .stk-title { font: 400 12px/1 var(--mono); text-transform: uppercase; }
.stk-face[data-type="slab"] .stk-title { font-style: italic; }
.stk-author { flex: none; font: 400 11px/1 var(--body); opacity: .85; }
.stk-pages { position: absolute; top: 2px; bottom: 2px; right: 0; width: 15px; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(180deg, #f3ead6 0 2px, #d9cdb4 2px 3px); box-shadow: inset 4px 0 6px -3px #0000004d; }
.stk-link:hover, .stk-link:focus-visible { transform: translateX(-22px) translateZ(10px); filter: brightness(1.12); }
.stk-link:focus-visible { outline-offset: 4px; }

/* The stats bar, glass over the room. */
.stats-wrap { position: relative; z-index: 2; max-width: 1180px; margin: -8px auto 0; padding: 0 var(--gutter-x); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 18px 10px; list-style: none; border-radius: 22px; background: #14110ea6; border: 1px solid #ffffff14; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.stats li { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 4px 18px; }
.stats li + li { border-left: 1px solid #ffffff14; }
.stats svg { grid-row: 1 / 3; width: 26px; height: 26px; fill: var(--brass-hi); }
.stats b { font: 400 30px/1 var(--display); color: var(--night-ink); }
.stats span { font-size: 13px; color: var(--night-soft); }

/* All books: category chips, cards with real covers, status and rating. */
.shelf { padding-top: 88px; }
.anchor { position: absolute; top: 0; }
.shelf-head { display: block; margin-bottom: 18px; }
.shelf-head h2 { margin: 0 0 6px; font-size: clamp(36px, 4.4vw, 52px); }
.shelf-sub { margin: 0; color: var(--soft); }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.cat { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--edge); background: var(--card); font-size: 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.cat span { opacity: .7; }
.cat:hover { border-color: var(--brass); }
.cat[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #F2EBDD; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .cat[aria-pressed="true"] { background: var(--night-ink); border-color: var(--night-ink); color: var(--ink); } }
.seg button svg { width: 18px; height: 18px; fill: currentColor; vertical-align: -4px; }
.shelf[data-view="grid"] .books { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
.shelf[data-view="grid"] .bk-link { padding: 10px 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--edge); box-shadow: 0 1px 0 #0000000a; transition: transform var(--spring-soft-ms) var(--spring-soft), box-shadow .3s, border-color .3s; }
.shelf[data-view="grid"] .bk-link:hover { transform: translateY(-4px); border-color: var(--brass); box-shadow: 0 18px 30px -20px #00000080; }
.shelf[data-view="grid"] .bk-link:hover .cover { transform: none; }
.shelf[data-view="grid"] .bk-title { font-size: 19px; }
.shelf[data-view="grid"] .bk-by { font-size: 13px; }
.bk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.bk-status { display: none; }
.badge-st { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 6px; font: 600 11.5px/1 var(--body); background: #e9e3d6; color: #5a5245; }
.st-finished { background: #DDEBDD; color: #2F5D34; }
.st-reading, .st-revisiting { background: #DCE6F3; color: #2D4F7C; }
.st-revisiting { background: #F3E6CC; color: #7A5418; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .badge-st { background: #2c261f; color: #cfc4b1; } .st-finished { background: #1f3323; color: #a8d5a8; } .st-reading { background: #1d2a3b; color: #a9c4ea; } .st-revisiting { background: #3a2e18; color: #e8c787; } }
.stars { display: inline-block; font-size: 14px; letter-spacing: 1px; line-height: 1; background: linear-gradient(90deg, var(--brass) calc(var(--r) / 5 * 100%), #d8cfbf calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .stars { background: linear-gradient(90deg, var(--brass-hi) calc(var(--r) / 5 * 100%), #4a4137 calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; } }
.cover.has-img { background: var(--cv-bg); }
.cover.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cover.has-img::after { z-index: 1; background: linear-gradient(90deg, #00000040, #ffffff26 3%, transparent 8%); width: auto; inset: 0; }
.cover-xs { width: 40px; padding: 6px 4px 4px 6px; }
.cover-xs .cv-title { font-size: 6px; }

/* My Reading Journey. */
.journey { position: relative; overflow: hidden; color: var(--night-ink); background: radial-gradient(80% 70% at 75% 0%, #3a2a1c 0%, #15181c 60%), #111417; isolation: isolate; }
.mtn { position: absolute; inset: auto 0 0; height: 62%; z-index: -1; }
.mtn svg { width: 100%; height: 100%; display: block; }
.journey-inner { max-width: 1180px; margin: 0 auto; padding: 84px var(--gutter-x) 72px; }
.journey-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.journey-head h2 { margin: 0 0 6px; font-size: clamp(36px, 4.4vw, 52px); }
.journey-head p { margin: 0; color: var(--night-soft); }
.seg-dark { background: #ffffff0d; border-color: #ffffff1f; }
.seg-dark button { color: var(--night-soft); }
.seg-dark button[aria-pressed="true"] { background: var(--night-ink); color: var(--ink); }
.track-wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter-x)); padding: 0 var(--gutter-x); }
.track-wrap::-webkit-scrollbar { display: none; }
.track { position: relative; height: 300px; min-width: calc(var(--n) * 132px); margin: 0 64px; }
.track .path { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 220px; overflow: visible; }
.track .path path { fill: none; stroke: #d7b06c55; stroke-width: 2; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.track .path .path-done { stroke: var(--brass-hi); stroke-dasharray: var(--done) 1; stroke-width: 2.5; filter: drop-shadow(0 0 6px #d7b06c99); }
.track ol { list-style: none; margin: 0; padding: 0; }
.stop { position: absolute; left: var(--x); top: var(--y); width: 128px; margin-left: -64px; transition: opacity .35s, filter .35s; }
.stop a { position: relative; display: block; height: 0; text-decoration: none; color: inherit; }
.stop .cover { position: absolute; left: 50%; bottom: 16px; width: 46px; transform: translateX(-50%); transition: transform var(--spring-soft-ms) var(--spring-soft); }
.stop a:hover .cover, .stop a:focus-visible .cover { transform: translateX(-50%) translateY(-6px) scale(1.06); }
.stop .dot { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 0 4px #d7b06c33, 0 0 14px #d7b06c; }
.stop-reading .dot { background: #f2ebdd; box-shadow: 0 0 0 4px #f2ebdd33, 0 0 16px #f2ebdd; animation: pulse 2.4s ease-in-out infinite; }
.stop-queued .dot { background: #5D7FA8; box-shadow: 0 0 0 4px #5d7fa833; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px #f2ebdd14, 0 0 22px #f2ebdd; } }
.stop-label { position: absolute; top: 14px; left: 0; right: 0; display: grid; gap: 4px; text-align: center; }
.stop b { font: 400 15px/1.12 var(--display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stop b + span { font-size: 12px; color: var(--night-soft); }
.stop-reading b + span { color: var(--brass-hi); }
.stop.dim { opacity: .22; filter: grayscale(.8); }

/* Themes hub and latest insights. */
.duo-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; max-width: 1180px; margin: 0 auto; padding: 72px var(--gutter-x) 24px; }
.hub, .insights { padding: 26px 26px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--edge); }
.hub header h2, .insights header h2 { margin: 0 0 4px; font-size: 30px; }
.hub header p { margin: 0; font-size: 14px; color: var(--soft); }
.hub-map { position: relative; aspect-ratio: 1.3 / 1; margin-top: 8px; }
.hub-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-map line { stroke: var(--edge); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hub-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; text-align: center; background: var(--paper); border: 1px solid var(--edge); box-shadow: 0 0 0 10px #b48a4812, 0 14px 30px -18px #0000006b; }
.hub-core b { padding: 0 10%; font: 400 clamp(14px, 1.5vw, 19px)/1.1 var(--display); }
.hub-map ul { list-style: none; margin: 0; padding: 0; }
.hub-map li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.hub-map a { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.hub-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, var(--card)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); transition: transform var(--spring-soft-ms) var(--spring-soft); }
.hub-ic svg { width: 19px; height: 19px; fill: var(--c); }
.hub-map a:hover .hub-ic, .hub-map a:focus-visible .hub-ic { transform: scale(1.12); }
.hub-t { display: grid; max-width: 120px; }
.hub-t b { font-size: 12.5px; line-height: 1.2; font-weight: 700; }
.hub-t span { font-size: 11px; line-height: 1.25; color: var(--soft); }
.insights header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.in-count { font-size: 13px; color: var(--soft); }
.in-list { list-style: none; margin: 0; padding: 0; }
.in-list li + li { border-top: 1px solid var(--edge); }
.in-list a { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; padding: 14px 0; text-decoration: none; }
.in-body { display: grid; gap: 4px; min-width: 0; }
.in-body b { font-size: 15px; }
.in-text { font-size: 13.5px; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.in-from { font-size: 12px; color: var(--soft); }
.in-side { display: grid; justify-items: end; align-content: space-between; gap: 6px; font-size: 12px; color: var(--soft); white-space: nowrap; }
.in-tag { padding: 3px 9px; border-radius: 6px; background: var(--paper); border: 1px solid var(--edge); font-size: 11.5px; }
.in-more summary { cursor: pointer; padding: 10px 0 0; font-size: 14px; color: var(--brass-ink); list-style: none; }
.in-more summary::-webkit-details-marker { display: none; }
.closer { border-top: 0; }

/* The book page: light, cover-first, tabs and a side card. */
.page-book main { padding-top: 84px; }
.book-hero { position: relative; display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; padding: 26px var(--gutter-x) 30px; max-width: 1180px; margin: 0 auto; color: var(--text); }
.back { display: inline-flex; grid-column: 1 / -1; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--soft); text-decoration: none; font-size: 15px; }
.back:hover { color: var(--text); }
.hero-cover { perspective: 1400px; }
.cover-lg { width: 100%; }
.hero-cover .cover { transform: rotateY(-8deg); transform-origin: left center; box-shadow: inset 5px 0 0 -1px #00000033, 24px 34px 50px -24px #000000b3, 0 3px 0 -1px #eee5d4, 0 4px 0 -1px #bbb, 4px 6px 0 -1px #e6dcc8; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.chips-row span { padding: 4px 10px; border-radius: 6px; background: var(--card); border: 1px solid var(--edge); font-size: 12.5px; }
.book-hero h1 { margin: 0 0 6px; font-size: clamp(40px, 5.2vw, 68px); line-height: .98; }
.book-sub { color: var(--soft); }
.book-by { margin: 0 0 8px; font-size: 19px; }
.book-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 10px; font-size: 14.5px; color: var(--soft); }
.book-meta span + span::before { content: '•'; margin: 0 10px; color: var(--faint); }
.book-rating { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; color: var(--soft); }
.book-rating .stars { font-size: 20px; }
.book-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.book-ctas .btn, .book-ctas .btn-ghost { display: inline-flex; align-items: center; text-decoration: none; }
.btn-dark .play { width: 18px; height: 18px; border: 0; } .btn-dark .play::after { left: 4px; top: 3px; border-width: 6px 0 6px 9px; border-color: transparent; border-left-color: currentColor; border-style: solid; }
.btn-out { background: var(--card); }
.pull { margin: 0; padding: 16px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--edge); border-left: 3px solid var(--brass); }
.pull p { margin: 0; font: italic 400 20px/1.35 var(--display); }
.book-body { max-width: 1180px; padding-top: 6px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 6px; border-bottom: 1px solid var(--edge); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; position: relative; padding: 14px 14px; font-size: 15px; color: var(--soft); text-decoration: none; }
.tabs a[aria-selected="true"] { color: var(--text); font-weight: 700; }
.tabs a[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--text); border-radius: 2px; }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 34px; align-items: start; }
.panel-h { margin: 34px 0 6px; font-size: 15px; font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--faint); }
.js .panel { display: none; }
.js .panel.on { display: block; }
.js .panel.on.anim { animation: panel-in var(--spring-soft-ms) var(--spring-soft) both; }
.js .panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.sec h3 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 32px); }
.sec h4 { margin: 0 0 8px; }
.idea h4 { display: flex; gap: 12px; align-items: baseline; font-size: 24px; font-family: var(--display); font-weight: 400; }
.refl h4 { font: 400 22px/1.2 var(--display); margin: 6px 0; }
.fw { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fw li { display: grid; grid-template-columns: 34px minmax(140px, 220px) 1fr; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--edge); }
.fw-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--c) 22%, var(--card)); color: color-mix(in srgb, var(--c) 80%, #000); font: 700 14px/1 var(--body); }
.fw b { font-size: 15px; }
.fw li > span:last-child { font-size: 14px; color: var(--soft); }
#thesis .prose { font: 400 clamp(20px, 2.1vw, 24px)/1.4 var(--display); }
.sec-diagnostic .prose li, .sec-takeaways .prose li { margin-bottom: 8px; }
.sec-diagnostic .prose ul { list-style: none; padding: 0; }
.sec-diagnostic .prose li { padding: 12px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--edge); font-style: italic; }
.side-card { position: sticky; top: 92px; display: grid; gap: 18px; margin-top: 34px; padding: 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--edge); }
.sc-l { margin: 0 0 6px; font-size: 13px; color: var(--soft); }
.sc-st { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; background: none; padding: 0; }
.sc-ic { width: 18px; height: 18px; fill: currentColor; }
.sc-st.st-finished { color: #2F7D3A; } .sc-st.st-reading { color: #2D5F9C; } .sc-st.st-revisiting { color: #9A6A16; } .sc-st.st-queued, .sc-st.st-wishlist { color: var(--soft); }
.sc-sub { margin: 4px 0 0; font-size: 13px; color: var(--soft); }
.side-card .stars { font-size: 22px; }
.sc-rec { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.sc-rec svg { width: 18px; height: 18px; fill: currentColor; }
.rec-yes { color: #2F7D3A; } .rec-no { color: var(--soft); }
.pager { margin-top: 30px; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 104px; }
  .desk { width: min(440px, 92%); justify-self: center; }
  .stats { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
  .stats li:nth-child(4) { border-left: 0; }
  .duo-row { grid-template-columns: minmax(0, 1fr); }
  .book-grid { grid-template-columns: minmax(0, 1fr); }
  .side-card { position: static; grid-template-columns: repeat(3, auto); justify-content: start; gap: 22px 34px; margin-top: 10px; }
}
@media (max-width: 699px) {
  .hero h1 { font-size: 48px; }
  .epigraph { margin-top: 32px; padding-left: 42px; } .epigraph::before { font-size: 60px; } .epigraph p { font-size: 19px; }
  .stk-link { height: 34px; } .stk-title { font-size: 14px; } .stk-author { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats li { padding: 4px 10px; } .stats li:nth-child(odd) { border-left: 0; } .stats li:nth-child(4) { border-left: 1px solid #ffffff14; }
  .stats li:last-child { grid-column: 1 / -1; border-left: 0; }
  .shelf[data-view="grid"] .books { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hub-map { aspect-ratio: auto; }
  .hub, .insights { padding: 20px 16px; }
  .seg-dark { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg-dark button { padding: 0 11px; flex: none; }
  .hub-map svg, .hub-core { display: none; }
  .hub-map ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 14px; }
  .hub-map li { position: static; transform: none; }
  .book-hero { grid-template-columns: 120px 1fr; gap: 18px; }
  .book-hero h1 { font-size: 36px; }
  .pull, .book-ctas { grid-column: 1 / -1; }
  .fw li { grid-template-columns: 30px 1fr; } .fw li > span:last-child { grid-column: 2; }
  .side-card { grid-template-columns: 1fr 1fr; }
  .in-list a { grid-template-columns: 36px 1fr; } .in-side { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; }
}
@media (prefers-reduced-motion: reduce) { .stk, .js .panel.on.anim { animation: none !important; } .stk-link, .stop .cover, .hub-ic { transition: none !important; } .stop-reading .dot { animation: none; } }

/* The book form keeps its spread; the long-scroll sections live on the closed page only. */
.duo .page-book main { padding-top: 0; }
.duo .duo-row { grid-template-columns: 1fr; padding: 24px 16px; }
.duo .journey-inner { padding: 48px 20px; }
.duo .book-hero { grid-template-columns: 112px 1fr; gap: 16px; padding: calc(64px + env(safe-area-inset-top)) 20px 18px; margin: 0; border-radius: 0; }
.duo .book-hero h1 { font-size: 34px; }
.duo .pull, .duo .book-ctas { grid-column: 1 / -1; }
.duo .back { display: inline-flex; }
.duo .book-grid { grid-template-columns: minmax(0, 1fr); }
.duo .side-card { position: static; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 16px 20px; margin-top: 8px; }
.duo .tabs { position: sticky; top: 0; z-index: 4; background: var(--paper); }
.duo[data-fold="open"] .book-hero { padding-top: calc(20px + env(safe-area-inset-top)); }
.duo[data-fold="open"] .back { display: none; }
.hero-cover { justify-self: stretch; min-width: 0; }
.duo[data-fold="open"] .book-hero { grid-template-columns: 128px 1fr; align-items: start; }

/* ================================================================
   V3 (owner, 2026-10-22: "too dark, not what I wanted"): the mockup, literally.
   A photographed room for the hero, real 3D books on its table, a light page.
   ================================================================ */
/* Nav: the mockup's bar. Monogram, links, search, avatar. Clear over the photo, cream elsewhere. */
.nav { width: min(calc(100% - 32px), 1320px); display: grid; grid-template-columns: auto 1fr auto auto; gap: 22px; padding: 8px 10px 8px 16px; border-radius: 18px; }
.nav nav { justify-content: flex-start; gap: 2px; }
.nav-link { font-size: 14.5px; opacity: .88; }
.nav-link[aria-current="page"] { opacity: 1; font-weight: 700; }
.mono { display: inline-flex; align-items: center; height: 40px; text-decoration: none; color: inherit; }
.mono span { font: 400 38px/1 var(--display); letter-spacing: -.16em; }
.mono i { font-style: italic; margin-left: -.02em; }
.nav-search { display: flex; align-items: center; gap: 8px; width: clamp(200px, 22vw, 320px); height: 40px; padding: 0 14px; border-radius: 999px; background: #ffffff14; border: 1px solid #ffffff2e; }
.nav-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; opacity: .75; }
.nav-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; color: inherit; }
.nav-search input::placeholder { color: currentColor; opacity: .6; }
.nav-search:focus-within { border-color: var(--brass-hi); box-shadow: 0 0 0 3px #d7b06c33; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; background: linear-gradient(140deg, #d7b06c, #8a6427); color: #1b130d; font: 700 13px/1 var(--body); box-shadow: 0 0 0 2px #ffffff40; }
.nav.scrolled, .page-book .nav, .page-404 .nav, .nav-book { background: #f8f4eadb; color: var(--text); border-color: var(--edge); box-shadow: 0 10px 30px -22px #00000059; }
.nav.scrolled .nav-search, .nav-book .nav-search { background: var(--card); border-color: var(--edge); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .nav.scrolled, .page-book .nav, .page-404 .nav, .nav-book { background: #1b1612db; color: var(--text); } }
@media (max-width: 1100px) { .nav .nav-link { display: none; } .nav { grid-template-columns: auto 1fr auto; } .nav nav { display: none; } .nav-search { width: 100%; justify-self: end; max-width: 360px; } }

/* Hero: the stack of books beside the copy (music.css lights it). */
.night { background: #1b120c; min-height: min(100svh, 940px); }
.night::before, .night::after, .story { display: none; }
.room { position: absolute; inset: 0; z-index: -2; }
.room img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; filter: brightness(1.22) saturate(1.06) contrast(1.02); }
.room-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #160d07e6 0%, #160d07b8 30%, #160d0740 55%, transparent 72%), linear-gradient(0deg, #160d07cc 0%, transparent 30%), linear-gradient(180deg, #160d0799 0%, transparent 18%); }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: 1fr auto; align-items: center; gap: 28px 40px; max-width: 1320px; min-height: min(100svh, 940px); padding: 116px var(--gutter-x) 30px; }
.hero .hero-copy { grid-column: 1; grid-row: 1; max-width: 600px; }
.hero h1 { font-size: clamp(54px, 6.6vw, 94px); margin-bottom: 14px; }
.hero-tag { color: #f5ead6; }
.lede { color: #e2d5bf; }
.cta-note { margin-left: 8px; font-weight: 400; font-size: 13px; opacity: .7; }
.cta-ghost { border-color: #ffffff4d; }
.epigraph { grid-column: 1; grid-row: 2; align-self: end; margin: 0; }
.stats-wrap { grid-column: 2; grid-row: 2; align-self: end; max-width: none; margin: 0; padding: 0; }
.stats { background: #1d140dc7; border-color: #ffffff1f; padding: 14px 6px; border-radius: 18px; }
.stats li { padding: 4px 14px; }
.stats b { font-size: 28px; }

/* The stack: nine real books in CSS 3D. Spine to the front, cover on top, page block at the end. */
.desk { grid-column: 2; grid-row: 1; align-self: end; justify-self: center; width: auto; padding: 0 0 14px; perspective: 1700px; perspective-origin: 40% 0%; }
.desk::after { left: -6%; right: 0; bottom: 4px; height: 46px; background: radial-gradient(closest-side, #000000c0, transparent); }
.stack { --d: 210px; transform-style: preserve-3d; transform: rotateX(-17deg) rotateY(-26deg); align-items: flex-start; perspective: none; }
.stk { position: relative; width: var(--len); height: var(--t); margin: 0; transform-style: preserve-3d; transform: translateX(var(--shift)) rotateY(var(--turn)); animation: stk-in3 var(--spring-ms) var(--spring) both; animation-delay: calc(var(--i) * 60ms + 150ms); }
@keyframes stk-in3 { from { opacity: 0; transform: translate3d(var(--shift), -120px, 0) rotateY(var(--turn)); } }
.stk-link { position: absolute; inset: 0; height: auto; display: block; transform-style: preserve-3d; transition: transform var(--spring-soft-ms) var(--spring-soft), filter .3s; }
.stk-link:hover, .stk-link:focus-visible { transform: translateZ(34px) translateX(-10px); filter: brightness(1.1); }
.stk-face { inset: 0; padding: 0 18px 0 16px; border-radius: 4px 2px 2px 4px; transform: translateZ(calc(var(--d) / 2));
  background: linear-gradient(180deg, #ffffff38 0%, #ffffff0d 22%, transparent 50%, #00000026 78%, #00000055 100%), repeating-linear-gradient(90deg, #ffffff07 0 1px, transparent 1px 3px), var(--cv-bg);
  box-shadow: inset 0 1px 0 #ffffff40, inset 0 -1px 0 #00000059; }
.stk-face::before { top: 0; bottom: 0; left: 10px; width: 1.5px; opacity: .9; }
.stk-face::after { top: 0; bottom: 0; right: 30%; width: 1.5px; opacity: .45; }
.stk-title { font-size: clamp(14px, calc(var(--t) * .5), 21px); text-shadow: 0 1px 0 #00000026; }
.stk-author { font-size: 11.5px; }
.stk-top { position: absolute; left: 0; top: 0; width: var(--len); height: var(--d); overflow: hidden; transform-origin: top center; transform: translateZ(calc(var(--d) / 2)) rotateX(-90deg); background: linear-gradient(90deg, #00000030, transparent 8%), var(--cv-bg); border-radius: 2px; }
.stk-top img { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--len); object-fit: cover; transform: translate(-50%, -50%) rotate(90deg); filter: brightness(.95); }
.stk-pages { top: 0; bottom: auto; right: auto; left: var(--len); width: var(--d); height: var(--t); border-radius: 0; transform-origin: left center; transform: translateZ(calc(var(--d) / 2)) rotateY(90deg);
  background: linear-gradient(90deg, #00000033, transparent 10%, transparent 92%, #0000002e), repeating-linear-gradient(180deg, #f4ecda 0 1.6px, #d8cbb0 1.6px 2.4px); box-shadow: none; }
.stk-pages::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--cv-bg); filter: brightness(.8); }

/* "How I read": a light legend strip under the hero. */
.how { max-width: 1320px; margin: 0 auto; padding: 30px var(--gutter-x) 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: baseline; }
.how h2 { margin: 0; font-size: 26px; }
.how > p { margin: 0; color: var(--soft); font-size: 14px; }
.how ol { grid-column: 1 / -1; list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.how li { padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--edge); font-size: 14px; color: var(--soft); }
.how .claim { display: flex; margin-bottom: 6px; }

/* All Books: the mockup's bar and its nine-across covers. */
.shelf { max-width: 1320px; padding-top: 52px; }
.shelf-head { margin-bottom: 14px; }
.shelf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.shelf-bar .cats { margin: 0; }
.js .shelf-bar .tools { display: flex; margin: 0; }
.cat { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.sort select { min-height: 42px; padding: 0 34px 0 14px; border-radius: 12px; border: 1px solid var(--edge); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23857d70' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 11px; -webkit-appearance: none; appearance: none; font: 400 14px var(--body); color: var(--text); }
.tool-btn { min-height: 42px; border-radius: 12px; font-size: 14px; }
.seg { border-radius: 12px; } .seg button { min-height: 34px; border-radius: 9px; padding: 0 10px; }
.shelf[data-view="grid"] .books { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
.shelf[data-view="grid"] .bk-link { padding: 8px 8px 12px; border-radius: 12px; gap: 9px; }
.shelf[data-view="grid"] .bk-title { font: 600 14px/1.25 var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shelf[data-view="grid"] .bk-by { font-size: 12.5px; }
.bk-foot { margin-top: 6px; gap: 4px 8px; }
.badge-st { min-height: 20px; padding: 0 7px; font-size: 11px; }
.bk-foot .stars { font-size: 12px; }

/* The bottom row: Journey (dark card), Themes, Insights, side by side like the mockup. */
.duo-row { max-width: 1320px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .95fr); gap: 18px; padding-top: 56px; align-items: stretch; }
.duo-row .journey { border-radius: 22px; }
.duo-row .journey-inner { padding: 26px 24px 22px; }
.duo-row .journey-head { flex-direction: column; align-items: flex-start; }
.duo-row .journey-head h2 { font-size: 30px; }
.duo-row .journey-head p { font-size: 14px; }
.duo-row .seg-dark button { min-height: 32px; padding: 0 12px; font-size: 13px; }
.duo-row .track-wrap { margin: 0 -24px; padding: 0 24px; }
.duo-row .track { min-width: calc(var(--n) * 104px); margin: 0 52px; height: 280px; }
.duo-row .stop { width: 104px; margin-left: -52px; }
.duo-row .stop b { font-size: 14px; }
.duo-row .mtn { height: 55%; }
@media (max-width: 1200px) { .duo-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .duo-row .journey { grid-column: 1 / -1; } }
@media (max-width: 760px) { .duo-row { grid-template-columns: minmax(0, 1fr); } .how ol { grid-template-columns: 1fr 1fr; } }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; padding-top: 100px; }
  .hero .hero-copy, .desk, .epigraph, .stats-wrap { grid-column: 1; grid-row: auto; }
  .desk { justify-self: center; }
  .stack { transform: scale(.82) rotateX(-17deg) rotateY(-26deg); transform-origin: top center; margin-bottom: -50px; }
  .room-shade { background: linear-gradient(180deg, #160d07d9 0%, #160d07a6 45%, #160d07cc 100%); }
  .room img { object-position: 75% 50%; }
}
@media (max-width: 699px) {
  .nav { gap: 10px; padding: 6px 8px 6px 12px; }
  .nav-search { height: 38px; }
  .mono span { font-size: 32px; }
  .stack { transform: scale(.62) rotateX(-17deg) rotateY(-26deg); margin-bottom: -120px; }
  .stats { grid-template-columns: repeat(3, 1fr); } .stats li:last-child { grid-column: auto; }
  .stats li:nth-child(4) { border-left: 0; } .stats li:nth-child(odd) { border-left: 1px solid #ffffff14; } .stats li:first-child, .stats li:nth-child(4) { border-left: 0; }
  .shelf-bar { flex-direction: column; align-items: stretch; }
  .shelf-bar .cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter-x)); padding: 0 var(--gutter-x); }
  .shelf-bar .cat { flex: none; }
  .shelf[data-view="grid"] .books { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 420px) { .shelf[data-view="grid"] .books { grid-template-columns: 1fr 1fr; } }
.duo .nav-search, .duo .avatar { display: none; }
.duo .nav { grid-template-columns: auto; }
@media (prefers-reduced-motion: reduce) { .stk { animation: none !important; } .stk-link { transition: none !important; } }
/* The stack, 2.5D: true CSS 3D faces didn't paint reliably (WebKit and Chromium), so each
   book is its spine plus two skewed faces sharing one depth vector (30px right, 24px up):
   the page block at its end (skewY), and on the top book its cover (skewX). */
.desk { perspective: none; padding: 40px 40px 14px 0; }
.stack { transform: none; perspective: none; align-items: flex-start; }
.stk { transform: translateX(var(--shift)) rotate(calc(var(--turn) * .5)); margin-top: -1px; }
@keyframes stk-in3 { from { opacity: 0; transform: translate(var(--shift), -90px) rotate(calc(var(--turn) * 3)); } }
.stk-link { transform-style: flat; }
.stk-link:hover, .stk-link:focus-visible { transform: translateX(-18px); filter: brightness(1.08); }
.stk-face { transform: none; border-radius: 3px 0 0 3px; }
.stk-pages { left: 100%; top: 0; width: 30px; height: var(--t); transform-origin: left top; transform: skewY(-38.66deg);
  background: linear-gradient(90deg, #0000004d, transparent 30%), repeating-linear-gradient(180deg, #f5edda 0 1.5px, #d6c8ab 1.5px 2.3px); border-radius: 0 2px 2px 0; }
.stk-pages::before { width: 3px; }
.stk-top { display: none; left: 0; top: auto; bottom: 100%; width: var(--len); height: 24px; transform-origin: left bottom; transform: skewX(-51.34deg); border-radius: 2px 2px 0 0;
  background: linear-gradient(0deg, #00000040, transparent 60%), var(--cv-bg); }
.stk:first-child .stk-top { display: block; }
.stk-top img { display: none; }
.stk-top::after { content: ''; position: absolute; inset: 6px 12% 6px 8%; border: 1px solid color-mix(in srgb, var(--cv-foil) 70%, transparent); border-radius: 1px; }
@media (max-width: 960px) { .stack { transform: scale(.82); transform-origin: top center; margin-bottom: -50px; } }
@media (max-width: 699px) { .stack { transform: scale(.66); margin-bottom: -110px; } .desk { padding-right: 20px; } }
/* v3 polish: nine across, equal cards; a compact hub; a balanced bottom row. */
@media (min-width: 1200px) { .page-home .shelf[data-view="grid"] .books { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; } }
.shelf[data-view="grid"] .bk { display: flex; }
.shelf[data-view="grid"] .bk-link { flex: 1; display: flex; flex-direction: column; }
.shelf[data-view="grid"] .bk-meta { flex: 1; display: flex; flex-direction: column; }
.shelf[data-view="grid"] .bk-foot { margin-top: auto; padding-top: 8px; }
.stats span { font-size: 12.5px; line-height: 1.25; }
.duo-row { align-items: start; }
.duo-row > * { min-height: 560px; }
.duo-row .journey { display: flex; flex-direction: column; }
.duo-row .journey-inner { flex: 1; display: flex; flex-direction: column; }
.duo-row .track-wrap { margin-top: auto; padding-bottom: 6px; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); }
.duo-row .track { height: 250px; }
.duo-row .mtn { height: 46%; }
.duo-row .hub-map { aspect-ratio: 1 / 1.02; margin-top: 18px; }
.duo-row .hub-core { width: 27%; }
.duo-row .hub-ic { width: 38px; height: 38px; }
.duo-row .hub-map a { flex-direction: column; gap: 4px; text-align: center; }
.duo-row .hub-t { max-width: 96px; justify-items: center; }
.duo-row .hub-t b { font-size: 11.5px; }
.duo-row .hub-t span { font-size: 10.5px; }
@media (max-width: 699px) { .duo-row > * { min-height: 0; } .duo-row .hub-map a { flex-direction: row; text-align: left; } .duo-row .hub-t { justify-items: start; max-width: none; } }
.duo-row > * { min-width: 0; }
.js .shelf-bar .tools { flex-wrap: wrap; }
@media (max-width: 699px) { .js .shelf-bar .tools { justify-content: space-between; } .sort { flex: 1; } .sort select { width: 100%; } }
.shelf-bar, .shelf-bar .tools, .duo-row .journey-inner, .duo-row .journey-head { min-width: 0; max-width: 100%; }
@media (max-width: 699px) { .js .shelf-bar .tools { display: flex; } .duo-row .seg-dark { max-width: 100%; } }
@media (max-width: 699px) { .shelf-bar { display: grid; grid-template-columns: minmax(0, 1fr); } .shelf-bar .cats { min-width: 0; } }
@media (max-width: 1100px) { .nav { grid-template-columns: auto minmax(0, 1fr) auto; } .nav-search { min-width: 0; } }
@media (max-width: 380px) { .nav { gap: 8px; } .avatar { width: 34px; height: 34px; } .nav-search { padding: 0 10px; } }
.how ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .how ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .how ol { grid-template-columns: minmax(0, 1fr); } .how { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================
   V4 (owner, 2026-10-22): light only, the philosophy, a calmer bottom row.
   ================================================================ */
/* My leadership philosophy. */
.philo { max-width: 1320px; margin: 0 auto; padding: 84px var(--gutter-x) 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 30px 64px; align-items: center; }
.philo-copy .kicker { margin-bottom: 14px; }
.philo h2 { margin: 0 0 22px; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; }
.philo-lede { margin: 0 0 22px; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.65; color: #3c3833; }
.philo-close { margin: 0; padding-left: 18px; border-left: 3px solid var(--brass); font: italic 400 clamp(22px, 2.2vw, 28px)/1.3 var(--display); }
.loop { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; justify-self: center; }
.loop svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop-ring { fill: none; stroke: var(--edge); stroke-width: 2; }
.loop-flow { fill: none; stroke: var(--brass); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 10 15; animation: loop-flow 12s linear infinite; transform-origin: 200px 200px; }
@keyframes loop-flow { to { stroke-dashoffset: -100; } }
.loop-arrow { fill: var(--brass); }
.loop-core { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 18px; border-radius: 50%; text-align: center; color: #F2EBDD;
  background: radial-gradient(circle at 35% 30%, #5b4330, #2a1d14 70%); box-shadow: 0 0 0 10px #b48a481f, 0 24px 50px -24px #2a1d14; }
.loop-core b { font: 400 clamp(19px, 2vw, 26px)/1.1 var(--display); }
.loop-node { position: absolute; display: grid; justify-items: center; gap: 4px; width: 128px; text-align: center; }
.loop-node span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 2px solid var(--brass); font: 700 14px/1 var(--body); color: var(--brass-ink); box-shadow: 0 8px 18px -12px #00000066; }
.loop-node b { font: 600 14px/1.2 var(--body); padding: 3px 8px; border-radius: 8px; background: var(--parchment); }
.loop-top { left: 50%; top: 12.5%; transform: translate(-50%, -20px); }
.loop-right { right: 12.5%; top: 50%; transform: translate(64px, -20px); }
.loop-bottom { left: 50%; bottom: 12.5%; transform: translate(-50%, 20px); }
.loop-right, .loop-left { }
.loop-left { left: 12.5%; top: 50%; transform: translate(-64px, -20px); }
.philo-cards { grid-column: 1 / -1; list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); gap: 12px; }
.ph-card { display: flex; flex-direction: column; padding: 20px 18px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--edge); }
.ph-card h3 { margin: 4px 0 8px; font-size: 24px; }
.ph-card > p:not(.ph-n):not(.ph-books) { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--soft); }
.ph-n { margin: 0; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); }
.ph-core { background: linear-gradient(160deg, #3b2b1f, #241912); border-color: #3b2b1f; color: #F2EBDD; }
.ph-core > p:not(.ph-n):not(.ph-books) { color: #d9cbb3; }
.ph-core .ph-n { color: var(--brass-hi); }
.ph-books { display: flex; align-items: center; gap: 6px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--edge); }
.ph-core .ph-books { border-color: #ffffff1f; }
.ph-books > span { margin-right: 4px; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.ph-core .ph-books > span { color: #b9a98f; }
.ph-books a { display: block; width: 30px; transition: transform .25s var(--ease); }
.ph-books a:hover, .ph-books a:focus-visible { transform: translateY(-3px); }
.ph-books .cover-xs { width: 30px; padding: 4px; }
@media (max-width: 1100px) { .philo { grid-template-columns: 1fr; } .philo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph-core { grid-column: 1 / -1; } }
@media (max-width: 560px) { .philo-cards { grid-template-columns: minmax(0, 1fr); } .loop-node { width: 104px; } .loop-right { transform: translate(40px, -20px); } .loop-left { transform: translate(-40px, -20px); } }
@media (prefers-reduced-motion: reduce) { .loop-flow { animation: none; } }

/* Journey: a full-width band again, every stop in view on a laptop. Themes + Insights beside each other. */
.page-home > main > .journey { margin-top: 64px; }
.journey .track { min-width: calc(var(--n) * 100px); margin: 0 50px; }
.journey .stop { width: 108px; margin-left: -54px; }
.journey .stop b { font-size: 14px; }
.duo-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; padding-top: 40px; }
.duo-row > * { min-height: 0; }
.duo-row .hub-map { aspect-ratio: 1.25 / 1; }
@media (max-width: 860px) { .duo-row { grid-template-columns: minmax(0, 1fr); } }
.nav.floating { background: #1d140dcc; border-color: #ffffff1a; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 12px 30px -20px #000; }
.duo-row .hub { display: flex; flex-direction: column; }
.duo-row .hub-map { flex: 1; aspect-ratio: auto; min-height: 460px; }
/* Eleven books: six across on wide screens (6 + 5), bigger covers. */
@media (min-width: 1200px) { .page-home .shelf[data-view="grid"] .books { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .page-home .shelf[data-view="grid"] .bk-title { font-size: 15.5px; } }
.journey .track { min-width: calc(var(--n) * 96px); margin: 0 56px; }
.journey .track-wrap { margin: 0 calc(-1 * var(--gutter-x)); padding: 0 var(--gutter-x); }

/* ================================================================
   V5 (owner, 2026-10-22): "more interactive, more visual, everything clickable".
   ================================================================ */
/* Stats are links that filter. */
.stats li { padding: 0; }
.stats a { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 14px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .2s, transform var(--spring-soft-ms) var(--spring-soft); }
.stats a:hover, .stats a:focus-visible { background: #ffffff14; transform: translateY(-2px); }
.stats a:active { transform: scale(.97); }
.stats a svg { grid-row: 1 / 3; }

/* Peek card for the stack. */
.peek { position: fixed; z-index: 70; display: grid; grid-template-columns: 74px 1fr; gap: 14px; width: 290px; padding: 14px; border-radius: 16px; pointer-events: none;
  background: #fffdf8f2; color: var(--text); border: 1px solid var(--edge); box-shadow: 0 30px 60px -20px #000000a6; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; transform: translateX(10px) scale(.96); transition: opacity .2s, transform var(--spring-soft-ms) var(--spring-soft); }
.peek.on { opacity: 1; transform: none; }
.peek img { width: 74px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: 0 8px 18px -10px #000; }
.peek div { display: grid; gap: 3px; align-content: start; }
.peek b { font: 400 21px/1.1 var(--display); }
.pk-by { font-size: 13px; color: var(--soft); }
.pk-meta { margin-top: 2px; font-size: 12.5px; color: var(--brass-ink); }
.pk-line { margin-top: 6px; font: italic 400 15px/1.3 var(--display); color: #3c3833; }

/* The loop plays. */
.loop-node, .loop-core { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.loop-node { padding: 4px; min-width: 44px; min-height: 44px; }
.loop-node span, .loop-core { transition: transform var(--spring-soft-ms) var(--spring-soft), background .25s, color .25s, box-shadow .25s; }
.loop-node:hover span, .loop-node:focus-visible span { transform: scale(1.12); }
.loop-node.on span { background: var(--brass); color: #1b130d; transform: scale(1.18); box-shadow: 0 0 0 6px #b48a4833, 0 10px 24px -10px #7e5d27; }
.loop-node.on b { background: var(--ink); color: #F2EBDD; }
.loop-core { color: #F2EBDD; }
.loop-core.on { box-shadow: 0 0 0 10px #b48a4840, 0 0 0 22px #b48a4814, 0 24px 50px -24px #2a1d14; transform: translate(-50%, -50%) scale(1.04); }
.loop-core:hover { transform: translate(-50%, -50%) scale(1.03); }
.ph-card { cursor: pointer; transition: transform var(--spring-soft-ms) var(--spring-soft), box-shadow .3s, border-color .3s; }
.ph-card.on { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass), 0 22px 40px -26px #7e5d27; transform: translateY(-4px); }
.ph-core.on { box-shadow: 0 0 0 2px var(--brass-hi), 0 22px 40px -22px #000; }

/* How I read: example links. */
.how li { padding: 0; }
.how li a { display: grid; gap: 6px; height: 100%; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: var(--soft); transition: border-color .2s, transform var(--spring-soft-ms) var(--spring-soft), box-shadow .3s; border: 1px solid transparent; }
.how li a:hover, .how li a:focus-visible { border-color: var(--brass); transform: translateY(-3px); box-shadow: 0 16px 30px -24px #00000080; }
.how-go { font-size: 13px; color: var(--brass-ink); font-weight: 600; }

/* Covers lean toward the pointer, with a soft sheen. */
.tilt { transform: perspective(700px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-4px) !important; transition: transform .12s linear, box-shadow .3s !important; }
.shelf[data-view="grid"] .bk-link { position: relative; overflow: hidden; }
.shelf[data-view="grid"] .bk-link::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), #ffffff59, transparent 60%); opacity: 0; transition: opacity .3s; }
.shelf[data-view="grid"] .bk-link.tilt::after { opacity: 1; }
.rl-clear, .in-clear { margin-left: 6px; padding: 4px 10px; border: 1px solid var(--edge); border-radius: 999px; background: var(--card); font-size: 13px; cursor: pointer; }
.rl-clear:hover, .in-clear:hover { border-color: var(--brass); }

/* Themes hub: nodes are buttons into the shelf. */
.hub-map a { border-radius: 14px; padding: 4px; transition: background .2s; }
.hub-map a:hover, .hub-map a:focus-visible { background: color-mix(in srgb, var(--c) 10%, transparent); }
.hub-core { text-decoration: none; color: inherit; transition: transform var(--spring-soft-ms) var(--spring-soft), box-shadow .3s; }
.hub-core:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 0 14px #b48a481f, 0 18px 34px -20px #0000007a; }

/* Insights: tag filters. */
.insights .in-list li { position: relative; }
.insights .in-list li[hidden] { display: none; }
.in-list a { grid-template-columns: 40px 1fr auto; padding-right: 0; }
.in-tag { position: absolute; right: 0; bottom: 14px; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--text); transition: background .2s, border-color .2s; }
.in-tag:hover { border-color: var(--brass); }
.in-tag[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #F2EBDD; }
.in-filter { margin: 4px 0 0; font-size: 13px; color: var(--soft); }
.in-filter[hidden] { display: none; }
.insights header { flex-wrap: wrap; }

/* Journey: arrows and drag. */
.journey-inner { position: relative; }
.track-nav { position: absolute; right: var(--gutter-x); top: 150px; display: flex; gap: 8px; z-index: 2; }
.tn-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff2e; background: #ffffff12; color: var(--night-ink); font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s, transform var(--spring-soft-ms) var(--spring-soft); }
.tn-btn:hover { background: #ffffff24; } .tn-btn:active { transform: scale(.94); }
.track-wrap { cursor: grab; } .track-wrap.dragging { cursor: grabbing; user-select: none; }
.stop a { border-radius: 10px; }
.stop a:hover b, .stop a:focus-visible b { color: var(--brass-hi); }

/* Book page: progress, copy, share, toast. */
.progress { position: fixed; z-index: 80; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass-hi)); transform-origin: left; transform: scaleX(0); }
.sec-diagnostic .prose li { position: relative; padding-right: 54px; }
.copy { position: absolute; right: 8px; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; border: 1px solid var(--edge); border-radius: 10px; background: var(--paper); cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s, transform .15s; }
.copy svg { width: 16px; height: 16px; fill: none; stroke: var(--text); stroke-width: 1.7; }
.sec-diagnostic li:hover .copy, .copy:focus-visible { opacity: 1; border-color: var(--brass); } .copy:active { transform: scale(.92); }
.share svg { width: 17px; height: 17px; margin-right: 6px; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); padding: 12px 18px; border-radius: 999px; background: #1b1612eb; color: #F2EBDD; font-size: 14px; box-shadow: 0 16px 40px -16px #000; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s, transform var(--spring-soft-ms) var(--spring-soft); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.ios-bar { display: none; }
.shelf-back { display: none; }

/* Things rise into place. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--d, 0ms), transform var(--spring-ms) var(--spring) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .peek, .toast { transition: none; } }
@media (pointer: coarse) { .copy { opacity: 1; } }
.loop-core { background: radial-gradient(circle at 35% 30%, #5b4330, #2a1d14 70%); }

/* ── The portrait: the shelf, cut into the shape of the person it made ── */
.portrait { position: relative; max-width: 1320px; margin: 0 auto; padding: 96px var(--gutter-x) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "bust copy" "bust list" "bust close"; gap: 0 72px; align-items: start; }
.portrait::before { content: ''; position: absolute; z-index: -1; left: 0; top: 40px; width: 62%; height: 88%; background: radial-gradient(closest-side, #f6e3bd 0%, #f6e3bd00 100%); opacity: .75; pointer-events: none; }
.pt-copy { grid-area: copy; }
.portrait h2 { margin: 0 0 20px; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.02; text-wrap: balance; }
.pt-lede { margin: 0 0 28px; max-width: 34em; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.65; color: #3c3833; }
.pt-bust { grid-area: bust; position: sticky; top: 90px; margin: 0; }
.pt-bust svg { display: block; width: 100%; max-width: 520px; margin: 0 auto; overflow: visible; filter: drop-shadow(0 30px 34px #2a1e1544); }
.pt-sp { cursor: pointer; transform-box: fill-box; transition: opacity .35s ease; }
.pt-sp text { font: 600 10px var(--body); letter-spacing: .14em; dominant-baseline: middle; text-anchor: middle; pointer-events: none; }
.pt-shade { fill: #fff; opacity: 0; transition: opacity .25s ease; }
.pt-sp:hover .pt-shade { opacity: .12; }
.pt-outline { fill: none; stroke: #2a1e15; stroke-opacity: .55; stroke-width: 1.4; pointer-events: none; }
.pt-plank { width: 78%; height: 16px; margin: -4px auto 0; border-radius: 3px; background: linear-gradient(#5a4331, var(--walnut-deep)); box-shadow: 0 14px 22px -12px #000a; }
.pt-say { min-height: 5.6em; max-width: 30em; margin: 22px auto 0; text-align: center; }
.pt-say-k { display: block; margin-bottom: 6px; font: 400 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--brass-ink); }
.pt-say b { display: block; font: italic 400 clamp(21px, 2vw, 26px)/1.3 var(--display); color: var(--text); }
.pt-say a { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--brass-ink); }
.pt-list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: pt; }
.pt-list button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 10px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 14px; align-items: center; padding: 10px 14px 10px 12px; border: 1px solid var(--edge); border-radius: 14px; background: var(--paper); text-align: left; color: var(--text); cursor: pointer; transition: transform var(--spring-snap-ms) var(--spring-snap), border-color .2s, box-shadow .2s; }
.pt-list i { grid-row: 1 / 3; width: 10px; height: 36px; border-radius: 2px; background: var(--c); box-shadow: inset 0 3px 0 var(--f), inset 0 -2px 0 var(--f); }
.pt-list b { font: 600 16px/1.2 var(--body); }
.pt-list span { font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-list button:hover { transform: translateY(-2px); border-color: var(--brass); }
.pt-list button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 10px 24px -14px #000c; }
.pt-close { grid-area: close; margin: 26px 0 0; padding-left: 18px; border-left: 3px solid var(--brass); font: italic 400 clamp(21px, 2vw, 26px)/1.3 var(--display); }
/* The spines are shelved into the head, one at a time, when it scrolls into view. */
.js .pt-sp { transform: translateY(110%); }
.js .pt-bust.shelved .pt-sp { transform: none; transition: transform var(--spring-ms) var(--spring) calc(var(--i) * 70ms), opacity .35s ease; }
@media (prefers-reduced-motion: reduce) { .js .pt-sp { transform: none; } }
@media (max-width: 900px) {
  .portrait { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "bust" "list" "close"; padding-top: 64px; }
  .portrait::before { width: 100%; }
  .pt-bust { position: static; margin-bottom: 26px; }
  .pt-bust svg { max-width: 380px; }
}
@media (max-width: 560px) { .pt-list { grid-template-columns: minmax(0, 1fr); } }

/* Sponsor slots (Marquee, mutaafaziz.com/ads; AGENTS.md §0.8). An empty slot takes no
   space: the loader fills it or sets [hidden]. min-height only applies once it has a child. */
.mq:empty, .mq[hidden] { display: none; }
/* Google lazy-fills units below the fold, after the loader's 6 s check; a unit it marks
   unfilled must not leave its reserved box behind. */
.mq:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.mq { display: block; min-height: 90px; max-width: 728px; border-radius: 14px; overflow: hidden; background: var(--card); }
.mq-inline { margin: 28px auto 0; }
.mq-footer { margin: 0 auto 32px; width: min(728px, calc(100% - 2 * var(--gutter-x))); }
.duo .mq-footer { display: none; }

/* The app form's top bar height: the tabs strip pins exactly under it (here and glass.css). */
:root { --bar-h: calc(52px + env(safe-area-inset-top)); }
/* ================================================================
   STUDIO (2026-10-23, owner: "extremely modern, Apple and Tesla inspired").
   The app form's skin. library.css keeps the layout and the hooks; this layer restyles
   them, scoped to :root:not(.duo) so the book form's HIG layer (duo.css) is untouched.
   · Tesla for the dark moments: a black hero with the books lit like a product shot, the
     philosophy, the journey and the closer, each a full-bleed black band.
   · Apple for the rest: #F5F5F7 and white bands, Geist set tight and large, white cards,
     one blue (#0071E3), a frosted global bar. Instrument Serif survives only in quotes.
   Bands are full-bleed without wrappers: box-shadow spread + clip-path (see .band).
   ================================================================ */
@font-face { font-family: 'Geist'; src: url(fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root:not(.duo) {
  --display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --bg: #F5F5F7;
  --white: #FFFFFF;
  --black: #000000;
  --graphite: #1C1C1E;
  --graphite-2: #2C2C2E;
  --blue: #0071E3;
  --blue-hi: #2997FF;
  --blue-ink: #0066CC;
  --sh: 0 1px 2px #0000000a, 0 10px 30px -18px #00000040;
  --sh-hi: 0 2px 4px #0000000d, 0 30px 60px -28px #00000066;
  --r-lg: 28px;
  --r-md: 18px;
  /* library.css's tokens, re-pointed. */
  --ink: #1D1D1F; --text: #1D1D1F; --soft: #6E6E73; --faint: #6E6E73;
  --night: #000; --night-2: #111; --night-ink: #F5F5F7; --night-soft: #A1A1A6;
  --parchment: var(--bg); --paper: var(--bg); --card: var(--white); --edge: #D2D2D7;
  --brass: var(--blue); --brass-hi: var(--blue-hi); --brass-ink: var(--blue-ink);
  --sage-ink: #1E7A35; --walnut: #1D1D1F; --walnut-deep: #000;
  --gutter-x: clamp(20px, 5vw, 64px);
  --wide: 1240px;

  body { background: var(--bg); color: var(--text); font: 400 17px/1.5 var(--body); letter-spacing: -.011em; font-feature-settings: 'ss01'; }
  h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  ::selection { background: #0071e333; }
  .kicker { margin: 0 0 14px; font: 600 15px/1.3 var(--body); letter-spacing: -.01em; text-transform: none; color: var(--blue-ink); }
  .skip { background: var(--blue); color: #fff; }

  /* Full-bleed bands behind centred sections. main clips them sideways. */
  main { overflow-x: clip; }
  .portrait, .how { box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax); background: var(--white); }
  .philo, .closer { box-shadow: 0 0 0 100vmax var(--black); clip-path: inset(0 -100vmax); background: var(--black); color: var(--night-ink); }

  /* ── Buttons: Apple's pills and chevron links ── */
  .cta { min-height: 48px; padding: 0 24px; border-radius: 980px; background: var(--blue); color: #fff; font: 500 17px/1 var(--body); letter-spacing: -.01em; transition: background .2s, transform var(--spring-snap-ms) var(--spring-snap); }
  .cta:hover { background: #0077ED; transform: none; }
  .cta:active { transform: scale(.97); }
  .cta-link { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 6px; color: var(--blue-ink); font: 400 17px/1 var(--body); text-decoration: none; }
  .cta-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .cta-link span { font-size: 1.2em; transform: translateY(-1px); transition: transform var(--spring-snap-ms) var(--spring-snap); }
  .cta-link:hover span { transform: translate(3px, -1px); }
  .night .cta-link, .closer .cta-link { color: var(--blue-hi); }
  .ctas { gap: 14px 22px; align-items: center; }
  .tool-btn, .seg button, .btn, .btn-ghost { border-radius: 980px; border: 0; background: var(--white); box-shadow: inset 0 0 0 1px var(--edge); font-size: 15px; }
  .tool-btn:hover, .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--text); }
  .btn { background: var(--blue); color: #fff; box-shadow: none; font-weight: 500; }
  .btn:hover { background: #0077ED; }
  .badge { background: var(--blue); color: #fff; }

  /* ── Global bar: full width, frosted, 52px ── */
  .nav { top: 0; left: 0; transform: none; width: 100%; height: var(--bar-h); grid-template-columns: auto 1fr auto auto; gap: 20px;
    padding: env(safe-area-inset-top) max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left)); border: 0; border-radius: 0; color: var(--night-ink); background: transparent; box-shadow: none; }
  .nav.scrolled, .nav.floating, .page-book .nav, .page-404 .nav, .nav-book { background: #161617cc; color: var(--night-ink); border: 0; box-shadow: 0 1px 0 #ffffff12; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
  .mono { height: 52px; }
  .mono span { font: 700 19px/1 var(--display); letter-spacing: -.04em; }
  .nav nav { gap: 0; }
  .nav-link { padding: 8px 11px; font-size: 13px; letter-spacing: -.005em; opacity: .78; border-radius: 0; transition: opacity .2s; }
  .nav-link:hover { opacity: 1; background: none; }
  .nav-link[aria-current="page"] { font-weight: 500; opacity: 1; }
  .nav-search, .nav.scrolled .nav-search, .nav-book .nav-search { height: 34px; border: 0; border-radius: 10px; background: #ffffff1a; }
  .nav-search input { font-size: 14px; }
  .nav-search:focus-within { background: #ffffff26; box-shadow: 0 0 0 2px var(--blue-hi); }
  .avatar { width: 32px; height: 32px; background: var(--night-ink); color: #000; font: 600 11.5px/1 var(--body); box-shadow: none; transition: transform var(--spring-snap-ms) var(--spring-snap); }
  .avatar:hover { transform: scale(1.08); }

  /* ── Hero: black, the books lit from above, the numbers underneath ── */
  .night { min-height: 0; background:
    radial-gradient(46% 60% at 74% 44%, #16305a 0%, #0a1426 38%, transparent 70%),
    radial-gradient(60% 40% at 74% 92%, #0b1220 0%, transparent 70%), #000; }
  .hero { max-width: var(--wide); min-height: min(100svh, 980px); grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto;
    grid-template-areas: "copy desk" "quote desk" "stats stats"; gap: 28px 56px; padding: calc(120px + env(safe-area-inset-top)) var(--gutter-x) 48px; }
  .hero .hero-copy { grid-area: copy; align-self: end; max-width: 640px; }
  .hero-eyebrow { margin: 0 0 18px; font: 600 15px/1.2 var(--body); letter-spacing: -.005em; color: var(--blue-hi); }
  .hero-eyebrow span { margin: 0 4px; color: var(--night-soft); }
  .hero h1 { margin: 0 0 24px; font-size: clamp(44px, 4.7vw, 76px); font-weight: 600; line-height: 1; letter-spacing: -.05em; color: #F5F5F7; }
  .h1-dim { display: block; color: #86868B; }
  .lede { max-width: 31em; margin: 0 0 32px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -.015em; color: var(--night-soft); }
  .epigraph { grid-area: quote; align-self: start; margin: 8px 0 0; padding: 0 0 0 20px; border-left: 2px solid #ffffff2e; }
  .epigraph::before { display: none; }
  .epigraph p { margin: 0 0 6px; font: italic 400 21px/1.35 var(--serif); color: #E8E8ED; }
  .epigraph footer { font-size: 13px; color: var(--night-soft); }
  .desk { grid-area: desk; align-self: center; justify-self: center; }
  .desk::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 46%; width: 130%; aspect-ratio: 1.6; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, #2997ff2e, transparent 72%); pointer-events: none; }
  .desk::after { background: radial-gradient(closest-side, #000000e6, transparent); }
  .stk-face { box-shadow: inset 0 1px 0 #ffffff40, inset 0 -1px 0 #00000059, 0 1px 0 #ffffff0d; }
  .stats-wrap { grid-area: stats; max-width: none; margin: 24px 0 0; padding: 0; }
  .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 28px 0 0; border: 0; border-top: 1px solid #ffffff1f; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .stats li, .stats li + li { border: 0; padding: 0; }
  .stats a { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 8px 8px 0; border-radius: 0; }
  .stats a:hover, .stats a:focus-visible { background: none; transform: none; }
  .stats svg { display: none; }
  .stats b { font: 600 clamp(36px, 4vw, 56px)/1 var(--display); letter-spacing: -.045em; color: #F5F5F7; font-variant-numeric: tabular-nums; transition: color .2s; }
  .stats a:hover b, .stats a:focus-visible b { color: var(--blue-hi); }
  .stats { align-items: start; }
  .stats span { font-size: 14px; color: var(--night-soft); white-space: nowrap; }
  /* One entrance on load: the words rise in order, on the page spring. */
  .js .hero-copy > *, .js .epigraph, .js .stats li { animation: st-rise var(--spring-ms) var(--spring) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: 70ms; } .js .hero-copy > :nth-child(3) { animation-delay: 140ms; } .js .hero-copy > :nth-child(4) { animation-delay: 210ms; }
  .js .epigraph { animation-delay: 300ms; }
  .js .stats li { animation-delay: calc(360ms + var(--n, 0) * 50ms); }
  .js .stats li:nth-child(2) { --n: 1; } .js .stats li:nth-child(3) { --n: 2; } .js .stats li:nth-child(4) { --n: 3; } .js .stats li:nth-child(5) { --n: 4; }

  /* ── Section headings: one scale everywhere ── */
  .portrait h2, .philo h2, .shelf-head h2, .journey-head h2, .closer h2 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.045em; }

  /* ── The portrait (white band) ── */
  .portrait { max-width: var(--wide); padding-top: 120px; padding-bottom: 120px; }
  .portrait::before { background: radial-gradient(closest-side, #e8f1ff 0%, #e8f1ff00 100%); opacity: 1; }
  .pt-lede { color: var(--soft); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -.015em; }
  .pt-bust svg { filter: drop-shadow(0 40px 40px #00000033); }
  .pt-outline { stroke: #1D1D1F; stroke-opacity: .25; }
  .pt-plank { height: 10px; width: 70%; border-radius: 5px; background: linear-gradient(#f2f2f5, #c7c7cc); box-shadow: 0 18px 24px -14px #0006; }
  .pt-say-k { font: 600 12px/1.3 var(--body); letter-spacing: .06em; color: var(--blue-ink); }
  .pt-say b { font: italic 400 clamp(22px, 2vw, 28px)/1.3 var(--serif); }
  .pt-say a { color: var(--blue-ink); font-weight: 500; }
  .pt-list { gap: 10px; }
  .pt-list button { min-height: 64px; border: 0; border-radius: var(--r-md); background: var(--bg); transition: transform var(--spring-snap-ms) var(--spring-snap), background .2s, color .2s; }
  .pt-list button:hover { transform: scale(1.015); border: 0; background: #ECECF0; }
  .pt-list button[aria-pressed="true"] { background: var(--text); color: #fff; box-shadow: var(--sh-hi); }
  .pt-list button[aria-pressed="true"] span { color: var(--night-soft); }
  .pt-list b { font: 600 16px/1.2 var(--body); letter-spacing: -.015em; }
  .pt-close { border-left: 2px solid var(--blue); font: italic 400 clamp(22px, 2.1vw, 28px)/1.3 var(--serif); }

  /* ── Philosophy (black band): a glowing loop ── */
  .philo { max-width: var(--wide); padding-top: 128px; padding-bottom: 128px; gap: 40px 80px; }
  .philo h2 { color: #F5F5F7; }
  .philo .kicker { color: var(--blue-hi); }
  .philo-lede { color: var(--night-soft); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -.015em; }
  .philo-close { border-left: 2px solid var(--blue-hi); font: italic 400 clamp(22px, 2.2vw, 30px)/1.3 var(--serif); color: #F5F5F7; }
  .loop-ring { stroke: var(--graphite-2); stroke-width: 1.5; }
  .loop-flow { stroke: var(--blue-hi); stroke-width: 2.5; filter: drop-shadow(0 0 6px #2997ffaa); }
  .loop-arrow { fill: var(--blue-hi); }
  .loop-core { color: #fff; background: radial-gradient(circle at 34% 28%, #5aa9ff 0%, #0a63d6 42%, #062a63 100%); box-shadow: 0 0 0 1px #2997ff55, 0 0 80px -6px #2997ff88; }
  .loop-core b { font: 600 clamp(17px, 1.8vw, 23px)/1.12 var(--display); letter-spacing: -.03em; }
  .loop-core.on { box-shadow: 0 0 0 1px #2997ff, 0 0 0 12px #2997ff22, 0 0 110px -4px #2997ffaa; }
  .loop-node span { background: var(--graphite); border: 1.5px solid var(--blue-hi); color: #F5F5F7; box-shadow: none; }
  .loop-node b { background: var(--graphite); color: #F5F5F7; font: 500 13.5px/1.2 var(--body); border-radius: 980px; padding: 4px 10px; }
  .loop-node.on span { background: var(--blue-hi); color: #000; box-shadow: 0 0 24px #2997ffaa; }
  .loop-node.on b { background: #F5F5F7; color: #000; }
  .philo-cards { gap: 14px; margin-top: 32px; }
  .ph-card { padding: 24px 22px 18px; border: 0; border-radius: var(--r-md); background: var(--graphite); color: #F5F5F7; }
  .ph-card h3 { font-size: 22px; letter-spacing: -.03em; }
  .ph-card > p:not(.ph-n):not(.ph-books) { color: var(--night-soft); }
  .ph-n { font: 600 12px/1 var(--body); letter-spacing: .04em; color: var(--blue-hi); }
  .ph-books { border-top-color: var(--graphite-2); }
  .ph-books > span { font: 500 11px/1 var(--body); letter-spacing: .02em; text-transform: none; color: var(--night-soft); }
  .ph-core { background: linear-gradient(155deg, #0a63d6, #062a63); }
  .ph-core > p:not(.ph-n):not(.ph-books) { color: #D6E6FF; }
  .ph-core .ph-n { color: #D6E6FF; }
  .ph-core .ph-books { border-color: #ffffff2e; }
  .ph-core .ph-books > span { color: #D6E6FF; }
  .ph-card.on { border: 0; box-shadow: 0 0 0 2px var(--blue-hi), 0 24px 48px -24px #2997ff66; }

  /* ── How I read (white band) ── */
  .how { max-width: var(--wide); padding: 96px var(--gutter-x); gap: 10px 28px; }
  .how h2 { font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -.04em; }
  .how > p { font-size: 17px; }
  .how ol { gap: 14px; margin-top: 28px; }
  .how li { border: 0; background: none; padding: 0; }
  .how li a { padding: 22px 22px 20px; border: 0; border-radius: var(--r-md); background: var(--bg); color: var(--soft); font-size: 15px; line-height: 1.45; }
  .how li a:hover, .how li a:focus-visible { border: 0; background: #ECECF0; box-shadow: none; transform: translateY(-3px); }
  .how-go { color: var(--blue-ink); font-weight: 500; }

  /* ── Claim labels: system colours, AA on white and on #F5F5F7 ── */
  .claim { font: 600 11px/1 var(--body); letter-spacing: .07em; }
  .claim-book { color: var(--blue-ink); }
  .claim-interpretation { color: #1E7A35; }
  .claim-application { color: #A34A00; }
  .claim-critique { color: #C4001A; }

  /* ── The shelf (#F5F5F7): an Apple Store grid ── */
  .shelf { max-width: var(--wide); padding-top: 120px; }
  .shelf-head { margin-bottom: 28px; }
  .shelf-sub { font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.015em; }
  .cat { min-height: 36px; padding: 0 16px; border: 0; border-radius: 980px; background: var(--white); box-shadow: inset 0 0 0 1px var(--edge); font-size: 14px; }
  .cat:hover { border: 0; box-shadow: inset 0 0 0 1px var(--text); }
  .cat[aria-pressed="true"] { background: var(--text); color: #fff; box-shadow: none; }
  .seg { padding: 2px; border: 0; border-radius: 10px; background: #E3E3E8; }
  .seg button { min-height: 32px; border-radius: 8px; background: none; box-shadow: none; }
  .seg button[aria-pressed="true"] { background: var(--white); color: var(--text); box-shadow: 0 1px 3px #0000001f, 0 0 0 .5px #0000000a; }
  .sort select { min-height: 38px; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--edge); }
  .tool-btn { min-height: 38px; border-radius: 10px; }
  .filters { border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-hi); }
  .chip span { border-radius: 980px; }
  .shelf[data-view="grid"] .books { gap: 20px; }
  .shelf[data-view="grid"] .bk-link { padding: 14px 14px 16px; border: 0; border-radius: 22px; background: var(--white); box-shadow: var(--sh); gap: 12px; transition: transform var(--spring-soft-ms) var(--spring-soft), box-shadow .35s; }
  .shelf[data-view="grid"] .bk-link:hover { border: 0; transform: translateY(-6px); box-shadow: var(--sh-hi); }
  .shelf[data-view="grid"] .cover { border-radius: 4px 8px 8px 4px; box-shadow: 0 14px 24px -14px #0000008c; }
  .shelf[data-view="grid"] .bk-link::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), #ffffff73, transparent 60%); }
  .shelf[data-view="grid"] .bk-title, .page-home .shelf[data-view="grid"] .bk-title { font: 600 15px/1.25 var(--body); letter-spacing: -.02em; }
  .bk-title { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; }
  .badge-st { min-height: 22px; padding: 0 9px; border-radius: 980px; font: 600 11px/1 var(--body); background: #EDEDF0; color: #55555A; }
  .st-finished { background: #E3F5E7; color: #1E6B30; }
  .st-reading { background: #E5F0FF; color: #0058B9; }
  .st-revisiting { background: #FFF0DE; color: #8F4000; }
  .stars { background: linear-gradient(90deg, var(--text) calc(var(--r) / 5 * 100%), #D2D2D7 calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }
  .empty .kicker { color: var(--soft); }

  /* ── Journey (black band) ── */
  .page-home > main > .journey { margin-top: 120px; }
  .journey { background: radial-gradient(60% 80% at 50% 0%, #0d2142 0%, transparent 70%), #000; }
  .journey-inner { max-width: var(--wide); padding-top: 112px; padding-bottom: 72px; }
  .journey-head p { color: var(--night-soft); font-size: 17px; }
  .mtn path:nth-child(1) { fill: #15171c; } .mtn path:nth-child(2) { fill: #0d0f13; } .mtn path:nth-child(3) { fill: #050608; }
  .seg-dark { background: #ffffff1a; }
  .seg-dark button { color: var(--night-soft); }
  .seg-dark button[aria-pressed="true"] { background: #F5F5F7; color: #000; box-shadow: none; }
  .track .path path { stroke: #2997ff4d; }
  .track .path .path-done { stroke: var(--blue-hi); filter: drop-shadow(0 0 6px #2997ffaa); }
  .stop .dot { background: var(--blue-hi); box-shadow: 0 0 0 4px #2997ff33, 0 0 14px var(--blue-hi); }
  .stop-reading .dot { background: #fff; }
  .stop-queued .dot { background: #636366; box-shadow: 0 0 0 4px #63636633; }
  .stop b { font: 500 13.5px/1.2 var(--body); letter-spacing: -.01em; }
  .stop-reading b + span, .stop a:hover b, .stop a:focus-visible b { color: var(--blue-hi); }
  .tn-btn { border: 0; background: #ffffff1a; color: #F5F5F7; }
  .tn-btn:hover { background: #ffffff2e; }

  /* ── Themes + insights (#F5F5F7): two white cards ── */
  .duo-row { max-width: var(--wide); gap: 20px; padding-top: 120px; padding-bottom: 40px; }
  .hub, .insights { padding: 34px 32px 28px; border: 0; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh); }
  .hub header h2, .insights header h2 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.035em; }
  .hub header p { font-size: 15px; }
  .hub-map line { stroke: #E3E3E8; }
  .hub-core { border: 0; background: var(--text); color: #fff; box-shadow: 0 20px 40px -20px #0009; }
  .hub-core b { font: 600 clamp(13px, 1.3vw, 17px)/1.15 var(--display); letter-spacing: -.02em; }
  .hub-core:hover { box-shadow: 0 0 0 10px #1d1d1f14, 0 24px 44px -20px #0009; }
  /* Theme icons as Settings-style squircles. */
  .hub-ic { border: 0; border-radius: 11px; background: var(--c); box-shadow: 0 6px 14px -8px var(--c); }
  .hub-ic svg { fill: #fff; }
  .hub-map a:hover, .hub-map a:focus-visible { background: #F5F5F7; }
  .hub-t b { font-weight: 600; }
  .in-list li + li { border-top-color: #E8E8ED; }
  .in-body b { font-weight: 600; letter-spacing: -.015em; }
  .in-tag { border: 0; border-radius: 980px; background: var(--bg); }
  .in-tag:hover { border: 0; background: #E8E8ED; }
  .in-tag[aria-pressed="true"] { background: var(--text); color: #fff; }
  .in-more summary { color: var(--blue-ink); }
  .rl-clear, .in-clear { border: 0; background: var(--bg); }

  /* ── Work with me (black band): the résumé, for the people hiring ── */
  .nav { grid-template-columns: auto 1fr auto auto auto; }
  .nav-cta { display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: 980px; background: var(--blue); color: #fff; font: 500 13px/1 var(--body); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: background .2s, transform var(--spring-snap-ms) var(--spring-snap); }
  .nav-cta:hover { background: #0077ED; }
  .nav-cta:active { transform: scale(.96); }
  .hire { max-width: var(--wide); margin: 120px auto 0; padding: 150px var(--gutter-x) 120px; box-shadow: 0 0 0 100vmax var(--black); clip-path: inset(0 -100vmax); background: var(--black); color: var(--night-ink); }
  .hire .kicker { color: var(--blue-hi); }
  .hire h2 { margin: 0 0 14px; font-size: clamp(52px, 8vw, 116px); line-height: .96; letter-spacing: -.055em; color: #F5F5F7; }
  .hire-tag { margin: 0 0 30px; font: 600 clamp(17px, 1.7vw, 23px)/1.35 var(--body); letter-spacing: -.02em; background: linear-gradient(90deg, #2997FF, #9CC7FF 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hire-lede { max-width: 40em; margin: 0 0 18px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -.015em; color: var(--night-soft); }
  .hire-seek { margin: 0; max-width: 40em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; font-weight: 500; letter-spacing: -.015em; color: #F5F5F7; }
  .hire-seek span { display: block; margin-top: 8px; font-size: 15px; font-weight: 400; color: var(--night-soft); }
  .hire-nums { list-style: none; margin: 72px 0 0; padding: 32px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-top: 1px solid #ffffff1f; }
  .hire-nums b { display: block; font: 600 clamp(44px, 5.6vw, 84px)/1 var(--display); letter-spacing: -.05em; color: #F5F5F7; }
  .hire-nums span { display: block; margin-top: 10px; font-size: 15px; color: var(--night-soft); }
  .hire-roles { list-style: none; margin: 80px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hire-roles li { padding: 30px 30px 28px; border-radius: 22px; background: var(--graphite); transition: transform var(--spring-soft-ms) var(--spring-soft), background .25s; }
  .hire-roles li:hover { background: #232325; transform: translateY(-3px); }
  .hr-when { margin: 0 0 18px; font: 600 13px/1 var(--body); letter-spacing: .01em; color: var(--blue-hi); }
  .hire-roles h3 { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.035em; color: #F5F5F7; }
  .hr-title { margin: 0 0 14px; font-size: 15px; font-weight: 500; color: #E8E8ED; }
  .hr-what { margin: 0; font-size: 15px; line-height: 1.5; color: var(--night-soft); }
  .hire-creds { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
  .hire-creds li { padding: 9px 16px; border-radius: 980px; background: #ffffff14; font-size: 14px; color: #E8E8ED; }
  .hire-contact { display: flex; flex-wrap: wrap; gap: 12px; margin: 72px 0 0; }
  .hire-contact a { gap: 10px; }
  .hire-contact svg { width: 20px; height: 20px; flex: none; }
  .hire-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 980px; color: #F5F5F7; font: 500 16px/1 var(--body); text-decoration: none; box-shadow: inset 0 0 0 1px #ffffff40; transition: background .2s, box-shadow .2s, transform var(--spring-snap-ms) var(--spring-snap); }
  .hire-btn:hover { background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff80; }
  .hire-btn:active { transform: scale(.97); }
  .hire-btn span { opacity: .7; }
  .hire-direct { margin: 24px 0 0; font-size: 15px; color: var(--night-soft); }
  .hire-direct a { color: #F5F5F7; text-decoration-color: #ffffff4d; text-underline-offset: 3px; }
  .hire + .closer { margin-top: 0; padding-top: 120px; border-top: 1px solid #ffffff1f; }

  /* ── Closer (black band): the last word, and a way to reach me ── */
  .closer { max-width: var(--wide); margin-top: 120px; padding: 160px var(--gutter-x); text-align: center; }
  .closer h2 { margin: 0 0 18px; color: #F5F5F7; }
  .closer p { margin: 0 auto 36px; max-width: 30em; color: var(--night-soft); font-size: clamp(17px, 1.6vw, 21px); }
  .closer .ctas { justify-content: center; }
  .foot { border-top: 0; font-size: 12px; color: var(--soft); background: var(--bg); }
  .foot a { color: var(--text); }

  /* ── Book page: a black product hero lit in the book's own colour ── */
  .page-book { --bg: #FFFFFF; --card: #F5F5F7; --sh: none; background: var(--white); }
  .page-book main { padding-top: 0; }
  .book-hero { isolation: isolate; max-width: var(--wide); padding: calc(108px + env(safe-area-inset-top)) var(--gutter-x) 72px; color: var(--night-ink); }
  .book-hero::before { content: ''; position: absolute; z-index: -1; inset: 0 -100vmax; pointer-events: none;
    background: radial-gradient(560px 480px at calc(50% - min(var(--wide), 100vw) / 2 + 220px) 56%, color-mix(in srgb, var(--cv-bg) 70%, transparent), transparent 72%), #000; }
  .back { color: var(--night-soft); font-size: 14px; }
  .back:hover { color: #fff; }
  .chips-row span { border: 0; border-radius: 980px; background: #ffffff1a; color: #F5F5F7; font-size: 12.5px; }
  .book-hero h1 { font-size: clamp(44px, 6vw, 88px); letter-spacing: -.05em; color: #F5F5F7; }
  .book-sub { margin-bottom: 16px; font: 400 clamp(19px, 1.9vw, 24px)/1.3 var(--body); letter-spacing: -.02em; color: var(--night-soft); }
  .book-by { color: #F5F5F7; font-weight: 500; }
  .book-meta { color: var(--night-soft); }
  .book-meta span + span::before { color: #48484A; }
  .book-rating { color: var(--night-soft); }
  .book-hero .stars { background: linear-gradient(90deg, #F5F5F7 calc(var(--r) / 5 * 100%), #48484A calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }
  .book-ctas { gap: 12px; }
  .book-ctas .btn-dark { min-height: 48px; padding: 0 24px; background: var(--blue); color: #fff; font-size: 16px; }
  .btn-out, .book-ctas .btn-ghost { min-height: 48px; background: transparent; color: #F5F5F7; box-shadow: inset 0 0 0 1px #ffffff4d; }
  .btn-out:hover, .book-ctas .btn-ghost:hover { background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff99; }
  .pull { margin-top: 6px; padding: 18px 22px; border: 0; border-left: 2px solid var(--blue-hi); border-radius: 0 14px 14px 0; background: #ffffff0f; }
  .pull p { font: italic 400 clamp(20px, 1.8vw, 24px)/1.35 var(--serif); color: #F5F5F7; }
  .hero-cover .cover { transform: rotateY(-10deg); box-shadow: inset 4px 0 0 -1px #00000040, 30px 50px 80px -30px #000, 0 0 120px -20px color-mix(in srgb, var(--cv-bg) 80%, transparent); }
  .tabs { position: sticky; top: var(--bar-h); z-index: 6; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid #E8E8ED; background: #ffffffe0; box-shadow: 0 0 0 100vmax #ffffffe0; clip-path: inset(0 -100vmax); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
  .tabs a { padding: 16px 14px; font-size: 15px; letter-spacing: -.01em; }
  .tabs a[aria-selected="true"] { font-weight: 600; }
  .tabs a[aria-selected="true"]::after { background: var(--blue); }
  .sec { border-top-color: #E8E8ED; padding: 44px 0; }
  .sec h3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; margin-bottom: 16px; }
  .prose { font-size: 18px; line-height: 1.6; letter-spacing: -.012em; }
  #thesis .prose { font: 500 clamp(21px, 2.1vw, 27px)/1.42 var(--body); letter-spacing: -.025em; }
  .idea, .exp, .conn, .fw li, .sec-diagnostic .prose li { border: 0; border-radius: var(--r-md); background: var(--card); }
  .idea { padding: 26px 26px 22px; }
  .idea h4 { font: 600 22px/1.2 var(--display); letter-spacing: -.03em; }
  .idea-n { font: 600 13px/1 var(--body); color: var(--blue-ink); }
  .sec-diagnostic .prose li { font-style: normal; font-weight: 500; }
  .fw-n { border-radius: 9px; background: var(--c); color: #fff; }
  .conn:hover { background: #ECECF0; transform: translateY(-2px); }
  .conn-theme, .exp-status { font: 600 11px/1 var(--body); letter-spacing: .06em; color: var(--blue-ink); }
  .tags span { border: 0; border-radius: 980px; background: var(--card); }
  .timeline { border-left-color: #E8E8ED; }
  .side-card { top: calc(116px + env(safe-area-inset-top)); border: 0; border-radius: 22px; background: var(--card); }
  .side-card .stars { background: linear-gradient(90deg, var(--text) calc(var(--r) / 5 * 100%), #D2D2D7 calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }
  .sc-st.st-finished, .rec-yes { color: #1E7A35; } .sc-st.st-reading { color: #0058B9; } .sc-st.st-revisiting { color: #8F4000; }
  .copy { border: 0; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--edge); }
  .provenance { border: 0; border-radius: var(--r-md); background: var(--card); font-size: 13px; }
  .pager { gap: 14px; }
  .pg { border: 0; border-radius: var(--r-md); background: var(--card); padding: 22px 24px; transition: background .2s, transform var(--spring-snap-ms) var(--spring-snap); }
  .pg:hover { background: #ECECF0; }
  .pg .kicker { margin-bottom: 4px; font-size: 13px; }
  .pg b { font: 600 clamp(18px, 1.8vw, 24px)/1.2 var(--display); letter-spacing: -.03em; }
  .progress i { background: var(--blue); }
  .toast { background: #1d1d1feb; color: #fff; }
  .peek { border: 0; border-radius: 20px; background: #ffffffeb; box-shadow: 0 40px 80px -24px #000000b3; }
  .peek b { font: 600 19px/1.15 var(--display); letter-spacing: -.03em; }
  .pk-meta { color: var(--blue-ink); }
  .pk-line { font: italic 400 16px/1.3 var(--serif); color: var(--soft); }
  .lost h1 { font-size: clamp(40px, 5vw, 64px); }

  /* ── Tablets ── */
  @media (max-width: 1100px) {
    .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 24px 32px; }
    .nav { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  }
  /* ── Phones and portrait tablets: one column, centred, Apple-style ── */
  @media (max-width: 960px) {
    .night { background: radial-gradient(90% 46% at 50% 62%, #16305a 0%, #0a1426 40%, transparent 72%), #000; }
    .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "copy" "desk" "quote" "stats"; min-height: 0; padding-top: calc(104px + env(safe-area-inset-top)); text-align: center; }
    .hero .hero-copy { max-width: 680px; justify-self: center; }
    .lede { margin-left: auto; margin-right: auto; }
    .hero .ctas { justify-content: center; }
    .epigraph { justify-self: center; max-width: 30em; padding: 0; border: 0; }
    .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; }
    .stats a { padding: 8px 4px; }
    .portrait, .philo { padding-top: 96px; padding-bottom: 96px; }
    .book-hero::before { background: radial-gradient(70% 44% at 50% 26%, color-mix(in srgb, var(--cv-bg) 70%, transparent), transparent 72%), #000; }
  }
  @media (max-width: 699px) {
    .hero h1 { font-size: clamp(38px, 11vw, 52px); }
    .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; padding-top: 22px; }
    .stats b { font-size: 34px; }
    .stats span { font-size: 12.5px; }
    .nav { gap: 12px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .portrait h2, .philo h2, .shelf-head h2, .journey-head h2, .closer h2 { font-size: clamp(34px, 9.6vw, 46px); }
    .portrait, .philo, .how { padding-top: 80px; padding-bottom: 80px; }
    .shelf { padding-top: 80px; }
    .shelf[data-view="grid"] .books { gap: 12px; }
    .shelf[data-view="grid"] .bk-link { padding: 10px 10px 12px; border-radius: 18px; }
    .duo-row { padding-top: 80px; }
    .hub, .insights { padding: 24px 20px; border-radius: 22px; }
    .closer { margin-top: 80px; padding-top: 112px; padding-bottom: 112px; }
    .page-home > main > .journey { margin-top: 80px; }
    .journey-inner { padding-top: 80px; }
    .book-hero { padding-top: calc(84px + env(safe-area-inset-top)); padding-bottom: 48px; }
    .book-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; }
    .back { justify-self: start; }
    .hero-cover { justify-self: center; width: min(200px, 56vw); }
    .chips-row, .book-meta, .book-rating, .book-ctas { justify-content: center; }
    .book-hero h1 { font-size: clamp(38px, 11vw, 52px); }
    .pull { text-align: left; }
    .tabs a { padding: 14px 10px; font-size: 14.5px; }
    .nav { grid-template-columns: auto minmax(0, 1fr) auto; }
    .nav-cta { display: none; }
    .hire { margin-top: 80px; padding-top: 104px; padding-bottom: 88px; }
    .hire h2 { font-size: clamp(44px, 13vw, 60px); }
    .hire-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-top: 48px; }
    .hire-nums b { font-size: 44px; }
    .hire-roles { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
    .hire-roles li { padding: 24px 22px; }
    .hire-contact { margin-top: 48px; }
    .hire-contact a { flex: 1 1 100%; justify-content: center; min-height: 52px; }
  }

  /* ── Reduced motion: nothing rises; the loop and the glow hold still ── */
  &.still .hero-copy > *, &.still .epigraph, &.still .stats li { animation: none; }
  @media (prefers-reduced-motion: reduce) {
    .hero-copy > *, .epigraph, .stats li { animation: none !important; }
    .cta, .cta-link span, .pt-list button, .pg, .avatar { transition: none; }
  }
}
@keyframes st-rise { from { opacity: 0; transform: translateY(24px); } }

/* ================================================================
   THE BOOK FORM, THE APPLE WAY (iPhone Duo). Human Interface Guidelines, applied:
   · Type: SF Pro for text and controls at Dynamic Type sizes (-apple-system-body), New York
     (ui-serif) for titles, as Apple Books does. Large titles collapse into an inline bar.
   · Colour: system grouped backgrounds, label / secondary label / separators, one tint.
   · Components: navigation bar with back button, search field, segmented controls, inset
     grouped lists with chevrons, filled and tinted buttons, sheets with a grabber.
   · Layout: closed = a navigation stack; open = a split view whose divider is the hinge.
   · Touch targets ≥ 44pt; Reduce Motion, Reduce Transparency and Increase Contrast honoured.
   Everything is scoped to html.duo, so the app form is untouched.
   ================================================================ */
.duo {
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', system-ui, sans-serif;
  --title: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif;
  --tint: #0071E3;
  --tint-fill: rgba(0, 113, 227, .12);
  --label: #000;
  --label2: rgba(60, 60, 67, .62);
  --label3: rgba(60, 60, 67, .3);
  --sep: rgba(60, 60, 67, .29);
  --fill: rgba(118, 118, 128, .12);
  --fill2: rgba(118, 118, 128, .2);
  --grouped: #F2F2F7;
  --cell: #FFFFFF;
  --bar: rgba(249, 249, 249, .94);
  --r: 10px;
  --hair: .5px;
}
.duo body { font: -apple-system-body; font-family: var(--ui); background: var(--grouped); color: var(--label); letter-spacing: -.01em; }
.duo h1, .duo h2, .duo h3, .duo h4 { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', var(--ui); font-weight: 700; letter-spacing: -.02em; }
.duo .kicker, .duo .claim, .duo .ph-n, .duo .facts dt, .duo .panel-h, .duo .exp-status { font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--label2); }
.duo .claim-book { color: var(--tint); }
.duo a { -webkit-tap-highlight-color: transparent; }
.duo :focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; }

/* The site nav gives way to an iOS navigation bar. */
.duo .nav, .duo .back, .duo .closer, .duo .foot, .duo .progress { display: none; }
.duo .ios-bar { position: fixed; z-index: 50; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(44px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  background: transparent; border-bottom: var(--hair) solid transparent; transition: background .2s, border-color .2s; }
.duo .ios-bar.show { background: var(--bar); border-bottom-color: var(--sep); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.duo .ios-title { grid-column: 2; max-width: 56vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 17px/1 var(--ui); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .25s; }
.duo .ios-bar.show .ios-title { opacity: 1; transform: none; }
.duo .ios-back { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; color: var(--tint); font: 400 17px/1 var(--ui); text-decoration: none; }
.duo .ios-back svg { width: 12px; height: 20px; }
.duo .ios-share { grid-column: 3; justify-self: end; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--tint); }
.duo .ios-share svg { width: 22px; height: 22px; }
.duo .ios-back:active, .duo .ios-share:active { opacity: .35; }

/* Large titles. */
.duo .shelf { padding: calc(52px + env(safe-area-inset-top)) 0 32px; background: var(--grouped); }
.duo .shelf-head { margin: 0 16px 8px; }
.duo .shelf-head h2 { margin: 0; font-size: 34px; line-height: 41px; }
.duo .shelf-sub { margin: 2px 0 0; font-size: 15px; color: var(--label2); }

/* Search field. */
.ios-search { display: none; }
.duo .ios-search { display: flex; align-items: center; gap: 6px; height: 36px; margin: 6px 16px 10px; padding: 0 8px; border-radius: var(--r); background: var(--fill); color: var(--label2); }
.duo .ios-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.duo .ios-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 17px var(--ui); color: var(--label); }
.duo .ios-search input::placeholder { color: var(--label2); }

/* Category chips and segmented controls. */
.duo .shelf-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 14px; }
.duo .shelf-bar .cats { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0 16px; }
.duo .shelf-bar .cats::-webkit-scrollbar { display: none; }
.duo .cat { flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--fill); color: var(--label); font: 500 15px/1 var(--ui); position: relative; }
.duo .cat::after { content: ''; position: absolute; inset: -5px 0; }
.duo .cat span { color: var(--label2); }
.duo .cat[aria-pressed="true"] { background: var(--tint); color: #fff; }
.duo .cat[aria-pressed="true"] span { color: #ffffffbf; }
.duo .shelf-bar .tools { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 0 16px; }
.duo .seg { display: flex; padding: 2px; border: 0; border-radius: 9px; background: var(--fill); }
.duo .seg button { flex: 1; min-height: 32px; padding: 0 12px; border-radius: 7px; border: 0; background: none; color: var(--label); font: 600 13px/1 var(--ui); }
.duo .seg button[aria-pressed="true"] { background: #fff; color: var(--label); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
.duo .seg button svg { fill: currentColor; }
.duo .shelf-bar .sort { display: none; }
.duo .tool-btn { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--tint-fill); color: var(--tint); font: 600 15px/1 var(--ui); }
.duo .tool-btn[aria-expanded="true"] { background: var(--tint); color: #fff; }
.duo .shelf-caption { margin: 0 16px 12px; border-left-color: var(--tint); color: var(--label2); }
.duo .status-line { margin: 0 16px 8px; font-size: 13px; color: var(--label2); }
.duo .rl-clear { border: 0; background: none; color: var(--tint); font: 400 13px var(--ui); }

/* Inset grouped list: the shelf as a list (the default in the book form). */
.duo .shelf[data-view="list"] .books { margin: 0 16px; border-radius: var(--r); background: var(--cell); overflow: hidden; gap: 0; }
.duo .shelf[data-view="list"] .bk + .bk { border-top: 0; }
.duo .shelf[data-view="list"] .bk-link { position: relative; display: grid; grid-template-columns: 44px 1fr 14px; gap: 14px; align-items: center; min-height: 76px; padding: 10px 16px; border-radius: 0; background: var(--cell); transition: background .15s; }
.duo .shelf[data-view="list"] .bk + .bk .bk-link::before { content: ''; position: absolute; left: 74px; right: 0; top: 0; height: var(--hair); background: var(--sep); }
.duo .shelf[data-view="list"] .bk-link::after { content: ''; width: 9px; height: 15px; justify-self: end; background: var(--label3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='M1.5 1.5l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='M1.5 1.5l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.duo .shelf[data-view="list"] .bk-link:active { background: #E5E5EA; }
.duo .shelf[data-view="list"] .cover { width: 44px; border-radius: 2px 4px 4px 2px; }
.duo .shelf[data-view="list"] .bk-meta { gap: 1px; }
.duo .shelf[data-view="list"] .bk-title { font: 600 17px/1.25 var(--ui); }
.duo .shelf[data-view="list"] .bk-by { font-size: 15px; color: var(--label2); }
.duo .shelf[data-view="list"] .bk-line { display: none; }
.duo .shelf[data-view="list"] .bk-foot { margin-top: 3px; }
.duo .badge-st { border-radius: 5px; font: 600 11px/1 var(--ui); }
/* The selected row in the open spread's sidebar: a tinted selection, as in iPadOS sidebars. */
.duo .shelf[data-view="list"] .bk.is-here .bk-link { background: var(--tint); }
.duo .shelf[data-view="list"] .bk.is-here .bk-title, .duo .shelf[data-view="list"] .bk.is-here .bk-by { color: #fff; }
.duo .shelf[data-view="list"] .bk.is-here .bk-link::after { background: #ffffffb3; }
.duo .shelf[data-view="list"] .bk.is-here .stars { background: linear-gradient(90deg, #fff calc(var(--r) / 5 * 100%), #ffffff59 calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }
.duo .shelf[data-view="grid"] .books { margin: 0 16px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.duo .shelf[data-view="grid"] .bk-link { background: var(--cell); border: 0; border-radius: var(--r); }
.duo .shelf[data-view="shelf"] .books { margin: 0 16px; }
.duo .empty { margin: 0 16px; }

/* Sheets: the filter sheet with a grabber, on the grouped background. */
.duo .filters { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; margin: 0; max-height: 86vh; overflow-y: auto; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); border: 0; border-radius: 13px 13px 0 0; background: var(--grouped); box-shadow: 0 -10px 40px rgba(0, 0, 0, .2); transform: translateY(var(--drag, 0)); }
.duo .sheet-grip { display: block; width: 36px; height: 5px; margin: 0 auto 14px; border-radius: 2.5px; background: var(--label3); }
.duo .filters legend, .duo .selects label { font: 400 13px var(--ui); text-transform: uppercase; letter-spacing: 0; color: var(--label2); }
.duo .chip span { min-height: 34px; border: 0; background: var(--fill); font: 400 15px var(--ui); }
.duo .chip input:checked + span { background: var(--tint); color: #fff; }
.duo .selects select { min-height: 44px; border: 0; border-radius: var(--r); background: var(--cell); font: 400 17px var(--ui); }
.duo .btn { min-height: 50px; border-radius: 12px; border: 0; background: var(--tint); color: #fff; font: 600 17px var(--ui); }
.duo .btn-ghost { min-height: 50px; border-radius: 12px; border: 0; background: var(--tint-fill); color: var(--tint); font: 600 17px var(--ui); }
.duo .sheet-actions { display: grid; grid-template-columns: 1fr 1fr; }

/* The book: large title, filled and tinted buttons, inset grouped content. */
.duo .page-book main, .duo .book { background: var(--grouped); }
.duo .book-hero { grid-template-columns: 96px 1fr; gap: 16px; align-items: start; padding: calc(52px + env(safe-area-inset-top)) 16px 8px; margin: 0; border-radius: 0; background: transparent; }
.duo .cover-lg { width: 96px; }
.duo .hero-cover .cover { transform: none; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
.duo .chips-row { gap: 4px; margin-bottom: 8px; }
.duo .chips-row span { border: 0; background: var(--fill); border-radius: 6px; font: 500 12px var(--ui); color: var(--label2); }
.duo .book-hero h1 { margin: 0 0 2px; font-size: 28px; line-height: 34px; }
.duo .book-sub { font: italic 400 17px/1.3 var(--title); color: var(--label2); }
.duo .book-by { margin: 6px 0 2px; font: 400 17px var(--ui); }
.duo .book-meta { font: 400 15px var(--ui); color: var(--label2); }
.duo .book-rating { font: 400 15px var(--ui); color: var(--label2); }
.duo .book-ctas { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 0; }
.duo .book-ctas .btn, .duo .book-ctas .btn-ghost { justify-content: center; }
.duo .book-ctas .share { grid-column: 1 / -1; }
.duo .btn-dark { background: var(--tint); color: #fff; }
.duo .btn-out { background: var(--tint-fill); color: var(--tint); }
.duo .pull { grid-column: 1 / -1; margin-top: 4px; border: 0; border-radius: var(--r); background: var(--cell); }
.duo .pull p { font: italic 400 19px/1.35 var(--title); }
.duo .book-body { padding: 8px 0 40px; }
.duo .tabs { position: sticky; top: calc(44px + env(safe-area-inset-top)); z-index: 4; display: flex; gap: 0; margin: 10px 16px 14px; padding: 2px; border: 0; border-radius: 9px; background: var(--fill); overflow-x: auto; }
.duo .tabs a { flex: 1 0 auto; min-height: 32px; display: grid; place-items: center; padding: 0 10px; border-radius: 7px; color: var(--label); font: 600 13px/1 var(--ui); }
.duo .tabs a[aria-selected="true"] { background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
.duo .tabs a[aria-selected="true"]::after { display: none; }
.duo .book-grid { gap: 0; }
.duo .panels { padding: 0 16px; }
.duo .sec { margin: 0 0 14px; padding: 16px; border: 0; border-radius: var(--r); background: var(--cell); }
.duo .sec h3 { font-size: 22px; line-height: 28px; margin-bottom: 8px; }
.duo .prose, .duo .sec p { font: 400 17px/1.47 var(--ui); }
.duo #thesis .prose { font: 400 20px/1.4 var(--title); }
.duo .pair { border: 0; gap: 0; }
.duo .fw li, .duo .idea, .duo .conn, .duo .exp, .duo .sec-diagnostic .prose li { border: 0; background: var(--grouped); border-radius: var(--r); }
.duo .idea h4 { font-size: 20px; }
.duo .caveat, .duo .example { font-size: 15px; color: var(--label2); }
/* The side card becomes an inset grouped list of label / value rows. */
.duo .side-card { display: block; position: static; margin: 0 16px 14px; padding: 0; border: 0; border-radius: var(--r); background: var(--cell); overflow: hidden; }
.duo .side-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 16px; }
.duo .side-card > div + div { box-shadow: inset 16px var(--hair) 0 var(--cell), inset 0 var(--hair) 0 var(--sep); }
.duo .sc-l { margin: 0; font: 400 17px var(--ui); color: var(--label); }
.duo .sc-st { font: 400 17px var(--ui); }
.duo .sc-sub { display: none; }
.duo .stars { background: linear-gradient(90deg, var(--label) calc(var(--r) / 5 * 100%), var(--label3) calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }
.duo .side-card .stars { font-size: 18px; }
.duo .sc-rec { font: 400 17px var(--ui); }
.duo .provenance { margin: 0 16px 14px; border: 0; padding: 0 4px; font-size: 13px; color: var(--label2); }
.duo .pager { margin: 0 16px; grid-template-columns: 1fr 1fr; }
.duo .pg { border: 0; border-radius: var(--r); background: var(--cell); }

/* Open: a split view on the hinge. Sidebar left, detail right, each with its own large title. */
.duo[data-fold="open"] .ios-bar { display: none; }
.duo[data-fold="open"] .spread { background: var(--grouped); }
.duo[data-fold="open"] .leaf { background: var(--grouped); border-radius: 0; }
.duo[data-fold="open"] .leaf-shelf { box-shadow: inset calc(-1 * var(--hair)) 0 0 var(--sep); }
.duo[data-fold="open"] .leaf-book { box-shadow: none; }
.duo[data-fold="open"] .gutter { background: var(--sep); opacity: 1; }
.duo[data-fold="open"] .shelf, .duo[data-fold="open"] .book-hero { padding-top: calc(14px + env(safe-area-inset-top)); }
/* A book open: the sidebar's back button, "‹ Library", to the root (the shelf beside its
   colophon). It stays at the top of the left page while the shelf scrolls under it. */
.duo[data-fold="open"] .shelf-back { position: sticky; z-index: 6; top: 0; display: flex; align-items: center; gap: 6px; width: 100%; min-height: calc(44px + env(safe-area-inset-top)); margin: 0 0 4px; padding: env(safe-area-inset-top) 16px 0 max(8px, env(safe-area-inset-left)); color: var(--tint); font: 400 17px/1 var(--ui); text-decoration: none; background: color-mix(in srgb, var(--grouped) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.duo[data-fold="open"] .page-book .shelf { padding-top: 0; }
.duo[data-fold="open"] .shelf-back svg { flex: none; width: 12px; height: 20px; }
.duo[data-fold="open"] .shelf-back:active { opacity: .35; }
.duo[data-fold="open"] .shelf-back:focus-visible { outline: 2px solid var(--tint); outline-offset: -4px; border-radius: 10px; }
@media (prefers-reduced-transparency: reduce) { .duo[data-fold="open"] .shelf-back { background: var(--grouped); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.duo[data-fold="open"] .tabs { top: 6px; }
.duo[data-fold="open"] .book-ctas { grid-template-columns: repeat(3, auto); justify-content: start; }
.duo[data-fold="open"] .book-ctas .share { grid-column: auto; }
/* The colophon is the split view's empty detail state. */
.duo .colophon { background: var(--grouped); }
.duo .colo-inner { max-width: 340px; }
.duo .colophon h1 { font-size: 28px; line-height: 34px; }
.duo .colo-lede { font: italic 400 19px var(--title); color: var(--label2); }
.duo .colo-inner p { color: var(--label2); font: 400 15px/1.4 var(--ui); }
.duo .colo-feature { border: 0; border-radius: var(--r); background: var(--cell); }

/* The closed home keeps the long-scroll sections, as grouped cards. */
.duo .journey { margin: 8px 16px; border-radius: var(--r); }
.duo .duo-row { padding: 8px 16px 24px; gap: 14px; }
.duo .hub, .duo .insights { border: 0; border-radius: var(--r); background: var(--cell); }
.duo .track-nav { display: none; }
.duo .hub-map li { position: static; transform: none; }

/* Accessibility settings. */
@media (prefers-reduced-transparency: reduce) { .duo .ios-bar.show { background: #F9F9F9; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .duo { --label2: rgba(60, 60, 67, .85); --label3: rgba(60, 60, 67, .6); --sep: rgba(60, 60, 67, .6); --tint: #6E4C17; } }

/* Book header, closed: cover and title stacked like Apple Books' product page. */
.duo .book-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.duo .hero-cover { width: 132px; } .duo .cover-lg { width: 132px; }
.duo .hero-copy { display: grid; justify-items: center; width: 100%; }
.duo .chips-row { justify-content: center; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.duo .chips-row span { flex: none; }
.duo .book-meta, .duo .book-rating { justify-content: center; }
.duo .book-meta span + span::before { margin: 0 6px; }
.duo .book-ctas { width: 100%; grid-template-columns: 1fr 1fr 50px; }
.duo .book-ctas .btn, .duo .book-ctas .btn-ghost { min-height: 50px; padding: 0 12px; white-space: nowrap; font-size: 17px; }
.duo .book-ctas .share { grid-column: auto; padding: 0; font-size: 0; }
.duo .book-ctas .share svg { margin: 0; width: 22px; height: 22px; }
.duo .btn-dark .play { display: none; }
.duo .pull { text-align: left; width: 100%; }
.duo .pull p { font-size: 18px; }
/* Open: cover beside the title, buttons in one row. */
.duo[data-fold="open"] .book-hero { grid-template-columns: 112px 1fr; justify-items: start; text-align: left; }
.duo[data-fold="open"] .hero-cover, .duo[data-fold="open"] .cover-lg { width: 112px; }
.duo[data-fold="open"] .hero-copy { justify-items: start; }
.duo[data-fold="open"] .chips-row, .duo[data-fold="open"] .book-meta, .duo[data-fold="open"] .book-rating { justify-content: flex-start; }
.duo[data-fold="open"] .book-ctas { grid-column: auto; grid-template-columns: 1fr 1fr 50px; justify-content: stretch; }
.duo[data-fold="open"] .book-hero h1 { font-size: 30px; line-height: 36px; }
.duo .tabs a { white-space: nowrap; }
.duo[data-fold="closed"] .book-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; margin: 0; border-radius: 0; overflow: visible; }
.duo[data-fold="closed"] .hero-cover, .duo[data-fold="closed"] .cover-lg { width: 132px; }
.duo[data-fold="closed"] .hero-copy { min-width: 0; }
.duo[data-fold="closed"] .book-hero h1 { font-size: 30px; line-height: 36px; }
.duo[data-fold="closed"] .book-ctas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 50px; }
.duo[data-fold="closed"] .hero-cover { justify-self: center; }

/* Philosophy, How I read, Journey, Themes, Insights: on the Duo too (owner, 2026-10-22). */
.ios-explore { display: none; }
.duo .ios-explore { display: block; margin: 0 16px 14px; border-radius: var(--r); background: var(--cell); overflow: hidden; }
.duo .ios-explore a { position: relative; display: grid; grid-template-columns: 29px 1fr 9px; gap: 14px; align-items: center; min-height: 44px; padding: 0 16px; color: var(--label); font: 400 17px var(--ui); text-decoration: none; }
.duo .ios-explore a + a::before { content: ''; position: absolute; left: 59px; right: 0; top: 0; height: var(--hair); background: var(--sep); }
.duo .ios-explore a::after { content: ''; width: 9px; height: 15px; background: var(--label3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='M1.5 1.5l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='M1.5 1.5l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.duo .ios-explore a:active { background: #E5E5EA; }
.duo .ie-ic { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; background: var(--c); color: #fff; font-size: 16px; line-height: 1; }

/* Closed: the sections follow the list, in this order. */
.duo[data-fold="closed"] .page-home main { display: flex; flex-direction: column; }
.duo[data-fold="closed"] .page-home .shelf { order: 1; }
.duo[data-fold="closed"] .page-home .philo { order: 3; }
.duo[data-fold="closed"] .page-home .how { order: 3; }
.duo[data-fold="closed"] .page-home .journey { order: 4; }
.duo[data-fold="closed"] .page-home .duo-row { order: 5; }
.duo .philo, .duo .how { display: grid; }
.duo .journey, .duo .duo-row { display: grid; }
.duo .philo, .duo .how, .duo .journey, .duo .duo-row { scroll-margin-top: calc(52px + env(safe-area-inset-top)); }

/* Philosophy, iOS: a large title, a grouped card for the words, the loop, then cards. */
.duo .philo { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 24px 16px 8px; }
.duo .philo-copy { padding: 16px; border-radius: var(--r); background: var(--cell); }
.duo .philo h2 { font-size: 28px; line-height: 34px; margin-bottom: 12px; }
.duo .philo-lede { font: 400 17px/1.47 var(--ui); color: var(--label); margin-bottom: 14px; }
.duo .philo-close { font: italic 400 19px/1.35 var(--title); border-left-color: var(--tint); }
.duo .loop { max-width: 300px; margin: 18px auto 26px; }
.duo .loop-node { width: 96px; }
.duo .loop-node b { font: 600 13px/1.2 var(--ui); background: var(--grouped); }
.duo .loop-right { transform: translate(44px, -20px); } .duo .loop-left { transform: translate(-44px, -20px); }
.duo .loop-top { transform: translate(-50%, -22px); } .duo .loop-bottom { transform: translate(-50%, 22px); }
.duo .loop-core b { font: 700 17px/1.15 var(--title); }
.duo .philo-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
.duo .ph-core { grid-column: auto; }
.duo .ph-card { border: 0; border-radius: var(--r); background: var(--cell); padding: 14px 16px; }
.duo .ph-core { background: linear-gradient(155deg, #0a63d6, #062a63); }
.duo .ph-card h3 { font-size: 20px; }
.duo .ph-card > p:not(.ph-n):not(.ph-books) { font: 400 15px/1.4 var(--ui); }
.duo .ph-card.on { box-shadow: 0 0 0 2px var(--tint); transform: none; }

/* How I read: a grouped list of the four voices. */
.duo .how { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 4px; gap: 4px; }
.duo .how h2 { font-size: 22px; } .duo .how > p { font-size: 15px; color: var(--label2); }
.duo .how ol { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; border-radius: var(--r); overflow: hidden; background: var(--cell); }
.duo .how li { border: 0; border-radius: 0; background: none; }
.duo .how li + li { box-shadow: inset 0 var(--hair) 0 var(--sep); }
.duo .how li a { border: 0; border-radius: 0; font: 400 15px/1.4 var(--ui); transform: none !important; box-shadow: none !important; }
.duo .how-go { color: var(--tint); font: 400 15px var(--ui); }

/* Journey and the themes/insights cards. */
.duo .journey { display: block; margin: 18px 16px 0; border-radius: var(--r); }
.duo .journey-inner { padding: 20px 0 16px; }
.duo .journey-head { padding: 0 16px; flex-direction: column; align-items: flex-start; }
.duo .journey-head h2 { font-size: 24px; }
.duo .seg-dark { max-width: 100%; overflow-x: auto; }
.duo .track-wrap { margin: 0; padding: 0 8px; }
.duo .track { height: 250px; margin: 0 48px; min-width: calc(var(--n) * 92px); }
.duo .duo-row { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 30px; }
.duo .hub header h2, .duo .insights header h2 { font-size: 24px; }
.duo .hub-map { aspect-ratio: auto !important; min-height: 0 !important; }
.duo .hub-map > svg, .duo .hub-core { display: none; }
.duo .hub-map ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.duo .hub-map a { flex-direction: row !important; text-align: left !important; min-height: 44px; }
.duo .hub-t { justify-items: start !important; max-width: none !important; }

/* Open: the right page scrolls the colophon, then all of the above. */
.duo[data-fold="open"] .page-home .colophon { display: block; }
.duo[data-fold="open"] .page-home .colo-inner { margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 24px 8px; }
.duo[data-fold="open"] .journey, .duo[data-fold="open"] .duo-row { display: block; }
.duo[data-fold="open"] .duo-row > * + * { margin-top: 14px; }
.duo .ph-core .ph-n { color: #D6E6FF; }
.duo .ph-core .ph-books > span { color: #D6E6FF; }
.duo .reveal { opacity: 1 !important; transform: none !important; }
.duo[data-fold="open"] .journey { margin: 18px 16px 0; border-radius: var(--r); overflow: hidden; }
.duo[data-fold="open"] .duo-row { padding: 14px 16px 30px; }
.duo[data-fold="open"] .philo, .duo[data-fold="open"] .how { padding-left: 16px; padding-right: 16px; }

/* The portrait, iOS: a grouped card for the words, the bust, then an inset grouped list. */
.duo .portrait { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "bust" "list" "close"; gap: 0; margin: 0; padding: 24px 16px 8px; scroll-margin-top: calc(52px + env(safe-area-inset-top)); }
.duo .portrait::before { display: none; }
.duo .pt-copy { padding: 16px; border-radius: var(--r); background: var(--cell); }
.duo .portrait h2 { font-size: 28px; line-height: 34px; margin-bottom: 12px; }
.duo .pt-lede { margin: 0; font: 400 17px/1.47 var(--ui); color: var(--label); }
.duo .pt-bust { position: static; margin: 20px 0 6px; }
.duo .pt-bust svg { max-width: 300px; }
.duo .pt-say b { font: italic 400 20px/1.3 var(--title); }
.duo .pt-say a { font: 600 15px var(--ui); color: var(--tint); text-decoration: none; }
.duo .pt-list { grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: var(--r); background: var(--cell); overflow: hidden; }
.duo .pt-list li + li button { box-shadow: inset 52px var(--hair) 0 -1px var(--cell), inset 0 var(--hair) 0 var(--sep); }
.duo .pt-list button { min-height: 60px; border: 0; border-radius: 0; background: none; transform: none; font-family: var(--ui); }
.duo .pt-list button:active { background: #E5E5EA; }
.duo .pt-list b { font: 400 17px/1.25 var(--ui); }
.duo .pt-list span { font: 400 13px var(--ui); color: var(--label2); }
.duo .pt-list button[aria-pressed="true"] { box-shadow: none; background: var(--tint-fill); }
.duo .pt-close { margin: 16px 4px 0; border-left-color: var(--tint); font: italic 400 19px/1.35 var(--title); }
.duo[data-fold="closed"] .page-home .portrait { order: 2; }

/* ================================================================
   STUDIO ON THE DUO (2026-10-23, owner: "very basic and robotic"). The app form's
   Apple-and-Tesla look, said in iOS: App Store "Today" cards instead of bare grouped
   lists. Black cards for the hero, the philosophy and each book; blue for every accent.
   ================================================================ */
.duo {
  --brass: #0071E3; --brass-hi: #2997FF; --brass-ink: #0066CC;
  --walnut: #1D1D1F; --walnut-deep: #000; --sage-ink: #1E7A35;
  --paper: #F2F2F7; --parchment: #F2F2F7; --card: #FFFFFF; --edge: #E5E5EA; --text: #000; --soft: #6E6E73;
  --card-r: 26px;
  --dark-soft: #A1A1A6;
  --dark-cell: #1C1C1E;
  --glow: radial-gradient(90% 52% at 50% 64%, #16305a 0%, #0a1426 42%, transparent 74%), #000;
}

/* The hero, closed: a Today card above the shelf. */
.duo[data-fold="closed"] .page-home .night { display: block; order: 0; min-height: 0; margin: calc(52px + env(safe-area-inset-top)) 12px 0; border-radius: var(--card-r); overflow: hidden; background: var(--glow); color: #F5F5F7; box-shadow: 0 30px 50px -30px #0009; }
.duo .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; justify-items: center; gap: 0; min-height: 0; max-width: none; margin: 0; padding: 30px 20px 20px; text-align: center; }
.duo .hero > * { grid-column: 1; grid-row: auto; }
.duo .hero .hero-copy { max-width: 30em; }
.duo .hero-eyebrow { margin: 0 0 10px; font: 600 13px/1.2 var(--ui); color: #2997FF; }
.duo .hero-eyebrow span { margin: 0 3px; color: var(--dark-soft); }
.duo .hero h1 { margin: 0 0 12px; font: 700 31px/1.08 -apple-system, BlinkMacSystemFont, 'SF Pro Display', var(--ui); letter-spacing: -.028em; color: #F5F5F7; }
.duo .h1-dim { display: block; color: #8E8E93; }
.duo .hero .lede { max-width: none; margin: 0 0 18px; font: 400 15px/1.45 var(--ui); color: var(--dark-soft); }
.duo .hero .ctas { display: grid; justify-items: center; gap: 2px; }
.duo .hero .cta { min-height: 50px; padding: 0 30px; border-radius: 980px; background: #0071E3; color: #fff; font: 600 17px/1 var(--ui); }
.duo .cta-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: #2997FF; font: 400 17px var(--ui); text-decoration: none; }
.duo .desk { width: auto; margin: 0; padding: 26px 0 6px; zoom: .62; }
.duo .stack { transform: none; margin: 0; }
.duo .epigraph { margin: 18px 0 0; padding: 0; border: 0; text-align: center; }
.duo .epigraph::before { display: none; }
.duo .epigraph p { margin: 0 0 4px; font: italic 400 17px/1.35 var(--title); color: #E5E5EA; }
.duo .epigraph footer { font: 400 12px var(--ui); color: var(--dark-soft); }
.duo .stats-wrap { width: 100%; max-width: none; margin: 20px 0 0; padding: 0; }
.duo .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 14px 0 0; border: 0; border-top: var(--hair) solid #ffffff33; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.duo .stats li, .duo .stats li + li { padding: 0; border: 0; }
.duo .stats a { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; }
.duo .stats svg { display: none; }
.duo .stats b { font: 700 22px/1.1 var(--ui); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.duo .stats span { font: 400 11px/1.2 var(--ui); color: var(--dark-soft); text-align: center; }
.duo[data-fold="closed"] .page-home .shelf { padding-top: 30px; }

/* The open home's right-hand page leads with the same card. */
.duo[data-fold="open"] .page-home .colo-inner { max-width: none; margin: calc(12px + env(safe-area-inset-top)) 16px 0; padding: 34px 24px 24px; border-radius: var(--card-r); background: radial-gradient(80% 60% at 50% 34%, #16305a 0%, #0a1426 45%, transparent 75%), #000; color: #F5F5F7; }
.duo[data-fold="open"] .colophon .kicker { color: #2997FF; }
.duo[data-fold="open"] .colophon h1 { font-size: 32px; line-height: 1.08; letter-spacing: -.028em; color: #fff; }
.duo[data-fold="open"] .colo-lede { color: var(--dark-soft); font: 600 19px/1.3 var(--ui); font-style: normal; }
.duo[data-fold="open"] .colophon .colo-inner > p:not(.kicker):not(.colo-lede) { color: var(--dark-soft); }
.duo .colo-orn { width: 150px; height: 84px; gap: 4px; border-bottom: 3px solid #3A3A3C; filter: drop-shadow(0 0 18px #2997ff55); }
.duo .colo-orn i { width: 20px; }
.duo .colo-orn i:nth-child(1) { height: 58px; } .duo .colo-orn i:nth-child(2) { height: 72px; } .duo .colo-orn i:nth-child(3) { height: 80px; background: #0071E3; } .duo .colo-orn i:nth-child(4) { height: 64px; } .duo .colo-orn i:nth-child(5) { height: 70px; }
.duo[data-fold="open"] .colo-feature { background: #ffffff14; color: #F5F5F7; }
.duo[data-fold="open"] .colo-feature .kicker { color: #2997FF; }
.duo[data-fold="open"] .colo-feature b { font: 600 20px/1.15 var(--ui); }
.duo[data-fold="open"] .colo-feature > span > span:last-child { color: var(--dark-soft); }
.duo[data-fold="open"] .page-home .portrait { padding-top: 28px; }

/* The portrait: the bust on an aluminium shelf. */
.duo .pt-plank { width: 70%; height: 10px; border-radius: 5px; background: linear-gradient(#f2f2f5, #c7c7cc); box-shadow: 0 16px 22px -14px #0006; }
.duo .pt-outline { stroke: #1D1D1F; stroke-opacity: .25; }
.duo .pt-bust svg { filter: drop-shadow(0 30px 30px #00000030); }
.duo .pt-say-k { font: 600 12px/1.3 var(--ui); letter-spacing: .04em; color: var(--tint); }

/* Philosophy: a black card, the loop glowing. */
.duo .philo { margin: 24px 12px 0; padding: 26px 16px 18px; border-radius: var(--card-r); background: #000; color: #F5F5F7; }
.duo .philo-copy { padding: 0 4px; background: none; }
.duo .philo .kicker { color: #2997FF; }
.duo .philo h2 { color: #fff; }
.duo .philo-lede { color: var(--dark-soft); }
.duo .philo-close { color: #F5F5F7; border-left-color: #2997FF; }
.duo .loop-ring { stroke: #2C2C2E; stroke-width: 1.5; }
.duo .loop-flow { stroke: #2997FF; filter: drop-shadow(0 0 5px #2997ffaa); }
.duo .loop-arrow { fill: #2997FF; }
.duo .loop-core { color: #fff; background: radial-gradient(circle at 34% 28%, #5aa9ff 0%, #0a63d6 42%, #062a63 100%); box-shadow: 0 0 0 1px #2997ff55, 0 0 60px -6px #2997ff88; }
.duo .loop-core b { font: 700 16px/1.15 var(--ui); letter-spacing: -.02em; }
.duo .loop-node span { background: var(--dark-cell); border: 1.5px solid #2997FF; color: #fff; box-shadow: none; }
.duo .loop-node b { background: var(--dark-cell); color: #F5F5F7; border-radius: 980px; }
.duo .loop-node.on span { background: #2997FF; color: #000; box-shadow: 0 0 20px #2997ffaa; }
.duo .loop-node.on b { background: #fff; color: #000; }
.duo .ph-card { background: var(--dark-cell); color: #F5F5F7; }
.duo .ph-card > p:not(.ph-n):not(.ph-books) { color: var(--dark-soft); }
.duo .ph-n { color: #2997FF; }
.duo .ph-books { border-top-color: #2C2C2E; }
.duo .ph-books > span { color: var(--dark-soft); }
.duo .ph-card.on { box-shadow: 0 0 0 2px #2997FF; }

/* Journey: black, the path in blue. */
.duo .journey { background: radial-gradient(70% 80% at 50% 0%, #0d2142 0%, transparent 70%), #000; border-radius: var(--card-r); }
.duo .mtn path:nth-child(1) { fill: #15171c; } .duo .mtn path:nth-child(2) { fill: #0d0f13; } .duo .mtn path:nth-child(3) { fill: #050608; }
.duo .track .path path { stroke: #2997ff4d; }
.duo .track .path .path-done { stroke: #2997FF; filter: drop-shadow(0 0 5px #2997ffaa); }
.duo .stop .dot { background: #2997FF; box-shadow: 0 0 0 4px #2997ff33, 0 0 12px #2997FF; }
.duo .stop-reading .dot { background: #fff; }
.duo .stop-queued .dot { background: #636366; box-shadow: 0 0 0 4px #63636633; }
.duo .stop b { font: 600 13px/1.2 var(--ui); }
.duo .stop-reading b + span { color: #2997FF; }
.duo .seg-dark button[aria-pressed="true"] { background: #F5F5F7; color: #000; }
.duo .hub, .duo .insights, .duo .pt-copy, .duo .ios-explore, .duo .shelf[data-view="list"] .books, .duo .pt-list, .duo .how ol { border-radius: 20px; }
.duo .hub-ic { border: 0; border-radius: 9px; background: var(--c); }
.duo .hub-ic svg { fill: #fff; }

/* A book: a black card lit in its own colour, as the app form's hero. */
.duo .book-hero, .duo[data-fold="closed"] .book-hero { isolation: isolate; margin: calc(52px + env(safe-area-inset-top)) 12px 0; padding: 26px 18px 20px; border-radius: var(--card-r); overflow: hidden; color: #F5F5F7;
  background: radial-gradient(90% 40% at 50% 20%, color-mix(in srgb, var(--cv-bg) 75%, transparent), transparent 72%), #000; box-shadow: 0 30px 50px -30px #0009; }
.duo[data-fold="open"] .book-hero { margin: calc(12px + env(safe-area-inset-top)) 16px 0; padding: 22px 20px 20px;
  background: radial-gradient(60% 70% at 16% 30%, color-mix(in srgb, var(--cv-bg) 75%, transparent), transparent 72%), #000; }
.duo .book-hero h1 { color: #fff; letter-spacing: -.028em; }
.duo .book-sub { color: var(--dark-soft); }
.duo .book-by { color: #F5F5F7; }
.duo .book-meta, .duo .book-rating { color: var(--dark-soft); }
.duo .book-meta span + span::before { color: #636366; }
.duo .book-hero .chips-row span { background: #ffffff1f; color: #E5E5EA; }
.duo .book-hero .stars { background: linear-gradient(90deg, #fff calc(var(--r) / 5 * 100%), #48484A calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }
.duo .book-hero .btn-out, .duo .book-hero .btn-ghost { background: #ffffff1f; color: #fff; }
.duo .book-hero .back { color: var(--dark-soft); }
.duo .book-hero .pull { background: #ffffff12; }
.duo .book-hero .pull p { color: #F5F5F7; }
.duo .hero-cover .cover { box-shadow: 0 20px 36px -16px #000, 0 0 70px -10px color-mix(in srgb, var(--cv-bg) 85%, transparent); }
.duo .page-book .tabs { margin-top: 16px; }

/* Touch: cards and buttons give under the finger, on the snap spring. */
.duo:not(.still) :is(.cta, .stats a, .colo-feature, .ph-card, .hub-map a, .btn, .btn-ghost, .loop-node, .pg) { transition: transform var(--spring-snap-ms) var(--spring-snap); }
.duo:not(.still) :is(.cta, .stats a, .colo-feature, .ph-card, .hub-map a, .btn, .btn-ghost, .pg):active { transform: scale(.97); }
.duo .book-hero .hero-copy, .duo .book-ctas > * { min-width: 0; }
.duo[data-fold="open"] .book-hero { grid-template-columns: 112px minmax(0, 1fr); }
.duo .book-hero, .duo[data-fold="closed"] .book-hero { background: radial-gradient(90% 40% at 50% 20%, color-mix(in srgb, var(--cv-bg) 50%, transparent), transparent 72%), #000; }
.duo[data-fold="open"] .book-hero { background: radial-gradient(60% 70% at 16% 30%, color-mix(in srgb, var(--cv-bg) 50%, transparent), transparent 72%), #000; }
.duo .stats { align-items: start; }
.duo .stats a { align-content: start; }
.duo[data-fold="open"] .book-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.duo[data-fold="open"] .book-ctas .btn, .duo[data-fold="open"] .book-ctas .btn-ghost { flex: 1 1 auto; padding: 0 18px; }
.duo[data-fold="open"] .book-ctas .share { flex: 0 0 50px; }

/* Work with me: the résumé as one dark card, the contact buttons full width. */
.duo[data-fold="closed"] .page-home .hire { order: 6; }
.duo .hire { margin: 24px 12px 30px; padding: 28px 20px 22px; border-radius: var(--card-r); background: radial-gradient(90% 40% at 50% 0%, #0d2142 0%, transparent 72%), #000; color: #F5F5F7; scroll-margin-top: calc(52px + env(safe-area-inset-top)); }
.duo[data-fold="open"] .hire { margin: 18px 16px 30px; }
.duo .hire .kicker { color: #2997FF; }
.duo .hire h2 { margin: 0 0 6px; font-size: 36px; line-height: 1.04; letter-spacing: -.03em; color: #fff; }
.duo .hire-tag { margin: 0 0 16px; font: 600 15px/1.4 var(--ui); color: #2997FF; }
.duo .hire-lede { margin: 0 0 12px; font: 400 15px/1.45 var(--ui); color: var(--dark-soft); }
.duo .hire-seek { margin: 0; font: 600 15px/1.4 var(--ui); color: #F5F5F7; }
.duo .hire-seek span { display: block; margin-top: 4px; font: 400 13px var(--ui); color: var(--dark-soft); }
.duo .hire-nums { list-style: none; margin: 22px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; border-top: var(--hair) solid #ffffff33; }
.duo .hire-nums b { display: block; font: 700 32px/1 var(--ui); letter-spacing: -.025em; color: #fff; }
.duo .hire-nums span { display: block; margin-top: 4px; font: 400 13px/1.3 var(--ui); color: var(--dark-soft); }
.duo .hire-roles { list-style: none; margin: 22px 0 0; padding: 0; border-radius: 16px; background: var(--dark-cell); overflow: hidden; }
.duo .hire-roles li { padding: 14px 16px; }
.duo .hire-roles li + li { box-shadow: inset 0 var(--hair) 0 #ffffff26; }
.duo .hr-when { margin: 0 0 4px; font: 600 12px var(--ui); color: #2997FF; }
.duo .hire-roles h3 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; color: #fff; }
.duo .hr-title { margin: 2px 0 4px; font: 400 15px/1.3 var(--ui); color: #F5F5F7; }
.duo .hr-what { margin: 0; font: 400 13px/1.4 var(--ui); color: var(--dark-soft); }
.duo .hire-creds { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.duo .hire-creds li { padding: 6px 12px; border-radius: 980px; background: #ffffff1a; font: 400 13px var(--ui); color: #E5E5EA; }
.duo .hire-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 22px 0 0; }
.duo .hire-contact a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 14px; border-radius: 14px; background: #ffffff1f; color: #fff; font: 600 17px var(--ui); text-decoration: none; }
.duo .hire-contact .cta { background: #0071E3; }
.duo .hire-contact svg { width: 20px; height: 20px; flex: none; }
.duo .hire-btn span { opacity: .7; }
.duo .hire-direct { margin: 16px 0 0; text-align: center; font: 400 13px var(--ui); color: var(--dark-soft); }
.duo .hire-direct a { color: #F5F5F7; }
.duo:not(.still) .hire-contact a { transition: transform var(--spring-snap-ms) var(--spring-snap); }
.duo:not(.still) .hire-contact a:active { transform: scale(.97); }

/* ================================================================
   READ NOW (2026-10-27, owner: "the most appealing and pop culture app … light mode
   default"; picked Apple Music / Books). The last layer, over studio.css and duo.css:
   · Light everywhere. The black bands become white and #F5F5F7; colour comes from the
     books themselves: a drifting mesh of cover colours behind the hero, and each book's
     page washed in its own cover, as Apple Music does an album.
   · Apple Music's red for every accent: #FA2D48 for colour you look at, #E0193F under
     white text (4.8:1), #D70F35 for red text (5.2:1 on white, 4.8:1 on #F5F5F7).
   · New pieces: Recently Added (a swipe row), What's New (App Store version history),
     Settings-style squircle icons on every section, and on phones a tab bar with a
     Now Reading mini-player.
   Motion stays on transform and opacity; under reduced motion nothing drifts or bounces.
   ================================================================ */
:root {
  --am: #FA2D48;
  --am-fill: #E0193F;
  --am-ink: #D70F35;
  --am-soft: #FFE4E8;
}

/* ── The app form ─────────────────────────────────────────────────────────────── */
:root:not(.duo) {
  --blue: var(--am-fill); --blue-hi: var(--am); --blue-ink: var(--am-ink);
  --brass: var(--am-fill); --brass-hi: var(--am); --brass-ink: var(--am-ink);
  --night: #FFFFFF; --night-ink: #1D1D1F; --night-soft: #6E6E73;
  --hair: #E5E5EA;

  ::selection { background: #fa2d4833; }
  .cta:hover, .btn:hover, .nav-cta:hover { background: #C8102E; }
  .cta { box-shadow: 0 8px 20px -10px #e0193f99; }

  /* Bands: white and #F5F5F7, alternating. */
  .philo, .closer, .hire { box-shadow: 0 0 0 100vmax var(--bg); background: var(--bg); color: var(--text); }
  .portrait, .how, .fresh { box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax); background: var(--white); }

  /* Global bar: clear over the hero, frosted white once scrolled. */
  .nav { color: var(--text); }
  .nav.scrolled, .nav.floating, .page-book .nav, .page-404 .nav, .nav-book { background: #ffffffcc; color: var(--text); box-shadow: 0 1px 0 #0000000f; }
  .nav-search, .nav.scrolled .nav-search, .nav-book .nav-search { background: #7676801f; }
  .nav-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--am); }
  .nav-search svg { stroke: #6E6E73; }
  .nav-search input { color: var(--text); }
  .nav-search input::placeholder { color: #6E6E73; }
  .avatar { background: var(--text); color: #fff; }

  /* Hero: white, a mesh of cover colours drifting behind the stack of books. */
  .night { background: #fff; color: var(--text); }
  .night::before, .night::after { display: none; }
  .mesh { position: absolute; inset: -10% -10% 0; z-index: -1; overflow: hidden; pointer-events: none; filter: blur(70px) saturate(140%); opacity: .5; }
  .mesh i { position: absolute; width: 46vmax; aspect-ratio: 1; border-radius: 50%; background: var(--c); will-change: transform; }
  .mesh i:nth-child(1) { left: 48%; top: -6%; animation: mesh-a 22s ease-in-out infinite alternate; }
  .mesh i:nth-child(2) { left: 66%; top: 22%; width: 38vmax; animation: mesh-b 26s ease-in-out infinite alternate; }
  .mesh i:nth-child(3) { left: 30%; top: 40%; width: 34vmax; opacity: .8; animation: mesh-c 30s ease-in-out infinite alternate; }
  .mesh i:nth-child(4) { left: 78%; top: 52%; width: 30vmax; animation: mesh-a 34s ease-in-out infinite alternate-reverse; }
  .night::after { content: ''; display: block; position: absolute; inset: auto 0 0; height: 30%; z-index: -1; background: linear-gradient(transparent, #fff); }
  .hero-eyebrow { color: var(--am-ink); }
  .hero-eyebrow span { color: #86868B; }
  .hero h1 { color: var(--text); }
  .h1-dim { color: #86868B; }
  .lede { color: #515154; }
  .epigraph { border-left-color: #0000001f; }
  .epigraph p { color: #1D1D1F; }
  .epigraph footer { color: #6E6E73; }
  .desk::before { background: radial-gradient(closest-side, #ffffffcc, transparent 72%); }
  .desk::after { background: radial-gradient(closest-side, #00000038, transparent); }
  .stats { border-top-color: #0000001a; }
  .stats b { color: var(--text); }
  .stats span { color: #6E6E73; }
  .night .cta-link, .closer .cta-link { color: var(--am-ink); }
  .night .claim-book { color: var(--am-ink); }

  /* Philosophy (#F5F5F7): the loop in Apple Music red. */
  .philo h2, .philo-close { color: var(--text); }
  .philo .kicker { color: var(--am-ink); }
  .philo-lede { color: #515154; }
  .philo-close { border-left-color: var(--am); }
  .loop-ring { stroke: #D2D2D7; }
  .loop-flow { stroke: var(--am); filter: none; }
  .loop-arrow { fill: var(--am); }
  .loop-core { color: #fff; background: linear-gradient(160deg, #FB5C74 0%, #E0193F 55%, #B5122E 100%); box-shadow: 0 24px 50px -20px #e0193faa; }
  .loop-core.on { box-shadow: 0 0 0 10px #fa2d4822, 0 24px 50px -20px #e0193fcc; }
  .loop-node span { background: #fff; border-color: var(--am); color: var(--text); box-shadow: 0 6px 14px -8px #0004; }
  .loop-node b { background: #fff; color: var(--text); box-shadow: 0 4px 12px -6px #0003; }
  .loop-node.on span { background: var(--am-fill); color: #fff; box-shadow: 0 0 0 6px #fa2d4826; }
  .loop-node.on b { background: var(--text); color: #fff; }
  .ph-card { background: #fff; color: var(--text); box-shadow: var(--sh); }
  .ph-card > p:not(.ph-n):not(.ph-books) { color: #515154; }
  .ph-n { color: var(--am-ink); }
  .ph-books { border-top-color: #E5E5EA; }
  .ph-books > span { color: #6E6E73; }
  .ph-core { background: linear-gradient(155deg, #E0193F, #B5122E); color: #fff; }
  .ph-core > p:not(.ph-n):not(.ph-books), .ph-core .ph-n, .ph-core .ph-books > span { color: #fff; }
  .ph-core .ph-books { border-top-color: #ffffff40; }
  .ph-card.on { box-shadow: 0 0 0 2px var(--am), 0 24px 48px -24px #fa2d4866; }

  /* Journey: a daylight range, the path in red. */
  .journey { color: var(--text); background: linear-gradient(180deg, #FFF4F5 0%, #F5F5F7 70%); }
  .journey-head p { color: #515154; }
  .mtn path:nth-child(1) { fill: #F1F1F4; } .mtn path:nth-child(2) { fill: #EBEBEF; } .mtn path:nth-child(3) { fill: #E5E5EA; }
  .mtn { -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .seg-dark { background: #7676801f; }
  .seg-dark button { color: #515154; }
  .seg-dark button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px #0000001f; }
  .track .path path { stroke: #fa2d4840; }
  .track .path .path-done { stroke: var(--am); filter: none; }
  .stop .dot { background: var(--am); box-shadow: 0 0 0 4px #fa2d4826; }
  .stop-reading .dot { background: #fff; box-shadow: 0 0 0 3px var(--am), 0 0 0 8px #fa2d4826; }
  .stop-queued .dot { background: #AEAEB2; box-shadow: 0 0 0 4px #aeaeb233; }
  .stop b { color: var(--text); }
  .stop span { color: #6E6E73; }
  .stop-reading b + span, .stop a:hover b, .stop a:focus-visible b { color: var(--am-ink); }
  .tn-btn { background: #fff; color: var(--text); box-shadow: 0 2px 8px -4px #0003; }
  .tn-btn:hover { background: #F5F5F7; }

  /* Work with me (#F5F5F7): white cards, the tagline in a red-to-coral gradient. */
  .hire .kicker { color: var(--am-ink); }
  .hire h2 { color: var(--text); }
  .hire-tag { background: linear-gradient(90deg, #D70F35, #C2410C 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hire-lede { color: #515154; }
  .hire-seek { color: var(--text); }
  .hire-seek span, .hire-nums span, .hire-direct { color: #6E6E73; }
  .hire-nums { border-top-color: #0000001a; }
  .hire-nums b { color: var(--text); }
  .hire-roles li { background: #fff; box-shadow: var(--sh); }
  .hire-roles li:hover { background: #fff; box-shadow: var(--sh-hi); }
  .hr-when { color: var(--am-ink); }
  .hire-roles h3 { color: var(--text); }
  .hr-title { color: #3A3A3C; }
  .hr-what { color: #6E6E73; }
  .hire-creds li { background: #fff; color: #3A3A3C; box-shadow: inset 0 0 0 1px #E5E5EA; }
  .hire-btn { color: var(--text); background: #fff; box-shadow: inset 0 0 0 1px #D2D2D7; }
  .hire-btn:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--text); }
  .hire-direct a { color: var(--text); text-decoration-color: #0000004d; }
  .hire + .closer { border-top-color: #0000001a; }

  /* Closer: white, a last wash of colour. */
  .closer { box-shadow: 0 0 0 100vmax #fff; background: radial-gradient(70% 90% at 50% 110%, #ffd3db 0%, #ffe9ed 40%, #fff 75%); }
  .closer h2 { color: var(--text); }
  .closer p { color: #515154; }

  /* A book: its page washed in its own cover colour, the way Apple Music does an album. */
  .book-hero { color: var(--text); }
  .book-hero::before { background:
    radial-gradient(70% 90% at 22% 30%, color-mix(in srgb, var(--cv-wash, var(--cv-bg)) 30%, #fff), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--cv-wash, var(--cv-bg)) 16%, #fff) 0%, #fff 100%); }
  .back { color: #3A3A3C; }
  .back:hover { color: var(--text); }
  .chips-row span { background: #ffffffb3; color: #1D1D1F; box-shadow: inset 0 0 0 1px #0000000f; }
  .book-hero h1, .book-by { color: var(--text); }
  .book-sub, .book-meta, .book-rating { color: #48484A; }
  .book-meta span + span::before { color: #AEAEB2; }
  .book-hero .stars { background: linear-gradient(90deg, var(--am-ink) calc(var(--r) / 5 * 100%), #0000002e calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }
  .book-ctas .btn-dark { background: var(--am-fill); }
  .btn-out, .book-ctas .btn-ghost { background: #ffffffb3; color: var(--text); box-shadow: inset 0 0 0 1px #0000001f; }
  .btn-out:hover, .book-ctas .btn-ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px #00000040; }
  .pull { background: #ffffffa6; border-left-color: var(--am); box-shadow: 0 10px 30px -20px #0004; }
  .pull p { color: var(--text); }
  .hero-cover .cover { box-shadow: inset 4px 0 0 -1px #00000040, 0 30px 60px -24px color-mix(in srgb, var(--cv-wash, var(--cv-bg)) 60%, #000), 0 10px 20px -12px #0006; }
  .stars { background: linear-gradient(90deg, var(--am-ink) calc(var(--r) / 5 * 100%), #D2D2D7 calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }
  .side-card .stars { background: linear-gradient(90deg, var(--am-ink) calc(var(--r) / 5 * 100%), #D2D2D7 calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }

  @media (max-width: 960px) {
    .night { background: #fff; }
    .book-hero::before { background: linear-gradient(180deg, color-mix(in srgb, var(--cv-wash, var(--cv-bg)) 26%, #fff) 0%, color-mix(in srgb, var(--cv-wash, var(--cv-bg)) 9%, #fff) 55%, #fff 100%); }
  }
}

/* ── Recently Added + What's New (both forms) ─────────────────────────────────── */
.fresh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "head head" "rail news"; gap: 18px 40px; max-width: var(--wide, 1240px); margin: 0 auto; padding: 72px var(--gutter-x) 24px; }
.row-head { grid-area: head; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.row-head h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; }
.rail { grid-area: rail; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(132px, 15vw, 180px); gap: 20px; margin: 0 calc(var(--gutter-x) * -1); padding: 8px var(--gutter-x) 22px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter-x); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter-x), #000 calc(100% - var(--gutter-x)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter-x), #000 calc(100% - var(--gutter-x)), transparent 100%); }
.rail::-webkit-scrollbar { display: none; }
.rail li { scroll-snap-align: start; }
.rail a { display: grid; gap: 4px; color: var(--text); text-decoration: none; }
.rail .cover-md { width: 100%; margin-bottom: 8px; border-radius: 6px; box-shadow: 0 1px 2px #0000001a, 0 18px 30px -18px #0000008c; transition: transform var(--spring-soft-ms) var(--spring-soft), box-shadow .35s; }
.rail a:hover .cover-md, .rail a:focus-visible .cover-md { transform: translateY(-6px) scale(1.03); box-shadow: 0 2px 4px #0000001a, 0 30px 44px -22px #000000a6; }
.rail a:active .cover-md { transform: scale(.96); transition-duration: var(--spring-snap-ms); }
.rail b { font: 600 15px/1.25 var(--body); letter-spacing: -.015em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rail span { font-size: 13px; color: #6E6E73; }
.rail-new { display: inline-block; justify-self: start; margin-top: 2px; padding: 2px 7px; border-radius: 980px; background: var(--am-fill); color: #fff; font: 700 10px/1.4 var(--body); font-style: normal; letter-spacing: .02em; text-transform: uppercase; vertical-align: 1px; }
.whats-new { grid-area: news; align-self: start; padding: 22px 22px 8px; border-radius: 22px; background: #F5F5F7; }
.whats-new h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.025em; }
.whats-new ol { list-style: none; margin: 0; padding: 0; }
.whats-new li { position: relative; display: grid; gap: 2px; padding: 12px 0 14px; border-top: 1px solid #E5E5EA; }
.whats-new li:first-child { border-top: 0; padding-top: 4px; }
.whats-new time { font-size: 13px; color: #6E6E73; }
.whats-new b { font-weight: 600; font-size: 15px; letter-spacing: -.015em; }
.whats-new li > span { font-size: 14px; line-height: 1.4; color: #515154; }
.wn-v { position: absolute; right: 0; top: 12px; font: 600 12px/1 var(--body); font-style: normal; color: var(--am-ink); }
.whats-new li:first-child .wn-v { top: 4px; }
@media (max-width: 960px) {
  .fresh { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rail" "news"; padding-top: 56px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :root:not(.still) .rail li { animation: rail-in linear both; animation-timeline: view(inline); animation-range: entry 0% entry 60%; }
  }
}

/* ── Section icons: Settings-style squircles, white glyphs ────────────────────── */
:is(#new-title, #how-title, .shelf-head h2, .journey-head h2, #themes-title, #insights-title, #portrait .kicker, #philosophy .kicker, #hire .kicker)::before {
  content: ''; display: block; width: 40px; height: 40px; margin: 0 0 14px; border-radius: 10px; background: var(--ic-c, var(--am-fill)) var(--ic) center / 24px no-repeat; box-shadow: 0 8px 16px -10px var(--ic-c, var(--am-fill)); }
.closer h2::before { display: none; }
#new-title { --ic-c: #FA2D48; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.5l2.3 6.2 6.2 2.3-6.2 2.3L12 19.5l-2.3-6.2L3.5 11l6.2-2.3zM19 15l1 2.6 2.5 1-2.5 1L19 22l-1-2.4-2.5-1 2.5-1z'/%3E%3C/svg%3E"); }
#portrait .kicker { --ic-c: #5856D6; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M4 21c0-4.4 3.6-7.5 8-7.5s8 3.1 8 7.5z'/%3E%3C/svg%3E"); }
#philosophy .kicker { --ic-c: #FF9500; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' d='M19 12a7 7 0 1 1-2.1-5'/%3E%3Cpath fill='%23fff' d='M20 3v6h-6z'/%3E%3C/svg%3E"); }
#how-title { --ic-c: #34C759; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 5.5c3-1 6-.8 8.2.8V20c-2.2-1.4-5.2-1.6-8.2-.6zM12.8 6.3c2.2-1.6 5.2-1.8 8.2-.8v13.9c-3-1-6-.8-8.2.6z'/%3E%3C/svg%3E"); }
.shelf-head h2 { --ic-c: #FF2D55; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 4h4v16H4zM9.5 4h4v16h-4zM15 5.3l3.7-1 3.8 14.7-3.7 1z'/%3E%3C/svg%3E"); }
.journey-head h2 { --ic-c: #30B0C7; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M2 20l7-11 4.5 6.5L16 12l6 8z'/%3E%3Ccircle cx='17' cy='6' r='2.2' fill='%23fff'/%3E%3C/svg%3E"); }
#themes-title { --ic-c: #AF52DE; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Ccircle cx='4.5' cy='5.5' r='2.2'/%3E%3Ccircle cx='19.5' cy='5.5' r='2.2'/%3E%3Ccircle cx='4.5' cy='18.5' r='2.2'/%3E%3Ccircle cx='19.5' cy='18.5' r='2.2'/%3E%3C/g%3E%3Cpath stroke='%23fff' stroke-width='1.6' d='M6 7l4 3.5M18 7l-4 3.5M6 17l4-3.5M18 17l-4-3.5'/%3E%3C/svg%3E"); }
#insights-title { --ic-c: #FF9F0A; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.5a6.5 6.5 0 0 0-3.8 11.8c.5.4.8 1 .8 1.6V17h6v-1.1c0-.6.3-1.2.8-1.6A6.5 6.5 0 0 0 12 2.5zM9 18.5h6V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
#hire .kicker { --ic-c: #007AFF; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 4h6a1.5 1.5 0 0 1 1.5 1.5V7H20a1.5 1.5 0 0 1 1.5 1.5V12h-19V8.5A1.5 1.5 0 0 1 4 7h3.5V5.5A1.5 1.5 0 0 1 9 4zm.5 1.8V7h5V5.8zM2.5 13.5h7.5V15h4v-1.5h7.5v5A1.5 1.5 0 0 1 20 20H4a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E"); }

/* ── Phones: the tab bar and the Now Reading mini-player (app form only) ──────── */
.dock { display: none; }
@media (max-width: 699px) {
  :root:not(.duo) {
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    body:has(.mini) { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
    .dock { display: grid; gap: 8px; position: fixed; z-index: 30; left: 8px; right: 8px; bottom: 0; padding: 0 0 calc(4px + env(safe-area-inset-bottom)); pointer-events: none; }
    .dock > * { pointer-events: auto; }
    .mini { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 4px; padding: 8px 14px 8px 8px; border-radius: 16px; background: #fafafaf5; color: var(--text); text-decoration: none;
      box-shadow: 0 0 0 .5px #0000001a, 0 12px 30px -12px #0000004d; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); transition: transform var(--spring-snap-ms) var(--spring-snap); }
    .mini:active { transform: scale(.97); }
    .mini .cover-xs { width: 34px; border-radius: 4px; box-shadow: 0 4px 10px -4px #0006; }
    .mini-t { display: grid; min-width: 0; }
    .mini-t b { font: 600 14px/1.25 var(--body); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mini-t span { font-size: 12px; color: #515154; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mini-eq { display: flex; align-items: end; gap: 2px; height: 16px; }
    .mini-eq i { width: 3px; height: 100%; border-radius: 1.5px; background: var(--am); transform-origin: bottom; animation: eq 1s ease-in-out infinite alternate; }
    .mini-eq i:nth-child(2) { animation-duration: .7s; } .mini-eq i:nth-child(3) { animation-duration: 1.2s; } .mini-eq i:nth-child(4) { animation-duration: .85s; }
    .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 -8px; padding: 6px 4px 0; border-top: .5px solid #0000001f; background: #f9f9f9f2; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
    .tabbar a { display: grid; justify-items: center; gap: 3px; min-height: 48px; padding: 2px 0; color: #6E6E73; font: 500 10px/1.2 var(--body); letter-spacing: .01em; text-decoration: none; -webkit-tap-highlight-color: transparent; }
    .tabbar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; transition: transform var(--spring-snap-ms) var(--spring-snap); }
    .tabbar a:active svg { transform: scale(.82); }
    .tabbar a[aria-current="page"], .tabbar a[aria-current="true"] { color: var(--am-ink); }
    .tabbar a[aria-current] svg { fill: currentColor; fill-opacity: .14; }
    .toast { bottom: calc(130px + env(safe-area-inset-bottom)); }
  }
}

/* ── The book form (iPhone Duo): the same light, said in iOS ──────────────────── */
.duo { --brass: var(--am-fill); --brass-hi: var(--am); --brass-ink: var(--am-ink); --tint: var(--am-ink); --tint-fill: #fa2d481f; }
.duo .dock { display: none; }
.duo[data-fold="closed"] .page-home .night { background: #fff; color: var(--text); box-shadow: 0 0 0 .5px #0000000f, 0 24px 44px -28px #0000004d; }
.duo .night .mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; filter: blur(40px) saturate(140%); opacity: .45; }
.duo .night { position: relative; isolation: isolate; }
.duo .mesh i { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--c); }
.duo .mesh i:nth-child(1) { left: 40%; top: -20%; } .duo .mesh i:nth-child(2) { left: -20%; top: 20%; } .duo .mesh i:nth-child(3) { left: 50%; top: 50%; } .duo .mesh i:nth-child(4) { display: none; }
.duo:not(.still) .mesh i:nth-child(1) { animation: mesh-a 22s ease-in-out infinite alternate; } .duo:not(.still) .mesh i:nth-child(2) { animation: mesh-b 26s ease-in-out infinite alternate; } .duo:not(.still) .mesh i:nth-child(3) { animation: mesh-c 30s ease-in-out infinite alternate; }
.duo .hero-eyebrow { color: var(--am-ink); }
.duo .hero-eyebrow span, .duo .h1-dim { color: #8E8E93; }
.duo .hero h1 { color: #000; }
.duo .hero .lede, .duo .stats span, .duo .epigraph footer { color: #6E6E73; }
.duo .hero .cta { background: var(--am-fill); }
.duo .cta-link { color: var(--am-ink); }
.duo .epigraph p { color: #1C1C1E; }
.duo .stats { border-top-color: #0000001f; }
.duo .stats b { color: #000; }

.duo[data-fold="open"] .page-home .colo-inner { background: radial-gradient(80% 60% at 50% 20%, #fff4f5, transparent 70%), #fff; color: #000; box-shadow: 0 0 0 .5px #0000000f, 0 24px 44px -28px #0000004d; }
.duo[data-fold="open"] .colophon .kicker, .duo[data-fold="open"] .colo-feature .kicker { color: var(--am-ink); }
.duo[data-fold="open"] .colophon h1 { color: #000; }
.duo[data-fold="open"] .colo-lede, .duo[data-fold="open"] .colophon .colo-inner > p:not(.kicker):not(.colo-lede), .duo[data-fold="open"] .colo-feature > span > span:last-child { color: #6E6E73; }
.duo .colo-orn { border-bottom-color: #D1D1D6; filter: none; }
.duo .colo-orn i:nth-child(3) { background: var(--am); }
.duo[data-fold="open"] .colo-feature { background: #F2F2F7; color: #000; }

.duo .philo { background: #fff; color: #000; }
.duo .philo .kicker, .duo .ph-n { color: var(--am-ink); }
.duo .philo h2 { color: #000; }
.duo .philo-lede, .duo .ph-card > p:not(.ph-n):not(.ph-books), .duo .ph-books > span { color: #6E6E73; }
.duo .philo-close { color: #000; border-left-color: var(--am); }
.duo .loop-ring { stroke: #D1D1D6; }
.duo .loop-flow { stroke: var(--am); filter: none; }
.duo .loop-arrow { fill: var(--am); }
.duo .loop-core { background: linear-gradient(160deg, #FB5C74 0%, #E0193F 55%, #B5122E 100%); box-shadow: 0 18px 36px -16px #e0193faa; }
.duo .loop-node span { background: #fff; border-color: var(--am); color: #000; }
.duo .loop-node b { background: #fff; color: #000; box-shadow: 0 2px 8px -4px #0003; }
.duo .loop-node.on span { background: var(--am-fill); color: #fff; box-shadow: none; }
.duo .loop-node.on b { background: #000; color: #fff; }
.duo .ph-card { background: #F2F2F7; color: #000; }
.duo .ph-books { border-top-color: #D1D1D6; }
.duo .ph-card.on { box-shadow: 0 0 0 2px var(--am); }
.duo .ph-core { background: linear-gradient(155deg, #E0193F, #B5122E); color: #fff; }
.duo .ph-core .ph-n, .duo .ph-core > p:not(.ph-n):not(.ph-books), .duo .ph-core .ph-books > span { color: #fff; }
.duo .ph-core .ph-books { border-top-color: #ffffff40; }

.duo .journey { background: linear-gradient(180deg, #FFF4F5 0%, #F2F2F7 70%); color: #000; }
.duo .journey-head p { color: #6E6E73; }
.duo .mtn path:nth-child(1) { fill: #ECECF0; } .duo .mtn path:nth-child(2) { fill: #E3E3E8; } .duo .mtn path:nth-child(3) { fill: #D9D9DE; }
.duo .track .path path { stroke: #fa2d4840; }
.duo .track .path .path-done { stroke: var(--am); filter: none; }
.duo .stop .dot { background: var(--am); box-shadow: 0 0 0 4px #fa2d4826; }
.duo .stop-reading .dot { background: #fff; box-shadow: 0 0 0 3px var(--am); }
.duo .stop b { color: #000; }
.duo .stop-reading b + span { color: var(--am-ink); }
.duo .seg-dark { background: #7676801f; }
.duo .seg-dark button { color: #3A3A3C; }
.duo .seg-dark button[aria-pressed="true"] { background: #fff; color: #000; }

.duo .book-hero, .duo[data-fold="closed"] .book-hero { color: #000; background: linear-gradient(180deg, color-mix(in srgb, var(--cv-wash, var(--cv-bg)) 26%, #fff) 0%, color-mix(in srgb, var(--cv-wash, var(--cv-bg)) 9%, #fff) 100%); box-shadow: 0 0 0 .5px #0000000f, 0 24px 44px -28px #0000004d; }
.duo[data-fold="open"] .book-hero { background: radial-gradient(70% 90% at 16% 30%, color-mix(in srgb, var(--cv-wash, var(--cv-bg)) 30%, #fff), transparent 75%), color-mix(in srgb, var(--cv-wash, var(--cv-bg)) 9%, #fff); }
.duo .book-hero h1, .duo .book-by { color: #000; }
.duo .book-sub, .duo .book-meta, .duo .book-rating, .duo .book-hero .back { color: #48484A; }
.duo .book-meta span + span::before { color: #AEAEB2; }
.duo .book-hero .chips-row span { background: #ffffffb3; color: #1C1C1E; }
.duo .book-hero .stars { background: linear-gradient(90deg, var(--am-ink) calc(var(--r) / 5 * 100%), #0000002e calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }
.duo .book-hero .btn-out, .duo .book-hero .btn-ghost { background: #ffffffb3; color: #000; }
.duo .book-hero .btn, .duo .book-hero .btn-dark { background: var(--am-fill); color: #fff; }
.duo .book-hero .pull { background: #ffffffa6; }
.duo .book-hero .pull p { color: #000; }
.duo .hero-cover .cover { box-shadow: 0 20px 36px -16px color-mix(in srgb, var(--cv-wash, var(--cv-bg)) 60%, #000), 0 6px 14px -8px #0006; }

.duo .hire { background: radial-gradient(90% 40% at 50% 0%, #fff4f5 0%, transparent 72%), #fff; color: #000; box-shadow: 0 0 0 .5px #0000000f; }
.duo .hire .kicker, .duo .hire-tag, .duo .hr-when { color: var(--am-ink); }
.duo .hire h2, .duo .hire-nums b, .duo .hire-roles h3, .duo .hire-seek { color: #000; }
.duo .hire-lede, .duo .hire-seek span, .duo .hire-nums span, .duo .hr-what, .duo .hire-direct { color: #6E6E73; }
.duo .hire-nums { border-top-color: #0000001f; }
.duo .hire-roles { background: #F2F2F7; }
.duo .hire-roles li + li { box-shadow: inset 0 var(--hair) 0 #0000001f; }
.duo .hr-title { color: #1C1C1E; }
.duo .hire-creds li { background: #F2F2F7; color: #1C1C1E; }
.duo .hire-contact a { background: #F2F2F7; color: #000; }
.duo .hire-contact .cta { background: var(--am-fill); color: #fff; }
.duo .hire-direct a { color: #000; }
.duo .fresh { margin: 24px 12px 0; padding: 22px 18px 6px; border-radius: var(--card-r); overflow: clip; background: #fff; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rail" "news"; --gutter-x: 18px; }
.duo .row-head h2 { font: 700 22px/1.1 var(--ui); letter-spacing: -.02em; }
.duo .rail { grid-auto-columns: 112px; gap: 14px; }
.duo .rail b { font: 600 13px/1.25 var(--ui); }
.duo .rail span { font: 400 12px var(--ui); }
.duo .whats-new { margin: 0 0 12px; background: #F2F2F7; }
.duo #new-title::before, .duo .shelf-head h2::before, .duo .journey-head h2::before { width: 32px; height: 32px; margin-bottom: 10px; border-radius: 8px; background-size: 20px; }
.duo[data-fold="closed"] .page-home .fresh { order: 1; }

/* ── The portrait, alive (both forms) ─────────────────────────────────────────────
   Tap a spine and that book slides up out of the head (a copy drawn outside the outline,
   .pt-out), leaving its slot dark; the rest dim; the light behind the head takes the
   book's colour; the caption and the row say what it gives away. Drag across the head to
   flip through them. */
@property --pick { syntax: '<color>'; inherits: true; initial-value: #FFE4E8; }
.portrait { --pick: #FFE4E8; }
.portrait, .pt-bust, .stage { transition: --pick .6s ease; }
.pt-bust { isolation: isolate; }
.pt-bust::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -4%; height: 86%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pick) 42%, transparent), transparent); pointer-events: none; }
.duo .pt-bust { position: relative; top: 0; }
@media (max-width: 900px) { .pt-bust { position: relative; top: 0; } }
:root:not(.duo) .portrait::before { display: none; }
.pt-bust svg { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pt-sp.hover .pt-shade { opacity: .16; }
.pt-bust.has-pick .pt-sp { opacity: .34; }
.pt-bust.has-pick .pt-sp.on { opacity: .1; }
.pt-out { transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(-34px) scale(1.06); animation: pt-out var(--spring-snap-ms) var(--spring-snap) both; pointer-events: none; }
.pt-out .pt-shade { opacity: 0; }
.pt-out text { font: 600 10px var(--body); letter-spacing: .14em; dominant-baseline: middle; text-anchor: middle; }
.scrubbing .pt-out { animation-duration: calc(var(--spring-snap-ms) * .6); }
.pt-say.swap > * { animation: pt-say var(--spring-soft-ms) var(--spring-soft) both; }
.pt-say.swap > :nth-child(2) { animation-delay: 40ms; }
.pt-say.swap > :nth-child(3) { animation-delay: 80ms; }
.pt-say a { text-decoration: none; }
.pt-say a:hover { text-decoration: underline; }

/* The rows: each one opens to its line. Without JS every line is already showing. */
.pt-list button { grid-template-rows: auto auto auto; }
.pt-list i { grid-row: 1 / 4; align-self: center; transition: transform var(--spring-snap-ms) var(--spring-snap); }
.pt-line { grid-column: 2; display: block; padding-top: 6px; font: italic 400 16px/1.4 var(--serif, Georgia, serif); color: #3A3A3C; white-space: normal; }
.js .pt-line { display: none; }
.js .pt-list button[aria-pressed="true"] .pt-line { display: block; animation: pt-say var(--spring-soft-ms) var(--spring-soft) both; }
.pt-list button[aria-pressed="true"] i { transform: scaleX(1.4) scaleY(1.12); }
/* Wide app form: the head stays in view beside the list, so the caption says it. */
@media (min-width: 901px) { :root.js:not(.duo) .pt-list button[aria-pressed="true"] .pt-line { display: none; } }
:root:not(.duo) {
  .pt-list button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 0 0 2px var(--w, var(--am)), 0 14px 30px -18px #0000008c; }
  .pt-list button[aria-pressed="true"] span { color: #6E6E73; }
  .pt-say-k { color: var(--am-ink); }
}
.duo .pt-line { font: italic 400 16px/1.4 var(--title); color: #3A3A3C; }
.duo .pt-say a { color: var(--am-ink); }
.still .pt-sp, .still .pt-out, .still .pt-say > *, .still .pt-line, .still .pt-list i { transition: none !important; animation: none !important; }
.still.js .pt-sp { transform: none; }

@keyframes mesh-a { to { transform: translate(-18%, 14%) scale(1.15); } }
@keyframes mesh-b { to { transform: translate(14%, -12%) scale(.9); } }
@keyframes mesh-c { to { transform: translate(12%, 10%) scale(1.2); } }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes pt-out { from { transform: none; } }
@keyframes pt-fade { from { opacity: 0; } }
@keyframes pt-say { from { opacity: 0; transform: translateY(6px); } }
@keyframes rail-in { from { opacity: 0; transform: translateX(28px) scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .mesh i, .mini-eq i, .rail li, .pt-out, .pt-line { animation: none !important; }
  .pt-list i { transition: none !important; }
  .pt-say.swap > * { animation: pt-fade 150ms ease both !important; }
  .mini-eq i:nth-child(odd) { transform: scaleY(.55); }
}
.still .mesh i, .still .mini-eq i { animation: none !important; }

/* ================================================================
   FOLD (2026-10-27, owner: "so impressive for fold phones that we become the standard for
   all the foldable features possible"). The last layer. The reference is docs/FOLDABLES.md.
   One rule over all of it: no line of text ever crosses a hinge.
   · Book posture (hinge down the middle): the open spread, its pages sized from the real
     viewport segments, the gutter exactly the hinge's width; overlays keep to one page.
   · Tabletop (hinge across the middle, half-folded like a laptop): the top screen is a
     stage you look at, the bottom screen is where you read and tap. html[data-posture].
   · Cover screens: nothing overflows down to 280px wide.
   Measured geometry comes from env(viewport-segment-*); without a reported hinge (the
   ?posture=tabletop emulation, or a device that reports none) the split is the middle.
   ================================================================ */

/* ── Book posture, measured ──────────────────────────────────────────────────────── */
.duo[data-fold="open"] .toast { left: 75%; }
@media (horizontal-viewport-segments: 2) {
  .duo[data-fold="open"] .spread {
    grid-template-columns: env(viewport-segment-width 0 0) calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)) env(viewport-segment-width 1 0);
    padding-left: 0; padding-right: 0;
  }
  .duo[data-fold="open"] .toast { left: calc(env(viewport-segment-left 1 0) + env(viewport-segment-width 1 0) / 2); }
}

/* ── Tabletop ────────────────────────────────────────────────────────────────────── */
/* Where the top screen ends and the bottom one starts. The middle, unless the device
   reports its hinge. (Inside the media query only: WebKit drops a declaration that uses the
   two-index env() form, fallback and all.) */
:root[data-posture="tabletop"] { --tt-top: 50vh; --tt-bot: 50vh; scroll-padding-top: calc(var(--tt-bot) + 76px); }
@supports (height: 1dvh) { :root[data-posture="tabletop"] { --tt-top: 50dvh; --tt-bot: 50dvh; } }
@media (vertical-viewport-segments: 2) {
  :root[data-posture="tabletop"] { --tt-top: env(viewport-segment-bottom 0 0); --tt-bot: env(viewport-segment-top 0 1); }
}
/* Only pages with a stage take the split (the 404 has none, and stays one page). The class
   is set by the renderer, so this doesn't depend on :has(). */
[data-posture="tabletop"] body.has-stage { padding-top: var(--tt-bot); }
[data-posture="tabletop"] body.has-stage .nav { top: calc(var(--tt-bot) + 8px); }
/* Overlays stay on the bottom screen: the filter sheet never climbs over the hinge. */
[data-posture="tabletop"] body.has-stage .filters { max-height: calc(100% - var(--tt-bot) - 8px); }
[data-posture="tabletop"] .progress { display: none; }
[data-posture="tabletop"] .hero { min-height: 0; padding-top: 96px; }

/* The stage: the top screen, down to the hinge (which it paints dark, so nothing scrolls
   through the gap). */
[data-posture="tabletop"] .stage {
  display: grid; place-items: center; position: fixed; z-index: 45; inset: 0 0 auto; height: var(--tt-bot);
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(var(--tt-bot) - var(--tt-top) + 14px) max(20px, env(safe-area-inset-left));
  overflow: hidden; isolation: isolate;
  background: linear-gradient(to top, #1d1d1f calc(var(--tt-bot) - var(--tt-top)), #fff 0);
  box-shadow: 0 18px 30px -24px #0000004d;
  view-transition-name: lib-stage;
}
[data-posture="tabletop"] .stage::before {
  content: ''; position: absolute; z-index: -1; inset: 0 0 calc(var(--tt-bot) - var(--tt-top));
  background: radial-gradient(70% 90% at 32% 55%, color-mix(in srgb, var(--cv-wash, var(--pick, #FFE4E8)) 34%, #fff) 0%, #fff 72%);
  transition: --pick .6s ease;
}

/* A book, open on the table: the cover, lit and turned toward you; what you're reading. */
.stage-book { display: grid; grid-template-columns: auto minmax(0, 26em); gap: clamp(16px, 4vw, 44px); align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.stage-cover { height: 100%; min-height: 0; display: grid; align-items: center; perspective: 900px; }
.stage-cover .cover { width: auto; height: min(calc(var(--tt-top) - 44px), 340px); max-height: 100%; border-radius: 4px 10px 10px 4px; box-shadow: 0 30px 50px -22px #000a, inset 3px 0 0 #ffffff33; transform: rotateY(16deg); transform-origin: left center; }
.stage-copy { display: grid; gap: 4px; min-width: 0; }
.stage-k { margin: 0 0 4px; font: 600 12px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--am-ink, #D70F35); }
.stage-title { font: 700 clamp(22px, 3.4vw, 38px)/1.05 var(--display); letter-spacing: -.03em; color: #1D1D1F; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stage-by { font: 400 clamp(14px, 1.6vw, 18px)/1.3 var(--body); color: #515154; }
.stage-rate { margin-top: 4px; font-size: 14px; letter-spacing: .1em; color: #1D1D1F; }
.stage-rate span { margin-left: 8px; letter-spacing: 0; color: #515154; }
.stage-now { display: flex; gap: 8px; align-items: baseline; margin: 14px 0 6px; font: 500 15px/1.3 var(--body); color: #1D1D1F; min-width: 0; }
.stage-now-k { flex: none; padding: 2px 7px; border-radius: 6px; background: #1D1D1F; color: #fff; font: 600 11px/1.4 var(--body); letter-spacing: .04em; text-transform: uppercase; }
#stage-now { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage-bar { display: block; height: 4px; border-radius: 2px; background: #0000001a; overflow: hidden; }
.stage-bar i { display: block; height: 100%; background: var(--cv-wash, var(--am)); transform-origin: left; transform: scaleX(0); }
/* Narrow tabletops (a flip phone half-open): the cover above, its name beside the bar. */
@media (max-width: 560px) {
  .stage-book { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .stage-cover .cover { height: min(calc(var(--tt-top) - 60px), 220px); }
  .stage-k { display: none; }
  .stage-now { margin-top: 8px; font-size: 14px; }
}
/* On the bottom screen the hero keeps its facts and buttons; the stage has its cover and name. */
[data-posture="tabletop"] .page-book .hero-cover { display: none; }
[data-posture="tabletop"] .page-book .book-hero { grid-template-columns: minmax(0, 1fr); padding-top: 84px; }

/* The home: the portrait's head on the top screen, its caption beside it. */
[data-posture="tabletop"] .stage > .pt-bust { position: relative; top: 0; display: grid; grid-template-columns: auto minmax(0, 24em); gap: 8px clamp(16px, 4vw, 48px); align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; margin: 0; }
[data-posture="tabletop"] .stage > .pt-bust svg { grid-row: 1 / 3; width: auto; height: calc(var(--tt-top) - 60px); max-width: 52vw; margin: 0; }
[data-posture="tabletop"] .stage > .pt-bust .pt-plank { grid-column: 1; grid-row: 3; width: 80%; margin-top: -2px; }
[data-posture="tabletop"] .stage > .pt-bust .pt-say { grid-column: 2; grid-row: 1 / 3; min-height: 0; margin: 0; text-align: left; }
[data-posture="tabletop"] .stage > .pt-bust .pt-say b { font-size: clamp(19px, 2.6vw, 28px); }
[data-posture="tabletop"] .stage > .pt-bust::before { display: none; }
@media (max-width: 560px) {
  [data-posture="tabletop"] .stage > .pt-bust { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 4px 12px; }
  [data-posture="tabletop"] .stage > .pt-bust svg { height: auto; width: 100%; max-height: calc(var(--tt-top) - 60px); max-width: none; }
  [data-posture="tabletop"] .stage > .pt-bust .pt-say b { font-size: 17px; }
  [data-posture="tabletop"] .stage > .pt-bust .pt-say a { font-size: 13px; }
}
/* The list stays on the bottom screen, one column; each row opens to its line there too. */
[data-posture="tabletop"] .portrait { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "list" "close"; }
[data-posture="tabletop"] .portrait .pt-list button[aria-pressed="true"] .pt-line { display: block; }

/* Folding into tabletop lifts the top screen like a lid, from the hinge; flattening lays it
   back. (library.js sets data-fold-anim="lid-up|lid-down" for the view transition.)
   Under reduced motion there is no transition: the change is instant. */
html[data-fold-anim="lid-up"]::view-transition-new(lib-stage) { animation: var(--spring-ms) var(--spring) both lid-up; transform-origin: 50% 100%; }
html[data-fold-anim="lid-down"]::view-transition-old(lib-stage) { animation: var(--spring-ms) var(--spring) both lid-down; transform-origin: 50% 100%; }
@keyframes lid-up { from { opacity: 0; transform: perspective(1400px) rotateX(-78deg); } }
@keyframes lid-down { to { opacity: 0; transform: perspective(1400px) rotateX(-78deg); } }

/* ── Cover screens ─────────────────────────────────────────────────────────────────
   The outer displays of book-style foldables, and Split View, run down to 280px wide. */
.duo .hub-map a, .duo .hub-t { min-width: 0; }
/* A search field's built-in width (about 20 characters) counts toward its row's minimum;
   with a wide system font (Linux falls back to DejaVu Sans) that ran 18px off a 280px page. */
.duo .ios-search { min-width: 0; }
.duo .ios-search input { width: 0; }
/* Both forms: the previous/next cards break a long title rather than run off the page. */
.pg { min-width: 0; }
.pg b { overflow-wrap: anywhere; }
.duo .hub-t b { overflow-wrap: anywhere; }
@media (max-width: 340px) { .duo .hub-map ul { grid-template-columns: minmax(0, 1fr); } }

/* ── ?fold=debug ─────────────────────────────────────────────────────────────────── */
.fold-debug { position: fixed; inset: 0; z-index: 999; pointer-events: none; }
.fold-debug i { position: absolute; box-sizing: border-box; border: 2px dashed #FA2D48; background: #fa2d480d; font: 600 11px/1.6 ui-monospace, monospace; font-style: normal; color: #D70F35; padding: 2px 6px; }
.fold-debug b { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: #1D1D1F; color: #fff; font: 600 11px/1.4 ui-monospace, monospace; white-space: nowrap; }

/* ================================================================
   GLASS (2026-10-27, owner: "the app header moves on scroll; it should all be liquid glass
   and pin on scroll"). The last layer. One material for every bar, in every form:
     the app's top bar, the book's section tabs, the phone's tab bar and Now Reading
     mini-player, the iPhone Duo's navigation bar, the open spread's back bar.
   Each is glass from the first pixel and stays pinned where it is: nothing changes its
   size, place or material as you scroll. (Before, the top bar went from clear to frosted at
   24px, which read as the bar moving, and the Duo's bar on the shelf frosted only once the
   shelf's heading had scrolled away.)
   Liquid Glass, said in CSS: a bright, saturated blur; a specular edge along the top; a
   hairline that catches the light; a soft shadow under it. Under reduced transparency it
   is solid.
   ================================================================ */
:root {
  --glass: rgba(255, 255, 255, .74);
  --glass-blur: blur(30px) saturate(180%) brightness(1.05);
  --glass-edge: inset 0 .5px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .45), inset 0 -.5px 0 rgba(0, 0, 0, .06);
  --glass-shadow: 0 8px 24px -16px rgba(0, 0, 0, .3);
  --glass-sheen: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
}

/* The material. (Each selector matches the specificity of the rules it replaces, including
   the ones written inside :root:not(.duo) { }, so this later layer wins in every state.) */
:root:not(.duo) :is(.nav, .nav.scrolled, .nav.floating, .page-book .nav, .page-404 .nav, .nav-book),
:root:not(.duo) :is(.tabbar, .mini),
.duo .ios-bar, .duo .ios-bar.show,
.duo[data-fold="open"] .shelf-back {
  isolation: isolate;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  border-color: transparent;
}
/* The sheen needs a positioned bar; the pinned bars already are (fixed or sticky), and their
   position is never touched here. */
:root:not(.duo) :is(.tabbar, .mini) { position: relative; }
:root:not(.duo) :is(.nav, .nav.scrolled, .nav.floating, .page-book .nav, .page-404 .nav, .nav-book)::before,
:root:not(.duo) :is(.tabbar, .mini)::before, .duo .ios-bar::before, .duo[data-fold="open"] .shelf-back::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--glass-sheen); opacity: .7;
}
/* The text on the bar is always the light-mode ink: the bar is glass over a light page. */
:root:not(.duo) :is(.nav, .nav.scrolled, .nav.floating, .page-book .nav, .page-404 .nav, .nav-book) { color: var(--text); transition: none; }

/* The book's section tabs run the full width of the window. A spread box-shadow can only paint
   colour, not blur, so the strip sits in a wrapper (.tabs-bar) that is the sticky bar and
   carries one blurred layer edge to edge. (The tabs scroll sideways, so they can't hold it:
   their own overflow would clip it.) In the book form the wrapper steps aside (contents). */
.tabs-bar { display: contents; }
:root:not(.duo) .tabs-bar { display: block; position: sticky; top: var(--bar-h, calc(52px + env(safe-area-inset-top))); z-index: 6; margin-bottom: 8px; isolation: isolate; }
:root:not(.duo) .tabs-bar::before { content: ''; position: absolute; inset: 0 -100vmax; z-index: -1; pointer-events: none; background: var(--glass-sheen), var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
:root:not(.duo) .tabs-bar .tabs { position: static; margin-bottom: 0; background: none; box-shadow: none; clip-path: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }

/* The phone's tab bar, as iOS draws it now: a capsule floating over the page, not a slab. */
@media (max-width: 699px) {
  :root:not(.duo) .tabbar { margin: 0 4px; padding: 6px 6px 4px; border-top: 0; border-radius: 30px; }
  :root:not(.duo) .mini { border-radius: 22px; }
}

/* The Duo's bar keeps its inline title for when the large one scrolls away; only the
   material is constant now. */
.duo .ios-bar { border-bottom-color: transparent; transition: none; }

@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #F9F9F9; --glass-blur: none; }
  :root:not(.duo) :is(.nav, .nav.scrolled, .nav.floating, .page-book .nav, .page-404 .nav, .nav-book)::before,
  :root:not(.duo) :is(.tabbar, .mini)::before, .duo .ios-bar::before, .duo[data-fold="open"] .shelf-back::before { display: none; }
  :root:not(.duo) .tabs-bar::before { background: var(--glass); }
  .duo[data-fold="open"] .shelf-back { background: var(--grouped); }
}
@media (prefers-contrast: more) {
  :root { --glass: rgba(255, 255, 255, .92); --glass-edge: inset 0 -1px 0 rgba(0, 0, 0, .3); }
}