/* ============================================================================
   Build Your Game Model, v2. Sales page.

   Grammar: chaptered editorial. The page is the printed workbook continued, so
   the ground is paper, the chapters hard cut rather than drift, and the chrome
   is a folio in the margin rather than a bar.

   Brand tokens are the workbook's own (gmb-workbook/style.css). Two deliberate
   deviations from them, both for contrast on the render, both noted inline.
   ========================================================================== */

:root {
  /* --- brand colour roles ------------------------------------------------ */
  --sc-canvas:      #FAF7F0;   /* cream. Never pure white as a ground.        */
  --sc-surface:     #FFFFFF;   /* the printed page, raised off the cream      */
  --sc-ink:         #1D2730;

  /* The brand's muted is #6E7680, which measures 4.34:1 on cream and misses
     the 4.5:1 body floor. One step darker, same hue. #6E7680 is kept below as
     --gm-muted-lg for large text and rules, where 3:1 is the bar.            */
  --sc-ink-soft:    #656D77;
  --gm-muted-lg:    #6E7680;

  --sc-accent:      #3281BC;
  --gm-accent-deep: #2A6C9E;   /* small uppercase labels, links, button fill  */
  --gm-accent-dark: #1F5680;   /* button hover                                */
  --sc-accent-ink:  #FFFFFF;

  --gm-navy:        #141D24;
  --gm-navy-ink:    #F1EFEA;
  --gm-navy-soft:   #9FAAB4;

  --gm-cream:       #FAF7F0;
  --gm-cream-deep:  #F2EDE2;

  --sc-hairline:        rgba(29, 39, 48, 0.13);
  --sc-hairline-strong: rgba(29, 39, 48, 0.26);

  /* --- type. Three families, which is one more than the taste floor allows.
     This is the brand's own system and it is the reason the page reads as the
     same document as the product: Instrument Serif for display openers, Lora
     600 for working headlines, Inter for everything that is read. ---------- */
  --sc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --gm-font-work:    "Lora", Georgia, serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "Inter", system-ui, sans-serif;

  --sc-r-sm: 10px;
  --sc-r-md: 16px;
  --sc-r-lg: 16px;

  --sc-measure: 66ch;
  --sc-maxw: 1180px;
  --gm-narrow: 780px;

  --sc-shadow-color: 29 39 48;
  --sc-e1: 0 1px 2px rgba(29, 39, 48, 0.05);
  --sc-e2: 0 2px 4px rgba(29, 39, 48, 0.05), 0 8px 20px rgba(29, 39, 48, 0.06);
  --sc-e3: 0 4px 8px rgba(29, 39, 48, 0.06), 0 22px 50px rgba(29, 39, 48, 0.10);
  --gm-glow: 0 2px 6px rgba(50, 129, 188, 0.14), 0 14px 34px rgba(50, 129, 188, 0.16);

  /* The button's three states. Every one pairs an offset, blurred shadow, which
     is the depth, with a zero-offset accent ring, which is the light coming off
     the edge. The ring alone would be a halo; the shadow alone would be flat. */
  --gm-cta-rest: 0 1px 2px rgba(29, 39, 48, 0.10),
                 0 2px 6px rgba(29, 39, 48, 0.07);
  --gm-cta-lift: 0 0 0 1px rgba(50, 129, 188, 0.38),
                 0 0 0 7px rgba(50, 129, 188, 0.13),
                 0 5px 12px rgba(24, 68, 102, 0.26),
                 0 14px 32px rgba(24, 68, 102, 0.20);
  --gm-cta-press: 0 0 0 1px rgba(50, 129, 188, 0.30),
                  0 1px 3px rgba(29, 39, 48, 0.18);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--gm-cream);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(50, 129, 188, 0.22); color: var(--sc-ink); }
:focus-visible {
  outline: 2px solid var(--gm-accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------- type ramp -- */
.display {
  font-family: var(--sc-font-display);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
  color: var(--sc-ink);
}
.display--xl { font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4.3rem); }
.display--lg { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); }
.display--md { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
.display em { font-style: italic; color: var(--sc-accent); }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.32rem);
  line-height: 1.5;
  color: var(--sc-ink-soft);
  max-width: 52ch;
  text-wrap: pretty;
  margin: 0;
}

.chapter-mark {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gm-accent-deep);
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.chapter-mark::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gm-accent-deep);
  flex: none;
}

.plate-label {
  margin: 0 0 var(--sc-6);
  font-family: var(--sc-font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gm-accent-deep);
}

/* ---------------------------------------------------------------- chrome -- */
/* The folio. No fixed bar: this grammar navigates by knowing where you are. */
.folio {
  position: fixed;
  left: max(1rem, calc((100vw - var(--sc-maxw)) / 2 - 5.5rem));
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  writing-mode: vertical-rl;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-muted-lg);
  opacity: 0;
  transition: opacity 260ms var(--sc-ease-out);
  pointer-events: none;
}
.folio.is-on { opacity: 1; }
.folio__num { color: var(--gm-accent-deep); font-weight: 600; }
.folio__rule { width: 1px; height: 1.6rem; background: var(--sc-hairline-strong); }
.folio__title { max-height: 17rem; overflow: hidden; }

