/* ============================================================================
   CARTON — an image API printed on the back of a carton.
   Cream board, warm near-black ink, one spot blue, one mustard.
   Four type voices mixed on purpose. Hand-drawn wobbly boxes, hard-offset
   shadows (a second impression, never a blur), circular stickers, halftone
   plates. The verbose copy is the design and it refuses to look slick.
   ========================================================================== */

/* ---- Fonts: four voices, self-hosted, no CDN --------------------------- */
@font-face {
  font-family: "Courier Prime";
  src: url("./assets/fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("./assets/fonts/courier-prime-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("./assets/fonts/anton-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("./assets/fonts/fredoka-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("./assets/fonts/caveat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("./assets/fonts/caveat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Palette — cream board, warm near-black ink, one blue (two stops), one mustard. */
  --paper: #F3EEE7;         /* the page floor. NEVER pure white. */
  --paper-bright: #F7F3EC;  /* input wells, and nothing else. */
  --kraft: #E7DECF;         /* back-of-pack panels, ingredient list, alternating bands. */
  --paper-shadow: #DCD2C1;  /* the hard offset. a second impression, never a blur. */
  --ink: #1A1815;           /* warm near-black. all type, every rule. NEVER pure #000. */
  --ink-soft: #4A4640;      /* secondary copy, unset values, kraft fine print. */
  --ink-faint: #6B655B;     /* captions, meta on paper only. NEVER on kraft. */
  --on-ink: #F3EEE7;        /* cream reversed out of the black ribbon and footer. */
  --blue: #0E63F0;          /* spot blue: non-text marks, display >=24px, flood band only. */
  --blue-ink: #0A48AD;      /* every blue that carries text below 24px. */
  --on-blue: #FFFFFF;       /* white on a blue flood — the only pure white in the chrome. */
  --mustard: #D2A02C;       /* fill under ink type, or type on the black ribbon. Never text on paper. */

  /* Spacing — 4px base. 4 8 12 16 24 40 64 96 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 40px;
  --s-7: 64px;
  --s-8: 96px;

  /* The one elevation: a hard offset. blur 0, spread 0. always. */
  --offset: 4px 4px 0 0 var(--paper-shadow);

  /* Wobbly-box corner sets — each box bends its corners a different amount. */
  --wob-a: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wob-b: 15px 225px 18px 255px / 240px 15px 235px 18px;
  --wob-c: 225px 18px 255px 22px / 20px 250px 15px 230px;
  --wob-d: 20px 235px 15px 245px / 250px 18px 240px 15px;

  --container: 1120px;
  --measure: 660px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

button { font-family: inherit; }

/* The app's single <main> landmark lives in each page's body. */

/* ---- Layout ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}

.band { padding-top: var(--s-7); padding-bottom: var(--s-7); }        /* 64px rhythm */
.band--hero { padding-top: var(--s-8); padding-bottom: var(--s-8); }  /* the one 96px */
.band--kraft { background: var(--kraft); }
.measure { max-width: var(--measure); }                               /* the 660px column cap */

.section-head { margin: 0 0 var(--s-4); }

/* ---- Type roles — Anton (billboard), Fredoka (rounded), Caveat (hand),
        Courier Prime (body & every stacking figure). ---------------------- */
.t-billboard,
.t-shout,
.t-figure,
.t-section,
.t-button {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  /* the one OpenType feature in this system: `case`, on Anton. lifts / - . in the ribbon. */
  font-feature-settings: "case" 1;
  margin: 0;
}
.t-billboard { font-size: 72px; line-height: 0.95; letter-spacing: -1px; }
.t-shout     { font-size: 54px; line-height: 0.98; letter-spacing: -0.8px; }
.t-figure    { font-size: 96px; line-height: 0.90; letter-spacing: -2px; }
.t-section   { font-size: 28px; line-height: 1.05; letter-spacing: -0.3px; }
.t-button    { font-size: 16px; line-height: 1.0;  letter-spacing: 0.3px; }

.t-rounded-xl,
.t-rounded {
  font-family: "Fredoka", "Trebuchet MS", sans-serif;
  font-weight: 600;
  margin: 0;
}
.t-rounded-xl { font-size: 44px; line-height: 1.02; letter-spacing: -0.4px; }
.t-rounded    { font-size: 22px; line-height: 1.1; }

.t-scrawl-xl,
.t-scrawl {
  font-family: "Caveat", "Comic Sans MS", cursive;
  margin: 0;
}
.t-scrawl-xl { font-family: "Caveat"; font-weight: 700; font-size: 40px; line-height: 1.0; }
.t-scrawl    { font-family: "Caveat"; font-weight: 400; font-size: 32px; line-height: 1.1; }

/* Courier Prime roles */
.t-lead    { font-size: 18px; line-height: 1.55; letter-spacing: 0.1px; }
.t-body    { font-size: 16px; line-height: 1.6;  letter-spacing: 0.1px; }
.t-body-s  { font-size: 14px; line-height: 1.6;  letter-spacing: 0.1px; }
.t-data    { font-size: 15px; line-height: 1.5;  letter-spacing: 0.1px; }
.t-url     { font-size: 17px; line-height: 1.5;  letter-spacing: 0.2px; }
.t-listing { font-size: 15px; line-height: 1.7;  letter-spacing: 0.1px; white-space: pre; }
.t-key     { font-weight: 700; font-size: 14px; line-height: 1.4; }
.t-caption { font-size: 13px; line-height: 1.5;  letter-spacing: 0.2px; }
.t-eyebrow { font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; }
.t-label   { font-size: 11px; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

.ink-soft { color: var(--ink-soft); }
.ink-faint { color: var(--ink-faint); }

/* ---- Drawn rule (SVG path with a wandering baseline) ------------------- */
.drawn-rule {
  display: block;
  width: 100%;
  height: 8px;
  overflow: visible;
}
.drawn-rule path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---- Wobbly box (primitive 1) ----------------------------------------- */
.box {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--wob-a);
  background: var(--paper);
  box-shadow: var(--offset);          /* blur 0. always. */
  transform: rotate(-0.6deg);
}
.box.b { border-radius: var(--wob-b); transform: rotate(0.7deg); }
.box.c { border-radius: var(--wob-c); transform: rotate(-0.5deg); }
.box.d { border-radius: var(--wob-d); transform: rotate(0.6deg); }
.box.on-kraft { background: var(--kraft); }

/* ---- Sticker badge — the only border-radius: 50% in the system --------- */
.sticker {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--mustard);
  border: 2px solid var(--ink);
  color: var(--ink);
  transform: rotate(-6deg);
  padding: var(--s-3);
  z-index: 3;
}
.sticker .t-scrawl-xl { color: var(--ink); }

/* ---- Buttons ----------------------------------------------------------- */
.button-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border: none;
  border-radius: 2px;
  background: var(--ink);
  color: var(--on-ink);
  text-decoration: none;
  box-shadow: var(--offset);
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.button-ink:active {
  box-shadow: none;
  transform: translate(4px, 4px);   /* pressed into the paper */
}

.button-drawn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border: 2px solid var(--ink);
  border-radius: var(--wob-a) 2px 2px;   /* a wobbly box, not a crisp rectangle */
  border-radius: var(--wob-b);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--offset);
  cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.button-drawn:active {
  box-shadow: none;
  transform: translate(4px, 4px);
}

/* ---- Inline link (blue-ink, below 24px) -------------------------------- */
.link {
  color: var(--blue-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---- text-input -------------------------------------------------------- */
.text-input {
  font-family: "Courier Prime", monospace;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-bright);
  border: 2px solid var(--ink);
  border-radius: 2px;
  min-height: 48px;
  padding: 12px 14px;
}
.text-input::placeholder { color: var(--ink-soft); opacity: 1; }

/* ---- Focus — a 2px ink ring at a 2px offset. never colour. ------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
[role="radio"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ======================================================================== */
/*  NAV                                                                      */
/* ======================================================================== */
.nav {
  background: var(--paper);
}
.nav-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 16px 0;
  flex-wrap: wrap;
}
.wordmark {
  color: var(--ink);
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: var(--s-5);
  align-items: baseline;
}
.nav-link {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
}
.nav-link[aria-current="page"] {
  font-weight: 700;
}
.nav-link[aria-current="page"] .nav-underline {
  display: block;
}
.nav-underline {
  display: none;
  position: absolute;
  left: 0;
  right: -2px;
  bottom: -2px;
  height: 6px;
  overflow: visible;
}
.nav-underline path {
  fill: none;
  stroke: var(--blue);            /* a non-text mark at 4.48:1, clears the 3:1 bar */
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ======================================================================== */
/*  MARQUEE RIBBON — ink band, Anton uppercase, one mustard word            */
/* ======================================================================== */
.marquee {
  background: var(--ink);
  color: var(--on-ink);
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-run 34s linear infinite;
}
.marquee-track > span { padding-right: 0.6em; }
.marquee .accent { color: var(--mustard); }   /* 7.43:1 on ink — the only ground mustard is type on */
@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ======================================================================== */
/*  HERO                                                                     */
/* ======================================================================== */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-6);
  align-items: center;
}
.hero-eyebrow { color: var(--ink-soft); margin-bottom: var(--s-4); }
.hero-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 16px;
  margin: 0 0 var(--s-5);
}
.hero-word { display: inline-block; }
.hero-word--shout { font-size: 72px; }
.hero-word--shout,
.hero-word--blue { transform: rotate(-1deg); }
.hero-word--rounded { transform: rotate(0.8deg); position: relative; top: 2px; }
.hero-word--hand { transform: rotate(-1.4deg); color: var(--ink); position: relative; top: 4px; }
.hero-word--blue { color: var(--blue); }   /* one 72px Anton word in blue, well above the 24px floor */
.hero-lead { color: var(--ink-soft); max-width: 42ch; }

