/* This property — site stylesheet (house design system, warm-storybook register).
   Shell architecture per Slants_Design_System.md §1; class vocabulary kept
   diffable against the Kids Fun Week reference. ALL color comes from the two
   token blocks below — the accents are pulled from the book's own measured
   plate swatches (qa/review/colour_arc.png), because the brand IS the
   illustration style: the night band is the night page's actual #1D2331. */

/* ── fonts (vendored, OFL alongside) ─────────────────────────────────── */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/Fraunces-Display.woff2?v=9dd836ed2a") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito-Body.woff2?v=1c01107ea3") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito-Bold.woff2?v=8c74876e66") format("woff2"); font-weight: 700; font-display: swap; }

/* ── tokens ──────────────────────────────────────────────────────────── */
/* LIGHT ONLY. The dark palette and its toggle
   were removed rather than hidden: a theme nobody can reach is dead code that
   still has to be maintained, and half-removing it is how a stray dark token
   surfaces on one component later. If dark ever comes back it comes back
   whole, from this one block. */
:root {
  --paper: #FBF7F0;
  --panel: #F4EDE1;
  --surface: #FFFFFF;
  --ink: #2A2622;
  --ink-soft: #5C544C;
  --ink-faint: #6E655B;
  --hairline: #E7DFD3;

  --terracotta: #C4623A;
  --terracotta-deep: #9C4526;
  --terracotta-soft: #F6E3D9;
  --ochre: #C99A3C;
  --ochre-deep: #8A6420;
  --ochre-soft: #F3E8CE;
  --sage: #859B72;
  --sage-deep: #55663F;
  --sage-soft: #E6EBDC;
  --teal: #4E7D74;
  --teal-deep: #33584F;
  --teal-soft: #DDEBE6;

  --night: #1D2331;
  --night-ink: #F1EAE0;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow-1: 0 1px 2px rgba(42, 38, 34, 0.06);
  --shadow-2: 0 6px 18px rgba(42, 38, 34, 0.09);
  --shadow-3: 0 16px 44px rgba(42, 38, 34, 0.14);
  --ring: 0 0 0 3px rgba(196, 98, 58, 0.35);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

/* ── base ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--terracotta-deep); text-underline-offset: 2px; }
a:hover { color: var(--terracotta); }
img, svg { max-width: 100%; height: auto; }
::selection { background: var(--ochre-soft); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
input, select, textarea { accent-color: var(--terracotta); }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); color: var(--ink); padding: 0.6rem 1rem; border-radius: var(--r-sm); z-index: 60; }
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: 700 1rem var(--body); text-decoration: none; cursor: pointer;
  border: 0; border-radius: 999px; padding: 0.75rem 1.4rem;
  transition: transform 180ms cubic-bezier(0.2, 0, 0.2, 1), box-shadow 180ms;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-primary { background: var(--terracotta); color: #FFF8F2; }
.btn-primary:hover { color: #FFF8F2; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.btn-ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.92rem; }

/* ── header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms, background 260ms;
}
.site-header.scrolled { border-bottom-color: var(--hairline); }
.header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand-mark { width: 38px; height: 38px; flex: none; }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.01em; }
.nav { display: flex; gap: 1.1rem; margin-left: auto; }
.nav a { text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: 0.95rem; padding: 0.35rem 0.1rem; }
.nav a:hover, .nav a.active { color: var(--ink); }
.nav a.active { box-shadow: inset 0 -2px 0 var(--terracotta); }
.header-actions { display: flex; align-items: center; gap: 0.55rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem; border-radius: 999px; border: 1.5px solid var(--hairline);
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }
/* The Tools dropdown: hover, focus and a click (touch) all open it; a click
   outside or Escape closes it (site.js). On the stacked mobile menu the group
   flattens to plain links. */
.nav-group { position: relative; }
.nav-group-btn { font: 700 0.95rem var(--body); color: var(--ink-soft); background: none; border: 0; padding: 0.35rem 0.1rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-group-btn:hover, .nav-group.active .nav-group-btn, .nav-group.open .nav-group-btn { color: var(--ink); }
.nav-group.active .nav-group-btn { box-shadow: inset 0 -2px 0 var(--terracotta); }
.nav-menu { display: none; position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); min-width: 13rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 0.5rem; z-index: 40; flex-direction: column; gap: 0.1rem; }
.nav-group.open .nav-menu, .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: flex; }
.nav-menu a { padding: 0.55rem 0.7rem; border-radius: var(--r-sm); white-space: nowrap; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: none; }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-group { display: contents; }
  .nav-group-btn { display: none; }
  .nav-menu { display: contents; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 0.5rem 1.25rem 1rem;
    background: var(--paper); border-bottom: 1px solid var(--hairline);
  }
  .nav.open { display: flex; }
  .nav a { padding: 0.65rem 0.1rem; border-bottom: 1px solid var(--hairline); }
  .nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-flex; }
  .header-cta { font-size: 0.82rem; padding: 0.5rem 0.75rem; white-space: nowrap; }
  .header-inner { gap: 0.6rem; }
  .wordmark { font-size: 1.05rem; }
}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center; padding: 3.5rem 0 3rem; }
/* Grid items default to min-width:auto, so a child with an intrinsic width
   (the hero SVG's width attribute) silently forces the whole page wider than
   a phone. min-width:0 lets max-width:100% actually apply. */
