/* Light Minds Lab site styles.
   Palette and type are lifted from covers/make_cover.py and the interior
   style guide, so the site and the shelf agree. Flat color, hairline rules,
   no gradients, no drop shadows. The same rules the covers are built under. */

:root {
  /* Grounds: the covers' warm off-white, and a card white lifted off it. */
  --ground:      #FFF7E8;
  --surface:     #FFFCF4;
  --sunken:      #F6EAD1;

  /* Ink. The near-black is the space book's field, not a neutral gray. */
  --ink:         #141B3D;
  --ink-soft:    #565B7A;
  --ink-faint:   #8A8397;
  --rule:        #E7DCC4;
  --rule-strong: #D3C39C;

  /* The four book fields. */
  --teal:        #0F6E6B;
  --mustard:     #F4C64E;
  --indigo:      #141B3D;
  --green:       #0E9E68;
  --gold:        #FFC53D;
  --plum:        #2A1130;

  /* The buy button. Black on every book, and the cream it prints in, both
     fixed rather than per-book, so the one commercial control on the site
     looks like one control. */
  --black:       #14120C;
  --field-cream: #FFF7E8;

  /* Site accent: the teal of book 1, the first thing that ships. */
  --accent:      #0F6E6B;
  --accent-deep: #0A4F4D;
  --on-accent:   #FFF7E8;

  /* Per-page overrides. A book page repaints these five. */
  --field:       var(--teal);
  --field-ink:   #FFF7E8;
  --field-accent:#FFC53D;
  /* The hero ground sits just off the cover field so the cover reads as an
     object on it. --field-on-accent is the ink for anything on the accent. */
  --field-ground:#1A7673;
  --field-on-accent:#14120C;

  --measure: 34rem;
  --wide: 68rem;

  --display: "Fredoka", "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #14120C;
    --surface:     #1C1A12;
    --sunken:      #241F14;
    --ink:         #FBF3E0;
    --ink-soft:    #C3B79B;
    --ink-faint:   #8F8571;
    --rule:        #332D1E;
    --rule-strong: #4A4230;
    --accent:      #3FBFA6;
    --accent-deep: #7FD9C4;
    --on-accent:   #10201C;
    --field-ink:   #FFF7E8;
  }
}
:root[data-theme="dark"] {
  --ground:      #14120C;
  --surface:     #1C1A12;
  --sunken:      #241F14;
  --ink:         #FBF3E0;
  --ink-soft:    #C3B79B;
  --ink-faint:   #8F8571;
  --rule:        #332D1E;
  --rule-strong: #4A4230;
  --accent:      #3FBFA6;
  --accent-deep: #7FD9C4;
  --on-accent:   #10201C;
  --field-ink:   #FFF7E8;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.1rem, 6.2vw, 3.5rem); }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.25rem); }
h3, .h3 { font-size: clamp(1.15rem, 2.3vw, 1.4rem); }
p { margin: 0; }

/* ---- shell ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: 20px;
}
.measure { max-width: var(--measure); }
/* Anything that is a measurement, a count or a page number is set in lining
   figures of one width, so a column of them reads as a column. */
.k, .num, .badge, .range, .promise-bar, .scale-cap, .list-item .k,
.ramp-row .range, .foot-note { font-variant-numeric: tabular-nums; }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 1rem); }

section { padding-block: clamp(2.75rem, 7vw, 5rem); }
/* The line between sections is a ruler, ticked every quarter inch with a
   longer mark at the inch. Every number in these books is an inch measurement
   - a 0.55 in channel, a 0.28 in channel, an 8.5 x 11 page - so the unit the
   pages are specified in is the unit the site is divided by. 24px is a quarter
   inch at the CSS reference of 96dpi, which is also what the printable sheets
   are laid out against. */
section + section {
  border-top: 1px solid var(--rule);
  background-image:
    repeating-linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 24px);
  background-size: 100% 10px, 100% 5px;
  background-repeat: no-repeat;
  background-position: top left;
}

