/* Signals: model story pages (/vol/1/ to /vol/4/ and /models/05/).
   Loaded after site.css. Uses only site.css tokens plus the fixed sticky-note yellow.
   No new fonts, no scripts. Motion only under prefers-reduced-motion: no-preference. */

/* ---------- Hero: name, stamp, avatar ---------- */
.mp-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.8rem, 4vw, 2.8rem); border-bottom: 1px solid var(--line); }
.mp-hero-grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 820px) { .mp-hero-grid { grid-template-columns: 1.5fr 1fr; gap: 2.5rem; } }
.mp-no { font: 800 0.8rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; }
.mp-no b { color: var(--accent-ink); font-size: 1rem; }
.mp-hero h1 {
  font-size: clamp(2.3rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -0.045em; font-weight: 900;
  margin: 0 0 1.1rem; max-width: 14ch;
}
.mp-stamp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin: 0 0 1.2rem; }
.mp-stamp-row .stamp-big { font-size: clamp(1.25rem, 4vw, 1.9rem); }
.mp-sub { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--muted); max-width: 46ch; margin: 0; }
.mp-hero .pose { margin: 0 auto; width: clamp(200px, 26vw, 300px); }
.mp-cap { font: 600 0.78rem/1.45 var(--mono); color: var(--muted); text-align: center; max-width: 30ch; margin: 0.9rem auto 0; }

