/* /how-it-works/ for parents: a headline, one or two short lines and a real comic picture per section.
   A claim that rests on a study gets one muted "Based on: Author, year" line under it (owner 2026-10-16: no research boxes).
   Then the why-we-built-it statement and the marigold band. Tokens, .sec, .sub, .cta-band and .sticky-cta
   come from panelab.css. Comic panels are whole panel boxes exported by prototypes/tools/how-crops.mjs into /brand/how/
   or reused from /brand/art/blocks/.
   One background: the page canvas runs under every section; only cards and documents are white (owner 2026-10-16: no bands).
   Section rhythm (owner 2026-10-16):
   1 centred title over a 4-panel comic page · 2 copy left, picture right with the plan card ·
   3 the mirror of 2: picture left with the wrong-pick note, copy right (a zig-zag pair) ·
   4 centred head over one wide report document ·
   5 the statement in display type beside the list of what we never do. */

/* ---------- shared pieces ---------- */
.hw-head { max-width: 860px; }
.hw-head .sub { max-width: 60ch; }
.sec .sub:has(+ .based) { margin-bottom: 0; }
.based { margin: 10px 0 0; color: var(--ink-3); font-size: var(--t-meta); line-height: 1.4; }
.hw-head .based { margin-bottom: 32px; }

/* the plan choice as the reader shows it: a white card laid over the panel's lower corner */
.hw-shot { position: relative; margin: 0; }
.hw-shot > img { display: block; width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--e1); }
.pick { position: relative; padding: var(--s3); border: 2px solid var(--ink); border-radius: var(--r); background: var(--surface); box-shadow: 4px 4px 0 var(--ink); }
.pick__tag { display: inline-block; margin: 0 0 var(--s1); padding: 2px 8px; border-radius: 6px; background: var(--sun); color: var(--on-sun); font: 700 12px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.pick__q { margin: 0 0 var(--s2); font: 700 var(--t-small)/1.3 var(--body); }
.pick__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pick__opts li { padding: 6px 10px; border: 1.5px solid var(--line-strong); border-radius: var(--r-control); }
.pick__opts b { display: block; font-size: var(--t-meta); line-height: 1.3; }
.pick__opts span { display: block; color: var(--ink-3); font-size: var(--t-meta); line-height: 1.35; }

/* ---------- 1. hero: centred title, then one comic page of the four steps ---------- */
.hw-hero { padding: var(--s7) var(--gut) calc(var(--sec-y) / 2); }
.hw-hero__copy { display: flex; flex-direction: column; align-items: center; max-width: 880px; margin: 0 auto; text-align: center; }
.hw-title { max-width: 15ch; margin: 0 0 18px; font: 800 clamp(38px, 5.4vw, 74px)/1 var(--display); letter-spacing: -.028em; text-wrap: balance; }
.hw-lede { margin: 0; max-width: 44ch; color: var(--ink-2); font-size: var(--t-lede); line-height: 1.45; text-wrap: pretty; }
.hw-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 28px; }
.hw-textlink { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hw-textlink:hover { text-decoration-thickness: 3px; }

/* read -> choose -> solve -> see what happens: four ink-framed panels with comic gutters; 2x2 on phones and tablets */
.page4 { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 14px; counter-reset: st; }
/* each step spans three shared rows (panel, caption, text), so captions and texts start on one line even when a caption wraps */
.page4 li { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; justify-items: start; min-width: 0; counter-increment: st; }
.page4__panel { width: 100%; margin: 0; aspect-ratio: 1; overflow: hidden; border: 3px solid var(--ink); border-radius: 6px; background: var(--surface); }
.page4__panel img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the caption box straddles the panel's lower edge, like the narration boxes inside the art */
.page4__cap { position: relative; align-self: start; margin: -19px 12px 0 12px; padding: 5px 12px 6px; border: 2.5px solid var(--ink); border-radius: 4px; background: var(--sun); color: var(--on-sun); font: 800 var(--t-body)/1.2 var(--display); }
.page4__cap::before { content: counter(st) "  "; white-space: pre; }
.page4__txt { margin: 10px 12px 0; color: var(--ink-2); font-size: var(--t-small); line-height: 1.45; }

/* ---------- 2. copy + picture: why a comic, why the kid chooses ----------
   One centred pair, no wider than it needs: copy beside a 300px panel, the card overlapping the panel's inner
   lower corner and hanging toward the copy, so picture and text come out about the same height (owner 2026-10-16: less empty space). */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 528px); gap: var(--s6) var(--s7); align-items: center; max-width: 1040px; margin-inline: auto; }
.duo__copy .sub { max-width: 46ch; }
/* the figure: three columns, card only | overlap | panel only; the card drops one step below the panel */
.duo .hw-shot--side { display: grid; grid-template-columns: minmax(0, 228fr) minmax(0, 40fr) minmax(0, 260fr); grid-template-rows: 1fr auto var(--s5); width: 100%; max-width: 528px; }
.duo .hw-shot--side > img { grid-column: 2 / 4; grid-row: 1 / 3; }
.duo .pick { grid-column: 1 / 3; grid-row: 2 / 4; align-self: end; }

/* ---------- 3. the mirror of section 2: picture left, copy right, same widths and alignment ---------- */
.duo--flip { grid-template-columns: minmax(0, 528px) minmax(0, 1fr); }
.duo--flip .duo__copy { grid-column: 2; grid-row: 1; }
.duo--flip .hw-shot--side { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 260fr) minmax(0, 40fr) minmax(0, 228fr); }
.duo--flip .hw-shot--side > img { grid-column: 1 / 3; }
/* the note after a wrong pick: the plan card's frame, on the inner corner to mirror it */
.duo--flip .pick { grid-column: 2 / 4; }
.note__txt { margin: 0; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.4; }
.note__eq { margin: var(--s2) 0 0; font: 800 var(--t-body)/1.2 var(--display); }