.hero-figure { position: relative; }
.hero-figure .plate { max-width: 460px; margin-left: auto; }
.hero-figure .sticker { top: -28px; right: -12px; }

/* ---- Plate (halftone photocopier, drawn ink frame) -------------------- */
.plate {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--paper);
  transform: rotate(-0.5deg);
  padding: 0;
  line-height: 0;
}
.plate.b { transform: rotate(0.6deg); }
.plate img { width: 100%; height: auto; }

.plate.halftone { background: var(--paper); }
.plate.halftone img {
  filter: grayscale(1) contrast(1.55) brightness(1.06);
  mix-blend-mode: multiply;         /* the cream paper prints through the whites */
}
/* coarse dot tooth — a tile of SOLID ink circles, never a radial-gradient */
.plate.halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Ccircle cx='1.4' cy='1.4' r='1' fill='%231A1815'/%3E%3C/svg%3E");
  background-size: 5px 5px;
}
.plate-caption {
  line-height: 1.5;
  margin-top: var(--s-2);
  color: var(--ink-faint);          /* caption on paper — 5.00:1, body-legal */
}
.plate-aside {
  color: var(--ink);
  transform: rotate(-2deg);
  margin-top: var(--s-1);
}

/* ======================================================================== */
/*  RAMBLING BLOCK — mono copy on paper, a highlighter swipe, a Caveat P.S.  */
/* ======================================================================== */
.ramble { max-width: var(--measure); }
.ramble .t-lead { margin-bottom: var(--s-4); }
.ramble p + p { margin-top: 0; }
.highlighter {
  background: var(--mustard);        /* a fill under ink type — 7.43:1. carries no meaning. */
  color: var(--ink);
  padding: 0 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ramble .shout-inline {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  font-size: 1.4em;
  letter-spacing: -0.3px;
  vertical-align: -0.02em;
}
.ramble .ps {
  display: inline-block;
  margin-top: var(--s-4);
  color: var(--ink);
  transform: rotate(-1deg);
}

/* ======================================================================== */
/*  CAPABILITY TRIO (kraft band)                                            */
/* ======================================================================== */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.capability-box { padding: var(--s-5); background: var(--kraft); }
.capability-box .plate { margin-bottom: var(--s-4); }
.capability-box .plate.halftone { background: var(--kraft); }
.capability-box .t-rounded { margin-bottom: var(--s-3); }
.capability-box .t-body { color: var(--ink); }    /* on kraft, step up from faint */

/* ======================================================================== */
/*  THE MARKED-UP PROOF — the playground                                    */
/* ======================================================================== */
.proof {
  position: relative;
}
.proof-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  grid-template-areas:
    "before  co-w    co-rot"
    "co-crop well    co-h"
    "co-fit  co-blur co-bg";
  gap: var(--s-5);
  align-items: center;
  justify-items: center;
}