@media (max-width: 1180px) {
  .folio {
    writing-mode: horizontal-tb;
    flex-direction: row;
    align-items: center;
    left: 0; right: 0; top: 0;
    transform: none;
    padding: 0.55rem var(--sc-gutter);
    background: color-mix(in srgb, var(--gm-cream) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sc-hairline);
    font-size: 0.66rem;
  }
  .folio__rule { width: 1.2rem; height: 1px; }
  .folio__title { max-height: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ------------------------------------------------------------ the button -- */
/* One style, one destination, one label. Repeated at natural breaks only. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* #2A6C9E rather than #3281BC as the fill: white on the lighter blue
     measures 4.20:1 and this label is not large text. This one is 5.67:1. */
  background: var(--gm-accent-deep);
  color: #FFFFFF;
  font-family: var(--sc-font-text);
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;                 /* clips the sheen, not the shadow */
  isolation: isolate;
  box-shadow: var(--gm-cta-rest);
  transition: background 150ms var(--sc-ease-out),
              transform 160ms var(--sc-ease-out),
              box-shadow 200ms var(--sc-ease-out);
}
.cta > * { position: relative; z-index: 1; }

/* The sheen. A light crossing the face once per hover, the same idea as the
   light on the hero question, so the page has one vocabulary for it. */
.cta::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: 0;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.26) 50%,
    rgba(255, 255, 255, 0) 66%);
  transform: translateX(-115%);
  pointer-events: none;
}

@keyframes gm-cta-sheen {
  from { transform: translateX(-115%); }
  to   { transform: translateX(115%); }
}

@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    background: var(--gm-accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--gm-cta-lift);
  }
  /* One pass, not a loop, and not a transition: a transition would sweep the
     light back out again when the pointer leaves. */
  .cta:hover::after { animation: gm-cta-sheen 620ms linear; }
}

/* Keyboard reaches the same affordance the pointer does. */
.cta:focus-visible { transform: translateY(-2px); box-shadow: var(--gm-cta-lift); }

.cta:active { transform: translateY(1px); box-shadow: var(--gm-cta-press); }
.cta--lg { font-size: 1.06rem; padding: 1.1rem 2rem; }

@media (prefers-reduced-motion: reduce) {
  .cta, .cta:hover, .cta:focus-visible, .cta:active { transform: none; }
  .cta::after { display: none; }
}

.cta-note {
  font-size: 0.86rem;
  color: var(--sc-ink-soft);
}

.mid-act {
  margin: var(--sc-8) 0 0;
  display: flex;
  justify-content: flex-start;
}

/* ------------------------------------------------------- chapter grounds -- */
/* Painted per section and hard cut. This grammar refuses interpolation. */
.chapter { position: relative; }
.chapter[data-ground="cream"] { background: var(--gm-cream); }
/* The deeper cream is a lighter ground to sit on than it looks, so secondary
   text steps down one notch here or it lands at 4.49:1 and misses the floor. */
.chapter[data-ground="deep"] {
  background: var(--gm-cream-deep);
  --sc-ink-soft: #5F6771;
  --gm-muted-lg: #676F79;
}

.chapter + .chapter[data-ground="cream"],
.chapter + .chapter[data-ground="deep"] {
  border-top: 1px solid var(--sc-hairline);
}

/* ============================================================ TITLE PAGE == */
/* A title page is one screen. The button is above the fold by construction,
   not by luck. The grammar wants no media above the fold; this one keeps it,
   because the product is a physical-looking document and showing it is the
   fastest honest thing the page can do. Deviation recorded in BRIEF.md. */
.chapter--title {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 2.2rem + 4vw, 5rem) clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  overflow: clip;
}

.hero {
  display: grid;
  /* The headline sets at 4.5rem, so the type column has to be wide enough to
     hold "The workbook that turns" on one line. Everything else follows. */
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  align-items: center;
  flex: 1 1 auto;
}

.hero__type { max-width: 44rem; }
.hero__type > * + * { margin-top: var(--sc-5); }
.hero__type > .hero__h { margin-top: 0; }
.hero__type .lede { margin-top: var(--sc-6); max-width: 44ch; }
.hero__act { margin-top: var(--sc-7); }

.mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--sc-6);
  padding-bottom: var(--sc-4);
  border-bottom: 1px solid var(--sc-hairline);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.mark img { width: 26px; height: 26px; border-radius: 6px; }

/* The headline sets in three deliberate blocks rather than as one ragged
   paragraph, so the quoted question is the object it should be and the roman
   lines top and tail it. */
