/* The Cold-Pressed Truth, v2: the book as a climb.
   Paper and ink like a field map; juice colours mark the three stages; lime is for the things you press. */

@property --r {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  --paper: #f3efe4;
  --paper-2: #e9e3d2;
  --card: #fbf9f3;
  --ink: #141c17;
  --ink-2: #29332d;
  --muted: #535d57;
  --line: rgba(20, 28, 23, 0.14);
  --kale: #163f29;
  --kale-2: #1f5a39;
  --on-kale: #f3efe4;
  --on-kale-muted: #b7c7ba;
  --line-kale: rgba(243, 239, 228, 0.16);
  --lime: #cff24f;
  --lime-2: #bfe43c;
  --stage-1: #2e7d4d;
  --stage-2: #e39a2d;
  --stage-3: #b3263e;
  --beet: #b3263e;
  --beet-light: #ff8a98;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  /* Chapter type (the labels in the world, the card heading, the index): a tall condensed grotesque
     close to the reference's Founders Grotesk X-Condensed. */
  --chapter: "Sofia Sans Extra Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --gutter: clamp(16px, 3vw, 32px);
  --maxw: 1180px;
  --shadow-pill: 0 1px 0 rgba(20, 28, 23, 0.06), 0 10px 26px -14px rgba(20, 28, 23, 0.6);
  --shadow-card: 0 30px 80px -30px rgba(20, 28, 23, 0.55);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #b9b2a0 var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] {
  display: none !important;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

::selection {
  background: var(--lime);
  color: var(--ink);
}

input {
  caret-color: var(--kale-2);
}

:focus-visible {
  outline: 3px solid var(--kale-2);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Places focused only so screen readers land there (a panel, the map, the card heading) aren't
   controls: no ring, and they keep their shape (the radius rounded the full-screen panels' corners). */
[tabindex="-1"]:focus-visible {
  outline: none;
  border-radius: 0;
}

.on-kale :focus-visible {
  outline-color: var(--lime);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -64px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font: 800 0.95rem/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2 * var(--gutter), 760px);
  margin-inline: auto;
}

.mono {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8em;
  letter-spacing: 0.04em;
}

.nb {
  white-space: nowrap;
}

.muted {
  color: var(--muted);
}

.on-kale .muted {
  color: var(--on-kale-muted);
}

.accent {
  color: var(--kale-2);
}

.on-kale .accent {
  color: var(--lime);
}

/* Headings in v1 markup used italic accents; Big Shoulders has no italic, so accents become colour. */
.serif-italic,
h1 em,
h2 em,
h3 em {
  font-style: normal;
  color: var(--kale-2);
}

.on-kale .serif-italic,
.on-kale h1 em,
.on-kale h2 em {
  color: var(--lime);
}

.caps {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: 0.005em;
}

/* ---------- Pills and buttons ---------- */

.pill,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 800 1rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-pill);
  transition: transform 0.25s var(--ease), background-color 0.2s, color 0.2s, box-shadow 0.25s;
}

.pill:hover,
.btn:hover {
  transform: translateY(-1px);
}

.pill:active,
.btn:active {
  transform: translateY(1px);
}

.pill svg,
.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.pill.is-active,
.pill[aria-pressed="true"],
.pill--lime,
.btn--lime {
  background: var(--lime);
  color: var(--ink);
}

.pill--ink,
.btn--ink {
  background: var(--ink);
  color: var(--paper);
}

.btn--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.on-kale .btn--ghost {
  color: var(--on-kale);
}

.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9rem;
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.pill__tick {
  width: 14px;
  height: 14px;
  opacity: 0;
  margin-right: -4px;
  transition: opacity 0.2s;
}

.pill.is-active .pill__tick {
  opacity: 1;
}

.linklike {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  font: 500 0.74rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: var(--shadow-pill);
}

.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stage-1);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font: 800 1.05rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
}

.link-arrow svg {
  width: 1em;
  height: 1em;
  transition: transform 0.25s var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* Launch phase switches. Pre-launch is the default so the HTML is right with no JS. */
html:not([data-phase="launched"]) [data-phase-show="launched"],
html[data-phase="launched"] [data-phase-show="prelaunch"] {
  display: none !important;
}

/* ---------- HUD (home) ---------- */

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px clamp(14px, 2.2vw, 28px);
}

.js .hud {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 30;
  flex-wrap: nowrap;
  padding-block: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), visibility 0s;
}

.js .hud > * {
  pointer-events: auto;
}

.js .hud--top {
  top: clamp(14px, 2.2vw, 26px);
}

/* While a chapter is open, the top pills sit above the card (it covers the screen, transparent at
   the top), or Chapter summaries and About the book can be seen but not pressed. */
.is-reading .hud--top {
  z-index: 46;
}

.js .hud--bottom {
  bottom: clamp(14px, 2.2vw, 26px);
}

/* The cover has its own call to action; the bottom bar arrives with the map. A chapter takes the corners. */
.mode-gate .hud--bottom,
.is-reading .hud--bottom {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}

.hud__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mode-explore .hud__nav .pill {
  background: var(--lime);
}

.pill--access {
  padding-left: 10px;
  background: var(--ink);
  color: var(--paper);
  transition: opacity 0.3s var(--ease), transform 0.25s var(--ease);
}

.is-reading .pill--access {
  opacity: 0;
  pointer-events: none;
}

.pill--access img {
  width: 28px;
  height: auto;
  border-radius: 2px;
  transform: rotate(-7deg);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.7);
}

.hud__date {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hud__date [data-countdown] {
  font: 500 0.74rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--card);
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-pill);
}

.hud__date [data-countdown]:empty {
  display: none;
}

.toggle {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  display: flex;
  align-items: center;
  background: var(--lime);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-pill);
}

.toggle__seg {
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 800 1rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.toggle__seg[aria-pressed="true"] {
  background: var(--card);
  box-shadow: 0 1px 0 rgba(20, 28, 23, 0.08);
}

.toggle__home {
  width: 58px;
  height: 58px;
  margin: -10px 4px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.toggle__home:hover {
  transform: rotate(-20deg);
}

/* The two icons share one spot and turn into each other as the index opens and closes. */
.toggle__home svg {
  grid-area: 1 / 1;
  width: 26px;
  height: 26px;
  transition: opacity 0.25s var(--ease), transform 0.45s var(--ease);
}

.pill__tick {
  display: none;
  width: 16px;
  height: 16px;
  margin: 0 -4px 0 -2px;
}

.pill[aria-current="page"] .pill__tick {
  display: block;
}

.is-reading .hud__nav .pill,
.has-about .hud__nav .pill {
  background: var(--card);
}

.is-reading .pill--access,
.has-list .pill--access,
.has-about .pill--access {
  opacity: 0;
  pointer-events: none;
}

.toggle__home .i-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.has-list .hud--bottom {
  z-index: 41;
}

.has-list .toggle {
  background: transparent;
  box-shadow: none;
}

.has-list .toggle__seg {
  opacity: 0;
  pointer-events: none;
}

.has-list .toggle__home {
  background: #8f9890;
  color: var(--ink);
}

.has-list .toggle__home .i-list {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.has-list .toggle__home .i-close {
  opacity: 1;
  transform: none;
}

/* ---------- The cover (the gate) ---------- */

/* Paper sheets under a card: the cover, the chapter card and the access sheet all use them. */
.sheets {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.sheets::before,
.sheets::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--paper-2);
  box-shadow: 0 18px 40px -26px rgba(20, 28, 23, 0.5);
  rotate: -1.8deg;
}

.sheets::after {
  background: #e3dbc6;
  rotate: 1.4deg;
}

.gate {
  position: relative;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 110px var(--gutter) 90px;
}

.js .gate {
  position: fixed;
  inset: 0;
  padding: 90px 16px 130px;
  pointer-events: none;
  transition: opacity 0.6s var(--ease), visibility 0s;
}

.js .gate > * {
  pointer-events: auto;
}

.mode-explore .gate {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--ease), visibility 0s linear 0.6s;
}

.gate__card {
  position: relative;
  isolation: isolate;
  width: min(620px, 100%);
  transition: transform 0.7s var(--ease);
}

.mode-explore .gate__card {
  transform: translateY(46px) scale(0.96);
}

.gate__paper {
  position: relative;
  padding: 78px clamp(24px, 6vw, 70px) 96px;
  border-radius: 3px;
  background: var(--card);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.gate__badge {
  position: absolute;
  left: 50%;
  top: 0;
  width: 118px;
  height: 118px;
  translate: -50% -50%;
}

.gate__badge img {
  position: absolute;
  inset: 21px;
  width: 76px;
  height: 76px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 16%;
  border: 3px solid var(--card);
  box-shadow: 0 8px 20px -10px rgba(20, 28, 23, 0.6);
}

.gate__badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: badge-spin 30s linear infinite;
}

.gate__badge text {
  font: 500 9.4px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--ink);
}