/* the SVG arrow overlay — inert ink marks over the whole stage */
.arrow-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
.arrow-overlay path,
.arrow-overlay line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.arrow-overlay .arrow.active { stroke-width: 3; }
/* the two far ticks are the only pointer-live geometry in the overlay */
.arrow-overlay .tick-hit {
  pointer-events: auto;
  fill: transparent;
  touch-action: none;
}
.arrow-overlay .tick-hit.w { cursor: ew-resize; }
.arrow-overlay .tick-hit.h { cursor: ns-resize; }

/* the after plate lives in a fixed well and grows down+right within it */
.well {
  grid-area: well;
  position: relative;
  width: 360px;
  height: 270px;
  max-width: 100%;
}
.after-plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 270px;
  border: 2px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
  transform: rotate(-0.4deg);
  line-height: 0;
}
.after-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.after-caption {
  position: absolute;
  top: calc(100% + 8px);
  left: 4px;
  color: var(--ink-faint);
  text-align: left;
}

/* the before print — static, top-left margin, nothing is ever drawn on it */
.before-print { grid-area: before; align-self: start; justify-self: start; max-width: 170px; }
.before-print .plate { transform: rotate(0.7deg); }
.before-print .plate-caption { color: var(--ink-faint); }

/* ---- Callouts — wobbly boxes scattered in the margin ------------------ */
.callout {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--wob-a);
  background: var(--paper);
  box-shadow: var(--offset);
  padding: var(--s-3);
  width: 100%;
  max-width: 210px;
  transform: rotate(-0.8deg);
}
.callout:nth-of-type(2n) { border-radius: var(--wob-b); transform: rotate(0.9deg); }
.callout:nth-of-type(3n) { border-radius: var(--wob-c); transform: rotate(-0.6deg); }
.callout[data-param="w"]    { grid-area: co-w; }
.callout[data-param="h"]    { grid-area: co-h; }
.callout[data-param="fit"]  { grid-area: co-fit; }
.callout[data-param="crop"] { grid-area: co-crop; }
.callout[data-param="rot"]  { grid-area: co-rot; }
.callout[data-param="blur"] { grid-area: co-blur; }
.callout[data-param="bg"]   { grid-area: co-bg; }

