/* iangreer.com v2: every page except the homepage (theme 2.1.0), loaded after base.css.
   The homepage's language carried through the site: cool paper, blue-black ink, Blueprint blue as the
   one accent; Archivo only; type at poster scale for titles; rows ruled in 2 px ink instead of cards;
   one blue band per page for the ask; square corners, one button shape, links underline. No numbered
   labels, no eyebrow over every heading, no italic accents, no glow.
   The reading features keep their v1 scripts (js/main.js, js/read-along.js, js/book-knowledge.js); the
   classes they build are styled here (chapter player, reading mode, contents, glossary, search,
   read-along, progress, toasts). Ghost's own card styles come from cards.min.css (card_assets). */

.v2-site {
  --col: 43rem;                                  /* the reading column */
  --shell: 74rem;                                /* the reading page, centred */
  --read-ink: #1a1e2c;
  --read-size: clamp(1.0625rem, 0.97rem + 0.4vw, 1.1875rem);
  --line: rgba(11, 14, 24, 0.16);                /* main.js draws the progress ring with it */
}
/* Short pages (a disclosure, an empty topic): the footer still ends the screen, with no ink below it. */
.v2-site { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.v2-site > main { flex: 1 0 auto; display: block; overflow-x: clip; }
.v2-site h1, .v2-site h2, .v2-site h3 { text-wrap: balance; }
/* Ghost's custom-font settings, if one is ever chosen in Admin (none is: Archivo). */
.v2-site { font-family: var(--gh-font-body, var(--sc-font-text)); }
.v2-site h1, .v2-site h2, .v2-site h3 { font-family: var(--gh-font-heading, var(--sc-font-display)); }

/* ------------------------------------------------------------------- icons */
.icon-arrow, .search-icon {
  display: inline-block; flex: none; width: 0.85em; height: 0.85em; background: currentColor; vertical-align: -0.06em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12M9.25 3.25 14 8l-4.75 4.75' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square'/%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 16 16'%3E%3Cpath d='M2 8h12M9.25 3.25 14 8l-4.75 4.75' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
.icon-arrow-ne { transform: rotate(-45deg); }
.icon-arrow-down { transform: rotate(90deg); }
.icon-arrow-left { transform: rotate(180deg); }
.icon-arrow-up { transform: rotate(-90deg); }
.search-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.8' fill='none' stroke='black' stroke-width='1.75'/%3E%3Cpath d='m10.3 10.3 4.2 4.2' stroke='black' stroke-width='1.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.8' fill='none' stroke='black' stroke-width='1.75'/%3E%3Cpath d='m10.3 10.3 4.2 4.2' stroke='black' stroke-width='1.75'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- controls */
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) and (pointer: fine) { .btn--line:hover { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 2px var(--ink); } }
.meta {
  margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.topics { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; }
.topics a {
  font-weight: 700; color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.28em;
  transition: color 0.16s var(--ease);
}
.topics a:hover { color: var(--blue); }
/* A topic that belongs to a part is underlined in the part's colour (Blueprint OS Topics). */
.topics a[href="/tag/business/"] { text-decoration-color: var(--scarlet-text); }
.topics a[href="/tag/finance/"], .topics a[href="/tag/investing/"] { text-decoration-color: var(--emerald-text); }
.topics a[href="/tag/politics/"], .topics a[href="/tag/political-strategy/"] { text-decoration-color: var(--amethyst-text); }
.topics--stack { flex-direction: column; align-items: flex-start; gap: 0.7rem; margin-top: 1.8rem; }
.prose p { margin: 0; max-width: 40ch; font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); }
.prose p + p { margin-top: 1em; }

/* -------------------------------------------------------------- the masthead */
/* Every page opens the way the homepage does: one statement at poster scale, the line that explains
   it, one blue button. */
.page { padding-top: calc(var(--corner-h) + clamp(2.5rem, 10vh, 7rem)); }
.mast { padding: 0 var(--g) clamp(3.5rem, 10vh, 7rem); }
.mast > .meta { margin-bottom: 1.3rem; }
.mast__title { margin: 0; max-width: 11ch; font-weight: 800; font-size: clamp(3.2rem, 9vw, 10rem); line-height: 0.88; letter-spacing: -0.055em; }
.mast__title--wide { max-width: 15ch; font-size: clamp(2.9rem, 7.2vw, 8.4rem); line-height: 0.9; }
.mast__lede { margin: clamp(1.4rem, 3.6vh, 2.4rem) 0 0; max-width: 36ch; font-size: clamp(1.12rem, 0.96rem + 0.6vw, 1.55rem); line-height: 1.4; color: var(--ink-soft); }
.mast__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem var(--g); align-items: start; margin-top: clamp(1.8rem, 4.5vh, 3rem); }
.mast__split .mast__lede { margin: 0; color: var(--ink); }
.mast__aside { margin: 0; max-width: 38ch; font-size: clamp(1.02rem, 0.95rem + 0.25vw, 1.18rem); line-height: 1.55; color: var(--ink-soft); }
.mast__split .mast__actions { margin-top: 1.6rem; }
.mast__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: clamp(1.6rem, 4vh, 2.4rem); }
.mast__note { margin: 1.1rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.mast__lede cite, .sec__intro cite, .mast__aside cite { color: var(--ink); font-weight: 600; }
.mast__points {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.4rem; list-style: none; margin: clamp(2.6rem, 7vh, 4.5rem) 0 0; padding: 1rem 0 0;
  border-top: 2px solid var(--rule-strong); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- sections */
.sec { position: relative; padding: clamp(4rem, 11vh, 8rem) var(--g); }
.sec--tight { padding-top: 0; }
.sec--list { padding-top: 0; }
.sec--rule::before { content: ""; position: absolute; left: var(--g); right: var(--g); top: 0; border-top: 1px solid var(--rule); }
.sec__head { display: grid; gap: 1.3rem; margin-bottom: clamp(2.4rem, 6vh, 4rem); }
.sec__head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 1.4rem var(--g); }
.sec__title { margin: 0; max-width: 15ch; font-weight: 800; font-size: clamp(2.4rem, 5.4vw, 6.2rem); line-height: 0.92; letter-spacing: -0.05em; }
.sec__title--big { max-width: 13ch; font-size: clamp(2.8rem, 7.4vw, 8.4rem); line-height: 0.9; }
.sec__intro { margin: 0; max-width: 40ch; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); }
.sec--split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem var(--g); align-items: start; }
.sec__side { display: grid; gap: 1.5rem; justify-items: start; padding-top: 0.4rem; }
.sec--close .sec__intro { margin-top: 1.4rem; }
.sec--close .mast__actions { margin-top: 2rem; }
/* The one dark section on a page (the homepage's is Elwood's): blue-black ground, white type. */
.sec--ink {
  background: var(--ink); color: #eef0f6;
  --rule-strong: rgba(238, 240, 246, 0.9); --rule: rgba(238, 240, 246, 0.18); --ink-soft: #a9afc2;
}
.sec--ink :focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------------- rows */
/* The homepage's part rows: a small label, the name at display size, one line of text. */
.rows { list-style: none; margin: 0; padding: 0; border-bottom: 2px solid var(--rule-strong); }
.row {
  position: relative; display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(0, 24rem) 1.4rem;
  align-items: baseline; gap: 0.6rem var(--g); padding: clamp(1.15rem, 2.8vh, 1.6rem) 0 clamp(1.5rem, 3.6vh, 2.2rem);
  border-top: 2px solid var(--rule-strong); color: inherit; text-decoration: none;
}
.row__meta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.row__name { font-weight: 800; font-size: clamp(1.9rem, 3.8vw, 3.8rem); line-height: 0.98; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.row__text { max-width: 34ch; line-height: 1.45; color: var(--ink-soft); }
.row__go { justify-self: end; align-self: center; width: 1.15rem; height: 1.15rem; transition: translate 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  a.row:hover .row__name { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
  a.row:hover .row__go { translate: 3px -3px; }
}
.row--channel .row__name { font-size: clamp(1.6rem, 3.4vw, 3.2rem); }
.rows--plain .row { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem) 1.4rem; }

/* Four short blocks, ruled like the rows (About: how I work). */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem var(--g); }
.grid4__item { border-top: 2px solid var(--rule-strong); padding-top: 1.1rem; }
.grid4__item h3 { margin: 0 0 0.75rem; font-weight: 800; font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.04; letter-spacing: -0.03em; }
.grid4__item p { margin: 0; line-height: 1.55; color: var(--ink-soft); }