@keyframes badge-spin {
  to {
    rotate: 360deg;
  }
}

.gate__title {
  margin: 14px 0 18px;
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.82;
  text-transform: uppercase;
}

.gate__title .l {
  display: block;
  font-size: clamp(5.2rem, 3rem + 6vw, 8.8rem);
}

.gate__title .l--sm {
  margin-bottom: 0.1em;
  font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4.1rem);
  letter-spacing: 0.005em;
}

.gate__tagline {
  max-width: 30ch;
  margin: 0 auto 14px;
  font: 700 clamp(1.08rem, 0.98rem + 0.4vw, 1.32rem) / 1.3 var(--body);
}

.gate__by {
  margin: 0;
  font: 500 0.78rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.gate__go {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 98px;
  height: 98px;
  translate: -50% 50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 16px 34px -14px rgba(20, 28, 23, 0.65);
  transition: transform 0.3s var(--ease);
}

.gate__go:hover {
  transform: scale(1.06);
}

.gate__go svg {
  width: 34px;
  height: 34px;
}

/* Under the cover: Jeff reading the synopsis, and the way in without sound. */
.gate__foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: clamp(14px, 2.2vw, 26px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 clamp(14px, 2.2vw, 28px);
  pointer-events: none;
}

.gate__foot > * {
  pointer-events: auto;
}

.gate__quiet {
  position: absolute;
  right: clamp(14px, 2.2vw, 28px);
  bottom: 4px;
}

.gate__quiet svg {
  width: 20px;
  height: 20px;
}

/* The reading player: Jeff's face, what's playing, play, time, a scrubber. */
.narrator {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(480px, 100%);
  height: 60px;
  padding: 0 22px 0 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-pill);
}

.narrator__face {
  flex: none;
  width: 64px;
  height: 64px;
  max-width: none;
  margin-left: -4px;
  border: 3px solid var(--card);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 16%;
  box-shadow: 0 6px 16px -8px rgba(20, 28, 23, 0.6);
}

.narrator__label {
  flex: none;
  min-width: 4.6em;
  font: 800 0.92rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.narrator__play {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.narrator__play:hover {
  background: var(--paper);
}

.narrator__play svg {
  width: 22px;
  height: 22px;
}

.narrator__play .i-pause,
.narrator.is-playing .narrator__play .i-play {
  display: none;
}

.narrator.is-playing .narrator__play .i-pause {
  display: block;
}

.narrator__time,
.narrator__dur {
  flex: none;
  font: 500 0.74rem/1 var(--mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.narrator__seek {
  flex: 1;
  min-width: 50px;
  height: 44px;
  margin: 0;
  background: linear-gradient(var(--ink), var(--ink)) 0 50% / calc(var(--p, 0) * 100%) 2px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 50% / 100% 2px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.narrator__seek::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.narrator__seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}

.narrator__seek:focus-visible {
  outline: 3px solid var(--kale-2);
  outline-offset: 2px;
}

/* Under 980 px the reading and the way in no longer fit apart (the pill sat on the scrubber): one bar,
   the way the reference does it on phones, with the pill laid over the reading's end. */
@media (max-width: 980px) {
  .gate__foot {
    justify-content: center;
  }

  .gate__quiet {
    position: relative;
    z-index: 1;
    right: auto;
    bottom: auto;
    margin-left: -30px;
  }

  .narrator--gate {
    flex: 0 1 auto;
    padding-right: 38px;
  }
}

/* ---------- The world (map) ---------- */

.world {
  position: relative;
  background: var(--paper);
}

.js .world {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.js .world.is-dragging {
  cursor: grabbing;
}

/* With the custom cursor showing, hide the system one over the map. */
.world.has-cursor,
.world.has-cursor .chlabel {
  cursor: none;
}

.world__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.no-js .world__canvas {
  display: none;
}

.world__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Chapter labels: big type set into the world. Pointing at one wells the watercolor up behind it. */
.chlabel {
  --size: calc(var(--k, 1) * var(--label, 64px));
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: block;
  translate: 0 -50%;
  color: var(--ink);
  font-family: var(--chapter);
  font-weight: 860;
  line-height: 0.8;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease), color 0.25s var(--ease), text-shadow 0.25s var(--ease);
}

.chlabel--left {
  translate: -100% -50%;
  text-align: right;
}

.chlabel--top {
  translate: -50% -100%;
  text-align: center;
}

.chlabel--center {
  translate: -50% -50%;
  text-align: center;
}

.mode-explore .chlabel {
  opacity: 1;
  pointer-events: auto;
}

.is-reading .chlabel {
  opacity: 0;
  pointer-events: none;
}

.chlabel__ch {
  display: block;
  margin-bottom: 0.16em;
  font-size: calc(var(--size) * 0.4);
}

.chlabel__word {
  display: block;
  font-size: var(--size);
}

.chlabel.is-hot {
  color: #fff;
  text-shadow: 0 calc(var(--size) * 0.03) calc(var(--size) * 0.22) rgba(20, 28, 23, 0.42);
}

.chlabel:focus-visible {
  outline: 3px solid var(--kale-2);
  outline-offset: 8px;
  border-radius: 6px;
}

/* The cursor over the map: a pill that says how it works, a ring when you're on a chapter. */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.cursor.is-on {
  opacity: 1;
}

.cursor__dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 8px 18px -10px rgba(20, 28, 23, 0.6);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), margin 0.25s var(--ease), background-color 0.25s, box-shadow 0.25s;
}

.cursor__dot svg {
  width: 22px;
  height: 22px;
  transition: opacity 0.2s;
}

.cursor__text {
  height: 52px;
  margin: -26px 0 0 -20px;
  padding: 0 22px 0 32px;
  display: flex;
  align-items: center;
  border-radius: 0 999px 999px 0;
  background: var(--card);
  font: 800 0.95rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  box-shadow: var(--shadow-pill);
  transition: opacity 0.2s, transform 0.25s var(--ease);
}

/* Near the right edge the pill opens to the left: the dot stays centred on the cursor. */
.cursor.is-left {
  flex-direction: row-reverse;
  translate: calc(-100% + 26px) 0;
}

.cursor.is-left .cursor__dot {
  margin: -26px 0 0 0;
}

.cursor.is-left .cursor__text {
  margin: -26px -20px 0 0;
  padding: 0 32px 0 22px;
  border-radius: 999px 0 0 999px;
}

.cursor.is-chapter .cursor__dot {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--lime), 0 0 0 1px rgba(20, 28, 23, 0.25);
}

.cursor.is-chapter .cursor__dot svg,
.cursor.is-chapter .cursor__text {
  opacity: 0;
  transform: translateX(-8px);
}

/* ---------- Loader ---------- */

.loader {
  display: none;
}

.js .loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--kale);
  color: var(--on-kale);
  transition: clip-path 1s var(--ease-io), visibility 0s linear 1s;
  clip-path: inset(0 0 0 0);
}

