/* The header and footer every built page shares (docs/plans/site-revamp.md), drawn by scripts/build.mjs.
   The build puts this file first in both stylesheets it writes: site.css (the learning pages) and bridge.css
   (the pages whose content is still styled by styles.css). So every rule here names header.site or footer.site,
   and sets everything styles.css would otherwise set for a nav, a brand or a button. */
:root {
  /* The header is a dark room in both themes: the videos are filmed by a fire. */
  --night: #131110;
  --night-ink: #f3ede2;
  --night-muted: #b9b1a4;
  --night-rule: #3a352f;
  --night-edge: #756c5f;
  --glow: #f5a524;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --header-h: 72px;
}
header.site { background: var(--night); color: var(--night-ink); font: 17px/1.6 var(--sans); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
header.site .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--night-ink); font: 600 19px/1 var(--serif); letter-spacing: 0; text-decoration: none; white-space: nowrap; }
header.site .brand img { width: 32px; height: 32px; border-radius: 50%; }
header.site .brand:focus-visible, header.site nav a:focus-visible { outline: 2px solid var(--night-ink); outline-offset: 3px; }
header.site nav { display: flex; align-items: center; gap: 26px; }
header.site nav a { margin: 0; }
/* :not(.brand) is always true here. It lifts these above the rule in styles.css that hides a nav's text links
   under 960px until account.js has built its menu, which this header does not have. */
header.site nav a:not(.button):not(.brand) { display: inline-flex; align-items: center; min-height: 24px; color: var(--night-muted); font-size: 15px; text-decoration: none; white-space: nowrap; }
header.site nav a:not(.button):not(.brand):hover, header.site nav a:not(.button):not(.brand)[aria-current] { color: var(--night-ink); }
header.site nav .button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--night-edge); border-radius: 999px; background: transparent; color: var(--night-ink); font: 600 14px/1 var(--sans); text-decoration: none; white-space: nowrap; }
header.site nav .button:hover { border-color: var(--night-muted); color: var(--night-ink); }