/* Two lists side by side (Work With Ian: fit). */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--g); }
.fit__col { border-top: 2px solid var(--rule-strong); padding-top: 1.1rem; }
.fit__head { margin: 0 0 0.6rem; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -0.035em; }
.fit__col ul { list-style: none; margin: 0; padding: 0; }
.fit__col li { padding: 0.8rem 0; border-top: 1px solid var(--rule); line-height: 1.45; }
.fit__col li:first-child { border-top: 0; }
.fit__col--no .fit__head, .fit__col--no li { color: var(--ink-soft); }

/* -------------------------------------------------------------------- band */
/* The page's one ask, on Blueprint blue (the homepage's newsletter band). */
.band {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 2rem var(--g);
  padding: clamp(4.5rem, 11vh, 8rem) var(--g); background: var(--blue); color: #fff;
}
.band__title { margin: 0; max-width: 12ch; font-weight: 800; font-size: clamp(2.8rem, 7vw, 8rem); line-height: 0.88; letter-spacing: -0.055em; }
.band__body { display: grid; gap: 1.3rem; justify-items: start; }
.band__body p { margin: 0; max-width: 38ch; font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--on-blue-soft); }
.band__body p.band__lead { color: #fff; font-weight: 600; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.8rem); line-height: 1.3; }
.band__quote { margin: 0.4rem 0 0; padding-left: 1rem; border-left: 3px solid #fff; font-weight: 700; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem); line-height: 1.35; }
.band__list { margin: 0; padding-left: 1.25em; font-weight: 600; line-height: 1.75; }
.band__body p.band__note { font-size: 0.9rem; }
.band--story { align-items: start; }
.band :focus-visible { outline-color: #fff; }
.band cite { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------- archive */
.archive-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: clamp(1.8rem, 4.5vh, 2.6rem); }
.archive-tools .btn { gap: 0.8em; }
.post-list { list-style: none; margin: 0; padding: 0; border-bottom: 2px solid var(--rule-strong); }
.post-row a {
  display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) 5.5rem; align-items: baseline; gap: 0.4rem var(--g);
  padding: 1.1rem 0 1.3rem; border-top: 1px solid var(--rule); color: inherit; text-decoration: none;
}
.post-row:first-child a { border-top: 2px solid var(--rule-strong); }
.post-row__topic { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; color: var(--ink-soft); }
.post-row__topic[data-topic="business"] { color: var(--scarlet-text); }
.post-row__topic[data-topic="finance"], .post-row__topic[data-topic="investing"] { color: var(--emerald-text); }
.post-row__topic[data-topic="politics"], .post-row__topic[data-topic="political-strategy"] { color: var(--amethyst-text); }
.post-row__title { font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.08; letter-spacing: -0.03em; }
.post-row__time { justify-self: end; font-size: 0.9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .post-row a:hover .post-row__title { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.14em; }
}
.archive-more { display: inline-block; margin-top: 2rem; }
.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; font-weight: 700; }
.pagination a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.28em; }
.pagination a:hover { color: var(--blue); }
.pagination .page-number { font-weight: 500; color: var(--ink-soft); }
.author-mast__image { display: block; width: 96px; height: 96px; margin-bottom: 1.6rem; object-fit: cover; }
.author-mast .topics { margin-top: 1.6rem; }

/* ------------------------------------------------------------ the book page */
.book-mast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 2rem var(--g); padding-bottom: clamp(2rem, 5vh, 3.5rem); }
.book-mast .mast__title { font-size: clamp(3.4rem, 8.4vw, 9.6rem); }
.book-mast__facts { margin: 1.6rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.book-mast__still { margin: 0 calc(-1 * var(--g)) 0 0; }
.book-mast__still img { display: block; width: 100%; height: auto; }
/* Phones (2.3.3): the still is drawn 1.288x and cropped so the book itself (x 334-1079, y 198-940
   of the 1500x1100 frame, centre 706.5) sits in the middle of the screen, with every mark of the
   drawing (x 333-1289) still in the frame; it is a little above the middle vertically so its shadow
   balances it. 2.3.4: nudged 2% of the width left (Ian), since the cover's face and the shadow put
   the book's weight right of its edges' midpoint; its weight now sits at the middle. Visible frame:
   x 147-1312, y 90-1100. Percent margins are of the figure's (full-bleed) width. */
@media (max-width: 640px) {
  .book-mast__still { overflow: hidden; aspect-ratio: 1.1535; }
  .book-mast__still img { width: 128.8%; max-width: none; margin: -7.73% 0 0 -12.65%; }
}
.book-note {
  margin: 0 var(--g); padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft);
}
.book-jump { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; padding: 1.4rem var(--g) 0; }
.book-jump a {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em;
}
.book-jump a:hover { color: var(--blue); }