.js .loader.is-done {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}

.loader__count {
  position: absolute;
  left: clamp(18px, 4vw, 56px);
  top: clamp(18px, 4vw, 48px);
  margin: 0;
  font: 900 clamp(3.4rem, 2rem + 6vw, 8rem) / 0.8 var(--display);
  text-transform: uppercase;
  color: var(--on-kale);
  font-variant-numeric: tabular-nums;
}

.loader__count small {
  display: block;
  margin-top: 14px;
  font: 500 0.8rem/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--on-kale-muted);
}

.loader__label {
  position: absolute;
  left: clamp(18px, 4vw, 56px);
  bottom: clamp(18px, 4vw, 48px);
  margin: 0;
  font: 800 1.3rem/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.loader .book3d {
  --w: min(300px, 56vw);
}

/* ---------- Panels: the chapter index and About ---------- */

.js .panel {
  position: fixed;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.5s;
}

.js .panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), visibility 0s;
}

/* Sticky, but out of the float flow: a float would squeeze the full-width sections beside it. */
.panel__close {
  position: sticky;
  top: 18px;
  z-index: 5;
  display: flex;
  width: 52px;
  height: 52px;
  min-height: 0;
  padding: 0;
  margin: 18px 18px -70px auto;
}

.panel__close svg {
  width: 20px;
  height: 20px;
}

/* ----- The chapter index: dark and full screen, giant numbers, as in the reference's menu ----- */

.panel--list {
  background: var(--ink);
  color: var(--paper);
}

/* It grows out of the middle button as a circle and shrinks back into it, as on the reference.
   world.js sets the circle's centre (--ox, --oy) on the button and its full size (--or) past the
   farthest corner. */
.js .panel--list {
  inset: 0;
  transform: none;
  opacity: 1;
  scrollbar-width: none;
  clip-path: circle(0px at var(--ox, 50%) var(--oy, 92%));
  transition: clip-path 0.42s cubic-bezier(0.45, 0, 0.55, 1), visibility 0s linear 0.42s;
}

.js .panel--list.is-open {
  clip-path: circle(var(--or, 150vmax) at var(--ox, 50%) var(--oy, 92%));
  transition: clip-path 0.5s cubic-bezier(0.45, 0, 0.55, 1), visibility 0s;
}

.js .panel--list::-webkit-scrollbar {
  display: none;
}

.index__hint {
  display: none;
}

.js .index__hint {
  display: block;
  position: fixed;
  left: 24px;
  top: 50%;
  margin: 0;
  writing-mode: vertical-rl;
  rotate: 180deg;
  translate: 0 50%;
  font: 800 0.86rem/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 239, 228, 0.7);
}

.index__aside {
  display: none;
}

.js .index__aside {
  display: block;
  position: fixed;
  right: clamp(24px, 7vw, 120px);
  top: 50%;
  translate: 0 -50%;
  width: min(420px, 34vw);
}

.index__title {
  margin: 0 0 16px;
  font: 900 clamp(4.2rem, 2rem + 4.4vw, 7.6rem) / 0.82 var(--display);
  text-transform: uppercase;
  color: var(--paper);
}

.index__by {
  margin: 0 0 26px;
  font: 500 0.8rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-kale-muted);
}

.index__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 0;
}

.index__all {
  color: var(--paper);
  font-weight: 600;
}

.route {
  padding: 40px var(--gutter) 100px;
}

.js .route {
  width: min(64%, 900px);
  padding: 110px 0 170px clamp(70px, 9vw, 150px);
}

.js .route__head {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.route__head h2 {
  font: 900 clamp(3rem, 2rem + 3vw, 4.6rem) / 0.82 var(--display);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.stage {
  margin-top: 34px;
}

.stage__title {
  margin: 0 0 6px;
  font: 500 0.76rem/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}

.stage__title small {
  font: inherit;
  color: var(--on-kale-muted);
}

.stage__title small::before {
  content: "\00b7  ";
}

.stage ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ch {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 0 24px;
  padding: 4px 0;
}

.ch__num {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 860 clamp(4.8rem, 2.2rem + 6.6vw, 9.6rem) / 0.8 var(--chapter);
  letter-spacing: 0.005em;
  color: var(--paper);
  transition: color 0.2s;
}

.ch__num small {
  text-transform: uppercase;
  font-size: 0.27em;
  line-height: 1;
  margin-top: 0.1em;
  color: rgba(243, 239, 228, 0.6);
}

.ch__num--end svg {
  width: 0.62em;
  height: 0.62em;
  margin: 0.1em 0.08em 0;
}

.ch__title {
  margin: 0 0 0.45em;
  font: 760 clamp(1.15rem, 0.95rem + 0.6vw, 1.65rem) / 1.05 var(--chapter);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(243, 239, 228, 0.6);
  transition: color 0.2s;
}

.ch__open {
  color: inherit;
  text-decoration: none;
}

.ch__open::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ch:hover .ch__num,
.ch:hover .ch__title,
.ch:focus-within .ch__num,
.ch:focus-within .ch__title {
  color: var(--lime);
}

.ch__open:focus-visible {
  outline: none;
}

.ch:has(.ch__open:focus-visible) {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
  border-radius: 8px;
}

/* The index shows number and title; the summary, notes and Jeff's passage feed the cards and search engines. */
.js .panel--list .ch__summary,
.js .panel--list .ch__notes,
.js .panel--list .ch__landmark,
.js .panel--list .ch__voice {
  display: none;
}

.ch__summary,
.ch__voice {
  grid-column: 2;
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: 0.98rem;
  color: var(--on-kale-muted);
}

.ch__voice {
  color: var(--paper);
  font-style: italic;
}

.ch__notes {
  grid-column: 2;
  margin: 8px 0 0;
  padding-left: 1.1em;
  font-size: 0.96rem;
  color: var(--on-kale-muted);
}

.ch__landmark {
  grid-column: 2;
  margin: 8px 0 0;
  font: 500 0.76rem/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lime);
}

.route__appendix {
  margin: 44px 0 14px;
  max-width: 52ch;
  font-size: 0.98rem;
  color: var(--on-kale-muted);
}

.route__appendix strong {
  color: var(--paper);
}

.route .link-arrow {
  color: var(--paper);
}

/* ----- About: one editorial layout, like the reference ----- */

.panel--about {
  background: var(--paper);
  color: var(--ink);
}

/* It rises from the bottom with a bowed top edge, as the reference's About wipes in: an ellipse wider
   than the screen whose top climbs past the corners. */
.js .panel--about {
  inset: 0;
  transform: none;
  opacity: 1;
  clip-path: ellipse(80% 0% at 50% 100%);
  transition: clip-path 0.75s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s linear 0.75s;
}

.js .panel--about.is-open {
  clip-path: ellipse(80% 140% at 50% 100%);
  transition: clip-path 1s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s;
}

.about-hero {
  position: relative;
  min-height: min(100vh, 900px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 90px 0 60px;
  background: var(--kale);
  color: var(--paper);
}

.about-hero__word {
  position: absolute;
  inset: 50% 0 auto;
  translate: 0 -54%;
  margin: 0;
  text-align: center;
  font: 900 clamp(9rem, 34vw, 34rem) / 0.78 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--paper);
  pointer-events: none;
  user-select: none;
}

.about-hero .book3d {
  --w: min(330px, 58vw);
  z-index: 1;
  transform: rotate(-6deg);
}

.about-hero__note {
  position: absolute;
  z-index: 2;
  right: clamp(18px, 6vw, 120px);
  bottom: clamp(30px, 8vh, 110px);
  max-width: 300px;
  margin: 0;
  font: 800 1.5rem/1.1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--paper);
  rotate: -3deg;
}

