/* Shared styles for the chapter pages (chapter-01.html, chapter-02.html, …). */
:root {
  --teal: var(--accent);
  --teal-light: var(--accent);
  --yellow: var(--accent-2);
  --grey: var(--muted);
  --ink: var(--text);
}

* { box-sizing: border-box; }
body { margin: 0; background: #fff; overflow-x: clip; font-family: var(--sans); color: var(--text); }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; font-weight: inherit; }

/* Shared helpers (as on the home page) */
.a { position: absolute; }
img.f { display: block; max-width: none; width: 100%; height: 100%; }
img.fa { position: absolute; inset: 0; display: block; max-width: none; width: 100%; height: 100%; }

/* ---------- Navigation (same as the home page) ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 10; background: rgba(255,255,255,.8); }
.nav-inner { position: relative; width: 1440px; height: 73px; margin: 0 auto; }
.nav-item { position: absolute; top: 23px; display: block; color: var(--grey); font-weight: 500; font-size: 12px; text-align: center; }
.nav-item span { position: absolute; white-space: nowrap; }
.nav-item i { position: absolute; left: 50%; right: 50%; top: calc(100% + 5px); height: 2px; background: var(--yellow); border-radius: 1px; transition: left .3s, right .3s; }
.nav-item:hover i, .nav-item:focus-visible i { left: 0; right: 0; }

/* ---------- Chapter pages: 1440 × 840 compositions (fit.js zooms them on narrower screens) ---------- */
.chapter { position: relative; width: 1440px; height: 840px; margin: 0 auto; overflow: clip; }
.chapter > * { position: absolute; }

/* Back to the journey: a small round button in the left margin, level with the chapter number.
   On hover/focus it widens to "← JOURNEY" and the chapter number slides right by the same amount
   (92px − 28px), then both settle back. */
.back { position: absolute; left: 24px; top: 87px; width: 28px; height: 28px; padding: 0 0 0 7px; display: flex; align-items: center; gap: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 14px; background: rgba(255,255,255,.9); color: var(--teal);
  font-weight: 500; font-size: 10px; letter-spacing: 1px; white-space: nowrap; overflow: hidden;
  transition: width .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.back svg { flex: none; width: 12px; height: 9px; }
.back span { opacity: 0; transition: opacity .3s ease; }
.back:hover, .back:focus-visible { width: 92px; border-color: var(--yellow); box-shadow: 0 2px 10px rgba(10,71,73,.12); }
.back:hover span, .back:focus-visible span { opacity: 1; }
.crumb { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.back:hover ~ .crumb, .back:focus-visible ~ .crumb { transform: translateX(64px); }

/* Every chapter shares one header rhythm and one content edge. The compositions were drawn with
   a 120px left margin; shifting them 40px left balances the page now that the back button sits in
   the margin. Elements marked .full (edge bars, bands, page links) keep their own positions. */
.chapter > *:not(.full) { margin-left: -40px; }
.crumb { left: 120px; top: 94px; font-weight: 500; font-size: 11px; letter-spacing: 1px; color: var(--teal-light); white-space: pre; margin: 0; }
.label { font-weight: 800; font-size: 16px; letter-spacing: 1px; color: var(--teal-light); white-space: nowrap; }
.pager { font-weight: 500; font-size: 12px; letter-spacing: 1px; color: var(--teal); white-space: nowrap; }
.pager.prev { left: 80px; }
.pager.next { right: 80px; }
.pager[aria-disabled="true"] { cursor: default; }

/* Underline links like the rest of the site: a yellow line grows from the centre. */
.ul { display: inline-block; }
.ul::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -5px; height: 1px; background: var(--yellow); transition: left .3s, right .3s; }
a.ul[href]:hover::after, a.ul[href]:focus-visible::after { left: 0; right: 0; }

/* Gentle entrance, staggered by --d (ms). */
.in { opacity: 0; translate: 0 14px; animation: rise .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes rise { to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .in { animation: none; opacity: 1; translate: none; } }

/* ---------- Light chapters (03–07), white like chapter 01 ---------- */
body.paper, .paper .chapter { background: #fff; }
.card { background: #fff; border-radius: 6px; box-shadow: 0 0 4px rgba(222,216,210,.4); }
.w3 { font-weight: 300; } .w4 { font-weight: 400; } .w5 { font-weight: 500; } .w6 { font-weight: 600; } .w7 { font-weight: 700; } .w8 { font-weight: 800; }
.it { font-style: italic; } .nw { white-space: nowrap; } .pre { white-space: pre-wrap; } .ctr { text-align: center; }
.c-ink { color: var(--text); } .c-grey { color: var(--muted); } .c-teal { color: var(--accent); } .c-tl { color: var(--accent); } .c-white { color: #fff; }
.hl { font-weight: 500; color: var(--accent); }            /* teal highlighted phrase inside body copy */
.photo { overflow: hidden; }
.photo img { position: absolute; max-width: none; pointer-events: none; }
.photo img.cover { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.badge { width: 28px; height: 28px; border-radius: 4px; background: var(--accent); }
.pager.light { color: #fff; }
.bar { transform-origin: bottom; animation: grow 1.1s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .bar { animation: none; } }

/* Readability: light weights are thin at small sizes, so small grey copy (≤13px) gets a touch more weight. */
.chapter .small, .chapter .quote, .chapter .note, .chapter .stat span { font-weight: 360; }

/* Stat cards: a number, what it measures, and a short note. A grid, so text never spills past its card. */
.stat-grid { display: grid; gap: 12px; }
.stat-card { position: relative; padding: 14px 14px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overflow: hidden; }
.stat-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.stat-card .v { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1; color: var(--accent); white-space: nowrap; }
.stat-card .k { margin-top: 6px; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--ink); }
.stat-card .n { margin-top: 2px; font-weight: 300; font-size: 11px; line-height: 14px; color: var(--muted); }
.stat-grid.compact { gap: 10px; }
.stat-grid.compact .stat-card { padding: 11px 12px 10px; }
.stat-grid.compact .v { font-size: 28px; }
.stat-grid.compact .k { margin-top: 5px; font-size: 11px; line-height: 14px; }
.stat-grid.compact .n { font-size: 10px; line-height: 13px; }