.hero__h-a, .hero__h-q, .hero__h-b { display: block; }
.hero__h-q {
  font-style: italic;
  color: var(--sc-accent);
  /* The opening quotation mark is optically outside the measure. Hanging it
     is what makes the left edge look set rather than nudged. */
  text-indent: -0.36em;
}
.hero__h-b { margin-top: 0.06em; }

/* A light travelling the question, one word at a time, read off the same
   --hero-p that fans the workbook stack. Two effects, one number, so they can
   never drift apart.

   --g is a triangle rather than a ramp: the word lifts as the light arrives
   and settles as it leaves. It rests at full legibility, so the landing view
   is never a dimmed headline waiting to be scrolled into. */
.hero__h-q .w {
  --g: calc(
    clamp(0, calc((var(--hero-p, 0) - var(--a)) / 0.075), 1) -
    clamp(0, calc((var(--hero-p, 0) - var(--b)) / 0.075), 1)
  );
  display: inline-block;
  /* Room for the italic overhang and for the pool to fall outside the glyphs.
     No negative margin to claw it back: 0.12em a side is about one space, so
     that closed every gap in the question. */
  padding-inline: 0.14em;
  /* Ink deepens under the light, so contrast only ever improves. */
  color: color-mix(in oklab,
    #16456B calc(var(--g) * 100%), var(--sc-accent));
  /* The pool of light on the paper, not a glow around the letters. Warm
     rather than pure white, so it reads as a lamp on a page. */
  background-image:
    radial-gradient(ellipse 118% 84% at 50% 52%,
      rgba(255, 253, 246, calc(var(--g) * 1)) 0%,
      rgba(255, 253, 246, 0) 62%),
    radial-gradient(ellipse 175% 135% at 50% 52%,
      rgba(255, 251, 238, calc(var(--g) * 0.75)) 0%,
      rgba(255, 251, 238, 0) 70%);
  transform: translateY(calc(var(--g) * -4px)) scale(calc(1 + var(--g) * 0.035));
  will-change: transform, background-image;
}

@media (prefers-reduced-motion: reduce) {
  .hero__h-q .w { --g: 0; transform: none; }
}


/* ---- the stack --------------------------------------------------------- */
.hero__stack {
  justify-self: end;
  /* Wider than its column and pushed past the gutter. One element crossing
     another's boundary buys more depth than any shadow does. */
  width: min(134%, 34rem);
  margin-right: clamp(-5rem, -1.5rem - 3vw, 0rem);
  margin-top: clamp(1rem, 0.5rem + 2.5vw, 3.5rem);
  perspective: 1400px;
  transform: rotateX(calc(var(--ty, 0) * 1deg)) rotateY(calc(var(--tx, 0) * 1deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.hero__stack-in {
  position: relative;
  aspect-ratio: 1 / 1.1;
  transform: translate3d(0, calc(var(--hero-p, 0) * -46px), 0)
             scale(calc(1 - var(--hero-p, 0) * 0.05));
  will-change: transform;
}
.hero__page {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58%;
  border-radius: 5px;
  overflow: hidden;
  background: var(--sc-surface);
  transform-origin: 50% 100%;
}
.hero__page img { display: block; width: 100%; height: auto; }

/* Closed at rest, fanning as the page moves. --f is the fan amount. */
.hero__page { --f: var(--hero-p, 0); }
.hero__page--a {
  z-index: 3;
  box-shadow: var(--sc-e3);
  transform: translate(-50%, -50%)
             rotate(calc(-2.2deg + var(--f) * 2.6deg))
             translate(calc(var(--f) * 13%), calc(var(--f) * 3%));
}
.hero__page--b {
  z-index: 2;
  box-shadow: var(--sc-e2);
  border: 1px solid var(--sc-hairline);
  transform: translate(-50%, -50%)
             rotate(calc(-5.5deg + var(--f) * -4deg))
             translate(calc(var(--f) * -22%), calc(var(--f) * -6%));
}
.hero__page--c {
  z-index: 1;
  box-shadow: var(--sc-e1);
  border: 1px solid var(--sc-hairline);
  transform: translate(-50%, -50%)
             rotate(calc(-8.5deg + var(--f) * -9deg))
             translate(calc(var(--f) * -48%), calc(var(--f) * 4%));
}

/* Touch has no pointer to tilt toward and a phone has no room to fan, so the
   stack holds one clean arrangement there. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero__stack { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__stack-in { transform: none; }
  .hero__page { --f: 0.55; }
}

/* ---- the foot ---------------------------------------------------------- */
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1rem, 0.5rem + 2vw, 2.4rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0;
  padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--sc-ink-soft);
}
.hero__foot span { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero__foot span + span::before {
  content: "";
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gm-muted-lg);
}

@media (max-width: 1000px) {
  .chapter--title { min-height: 0; }
  .hero { grid-template-columns: 1fr; gap: clamp(2.5rem, 2rem + 4vw, 4rem); }
  .hero__type { max-width: none; }
  .hero__stack {
    width: min(24rem, 82%);
    justify-self: start;
    margin-right: 0;   /* the desktop bleed has nothing to bleed past here */
  }
  .hero__stack-in { aspect-ratio: 1 / 1.05; }
}

/* The headline keeps its three blocks at every width. Running the italic
   question inline lands the closing quotation mark hard against the next word,
   because that glyph carries almost no right bearing at this size. */
@media (max-width: 620px) {
  .hero__h-q { text-indent: 0; }
  .hero__h-q .w { padding-inline: 0.07em; }
  .hero__stack { width: min(19rem, 84%); }
  .hero__page { width: 60%; }
  /* Tighter fan: the wide one puts the back page past the left edge. */
  .hero__page--a { transform: translate(-50%, -50%) rotate(-2.5deg) translate(11%, 0); }
  .hero__page--b { transform: translate(-50%, -50%) rotate(-6deg) translate(-11%, -3%); }
  .hero__page--c { transform: translate(-50%, -50%) rotate(-9.5deg) translate(-26%, 2%); }
}

/* ========================================================== PRAISE PLATE == */
.chapter--praise { padding-block: clamp(2.6rem, 2rem + 3.2vw, 4.4rem); }

.praise {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sc-4);
}

/* Three short quotes, two longer ones, then Gerald's across the full width.
   Every row tiles exactly, so there is never a blank trailing cell. */
.praise__item          { grid-column: span 2; }
.praise__item--wide    { grid-column: span 3; }
.praise__item--feature { grid-column: span 6; }

/* The cards are dealt onto the page rather than simply appearing: each one
   arrives on its own window off the section's --p, alternating which side it
   settles from. The entry transform lives on the li and the hover lift on the
   card inside it, because two transforms on one node means losing one. */
.praise__item {
  --g: clamp(0, calc((var(--p, 0) - var(--a)) / var(--d)), 1);
  opacity: calc(0.28 + var(--g) * 0.72);
  transform:
    translate3d(calc((1 - var(--g)) * var(--dir, -14px)), calc((1 - var(--g)) * 26px), 0)
    rotate(calc((1 - var(--g)) * var(--rot, -0.7deg)))
    scale(calc(0.975 + var(--g) * 0.025));
  will-change: transform, opacity;
}
.praise__item:nth-child(even) { --dir: 14px; --rot: 0.7deg; }

.praise__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sc-4);
  padding: var(--sc-5) var(--sc-6);
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e1);
  transition: transform 160ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .praise__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sc-e2);
  }
}

