/* Web edition of the series, in the Washed Guide look: washed paper, carbon ink, one signal red.
   Screen-first and responsive; every component reads without JavaScript. */

@font-face { font-family: 'WG Serif'; src: url('fonts/WashedSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'WG Serif'; src: url('fonts/WashedSerif-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'WG Serif'; src: url('fonts/WashedSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'WG Display'; src: url('fonts/WashedDisplay-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'WG Display'; src: url('fonts/WashedDisplay-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'WG Text'; src: url('fonts/WashedText-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'WG Text'; src: url('fonts/WashedText-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
/* The inlined SVG art names the brand families; point them at the same files. */
@font-face { font-family: 'Inter Tight'; src: url('fonts/WashedDisplay-ExtraBold.ttf') format('truetype'); font-weight: 800; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/WashedDisplay-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Inter'; src: url('fonts/WashedText-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Inter'; src: url('fonts/WashedText-SemiBold.ttf') format('truetype'); font-weight: 600; }

/* ---------------------------------------------------------------- tokens */
:root {
  --paper: #f6f4ed;
  --card: #fbfaf4;
  --band: #ece9df;
  --ink: #111315;
  --graphite: #555b58;
  --alloy: #aeb3b0;
  --fog: #d8dcd9;
  --signal: #ff553d;
  --signal-deep: #c8321e;
  --signal-soft: rgba(255, 85, 61, 0.16);
  --signal-tint: #fbe3dc;
  --rust: #7e3b31;
  --term: #111315;
  --term-ink: #f4f2ea;
  --term-muted: #aeb3b0;
  --shadow: rgba(17, 19, 21, 0.11);

  --serif: 'WG Serif', Georgia, serif;
  --display: 'WG Display', 'Helvetica Neue', Arial, sans-serif;
  --text: 'WG Text', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --measure: 42rem;
  --side: 13.5rem;
  --gap: 3.5rem;
  --wide: calc(var(--measure) + var(--side) + var(--gap));
  --gutter: 16px;
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0; color: var(--ink);
  background-color: var(--paper); background-image: url('paper.svg'); background-size: 220px 220px;
  font-family: var(--serif); font-size: 1.1875rem; line-height: 1.62;
  font-kerning: normal; font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--signal); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { color: var(--signal-deep); }
:focus-visible { outline: 2px solid var(--signal-deep); outline-offset: 2px; border-radius: 2px; }
strong, b { font-weight: 600; }
p { margin: 0 0 1em; }
img, svg, video, iframe { max-width: 100%; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--term-ink); padding: 0.5rem 0.8rem; z-index: 50; font: 600 0.9rem var(--text); }
.skip:focus { left: var(--gutter); }

/* ---------------------------------------------------------------- top bar and footer */
.bar { border-bottom: 1px solid var(--alloy); background: rgba(246, 244, 237, 0.92); }
.bar-in, .foot-in { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0.7rem var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; }
.brand { font: 800 1rem/1.2 var(--display); letter-spacing: -0.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-mark { width: 0.7rem; height: 0.7rem; background: var(--signal); display: inline-block; box-shadow: 2px 2px 0 var(--ink); }
.home {
  font: 600 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite);
  text-decoration: none; padding-right: 1.4rem; border-right: 1px solid var(--alloy); white-space: nowrap;
}
.home span { color: var(--signal-deep); }
.home:hover { color: var(--ink); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; }
.crumbs li { font: 600 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.crumbs li + li::before { content: '/'; color: var(--alloy); margin-right: 0.5rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li:first-child { display: none; }
.foot { margin-top: 4rem; border-top: 1px solid var(--alloy); }
.foot-in { padding-top: 1.2rem; padding-bottom: 2rem; display: block; font: 0.85rem/1.5 var(--text); color: var(--graphite); }
.foot-in p { margin: 0 0 0.3rem; }
.foot-in a { color: var(--ink); }

/* ---------------------------------------------------------------- shared furniture */
.kicker { font: 700 0.76rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); margin: 0 0 0.5rem; }
.badge {
  display: inline-block; vertical-align: 0.12em; font: 700 0.66rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.5rem 0.26rem; border-radius: 3px; border: 1px solid var(--ink); background: var(--card); color: var(--ink); white-space: nowrap;
}
.badge-reviewed, .badge-reader-approved { background: var(--ink); color: var(--term-ink); }
.badge-reader-approved { box-shadow: 2px 2px 0 var(--signal); }
.badge-being-revised { border-color: var(--signal-deep); color: var(--signal-deep); }
.badge-coming { border-color: var(--alloy); color: var(--graphite); background: transparent; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  background: var(--ink); color: var(--term-ink); border-radius: 4px; padding: 0.6rem 0.95rem 0.55rem;
  font: 600 0.8rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--signal);
}
.btn:hover { color: #fff; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--signal); }
.btn-icon { color: var(--signal); font-weight: 700; }

/* ---------------------------------------------------------------- chapter page */
.chapter-page { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.ch-head { padding: 1.4rem 0 1.2rem; }
.scene { margin: 0 calc(-1 * var(--gutter)) 0.6rem; overflow: hidden; }
.scene-svg { display: block; width: 100%; height: auto; }
.ch-title {
  font: 800 clamp(2.2rem, 1.2rem + 3.6vw, 3.5rem)/1.02 var(--display); letter-spacing: -0.03em; margin: 0; text-wrap: balance;
}
.ch-title::after { content: ''; display: block; width: 3.4rem; height: 4px; margin: 1rem 0 0; background: var(--signal); }
.ch-meta { font: 0.92rem/1.5 var(--text); color: var(--graphite); margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; }
.ch-actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; }
.ch-actions:empty { display: none; }

/* Read / Watch switch */
.lanes-switch { position: sticky; top: 0; z-index: 20; margin: 0.6rem calc(-1 * var(--gutter)) 0; background: rgba(246, 244, 237, 0.96); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.lanes-in { display: flex; align-items: stretch; gap: 0; padding: 0 var(--gutter); }
.lanes-switch a {
  display: flex; flex-direction: column; justify-content: center; text-decoration: none; padding: 0.55rem 1.2rem 0.5rem 0.9rem;
  border-right: 1px solid var(--fog); position: relative; color: var(--graphite);
}
.lanes-switch a:first-child { padding-left: 0; }
.lanes-switch a.on { color: var(--ink); }
.lanes-switch a.on::after { content: ''; position: absolute; left: 0; right: 1.2rem; bottom: -1px; height: 4px; background: var(--signal); }
.lanes-switch a:not(:first-child).on::after { left: 0.9rem; }
.lane-k { font: 800 1.15rem/1.1 var(--display); letter-spacing: -0.01em; }
.lane-sub { font: 600 0.66rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.lanes-note { margin: 0 0 0 auto; align-self: center; font: 0.82rem/1.35 var(--text); color: var(--graphite); max-width: 17rem; text-align: right; padding-left: 1rem; }

.lane-read { padding-top: 1.5rem; }
.lane-title { font: 800 1.9rem/1.1 var(--display); letter-spacing: -0.02em; margin: 2.5rem 0 1.2rem; }
.lane-title span { display: block; font: 700 0.76rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-deep); margin-top: 0.4rem; }

/* reading grid: contents at the side on wide screens */
.read-grid { display: block; }
.read-col { max-width: var(--measure); min-width: 0; }
.toc-side { display: none; }
.toc-side ol, .toc-inline ol { list-style: none; margin: 0; padding: 0; }
.toc-side li a, .toc-inline li a { display: flex; gap: 0.6rem; text-decoration: none; padding: 0.32rem 0; font: 0.86rem/1.35 var(--text); color: var(--graphite); }
.toc-side li a:hover, .toc-inline li a:hover, .toc-side li a.here-now { color: var(--ink); }
.toc-side li a.here-now .toc-num { background: var(--signal); }
.toc-num { flex: none; min-width: 2.3rem; font: 700 0.72rem/1.6 var(--mono); color: var(--term-ink); background: var(--ink); border-radius: 3px; text-align: center; align-self: flex-start; padding: 0 0.3rem; }
.toc-k { font: 700 0.7rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); margin: 0 0 0.6rem; }
.toc-inline { margin: 0 0 1.6rem; border: 1px solid var(--ink); border-radius: 4px; background: var(--card); padding: 0 0.9rem; }
.toc-inline summary { cursor: pointer; padding: 0.6rem 0; font: 700 0.76rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.toc-inline[open] { padding-bottom: 0.6rem; }

@media (min-width: 1100px) {
  .read-grid { display: grid; grid-template-columns: var(--side) minmax(0, var(--measure)); gap: var(--gap); }
  .toc-side { display: block; position: sticky; top: 5.6rem; align-self: start; max-height: calc(100vh - 7rem); overflow: auto; padding-top: 0.4rem; }
  .toc-inline { display: none; }
  .ch-head, .pager, .pager-back, .lane-watch:not(.has-media) .lane-title, .lane-watch:not(.has-media) .lane-playlist, .lessons:not(.with-media) { margin-left: calc(var(--side) + var(--gap)); }
  .scene { margin-left: calc(-1 * (var(--side) + var(--gap))); margin-right: 0; }
}

/* ---------------------------------------------------------------- the article */
article.chapter { hyphens: auto; -webkit-hyphens: auto; }
.chapter-intro > p:first-child { font-size: 1.12em; line-height: 1.55; }
section.section { margin: 0; }
.sec-head { margin: 3rem 0 1.2rem; }
section.section h2 {
  font: 800 1.7rem/1.12 var(--display); letter-spacing: -0.02em; margin: 0; hyphens: none;
  display: flex; align-items: flex-start; gap: 0.75rem; text-wrap: balance;
}
.sec-num {
  flex: none; background: var(--ink); color: var(--term-ink); border-radius: 4px; padding: 0.32rem 0.5rem 0.28rem; min-width: 2.7rem; text-align: center;
  font: 800 1.05rem/1 var(--display); letter-spacing: 0; margin-top: 0.22rem; box-shadow: 3px 3px 0 var(--signal);
}
.sec-title { flex: 0 1 auto; }
.sec-anchor { flex: none; text-decoration: none; color: var(--alloy); font: 700 1.1rem/1.5 var(--mono); opacity: 0; transition: opacity 0.15s; padding: 0 0.2rem; }
section.section h2:hover .sec-anchor, .sec-anchor:focus { opacity: 1; color: var(--signal-deep); }
@media (hover: none) { .sec-anchor { opacity: 0.6; } }

.here { display: flex; align-items: center; gap: 1rem; margin-top: 0.8rem; padding: 0.35rem 0; border-top: 1px dashed var(--alloy); border-bottom: 1px dashed var(--alloy); }
.here-label { flex: none; width: 6.8rem; margin: 0; font: 700 0.66rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-deep); }
.here-label small { display: block; color: var(--graphite); font-size: 0.62rem; letter-spacing: 0.08em; margin-top: 0.15rem; }
.here-map { display: block; flex: 1 1 auto; width: 100%; max-width: 26rem; height: auto; }

/* In this chapter: the objectives as a card */
section.inthis { margin: 2rem 0 1rem; background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--shadow); padding: 0.4rem 1.3rem 0.6rem; position: relative; }
section.inthis::before {
  content: 'In this chapter'; display: inline-block; position: relative; top: -1.05rem; margin-bottom: -0.6rem;
  background: var(--ink); color: var(--term-ink); padding: 0.32rem 0.7rem 0.28rem; border-radius: 3px;
  font: 700 0.66rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
section.inthis .sec-head { margin: 0 0 0.7rem; }
section.inthis h2 { font-size: 1.15rem; }
section.inthis h2 .sec-anchor { display: none; }
section.inthis ol { list-style: none; margin: 0; padding: 0; counter-reset: obj; }
section.inthis li { counter-increment: obj; position: relative; padding-left: 2.1rem; margin: 0 0 0.6rem; font: 0.98rem/1.5 var(--text); hyphens: none; }
section.inthis li::before { content: counter(obj); position: absolute; left: 0; top: -0.1rem; font: 800 1.35rem/1.3 var(--display); color: var(--signal-deep); }

/* lists */
article ul, article ol { margin: 0 0 1.1em; padding: 0; }
article ul > li, article section:not(.inthis) ol > li { list-style: none; position: relative; padding-left: 1.3rem; margin-bottom: 0.45em; }
article ul > li::before { content: ''; position: absolute; left: 0.15rem; top: 0.62em; width: 0.42rem; height: 0.42rem; background: var(--ink); transform: rotate(45deg); }
article section:not(.inthis) ol { counter-reset: li; }
article section.cheat ol.cs-secs > li { padding-left: 0; margin: 0; }
article section.cheat ol.cs-secs > li::before { content: none; }
article section:not(.inthis) ol > li { counter-increment: li; padding-left: 1.7rem; }
article section:not(.inthis) ol > li::before { content: counter(li) '.'; position: absolute; left: 0; font: 700 1em/inherit var(--display); }
li > p { margin-bottom: 0.4em; }

/* inline code */
code { font-family: var(--mono); font-size: 0.82em; font-weight: 500; font-variant-numeric: normal; hyphens: none; }
p code, li code, td code, .lesson-idea code, .row-idea code {
  background: rgba(17, 19, 21, 0.06); border-radius: 3px; padding: 0.06em 0.28em; overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* defined terms and their cards */
dfn.term {
  font-style: normal; font-weight: 600; cursor: help; border-radius: 2px;
  background: linear-gradient(to top, transparent 0.08em, var(--signal-soft) 0.08em, var(--signal-soft) 0.5em, transparent 0.5em);
  text-decoration: underline dotted var(--signal-deep); text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
.term-wrap { position: relative; display: inline; }
.term-card {
  display: none; position: absolute; z-index: 30; left: 0; top: calc(100% + 0.45rem); width: min(21rem, calc(100vw - 2 * var(--gutter)));
  background: var(--card); border: 1.5px solid var(--signal); border-radius: 5px; box-shadow: 4px 4px 0 var(--shadow);
  padding: 0.6rem 0.8rem 0.7rem; font: 400 0.9rem/1.45 var(--text); color: var(--ink); text-align: left; hyphens: none; white-space: normal;
  font-variant-numeric: lining-nums;
}
.term-card::before { content: ''; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
.term-k { font: 700 0.62rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); margin-right: 0.3rem; }
.term-word { font: 800 1.02rem/1.2 var(--display); letter-spacing: -0.01em; }
.term-def { display: block; margin-top: 0.25rem; }
.term-wrap:hover > .term-card, .term-wrap:focus-within > .term-card, .term-wrap.open > .term-card { display: block; }
.js .term-wrap.closed > .term-card { display: none; }
@media (max-width: 640px) {
  .term-card { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; bottom: var(--gutter); width: auto; box-shadow: 0 6px 24px rgba(17, 19, 21, 0.25); }
  .term-card::before { display: none; }
}

/* ---------------------------------------------------------------- listings and outputs */
figure { margin: 1.6rem 0 1.8rem; min-width: 0; }
figure.listing figcaption, figure.output figcaption {
  display: flex; align-items: flex-end; gap: 0.6rem; margin: 0;
  font: 700 0.7rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.listing-label, .output-label { background: var(--ink); color: var(--term-ink); padding: 0.45rem 0.7rem 0.4rem; border-radius: 4px 4px 0 0; display: inline-block; white-space: nowrap; }
.listing-label::before { content: ''; display: inline-block; width: 0.42rem; height: 0.42rem; background: var(--signal); margin-right: 0.45rem; vertical-align: 0.05rem; }
.output-label::before { content: ''; display: inline-block; width: 0.44rem; height: 0.44rem; border-radius: 50%; background: var(--signal); margin-right: 0.45rem; vertical-align: 0.04rem; }
.listing-file { font: 600 0.8rem/1.3 var(--mono); text-transform: none; letter-spacing: 0.01em; color: var(--graphite); padding-bottom: 0.3rem; overflow-wrap: anywhere; }
.output-of { color: var(--graphite); padding-bottom: 0.35rem; }
.copy {
  margin-left: auto; margin-bottom: 0.3rem; cursor: pointer; border: 1px solid var(--ink); background: var(--card); color: var(--ink); border-radius: 3px;
  font: 700 0.66rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.55rem;
}
.copy:hover { background: var(--ink); color: var(--term-ink); }
.copy.done { background: var(--signal); border-color: var(--signal); color: var(--ink); }
pre { margin: 0; font-family: var(--mono); font-variant-numeric: normal; white-space: pre; overflow-x: auto; overflow-wrap: normal; word-break: normal; hyphens: none; tab-size: 4; -webkit-overflow-scrolling: touch; }
pre code { display: block; width: max-content; min-width: 100%; font-size: inherit; background: none; padding: 0; font-weight: inherit; }
pre.code {
  font-size: 0.82rem; line-height: 1.6; padding: 0.85rem 1rem 0.9rem; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 0 6px 6px 6px; box-shadow: 4px 4px 0 var(--shadow);
}
article > pre.code, section > pre.code, .chapter-intro > pre.code { border-radius: 6px; margin: 1.4rem 0; }
pre.terminal {
  font-size: 0.8rem; line-height: 1.55; padding: 0.85rem 1rem 0.9rem;
  background: var(--term); color: var(--term-ink); border-radius: 0 6px 6px 6px; box-shadow: 4px 4px 0 var(--shadow);
  scrollbar-color: var(--graphite) var(--term);
}
.terminal .prompt { color: var(--signal); font-weight: 700; }
.terminal .command { color: var(--term-muted); font-weight: 500; }
/* Pygments tokens: ink, not a rainbow (keywords weigh more, strings take rust, comments recede). */
.code .k, .code .kn, .code .kc, .code .kd, .code .kr, .code .kp, .code .kt, .code .ow { font-weight: 600; color: var(--ink); }
.code .s, .code .s1, .code .s2, .code .sa, .code .sb, .code .sc, .code .sd, .code .se, .code .sh, .code .si, .code .sr, .code .ss, .code .sx, .code .dl { color: var(--rust); }
.code .se, .code .si { font-weight: 600; }
.code .c, .code .c1, .code .cm, .code .ch, .code .cs, .code .cp, .code .cpf { color: var(--graphite); font-style: normal; }
.code .m, .code .mi, .code .mf, .code .mh, .code .mo, .code .mb, .code .il { color: var(--ink); font-weight: 500; }
.code .nb, .code .bp { color: var(--ink); font-weight: 500; }
.code .nf, .code .fm, .code .nc, .code .nn, .code .nd, .code .ne, .code .n, .code .nv, .code .na { color: var(--ink); }
.code .nd { color: var(--signal-deep); }
.code .p, .code .o { color: #3a3e3c; }
.code .w { color: inherit; }
.code .err { color: var(--signal-deep); }

/* ---------------------------------------------------------------- checks */
aside.check {
  margin: 1.6rem 0 1.8rem; padding: 0.8rem 1.1rem 0.9rem 1.35rem; background: var(--card);
  border: 1.2px solid var(--ink); border-radius: 6px; box-shadow: inset 4px 0 0 var(--signal), 4px 4px 0 var(--shadow);
  font: 0.98rem/1.55 var(--text); hyphens: none;
}
aside.check p { margin: 0 0 0.5rem; }
aside.check .check-label { font: 700 0.7rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); margin-bottom: 0.3rem; }
.check-a summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; list-style: none;
  font: 700 0.7rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 3px; padding: 0.4rem 0.6rem;
}
.check-a summary::-webkit-details-marker { display: none; }
.check-a summary::before { content: '+'; color: var(--signal-deep); font-size: 0.95rem; }
.check-a[open] summary::before { content: '\2212'; }
.check-a[open] summary { margin-bottom: 0.6rem; background: var(--ink); color: var(--term-ink); }
.check-a[open] summary::before { color: var(--signal); }
.check-a p { margin: 0; padding-top: 0.6rem; border-top: 1px dashed var(--alloy); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; margin: 1.4rem 0 1.6rem; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 4px; }
table { width: 100%; border-collapse: collapse; font: 0.88rem/1.45 var(--text); font-variant-numeric: lining-nums tabular-nums; hyphens: none; }
thead th { font: 700 0.66rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); text-align: left; padding: 0 0.8rem 0.45rem 0; border-bottom: 1.5px solid var(--ink); vertical-align: bottom; }
tbody td { padding: 0.45rem 0.8rem 0.45rem 0; border-bottom: 1px solid var(--fog); vertical-align: top; text-align: left; }
tbody tr:last-child td { border-bottom: 1.5px solid var(--ink); }
td code { background: none; padding: 0; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 720px) {
  table.rows, table.rows tbody, table.rows tr, table.rows td { display: block; }
  table.rows thead { display: none; }
  table.rows { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
  table.rows tr { padding: 0.7rem 0 0.8rem; border-bottom: 1px solid var(--fog); display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
  table.rows tr:last-child { border-bottom: 0; }
  table.rows td { padding: 0; border: 0 !important; min-width: 0; }
  table.rows td::before { content: attr(data-label); display: block; font: 700 0.6rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); margin-bottom: 0.1rem; }
  table.rows td:first-child { grid-column: 1 / -1; font: 800 1.02rem/1.25 var(--display); }
  table.rows td:first-child::before { content: ''; width: 2rem; height: 3px; background: var(--signal); margin-bottom: 0.4rem; }
  table.rows td code { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- closing sections */
section.summary > p:first-of-type { font-size: 1.08em; }
section.further-reading { margin-top: 3rem; padding-top: 0.4rem; border-top: 1.5px solid var(--ink); font: 0.95rem/1.55 var(--text); }
section.further-reading .sec-head { margin-top: 1rem; }
section.further-reading h2 { font-size: 1.2rem; }
section.further-reading li::before { background: var(--signal) !important; }
.xref { font-style: italic; }
section.map table td:last-child, section.map table th:last-child { text-align: right; padding-right: 0; }
section.map table td:last-child { font: 700 0.78rem/1.45 var(--mono); white-space: nowrap; }

/* ---------------------------------------------------------------- watch lane */
.lane-watch { padding-top: 0.5rem; }
.lane-watch .lane-title { margin-top: 2rem; }
.lane-playlist { margin: -0.4rem 0 1.4rem; }
.lessons { list-style: none; margin: 0; padding: 0; counter-reset: none; display: grid; gap: 0; max-width: var(--measure); }
.lessons .lesson { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--fog); }
.lessons .lesson:last-child { border-bottom: 1px solid var(--fog); }
.lesson-num { margin: 0 0 0.2rem; font: 700 0.68rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-deep); }
.lesson-title { font: 800 1.2rem/1.2 var(--display); letter-spacing: -0.01em; margin: 0 0 0.35rem; }
.lesson-idea { font: 0.95rem/1.5 var(--text); color: #2b2f2e; margin: 0; }
.lessons.with-media { max-width: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 2rem 1.6rem; }
.lessons.with-media .lesson { display: block; padding: 0; border: 0; }
.frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 6px; overflow: hidden; box-shadow: 4px 4px 0 var(--shadow); margin-bottom: 0.8rem; }
.frame iframe, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--ink); }

/* ---------------------------------------------------------------- pager */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 4rem 0 1rem; padding-top: 1.4rem; border-top: 1.5px solid var(--ink); }
.pager a, .pager-coming { display: block; text-decoration: none; padding: 0.9rem 1rem 1rem; border: 1.2px solid var(--ink); border-radius: 6px; background: var(--card); box-shadow: 4px 4px 0 var(--shadow); }
.pager a:hover { box-shadow: 4px 4px 0 var(--signal); color: var(--ink); }
.pager-next { text-align: right; grid-column: 2; }
.pager-coming { border-style: dashed; border-color: var(--alloy); box-shadow: none; background: transparent; color: var(--graphite); }
.pager-coming .badge { margin-top: 0.5rem; }
.pager-k { display: block; font: 700 0.68rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-deep); margin-bottom: 0.25rem; }
.pager-coming .pager-k { color: var(--graphite); }
.pager-t { display: block; font: 800 1.08rem/1.2 var(--display); letter-spacing: -0.01em; }
.pager-back { font: 0.92rem var(--text); margin: 1.2rem 0 0; }
@media (max-width: 640px) {
  .pager { grid-template-columns: 1fr; }
  .pager-next { grid-column: 1; text-align: left; }
  .pager-empty { display: none; }
}

/* ---------------------------------------------------------------- index pages */
.index-page { max-width: calc(52rem + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.idx-head { padding: 3rem 0 1.5rem; }
.idx-title { font: 800 clamp(2.3rem, 1.3rem + 3.8vw, 3.8rem)/1.02 var(--display); letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.idx-title::after { content: ''; display: block; width: 3.4rem; height: 4px; margin: 1rem 0 0; background: var(--signal); }
.idx-lead { font-size: 1.15em; line-height: 1.55; margin: 1.3rem 0 0.8rem; max-width: 40rem; }
.idx-lanes { font: 0.95rem/1.5 var(--text); color: var(--graphite); max-width: 40rem; }
.part { margin: 2.4rem 0 0; }
.part-title { font: 800 1.35rem/1.2 var(--display); letter-spacing: -0.015em; margin: 0 0 0.6rem; padding-bottom: 0.6rem; border-bottom: 1.5px solid var(--ink); }
.part-k { display: block; font: 700 0.7rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); margin-bottom: 0.25rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 0.3rem 1rem; align-items: start; padding: 0.85rem 0; border-bottom: 1px solid var(--fog); }
.row-id { font: 700 0.72rem/1.9 var(--mono); letter-spacing: 0.06em; color: var(--graphite); }
.row-main { min-width: 0; }
.row-title { font: 800 1.12rem/1.25 var(--display); letter-spacing: -0.01em; text-decoration: none; display: inline-flex; gap: 0.55rem; }
a.row-title { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.row-num { color: var(--signal-deep); min-width: 1.3rem; }
.row-idea { font: 0.95rem/1.5 var(--text); color: #2b2f2e; margin: 0.4rem 0 0.4rem; }
.row-meta { font: 0.82rem/1.5 var(--text); color: var(--graphite); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.row.coming .row-title { color: var(--graphite); font-weight: 700; }
.row.coming .row-num { color: var(--alloy); }
.row.coming { padding: 0.55rem 0; }
.row.coming .badge { margin-top: 0.15rem; }
.lane-icons { list-style: none; margin: 0.1rem 0 0; padding: 0; display: flex; gap: 0.35rem; }
.lane-icons li { font: 700 0.64rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.32rem 0.45rem; border-radius: 3px; }
.lane-icons li.on { background: var(--ink); color: var(--term-ink); }
.lane-icons li.on::before { content: ''; display: inline-block; width: 0.38rem; height: 0.38rem; background: var(--signal); margin-right: 0.35rem; vertical-align: 0.05rem; }
.lane-icons li.off { border: 1px dashed var(--alloy); color: var(--graphite); }
@media (max-width: 640px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row-id { grid-column: 1 / -1; line-height: 1.2; }
  .row-main { grid-column: 1 / -1; }
  .lane-icons { grid-column: 1 / -1; }
  .row.coming .row-id { grid-column: 1; }
  .row.coming .badge { grid-row: 1; grid-column: 2; justify-self: end; margin-top: 0; }
}

.book-cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.2rem; }
.book-card { border: 1.2px solid var(--ink); border-radius: 6px; padding: 1rem 1.1rem 1.1rem; background: var(--card); box-shadow: 4px 4px 0 var(--shadow); }
.book-card.live { grid-column: 1 / -1; box-shadow: 4px 4px 0 var(--signal); }
.book-card.planned { background: transparent; border-style: dashed; border-color: var(--alloy); box-shadow: none; }
.book-k { font: 700 0.7rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); margin: 0 0 0.4rem; }
.book-title { font: 800 1.25rem/1.2 var(--display); letter-spacing: -0.015em; margin: 0 0 0.5rem; }
.book-card.live .book-title { font-size: 1.8rem; }
.book-card.planned .book-title { color: var(--graphite); }
.book-lead { margin: 0 0 0.6rem; }
.book-meta { font: 0.85rem/1.4 var(--text); color: var(--graphite); margin: 0; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 640px) {
  body { font-size: 1.0625rem; line-height: 1.6; }
  .sec-head { margin-top: 2.4rem; }
  section.section h2 { font-size: 1.4rem; gap: 0.6rem; }
  .sec-num { font-size: 0.92rem; min-width: 2.4rem; margin-top: 0.12rem; }
  .here { gap: 0.6rem; }
  .here-label { width: 5.4rem; font-size: 0.6rem; }
  .lanes-note { display: none; }
  .lanes-switch a { padding-right: 1rem; }
  pre.code, pre.terminal { font-size: 0.76rem; margin-left: calc(-1 * var(--gutter) + 4px); margin-right: calc(-1 * var(--gutter) + 4px); }
  figure figcaption { margin-left: calc(-1 * var(--gutter) + 4px) !important; }
  aside.check { padding: 0.75rem 0.9rem 0.85rem 1.15rem; }
  section.inthis { padding: 0.4rem 1rem 0.5rem; }
  .idx-head { padding-top: 2rem; }
}

/* ---------------------------------------------------------------- Watch card (a micro-lesson at the start of its section) */
.watch-cards { display: grid; gap: 0.8rem; margin: -0.2rem 0 1.4rem; }
.watch-card {
  display: grid; grid-template-columns: minmax(8.5rem, 13rem) 1fr; gap: 0.9rem; align-items: center;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: inset 0 3px 0 var(--signal), 4px 4px 0 var(--shadow);
  padding: 0.75rem 0.9rem 0.7rem 0.75rem; max-width: 34rem;
}
.watch-card.playing { grid-template-columns: 1fr; max-width: none; }
.watch-media { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 4px; overflow: hidden; }
.watch-media img, .watch-media iframe, .watch-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.yt { display: block; position: absolute; inset: 0; }
.yt-play {
  position: absolute; left: 50%; top: 50%; width: 2.9rem; height: 2rem; margin: -1rem 0 0 -1.45rem;
  background: var(--signal); border-radius: 6px; box-shadow: 2px 2px 0 var(--ink); transition: transform 0.12s;
}
.yt-play::after { content: ''; position: absolute; left: 1.1rem; top: 0.55rem; border-style: solid; border-width: 0.45rem 0 0.45rem 0.78rem; border-color: transparent transparent transparent #fff; }
.yt:hover .yt-play, .yt:focus-visible .yt-play { transform: scale(1.08); background: var(--signal-deep); }
.watch-text { min-width: 0; }
.watch-k { margin: 0 0 0.25rem; font: 700 0.68rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); }
.watch-k::before { content: ''; display: inline-block; width: 0.42rem; height: 0.42rem; background: var(--signal); margin-right: 0.45rem; vertical-align: 0.05rem; }
.watch-dur { color: var(--graphite); letter-spacing: 0.08em; }
.watch-title { margin: 0 0 0.2rem; font: 800 1.08rem/1.2 var(--display); letter-spacing: -0.01em; hyphens: none; text-align: left; }
.watch-title a { text-decoration: none; }
.watch-title a:hover { text-decoration: underline; text-decoration-color: var(--signal); }
.watch-n { margin: 0; font: 600 0.66rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.chapter-page article > .watch-cards { margin: 0 0 1.6rem; }
@media (max-width: 640px) {
  .home { flex-basis: 100%; border-right: 0; padding-right: 0; }
  .watch-card { grid-template-columns: 7.6rem 1fr; gap: 0.75rem; padding: 0.6rem 0.7rem 0.6rem 0.6rem; }
  .watch-title { font-size: 0.98rem; }
  .yt-play { width: 2.3rem; height: 1.6rem; margin: -0.8rem 0 0 -1.15rem; }
  .yt-play::after { left: 0.86rem; top: 0.44rem; border-width: 0.36rem 0 0.36rem 0.62rem; }
}

@media print {
  .bar, .lanes-switch, .toc-side, .toc-inline, .pager, .pager-back, .copy, .foot, .lane-watch, .watch-cards { display: none !important; }
  .term-card { display: none !important; }
}

/* whole-book PDF download on the book page */
.idx-head .ch-actions { margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.idx-pdf-note { font: 0.9rem var(--text); color: var(--graphite); }

/* ---------------------------------------------------------------- cheat sheet (the PDF's closing card) */
.cheat { margin: 3rem 0 1rem; padding: 1.4rem 1.4rem 1.2rem; background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--shadow); }
.cs-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink); position: relative; }
.cs-top::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 3.2rem; height: 4px; background: var(--signal); }
.cs-kicker { margin: 0 0 0.3rem; font: 700 0.68rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); }
.cs-heading { margin: 0; font: 800 clamp(1.9rem, 6vw, 2.6rem)/0.95 var(--display); letter-spacing: -0.03em; }
.cs-whole { display: block; flex: none; width: min(16rem, 45%); height: auto; }
.cs-block { margin-top: 1.4rem; }
.cs-label { margin: 0 0 0.6rem; font: 700 0.68rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.cs-label span { color: var(--graphite); letter-spacing: 0.08em; }
.cs-secs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.5rem; }
.cs-secs a { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.2rem 0.5rem; height: 100%; padding: 0.55rem 0.6rem 0.5rem; border: 1px dashed var(--alloy); border-radius: 4px; color: inherit; text-decoration: none; }
.cs-secs a:hover, .cs-secs a:focus-visible { border-style: solid; border-color: var(--signal); background: var(--paper); }
.cs-num { font: 700 0.72rem/1.3 var(--mono); color: var(--signal-deep); }
.cs-title { font: 600 0.88rem/1.3 var(--text); }
.cs-map { grid-column: 1 / -1; display: block; width: 100%; height: auto; margin-top: 0.3rem; }
.cs-terms { margin: 0; columns: 2 18rem; column-gap: 1.6rem; }
.cs-pair { break-inside: avoid; padding: 0.45rem 0; border-top: 1px dashed var(--alloy); }
.cs-pair dt { font: 700 0.86rem/1.3 var(--text); }
.cs-pair dd { margin: 0.15rem 0 0; font: 400 0.84rem/1.45 var(--text); color: var(--graphite); }
@media (max-width: 640px) {
  .cheat { padding: 1rem 0.9rem; margin-left: -0.25rem; margin-right: -0.25rem; }
  .cs-top { flex-direction: column; align-items: flex-start; }
  .cs-whole { width: 100%; max-width: 18rem; }
}
@media print { .cheat { box-shadow: none; break-before: page; } }

/* ---------------------------------------------------------------- community invitation */
.join { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem 1.4rem; flex-wrap: wrap; margin: 0 0 1.8rem; padding: 0.95rem 1.1rem; background: var(--signal); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); }
.join-text { flex: 1 1 22rem; margin: 0; font: 400 0.98rem/1.45 var(--text); hyphens: none; text-align: left; }
.join-text strong { font-weight: 600; }
.join-btn { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1rem; background: var(--ink); color: var(--term-ink); border-radius: 4px; font: 700 0.78rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.join-btn:hover, .join-btn:focus-visible { background: var(--paper); color: var(--ink); outline: 2px solid var(--ink); outline-offset: 0; }
@media (max-width: 640px) { .join-btn { width: 100%; justify-content: center; } }
@media print { .join { display: none; } }