/* /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 bottom of the panel */
.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; width: min(440px, calc(100% - 32px)); margin: -72px 16px 0 auto; padding: 16px 16px 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--surface); box-shadow: 5px 5px 0 var(--ink); }
.pick__tag { display: inline-block; margin: 0 0 6px; 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 10px; font: 700 var(--t-body)/1.3 var(--body); }
.pick__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pick__opts li { padding: 9px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-control); }
.pick__opts b { display: block; font-size: var(--t-small); 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 ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6) clamp(32px, 5vw, 80px); align-items: center; }
.duo__copy .sub { max-width: 50ch; }
.duo .hw-shot--side { width: 100%; max-width: 520px; justify-self: end; }

/* ---------- 3. the mirror of section 2: picture left, copy right, same widths, ratio and alignment ---------- */
.duo--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.duo--flip .duo__copy { grid-column: 2; grid-row: 1; }
.duo--flip .hw-shot--side { grid-column: 1; grid-row: 1; justify-self: start; }
/* the note after a wrong pick: the plan card's frame, on the left edge to mirror it */
.duo--flip .pick { margin: -72px auto 0 16px; }
.note__txt { margin: 0; color: var(--ink-2); font-size: var(--t-small); line-height: 1.45; }
.note__eq { margin: 8px 0 0; font: 800 var(--t-sub)/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 { grid-template-columns: 1fr; }
  .duo .hw-shot--side { max-width: 560px; justify-self: start; }
  .why__in { grid-template-columns: 1fr; }
  .rules { max-width: 560px; }
  .duo--flip { grid-template-columns: 1fr; }
  .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); }
  .pick, .duo--flip .pick { width: auto; margin: -40px 10px 0; box-shadow: 4px 4px 0 var(--ink); }
  .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%; }
}