.praise blockquote { margin: 0; }
.praise blockquote p {
  margin: 0;
  font-family: var(--gm-font-work);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--sc-ink);
  text-wrap: pretty;
}
.praise blockquote p::before { content: "“"; }
.praise blockquote p::after  { content: "”"; }

/* The one that gets the width gets the size to go with it. */
.praise__item--feature .praise__card { padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); }
.praise__item--feature blockquote p {
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.42rem);
  line-height: 1.45;
  max-width: 54ch;
}

.praise__who {
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.84rem;
}
.praise__name { font-weight: 600; color: var(--sc-ink); }
.praise__role { color: var(--sc-ink-soft); }

.praise__count {
  margin: var(--sc-6) 0 0;
  padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
  font-size: 0.95rem;
  color: var(--sc-ink-soft);
}
.praise__count strong {
  font-weight: 600;
  color: var(--gm-accent-deep);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .praise__item { --g: 1; transform: none; opacity: 1; }
  .praise__card { transition: none; }
}

@media (max-width: 900px) {
  .praise { grid-template-columns: repeat(2, 1fr); }
  .praise__item, .praise__item--wide { grid-column: span 1; }
  .praise__item--feature { grid-column: span 2; }
}
@media (max-width: 560px) {
  .praise { grid-template-columns: 1fr; }
  .praise__item--feature { grid-column: span 1; }
}