footer.site { position: static; margin-top: auto; padding: 28px 0; background: transparent; border-top: 1px solid var(--rule); color: var(--muted); font: 14px/1.6 var(--sans); }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
footer.site .links, footer.site .account { display: flex; flex-wrap: wrap; gap: 6px 20px; }
footer.site a { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); }
footer.site .unread-dot { display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: #c0392b; }
footer.site [hidden] { display: none; }
/* While the consent banner (track.js) shows, the page ends above it, so the footer's links are never under it. */
body:has(> #consent) footer.site { padding-bottom: calc(28px + var(--consent-h, 0px)); }

@media (max-width: 560px) {
  :root { --header-h: 60px; }
  header.site nav { gap: 16px; }
  header.site nav a.wide:not(.button):not(.brand) { display: none; }
}
/* The smallest phones: the header's three things on one line. */
@media (max-width: 380px) {
  header.site .wrap, header.site nav { gap: 12px; }
  header.site .brand { gap: 8px; font-size: 17px; }
  header.site nav a:not(.button):not(.brand) { font-size: 14px; }
  header.site nav .button { padding: 0 12px; }
}
@media (max-width: 350px) {
  header.site .brand img { display: none; }
}

/* The learning pages' own look (docs/plans/site-revamp.md), after chrome.css in the site.css the build writes.
   styles.css stays as it is for /admin and the pages whose content it still styles; a page links one or the other. */
:root {
  --paper: #fbf8f2;
  --card: #fffdf9;
  --ink: #1a1c1e;
  --muted: #5b6168;
  --rule: #e4dfd3;
  --link: #9a4409;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1a1816; --card: #221f1c; --ink: #efe9de; --muted: #aea699; --rule: #35312c; --link: #f5a524; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: calc(var(--consent-h, 0px) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); text-underline-offset: 3px; }
img { max-width: 100%; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; }
.button.primary { background: var(--night-ink); color: var(--night); }
.button.primary:hover { background: #fff; }
/* The pill is the ground's own colour reversed, so its ring takes the light one. */
.button.primary:focus-visible { outline-color: var(--night-ink); }
.button.quiet { border-color: var(--night-edge); color: var(--night-ink); background: transparent; }
.button.quiet:hover { border-color: var(--night-muted); }

/* The first screen: the hero on the header's dark ground, lit from where the videos sit. */
.hero { display: flex; align-items: center; min-height: calc(100svh - var(--header-h)); padding: 24px 0 56px; background: var(--night) radial-gradient(60% 70% at 78% 52%, rgba(245, 165, 36, .17), transparent 70%); color: var(--night-ink); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.eyebrow { margin: 0 0 18px; color: var(--glow); font: 600 13px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { margin: 0; font: 600 clamp(38px, 5.1vw, 68px)/1.04 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.hero h1 em { color: var(--glow); white-space: nowrap; }
.hero .lede { margin: 24px 0 0; max-width: 33em; color: var(--night-muted); font-size: 19px; line-height: 1.55; }
.hero .lede strong { color: var(--night-ink); font-weight: 600; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.reels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.reel { margin: 0; }
.reel + .reel { margin-top: 40px; }
.reel .play, .reel iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 16px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 28px 60px rgba(0, 0, 0, .6); }
.reel .play { position: relative; padding: 0; overflow: hidden; cursor: pointer; }
.reel .play img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.reel .play:hover img { transform: scale(1.03); }
/* The play mark sits in the corner with the length, so it never covers a face. */
.reel .play::after { content: "\25B6\FE0E\00A0\00A0" attr(data-length); position: absolute; z-index: 1; left: 12px; bottom: 12px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(19, 17, 16, .82); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); color: #fff; font: 600 14px/1 var(--sans); letter-spacing: .02em; }
.reel .play:hover::after { background: var(--glow); color: var(--night); box-shadow: none; }
.reel .play:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }
.reel figcaption { margin-top: 16px; }
.reel .kicker { display: block; color: var(--glow); font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.reel .title { display: block; margin-top: 6px; font: 600 19px/1.25 var(--serif); text-wrap: balance; }
.reel .meta { display: block; margin-top: 6px; color: var(--night-muted); font-size: 14px; }
.reel .meta a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; }

/* The path: both series on the paper ground, every episode in order. */
.path { padding: 88px 0 96px; scroll-margin-top: 0; }
.path .eyebrow { color: var(--link); }
.path h2 { margin: 0; font: 600 clamp(30px, 3.6vw, 44px)/1.1 var(--serif); letter-spacing: -.01em; }
.path .intro { margin: 18px 0 0; max-width: 38em; color: var(--muted); font-size: 18px; }
.series { margin-top: 64px; }
.series-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.series-head .kicker { margin: 0 0 8px; color: var(--muted); font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.series-head h2, .series-head h3 { margin: 0; font: 600 28px/1.15 var(--serif); }
.series-head .about { margin: 8px 0 0; max-width: 40em; color: var(--muted); }
.series-head .all { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; white-space: nowrap; }
.episodes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
.episode { display: flex; flex-direction: column; }
.episode .thumb { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--night); box-shadow: 0 0 0 1px var(--rule); }
.episode .thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .25s ease; }
.episode .thumb:hover img { transform: scale(1.03); }
.episode .thumb:focus-visible { outline-color: var(--link); }
.episode .n { margin: 14px 0 0; color: var(--link); font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.episode h4 { margin: 4px 0 0; font: 600 19px/1.25 var(--serif); text-wrap: balance; }
.episode h4 a { color: var(--ink); text-decoration: none; }
.episode h4 a:hover { text-decoration: underline; }
.episode .after { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.episode .after b { color: var(--ink); font-weight: 600; }
.episode .code { margin: auto 0 0; padding-top: 10px; font-size: 14px; }
.episode .code a { display: inline-flex; align-items: center; min-height: 24px; }

/* The book, the demo and about Joel: three plain sections under the path, alternating grounds. */
.book, .try, .about { padding: 80px 0; border-top: 1px solid var(--rule); }
.try { background: var(--card); }
.book .wrap, .about .wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.book .eyebrow, .try .eyebrow, .about .eyebrow { color: var(--link); }
.book h2, .try h2, .about h2 { margin: 0 0 16px; font: 600 clamp(26px, 3vw, 36px)/1.15 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.book p, .try p, .about p { margin: 0 0 16px; max-width: 40em; font-size: 18px; }
.book .cover { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--rule), 0 18px 40px rgba(0, 0, 0, .18); }
.book .soon { color: var(--muted); font-size: 16px; }
.about .portrait { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; border-radius: 50%; }
.about .links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 600; }
.about .links a { display: inline-flex; align-items: center; min-height: 24px; }

/* /book: the cover, what it builds, the contents. */
.bookhome { padding: 64px 0 96px; }
.bookhome .intro { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.bookhome .cover { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--rule), 0 18px 40px rgba(0, 0, 0, .18); }
.bookhome .eyebrow, .chapter .eyebrow { color: var(--link); }
.bookhome h1 { margin: 0; font: 600 clamp(32px, 4.2vw, 50px)/1.08 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.bookhome h1 span { display: block; margin-top: 8px; color: var(--muted); font-size: .62em; line-height: 1.2; }
.bookhome .lede { margin: 20px 0 0; max-width: 36em; font-size: 18px; }
.bookhome .actions { margin: 28px 0 0; }
.bookhome .buy { margin: 16px 0 0; color: var(--muted); font-size: 16px; }
.bookhome h2 { margin: 72px 0 8px; font: 600 30px/1.15 var(--serif); }
.toc { list-style: none; margin: 0; padding: 0; columns: 2 360px; column-gap: 48px; }
.toc > li { break-inside: avoid; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.toc .n { margin: 0; color: var(--link); font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.toc h3 { margin: 4px 0 0; font: 600 21px/1.25 var(--serif); }
.toc h3 a { color: var(--ink); text-decoration: none; }
.toc h3 a:hover { text-decoration: underline; }
.toc ol { list-style: none; margin: 8px 0 0; padding: 0; font-size: 15px; }
.toc ol a { display: inline-flex; align-items: center; min-height: 28px; color: var(--muted); }
.toc ol a:hover { color: var(--link); }
.also { margin-top: 56px; }
.also h2 { margin-top: 0; font-size: 22px; }

/* A section of the book: the text set for reading, a serif at a measure of about seventy characters. */
.chapter { padding: 40px 0 0; }
.chapter > .wrap { max-width: 780px; }
.chapter .crumbs { color: var(--muted); }
.chapter .crumbs a { color: var(--muted); }
.chapter .head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.chapter h1 { margin: 0; font: 600 clamp(32px, 4.4vw, 48px)/1.1 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.text { font: 19px/1.7 var(--serif); }
.text p, .text ul, .text ol, .text blockquote, .text figure, .text table, .text pre { margin: 0 0 1.1em; }
.text h2, .text h3 { margin: 1.8em 0 .6em; font-family: var(--serif); line-height: 1.25; }
.text h2 { font-size: 28px; }
.text h3 { font-size: 22px; }
.text code { padding: 1px 5px; border-radius: 5px; background: var(--card); border: 1px solid var(--rule); font: .84em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.text pre { overflow-x: auto; padding: 16px 18px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); font-size: 15px; line-height: 1.55; }
.text pre code { padding: 0; border: 0; background: none; font-size: inherit; line-height: inherit; }
.text figure img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; }
.text figcaption { margin-top: 10px; color: var(--muted); font: 15px/1.5 var(--sans); }
.text table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font: 15px/1.5 var(--sans); }
.text th, .text td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.text blockquote { padding-left: 18px; border-left: 3px solid var(--rule); color: var(--muted); }
.text [class^="callout-"] { margin: 0 0 1.1em; padding: 16px 20px; border-left: 3px solid var(--link); border-radius: 0 10px 10px 0; background: var(--card); font-size: 17px; }
.text [class^="callout-"] > :last-child, .text [class^="callout-"] p:last-child { margin-bottom: 0; }
.text [id^="term-"], .text [id^="letter-"] { scroll-margin-top: 16px; }
.chapter .pager { padding-top: 40px; }

/* The reader (reader.js): with JavaScript on, a section is set in pages that fit the window and turn. Its own
   colours: paper is the site's, sepia and dark are chosen in its bar. */
:root[data-reader-theme="paper"] { --paper: #fbf8f2; --card: #fffdf9; --ink: #1a1c1e; --muted: #5b6168; --rule: #e4dfd3; --link: #9a4409; }
:root[data-reader-theme="sepia"] { --paper: #f4ecd8; --card: #efe5cc; --ink: #3b2f22; --muted: #6d5d49; --rule: #ddd0b2; --link: #8a4a12; }
:root[data-reader-theme="dark"] { --paper: #1a1816; --card: #221f1c; --ink: #efe9de; --muted: #aea699; --rule: #35312c; --link: #f5a524; }
:root[data-reader-size="small"] .text { font-size: 16px; }
:root[data-reader-size="large"] .text { font-size: 22px; }
.reader-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 20px; padding: 10px 0 14px; border-bottom: 1px solid var(--rule); font: 14px/1.4 var(--sans); }
.reader-bar button { min-height: 32px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.reader-bar button[aria-pressed="true"] { border-color: var(--ink); font-weight: 600; }
.reader-bar .where { flex: 1 1 240px; min-width: 0; margin: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-bar .choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.reader-bar .sizes, .reader-bar .themes { display: flex; gap: 4px; }
.reader-bar .mode { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; }
.reader-bar .mode[hidden] { display: none; }
.reader-bar .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.reader-bar .progress span { display: block; height: 100%; background: var(--link); transition: width .3s ease; }
.reader-contents { max-height: 60vh; overflow: auto; margin: 0 0 20px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); }
.reader-contents .toc { columns: 1; }
.reader-contents a[aria-current] { color: var(--ink); font-weight: 700; }
:root[data-reader="pages"] .chapter > .wrap { max-width: 1240px; }
:root[data-reader="pages"] .chapter .crumbs { max-width: 1240px; }
:root[data-reader="pages"] .text { overflow: hidden; column-width: var(--page-w, 640px); column-gap: var(--page-gap, 32px); column-fill: auto; outline: none; }
:root[data-reader="pages"] .text .head { break-after: avoid; }
:root[data-reader="pages"] .text figure, :root[data-reader="pages"] .text [class^="callout-"], :root[data-reader="pages"] .text table { break-inside: avoid; }
:root[data-reader="pages"] .text figure img { max-height: calc(var(--page-h, 600px) - 140px); width: auto; max-width: 100%; margin: 0 auto; cursor: zoom-in; }
:root[data-reader="pages"] .text pre { margin-left: 0; margin-right: 0; border-radius: 10px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
:root[data-reader="pages"] .chapter .head { margin-bottom: 24px; }
.text .marked { outline: 3px solid var(--link); outline-offset: 4px; border-radius: 4px; transition: outline-color .3s; }
.reader-turns { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0 24px; }
.reader-turns button { min-height: 44px; padding: 0 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 15px/1 var(--sans); cursor: pointer; }
.reader-turns button:disabled { opacity: .4; cursor: default; }
.reader-turns[hidden], .chapter .pager[hidden], .reader-turns .highlight[hidden] { display: none; }
.reader-turns { align-items: center; }
.reader-turns .highlight { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #ffff00; color: #1a1c1e; font: 600 14px/1 var(--sans); cursor: pointer; }
:root[data-reader-highlight="off"] .reader-turns .highlight { background: var(--card); color: var(--ink); border: 1px solid var(--rule); }
:root[data-reader="pages"] .text .reader-pad { break-before: column; height: var(--page-h, 600px); }
:root[data-reader="pages"] .text pre[data-piece-of] { margin-top: 0; }
/* The turn: the page leaves like a leaf lifting at its outer edge, and the next one settles into place. */
.text.turning.forward { transform-origin: left center; transform: perspective(1800px) rotateY(-14deg); opacity: .25; transition: transform .25s ease-in, opacity .25s ease-in; }
.text.turning.backward { transform-origin: right center; transform: perspective(1800px) rotateY(14deg); opacity: .25; transition: transform .25s ease-in, opacity .25s ease-in; }
.text.settling { transition: transform .25s ease-out, opacity .25s ease-out; }
.reader-figure { max-width: 96vw; max-height: 96vh; padding: 12px; border: 0; border-radius: 12px; background: #fff; }
.reader-figure::backdrop { background: rgba(0, 0, 0, .7); }
.reader-figure img { display: block; max-width: calc(96vw - 24px); max-height: calc(96vh - 80px); width: auto; height: auto; }
.reader-figure .close { margin-top: 10px; min-height: 40px; padding: 0 16px; border: 1px solid #ccc; border-radius: 999px; background: #fff; font: 600 15px/1 var(--sans); cursor: pointer; }
.bookhome .continue { margin-left: 8px; border: 1px solid var(--rule); color: var(--ink); }
/* Search in the book: a box, then the matching sections as they are typed. */
.book-search { margin: 28px 0 0; max-width: 640px; }
.book-search label { display: block; margin-bottom: 6px; font: 600 14px/1.3 var(--sans); }
.book-search input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); color: var(--ink); font: 16px/1.4 var(--sans); }
.book-search input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.book-search .status { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.book-search .status:empty { display: none; }
.book-search .hits { list-style: none; margin: 8px 0 0; padding: 0; }
.book-search .hits a { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.book-search .hits a:hover .hit-where, .book-search .hits a:focus-visible .hit-where { text-decoration: underline; }
.book-search .hit-where { display: block; color: var(--link); font: 600 14px/1.4 var(--sans); }
.book-search .hit-line { display: block; margin-top: 2px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.book-search mark, .text mark.hl { background: #ffff00; color: #1a1c1e; border-radius: 2px; padding: 0 1px; }
:root[data-reader-highlight="off"] .text mark.hl { background: none; color: inherit; padding: 0; }
/* Ask the book: the thread, the box, and code set as code with a Copy button. */
.ask { margin: 32px 0 0; max-width: 720px; padding: 20px 22px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.ask h2 { margin: 0 0 6px; font: 600 22px/1.2 var(--serif); }
.ask .note { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.ask .thread { list-style: none; margin: 0; padding: 0; }
.ask .thread > li { padding: 12px 0; border-top: 1px solid var(--rule); }
.ask .q { margin: 0 0 6px; font-weight: 600; }
.ask .a p { margin: 0 0 10px; font: 17px/1.6 var(--serif); }
.ask .a ul { margin: 0 0 10px; padding-left: 20px; font: 17px/1.6 var(--serif); }
.ask .a .thinking, .ask .status { color: var(--muted); font-size: 14px; }
.ask .a .error { color: var(--link); }
.ask .a code { padding: 1px 5px; border-radius: 5px; background: var(--paper); border: 1px solid var(--rule); font: .84em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.answer-code { margin: 0 0 12px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--paper); }
.answer-code .code-bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 4px 12px; border-bottom: 1px solid var(--rule); color: var(--muted); font: 600 12px/1 var(--sans); text-transform: lowercase; }
.answer-code .copy { min-height: 28px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); font: 600 12px/1 var(--sans); cursor: pointer; }
.answer-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ask .answer-code pre code { padding: 0; border: 0; background: none; font: inherit; }
.ask-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); font: 16px/1.4 var(--sans); resize: vertical; }
.ask-form textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.ask-form .turnstile { margin-top: 8px; }
.ask-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.ask-row .status { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reader-ask { max-width: none; margin: 0 0 20px; max-height: 70vh; overflow: auto; }
.reader-search { max-height: 60vh; overflow: auto; margin: 0 0 20px; padding: 4px 16px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); }
.reader-search .book-search { margin-top: 12px; max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .text.turning, .text.settling, .reader-bar .progress span { transition: none; transform: none; opacity: 1; }
}

/* The blog: /blog's list, the home page's newest three, and a written post (in the book's .chapter layout). */
.blog { padding: 64px 0 96px; }
.blog .eyebrow, .latest .eyebrow, .post .eyebrow { color: var(--link); }
.blog .eyebrow a { color: inherit; }
.blog h1 { margin: 0; font: 600 clamp(36px, 4.6vw, 56px)/1.06 var(--serif); letter-spacing: -.015em; }
.blog .intro { margin: 16px 0 0; max-width: 40em; color: var(--muted); font-size: 18px; }
.blog .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.blog .tags[hidden] { display: none; }
.blog .tags button { min-height: 34px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 14px/1 var(--sans); cursor: pointer; }
.blog .tags button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.posts, .newest { list-style: none; margin: 24px 0 0; padding: 0; }
.posts > li, .newest > li { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.posts .when, .newest .when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--muted); font: 600 13px/1.4 var(--sans); }
.posts .tag { padding: 2px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); font-weight: 600; }
.posts h2, .newest h3 { margin: 6px 0 0; font: 600 24px/1.25 var(--serif); text-wrap: balance; }
.posts h2 a, .newest h3 a { color: var(--ink); text-decoration: none; }
.posts h2 a:hover, .newest h3 a:hover { text-decoration: underline; }
.posts p, .newest p { margin: 8px 0 0; max-width: 44em; }
.latest { padding: 80px 0; border-top: 1px solid var(--rule); }
.latest h2 { margin: 0; font: 600 clamp(26px, 3vw, 36px)/1.15 var(--serif); }
.latest .more { display: inline-flex; align-items: center; min-height: 24px; margin-top: 20px; font-weight: 600; }
.post .player { margin: 0 0 28px; }
.text figure.diagram { margin: 0 0 1.4em; padding: 16px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); }
.text figure.diagram pre.mermaid { margin: 0; padding: 0; border: 0; background: none; white-space: pre; font-size: 13px; }
.text figure.diagram svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.post .player .play, .post .player iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; }

/* A picture that plays its video in place when pressed (play.js): the mark and the length sit in its corner. */
.play { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; background: #000; cursor: pointer; }
.play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.play::after { content: "\25B6\FE0E\00A0\00A0" attr(data-length); position: absolute; z-index: 1; left: 12px; bottom: 12px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(19, 17, 16, .82); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); color: #fff; font: 600 14px/1 var(--sans); letter-spacing: .02em; }
.play:hover::after { background: var(--glow); color: var(--night); box-shadow: none; }
.play:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }
.button.dark { background: var(--ink); color: var(--paper); }
.button.dark:hover { opacity: .88; }
/* Its text is the page's colour, so its ring takes the ink. */
.button.dark:focus-visible { outline-color: var(--ink); }

/* /learn: every episode in order, one row each, with its whole summary. */
.learn { padding: 64px 0 96px; }
.learn .eyebrow { color: var(--link); }
.learn h1 { margin: 0; font: 600 clamp(36px, 4.6vw, 56px)/1.06 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.learn .intro { margin: 20px 0 0; max-width: 40em; color: var(--muted); font-size: 18px; }
.lessons { list-style: none; margin: 0; padding: 0; }
.lessons li { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.lessons .thumb { align-self: start; display: block; border-radius: 10px; overflow: hidden; background: var(--night); box-shadow: 0 0 0 1px var(--rule); }
.lessons .thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lessons .n { margin: 0; color: var(--link); font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.lessons h3 { margin: 6px 0 0; font: 600 24px/1.2 var(--serif); text-wrap: balance; }
.lessons h3 a { color: var(--ink); text-decoration: none; }
.lessons h3 a:hover { text-decoration: underline; }
.lessons p { margin: 10px 0 0; max-width: 44em; }
.lessons .after { color: var(--muted); }
.lessons .after b, .lesson .after b { color: var(--ink); font-weight: 600; }
.lessons .code { font-size: 15px; }
.lessons .code a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; }
.shorts .lessons li { grid-template-columns: 150px minmax(0, 1fr); }
.shorts .play, .shorts iframe { align-self: start; display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 12px; }

/* An episode's page: the video on the dark ground, then what it covers, its code and the episodes beside it. */
.stage { overflow: hidden; padding: 28px 0 56px; background: var(--night) radial-gradient(70% 60% at 50% 70%, rgba(245, 165, 36, .13), transparent 70%); color: var(--night-ink); }
.stage .wrap, .lesson > .wrap { max-width: 1020px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 28px; color: var(--night-muted); font-size: 14px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--night-muted); }
.crumbs a:hover { color: var(--night-ink); }
.stage h1 { margin: 0 0 28px; font: 600 clamp(30px, 4.2vw, 50px)/1.08 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.player .play, .player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 28px 60px rgba(0, 0, 0, .6); }
.player .play::after { left: 16px; bottom: 16px; padding: 12px 20px 12px 16px; font-size: 16px; }
.notes { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding-top: 56px; padding-bottom: 56px; }
.notes h2 { margin: 0 0 12px; font: 600 26px/1.2 var(--serif); }
.notes .about p { margin: 0 0 16px; font-size: 18px; }
.notes .after { padding: 16px 20px; border-left: 3px solid var(--glow); background: var(--card); border-radius: 0 10px 10px 0; }
.take { align-self: start; padding: 24px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.take h2 { font-size: 20px; }
.take p { margin: 0 0 16px; font-size: 15px; }
.take code { padding: 2px 6px; border-radius: 6px; background: var(--paper); border: 1px solid var(--rule); font-size: 14px; }
.take .button { width: 100%; }
.take .more { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.take .more a { display: inline-flex; align-items: center; min-height: 28px; font-weight: 600; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 0 88px; }
.pager a { display: block; padding: 18px 22px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; }
.pager a:hover { border-color: var(--link); }
.pager .next { text-align: right; }
.pager .dir { display: block; color: var(--link); font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.pager .what { display: block; margin-top: 6px; font: 600 18px/1.25 var(--serif); text-wrap: balance; }

/* The consent banner track.js draws. */
#consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 640px; margin: 0 auto; padding: 16px 20px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font-size: 15px; }
#consent p { margin: 0 0 12px; }
#consent .choices { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#consent .button { min-width: 110px; min-height: 40px; background: var(--ink); color: var(--paper); border: 0; font: 600 15px/1 var(--sans); }
#consent .button:focus-visible { outline-color: var(--ink); }

@media (max-width: 1040px) {
  .episodes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 40px; padding-bottom: 40px; }
  .lessons li { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .path { padding: 64px 0 72px; }
  .hero .wrap { gap: 36px; }
  .reels { gap: 16px; }
  .reel + .reel { margin-top: 28px; }
}
/* Two narrow columns: the two buttons stack, the same width, where a row no longer fits. */
@media (min-width: 721px) and (max-width: 1000px) {
  .hero .actions { flex-direction: column; align-items: stretch; max-width: 240px; }
}
/* One column: the videos sit under the words, level with each other, and the light moves under them. */
@media (max-width: 720px) {
  .hero { align-items: flex-start; padding: 16px 0 40px; background-image: radial-gradient(90% 50% at 50% 76%, rgba(245, 165, 36, .15), transparent 70%); }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .reels { max-width: 520px; }
  .reel + .reel { margin-top: 0; }
  .episodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .learn { padding: 40px 0 56px; }
  .learn .intro { font-size: 16px; }
  .lessons li { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 0; }
  .lessons h3 { font-size: 21px; }
  .shorts .lessons li { grid-template-columns: 112px minmax(0, 1fr); }
  .stage { padding: 16px 0 32px; }
  .crumbs { margin-bottom: 16px; font-size: 13px; }
  .stage h1 { margin-bottom: 18px; }
  .player .play, .player iframe { border-radius: 10px; }
  .player .play::after { left: 10px; bottom: 10px; padding: 9px 14px 9px 12px; font-size: 14px; }
  .notes { padding-top: 32px; padding-bottom: 32px; }
  .notes .about p { font-size: 17px; }
  .pager { grid-template-columns: minmax(0, 1fr); padding-bottom: 56px; }
  .pager .next { text-align: left; }
  .hero { padding: 8px 0 32px; }
  .hero .wrap { gap: 24px; }
  .eyebrow { margin-bottom: 10px; font-size: 12px; }
  .hero h1 { font-size: 36px; }
  .hero .lede { margin-top: 14px; font-size: 16px; line-height: 1.5; }
  /* One row where both fit; on a narrower phone the second drops under the first. */
  .hero .actions { margin-top: 20px; gap: 10px; }
  .hero .actions .button { flex: 1 1 auto; padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .reels { gap: 12px; }
  .reel .play, .reel iframe { border-radius: 12px; }
  .reel .play::after { left: 8px; bottom: 8px; padding: 7px 12px 7px 10px; font-size: 13px; }
  .reel figcaption { margin-top: 10px; }
  .reel .title { font-size: 16px; }
  .reel .meta { font-size: 13px; }
  /* A phone reads the path as a list: a small picture beside each episode's words. */
  .path { padding: 48px 0 56px; }
  .path .intro { font-size: 16px; }
  .series { margin-top: 44px; }
  .series-head h2, .series-head h3 { font-size: 24px; }
  .episodes { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; }
  .episode { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .episode .thumb { grid-row: 1 / span 4; align-self: start; border-radius: 8px; }
  .episode .n { margin-top: 0; }
  .episode h4 { font-size: 17px; }
  .episode .after { font-size: 14px; }
  .episode .code { margin-top: 0; padding-top: 4px; }
  .bookhome { padding: 32px 0 56px; }
  .bookhome .intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bookhome .cover { max-width: 160px; }
  .bookhome h2 { margin-top: 48px; }
  .chapter { padding-top: 24px; }
  .text { font-size: 17px; }
  .text pre { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; font-size: 13px; }
  .blog { padding: 40px 0 56px; }
  .latest { padding: 48px 0; }
  .posts h2, .newest h3 { font-size: 20px; }
  .book, .try, .about { padding: 48px 0; }
  .book .wrap, .about .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .book .cover { max-width: 160px; }
  .about .portrait { max-width: 140px; }
  .book p, .try p, .about p { font-size: 16px; }
  #consent { left: 8px; right: 8px; bottom: 8px; padding: 12px 14px; font-size: 14px; }
  #consent p { margin-bottom: 8px; }
  #consent .choices { gap: 8px 10px; }
  #consent .button { min-width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel .play img, .episode .thumb img { transition: none; }
  .reel .play:hover img, .episode .thumb:hover img { transform: none; }
}

/* The comments under a blog post (comments.js), in both looks: the build adds this file to site.css and bridge.css. */
section.comments { margin: 56px 0 0; padding: 32px 0 64px; border-top: 1px solid var(--rule); }
section.comments h2 { margin: 0 0 16px; font: 600 26px/1.2 var(--serif); }
section.comments h3 { margin: 24px 0 8px; font: 600 19px/1.25 var(--serif); }
.comment-list, .comment-list .replies { list-style: none; margin: 0; padding: 0; }
.comment-list .replies { margin-left: 28px; border-left: 2px solid var(--rule); padding-left: 16px; }
.comment { padding: 14px 0; }
.comment .by { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.comment .by strong { color: var(--ink); }
.comment .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--link); color: var(--paper, #fff); font: 600 12px/1.6 sans-serif; }
.comment.is-hidden > .body, .comment.is-held > .body { opacity: .6; }
.comment .body p { margin: 0 0 8px; overflow-wrap: anywhere; }
.comment .body pre { margin: 0 0 8px; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.comment .deleted { margin: 0; color: var(--muted); font-style: italic; }
.comment .tools { display: flex; gap: 12px; margin: 0; }
.comment .tools:empty { display: none; }
.comment .tools button { min-height: 28px; padding: 0; border: 0; background: none; color: var(--link); font: 600 14px/1 sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.comment.marked { outline: 3px solid var(--link); outline-offset: 4px; border-radius: 4px; }
section.comments .none { color: var(--muted); }
.comment-form { margin: 12px 0 0; max-width: 640px; }
.comment-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comment-form label { display: block; margin: 0 0 8px; font: 600 14px/1.4 sans-serif; }
.comment-form .hint { color: var(--muted); font-weight: 400; font-size: 13px; }
.comment-form input[type="text"], .comment-form input:not([type]), .comment-form input[type="email"], .comment-form textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card, var(--paper)); color: var(--ink); font: 16px/1.4 sans-serif; }
.comment-form .check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.comment-form .actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.comment-form .status { margin: 0; color: var(--muted); font-size: 14px; }
.comment-form .sent { margin: 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; }
@media (max-width: 560px) {
  .comment-form .row { grid-template-columns: 1fr; gap: 0; }
  .comment-list .replies { margin-left: 12px; padding-left: 12px; }
}