.about-hero__note span {
  display: block;
  margin-top: 8px;
  font: 500 0.78rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  color: var(--on-kale-muted);
}

.ed {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 110px);
  width: min(100% - 2 * var(--gutter), 1240px);
  margin: 0 auto;
  padding: clamp(80px, 11vw, 150px) 0;
  border-top: 1px solid var(--line);
}

.about-hero + .ed {
  border-top: 0;
}

.ed__head {
  position: sticky;
  top: 110px;
  align-self: start;
}

.ed__title {
  margin: 0;
  font: 900 clamp(3rem, 1.6rem + 4.4vw, 6.4rem) / 0.84 var(--display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}

.ed__title em {
  font-style: normal;
  color: var(--kale-2);
}

.ed__clock {
  margin: 0;
  font: 900 clamp(4.6rem, 2.4rem + 5vw, 8rem) / 0.8 var(--display);
  color: var(--beet);
  font-variant-numeric: tabular-nums;
}

.ed__clock span {
  margin-left: 0.08em;
  font-size: 0.32em;
}

.ed__date {
  margin: 12px 0 22px;
  font: 500 0.8rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ed__body {
  max-width: 640px;
}

.ed__body p {
  margin: 0 0 1em;
  font-size: clamp(1.12rem, 0.98rem + 0.55vw, 1.5rem);
  line-height: 1.42;
}

.ed__body .ed__lead {
  margin-bottom: 0.8em;
  font: 800 clamp(1.7rem, 1.2rem + 1.3vw, 2.6rem) / 1.03 var(--display);
  letter-spacing: 0.005em;
}

.ed__cite {
  display: block;
  margin-top: 10px;
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ed__body .ed__close {
  margin-top: 1.2em;
  font: 800 clamp(1.5rem, 1.1rem + 1vw, 2.2rem) / 1.05 var(--display);
}

.ed__body q {
  quotes: "\201C" "\201D";
  font-weight: 600;
}

.ed__ledger {
  width: 100%;
  margin: 30px 0;
  border-collapse: collapse;
  font-size: 1rem;
}

.ed__ledger th {
  padding: 0 16px 10px 0;
  text-align: left;
  font: 500 0.76rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ed__ledger td {
  width: 50%;
  padding: 14px 16px 14px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.35;
}

.ed__ledger td strong {
  display: block;
  font: 900 clamp(2rem, 1.5rem + 1.4vw, 2.8rem) / 0.9 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--beet);
}

.ed__ledger td + td strong {
  color: var(--kale-2);
}

.ed__list {
  list-style: none;
  margin: 26px 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.ed__list li {
  position: relative;
  padding: 13px 0 13px 30px;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  line-height: 1.45;
}

.ed__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.15em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 3px solid var(--kale-2);
}

.ed__list--defs li {
  color: var(--muted);
}

.ed__list--defs li strong {
  display: block;
  margin-bottom: 2px;
  font: 800 1.3rem/1.05 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.ed__portrait {
  margin: 34px 0 0;
  max-width: 400px;
}

.ed__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 3px;
  rotate: -2deg;
  box-shadow: var(--shadow-card);
}

.ed__portrait figcaption {
  margin-top: 18px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
}

.ed__portrait figcaption strong {
  color: var(--ink);
}

.ed__quote {
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.ed__quote blockquote {
  margin: 0;
  font: 800 clamp(1.4rem, 1.1rem + 0.9vw, 2.1rem) / 1.05 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.ed__quote figcaption {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--muted);
}

.ed__quote figcaption strong {
  color: var(--ink);
}

.ed__quote--big {
  padding-top: 0;
  border-top: 0;
}

.ed__quote--big blockquote {
  font-size: clamp(2.8rem, 1.6rem + 3.4vw, 5rem);
  line-height: 0.88;
  color: var(--kale-2);
}

.ed__quote--small blockquote {
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.4rem);
}

.ed__sub {
  margin: 34px 0 4px;
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ed__facts {
  margin: 26px 0;
  border-top: 2px solid var(--ink);
}

.ed__facts div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.ed__facts dt {
  font: 500 0.74rem/1.6 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kale-2);
}

.ed__facts dd {
  margin: 0;
  font-size: 1.05rem;
}

.ed__facts dd small {
  display: block;
  margin-top: 2px;
  font-size: 0.88rem;
  color: var(--muted);
}

.ed__actions .signup {
  margin-top: 6px;
}

.ed__body .ed__cal {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--muted);
}

.ed__cal a,
.ed__cal .linklike {
  color: var(--ink);
}

/* The numbers, set as large as the reference sets its own. */
.numbers {
  width: min(100% - 2 * var(--gutter), 1240px);
  margin: 0 auto;
  padding: clamp(70px, 10vw, 130px) 0;
  border-top: 1px solid var(--line);
}

.numbers__big {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 28px;
  margin: 0;
}

.numbers__big strong {
  font: 900 clamp(11rem, 6rem + 20vw, 26rem) / 0.76 var(--display);
  color: var(--kale-2);
}

.numbers__big span {
  max-width: 12ch;
  margin-bottom: 0.4em;
  font: 800 clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem) / 1 var(--display);
  text-transform: uppercase;
}

.numbers__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.numbers__row li {
  padding: 18px 16px 0 0;
}

.numbers__row strong {
  display: block;
  font: 900 clamp(2.8rem, 1.8rem + 3vw, 5.4rem) / 0.86 var(--display);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.numbers__row span {
  display: block;
  margin-top: 8px;
  font: 500 0.78rem/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 900px) {
  .ed {
    grid-template-columns: 1fr;
  }

  .ed__head {
    position: static;
  }

  .numbers__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  }
}

/* Shared with the subpages. */
.lede {
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.42rem);
  line-height: 1.5;
  max-width: 54ch;
}