/* ================================================ CHAPTER ONE, THE PEAK === */
.markup {
  display: grid;
  place-items: center;
  padding: clamp(3rem, 2rem + 5vw, 6rem) var(--sc-gutter);
}
.markup__inner {
  width: 100%;
  max-width: var(--sc-maxw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  min-height: min(46rem, 78svh);
}
.markup__head { display: flex; flex-direction: column; gap: var(--sc-4); max-width: 40ch; }
.markup__intro { margin: 0; color: var(--sc-ink-soft); max-width: 48ch; }

/* The field holds the panel, the leaders and the notes in one positioning
   context, so the SVG can aim at measured clause boxes. */
.markup__field {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
  gap: clamp(2.5rem, 1rem + 6vw, 6rem);
  align-items: start;
}

.vague {
  margin: 0;
  background: var(--gm-navy);
  color: var(--gm-navy-ink);
  border-radius: var(--sc-r-md);
  padding: clamp(1.8rem, 1.1rem + 3vw, 3.4rem);
  box-shadow: var(--sc-e3);
}
.vague__line {
  margin: 0;
  font-family: var(--gm-font-work);
  font-weight: 500;
  font-size: clamp(1.45rem, 1rem + 1.9vw, 2.7rem);
  line-height: 1.4;
  color: var(--gm-navy-ink);
  text-wrap: pretty;
}

/* Each clause carries its own window. The underline draws itself across it,
   then the clause dims, because the point is that it stopped being enough. */
.clause {
  position: relative;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-image: linear-gradient(var(--sc-accent), var(--sc-accent));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.04em);
  background-size: calc(100% * var(--g, 0)) 2px;
  transition: color 220ms var(--sc-ease-out);
}
/* --a is where the clause starts drawing, --d how long it takes. Both are
   act progress. Division needs a plain number divisor, which is why the
   duration is stored rather than derived from an end value. */
.clause[data-clause="1"] { --a: .13; --d: .12; }
.clause[data-clause="2"] { --a: .27; --d: .12; }
.clause[data-clause="3"] { --a: .41; --d: .12; }
.clause[data-clause="4"] { --a: .55; --d: .12; }
.clause {
  --g: clamp(0, calc((var(--sc-p, 0) - var(--a)) / var(--d)), 1);
  color: var(--gm-navy-ink);
}
/* Once a clause has been questioned it steps back. 7.4:1 on the navy at its
   dimmest, so it is still comfortably readable, just no longer the subject. */
@supports (color: color-mix(in oklab, white 50%, black)) {
  .clause {
    color: color-mix(in oklab,
      var(--gm-navy-soft) calc(var(--g) * 100%), var(--gm-navy-ink));
  }
}

/* The leaders. Drawn into measured geometry by page.js, revealed by --sc-p. */
.markup__leaders {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.markup__leaders path {
  fill: none;
  stroke: var(--sc-accent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: calc(
    var(--len, 400) *
    (1 - clamp(0, calc((var(--sc-p, 0) - var(--a)) / var(--d, .07)), 1))
  );
  opacity: 0.75;
}
.markup__leaders circle {
  fill: var(--sc-accent);
  opacity: clamp(0, calc((var(--sc-p, 0) - var(--e, 1)) / 0.03), 1);
}

.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 0.6rem + 1.6vw, 2.2rem);
}
.note {
  display: flex;
  gap: 0.85rem;
  --g: clamp(0, calc((var(--sc-p, 0) - var(--a)) / var(--d)), 1);
  opacity: var(--g);
  transform: translateY(calc(10px * (1 - var(--g))));
}
.note__tick {
  flex: none;
  width: 2px;
  align-self: stretch;
  background: var(--sc-accent);
  border-radius: 2px;
  opacity: 0;
}
.note p {
  margin: 0;
  font-family: var(--gm-font-work);
  font-weight: 500;
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.24rem);
  line-height: 1.45;
  color: var(--sc-ink);
  text-wrap: pretty;
}

.markup__verdict {
  margin: 0;
  max-width: 44ch;
  font-family: var(--gm-font-work);
  font-weight: 600;
  font-size: clamp(1.16rem, 1rem + 0.8vw, 1.7rem);
  line-height: 1.35;
  color: var(--sc-ink);
}

/* Below 860px there is no margin to put an annotation in, so the leaders are
   dropped and each note docks under the sentence with its own tick. */