/* ---------- 4. the report as one wide document ---------- */
.rep-head { max-width: 760px; margin: 0 auto; text-align: center; }
.rep-head .sub { max-width: 54ch; margin-inline: auto; }
.rep { max-width: 820px; margin: var(--s7) auto 0; }
.report { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "top top" "facts side"; gap: 20px 40px; padding: 28px 40px 32px; border: 1px solid var(--line); border-radius: var(--r-sheet); background: var(--surface); box-shadow: var(--e1); }
.report__top { grid-area: top; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.report__tag { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-3); font-size: var(--t-meta); font-weight: 700; }
.report__tag .ic { width: 18px; height: 18px; }
.report h3 { order: -1; margin: 0; font: 800 var(--t-sheet)/1.15 var(--display); }
.report dl { grid-area: facts; display: grid; gap: 10px; margin: 0; }
.report dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.report dt { color: var(--ink-2); }
.report dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.report__side { grid-area: side; display: flex; flex-direction: column; gap: 12px; }
.report__skills { margin: 0; color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.report__skills b { color: var(--ink); }
.report__next { margin: 0; padding: 12px 14px; border-radius: var(--r-control); background: var(--sun-soft); font-size: var(--t-small); line-height: 1.5; }

/* ---------- 5. why we built it: one statement in display type, the marigold marker on the idea,
   beside the plain list of what we never do (ink icons on the canvas, hairlines, no card and no marigold) ---------- */
.why { padding-block: calc(var(--sec-y) / 2) var(--sec-y); }
.why__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6) clamp(40px, 6vw, 104px); align-items: center; }
.sec .why__h { max-width: 22ch; margin: 0; font: 800 clamp(28px, 3.4vw, 46px)/1.12 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.why__h mark { padding: 0 .08em; border-radius: 4px; background: linear-gradient(transparent 58%, var(--sun) 58%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.why__text { margin: 16px 0 0; max-width: 46ch; color: var(--ink-2); font-size: var(--t-lede); line-height: 1.45; }
.rules { border-top: 2px solid var(--ink); }
.sec .rules__h { margin: 0; padding: 14px 0 6px; color: var(--ink-3); font: 700 var(--t-meta)/1.3 var(--body); }
.rules__list { list-style: none; margin: 0; padding: 0; }
.rules__list li, .rules__foot { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 700; line-height: 1.35; }
.rules .ic { width: 22px; height: 22px; color: var(--ink); }
.rules__foot { margin: 0; border-bottom: 0; color: var(--ink-2); font-weight: 400; }
.rules__foot a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- final band: Tally waving in the art slot ---------- */
.hw-tally { position: relative; aspect-ratio: 2 / 1; }
.hw-tally img { position: absolute; inset: 6% 0 0; width: 100%; height: 94%; object-fit: contain; }

/* ---------- responsive ---------- */
/* tablet and small laptop: the comic page goes 2x2, both copy/picture pairs and the why section stack (copy first),
   the report keeps two columns */
@media (max-width: 1023px) {
  .page4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; gap: 28px 14px; }
  .duo, .duo--flip { grid-template-columns: minmax(0, 1fr); gap: var(--s5); max-width: 720px; }
  .why__in { grid-template-columns: 1fr; }
  .rules { max-width: 560px; }
  .duo--flip .duo__copy, .duo--flip .hw-shot--side { grid-column: 1; grid-row: auto; }
  .rep { max-width: 760px; }
  .report { padding: 24px; }
}
@media (max-width: 860px) {
  .hw-lede, .why__text { font-size: var(--t-body); }
}
/* phone: the hero copy goes left-aligned, every grid becomes one column in reading order */
@media (max-width: 640px) {
  .hw-hero { padding-top: var(--s6); }
  .hw-hero__copy { align-items: flex-start; text-align: left; }
  .hw-hero__actions { justify-content: flex-start; }
  .page4 { margin-top: var(--s6); gap: 22px 10px; }
  .page4__panel { border-width: 2.5px; }
  .page4__cap { margin: -16px 0 0 8px; padding: 4px 9px 5px; border-width: 2px; font-size: var(--t-small); }
  .page4__txt { margin: 8px 4px 0 8px; font-size: var(--t-meta); }
  /* phone: the panel at 300px on the outer edge, mirrored like desktop (about a third of the screen), the full-width card under it, overlapping only the bottom strip so the gate stays visible */
  .duo .hw-shot--side, .duo--flip .hw-shot--side { display: block; max-width: none; }
  .duo .hw-shot--side > img { width: min(100%, 300px); margin-left: auto; }
  .duo--flip .hw-shot--side > img { margin: 0; }
  .duo .pick, .duo--flip .pick { margin: calc(-1 * var(--s5)) var(--s3) 0; }
  .rep { margin-top: var(--s5); }
  .report { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "facts" "side"; gap: 16px; padding: 18px; }
  .report__top { flex-direction: column; align-items: flex-start; padding-bottom: 12px; }
  .report h3 { font-size: var(--t-sub); }
}
@media (max-width: 480px) {
  .hw-hero__actions { justify-content: center; gap: 4px; }
  .hw-hero__actions .btn { width: 100%; }
}