/* ---------- Generic section rhythm ---------- */
.mp-sec { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.mp-sec + .mp-sec { border-top: 1px solid var(--line); }
.mp-h2 { font-size: clamp(1.6rem, 4.2vw, 2.5rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 850; margin: 0 0 1.1rem; max-width: 22ch; }

/* ---------- The idea in one sentence ---------- */
.mp-idea {
  margin: 0; max-width: 34ch;
  font-size: clamp(1.35rem, 3.4vw, 2rem); line-height: 1.3; font-weight: 750; letter-spacing: -0.02em;
  padding: 1.1rem 1.3rem; background: var(--paper-2);
  border: 2px solid var(--ink); border-left: 8px solid var(--accent); border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
}

/* ---------- How it works: reuses .steps, tuned for 5 tiny steps ---------- */
.mp-steps h3 { font-size: 1.05rem; }
.mp-steps p { color: var(--ink); font-size: 1rem; }
.mp-steps .mp-tag { display: block; margin-top: 0.5rem; font: 600 0.82rem/1.45 var(--mono); color: var(--muted); }

/* ---------- Did it work? ---------- */
.mp-verdict { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .mp-verdict { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; } }
.mp-answer {
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink); padding: clamp(1.1rem, 3vw, 1.6rem);
}
.mp-answer p { margin: 0 0 0.55rem; font-size: 1.12rem; }
.mp-answer p:last-child { margin-bottom: 0; }
.mp-answer .mp-big { font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1; font-weight: 900; letter-spacing: -0.05em; color: var(--fail); margin: 0 0 0.6rem; font-variant-numeric: tabular-nums; }
.mp-answer .mp-punch { font-weight: 850; font-size: 1.3rem; }
.mp-answer .mp-punch--next { color: var(--next); }

/* Paper charts (light and dark through the tokens) */
.mp-chart { margin: 0; }
.mp-chart svg { display: block; width: 100%; max-width: 500px; height: auto; }
.mp-chart figcaption { font: 600 0.8rem/1.45 var(--mono); color: var(--muted); margin-top: 0.4rem; }
.mx-lbl { font: 700 13px var(--font); fill: var(--ink); }
.mx-val { font: 800 13.5px var(--mono); fill: var(--ink); }
.mx-sub { font: 600 11px var(--mono); fill: var(--muted); }
.mx-track { fill: var(--paper-3); stroke: var(--line); stroke-width: 1; }
.mx-model { fill: var(--fail); }
.mx-coin { fill: var(--muted); }
.mx-right { fill: var(--ink); }
.mx-wrong { fill: var(--fail); }
.mx-on-dark { font: 800 12px var(--mono); fill: var(--paper); }
.mx-on-fail { font: 800 12px var(--mono); fill: var(--paper-2); }
.mx-ref { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.mx-axis { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.mx-box { fill: var(--paper-2); stroke: var(--ink); stroke-width: 2; }
.mx-box--fail { fill: var(--paper-2); stroke: var(--fail); stroke-width: 2.5; }
.mx-box--empty { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mx-tick { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mx-cross { fill: none; stroke: var(--fail); stroke-width: 2.5; stroke-linecap: round; }
@media (prefers-color-scheme: dark) { .mx-on-fail { fill: #16130f; } }

/* How big: reuses the dataset terminal (.ds-term) */
.mp-size { margin-top: 1.5rem; }
.mp-size .ds-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.mp-size .ds-n { font-size: clamp(1.6rem, 3.6vw, 2.1rem); }
.mp-size .mp-caveat { margin: 0.9rem 0 0; font: 600 0.78rem/1.5 var(--mono); color: #8fb3aa; }

/* ---------- The joke is on me: sticky notes ---------- */
.mp-jokes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
@media (min-width: 720px) { .mp-jokes { grid-template-columns: repeat(3, 1fr); } }
.mp-jokes li {
  position: relative; background: #ffe27a; color: #16130f;
  padding: 1.4rem 1.1rem 1.1rem; border-radius: 4px;
  font: 700 1.02rem/1.45 var(--font);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-1.2deg);
}
.mp-jokes li:nth-child(2) { transform: rotate(1deg); }
.mp-jokes li:nth-child(3) { transform: rotate(-0.6deg); }
.mp-jokes li::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 20px; margin-left: -32px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(22, 19, 15, 0.18); transform: rotate(-3deg);
}

/* ---------- Show me the data: a little more room on its own page ---------- */
.mp-data .nerd { margin: 0; border-color: var(--ink); }
.mp-data .nerd > summary { font-size: 0.95rem; padding: 0.9rem 1rem; }
.mp-data .nerd-body { font-size: 0.86rem; }
.mp-data .nerd-dl div { grid-template-columns: minmax(8.5rem, 28%) 1fr; }
@media (max-width: 519px) { .mp-data .nerd-dl div { grid-template-columns: 1fr; gap: 0.1rem; } }
.mp-data .nerd-note + .nerd-note { margin-top: 0.6rem; }
.sg-page .mp-data .nerd-quote { margin: 0.4rem 0; padding: 0.5rem 0.8rem; border-left: 3px solid #3ee6c1; border-radius: 0; background: rgba(62, 230, 193, 0.08); color: #f3efe6; }
.mp-data .nerd-quote cite { display: block; font-style: normal; color: #8fb3aa; font-size: 0.78rem; margin-top: 0.2rem; }
.mp-data h3 { font: 800 0.8rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #3ee6c1; margin: 1.1rem 0 0.3rem; }
.mp-data .nerd-body > h3:first-child { margin-top: 0.2rem; }
.mp-data .nerd-body svg.mini { max-width: 460px; }

/* ---------- What I learned ---------- */
.mp-learned { border-top: 4px solid var(--ink); padding-top: 1rem; max-width: 40ch; }
.mp-learned p { margin: 0; font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.25; font-weight: 850; letter-spacing: -0.025em; }

/* ---------- Raw output link + pager ---------- */
.mp-raw { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 2rem; }
.mp-pager { display: grid; gap: 1rem; }
@media (min-width: 720px) { .mp-pager { grid-template-columns: 1fr 1fr 1fr; } }
.mp-pager a {
  display: block; padding: 1rem 1.1rem; border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink); text-decoration: none; font-weight: 800; line-height: 1.3;
}
.mp-pager a:hover { box-shadow: 4px 4px 0 var(--ink); }
.mp-pager small { display: block; font: 700 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.25rem; }
.mp-pager .mp-home { border-style: dashed; }
.mp-pager .mp-none { visibility: hidden; }
@media (max-width: 719px) { .mp-pager .mp-none { display: none; } }

/* ---------- Motion: the verdict stamp lands once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mp-hero .stamp-big { animation: thunk-big 0.55s 0.2s cubic-bezier(.3, 1.6, .5, 1) both; }
  .mp-hero .stamp-next { animation: none; }
}