@media (max-width: 860px) {
  .markup__field { grid-template-columns: 1fr; gap: var(--sc-7); }
  .markup__leaders { display: none; }
  .note__tick { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .clause { --g: 1; }
  .note { --g: 1; opacity: 1; transform: none; }
  .note__tick { opacity: 1; }
  .markup__leaders path { stroke-dashoffset: 0; }
  .markup__leaders circle { opacity: 1; }
}

/* ============================================== CHAPTER TWO, THE GAP ====== */
.chapter--gap { padding-block: clamp(3.2rem, 2.4rem + 4.5vw, 6.4rem); }
.gap { max-width: var(--gm-narrow); margin-inline: auto; }
.gap > * + * { margin-top: var(--sc-5); }
.gap > .display--lg { margin-top: var(--sc-4); }
.gap__body {
  margin-top: var(--sc-7);
  font-size: 1.08rem;
  line-height: 1.72;
  color: var(--sc-ink);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ========================================= CHAPTER THREE, THE SOLUTION ==== */
.chapter--how { padding-block: clamp(3.2rem, 2.4rem + 4.5vw, 6.4rem); }
/* The one centred chapter on the page. With the prose gone the ladder is the
   whole section, so the heading centres over it rather than sitting off to the
   left of a table it no longer introduces. Varying the anchor per chapter is
   the point; every other chapter still leads from the left. */
.how__head {
  max-width: 30ch;
  margin: 0 auto var(--sc-7);
  text-align: center;
}
.how__head > * + * { margin-top: var(--sc-4); }
.how__head .chapter-mark { justify-content: center; }
.ladder__note { text-align: center; }

/* The ladder carries the whole section, so it is centred and it fills a rung
   at a time. --p comes from the page's own section-progress driver, since a
   flow section has no engine progress of its own. */
.ladder {
  list-style: none;
  margin: var(--sc-8) auto 0;
  padding: 0;
  max-width: 44rem;
  border-top: 1px solid var(--sc-hairline);
}
.ladder li {
  --g: clamp(0, calc((var(--p, 0) - var(--a)) / var(--d)), 1);
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--sc-4);
  align-items: baseline;
  padding: 1.05rem clamp(0.75rem, 0.4rem + 1vw, 1.4rem);
  border-bottom: 1px solid var(--sc-hairline);
  opacity: calc(0.34 + var(--g) * 0.66);
  background: rgba(255, 255, 255, calc(var(--g) * 0.92));
  box-shadow: 0 1px 2px rgba(29, 39, 48, calc(var(--g) * 0.05)),
              0 10px 26px rgba(29, 39, 48, calc(var(--g) * 0.07));
  transform: translateX(calc((1 - var(--g)) * -6px));
}
.ladder__step {
  font-family: var(--gm-font-work);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--sc-ink);
}
.ladder__what { font-size: 0.98rem; color: var(--sc-ink-soft); }
.ladder__mine .ladder__step { color: var(--gm-accent-deep); }
.ladder__mine .ladder__what { color: var(--sc-ink); }
.ladder__mine { box-shadow: inset 3px 0 0 rgba(50, 129, 188, calc(var(--g) * 0.85)); }

.ladder__note {
  max-width: 44rem;
  margin: var(--sc-5) auto 0;
  font-size: 0.88rem;
  color: var(--sc-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .ladder li { --g: 1; transform: none; }
}
@media (max-width: 640px) {
  .ladder li { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* the two workbook page images, in their own column with captions */
.pages {
  margin-top: clamp(2.5rem, 1.8rem + 4vw, 5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 0.6rem + 2vw, 2.6rem) clamp(1rem, 0.5rem + 2vw, 2.4rem);
  align-items: start;
}
.pages__fig { margin: 0; }
.pages__fig--a { grid-column: 1 / span 4; }
.pages__fig--b { grid-column: 5 / span 4; margin-top: clamp(1.5rem, 4vw, 4rem); }
.pages__fig--c { grid-column: 9 / span 4; }

@media (max-width: 640px) {
  .pages__shot { transform: none !important; }
}
.pages__shot {
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--sc-e2);
}
.pages__shot img { display: block; width: 100%; height: auto; }
.pages figcaption {
  margin-top: var(--sc-3);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}

@media (max-width: 860px) and (min-width: 641px) {
  .pages { grid-template-columns: repeat(2, 1fr); }
  .pages__fig--a { grid-column: 1 / span 1; }
  .pages__fig--b { grid-column: 2 / span 1; margin-top: 0; }
  .pages__fig--c { grid-column: 1 / span 2; max-width: 22rem; }
}

/* On a phone, two workbook pages side by side are proof nobody can read. They
   become a swipe strip instead: each page near full width, the next one
   peeking so the strip announces itself, and the section costs one page of
   height rather than three. */
@media (max-width: 640px) {
  .pages {
    display: flex;
    grid-template-columns: none;
    gap: var(--sc-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sc-gutter);
    margin-inline: calc(var(--sc-gutter) * -1);
    padding-inline: var(--sc-gutter);
    padding-bottom: var(--sc-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .pages__fig {
    flex: 0 0 min(82%, 20rem);
    scroll-snap-align: start;
    margin-top: 0 !important;
  }
  .pages__fig--a, .pages__fig--b, .pages__fig--c { grid-column: auto; max-width: none; }
  .pages figcaption { min-height: 4.5em; }
}

/* ========================================= CHAPTER FOUR, THE TWELVE ======= */
.chapter--contents { padding-block: clamp(3.2rem, 2.4rem + 4.5vw, 6.4rem); }
.contents__head { max-width: 30ch; margin-bottom: var(--sc-7); }
.contents__head > * + * { margin-top: var(--sc-4); }
.contents__hint { margin: 0; font-size: 0.88rem; color: var(--sc-ink-soft); }

.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sc-hairline);
}
.toc__row { border-bottom: 1px solid var(--sc-hairline); }

.toc__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 1.25rem;
  gap: var(--sc-3);
  align-items: baseline;
  padding: 0.92rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: color 150ms var(--sc-ease-out);
}
.toc__num {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
  transition: color 150ms var(--sc-ease-out);
}
.toc__title {
  font-family: var(--gm-font-work);
  font-weight: 600;
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.24rem);
  line-height: 1.3;
  color: var(--sc-ink);
  text-wrap: balance;
}
.toc__sign {
  justify-self: end;
  align-self: center;
  position: relative;
  width: 11px; height: 11px;
  opacity: 0.55;
  transition: opacity 150ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.toc__sign::before,
.toc__sign::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--gm-accent-deep);
}
.toc__sign::before { width: 11px; height: 1.5px; }
.toc__sign::after  { width: 1.5px; height: 11px; transition: transform 200ms var(--sc-ease-out); }