/* The audiobook: one blue instrument. The stage (cover, now playing, transport) and the playlist. */
.blueprint-audio-player { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--blue); color: #fff; }
.blueprint-audio-player :focus-visible { outline-color: #fff; }
.blueprint-audio-stage { display: grid; align-content: start; gap: clamp(1.4rem, 3vh, 2rem); padding: clamp(1.4rem, 3vw, 2.8rem); border-right: 1px solid rgba(255, 255, 255, 0.28); }
.blueprint-audio-stage-header { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-blue-soft); font-variant-numeric: tabular-nums; }
.blueprint-audio-feature { display: grid; grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr); align-items: end; gap: clamp(1rem, 2vw, 1.6rem); }
.blueprint-audio-cover { margin: 0; }
.blueprint-audio-cover img { display: block; width: 100%; height: auto; box-shadow: 0 18px 40px rgba(6, 10, 40, 0.35); }
.blueprint-now-playing { display: grid; gap: 0.5rem; min-width: 0; }
.blueprint-now-number { font-weight: 800; font-size: clamp(3rem, 6vw, 5.4rem); line-height: 0.8; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.blueprint-now-part { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-blue-soft); }
.blueprint-now-playing h3 { margin: 0.3rem 0 0; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1; letter-spacing: -0.035em; }
.blueprint-now-duration { font-size: 0.9rem; color: var(--on-blue-soft); }
.blueprint-transport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.9rem 1.1rem; }
.blueprint-primary-controls { display: flex; align-items: center; gap: 0.4rem; }
.blueprint-play-toggle {
  display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 0; background: #fff; color: var(--blue); cursor: pointer;
  transition: transform 0.12s var(--ease);
}
.blueprint-play-toggle:active { transform: scale(0.96); }
.blueprint-play-toggle svg { width: 26px; height: 26px; fill: currentColor; }
.blueprint-pause-icon, .blueprint-play-toggle.is-playing .blueprint-play-icon { display: none; }
.blueprint-play-toggle.is-playing .blueprint-pause-icon { display: block; }
.blueprint-skip, .blueprint-mute {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer;
}
.blueprint-skip svg, .chapter-mini-skip svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.blueprint-skip span, .chapter-mini-skip span { position: absolute; font-size: 8.5px; font-weight: 800; }
.blueprint-skip-forward svg, .chapter-mini-skip-forward svg { transform: scaleX(-1); }
.blueprint-mute svg { width: 22px; height: 22px; fill: currentColor; }
.blueprint-muted-icon, .blueprint-mute.is-muted .blueprint-volume-icon { display: none; }
.blueprint-mute.is-muted .blueprint-muted-icon { display: block; }
.blueprint-timeline { display: grid; gap: 0.35rem; min-width: 0; }
.blueprint-timeline div, .chapter-mini-timeline div { display: flex; justify-content: space-between; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.blueprint-timeline div { color: var(--on-blue-soft); }
/* A range input as a 2 px line with a square thumb; --seek-progress (main.js) fills it. */
.blueprint-timeline input[type="range"], .chapter-mini-timeline input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: none; cursor: pointer;
  --track: rgba(255, 255, 255, 0.3); --fill: #fff;
}
.chapter-mini-timeline input[type="range"] { --track: var(--rule); --fill: var(--blue); }
.blueprint-timeline input[type="range"]::-webkit-slider-runnable-track, .chapter-mini-timeline input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: linear-gradient(to right, var(--fill) var(--seek-progress, 0%), var(--track) var(--seek-progress, 0%));
}
.blueprint-timeline input[type="range"]::-moz-range-track, .chapter-mini-timeline input[type="range"]::-moz-range-track {
  height: 2px; background: linear-gradient(to right, var(--fill) var(--seek-progress, 0%), var(--track) var(--seek-progress, 0%));
}
.blueprint-timeline input[type="range"]::-webkit-slider-thumb, .chapter-mini-timeline input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 0; background: var(--fill);
}
.blueprint-timeline input[type="range"]::-moz-range-thumb, .chapter-mini-timeline input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 0; background: var(--fill);
}
.blueprint-speed-control, .chapter-mini-speed-wrap { position: relative; }
.blueprint-speed {
  min-width: 52px; min-height: 40px; padding: 0 0.6rem; border: 1.5px solid #fff; border-radius: 0; background: none; color: #fff;
  font: 700 0.9rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; cursor: pointer;
}
.blueprint-speed-menu, .chapter-mini-speed-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; display: grid; min-width: 11.5rem; padding: 0.4rem 0;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 18px 40px rgba(11, 14, 24, 0.18);
}
.chapter-mini-speed-menu { top: calc(100% + 8px); bottom: auto; }
.blueprint-speed-menu[hidden], .chapter-mini-speed-menu[hidden] { display: none; }
.blueprint-speed-menu-label, .chapter-mini-speed-title { padding: 0.5rem 0.9rem 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.blueprint-speed-menu button, .chapter-mini-speed-menu button {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 0.8rem; padding: 0.6rem 0.9rem; border: 0; background: none;
  color: inherit; font: 600 0.95rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer;
}
.blueprint-speed-menu button:hover, .chapter-mini-speed-menu button:hover { background: rgba(35, 64, 242, 0.08); }
.blueprint-speed-menu button i { width: 8px; height: 8px; justify-self: end; }
.blueprint-speed-menu button[aria-checked="true"] i { background: var(--blue); }
.chapter-mini-speed-menu small { font-size: 0.8rem; color: var(--ink-soft); }
.chapter-mini-speed-menu svg { width: 16px; height: 16px; fill: none; stroke: var(--blue); stroke-width: 2; visibility: hidden; }
.chapter-mini-speed-menu button[aria-checked="true"] svg { visibility: visible; }
.blueprint-player-nav { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.blueprint-player-nav button {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0; border: 0; background: none; color: #fff;
  font: 700 0.9rem/1 var(--sc-font-text); cursor: pointer;
}
.blueprint-player-nav button:disabled { opacity: 0.4; cursor: default; }
.blueprint-playlist { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; max-height: clamp(28rem, 72vh, 46rem); }
.blueprint-playlist-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.8rem) clamp(1.2rem, 2.4vw, 2.2rem) 1rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-blue-soft);
}
.blueprint-playlist-header div { display: flex; gap: 0.8rem; align-items: baseline; }
.blueprint-playlist-header strong { color: #fff; }
.blueprint-episode-list {
  list-style: none; margin: 0; padding: 0 clamp(1.2rem, 2.4vw, 2.2rem) 1.6rem; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}
.blueprint-playlist-group[data-part] span { margin: 1.3rem 0 0.6rem; }   /* the part's tag (base.css) */
.blueprint-playlist-group span { display: block; padding: 1.3rem 0 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-blue-soft); }
.blueprint-episode-list button {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.8rem; width: 100%; padding: 0.7rem 0.6rem;
  border: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); background: none; color: #fff; font: inherit; text-align: left; cursor: pointer;
  transition: background-color 0.16s var(--ease);
}
.blueprint-episode-list button span, .blueprint-episode-list button small { font-size: 0.82rem; color: var(--on-blue-soft); font-variant-numeric: tabular-nums; }
.blueprint-episode-list button strong { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.blueprint-episode-list button i { display: none; }
.blueprint-episode-list button:hover { background: rgba(255, 255, 255, 0.08); }
.blueprint-episode-list button.is-active { background: rgba(255, 255, 255, 0.14); box-shadow: inset 3px 0 0 #fff; }
.blueprint-episode-list button.is-active span, .blueprint-episode-list button.is-active small { color: #fff; }

/* The chapters: search and the introduction on the left (it stays in view), the list on the right. */
.book-page-chapters { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 3rem var(--g); }
.book-page-chapters::before { content: ""; position: absolute; left: var(--g); right: var(--g); top: 0; border-top: 1px solid var(--rule); }
.book-page-chapters-aside { position: sticky; top: calc(var(--corner-h) + 1.5rem); display: grid; gap: 1.8rem; }
.book-page-chapter-intro .sec__intro { margin-top: 1.3rem; }
.book-search-field { display: grid; gap: 0.55rem; }
.book-search input {
  width: 100%; min-height: 54px; padding: 0 1rem; border: 2px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink);
  font: 400 1.05rem/1 var(--sc-font-text); -webkit-appearance: none; appearance: none;
}
.book-search input:focus { outline: 3px solid var(--blue); outline-offset: 0; }
.book-search-results:empty { display: none; }
.book-search-count { margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.book-search-list { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--rule); }
.book-search-result a { display: grid; gap: 0.3rem; padding: 0.8rem 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.book-search-chapter { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.book-search-snippet { font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); }
.book-search-result mark { background: #dfe4ff; color: var(--ink); }
.book-search-result a:hover .book-search-snippet { color: var(--ink); }
.continue-reading-wrap { display: flex; align-items: stretch; border: 2px solid var(--ink); }
.continue-reading-card { flex: 1; display: grid; gap: 0.25rem; padding: 1rem 1.2rem; color: inherit; text-decoration: none; }
.continue-reading-card span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.continue-reading-card strong { font-weight: 800; font-size: 1.2rem; line-height: 1.15; letter-spacing: -0.02em; }
.continue-reading-card em { font-style: normal; font-size: 0.9rem; color: var(--ink-soft); }
.continue-reading-card:hover strong { text-decoration: underline; }
.continue-reading-clear { width: 52px; border: 0; border-left: 2px solid var(--ink); background: none; color: var(--ink); font-size: 1.4rem; cursor: pointer; }
.continue-reading-clear:hover { background: var(--ink); color: #fff; }
.book-progress-ring { display: flex; align-items: center; gap: 1rem; }
.book-progress-count { font-weight: 700; }
/* The list (2.3.0): the introduction and the conclusion as ruled rows; each part a box whose heading
   bar is the part's colour (Blueprint OS PartSection, the v1 book page's shape in the v2 type). */
.book-page-chapters-list, .book-page-parts { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.book-page-intro-link, .book-page-conclusion, .book-page-parts ol a {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; box-sizing: border-box; min-height: 4.1rem;
  padding: 0.75rem var(--part-pad); color: inherit; text-decoration: none; transition: background-color 0.16s var(--ease);
}
.book-page-chapters-list { --part-pad: clamp(1.1rem, 2.2vw, 1.75rem); }
.book-page-intro-link, .book-page-conclusion { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.book-page-intro-link > span:first-child, .book-page-conclusion > span:first-child, .book-page-parts ol a > span:first-child {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.book-page-intro-link strong, .book-page-conclusion strong, .book-page-parts ol a strong { font-weight: 700; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.4rem); line-height: 1.2; letter-spacing: -0.02em; }
.book-page-intro-link .icon-arrow, .book-page-conclusion .icon-arrow, .book-page-parts ol a .icon-arrow { transition: translate 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .book-page-intro-link:hover, .book-page-conclusion:hover, .book-page-parts ol a:hover { background-color: #fff; }
  .book-page-intro-link:hover strong, .book-page-conclusion:hover strong, .book-page-parts ol a:hover strong { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
  .book-page-intro-link:hover .icon-arrow, .book-page-conclusion:hover .icon-arrow, .book-page-parts ol a:hover .icon-arrow { translate: 2px -2px; }
}
.book-page-part { border: 1px solid var(--rule-strong); }
.book-page-part summary {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto 1.5rem; align-items: baseline; gap: 0.4rem 1.2rem;
  padding: clamp(1.2rem, 2.2vw, 1.6rem) var(--part-pad); list-style: none; cursor: pointer;
  background: var(--part-fill); color: var(--part-on);
}
.book-page-part summary::-webkit-details-marker { display: none; }
.book-page-part summary:focus-visible { outline: 3px solid var(--part-on); outline-offset: -8px; }
.book-page-part-index, .book-page-part-count { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.book-page-part summary strong { font-weight: 800; font-size: clamp(1.9rem, 3.1vw, 3rem); line-height: 0.95; letter-spacing: -0.045em; }
.book-page-part-toggle { align-self: center; font-size: 1.6rem; font-weight: 400; line-height: 1; text-align: center; transition: transform 0.2s var(--ease); }
.book-page-part[open] .book-page-part-toggle { transform: rotate(45deg); }
.book-page-part-description { margin: 0; padding: 1.1rem var(--part-pad); border-bottom: 1px solid var(--rule-strong); color: var(--ink); }
.book-page-part li + li { border-top: 1px solid var(--rule); }
@media (max-width: 640px) {
  .book-page-part summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label toggle" "name toggle" "count toggle"; gap: 0.45rem 1rem; }
  .book-page-part-index { grid-area: label; } .book-page-part summary strong { grid-area: name; } .book-page-part-count { grid-area: count; }
  .book-page-part-toggle { grid-area: toggle; }
  .book-page-intro-link, .book-page-conclusion, .book-page-parts ol a { grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.75rem; }
}
.book-page-part ol { list-style: none; margin: 0; padding: 0; }
.chapter-read-check { display: inline-flex; margin-left: 0.4rem; vertical-align: -0.1em; }
.chapter-read-check svg { width: 15px; height: 15px; fill: var(--blue); }
.book-page-updates .btn { margin-top: 0.2rem; }

/* ------------------------------------------------------------- reading pages */
/* Essays and the book's chapters. The title at poster scale, then a single reading column (43rem,
   about 66 characters) on the left of a centred page; the contents list docks to its right. */
.article-page { padding-top: calc(var(--corner-h) + clamp(2rem, 8vh, 5rem)); }
.article-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 65; height: 3px; pointer-events: none; }
.article-progress span { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
.article-shell { box-sizing: border-box; max-width: var(--shell); margin: 0 auto; padding: 0 var(--g); }
.article-header { max-width: 60rem; margin-bottom: clamp(2.4rem, 6vh, 3.8rem); }
.chapter-context {
  display: inline-block; margin-bottom: 1.1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue); text-decoration: none;
}
.chapter-context:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.reading-theme-dark .chapter-context { color: var(--blue-text); }
.reading-theme-dark .continue-reading-card span { color: #9aa8ff; }   /* on the book page, outside the reading tokens */
.chapter-context__part { margin-left: 0.5em; vertical-align: 0.05em; }
.article-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.article-kicker a { color: inherit; text-decoration: none; }
.is-chapter-post .article-kicker { display: none; }                 /* chapters say where they are in the book instead */
.article-kicker a:hover { color: var(--blue); }
.article-header h1 { margin: 0.9rem 0 0; max-width: 16ch; font-weight: 800; font-size: clamp(2.6rem, 6vw, 5.8rem); line-height: 0.94; letter-spacing: -0.05em; color: var(--ink); }
.article-excerpt { margin: 1.4rem 0 0; max-width: 40ch; font-size: clamp(1.12rem, 1rem + 0.5vw, 1.45rem); line-height: 1.42; color: var(--ink-soft); }
.article-byline { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; margin-top: 1.6rem; font-size: 0.9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.page-header { margin-bottom: clamp(2rem, 5vh, 3rem); }

/* The chapter's audio: a ruled instrument under the title. */
.chapter-mini-player {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "toggle meta speed" "controls controls controls" "follow follow follow";
  align-items: center; gap: 0.8rem 1rem; max-width: var(--col); margin-top: 1.8rem; padding: 1rem 1.1rem; border: 2px solid var(--ink);
}
.chapter-mini-player:empty { display: none; }
.chapter-mini-toggle { grid-area: toggle; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 0; background: var(--blue); color: #fff; cursor: pointer; }
.chapter-mini-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.mini-pause-icon, .chapter-mini-toggle.is-playing .mini-play-icon { display: none; }
.chapter-mini-toggle.is-playing .mini-pause-icon { display: block; }
.chapter-mini-meta { grid-area: meta; display: grid; gap: 0.2rem; min-width: 0; }
.chapter-mini-status { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.chapter-mini-bars { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.chapter-mini-bars i { display: block; width: 3px; height: 100%; background: var(--blue); transform-origin: 50% 100%; animation: mini-bars 0.9s ease-in-out infinite; }
.chapter-mini-bars i:nth-child(2) { animation-delay: -0.3s; }
.chapter-mini-bars i:nth-child(3) { animation-delay: -0.6s; }
.chapter-mini-player.is-playing .chapter-mini-bars { display: inline-flex; }
@keyframes mini-bars { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.chapter-mini-detail { font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); }
.chapter-mini-detail a { color: var(--blue); font-weight: 700; text-decoration: none; }
.chapter-mini-detail a:hover { text-decoration: underline; }
.chapter-mini-speed-wrap { grid-area: speed; }
.chapter-mini-speed {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 38px; padding: 0 0.6rem; border: 1.5px solid var(--ink); border-radius: 0;
  background: none; color: inherit; font: 700 0.85rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; cursor: pointer;
}
.chapter-mini-speed svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.chapter-mini-controls { grid-area: controls; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0.4rem 0.6rem; }
.chapter-mini-skip { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: inherit; cursor: pointer; }
.chapter-mini-timeline { display: grid; gap: 0.2rem; min-width: 0; }
.chapter-mini-timeline div { color: var(--ink-soft); }
.read-along-follow {
  grid-area: follow; justify-self: start; min-height: 36px; padding: 0 0.8rem; border: 1.5px solid var(--ink); border-radius: 0; background: none;
  color: inherit; font: 700 0.8rem/1 var(--sc-font-text); cursor: pointer;
}
.read-along-follow[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Reading mode: text size, theme, time left. */
.chapter-reading-mode { position: relative; margin-top: 1rem; }
.chapter-reading-mode:empty { display: none; }
.chapter-reading-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 0.85rem; border: 1.5px solid var(--ink); border-radius: 0;
  background: none; color: inherit; font: 700 0.85rem/1 var(--sc-font-text); cursor: pointer;
}
.chapter-reading-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.chapter-reading-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.chapter-reading-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; display: grid; gap: 1rem; width: min(21rem, calc(100vw - 2 * var(--g)));
  padding: 1.1rem; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 18px 40px rgba(11, 14, 24, 0.16);
}
.chapter-reading-panel[hidden] { display: none; }
.reading-font-row, .reading-theme-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.reading-label { flex-basis: 100%; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.reading-font-btn, .reading-theme-btn {
  min-width: 46px; min-height: 42px; padding: 0 0.8rem; border: 1.5px solid var(--ink); border-radius: 0; background: none; color: inherit;
  font: 700 0.9rem/1 var(--sc-font-text); cursor: pointer;
}
.reading-theme-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.reading-font-value { min-width: 3.4rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.reading-time-left { font-size: 0.88rem; color: var(--ink-soft); }

/* In this chapter. Inline (collapsible) under the header; docked to the right of the column on wide
   screens while the reader is in the text (main.js sets .is-docked). */
.chapter-toc { max-width: var(--col); margin: 0 0 clamp(2.2rem, 5vh, 3rem); }
.chapter-toc-toggle {
  display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 50px; padding: 0 1rem; border: 2px solid var(--ink);
  border-radius: 0; background: none; color: inherit; font: 700 0.78rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.chapter-toc-toggle::after { content: "+"; font-size: 1.2rem; font-weight: 400; }
.chapter-toc.is-open .chapter-toc-toggle::after { content: "\2212"; }
.chapter-toc-list { display: none; list-style: none; margin: 0; padding: 0.7rem 0 0; }
.chapter-toc.is-open .chapter-toc-list { display: block; }
.chapter-toc-list li { padding: 0.4rem 0 0.4rem 0.9rem; border-left: 2px solid var(--rule); }
.chapter-toc-list li:has(a.is-current) { border-left-color: var(--blue); }
.chapter-toc-list a { color: var(--ink-soft); font-size: 0.92rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.chapter-toc-list a:hover, .chapter-toc-list a.is-current { color: var(--ink); }
@media (min-width: 1200px) {
  .chapter-toc {
    position: fixed; z-index: 5; top: calc(var(--corner-h) + 3rem);
    left: calc((100vw - min(var(--shell), 100vw)) / 2 + var(--g) + var(--col) + 3.5rem); width: 15rem; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
  }
  .chapter-toc.is-docked { opacity: 1; visibility: visible; transform: none; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s; }
  .chapter-toc-toggle { min-height: 0; padding: 0 0 0.8rem; border: 0; cursor: default; }
  .chapter-toc-toggle::after { display: none; }
  .chapter-toc-list { display: block; max-height: calc(100vh - 14rem); overflow-y: auto; padding-top: 0; }
}

/* The text. */
.gh-content {
  max-width: var(--col); font-size: calc(var(--read-size) * var(--reading-font-scale, 1)); line-height: 1.72; color: var(--read-ink);
  overflow-wrap: break-word;
}
.gh-content > * { margin-top: 0; margin-bottom: 1.25em; }
.gh-content > *:last-child { margin-bottom: 0; }
.gh-content h2 {
  margin: 2.4em 0 0.8em; padding-top: 0.7em; border-top: 2px solid var(--ink); font-weight: 800; font-size: 1.62em; line-height: 1.08;
  letter-spacing: -0.035em; color: var(--ink); scroll-margin-top: calc(var(--corner-h) + 1rem);
}
.gh-content h3 { margin: 2em 0 0.6em; font-weight: 800; font-size: 1.22em; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.gh-content h4 { margin: 1.8em 0 0.5em; font-weight: 700; font-size: 0.85em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.gh-content a { color: inherit; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.gh-content a:hover { color: var(--blue); }
.gh-content strong, .gh-content b { font-weight: 700; color: var(--ink); }
.gh-content blockquote:not(.kg-blockquote-alt) { margin: 1.8em 0; padding: 0 0 0 1.1em; border-left: 3px solid var(--blue); font-size: 1.06em; font-weight: 500; color: var(--ink); }
.gh-content blockquote.kg-blockquote-alt { margin: 1.8em 0; padding: 0; border: 0; font-size: 1.45em; font-style: normal; font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; text-align: left; color: var(--ink); }
.gh-content ul, .gh-content ol { padding-left: 1.25em; }
.gh-content li { margin: 0.45em 0; padding-left: 0.2em; }
.gh-content li::marker { color: var(--blue); font-weight: 700; }
.gh-content hr { height: 2px; margin: 2.6em 0; border: 0; background: var(--ink); }
.gh-content figure { margin: 2em 0; }
.gh-content img, .gh-content video { display: block; max-width: 100%; height: auto; }
.gh-content figcaption { margin-top: 0.7rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-soft); text-align: left; }
.gh-content .kg-width-wide { position: relative; width: min(64rem, calc(100vw - 2 * var(--g))); max-width: none; }
.gh-content .kg-width-full { position: relative; width: 100vw; max-width: none; margin-left: calc((min(var(--shell), 100vw) - 100vw) / 2 - var(--g)); }
.gh-content .kg-width-full img { width: 100%; }
.gh-content .kg-width-full figcaption { padding: 0 var(--g); }
.gh-content pre { overflow-x: auto; padding: 1.1em 1.2em; background: var(--ink); color: #e8eaf2; font: 0.84em/1.6 var(--sc-font-mono); }
.gh-content code { padding: 0.1em 0.3em; background: rgba(11, 14, 24, 0.06); font-family: var(--sc-font-mono); font-size: 0.88em; }
.gh-content pre code { padding: 0; background: none; font-size: inherit; }
.gh-content table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.gh-content th, .gh-content td { padding: 0.6em 0.5em; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.gh-content th { border-bottom: 2px solid var(--ink); }
.gh-content iframe { max-width: 100%; }
.gh-content .has-drop-cap::first-letter { float: left; margin: 0.08em 0.1em 0 0; font-weight: 800; font-size: 3.55em; line-height: 0.78; color: var(--ink); }
/* Ghost cards (cards.min.css): square, ruled, in the site's type. */
.gh-content .kg-bookmark-card a.kg-bookmark-container { border: 2px solid var(--ink); border-radius: 0; box-shadow: none; background: transparent; color: inherit; text-decoration: none; }
.gh-content .kg-bookmark-title { font-weight: 800; color: var(--ink); }
.gh-content .kg-bookmark-description { color: var(--ink-soft); }
.gh-content .kg-bookmark-metadata { color: var(--ink-soft); }
.gh-content .kg-bookmark-thumbnail img { border-radius: 0; }
.gh-content .kg-callout-card { border-radius: 0; }
.gh-content .kg-toggle-card, .gh-content .kg-product-card-container, .gh-content .kg-file-card-container, .gh-content .kg-audio-card, .gh-content .kg-cta-card { border-radius: 0; }
.gh-content .kg-toggle-card { border: 2px solid var(--ink); box-shadow: none; background: transparent; }
.gh-content .kg-btn, .gh-content .kg-product-card-button, .gh-content .kg-cta-button { border-radius: 0 !important; font-family: var(--sc-font-text); font-weight: 700; }
.gh-content .kg-btn-accent { background: var(--blue); }
.gh-content .kg-image-card img, .gh-content .kg-gallery-image img { border-radius: 0; }

/* The book's hints and read-along. */
.term-hint { cursor: help; text-decoration: underline dotted var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.term-hint:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.knowledge-popover {
  position: fixed; z-index: 80; box-sizing: border-box; max-width: 20rem; padding: 1rem 1.1rem; border-radius: 0; background: var(--ink); color: #fff;
  font-size: 0.92rem; line-height: 1.5; box-shadow: 0 18px 40px rgba(11, 14, 24, 0.25);
  opacity: 0; transform: translateY(4px); transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.knowledge-popover-visible { opacity: 1; transform: none; }
.knowledge-popover[hidden] { display: none; }
.knowledge-popover-kicker { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #c3caff; }
.knowledge-popover-body { margin: 0; }
.knowledge-popover-link { display: inline-block; margin-top: 0.7rem; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; }
@media (max-width: 480px) {
  .knowledge-popover.knowledge-popover-sheet {
    top: auto !important; left: 0 !important; right: 0; bottom: 0; max-width: none; width: 100%;
    padding: 1.2rem var(--g) calc(1.2rem + env(safe-area-inset-bottom, 0px));
  }
}
/* The paragraph being read aloud: a tint 0.45em beyond the text on every side and a 3px bar on the
   tint's outer left edge, so nothing covers the letters (2.3.6; the bar was an inset shadow on the
   text's own edge and sat over the first letter of each line). Both are shadows, so the text never
   moves. The tint is solid (the paper mixed with the colour) because the bar is a second shadow
   under it, shifted 3px left, and would show through a see-through tint. */
.gh-content.has-read-along .is-narrated {
  --narrated: var(--blue); --narrated-tint: #e5e8f7;               /* blue at 7% on paper */
  background: var(--narrated-tint); box-shadow: 0 0 0 0.45em var(--narrated-tint), -3px 0 0 0.45em var(--narrated);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.gh-content.has-read-along .is-readalong-block { cursor: pointer; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .gh-content.has-read-along .is-readalong-block { position: relative; }
  .gh-content.has-read-along .is-readalong-block::before {
    content: ""; position: absolute; left: -22px; top: 0.55em; width: 0; height: 0; opacity: 0;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--blue); transition: opacity 0.15s ease;
  }
  .gh-content.has-read-along .is-readalong-block:hover::before { opacity: 0.5; }
}

/* After the text: tags, reading progress, sharing, the next steps. */
.article-footer { display: grid; gap: 2.2rem; max-width: var(--col); margin-top: clamp(3rem, 8vh, 5rem); padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; }
.article-tags:empty { display: none; }
.article-tags a { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.article-tags a:hover { color: var(--blue); }
.chapter-progress-line { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.article-share-block { display: grid; gap: 1.1rem; }
.article-share-heading { margin: 0; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1; letter-spacing: -0.035em; color: var(--ink); }
.article-share-hint { margin: 0.5rem 0 0; color: var(--ink-soft); }
.article-share { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share-link {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.9rem; border: 1.5px solid var(--ink); border-radius: 0;
  background: none; color: var(--ink); font: 700 0.88rem/1 var(--sc-font-text); text-decoration: none; cursor: pointer;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.share-link[hidden] { display: none; }
.share-link svg { width: 16px; height: 16px; }
.share-icon-fill { fill: currentColor; }
.share-icon-stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share-icon-check, .share-copy.is-copied .share-icon-link { display: none; }
.share-copy.is-copied .share-icon-check { display: block; }
@media (hover: hover) and (pointer: fine) { .share-link:hover { background: var(--ink); color: var(--paper); } }
.article-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.chapter-ai-cta {
  display: inline-flex; align-items: center; gap: 0.7em; min-height: 54px; padding: 0 1.35em; background: var(--blue); color: #fff;
  font: 700 1rem/1 var(--sc-font-text); text-decoration: none;
}
.chapter-ai-cta[hidden] { display: none; }
.chapter-ai-cta:hover { background: var(--ink); }
.article-discuss, .chapter-search-link { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.28em; }
.article-discuss:hover, .chapter-search-link:hover { color: var(--blue); }
.article-navigation {
  box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--g); max-width: var(--shell);
  margin: clamp(3.5rem, 9vh, 6rem) auto 0; padding: 0 var(--g) clamp(3.5rem, 9vh, 6rem);
}
.article-navigation:empty { display: none; }
.article-navigation a { display: grid; align-content: start; gap: 0.5rem; padding: 1.2rem 0 1.4rem; border-top: 2px solid var(--ink); color: inherit; text-decoration: none; }
.article-navigation a span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.article-navigation a strong { font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: -0.035em; color: var(--ink); }
.article-navigation a:hover strong { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.article-navigation a[data-direction="next"] { grid-column: 2; text-align: right; }

/* The end of the book. */
.book-finished { max-width: var(--col); margin-top: clamp(3rem, 8vh, 5rem); padding: clamp(1.8rem, 5vw, 3rem); background: var(--blue); color: #fff; }
.book-finished h2 { margin: 0; font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 0.95; letter-spacing: -0.05em; }
.book-finished cite { font-weight: 800; color: #fff; }
.book-finished-quote { margin: 1.4rem 0 0; font-size: 1.12rem; line-height: 1.55; color: var(--on-blue-soft); }
.book-finished-quote p { margin: 0; }
.book-finished-quote footer { margin-top: 0.6rem; font-weight: 700; color: #fff; }
.book-finished-stats-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; }
.book-finished-stats-list div { border-top: 1px solid rgba(255, 255, 255, 0.35); padding-top: 0.7rem; }
.book-finished-stats-list dt { font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.book-finished-stats-list dd { margin: 0.4rem 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-blue-soft); }
.book-finished-next h3 { margin: 2.2rem 0 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-blue-soft); }
.book-finished-cards { display: grid; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.book-finished-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.95rem 0; border-top: 1px solid rgba(255, 255, 255, 0.35); color: #fff; font-weight: 700; text-decoration: none; }
.book-finished-card:hover span:first-child { text-decoration: underline; }
.book-finished-share { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 1.3rem; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.28em; }
.book-finished :focus-visible { outline-color: #fff; }

/* A part finished: a small note at the foot of the screen. */
.book-milestone-toast {
  position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 0.8rem;
  max-width: calc(100vw - 2 * var(--g)); padding: 0.8rem 1rem; background: var(--ink); color: #fff; font-size: 0.9rem; font-weight: 700;
  transform: translateX(-50%); animation: toast-in 0.3s var(--ease) both;
}
.book-milestone-toast[data-part] { background: var(--part-fill); color: var(--part-on); }   /* a part's note is a band of its colour */
.book-milestone-toast.no-motion { animation: none; }
.book-milestone-toast.is-hiding { animation: toast-out 0.3s ease-in forwards; }
.book-milestone-dismiss { border: 0; background: none; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 8px); } }

/* ------------------------------------------------------------ reading themes */
/* Chapter reading mode (main.js): paper, sepia or dark. The tokens change for the reading page only;
   the menu, the bands and the footer keep their own. */
html.reading-theme-sepia .v2-body { background: #f2e9d8; }
.reading-theme-sepia .article-page {
  --paper: #f2e9d8; --ink: #2c2416; --ink-soft: #6b5d45; --read-ink: #3a2f1f; --rule: rgba(58, 47, 31, 0.2); --rule-strong: #2c2416; --line: rgba(58, 47, 31, 0.2);
}
.reading-theme-sepia .corner--dark { --corner-bg: #f2e9d8; color: #2c2416; }
.reading-theme-sepia .gh-content.has-read-along .is-narrated { --narrated: #9a7a20; --narrated-tint: #e6d9be; }   /* gold at 14% on sepia */
html.reading-theme-dark .v2-body { background: #12141b; }
.reading-theme-dark .article-page {
  --paper: #12141b; --ink: #eef0f6; --ink-soft: #a3a9bb; --read-ink: #d6d9e4; --rule: rgba(238, 240, 246, 0.18); --rule-strong: #eef0f6; --line: rgba(238, 240, 246, 0.2);
  color: #eef0f6;
}
.reading-theme-dark .corner--ink { --corner-bg: #12141b; }
.reading-theme-dark .gh-content code { background: rgba(238, 240, 246, 0.08); }
.reading-theme-dark .gh-content pre { background: #1c1f29; }
.reading-theme-dark .book-search-result mark { background: #2a3160; color: #fff; }
.reading-theme-dark .gh-content.has-read-along .is-narrated { --narrated: #7a8cff; --narrated-tint: #1e2236; }   /* light blue at 12% on night */
.reading-theme-dark .chapter-mini-timeline input[type="range"] { --fill: #7a8cff; }

/* ----------------------------------------------------------------- phones */
@media (max-width: 1100px) {
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .mast__split, .sec__head--split, .sec--split, .band, .fit { grid-template-columns: minmax(0, 1fr); }
  .band { align-items: start; }
  .row, .rows--plain .row { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; padding-right: 2rem; }
  .row__name { font-size: clamp(2rem, 9.5vw, 3rem); }
  .row__go { position: absolute; right: 0; top: clamp(1.15rem, 2.8vh, 1.6rem); }
  .grid4 { grid-template-columns: minmax(0, 1fr); }
  .post-row a { grid-template-columns: minmax(0, 1fr) auto; }
  .post-row__title { grid-column: 1 / -1; grid-row: 2; }
  .post-row__time { grid-column: 2; grid-row: 1; }
  .book-mast { grid-template-columns: minmax(0, 1fr); }
  .book-mast__still { margin: 0 calc(-1 * var(--g)); }
  .blueprint-audio-player { grid-template-columns: minmax(0, 1fr); }
  .blueprint-audio-stage { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
  .blueprint-playlist { max-height: 28rem; }
  .blueprint-transport { grid-template-columns: minmax(0, 1fr) auto auto; }
  .blueprint-primary-controls { grid-column: 1 / -1; justify-content: flex-start; }
  .book-page-chapters { grid-template-columns: minmax(0, 1fr); }
  .book-page-chapters-aside { position: static; }
  .article-navigation { grid-template-columns: minmax(0, 1fr); }
  .article-navigation a[data-direction="next"] { grid-column: 1; text-align: left; }
  .book-finished-stats-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .chapter-mini-player { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "toggle meta" "controls controls" "speed follow"; }
  .chapter-mini-speed-wrap { justify-self: start; }
  .read-along-follow { justify-self: end; }
  .chapter-mini-speed-menu { right: auto; left: 0; }
}

/* ------------------------------------------------------------------ touch */
/* Fingers: every link and control at least 44 px tall to tap, without moving the text. */
@media (pointer: coarse) {
  .v2-site .link, .topics a, .book-jump a, .article-tags a, .article-discuss, .chapter-search-link, .archive-more, .book-finished-share, .pagination a, .chapter-context {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .blueprint-timeline input[type="range"], .chapter-mini-timeline input[type="range"] { height: 32px; }
}

/* ---------------------------------------------------------------- reduced */
@media (prefers-reduced-motion: reduce) {
  .chapter-toc, .chapter-toc.is-docked, .knowledge-popover, .row__go { transition: none; }
  .chapter-mini-bars i { animation: none; }
  .book-milestone-toast { animation: none; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .corner, .index, .edge, .site-footer, .article-progress, .chapter-toc, .chapter-mini-player, .chapter-reading-mode, .article-share-block,
  .article-footer-actions, .article-newsletter, .article-navigation, .book-finished, .book-jump { display: none !important; }
  .article-page, .page { padding-top: 0; }
  .gh-content { max-width: none; }
}

/* A reading-progress bar from an old code injection (<progress class="reading-progress">, 5 px, grey)
   would sit over the theme's own: hidden. */
.v2-site .reading-progress { display: none !important; }