.hl {
  background: linear-gradient(transparent 55%, var(--lime) 55%, var(--lime) 92%, transparent 92%) no-repeat;
  color: inherit;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 30px 0;
  border-top: 2px solid currentColor;
}

.stat {
  padding: 16px 12px 14px 0;
}

.stat:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.stat:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

.stat strong {
  display: block;
  font: 900 clamp(2.2rem, 1.6rem + 1.4vw, 3rem) / 0.9 var(--display);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stat span {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--muted);
}

.on-kale .stat,
.page-hero .stat {
  border-color: var(--line-kale);
}

.on-kale .stat strong,
.page-hero .stat strong {
  color: var(--lime);
}

.on-kale .stat span,
.page-hero .stat span {
  color: var(--on-kale-muted);
}

/* FAQ */
.faq {
  border-top: 2px solid currentColor;
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.on-kale .faq details {
  border-bottom-color: var(--line-kale);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font: 800 clamp(1.35rem, 1.15rem + 0.7vw, 1.8rem) / 1.02 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    var(--lime);
  color: var(--ink);
  transition: rotate 0.3s var(--ease);
}

.faq details[open] summary::after {
  rotate: 45deg;
}

.faq details > div {
  padding: 0 0 24px;
  max-width: 64ch;
}

.faq details > div p {
  font-size: 1.05rem;
}

/* ---------- Signup ---------- */

.signup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 600px;
}

.signup__field {
  flex: 1 1 220px;
  min-width: 0;
}

.signup input[type="email"],
.signup input[type="text"] {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(20, 28, 23, 0.45);
  background: #fff;
  color: var(--ink);
  font: 400 1rem var(--body);
}

.signup input::placeholder {
  color: rgba(20, 28, 23, 0.62);
}

.signup input:focus {
  outline: none;
  border-color: var(--kale-2);
  box-shadow: 0 0 0 3px rgba(31, 90, 57, 0.18);
}

.on-kale .signup input,
.event-card .signup input,
.sheet--dark .signup input {
  border-color: rgba(243, 239, 228, 0.45);
  background: rgba(243, 239, 228, 0.08);
  color: var(--paper);
  caret-color: var(--lime);
}

.on-kale .signup input::placeholder,
.event-card .signup input::placeholder,
.sheet--dark .signup input::placeholder {
  color: rgba(243, 239, 228, 0.62);
}

.on-kale .signup input:focus,
.event-card .signup input:focus,
.sheet--dark .signup input:focus {
  border-color: var(--lime);
  box-shadow: none;
}

.signup input[aria-invalid="true"] {
  border-color: var(--beet);
}

.on-kale .signup input[aria-invalid="true"],
.event-card .signup input[aria-invalid="true"] {
  border-color: var(--beet-light);
}

.signup .btn {
  min-height: 50px;
}

.signup__note {
  flex-basis: 100%;
  margin: 2px 0 0 6px;
  font-size: 0.84rem;
  color: var(--muted);
}

.on-kale .signup__note,
.event-card .signup__note {
  color: var(--on-kale-muted);
}

.signup__status {
  flex-basis: 100%;
  margin: 2px 0 0 6px;
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 600;
}

.signup__status:empty {
  min-height: 0;
  margin: 0;
}

.signup__status[data-tone="ok"] {
  color: var(--kale-2);
}

.signup__status[data-tone="error"] {
  color: var(--beet);
}

.on-kale .signup__status[data-tone="ok"],
.event-card .signup__status[data-tone="ok"] {
  color: var(--lime);
}

.on-kale .signup__status[data-tone="error"],
.event-card .signup__status[data-tone="error"] {
  color: var(--beet-light);
}

.signup__status a {
  color: inherit;
}

.signup__done {
  display: none;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 10px;
}

.signup.is-done .signup__field,
.signup.is-done > .btn,
.signup.is-done .signup__note {
  display: none;
}

.signup.is-done .signup__done {
  display: flex;
}

.buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Chapter card ---------- */

.card {
  position: fixed;
  z-index: 45;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
  --stage: var(--stage-1);
}

.card[data-stage="2"] {
  --stage: var(--stage-2);
}

.card[data-stage="3"] {
  --stage: var(--stage-3);
}

.card[data-stage="0"] {
  --stage: var(--ink);
}

.card[open] {
  display: block;
}

/* The page scrolls the card up over the world, as on the reference. */
/* Vertical only: the tilted paper sheets behind a full-width card stick out past a phone's edge, and
   iOS Safari let the whole card slide side to side over that sliver. */
.card__scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  scrollbar-width: none;
}

.card__scroll::-webkit-scrollbar {
  display: none;
}

.card__spacer {
  height: max(44vh, 290px);
}

.narrator--card {
  position: sticky;
  top: 18px;
  z-index: 3;
  margin: 0 auto 30px;
}

.card__sheet {
  position: relative;
  isolation: isolate;
  width: min(740px, calc(100% - 24px));
  margin: 0 auto;
}

/* Opening, in the reference's order: the color spreads first, the reading bar grows out of a small
   pill, then the paper rises from below the screen. Prev and Next keep the card open, so they don't
   replay it. */