.hero > * { min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--teal-deep); background: var(--teal-soft);
  border-radius: 999px; padding: 0.3rem 0.85rem; margin-bottom: 1rem;
}
.hero .lede { font-size: 1.18rem; color: var(--ink-soft); max-width: 34rem; }
.swoosh { position: relative; white-space: nowrap; }
.swoosh::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.28em;
  background: var(--ochre-soft); z-index: -1; border-radius: 999px;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.4rem 0 0.9rem; }
.trust-line { font-size: 0.9rem; color: var(--ink-faint); }
.hero-art-wrap { position: relative; display: grid; place-items: center; }
.hero-art-wrap::before {
  content: ""; position: absolute; inset: 8% 4%;
  background: radial-gradient(closest-side, var(--ochre-soft), transparent 72%);
  border-radius: 48% 52% 55% 45% / 55% 46% 54% 45%;
}
/* The glow is for INLINE SVG hero art, which sits above it because .hero-art
   is positioned. A plain <img> is not positioned, so an absolutely-positioned
   pseudo-element paints ON TOP of it — which washed a bloom across the child's
   chest on the home and product heroes. Raster art owns its own context
   (design system §2), so the blob is simply off wherever the hero is a photo
   or a rendered cover. */
.hero-art-wrap.plain::before { content: none; }
.hero-art { position: relative; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: 2rem; } }

/* ── sections ────────────────────────────────────────────────────────── */
section { padding: 3.25rem 0; }
.section-head { text-align: center; max-width: 44rem; margin: 0 auto 2.25rem; }
.section-head p { color: var(--ink-soft); }
.panel { background: var(--panel); border-radius: var(--r-lg); padding: 2.5rem 2rem; }

/* ── cards ───────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; }
.card {
  position: relative; display: block; background: var(--surface); color: var(--ink);
  text-decoration: none; border-radius: var(--r-md); padding: 1.4rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-1); border: 1px solid var(--hairline); overflow: hidden;
  transition: transform 180ms cubic-bezier(0.2, 0, 0.2, 1), box-shadow 180ms;
}
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--terracotta); }
.cards > .card:nth-child(4n+2)::before { background: var(--teal); }
.cards > .card:nth-child(4n+3)::before { background: var(--ochre); }
.cards > .card:nth-child(4n+4)::before { background: var(--sage); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); color: var(--ink); }
.card h3 { margin-bottom: 0.3rem; }
.card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.card-icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--r-sm); background: var(--terracotta-soft); color: var(--terracotta-deep); margin-bottom: 0.7rem; }
.cards > .card:nth-child(4n+2) .card-icon { background: var(--teal-soft); color: var(--teal-deep); }
.cards > .card:nth-child(4n+3) .card-icon { background: var(--ochre-soft); color: var(--ochre-deep); }
.cards > .card:nth-child(4n+4) .card-icon { background: var(--sage-soft); color: var(--sage-deep); }

/* ── anatomy rows (numbered) ─────────────────────────────────────────── */
.anatomy { display: grid; gap: 1rem; max-width: 46rem; margin: 0 auto; }
.anatomy-row { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.count-tile {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-sm);
  font: 600 1.3rem var(--display); background: var(--terracotta-soft); color: var(--terracotta-deep);
}
.anatomy-row:nth-child(3n+2) .count-tile { background: var(--teal-soft); color: var(--teal-deep); }
.anatomy-row:nth-child(3n+3) .count-tile { background: var(--sage-soft); color: var(--sage-deep); }
.anatomy-row h3 { margin-bottom: 0.15rem; }
.anatomy-row p { color: var(--ink-soft); margin: 0; }