@media (hover: hover) and (pointer: fine) {
  .toc__btn:hover .toc__title { color: var(--gm-accent-deep); }
  .toc__btn:hover .toc__num { color: var(--gm-accent-deep); }
  .toc__btn:hover .toc__sign { opacity: 1; }
}
.toc__btn[aria-expanded="true"] .toc__sign { opacity: 1; }
.toc__btn[aria-expanded="true"] .toc__sign::after { transform: scaleY(0); }
.toc__btn[aria-expanded="true"] .toc__title { color: var(--gm-accent-deep); }

/* grid-template-rows is the one animatable way to open to content height
   without animating height itself. */
.toc__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--sc-ease-out),
              opacity 200ms var(--sc-ease-out);
  opacity: 0;
}
.toc__sub > * { overflow: hidden; }
.toc__row.is-open .toc__sub { grid-template-rows: 1fr; opacity: 1; }

.toc__sub p {
  margin: 0;
  max-width: 68ch;
  padding: 0 1.25rem 1.05rem 4rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
/* Parts two and nine carry an extra line, because they are the two things a
   coach who has seen generic game model content before will not expect. */
.toc__extra {
  padding-top: 0.7rem !important;
  color: var(--sc-ink) !important;
  border-top: 1px solid var(--sc-hairline);
  margin: 0 1.25rem 0 4rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.toc__row--flag .toc__num { color: var(--gm-accent-deep); }

@media (max-width: 780px) {
  .toc__btn { grid-template-columns: 2.4rem minmax(0, 1fr) 1.25rem; }
  .toc__sub p { padding-left: 2.9rem; }
  .toc__extra { margin-left: 2.9rem !important; }
}

/* ============================================ CHAPTER FIVE, WHO FOR ======= */
.chapter--fit { padding-block: clamp(3.2rem, 2.4rem + 4.5vw, 6.4rem); }
.chapter--fit .display--lg { margin-top: var(--sc-4); max-width: 22ch; }

.fit {
  margin-top: var(--sc-8);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 0.5rem + 4vw, 3.5rem);
}
.fit__col {
  padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  border-radius: var(--sc-r-md);
  border: 1px solid var(--sc-hairline);
}
/* The for column lights as it arrives. Same --p driver as the ladder. */
.fit__col--for {
  --g: clamp(0, calc((var(--p, 0) - 0.05) / 0.4), 1);
  background: rgba(255, 255, 255, calc(0.25 + var(--g) * 0.75));
  border-color: rgba(50, 129, 188, calc(var(--g) * 0.34));
  box-shadow: 0 1px 2px rgba(29, 39, 48, calc(var(--g) * 0.05)),
              0 14px 34px rgba(50, 129, 188, calc(var(--g) * 0.14));
}
@media (prefers-reduced-motion: reduce) { .fit__col--for { --g: 1; } }
.fit__col--not { background: transparent; }

.fit__head {
  margin: 0 0 var(--sc-5);
  font-family: var(--gm-font-work);
  font-weight: 600;
  font-size: 1.16rem;
  color: var(--sc-ink);
}
.fit__col--for .fit__head { color: var(--gm-accent-deep); }

.fit__list { margin: 0; padding: 0; list-style: none; }
.fit__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.fit__list li + li { margin-top: var(--sc-4); }
.fit__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gm-accent-deep);
}
.fit__col--not .fit__list li::before {
  background: none;
  border: 1px solid var(--gm-muted-lg);
}

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

/* ============================================== CHAPTER SIX, AUTHOR ======= */
.chapter--who { padding-block: clamp(3.2rem, 2.4rem + 4vw, 6rem); }
.chapter--who .display--lg { margin-top: var(--sc-4); }

.who {
  margin-top: var(--sc-8);
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(1.5rem, 0.8rem + 3vw, 3.2rem);
  align-items: start;
  padding-top: var(--sc-7);
  border-top: 1px solid var(--sc-hairline-strong);
}

.who__figure { margin: 0; }
.who__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  box-shadow: var(--sc-e2);
}

.who__body { max-width: 62ch; padding-top: 0.15rem; }
.who__lead {
  margin: 0;
  font-family: var(--gm-font-work);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.55rem);
  line-height: 1.36;
  color: var(--sc-ink);
  text-wrap: pretty;
}
.who__prose {
  margin: var(--sc-6) 0 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .who { grid-template-columns: 1fr; }
  .who__figure { max-width: 17rem; }
}