.callout-key {
  display: block;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.callout-value { color: var(--ink); margin-top: var(--s-2); }
.callout-value.unset { color: var(--ink-soft); }   /* `not set` — 8.12:1 on paper */
.callout-note { color: var(--ink); margin-top: var(--s-1); }

/* struck-through callout (bg outside contain) */
.callout.struck { position: relative; }
.callout.struck .callout-key,
.callout.struck .option-line,
.callout.struck .callout-value { color: var(--ink-soft); }
.callout.struck .strike {
  position: absolute;
  left: 6px; right: 6px; top: 50%;
  height: 2px;
  background: var(--ink);
  transform: rotate(-2deg);
  pointer-events: none;
}
.callout:not(.struck) .strike { display: none; }

/* ---- written field — a number written on a ruled ink line ------------- */
.written-field {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}
.written-field input {
  font-family: "Courier Prime", monospace;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ink);   /* the drawn ruled line */
  width: 76px;
  padding: 2px 2px;
  -moz-appearance: textfield;
}
.written-field input::-webkit-outer-spin-button,
.written-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.written-field .unit { color: var(--ink-soft); margin-left: 4px; }

/* ---- option-line — inline options, chosen one circled in blue --------- */
.option-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: var(--s-1);
}
.option {
  position: relative;
  font-family: "Courier Prime", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 2px 3px;
  cursor: pointer;
}
.option[aria-checked="true"] { font-weight: 700; }   /* weight step — not colour alone */
.option .ring {
  display: none;
  position: absolute;
  left: -6px; right: -6px; top: -4px; bottom: -4px;
  overflow: visible;
  pointer-events: none;
}
.option[aria-checked="true"] .ring { display: block; }
.option .ring ellipse {
  fill: none;
  stroke: var(--blue);                  /* the pen circling the word — a non-text mark */
  stroke-width: 2;
  stroke-dasharray: 150 18;             /* the ring does not quite close */
  stroke-dashoffset: 8;
  vector-effect: non-scaling-stroke;
}