/* ── dual ask (Doc E §12 — both doors on every indexable page) ───────── */
.dual-ask { background: var(--panel); border-radius: var(--r-lg); padding: 2rem 1.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ask { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-1); }
.ask h3 { margin-bottom: 0.35rem; }
.ask p { color: var(--ink-soft); font-size: 0.95rem; min-height: 3.1em; }
.ask-free { border-top: 4px solid var(--sage); }
.ask-buyer { border-top: 4px solid var(--terracotta); }
@media (max-width: 700px) { .dual-ask { grid-template-columns: 1fr; } .ask p { min-height: 0; } }

/* ── CTA band (the night page's own color) ───────────────────────────── */
/* Warm tint, not a dark slab: a near-black band
   in a warm-paper book site read as a foreign object dropped on the page. The
   band still steps forward — deeper ground, a hairline, a shadow — inside the
   palette instead of against it. */
.cta-band {
  background: linear-gradient(160deg, var(--terracotta-soft), var(--ochre-soft));
  color: var(--ink); border-radius: var(--r-lg); padding: 3rem 2rem;
  text-align: center; position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-1);
}
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--ink-soft); max-width: 36rem; margin: 0 auto 1.4rem; }

/* ── footer ──────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--hairline); margin-top: 3rem; padding: 3rem 0 2rem; background: var(--panel); }
.footer-top { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; margin-bottom: 2rem; }
.footer-brand { max-width: 20rem; }
.footer-brand p { color: var(--ink-soft); font-size: 0.95rem; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.footer-cols h4 { font: 700 0.82rem var(--body); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.6rem; }
.footer-cols nav { display: flex; flex-direction: column; gap: 0.35rem; min-width: 9rem; }
.footer-cols a { text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; }
.footer-cols a:hover { color: var(--ink); }
.disclosure { font-size: 0.85rem; color: var(--ink-faint); max-width: 52rem; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: var(--ink-faint); border-top: 1px solid var(--hairline); padding-top: 1.25rem; margin: 1.25rem 0 0; }
.foot-legal a { color: var(--ink-faint); }

/* ── article pages ───────────────────────────────────────────────────── */
.breadcrumbs { font-size: 0.88rem; color: var(--ink-faint); margin: 1.5rem 0 0.75rem; }
.breadcrumbs a { color: var(--ink-faint); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.75rem 0 1.5rem; }
.chip { font-size: 0.8rem; font-weight: 700; color: var(--teal-deep); background: var(--teal-soft); border-radius: 999px; padding: 0.22rem 0.7rem; }
.article { max-width: 44rem; margin: 0 auto; }
.article .lede::first-letter {
  font-family: var(--display); font-size: 3.1em; float: left; line-height: 0.85;
  padding: 0.05em 0.12em 0 0; color: var(--terracotta-deep);
}
.article h2 { padding-left: 0.85rem; position: relative; margin-top: 2rem; }
.article h2::before { content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 4px; border-radius: 2px; background: var(--terracotta); }
.article ul { list-style: none; padding-left: 1.4rem; }
.article ul li { position: relative; margin-bottom: 0.45rem; }
.article ul li::before { content: ""; position: absolute; left: -1.25rem; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--sage); }
.callout { background: var(--ochre-soft); border-radius: var(--r-md); padding: 1.1rem 1.3rem; margin: 1.5rem 0; }
.callout p:last-child { margin: 0; }
.nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: var(--teal-soft); border-radius: var(--r-md); padding: 1.1rem 1.3rem; margin: 2rem 0; }
.nudge p { margin: 0; font-weight: 700; }