/* ============================================ CHAPTER SEVEN, OFFER ======== */
.chapter--offer { padding-block: clamp(3.2rem, 2.4rem + 4.5vw, 6.4rem); }
.chapter--offer .display--lg { margin-top: var(--sc-4); max-width: 20ch; }

.offer {
  margin-top: var(--sc-8);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
  gap: clamp(1.5rem, 0.5rem + 4vw, 4rem);
  align-items: start;
  padding-top: var(--sc-7);
  border-top: 1px solid var(--sc-hairline-strong);
}
.offer__lead { margin: 0; max-width: 56ch; color: var(--sc-ink); text-wrap: pretty; }
.offer__list { margin: var(--sc-6) 0 0; padding: 0; list-style: none; }
.offer__list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--sc-hairline);
  font-size: 0.96rem;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.offer__list li:first-child { border-top: 1px solid var(--sc-hairline); }

.offer__price {
  padding: var(--sc-6);
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e1);
}
.offer__fig {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(3.2rem, 2.4rem + 3vw, 4.8rem);
  line-height: 1;
  color: var(--sc-ink);
  font-variant-numeric: tabular-nums;
}
.offer__cur { color: var(--sc-accent); }
.offer__terms {
  margin: var(--sc-3) 0 0;
  font-size: 0.88rem;
  color: var(--sc-ink-soft);
}

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

/* ================================================= COLOPHON, THE CLOSE ==== */
.close {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) var(--sc-gutter);
  background: var(--gm-cream);
}
.close__plate {
  width: 100%;
  max-width: 62rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
  grid-template-areas: "words sheet" "foot sheet";
  gap: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);
  align-items: start;
  padding: clamp(2rem, 1.5rem + 3vw, 3.6rem);
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3);
}
.close__words { grid-area: words; align-self: start; }
.close__foot  { grid-area: foot; align-self: end; }
.mark--close { margin-bottom: var(--sc-6); }
.close__plate .display--lg { max-width: 15ch; }
.close__act { margin: var(--sc-7) 0 0; }
.close__note { margin: var(--sc-4) 0 0; font-size: 0.88rem; color: var(--sc-ink-soft); }

.close__rule { height: 1px; border: 0; background: var(--sc-hairline); margin: var(--sc-7) 0 var(--sc-6); }
.close__soft {
  margin: 0;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.close__legal { margin: var(--sc-6) 0 0; font-size: 0.78rem; color: var(--gm-muted-lg); }

/* ---- the sheet, drawn ---------------------------------------------------- */
.close__sheet {
  grid-area: sheet;
  margin: 0;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 18.5rem;
}
.pitch {
  display: block;
  width: 100%;
  height: auto;
  /* A faint frame so the panel reads as a blank sheet waiting rather than as
     something that failed to load, which matters because a pinned stage is
     visible for a viewport before its progress leaves zero. */
  background: #FCFAF5;
  border: 1px solid var(--sc-hairline);
  border-radius: 6px;
}
.pitch path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.pitch__line,
.pitch__x path,
.pitch__shaft {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: calc(
    var(--len, 300) *
    (1 - clamp(0, calc((var(--sc-p, 0) - var(--a)) / var(--d)), 1))
  );
}
.pitch__line { stroke: var(--sc-ink-soft); stroke-width: 1.2; opacity: 0.8; }
.pitch__x path { stroke: var(--sc-ink); stroke-width: 2.4; }
.pitch__shaft { stroke: var(--sc-accent); stroke-width: 2; }
/* .pitch path sets fill:none at (0,1,1) and would beat a bare .pitch__head at
   (0,1,0), which left every arrow as a headless curve. */
.pitch .pitch__head {
  fill: var(--sc-accent);
  stroke: none;
  opacity: clamp(0, calc((var(--sc-p, 0) - var(--a) - var(--d)) / 0.02), 1);
}

.close__caption {
  margin: var(--sc-4) 0 0;
  font-size: 0.82rem;
  color: var(--sc-ink-soft);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .pitch__line, .pitch__x path, .pitch__shaft { stroke-dashoffset: 0; }
  .pitch__head { opacity: 1; }
}

@media (max-width: 820px) {
  .close__plate {
    grid-template-columns: 1fr;
    grid-template-areas: "words" "sheet" "foot";
  }
  .close__sheet { max-width: 15rem; margin-top: var(--sc-5); }
  .close__foot { align-self: start; }
}

/* ------------------------------------------------------------ reveal fix -- */
/* clip-path measures the border box, so a reveal on a figure gets its own
   wrapper and the type inside keeps its own box. */
[data-sc-reveal] { will-change: clip-path; }

@media (prefers-reduced-motion: reduce) {
  .cta, .toc__sub, .toc__sign, .toc__btn { transition: none; }
}