/* ---- the label device, borrowed from the interior page band ------------- */

.eyebrow {
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* The label leaves the top of the section and becomes marginalia, the way a
   printed page carries its running head out in the margin rather than over the
   text. It rides with its section while that section is on screen, so the
   reader always knows which part of the page they are in. Every body section
   keeps the margin whether or not it has a label, so the text column holds one
   left edge the whole way down. Below 1040px there is no margin to put it in
   and the label goes back over the heading. */
@media (min-width: 1040px) {
  section:not(.hero):not(.field-hero) > .wrap {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  section:not(.hero):not(.field-hero) > .wrap > * { grid-column: 2; }
  section:not(.hero):not(.field-hero) > .wrap > .eyebrow {
    grid-column: 1;
    grid-row: 1 / span 50;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 6.5rem);
    display: block;
    margin: 0;
    padding-top: 0.4rem;
    border-top: 2px solid var(--ink);
    color: var(--ink);
    line-height: 1.35;
    text-wrap: balance;
  }
  section:not(.hero):not(.field-hero) > .wrap > .eyebrow::after { display: none; }
}

/* ---- header ------------------------------------------------------------ */

/* Every cover in the series carries the same line along its top edge, above
   the title and in the smallest type on the jacket. The site carries it in the
   same place. It scrolls away; only the row with the wordmark and the nav
   stays on screen. */
.masthead {
  background: var(--ink);
  color: var(--ground);
}
.masthead .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-block: 0.45rem;
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.masthead b { font-weight: 800; }
.masthead span { opacity: 0.66; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .masthead span { display: none; } }

/* The head closes on the ruler, not on a hairline, so the first edge a reader
   meets is the unit the rest of the page is divided by. */
.site-head {
  border-bottom: 1px solid var(--rule-strong);
  background-color: var(--ground);
  background-image:
    repeating-linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 24px);
  background-size: 100% 10px, 100% 5px;
  background-repeat: no-repeat;
  background-position: bottom left;
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 0.85rem;
  flex-wrap: wrap;
}
/* The logo, drawn as a background rather than an <img>, so a reader in dark
   mode fetches only the copy they can see and the swap below can key off both
   the OS setting and the data-theme attribute. Width is computed from the
   height because the file is 427.86 x 132 and a flex item with only a ratio
   and a height is not sized the same way everywhere. */
.brand {
  --logo-w: 216px;
  display: block;
  width: var(--logo-w);
  height: calc(var(--logo-w) / 3.2414);
  background: url(logo.svg) no-repeat left center / contain;
  text-decoration: none;
  margin-right: auto;
}
/* The name stays in the markup for a screen reader, and for the reader whose
   browser draws no background at all. */
.brand span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand { background-image: url(logo-dark.svg); }
}
:root[data-theme="dark"] .brand { background-image: url(logo-dark.svg); }
/* On a phone the head is two rows, and both sit on the page's center line. */
@media (max-width: 640px) {
  .site-head .wrap { justify-content: center; }
  .brand { margin-right: 0; background-position: center; }
}
.nav { display: flex; gap: 1.35rem; flex-wrap: wrap; font-size: 0.95rem; font-weight: 600; }
.nav a { text-decoration: none; color: var(--ink-soft); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
/* The page you are on is the heavy one. No rule, no underline: the running
   heads and the FOR GROWN-UPS notes own that mark, and a nav that borrowed it
   made the top of every page look ruled twice. */
.nav a[aria-current="page"] { font-weight: 800; }

/* ---- hero -------------------------------------------------------------- */

/* The series signature. It is set the way it is printed along the top of every
   cover: the name in the display face, widely tracked, over a rule, with the
   line underneath saying which part of the series you are looking at. The rule
   takes currentColor so the same block works on a cream page and on a book's
   own field. */
.series-lockup {
  width: max-content; max-width: 100%;
  border-top: 2px solid currentColor;
  padding-top: 0.55rem;
}
.series-lockup--lead { margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }
.series-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 2.1vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.series-sub {
  margin-top: 0.4rem;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field-hero .series-sub { color: inherit; opacity: 0.72; }

.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.3rem); letter-spacing: -0.02em; }
.lede {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 38rem;
  line-height: 1.55;
}