/* ── forms ───────────────────────────────────────────────────────────── */
.field { display: grid; gap: 0.3rem; margin-bottom: 1rem; }
.field label { font-weight: 700; font-size: 0.92rem; }
.field input, .field select, .field textarea {
  font: 400 1rem var(--body); color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--hairline); border-radius: var(--r-sm); padding: 0.65rem 0.85rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--terracotta); box-shadow: var(--ring); }
.field .hint { font-size: 0.85rem; color: var(--ink-faint); }

/* ── tables (cutoffs, book properties) ───────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.97rem; }
th { text-align: left; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
th, td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--hairline); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── product pages ───────────────────────────────────────────────────── */
.shot { border-radius: var(--r-md); box-shadow: var(--shadow-3); }
.spread-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.1rem; }
.spread-row figure { margin: 0; }
.spread-row img { border-radius: var(--r-md); box-shadow: var(--shadow-2); border: 1px solid var(--hairline); }

/* ── name tool + shortlist ───────────────────────────────────────────── */
/* Fields align on their TOP edge so two labels sit level and two inputs sit
   level whatever hangs beneath them (the sibling form's first field carries a
   hint, its select does not); the button drops by one label's height to meet
   the input line. End-alignment put the select on the hint's baseline. */
.tool-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.tool-form .field { flex: 1 1 16rem; margin-bottom: 0; }
.tool-form .btn { margin-top: 1.72rem; margin-bottom: 0; }
.tool-form-inline { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.tool-form-inline input { flex: 1 1 12rem; font: 400 1rem var(--body); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--hairline);
  border-radius: var(--r-sm); padding: 0.6rem 0.85rem; }
.nt-result { margin-top: 2rem; }
.nt-result h3 { font-size: 1.35rem; }
#nt-gloss { font-family: var(--display); font-size: 1.15rem; color: var(--ink-soft); }
.nt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 700px) { .nt-actions { grid-template-columns: 1fr; } }
.tile-letter { font: 600 44px var(--display); fill: var(--ink); }
.f-ochre-soft-tile { fill: var(--ochre-soft); }
.sl-wrap { padding: 3rem 0; max-width: 38rem; }
.sl-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.sl-item { display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 0.8rem 1.1rem; margin-bottom: 0.6rem;
  font: 700 1.1rem var(--body); box-shadow: var(--shadow-1); }