/* ---- swatch — one wobbly square previewing the bg hex ----------------- */
.bg-row { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.swatch {
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: var(--wob-c);
  transform: rotate(-1deg);
  background: transparent;
  flex: none;
}
.swatch.empty {
  position: relative;
  background: transparent;
}
.swatch.empty::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 50%;
  height: 2px;
  background: var(--ink);
  transform: rotate(-8deg);
}
.bg-row .text-input { min-height: 34px; padding: 4px 8px; width: 108px; font-size: 14px; }
.validation { color: var(--blue-ink); margin-top: var(--s-1); }   /* same blue, no error red */

/* ---- slug line + COPY IT ---------------------------------------------- */
.slug {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
}
.slug-rule { margin-bottom: var(--s-3); }
.slug-line {
  display: block;
  word-break: break-all;
  color: var(--ink);
}
.slug-line .tok { color: var(--ink); }
.slug-line .tok.focus { font-weight: 700; }          /* the token your hand is on */
.slug-line .tok.aster { color: var(--ink-soft); }    /* fm, q, dpr — done somewhere you cannot watch */
.slug-line .aster-mark { color: var(--ink); }        /* the asterisk itself costs one glyph of ink */
.slug-actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }

/* ---- the boring-bit box ----------------------------------------------- */
.boring-bit {
  margin-top: var(--s-5);
  max-width: 520px;
  padding: var(--s-4);
  background: var(--kraft);
  border: 2px solid var(--ink);
  border-radius: var(--wob-d);
  box-shadow: var(--offset);
  transform: rotate(0.5deg);
}
.boring-bit .t-eyebrow { color: var(--ink); margin-bottom: var(--s-2); display: block; }
.boring-bit p { color: var(--ink-soft); }            /* kraft fine print steps up from faint */
.boring-bit .k { font-weight: 700; }

/* balloon keys — only below 640px */
.balloon-layer { display: none; }

/* ======================================================================== */
/*  STATS BAND — the one blue flood on index                                */
/* ======================================================================== */
.flood {
  background: var(--blue);
  color: var(--on-blue);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.stat { text-align: left; }
.stat .t-figure { color: var(--on-blue); }
.stat .t-eyebrow { color: var(--on-blue); margin-top: var(--s-2); display: block; }

/* ======================================================================== */
/*  CTA BAND                                                                 */
/* ======================================================================== */
.cta-box {
  padding: var(--s-6);
  text-align: center;
  background: var(--paper);
}
.cta-box .t-shout { margin-bottom: var(--s-4); }
.cta-box.on-flood { background: transparent; box-shadow: none; }   /* the flood carries white and nothing else */
.flood .cta-box .t-shout,
.flood .cta-box p { color: var(--on-blue); }
.flood .button-ink { box-shadow: 4px 4px 0 0 #0A48AD; }   /* a darker offset that reads on blue */

/* ======================================================================== */
/*  DOCS — lead-with-plate, quickstart boxes                                 */
/* ======================================================================== */
.lead-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--s-6);
  align-items: start;
}
.docs-figure { max-width: 300px; }
.docs-figure .plate { transform: rotate(0.7deg); }