.card[open] .card__sheet {
  animation: card-up 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.card[open] .narrator--card {
  animation: card-bar 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.card[open] .card__close,
.card[open] .card__nav {
  animation: card-fade 0.5s var(--ease) 0.9s both;
}

@keyframes card-up {
  from {
    transform: translateY(75vh);
  }
}

@keyframes card-bar {
  from {
    opacity: 0;
    transform: scale(0.3, 0.6);
  }
}

@keyframes card-fade {
  from {
    opacity: 0;
  }
}

.card__paper {
  position: relative;
  min-height: 78vh;
  padding: clamp(46px, 5vw, 72px) clamp(24px, 6vw, 78px) 160px;
  border-radius: 3px 3px 0 0;
  background: var(--card);
  box-shadow: var(--shadow-card);
  container-type: inline-size;
}

.card__art {
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  right: clamp(10px, 3vw, 30px);
  width: min(46%, 330px);
  height: auto;
  max-width: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  pointer-events: none;
}

.card__heading {
  position: relative;
  margin: 0;
}

.card__heading:focus {
  outline: none;
}

.card__ch {
  display: block;
  font: 860 min(10.4rem, calc(100cqw / (var(--len, 6) * 0.5))) / 0.8 var(--chapter);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
}

/* A hand-drawn ring round "Ch.", as on the reference. */
.card__ch small {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 0 0.12em 0.04em;
  font-size: max(1.7rem, 0.3em);
  line-height: 1;
}

.card__ch small::before {
  content: "";
  position: absolute;
  inset: -0.42em -0.5em -0.36em;
  border: 2px solid var(--stage);
  border-radius: 50% 46% 52% 48%;
  rotate: -9deg;
  opacity: 0.75;
}

.card__title {
  display: block;
  margin: 18px 0 0;
  max-width: 22ch;
  font: 760 clamp(2.1rem, 1.4rem + 2.1vw, 3.5rem) / 0.94 var(--chapter);
  letter-spacing: 0.005em;
  color: var(--ink);
}

.card__rule {
  width: 52px;
  height: 3px;
  margin: 26px 0;
  border: 0;
  background: var(--stage);
}

.card__body .ch__voice,
.card__body .ch__summary {
  margin: 0;
  max-width: none;
  font-size: clamp(1.2rem, 1rem + 0.75vw, 1.62rem);
  font-style: normal;
  line-height: 1.38;
  color: var(--ink);
}

.card__body strong {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--stage);
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 42px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
}

.card__foot a {
  color: var(--ink);
  font-weight: 600;
}

.card__close {
  position: fixed;
  z-index: 4;
  top: clamp(14px, 2.2vw, 26px);
  right: clamp(14px, 2.2vw, 26px);
  width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0;
}

.card__close svg {
  width: 20px;
  height: 20px;
}

.card__nav {
  position: fixed;
  z-index: 4;
  bottom: clamp(14px, 2.2vw, 26px);
  min-height: 54px;
  padding: 0 22px;
}

.card__nav svg {
  width: 18px;
  height: 18px;
}

.card__nav--prev {
  left: clamp(14px, 2.2vw, 26px);
}

.card__nav--next {
  right: clamp(14px, 2.2vw, 26px);
}

@media (max-width: 1240px) {
  .narrator--card {
    top: 86px;
  }
}

@media (max-width: 760px) {
  .card__spacer {
    height: 38vh;
  }

  .narrator--card {
    top: 64px;
    width: calc(100% - 28px);
  }

  .narrator--card .narrator__time {
    display: none;
  }

  .card__sheet {
    width: 100%;
  }

  /* Edge to edge, the tilted sheets behind the paper can't be seen; they only stuck out past the
     screen, and iOS Safari slid the card side to side over that sliver. */
  .card .sheets {
    display: none;
  }

  .card__paper {
    padding-bottom: 130px;
  }

  .card__art {
    width: 52%;
    opacity: 0.55;
  }

  .card__close {
    width: 48px;
    height: 48px;
  }

  .card__nav {
    min-height: 46px;
    padding: 0 16px;
    font-size: 0.9rem;
  }
}

/* ---------- Access sheet ---------- */

.sheet {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  overflow: auto;
}

.sheet::backdrop {
  background: rgba(20, 28, 23, 0.4);
  backdrop-filter: blur(3px);
}

.sheet[open] {
  animation: sheet-in 0.45s var(--ease) both;
}

@keyframes sheet-in {
  from {
    transform: translateY(30px) scale(0.98);
    opacity: 0;
  }
}

.sheet__inner {
  padding: clamp(26px, 4vw, 40px);
}

.sheet__close {
  float: right;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  margin: -6px -6px 0 12px;
}

.sheet h2 {
  font: 900 clamp(2.6rem, 2rem + 2vw, 3.6rem) / 0.84 var(--display);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.sheet__event {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.sheet__event h3 {
  font: 800 1.5rem/1 var(--display);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ---------- 3D book and the stand-in cover ---------- */

.book3d {
  --w: min(320px, 64vw);
  --h: calc(var(--w) * 1.545);
  --d: calc(var(--w) * 0.12);
  position: relative;
  width: var(--w);
  height: var(--h);
  perspective: 1900px;
}

.book3d--sm {
  --w: min(250px, 58vw);
}

.book3d__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(calc(-24deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg));
  transition: transform 0.7s var(--ease);
}

.book3d__front,
.book3d__back {
  position: absolute;
  inset: 0;
  border-radius: 2px 7px 7px 2px;
  overflow: hidden;
  backface-visibility: hidden;
}

.book3d__front {
  transform: translateZ(calc(var(--d) / 2));
  container-type: inline-size;
  box-shadow: inset 3px 0 6px rgba(0, 0, 0, 0.45);
}

.book3d__front::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0, rgba(255, 255, 255, 0.1) 2.2%, rgba(0, 0, 0, 0.16) 4%, transparent 7%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 38%, transparent 70%, rgba(0, 0, 0, 0.16));
  pointer-events: none;
}

/* The book only ever turns between about -33 and -15 degrees, so its back never faces us. WebKit
   (Safari, every iPhone browser) painted the back over the front anyway, a blank dark slab, so it's
   left out. */
.book3d__back {
  display: none;
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: #0f2a1a;
}

.book3d__spine,
.book3d__pages {
  position: absolute;
  top: 0;
  width: var(--d);
  height: 100%;
  left: calc(50% - var(--d) / 2);
}

.book3d__spine {
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: linear-gradient(90deg, #0c2617, #15402a 45%, #0c2617);
}

.book3d__pages {
  top: 1.2%;
  height: 97.6%;
  width: calc(var(--d) - 3px);
  left: calc(50% - var(--d) / 2 + 1px);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 4px));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 30%, transparent 80%, rgba(0, 0, 0, 0.12)),
    repeating-linear-gradient(90deg, #f4efe1 0 1.6px, #d8d0bb 1.6px 2.4px);
}

.book3d__shadow {
  position: absolute;
  left: 4%;
  right: -10%;
  bottom: -9%;
  height: 12%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  filter: blur(8px);
  transform: translateZ(-1px);
}

.cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 9cqw 9cqw 8cqw 11cqw;
  background: linear-gradient(170deg, #1d5534 0%, #133a24 60%, #0d2a19 100%);
  color: var(--paper);
  overflow: hidden;
}

.cover::before {
  content: "";
  position: absolute;
  inset: -5%;
  background: url("/assets/world/ink-2800.webp") 66% 8% / 330% auto no-repeat;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.14;
  pointer-events: none;
}

.cover > * {
  position: relative;
}

/* The real printed cover (cream, green type). Replaces the typographic stand-in. */
.cover--real {
  padding: 0;
  background: #f4f1ea;
}

.cover--real::before {
  display: none;
}