/* ---- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.8rem 1.35rem;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent);
  /* The covers have no pill on them. The badge, the promise strip and the
     buttons all take the corner the cover draws, so a page that sits next to
     a cover looks like it came from the same press. */
  border-radius: 6px;
  text-decoration: none;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--quiet:hover { background: transparent; border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---- book cards -------------------------------------------------------- */

.books-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.25rem);
}
@media (min-width: 900px) { .books-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 460px) { .books-grid { grid-template-columns: minmax(0, 1fr); } }
.book-card { display: flex; flex-direction: column; gap: 0.7rem; text-decoration: none; }
.book-card img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--rule);
}
.book-card .num {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.book-card h2, .book-card h3 { font-size: 1.15rem; }
.book-card p { font-size: 0.93rem; color: var(--ink-soft); line-height: 1.5; }

/* The card with a buy button on it. The title link covers the card, so the
   cover and the blurb still take you to the book page; the button sits above
   that layer and keeps its own target. */
.book-card--buy { position: relative; }
.book-card--buy h2 a {
  color: inherit;
  text-decoration: none;
}
.book-card--buy .stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
}
.book-card--buy p { margin-bottom: 0.2rem; }
/* Pushes the button to the bottom edge, so a row of cards with blurbs of
   different lengths still lines its buttons up. */
.book-card--buy .btn { margin-top: auto; }
.book-card--buy .btn,
.book-card--buy h2 a:focus-visible { position: relative; z-index: 1; }
.btn--sm {
  align-self: flex-start;
  padding: 0.55rem 1.05rem;
  font-size: 0.85rem;
  border-width: 2px;
}
.book-card:hover h2, .book-card:hover h3 { color: var(--accent); }

/* ---- book page hero: the cover field takes the page over ---------------- */

.field-hero {
  background: var(--field-ground);
  color: var(--field-ink);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border: 0;
}
.field-hero .eyebrow { color: var(--field-ink); opacity: 0.8; }
.field-hero .eyebrow::after { background: currentColor; opacity: 0.35; }
.field-hero .lede { color: var(--field-ink); opacity: 0.9; }
.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 760px) {
  .field-grid { grid-template-columns: 300px minmax(0, 1fr); }
}
.field-hero .cover { border-radius: 4px; width: 100%; }
.badge {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 5px;
  background: var(--field-accent);
  color: var(--field-on-accent);
}
.promise-bar {
  display: inline-flex; flex-wrap: wrap; align-self: flex-start;
  max-width: 100%;
  gap: 0.4rem 1.1rem;
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--field-ink);
  color: var(--field);
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
}
.field-hero .btn {
  background: var(--field-accent);
  border-color: var(--field-accent);
  color: var(--field-on-accent);
}
.field-hero .btn:hover { filter: brightness(1.07); }
.field-hero .btn--quiet {
  background: transparent; color: var(--field-ink);
  border-color: color-mix(in srgb, var(--field-ink) 45%, transparent);
}
/* The buy button is black on every book, so one control reads the same way
   across four cover colors. It needs its own .field-hero rule to outrank
   .field-hero .btn, which would otherwise repaint it the accent color.
   The hairline is drawn from the book's own ink, which is cream on the three
   dark covers and near-black on the yellow one, so the edge appears exactly
   where the button would otherwise sink into a dark ground. */
.field-hero .btn--buy {
  background: var(--black);
  color: var(--field-cream);
  border-color: color-mix(in srgb, var(--field-ink) 30%, transparent);
}

