/* Layout: a night-sky title that dawns into chart paper; each chapter is text on the left with its
   drawing pinned on the right (on top, on a phone), drawing itself as the reader moves through the text. */
:root {
  --paper: #EFEDE5;
  --card: #F8F6EF;
  --grid: rgba(64, 104, 122, .09);
  --night: #0E1824;
  --night-2: #1B2D42;
  --ink: #1D2430;
  --ink-2: #474D57;
  --muted: #7D807C;
  --brass: #A47A2A;
  --red: #B2382C;
  --parch: #ECE3CB;
  --display: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --body: "Literata", "Iowan Old Style", Georgia, serif;
  --hand: "Kalam", "Bradley Hand", "Segoe Print", cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 19px; line-height: 1.7;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; background-attachment: fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; }

/* ---------- top bar ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--night); }
#topbar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; height: 54px; color: var(--parch); transition: background .3s, color .3s, box-shadow .3s; }
#topbar.solid { background: rgba(239, 237, 229, .94); color: var(--ink); box-shadow: 0 1px 0 rgba(29, 36, 48, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#topbar .mark { font-family: var(--display); font-variant-caps: all-small-caps; font-size: 17px; letter-spacing: .04em; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#toc-btn { font: 500 15px/1 var(--body); color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 8px 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
#toc-btn svg { width: 15px; height: 15px; }
#readbar { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 54px); height: 2px; z-index: 21; pointer-events: none; }
#readbar i { display: block; height: 100%; background: var(--brass); transform-origin: 0 50%; transform: scaleX(0); }
#toc { position: fixed; z-index: 25; top: calc(env(safe-area-inset-top, 0px) + 62px); right: max(16px, env(safe-area-inset-right, 0px)); width: min(340px, calc(100vw - 32px));
  background: var(--card); color: var(--ink); border: 1px solid rgba(29, 36, 48, .12); border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(14, 24, 36, .45); padding: 10px; }
#toc ol { list-style: none; margin: 0; padding: 0; counter-reset: c; }
#toc a { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-size: 16px; line-height: 1.35; }
#toc a:hover { background: rgba(164, 122, 42, .1); }
#toc a.here { background: rgba(164, 122, 42, .16); }
#toc a span { font-family: var(--display); font-variant-caps: all-small-caps; color: var(--brass); font-size: 15px; }

/* ---------- title ---------- */
.hero { position: relative; min-height: 100svh; color: var(--parch); overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 62%, #4A4A5C 80%, #B58F6E 92%, var(--paper) 100%); }
#stars { position: absolute; inset: 0; width: 100%; height: 75%; pointer-events: none; }
.hero-in { position: relative; max-width: 1240px; margin: 0 auto; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: 24px; padding-block: 96px 120px; }
.eyebrow { font-family: var(--display); font-variant-caps: all-small-caps; font-size: 15px; letter-spacing: .16em; color: var(--brass); margin: 0 0 18px; }
.hero .eyebrow { color: #D4AE62; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(46px, 6.4vw, 92px); line-height: .98; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.hero h1 em { color: #E3BE6E; }
.hero .sub { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; max-width: 30rem; margin: 26px 0 30px; color: #CFC7B2; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 16px; color: #CFC7B2; }
.byline b { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--parch); }
#hero-art { width: 100%; max-width: 640px; height: auto; aspect-ratio: 1; justify-self: center; overflow: visible; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); }
.cue { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--hand); font-size: 18px; color: #3A3F4A; text-decoration: none; }
.cue svg { width: 18px; height: 34px; }
.cue path { stroke: currentColor; stroke-dasharray: 3 5; animation: cue 1.6s linear infinite; }
@keyframes cue { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .cue path { animation: none; } }

/* ---------- chapters ---------- */
.chapter { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-block: 8vh 4vh; }
.figure { grid-column: 2; grid-row: 1; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 70px); height: calc(100svh - 100px); align-self: start;
  display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.figure svg.art { width: 100%; max-height: min(640px, calc(100svh - 150px)); aspect-ratio: 1; overflow: visible; }
.figure figcaption { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.4; }
.steps { grid-column: 1; grid-row: 1; min-width: 0; }
.step { min-height: 62svh; padding-block: 4vh; display: flex; flex-direction: column; justify-content: center; }
.step:first-child { min-height: 70svh; }
.step:last-child { min-height: 80svh; }
.step p { margin: 0 0 1em; }
.step p:last-child { margin-bottom: 0; }
.chapter h2 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.04; margin: 0 0 24px; text-wrap: balance; }
.chapter .eyebrow { display: flex; align-items: center; gap: 10px; }
.chapter .eyebrow svg { width: 26px; height: 26px; flex: none; }
.lede { font-size: 1.16em; line-height: 1.55; color: var(--ink); }
.say { font-family: var(--display); font-style: italic; font-size: 1.32em; line-height: 1.4; color: var(--ink); border-left: 2px solid var(--brass); padding-left: 18px; }
.step p:not(.lede):not(.say) { color: var(--ink-2); }
.step ol.reasons { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 4px; }
blockquote.capek { margin: 18px 0 0; padding: 18px 20px; background: var(--card); border-radius: 10px; border: 1px solid rgba(29, 36, 48, .08); }
blockquote.capek p { font-family: var(--display); font-style: italic; font-size: 1.15em; line-height: 1.45; color: var(--ink) !important; margin: 0 0 6px; }
blockquote.capek cite { font-style: normal; font-size: 14px; letter-spacing: .08em; color: var(--muted); font-family: var(--display); font-variant-caps: all-small-caps; }
.hint { font-family: var(--hand); font-size: 17px; color: var(--muted); margin-top: 10px !important; }

/* ---------- drawings ---------- */
.st { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.st.ink { stroke: var(--ink); }
.st.red { stroke: var(--red); }
.st.brass { stroke: var(--brass); }
.st.pencil { stroke: #8F8B7F; }
.st.sea { stroke: #4D7E95; }
.st.route { stroke: #2F6DAE; }
.st.wood { stroke: #6B4A2B; }
.st.chalk { stroke: #EEECE4; }
.st.chalk-y { stroke: #F6D46B; }
.st.marker { stroke: #F3D458; stroke-linecap: butt; opacity: .7; }
.st.goldline { stroke: #F2C14E; opacity: .5; }
.nss { vector-effect: non-scaling-stroke; }
.w-face { fill: #F6EFDA; } .w-face-night { fill: #1C2C41; }
.w-brass { fill: #D8B566; } .w-brass-l { fill: #E9D7A3; } .w-dark { fill: #3B3429; } .w-hi { fill: #C4532F; }
.w-sea { fill: #A8C5D2; } .w-sage { fill: #B8C9A1; } .w-white { fill: #FBFAF6; } .w-red { fill: var(--red); } .w-ink { fill: var(--ink); }
.w-board { fill: #27312D; } .w-bulb { fill: #F6D15E; } .w-marker { fill: #F4D85E; } .w-card { fill: #F8F4E8; } .w-tape { fill: rgba(226, 214, 178, .8); } .w-map { fill: #F4EFDE; }
.w-g1 { fill: #A8C5D2; } .w-g2 { fill: #B8C9A1; } .w-g3 { fill: #E6CF8E; } .w-g4 { fill: #B9B0D4; } .w-g5 { fill: #E2A898; }
svg text { font-family: var(--hand); fill: var(--ink); }
svg .hand.red { fill: var(--red); } svg .muted { fill: var(--muted); } svg .brass-t { fill: var(--brass); } svg .chalk-t { fill: #EEECE4; }
svg .fell { font-family: var(--display); fill: var(--ink); } svg .north { fill: var(--red); }
svg .cap { font-family: var(--body); font-weight: 600; letter-spacing: .14em; fill: var(--muted); }
svg .bib { font-family: var(--body); fill: var(--ink); }
svg .reason { font-weight: 700; }
svg .tip { font-family: var(--hand); font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; opacity: 0; transition: opacity .15s; pointer-events: none; }
svg .tip.on { opacity: 1; }
svg .hit { fill: transparent; cursor: help; }
svg .dim { fill: #000; }
.n-north { fill: var(--red); } .n-south { fill: #2B2B2B; } .n-line { stroke: rgba(0, 0, 0, .25); stroke-width: 1; } .n-pivot { fill: #D8B566; stroke: var(--ink); stroke-width: 1.5; }
.flame { transform-origin: 456px 111px; animation: flick 2.3s ease-in-out infinite; }
@keyframes flick { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(.94, 1.07) rotate(-2deg); } 60% { transform: scale(1.04, .95) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .flame { animation: none; } }
/* The title compass, on the night sky. */
.on-night .st.ink { stroke: #E9E1CC; } .on-night .st.brass { stroke: #D9AE58; }
.on-night .fell { fill: #EADFC2; } .on-night .north { fill: #E46A52; }
.on-night .w-dark { fill: #0A111A; } .on-night .w-brass { fill: #C99A45; } .on-night .w-brass-l { fill: #7E6230; }
.on-night .n-south { fill: #E9E1CC; } .on-night .n-north { fill: #E05A43; }

/* ---------- close ---------- */
.close { max-width: 1040px; margin: 0 auto; padding-block: 12vh 8vh; }
.close blockquote { margin: 0 auto 10vh; max-width: 900px; text-align: center; }
.close blockquote p { font-family: var(--display); font-size: clamp(30px, 3.8vw, 50px); line-height: 1.18; margin: 0 0 22px; text-wrap: balance; }
.close blockquote cite { font-style: normal; font-family: var(--display); font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--brass); font-size: 16px; }
.close h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.6vw, 48px); margin: 0 0 8px; }
.close .intro { color: var(--ink-2); max-width: 36rem; margin: 0 0 28px; }
.qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.qs li { background: var(--card); border: 1px solid rgba(29, 36, 48, .09); border-radius: 12px; padding: 20px 22px 22px; display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: start; }
.qs .pt { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--brass); display: grid; place-items: center; font-family: var(--display); font-size: 22px; color: var(--brass); }
.qs .pt.n { color: var(--red); border-color: var(--red); }
.qs h3 { margin: 0; font-family: var(--display); font-variant-caps: all-small-caps; font-weight: 400; font-size: 15px; letter-spacing: .1em; color: var(--muted); }
.qs p { margin: 0; font-size: 18px; line-height: 1.5; }
.get { margin-top: 10vh; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; padding: 28px; border-radius: 14px; background: var(--night); color: var(--parch); }
.get h2 { color: var(--parch); font-size: clamp(28px, 3vw, 38px); }
.get p { margin: 0; color: #C9C2AE; font-size: 17px; }
.get .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; font: 600 16px/1 var(--body); text-decoration: none; background: #D8B566; color: var(--night); }
.btn.ghost { background: transparent; color: var(--parch); border: 1px solid rgba(236, 227, 203, .5); }
.btn svg { width: 17px; height: 17px; }
footer { max-width: 1040px; margin: 0 auto; padding-block: 6vh 8vh; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 14px; color: var(--muted); border-top: 1px solid rgba(29, 36, 48, .12); }

/* ---------- the booklet: A5 pages, printed from this same page (tools/pdf.py) ---------- */
.back { display: none; }
@page { size: A5; margin: 15mm 14mm 17mm; @bottom-center { content: counter(page); font: 9pt "EB Garamond", Georgia, serif; color: #7D807C; } }
@page cover { margin: 0; @bottom-center { content: none; } }
@media print {
  html, body { font-size: 10.4pt; line-height: 1.55; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::before, #topbar, #readbar, #toc, .cue, .hint, .get, footer { display: none !important; }
  .wrap { padding-left: 0; padding-right: 0; }
  .hero { page: cover; height: 210mm; min-height: 0; break-after: page; }
  #stars { height: 70%; }
  .hero-in { min-height: 0; height: 210mm; grid-template-columns: 1fr; align-content: center; gap: 2mm; padding: 14mm 14mm 22mm; }
  #hero-art { order: -1; width: 92mm; max-width: none; filter: none; }
  .hero .eyebrow { font-size: 8.5pt; margin-bottom: 4mm; }
  .hero h1 { font-size: 30pt; }
  .hero .sub { font-size: 11.5pt; margin: 5mm 0 6mm; }
  .byline { font-size: 9.5pt; } .byline b { font-size: 14pt; }
  .chapter { display: block; max-width: none; padding: 0; break-before: page; }
  .figure { position: static; height: auto; margin: 0 0 4mm; break-inside: avoid; }
  .figure svg.art { width: 100%; max-height: 80mm; }
  p { orphans: 3; widows: 3; }
  .figure figcaption { font-size: 7.5pt; }
  .step, .step:first-child, .step:last-child { min-height: 0; padding: 0; display: block; margin: 0 0 .9em; }
  .chapter h2 { font-size: 21pt; margin: 0 0 4mm; break-after: avoid; }
  .eyebrow { font-size: 8pt; margin: 0 0 2mm; }
  .chapter .eyebrow svg { width: 13pt; height: 13pt; }
  .say { font-size: 1.2em; padding-left: 4mm; break-inside: avoid; }
  .lede { font-size: 1.08em; }
  blockquote.capek { padding: 3mm 4mm; break-inside: avoid; }
  .close { max-width: none; padding: 0; break-before: page; }
  .close blockquote { margin: 0 0 6mm; }
  .close blockquote p { font-size: 15pt; margin-bottom: 3mm; }
  .close blockquote cite { font-size: 9pt; }
  .close h2 { font-size: 19pt; }
  .close .intro { margin-bottom: 3.5mm; font-size: 9.6pt; }
  .qs { grid-template-columns: 1fr; gap: 2.2mm; }
  .qs li { padding: 2.6mm 4mm; grid-template-columns: 9mm 1fr; gap: 1mm 3mm; break-inside: avoid; }
  .qs .pt { width: 9mm; height: 9mm; font-size: 12pt; }
  .qs h3 { font-size: 8.5pt; } .qs p { font-size: 10pt; }
  .back { display: flex; page: cover; break-before: page; height: 210mm; flex-direction: column; align-items: center; justify-content: center; gap: 6mm; text-align: center; padding: 20mm; }
  .back svg { width: 34mm; height: 34mm; }
  .back p { margin: 0; max-width: 90mm; font-family: var(--display); font-size: 13pt; line-height: 1.35; }
  .back small { font-family: var(--display); font-variant-caps: all-small-caps; letter-spacing: .12em; font-size: 10pt; color: var(--muted); }
  /* Printing at home: a paper cover in place of the night sky. */
  .light .hero { background: #fff; color: var(--ink); }
  .light #stars { display: none; }
  .light .w-face-night { fill: #F6EFDA; }
  .light .hero .eyebrow, .light .hero h1 em { color: var(--brass); }
  .light .hero .sub, .light .byline { color: var(--ink-2); } .light .byline b { color: var(--ink); }
}

/* ---------- Deel 2 and the series ---------- */
.st.roadbed { stroke: #E2DACA; stroke-linecap: butt; }
.st.sage { stroke: #5E7F4A; }
.st.white-s { stroke: #FBFAF6; }
.w-red-l { fill: #E7A79C; }
svg .sage-t { fill: #5E7F4A; }
.leader { margin: 0 0 1.1em; padding: 12px 16px; border-radius: 10px; background: rgba(164, 122, 42, .09); border: 1px dashed rgba(164, 122, 42, .5);
  font-size: .86em; line-height: 1.55; color: var(--ink-2); }
.leader b { display: block; font-family: var(--display); font-variant-caps: all-small-caps; font-weight: 500; letter-spacing: .1em; color: var(--brass); font-size: 1.05em; margin-bottom: 2px; }
.snap { margin: 6px 0 0; padding: 10px 10px 12px; background: #FBFAF6; box-shadow: 0 14px 30px -18px rgba(14, 24, 36, .45); transform: rotate(-1.2deg); max-width: 300px; }
.snap img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.snap figcaption { font-family: var(--hand); font-size: 17px; color: var(--ink-2); margin-top: 6px; text-align: center; }
ol.lessons { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 6px; counter-reset: l; }
ol.lessons li { counter-increment: l; display: grid; grid-template-columns: 30px 1fr; gap: 0 10px; align-items: baseline; color: var(--ink-2); }
ol.lessons li::before { content: counter(l); font-family: var(--display); font-size: 1.2em; color: var(--brass); text-align: center; }
ol.lessons li:nth-child(-n+2)::before { color: var(--red); }
ol.lessons b { font-weight: 600; color: var(--ink); margin-right: 6px; }
.eyebrow .les { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.3px solid var(--brass); font-size: 15px; letter-spacing: 0; color: var(--brass); }
.parts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.parts li > a, .parts li > span:first-child { text-decoration: none; }
.parts li a, .parts li.here, .parts li.next { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 12px;
  background: var(--card); border: 1px solid rgba(29, 36, 48, .09); }
.parts li a:hover { border-color: var(--brass); }
.parts li.here { border-color: var(--brass); }
.parts li.next { background: transparent; border-style: dashed; color: var(--ink-2); }
.parts .pt { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--brass); display: grid; place-items: center; font-family: var(--display); font-size: 22px; color: var(--brass); }
.parts .pt.n { color: var(--red); border-color: var(--red); }
.parts b { display: block; font-weight: 600; font-size: 18px; color: var(--ink); line-height: 1.35; }
.parts li span:last-child { font-size: 16px; color: var(--ink-2); line-height: 1.45; }
@media print {
  .snap { max-width: 50mm; box-shadow: none; border: .3mm solid #ddd; break-inside: avoid; }
  .leader { font-size: 9pt; padding: 2.5mm 3.5mm; break-inside: avoid; }
  .parts li a, .parts li.here, .parts li.next { padding: 3mm 4mm; }
  .parts b { font-size: 10.5pt; } .parts li span:last-child { font-size: 9.5pt; }
  .parts .pt { width: 9mm; height: 9mm; font-size: 12pt; }
}

/* ---------- phone ---------- */
@media screen and (max-width: 880px) {
  body { font-size: 18px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); padding-block: 76px 120px; gap: 8px; }
  #hero-art { order: -1; max-width: min(78vw, 420px); }
  /* On a phone nothing is pinned: the drawing sits in the flow above its chapter and draws as it scrolls past (story.js). */
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 12vh 0; }
  .chapter + .chapter { padding-top: 14vh; }
  .figure { grid-column: 1; grid-row: 2; position: static; height: auto; padding: 0; margin: 4px 0 26px; }
  .figure svg.art { max-height: none; }
  .figure figcaption { font-size: 12px; }
  .steps { display: contents; }
  .step, .step:first-child, .step:last-child { min-height: 0; padding: 0; display: block; margin: 0 0 1em; grid-row: auto; }
  .step:first-child { grid-row: 1; }
  .qs { grid-template-columns: minmax(0, 1fr); }
  .get { grid-template-columns: minmax(0, 1fr); }
}