.cover--real > .cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book3d:has(.cover--real) .book3d__spine {
  background: linear-gradient(90deg, #d9d4c6, #f4f1ea 45%, #d9d4c6);
}

.cover__blurb {
  margin: 0;
  font: 600 4cqw/1.3 var(--body);
  color: rgba(243, 239, 228, 0.86);
}

.cover__blurb span {
  display: block;
  margin-top: 1.6cqw;
  font: 500 2.8cqw/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}

.cover__press {
  display: none;
}

.cover__title {
  margin: auto 0 4cqw;
  font: 900 21cqw/0.8 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.cover__title span {
  display: block;
}

.cover__title span:first-child {
  font-size: 0.42em;
  margin-bottom: 0.1em;
}

.cover__title span:nth-child(3) {
  color: var(--lime);
}

.cover__sub {
  margin: 0 0 auto;
  max-width: 30ch;
  font: 500 3.6cqw/1.3 var(--body);
  color: rgba(243, 239, 228, 0.86);
}

.cover__author {
  margin: 0 0 1.4cqw;
  font: 900 9cqw/0.9 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cover__foreword {
  margin: 0;
  font: 500 2.8cqw/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 239, 228, 0.76);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--on-kale-muted);
  font-size: 0.92rem;
  padding: clamp(48px, 6vw, 72px) 0 30px;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.footer__title {
  margin: 0 0 10px;
  font: 900 2.4rem/0.86 var(--display);
  text-transform: uppercase;
  color: var(--paper);
}

.site-footer h2 {
  margin: 0 0 14px;
  font: 800 1.05rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--paper);
  text-decoration: underline;
}

.footer__base {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid rgba(243, 239, 228, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.84rem;
}

@media (max-width: 860px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* ---------- Subpages ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(243, 239, 228, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 900 1.45rem/0.9 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.brand__mark {
  width: 30px;
  height: 30px;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none;
  font: 800 0.95rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav a:not(.btn):hover,
.nav a[aria-current="page"] {
  background: var(--card);
  box-shadow: var(--shadow-pill);
}

.site-header .btn {
  min-height: 42px;
  font-size: 0.95rem;
}

.menu-toggle {
  display: none;
  margin-left: auto;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 800 0.95rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-pill);
  cursor: pointer;
}

@media (min-width: 921px) {
  .nav .nav__cta {
    display: none;
  }
}

@media (max-width: 920px) {
  .nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
  }

  .site-header .header-cta {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.86rem;
  }

  .site-header.menu-open .nav {
    display: flex;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .site-header.menu-open .nav a {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .brand span {
    display: none;
  }
}

.section {
  position: relative;
  padding-block: clamp(64px, 9vw, 120px);
}

.section--tight {
  padding-block: clamp(48px, 6vw, 84px);
}

.on-ink,
.on-ink-2,
.on-kale {
  background: var(--kale);
  color: var(--on-kale);
}

.on-paper {
  background: var(--paper);
  color: var(--ink);
}

.on-paper-2 {
  background: var(--paper-2);
  color: var(--ink);
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head h2 {
  font: 900 clamp(2.8rem, 1.8rem + 3.6vw, 5rem) / 0.86 var(--display);
  text-transform: uppercase;
}

.section-head p {
  margin-top: 18px;
  max-width: 60ch;
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 96px);
  background: var(--kale);
  color: var(--on-kale);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/world/ink-2800.webp") 66% 18% / 1800px auto no-repeat;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.12;
  pointer-events: none;
}

.page-hero > * {
  position: relative;
}

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

.page-hero h1 {
  font: 900 clamp(3.6rem, 2rem + 6.4vw, 8.4rem) / 0.8 var(--display);
  text-transform: uppercase;
  margin-bottom: 22px;
}

.page-hero h1 em {
  color: var(--lime);
}

.page-hero .lede {
  color: var(--on-kale-muted);
}

.page-hero .hero__visual {
  display: grid;
  justify-items: center;
}

@media (max-width: 860px) {
  .page-hero__grid {
    grid-template-columns: 1fr;
  }
}

.crumbs {
  margin: 0 0 24px;
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-kale-muted);
}

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.5;
}

.crumbs a {
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--paper);
}

.quick-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.quick-facts .chip {
  box-shadow: none;
}

.paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 2px solid var(--ink);
}

.path {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 22px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color 0.2s;
}

.path:nth-child(3n + 2),
.path:nth-child(3n + 3) {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.path:hover strong {
  color: var(--kale-2);
}

.path strong {
  font: 800 1.45rem/1 var(--display);
  text-transform: uppercase;
}

.path span {
  font-size: 0.92rem;
  color: var(--muted);
}

.path em {
  margin-top: 4px;
  font: 500 0.72rem/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kale-2);
}

@media (max-width: 860px) {
  .paths {
    grid-template-columns: 1fr 1fr;
  }

  .path:nth-child(n) {
    padding-left: 0;
    border-left: 0;
  }

  .path:nth-child(even) {
    padding-left: 18px;
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 520px) {
  .paths {
    grid-template-columns: 1fr;
  }

  .path:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }
}

.toc-part {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(22px, 5vw, 80px);
  padding-block: clamp(40px, 6vw, 72px);
  border-top: 2px solid var(--ink);
}

.toc-part:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.toc-part__head {
  position: sticky;
  top: 100px;
  align-self: start;
}

.part__num {
  margin: 0 0 8px;
  font: 900 clamp(4rem, 3rem + 3vw, 6rem) / 0.8 var(--display);
  color: var(--kale-2);
}

.toc-part__title {
  font: 900 clamp(2rem, 1.5rem + 1.6vw, 2.8rem) / 0.9 var(--display);
  text-transform: uppercase;
}

.toc-part__head p {
  margin-top: 14px;
  color: var(--muted);
}

.chapters {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chapter {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.chapter:first-child {
  padding-top: 0;
}

.chapter__num {
  font: 900 2.6rem/0.85 var(--display);
  color: var(--kale-2);
}

.chapter h3 {
  margin-bottom: 8px;
  font: 800 clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem) / 1 var(--display);
  text-transform: uppercase;
}

.chapter p {
  margin: 0;
  color: var(--muted);
}

.chapter__tags {
  margin-top: 10px !important;
  font: 500 0.74rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kale-2) !important;
}

@media (max-width: 860px) {
  .toc-part {
    grid-template-columns: 1fr;
  }

  .toc-part__head {
    position: static;
  }
}

.details-table {
  width: 100%;
  border-collapse: collapse;
}

.details-table th,
.details-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-kale);
}

.details-table th {
  width: 36%;
  padding-right: 18px;
  padding-top: 17px;
  font: 500 0.74rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding: clamp(26px, 5vw, 60px);
  border-radius: 24px;
  background: var(--lime);
  color: var(--ink);
}

.cta-band h2 {
  font: 900 clamp(2.4rem, 1.6rem + 3vw, 4rem) / 0.86 var(--display);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cta-band h2 .accent,
.cta-band h2 .serif-italic {
  color: var(--kale-2);
}

.cta-band p {
  margin: 0;
}

.cta-band .signup input {
  border-color: rgba(20, 28, 23, 0.5);
  background: #fff;
  color: var(--ink);
}

.cta-band .signup__note {
  color: var(--ink-2);
}

.cta-band .btn--lime {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 860px) {
  .cta-band {
    grid-template-columns: 1fr;
  }
}

.prose {
  max-width: 60ch;
}

.prose h2 {
  margin: clamp(48px, 6vw, 72px) 0 16px;
  font: 900 clamp(2.2rem, 1.6rem + 2vw, 3.2rem) / 0.9 var(--display);
  text-transform: uppercase;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  font-size: clamp(1.04rem, 0.98rem + 0.3vw, 1.16rem);
  line-height: 1.7;
}

.prose blockquote {
  margin: 34px 0;
  padding-left: 0;
  font: 800 clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem) / 1 var(--display);
  text-transform: uppercase;
  color: var(--kale-2);
}

.prose blockquote p {
  font: inherit;
  margin: 0;
}

.prose blockquote footer {
  margin-top: 12px;
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.bio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}

.bio-aside {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 16px;
}

.aside-card {
  padding: 24px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow-pill);
}

.aside-card h2 {
  margin: 0 0 12px;
  font: 800 1.2rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aside-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 0.96rem;
}

.aside-card li strong {
  display: block;
  font: 800 1.05rem/1.1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.aside-card li span {
  color: var(--muted);
  font-size: 0.92rem;
}

@media (max-width: 960px) {
  .bio-layout {
    grid-template-columns: 1fr;
  }

  .bio-aside {
    position: static;
  }
}

.presskit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.presskit__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 20px;
  background: rgba(243, 239, 228, 0.06);
  box-shadow: inset 0 0 0 1px var(--line-kale);
}

.presskit__item h3 {
  font: 800 1.6rem/1 var(--display);
  text-transform: uppercase;
}

.presskit__item p {
  margin: 0;
  color: var(--on-kale-muted);
}

.presskit__item .btn {
  align-self: flex-start;
  margin-top: auto;
}