/* ---- the ramp: one row per level, width encodes difficulty -------------- */

.ramp { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.ramp-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.35rem 1.25rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
@media (max-width: 560px) { .ramp-row { grid-template-columns: minmax(0, 1fr); } }
.ramp-row .k {
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.ramp-row h3 { font-size: 1.08rem; }
.ramp-row .range {
  font-weight: 700; font-size: 0.85rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.ramp-row p { color: var(--ink-soft); font-size: 0.95rem; grid-column: 2; }
@media (max-width: 560px) { .ramp-row p { grid-column: 1; } }
.ramp-bar {
  grid-column: 2; height: 5px; border-radius: 3px;
  background: var(--field); opacity: 0.85; margin-top: 0.45rem;
}
@media (max-width: 560px) { .ramp-bar { grid-column: 1; } }

/* ---- two-column prose + aside ------------------------------------------ */

.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) { .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.split--narrow-first { }

/* ---- panels ------------------------------------------------------------ */

/* A panel is a boxed note on a printed page, not a UI card: a hairline keyline
   and a square corner, the same frame the sample page and the true-scale strip
   sit in. Nothing on this site is a floating tile with a soft corner. */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: clamp(1.25rem, 3vw, 1.85rem);
}
.panel--sunken { background: var(--sunken); border-color: var(--rule-strong); }

/* The aside is set the way the FOR GROWN-UPS band is set at the foot of every
   activity page: a heavy short rule, then small type. It was a left bar, which
   is what every site does with a callout. */
.note {
  position: relative;
  padding-top: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: var(--measure);
}
.note::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3.5rem; height: 2px;
  background: var(--ink);
}

/* ---- claim list: what's in, what's not --------------------------------- */

/* Four claims, set as a list with hairlines rather than four cards in a grid.
   They are not four separate objects; they are one argument with four lines in
   it, and a card around each says the opposite. */
.claims { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.claim { padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
.claim h2, .claim h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.claim p { color: var(--ink-soft); font-size: 0.95rem; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.ticks li { display: grid; grid-template-columns: 0.95rem minmax(0, 1fr); gap: 0.7rem; }
/* The marker is the tick box printed at the foot of an activity page, the one
   the child fills in when they finish. A check mark is the web's default and
   says nothing about this book. */
.ticks li::before {
  content: "";
  width: 0.95rem; height: 0.95rem;
  margin-top: 0.28rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}
.ticks--no li::before {
  border-color: var(--ink-faint);
  background: linear-gradient(to bottom right,
    transparent calc(50% - 0.9px), var(--ink-faint) calc(50% - 0.9px),
    var(--ink-faint) calc(50% + 0.9px), transparent calc(50% + 0.9px));
}

/* ---- sample page figure ------------------------------------------------ */

figure { margin: 0; }
.sample {
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0;
}
.sample img { border-radius: 2px; }

/* ---- prose (articles) -------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.9rem; }
.prose ul, .prose ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.prose li { line-height: 1.6; }
.prose blockquote {
  margin: 1.75rem 0;
  padding-left: 1.15rem;
  border-left: 4px solid var(--accent);
  color: var(--ink-soft);
  font-style: normal;
}
.prose strong { font-weight: 800; }
.prose .tablewrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.prose th, .prose td {
  text-align: left; padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.prose th { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- article list ------------------------------------------------------ */

.list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.list-item {
  display: grid; gap: 0.35rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.list-item h2, .list-item h3 { font-size: 1.22rem; }
.list-item p { color: var(--ink-soft); font-size: 0.97rem; }
.list-item .k {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-faint);
}
.list-item:hover h2, .list-item:hover h3 { color: var(--accent); }
/* The format line on a card that hands over a file rather than a page. The
   glyph is drawn, so it does not depend on a font carrying an arrow. */
.k--dl { display: inline-flex; align-items: center; gap: 0.4rem; }
.k--dl .dl { flex: none; color: var(--accent); }
.list-item:hover .dl { transform: translateY(1px); }
.dl { transition: transform 0.15s ease; }

/* ---- faq --------------------------------------------------------------- */

.faq { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 500; font-size: 1.1rem;
  padding-block: 1.05rem;
  display: flex; gap: 1rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--accent); font-weight: 600; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding-bottom: 1.15rem; color: var(--ink-soft); max-width: var(--measure); }

/* ---- printable sheet strip --------------------------------------------- */

.sheets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.9rem;
}
.sheets img { border: 1px solid var(--rule-strong); border-radius: 2px; background: #fff; }
/* Under each thumbnail: which activity it is, where in the book it sits, and
   the instruction printed on it, all read off the page at build time. */
.sheet { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.sheet figcaption {
  display: flex; flex-direction: column; gap: 0.1rem;
  font-size: 0.82rem; line-height: 1.35; color: var(--ink-soft);
}
.sheet figcaption b { font-family: var(--display); font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.sheet figcaption span:first-of-type {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---- footer ------------------------------------------------------------ */

/* The page ends on the same ruler it is divided by, so the last edge on the
   page is measured like every edge above it. */
.site-foot {
  border-top: 1px solid var(--rule-strong);
  background-color: var(--sunken);
  background-image:
    repeating-linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 24px);
  background-size: 100% 10px, 100% 5px;
  background-repeat: no-repeat;
  background-position: top left;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.93rem;
}
.foot-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.foot-grid .foot-head {
  margin: 0; font-family: var(--body); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 0.75rem;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.foot-grid a { text-decoration: none; color: var(--ink-soft); }
.foot-grid a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Outside a book hero the buy button keeps the same black. */
.btn--buy {
  background: var(--black);
  color: var(--field-cream);
  border-color: var(--black);
}
.hero-head { max-width: 44rem; }

.hero--proof h1 { max-width: 20em; }

/* ---- the home page ramp proof ------------------------------------------- */
/* Five real pages from Book 1, every one drawn at the same inches-per-page, so
   the corridor in activity 1 can be held against the corridor in activity 100.
   The width of each crop in the row is its real printed width, which is what
   makes the row a measurement rather than a layout. Nothing here may set a
   width on the images, or the comparison stops being true. */
/* The crops are drawn at the size they print, so the row is a measurement.
   It sits on quarter-inch graph paper to say so: the squares are the same
   24px quarter inch the section rules are ticked at, and a reader can count
   them across a corridor. The grid color is fixed rather than themed, because
   the crops are black on white in both themes and the paper has to stay
   white under them. */
/* Graph paper, ruled to the printed page rather than to the screen. --quarter
   is written by the build as the page's quarter inch expressed as a share of
   this row, and cqw turns that share back into pixels at whatever width the
   row ends up, so the cells stay square and stay a quarter inch of the book at
   every viewport. A fixed 24px grid would be a quarter inch of nothing. */
.scale-row {
  position: relative;
  container-type: inline-size;
  display: flex; align-items: center;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background-color: #fff;
  border: 1px solid var(--rule-strong); border-radius: 2px;
}
.scale-row::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, rgba(20, 27, 61, 0.16) 0 1px,
      transparent 1px calc(var(--quarter) * 4)),
    repeating-linear-gradient(to bottom, rgba(20, 27, 61, 0.16) 0 1px,
      transparent 1px calc(var(--quarter) * 4)),
    repeating-linear-gradient(to right, rgba(20, 27, 61, 0.08) 0 1px,
      transparent 1px var(--quarter)),
    repeating-linear-gradient(to bottom, rgba(20, 27, 61, 0.08) 0 1px,
      transparent 1px var(--quarter));
}
.scale-row img { position: relative; }
.scale-legend {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.scale-row img { min-width: 0; height: auto; }   /* a flex item defaults to
   min-width:auto, which for an image is its full pixel width and overrides the
   basis above. Without this every crop draws at full size and runs off the row. */
.scale-cap {
  display: flex; margin-top: 0.7rem;
  padding: 0 clamp(0.75rem, 2vw, 1.25rem);
  font-size: 0.72rem; color: var(--ink-soft);
}
.scale-cap span {
  display: flex; flex-direction: column; gap: 0.15rem;
  text-align: center; font-variant-numeric: tabular-nums;
}
.scale-cap b {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}
/* Five mazes at one scale do not fit a phone. The row scrolls in its own box
   rather than shrinking until the 0.28 in channel closes up. */
.strip-scroll { margin-top: clamp(1.75rem, 4vw, 2.75rem); overflow-x: auto; }
.strip-scroll .scale-row,
.strip-scroll .scale-cap { min-width: 660px; }
/* Activity 100 is the far end of the row and the whole point of it, so the
   scroll needs saying on the screens where it is off the edge. */
.scale-hint {
  margin: 0.6rem 0 0; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--ink-soft);
}
@media (min-width: 760px) { .scale-hint { display: none; } }

.proof-note {
  margin-top: clamp(1.1rem, 2.5vw, 1.5rem);
  max-width: 44rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* The problem statement that opens a book page: a headline, not a hero. */
.problem { font-size: clamp(1.4rem, 3vw, 1.95rem); max-width: 24em; }

/* ---- the home hero ------------------------------------------------------
   The home page sells the series, so it shows the series: one page from each
   of the four books on a single card, and the cover fox cut out and standing
   over its edge. The card is the one place on the site that breaks the flat
   hairline rule, because it is the only thing on the page a parent is meant to
   stop on: a heavy keyline and a hard offset in the pattern book's gold, which
   is an offset and not a blur, so it is still flat color. */
.proof-panel { position: relative; margin-top: clamp(2.5rem, 6vw, 3.75rem); }
.proof-panel .series-row {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 10px 12px 0 var(--mustard);
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: end;
}
@media (max-width: 720px) {
  .proof-panel .series-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Each card is the link to its own book, so the whole card is the target and
   the pill under the caption is the part that looks like one. */
.series-card {
  margin: 0; display: flex; flex-direction: column; gap: 0.9rem;
  text-decoration: none; color: inherit;
}
.series-card img {
  display: block; margin: 0 auto;
  width: auto; max-width: 100%;
  max-height: clamp(96px, 13vw, 185px);
}
.series-card .series-cap {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  text-align: center; line-height: 1.3;
}
.series-card b {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: -0.01em; color: var(--ink);
}
.series-card .says {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.series-go {
  margin-top: 0.7rem;
  padding: 0.35rem 0.85rem;
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.series-card:hover b,
.series-card:focus-visible b { color: var(--accent); }
.series-card:hover .series-go,
.series-card:focus-visible .series-go {
  background: var(--ink); border-color: var(--ink); color: var(--surface);
}
.series-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 10px; }
/* The fox walks along the top edge of the card. No halo and no tilt: it is the
   same animal that is printed on the covers, standing on a line. */
.fox-cut {
  position: absolute; right: 4%; top: 0; z-index: 2;
  width: clamp(120px, 17vw, 240px);
  transform: translateY(-88%);
}
.fox-cut .fox { display: block; width: 100%; height: auto; }
.fx-body   { fill: var(--ink); }
.fx-accent { fill: var(--mustard); }
.fx-eye    { fill: var(--surface); }

/* The headline is the only thing above the panel now, so it carries the
   lockup's weight as well as its own: 120% of the hero size. */
.hero--proof h1 {
  max-width: 13em; line-height: 1.06;
  font-size: clamp(2.88rem, 8.4vw, 5.16rem);
}
.hero--proof .btn { border-radius: 999px; padding-inline: 1.5rem; }
.hero--proof .btn--quiet { border-radius: 999px; border-width: 2px; border-color: var(--ink); }