/* ── reveal ──────────────────────────────────────────────────────────── */
/* Gated on html.js (set by boot.js): without JavaScript nothing ever adds
   .in, so ungated reveal styles would leave every section invisible. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 480ms ease, transform 480ms cubic-bezier(0.2, 0, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card { transition: none; }
  .float { animation: none; }
}

/* ── inline illustration fills (art drawn in tokens) ─────────────────── */
.f-terracotta { fill: var(--terracotta); }
.f-ochre { fill: var(--ochre); }
.f-sage { fill: var(--sage); }
.f-teal { fill: var(--teal); }
.f-paper { fill: var(--paper); }
.f-surface { fill: var(--surface); }
.f-night { fill: var(--night); }
.f-ink { fill: var(--ink); }
.ln { stroke: var(--ink-soft); fill: none; stroke-width: 2; stroke-linecap: round; }
.float { animation: float 6s ease-in-out infinite; }
.float.f2 { animation-duration: 7.2s; animation-delay: 0.6s; }
.float.f3 { animation-duration: 8.1s; animation-delay: 1.1s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ── print ───────────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .cta-band, .dual-ask, .nudge { display: none; }
  body { background: #fff; color: #000; }
}

/* ── name pages + chart ──────────────────────────────────────────────── */
.np-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; align-content: center; }
.np-previews figure { margin: 0; }
.np-previews img { border-radius: var(--r-md); box-shadow: var(--shadow-2); border: 1px solid var(--hairline); }
.meaning-card h3 { margin-bottom: 0.2rem; }
.meaning-gloss { font-family: var(--display); font-size: 1.5rem; margin-bottom: 0.4rem; }
.chart-wrap { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 1rem; overflow-x: auto; box-shadow: var(--shadow-1); }
.chart-wrap svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.ch-grid { stroke: var(--hairline); stroke-width: 1; }
.ch-axis { font: 700 11px var(--body); fill: var(--ink-faint); }
.ch-note { font: 700 12px var(--body); fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ch-line-f { fill: none; stroke: var(--terracotta); stroke-width: 2.2; stroke-linejoin: round; }
.ch-line-m { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linejoin: round; }
.ch-dot { stroke: var(--surface); stroke-width: 1.5; }
.ch-line-f-dot { fill: var(--terracotta); }
.ch-line-m-dot { fill: var(--teal); }
.chip-grid { gap: 0.55rem; }
.chip-grid .chip { text-decoration: none; font-size: 0.95rem; padding: 0.35rem 0.9rem; }

/* ── sibling matcher ─────────────────────────────────────────────────── */
.sib-results { margin-top: 2rem; }
.sib-results h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.sib-results .card p { font-size: 0.92rem; }

/* ── The free Name Kit + the book preview (names-first launch, D-36) ────
   Only existing tokens and rhythms: the panel, the card grid, the anatomy
   rows. Nothing new in the palette; the printables are drawn by kit.js in
   these same colors. */
.kit-section { padding: 1rem 0 2.5rem; }
.kit { display: grid; gap: 1.6rem; }
.kit-head .lede { max-width: 40rem; margin: 0.35rem 0 0; }
.kit-items[hidden] { display: none; }
.kit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem 1.2rem; color: var(--ink-soft); font-size: 0.95rem; }
.kit-list li { padding-left: 1.1rem; position: relative; }
.kit-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--terracotta); }
.kit-list li:nth-child(2)::before { background: var(--teal); }
.kit-list li:nth-child(3)::before { background: var(--ochre); }
.kit-list li:nth-child(4)::before { background: var(--sage); }
.kit-list[hidden] { display: none; }
.kit-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.1rem; }
.kit-item { margin: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 0.9rem 0.9rem 1rem; box-shadow: var(--shadow-1); }
.kit-item h3 { font-size: 1.02rem; margin: 0.6rem 0 0.2rem; }
.kit-item p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
.kit-thumb { aspect-ratio: 255 / 330; border-radius: var(--r-sm); overflow: hidden; background: var(--paper); border: 1px solid var(--hairline); display: grid; place-items: center; }
.kit-thumb canvas { width: 100%; height: 100%; display: block; }
.kit-form { display: grid; gap: 0.9rem; max-width: 34rem; }
.kit-form .field { margin: 0; }
.kit-check { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink-soft); font-size: 0.95rem; }
.kit-check input { margin-top: 0.3rem; accent-color: var(--terracotta); }
.kit-form[data-kit-needs-name] input, .kit-form[data-kit-needs-name] button { opacity: 0.55; pointer-events: none; }
.kit-downloads { display: grid; gap: 0.7rem; }
.kit-ready { font-weight: 700; margin: 0; }
.kit-downloads .cta-row a { text-decoration: none; }

.book-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.book-feature-art { display: grid; gap: 1rem; }
.book-feature-art .shot, .book-spread img { width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.book-feature .anatomy .card-icon { flex: 0 0 auto; }
.book-spreads { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem; }
.book-spread { margin: 0; }
.book-spread figcaption { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.5rem; }
@media (max-width: 720px) {
  .book-feature-grid { grid-template-columns: 1fr; }
  .kit-items { grid-template-columns: repeat(2, 1fr); }
}

/* The tool's popularity taste: a bare curve and one line of caption under
   the meaning. Axes, ticks and the peak label live in the kit's name print. */
.nt-spark { margin: 0.4rem 0 1.1rem; }
.nt-spark svg { display: block; width: 100%; max-width: 360px; height: auto; }
.nt-spark .hint { margin-top: 0.25rem; }
.nt-spark[hidden] { display: none; }

/* Top names by year: decade blocks of year chips, and the year tables. */
.year-decades { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.2rem 1.6rem; margin-top: 1.6rem; }
.year-decade h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 0.65rem 0.8rem; width: 100%; max-width: 20rem; }

.cmp-facts { margin: 1rem 0 0.5rem; padding-left: 1.2rem; color: var(--ink-soft); }
.cmp-facts li { margin-bottom: 0.35rem; }