@media (min-width: 861px) {
  .presskit__item--tall {
    grid-row: span 2;
  }
}

@media (max-width: 860px) {
  .presskit {
    grid-template-columns: 1fr;
  }
}

.author-photo {
  margin: 0;
  justify-self: end;
  width: min(100%, 420px);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: var(--kale-2);
  rotate: 2deg;
  box-shadow: var(--shadow-card);
}

.author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

@media (max-width: 860px) {
  .author-photo {
    justify-self: start;
    width: min(100%, 360px);
  }
}

.lost {
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.lost h1 {
  margin-bottom: 20px;
  font: 900 clamp(4rem, 2rem + 8vw, 9rem) / 0.8 var(--display);
  text-transform: uppercase;
}

.lost h1 em {
  color: var(--kale-2);
}

/* ---------- No JavaScript: the map becomes a header, the panels read in order ---------- */

.no-js [data-js-only],
.no-js .cursor {
  display: none !important;
}

.no-js .world {
  height: 70vh;
  overflow: hidden;
  border-block: 1px solid var(--line);
}

.world__fallback {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 66% 30%;
}

.no-js .panel--list {
  width: min(100% - 2 * var(--gutter), 760px);
  margin-inline: auto;
}

.no-js .ch__open {
  text-decoration: none;
}

/* ---------- Phones ---------- */

@media (max-width: 760px) {
  .js .hud--top {
    align-items: flex-start;
  }

  .hud__nav .pill,
  .pill--access {
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.86rem;
  }

  .pill--access {
    padding-left: 8px;
  }

  .pill--access img {
    width: 22px;
  }

  .hud__nav .pill--author,
  .pill__more,
  .pill--access .pill__long {
    display: none;
  }

  .js .hud--bottom {
    justify-content: center;
  }

  .hud__date {
    position: absolute;
    left: 50%;
    bottom: 74px;
    translate: -50% 0;
    justify-content: center;
    width: max-content;
  }

  .toggle {
    position: static;
    translate: none;
  }

  .toggle__seg {
    padding: 0 16px;
  }

  .js .gate {
    padding: 74px 14px 110px;
  }

  .gate__paper {
    padding: 64px 20px 76px;
  }

  .gate__badge {
    width: 100px;
    height: 100px;
  }

  .gate__badge img {
    inset: 18px;
    width: 64px;
    height: 64px;
  }

  .gate__title .l {
    font-size: clamp(4.4rem, 24vw, 6rem);
  }

  .gate__title .l--sm {
    font-size: clamp(2rem, 10.5vw, 2.8rem);
  }

  .gate__go {
    width: 82px;
    height: 82px;
  }

  /* The joined bar (see 980 px), compact: no time or scrubber, smaller face and type. */
  .gate__quiet {
    min-height: 52px;
    padding: 0 12px;
    gap: 6px;
    font-size: 0.8rem;
  }

  .gate__quiet svg {
    width: 18px;
    height: 18px;
  }

  .narrator--gate {
    flex: none;
    width: auto;
    gap: 8px;
  }

  .narrator--gate .narrator__face {
    width: 54px;
    height: 54px;
  }

  .narrator--gate .narrator__label {
    min-width: 0;
  }

  .narrator--gate .narrator__play {
    width: 44px;
    height: 44px;
  }

  .narrator--gate .narrator__time,
  .narrator--gate .narrator__seek,
  .narrator--gate .narrator__dur {
    display: none;
  }

  .js .index__aside,
  .js .index__hint {
    display: none;
  }

  .js .route {
    width: 100%;
    padding: 90px 18px 150px;
  }

  .ch__num {
    font-size: clamp(3.6rem, 18vw, 5rem);
  }

  .ch {
    gap: 0 16px;
  }

  /* About: the word, then the book, then the date, stacked instead of overlapped. */
  .about-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    min-height: 0;
    padding: 96px 0 64px;
  }

  .about-hero__word {
    position: static;
    translate: none;
    font-size: 31vw;
  }

  .about-hero .book3d {
    --w: min(240px, 62vw);
  }

  .about-hero__note {
    position: static;
    rotate: 0deg;
    text-align: center;
  }
}

@media (min-width: 761px) {
  .pill--access .pill__short {
    display: none;
  }
}

/* Under 390 px the joined bar on the cover can't hold the word as well: Jeff's face and play carry it
   (the button still says "Play Jeff reading the synopsis"). */
@media (max-width: 389px) {
  .narrator--gate .narrator__label {
    display: none;
  }
}

/* ---------- The mask's labels, the click burst, the scroll feel ---------- */

/* With WebGL the labels are drawn into both pictures, so the color's edge cuts the letters too (white
   inside, ink outside). The links stay on top, invisible, for pointing, focus and screen readers. */
.gl-world .chlabel,
.gl-world .chlabel.is-hot {
  color: transparent;
  text-shadow: none;
}

/* A click on a chapter: a lime ring springs out where it landed (the ink rays are gone: Andrew didn't
   want the black dots). */
.burst {
  position: fixed;
  z-index: 70;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  pointer-events: none;
}

.burst svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
}

.burst__ring {
  stroke: var(--lime);
  stroke-width: 6;
  animation: burst-ring 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes burst-ring {
  from {
    transform: scale(0.2);
    opacity: 1;
  }
  to {
    transform: scale(1.7);
    opacity: 0;
    stroke-width: 1;
  }
}

/* The scroll feel, as on the reference: big type leans with the speed of the scroll and the pictures
   drift slower than the page. world.js sets --v (speed, px a frame) and --sy (offset) on each
   scroller; with reduced motion both stay at zero. */
.js .panel--list .ch {
  transform: skewY(calc(var(--v, 0) * -0.075deg));
}

.js .ed__title {
  transform: skewY(calc(var(--v, 0) * -0.06deg));
}

.js .about-hero__word {
  transform: translateY(calc(var(--sy, 0px) * 0.34));
}

.js .about-hero .book3d {
  translate: 0 calc(var(--sy, 0px) * 0.14);
}

.js .card__art {
  translate: 0 calc(var(--sy, 0px) * 0.12);
}

/* The intro film: over the world, under the cover card. It fades out as it hands over to the live
   world, which world.js has framed exactly on its last frame. */
.world__intro {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 0.8s var(--ease);
}

.world__intro.is-done {
  opacity: 0;
}

/* Where the place loops' videos wait; WebGL draws their frames into the world. */
.motion-stash {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.motion-stash video {
  width: 1px;
  height: 1px;
}

/* ---------- Touch targets ----------
   44 px for every control a thumb has to hit. Where the visible link should stay where it is, the hit
   area grows past it instead (padding taken back by a negative margin, or a larger pseudo-element).
   Links inside running text are left as text. */

/* The chapter labels on the map: a little room round the letters. */
.chlabel::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.link-arrow {
  position: relative;
}

.link-arrow::after {
  content: "";
  position: absolute;
  inset: -11px -4px;
}

.linklike {
  padding: 12px 0;
  margin: -12px 0;
}

@media (max-width: 760px), (pointer: coarse) {
  .card__foot {
    gap: 20px 24px;
  }

  .card__foot a {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
  }

  .site-footer ul {
    gap: 0;
  }

  .site-footer li a {
    display: inline-block;
    min-width: 44px;
    padding: 13px 0;
  }

  .footer__base a {
    display: inline-block;
    padding: 12px 0;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}