.quickstart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-6);
}
.quick-box { position: relative; padding: var(--s-5); }
.quick-box .t-rounded { margin-bottom: var(--s-2); }
.step-num {
  position: absolute;
  top: -26px;
  left: -12px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1;
  padding: 0 6px;
  transform: rotate(-8deg);
}
pre.t-listing {
  margin: var(--s-3) 0 0;
  overflow-x: auto;
  background: transparent;
  color: var(--ink);
}

/* ======================================================================== */
/*  INGREDIENT PANEL + SMALL PRINT (kraft, drawn rules)                      */
/* ======================================================================== */
.panel {
  background: var(--kraft);
  padding: var(--s-5);
  max-width: 940px;
}
.panel-head { color: var(--ink); margin-bottom: var(--s-3); display: block; }
.ingredient-row {
  display: grid;
  grid-template-columns: 90px 200px 90px 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
}
.ingredient-row .col-key { color: var(--ink); }
.ingredient-row .col-values { color: var(--ink); }
.ingredient-row .col-default { color: var(--ink-soft); }
.ingredient-row .col-desc { color: var(--ink-soft); }   /* 7.03:1 on kraft */
.ingredient-row .aster { color: var(--ink); }
.col-head { color: var(--ink-soft); }

.smallprint-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
}
.smallprint-row .sp-label { color: var(--ink); }
.smallprint-row .sp-value { color: var(--ink); text-align: right; }

/* ======================================================================== */
/*  TIER BOXES (pricing)                                                     */
/* ======================================================================== */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
  align-items: stretch;
}
.tier-box {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--wob-a);
  box-shadow: var(--offset);
  transform: rotate(-0.6deg);
}
.tier-box:nth-child(2) { border-radius: var(--wob-c); transform: rotate(0.6deg); }
.tier-box:nth-child(3) { border-radius: var(--wob-b); transform: rotate(-0.5deg); }
.tier-price { display: flex; align-items: baseline; gap: var(--s-2); }
.tier-price .t-figure { line-height: 0.9; }
.tier-price .per { color: var(--ink-soft); }
.tier-box .button-drawn { margin: var(--s-2) 0; }
.tier-quota { display: grid; gap: var(--s-1); }
.tier-quota .q-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: baseline; }
.tier-quota .q-label { color: var(--ink-soft); }
.tier-quota .q-value { color: var(--ink); text-align: right; }

/* ======================================================================== */
/*  FAQ ROWS                                                                 */
/* ======================================================================== */
.faq { max-width: var(--measure); }
.faq-row { padding: 0; }
.faq-row summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  cursor: pointer;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary:hover .faq-q { font-weight: 700; }    /* an ink weight step */
.faq-mark { position: relative; width: 20px; height: 20px; flex: none; }
.faq-mark svg { position: absolute; inset: 0; overflow: visible; }
.faq-mark path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.faq-mark .v-stroke { display: block; }               /* the vertical of the plus */
.faq-row[open] .faq-mark .v-stroke { display: none; } /* opening rubs one stroke out */
.faq-answer { padding: 0 0 var(--s-4); color: var(--ink); max-width: 60ch; }

/* ======================================================================== */
/*  FOOTER — ink slab                                                        */
/* ======================================================================== */
.footer {
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--s-7) 0;
}
.footer a { color: var(--on-ink); }
.footer-links { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-4); }
.footer-rule path { stroke: var(--on-ink); }
.footer-scrawl { color: var(--mustard); transform: rotate(-1deg); margin: var(--s-3) 0; }  /* 7.43:1 on ink */
.footer-legal { color: var(--on-ink); opacity: 0.85; }

/* ======================================================================== */
/*  RESPONSIVE                                                               */
/* ======================================================================== */

/* Tablet 640–1024px */
@media (max-width: 1024px) {
  .t-billboard { font-size: 60px; }
  .t-shout { font-size: 44px; }
  .t-figure { font-size: 72px; }
  .hero-word--shout { font-size: 60px; }

  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-figure .plate { margin-left: 0; max-width: 420px; }

  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: 1fr; }
  .ingredient-row { grid-template-columns: 80px 1fr; grid-auto-flow: row; }
  .ingredient-row .col-default { grid-column: 1; }
  .ingredient-row .col-desc { grid-column: 2; }

  /* proof stage → rail mode: callouts above and below the plate */
  .proof-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "before  co-w"
      "co-h    co-fit"
      "co-crop co-rot"
      "well    well"
      "co-blur co-bg"
      "slugarea slugarea";
    align-items: start;
  }
  .well { justify-self: center; }
  .callout { max-width: 100%; }
}

/* Mobile <640px */
@media (max-width: 640px) {
  body { font-size: 16px; }                 /* body mono stays 16px */
  /* the drawn nav underline is an <svg> with a viewBox and no width attr, so as an
     absolutely-positioned replaced box it takes its intrinsic 100px and ignores the
     left/right sizing — on the rightmost active link (Pricing) that juts past the
     viewport. Cap it to the link so the hand-drawn mark stays but stops scrolling. */
  .nav-underline { max-width: 100%; }
  .t-billboard { font-size: 38px; }
  .t-shout { font-size: 34px; }
  .t-figure { font-size: 54px; }
  .hero-word--shout, .hero-word--blue { font-size: 38px; }

  /* headline drops to TWO clashing voices — never one: Anton + Fredoka */
  .hero-word--hand { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 30px; }

  .cap-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .ingredient-row { grid-template-columns: 1fr; gap: var(--s-1); }
  .ingredient-row .col-default { grid-column: 1; }
  .ingredient-row .col-desc { grid-column: 1; }
  .smallprint-row { grid-template-columns: 1fr; }
  .smallprint-row .sp-value { text-align: left; }

  /* proof stage → balloon-key mode: arrows withdrawn, callouts stack crooked */
  .arrow-overlay { display: none; }
  .proof-stage {
    display: block;
  }
  .well { margin: 0 auto var(--s-5); }
  /* the well already clamps to the viewport; let the plate (its width is forced
     inline by the playground JS) clamp with it, so it never overhangs the page.
     max-width wins over the inline width; on desktop the well is 360 so this is
     a no-op, and the arrows are withdrawn at this width regardless. */
  .after-plate { max-width: 100%; }
  .balloon-layer { display: block; }
  .before-print { max-width: 130px; margin-bottom: var(--s-4); }
  .proof-callouts { display: block; }
  .callout {
    max-width: 100%;
    margin: 0 0 -6px;                        /* stack crooked and overlapping — never a table */
  }
  .callout:nth-of-type(2n) { margin-left: 14px; }
  .callout:nth-of-type(3n) { margin-left: -8px; }
}

/* Desktop-and-up default already handles scatter above 1024px. */

@media (max-width: 1024px) {
  .lead-grid { grid-template-columns: 1fr; }
  .docs-figure { max-width: 340px; }
  .quickstart-grid { grid-template-columns: 1fr; }
  /* let the single-column track collapse to the viewport: without this the box
     stretches to the SDK listing's min-content and the page scrolls sideways.
     The pre keeps its own overflow-x:auto, so the code scrolls inside the box. */
  .quick-box { min-width: 0; }
  .quick-box pre.t-listing { min-width: 0; }
  .panel { max-width: 100%; }
}

/* ======================================================================== */
/*  MOTION                                                                   */
/* ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .marquee-track { transform: none; }        /* the ribbon stops and prints its line */
}