/* bunhub.dev — the brochure. Hand-written CSS, no build chain, no framework.

   Grammar: one comic page of POSTERS. Each panel's ground is a real screenshot
   of the real UI; the caption, the pills and the scruffy llama are layers on
   top of that screen. Panels vary in size, shape and which corner the cast
   stands in, so five panels read as five beats and not five copies.
   Vibe: classic-Mac chrome (pinstripes, 2px borders, hard offset shadows)
   washed over dusk-purple lined paper.

   House rules this file obeys:
   - system fonts only: no third-party requests, ever.
   - every text/background pair below is >= 4.5:1 (measured, see the card).
   - no JS. Hover is decoration; nothing depends on it.
   - the shots are baked image files. No iframes, no fetches, no live data. */

:root {
  --dusk: #2b2330;        /* page field */
  --dusk-2: #3a2c3b;      /* panel chrome on dark */
  --band: #4a3a48;        /* the full-bleed beat */
  --paper: #f4eadf;       /* panel face, cream */
  --paper-2: #e9dccd;     /* panel face, shaded side */
  --ink: #241d28;         /* on paper 13.8:1 · on paper-2 12.2:1 */
  --ink-soft: #5a4a56;    /* on paper 6.94:1 · on paper-2 6.11:1 */
  --mauve: #c9a3ba;       /* the llama's accent; on dusk 6.8:1 */
  --mauve-deep: #6b4358;  /* on paper 6.88:1 · on paper-2 6.07:1 */
  --stamp: #8e2f2f;       /* the "internal" stamp: 6.81:1 on paper */
  --ochre: #dfa63f;       /* ref-1 yellow, warmed to the page; decor only */
  --navy: #34415c;        /* ref-1 deep blue; on paper 9.4:1 */
  --cream: #f4eadf;       /* text on dusk 12.8:1 · on band 8.9:1 */
  --cream-soft: #c9b6c6;  /* secondary on dusk 7.93:1 · on band 5.6:1 */
  --gutter: clamp(18px, 4vw, 64px);
  --shadow: 6px 6px 0 rgba(18, 9, 18, 0.42);
  --shadow-sm: 3px 3px 0 rgba(18, 9, 18, 0.32);
  --radius: 12px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background:
    repeating-linear-gradient(180deg, rgba(244, 234, 223, 0.055) 0 1px, transparent 1px 7px),
    radial-gradient(120% 80% at 50% -10%, #46354a 0%, var(--dusk) 55%, #221b26 100%);
  color: var(--cream);
  font: 16px/1.62 "Charcoal", "Chicago", "Geneva", "Helvetica Neue", system-ui, sans-serif;
  letter-spacing: 0.15px;
}

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

a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink);
  padding: 10px 16px; border: 2px solid var(--ink); z-index: 9;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- masthead: the comic's title line ---------- */

.masthead {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(22px, 3.4vw, 44px) var(--gutter) clamp(14px, 2vw, 24px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 22px;
}

.brand {
  margin: 0;
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 0.94;
  letter-spacing: -1.4px;
  font-weight: 700;
}
.brand .tld { color: var(--mauve); font-weight: 400; }

.kicker {
  margin: 0 0 6px;
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--cream-soft);
  max-width: 34ch;
}

.sticker {
  margin: 0 0 8px auto;
  align-self: flex-end;
  font: 700 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink);
  background: var(--mauve);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 13px 7px;
  transform: rotate(-2.2deg);
  box-shadow: var(--shadow-sm);
}

/* ---------- rows ---------- */

.row {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(26px, 3.6vw, 52px);
}

.row-1 {
  display: grid;
  grid-template-columns: minmax(0, 69fr) minmax(240px, 31fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}

/* the stagger group: a wide panel and two small ones, all inside the same gutter */
.row-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}
.row-2 > .portal--big { grid-column: 1 / -1; }

/* ---------- panel chrome: a classic-Mac window wearing a comic caption ---------- */

.panel {
  position: relative;
  background: linear-gradient(168deg, var(--paper) 0%, var(--paper) 62%, var(--paper-2) 100%);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 6px;
  border-bottom: 2px solid var(--ink);
  background:
    repeating-linear-gradient(180deg, rgba(36, 29, 40, 0.10) 0 1px, transparent 1px 3px),
    var(--paper-2);
}

.cap {
  font: 700 10.5px/1.15 ui-monospace, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink);
}

.bar-spacer { flex: 1 1 auto; }

.bar-dots {
  font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 2px;
  color: var(--ink-soft);
}

/* ---------- the stage: screenshot as ground, everything else is a layer ---------- */

.stage {
  position: relative;
  padding: clamp(12px, 1.5vw, 20px);
  flex: 1 1 auto;
}

.screen {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--dusk-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(18, 9, 18, 0.34);
}
.stage--wide .screen { aspect-ratio: 16 / 10; }
.stage--big .screen { aspect-ratio: 16 / 9; }
.stage--strip .screen {
  aspect-ratio: 1.7 / 1;
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(18, 9, 18, 0.3);
}

/* a caption plate: paper card, rounded, hard shadow — it must win over the shot */
.caption {
  position: absolute;
  top: clamp(24px, 3vw, 44px);
  left: clamp(24px, 3vw, 44px);
  max-width: clamp(210px, 40%, 400px);
  margin: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 12px 16px 15px;
  box-shadow: 4px 4px 0 rgba(18, 9, 18, 0.3);
  z-index: 3;
}
.caption h2 {
  margin: 0;
  font-size: clamp(20px, 2.5vw, 36px);
  line-height: 1.04;
  letter-spacing: -0.7px;
  color: var(--ink);
}

.eyebrow {
  margin: 0 0 7px;
  font: 700 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: var(--stamp);
}

/* the llama says the honest part, in a bubble with a tail that points at it */
.bubble {
  position: absolute;
  right: clamp(150px, 19vw, 250px);
  bottom: clamp(54px, 6.6vw, 86px);
  max-width: 27ch;
  margin: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 11px 14px 12px;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(18, 9, 18, 0.28);
  z-index: 3;
}
.bubble::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -9px;
  width: 15px;
  height: 15px;
  background: var(--paper);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
.bubble--left {
  left: clamp(136px, 16vw, 210px);
  right: auto;
  bottom: clamp(44px, 5.2vw, 72px);
  max-width: 30ch;
}
.bubble--left::after {
  left: 22px;
  right: auto;
  border-right: 0;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

/* feature pills: the ref-1 stack. Round, hard-shadowed, one filled. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}
.pills li {
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.4px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 12px 7px;
  box-shadow: 2px 2px 0 rgba(18, 9, 18, 0.24);
}
.pills li.on {
  background: var(--mauve-deep);
  color: var(--cream);
}
.pills--bl {
  position: absolute;
  left: clamp(24px, 3vw, 44px);
  bottom: clamp(22px, 2.6vw, 36px);
  max-width: 60%;
}
.pills--tr {
  position: absolute;
  top: clamp(12px, 1.6vw, 22px);
  right: clamp(12px, 1.6vw, 22px);
  flex-direction: row;
  justify-content: flex-end;
  max-width: 56%;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(30, 22, 30, 0.72);
}

/* the flat-logo stack from ref 1: three offset rounded bars */
.geo {
  position: relative;
  display: block;
  width: 118px;
  height: 62px;
  z-index: 2;
}
.geo i {
  position: absolute;
  display: block;
  border-radius: 9px;
}
.geo i:nth-child(1) { left: 0; top: 0; width: 44px; height: 62px; }
.geo i:nth-child(2) { left: 26px; top: 8px; width: 92px; height: 24px; }
.geo i:nth-child(3) { left: 34px; top: 32px; width: 84px; height: 24px; }
.geo--a { position: absolute; top: clamp(18px, 2vw, 28px); right: clamp(18px, 2vw, 28px); }
.geo--a i:nth-child(1) { background: var(--paper); }
.geo--a i:nth-child(2) { background: var(--ochre); }
.geo--a i:nth-child(3) { background: var(--mauve-deep); }
.geo--b {
  position: absolute;
  left: clamp(16px, 1.8vw, 24px);
  top: clamp(18px, 2vw, 26px);
  transform: scale(1.42);
  transform-origin: left top;
}
.geo--b i:nth-child(1) { background: var(--navy); }
.geo--b i:nth-child(2) { background: var(--ochre); }
.geo--b i:nth-child(3) { background: var(--mauve-deep); }
.geo--c { position: absolute; left: -20px; top: -22px; transform: rotate(-6deg) scale(1.1); }
.geo--c i:nth-child(1) { background: var(--cream); }
.geo--c i:nth-child(2) { background: var(--ochre); }
.geo--c i:nth-child(3) { background: var(--mauve); }
.geo--d {
  position: absolute;
  left: -26px;
  top: -14px;
  transform: rotate(-5deg) scale(0.86);
  opacity: 0.85;
}
.geo--d i:nth-child(1) { background: var(--ochre); }
.geo--d i:nth-child(2) { background: var(--mauve); }
.geo--d i:nth-child(3) { background: var(--mauve-deep); }

/* the llama: always on top of the panel, never behind it */
.llama {
  position: absolute;
  width: clamp(120px, 14vw, 196px);
  height: auto;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(4px 6px 0 rgba(18, 9, 18, 0.34));
}
.llama--br { right: clamp(-8px, 0.6vw, 8px); bottom: clamp(-14px, -0.6vw, -4px); transform: rotate(-3deg); }
.llama--bl { left: clamp(6px, 1.4vw, 20px); bottom: -10px; transform: rotate(-4deg); }
.llama--strip {
  width: clamp(82px, 7.8vw, 104px);
  right: 16px;
  bottom: 6px;
  transform: rotate(5deg);
}
.llama--geo { width: clamp(78px, 7.2vw, 96px); right: 34px; top: 18px; transform: rotate(-9deg); }
.llama--band {
  width: clamp(84px, 8vw, 112px);
  left: 32px;
  bottom: -2px;
  transform: rotate(-8deg);
  z-index: 4;
}

/* the other end of the console: the same catalog, read as a menu. Perched on
   the top-right rim, feet behind the chrome, so she sits in the scene without
   covering the caption line underneath. */
.llama--chef {
  width: clamp(74px, 7.4vw, 92px);
  right: clamp(0px, 0.4vw, 6px);
  top: clamp(-18px, -1.4vw, -10px);
  bottom: auto;
  transform: rotate(6deg);
  z-index: 4;
}

/* the sub's own mascot as a decal: a sticker stuck on the window chrome */
.decal-bun {
  position: absolute;
  top: -32px;
  right: 20px;
  width: clamp(52px, 5.2vw, 76px);
  height: auto;
  transform: rotate(7deg);
  filter: drop-shadow(3px 4px 0 rgba(18, 9, 18, 0.3));
  z-index: 4;
}
.decal-bun--sm {
  position: absolute;
  top: clamp(20px, 2.4vw, 26px);
  right: clamp(14px, 1.6vw, 20px);
  width: clamp(46px, 4.4vw, 56px);
  margin: 0;
  transform: rotate(8deg);
}

/* the honest foot chip, sitting on the screen's bottom edge */
.stage-foot {
  position: absolute;
  right: clamp(18px, 2vw, 30px);
  bottom: clamp(16px, 1.8vw, 24px);
  margin: 0;
  font: 700 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 11px 6px;
  box-shadow: 2px 2px 0 rgba(18, 9, 18, 0.24);
  z-index: 3;
}
.stage-foot--band {
  position: static;
  margin: 10px 0 0 auto;
  width: fit-content;
  color: var(--cream-soft);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  text-align: right;
}

/* the caption block under a strip or a geo card */
.under { padding: clamp(12px, 1.4vw, 18px) 4px 4px; }
.under h2 {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.14;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.under p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  max-width: 44ch;
}
.stage--strip .under,
.stage--geo .under { padding-right: 62px; }

/* this card carries the tallest shot of the three, so its caption sits tight
   and the shot runs edge to edge: the screenshot has to keep ~70% of the panel,
   not the paragraph. */
.stage--strip { padding-left: 0; padding-right: 0; }
.stage--strip .screen { border-radius: 0; }
.stage--strip .under { padding: 10px 16px 0; }
.stage--strip .chip-sub { margin-top: 8px; }
.stage--strip .under h2 { margin-bottom: 6px; }

.portal .stage--strip,
.portal .stage--geo { padding-bottom: 14px; }

.stage--geo { padding-top: 116px; }

.chip-sub {
  display: inline-block;
  margin-top: 12px;
  font: 700 10.5px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.8px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 6px 10px 5px;
}

.stamp {
  position: absolute;
  top: -13px;
  right: 14px;
  transform: rotate(3.4deg);
  font: 700 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--stamp);
  background: var(--paper);
  border: 2px solid var(--stamp);
  padding: 5px 8px 4px;
  z-index: 5;
}

.insets {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
  align-items: start;
  gap: clamp(16px, 2.2vw, 32px);
}

/* the aside: a caption box, not a panel — different weight on purpose */
.note {
  border: 2px dashed rgba(244, 234, 223, 0.42);
  padding: clamp(16px, 2vw, 24px);
  margin-top: clamp(18px, 5vw, 68px);
  color: var(--cream);
}
.note h2 {
  margin: 0 0 10px;
  font: 700 10.5px/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--mauve);
}
.note p { margin: 0 0 12px; font-size: 14.5px; color: var(--cream); }
.note p:last-child { margin-bottom: 0; }
.note .small { font-size: 13px; color: var(--cream-soft); }

/* ---------- row 3: the one full-bleed beat ---------- */

.row-3 {
  max-width: none;
  padding: 0;
  margin-bottom: clamp(26px, 3.6vw, 52px);
  border-top: 2px solid rgba(244, 234, 223, 0.22);
  border-bottom: 2px solid rgba(244, 234, 223, 0.22);
  background:
    radial-gradient(circle at 1px 1px, rgba(244, 234, 223, 0.13) 1px, transparent 0) 0 0 / 7px 7px,
    linear-gradient(180deg, #4d3c4b 0%, var(--band) 100%);
}

.band {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(26px, 3.6vw, 48px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(18px, 3vw, 46px);
  align-items: center;
}

.band h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.6px;
  color: var(--cream);
}
.band .lede {
  margin: 0 0 18px;
  color: var(--cream-soft);
  font-size: clamp(14.5px, 1.1vw, 16px);
  max-width: 40ch;
}

.wires {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 14px 20px;
}
.wires li {
  border-left: 2px solid var(--mauve);
  padding: 2px 0 2px 12px;
}
.wires b {
  display: block;
  font: 700 11px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--mauve);
  margin-bottom: 3px;
}
.wires span { font-size: 13.5px; color: var(--cream); }

.band-shot { position: relative; padding: 0 0 34px; }

.screen--tilt {
  position: relative;
  transform: rotate(-1.4deg);
  border: 2px solid var(--cream);
  border-radius: 10px;
  box-shadow: 8px 8px 0 rgba(12, 6, 12, 0.45);
  z-index: 1;
}

/* ---------- row 4: payoff ---------- */

.payoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 2.6vw, 36px);
  align-items: end;
  padding-bottom: clamp(10px, 2vw, 20px);
}

.payoff h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.8px;
  color: var(--cream);
}
.payoff p {
  margin: 0 0 12px;
  color: var(--cream-soft);
  max-width: 52ch;
}
.payoff p strong { color: var(--cream); }

.cast {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
  padding-top: 18px;
}
.cast-llama {
  width: clamp(130px, 14vw, 190px);
  height: auto;
  filter: drop-shadow(5px 6px 0 rgba(18, 9, 18, 0.4));
}
.cast-bun {
  width: clamp(74px, 7.6vw, 100px);
  margin-left: -16px;
  filter: drop-shadow(4px 5px 0 rgba(18, 9, 18, 0.35));
}

footer {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(18px, 2.4vw, 30px) var(--gutter) clamp(30px, 4vw, 56px);
  border-top: 1px solid rgba(244, 234, 223, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--cream-soft);
  letter-spacing: 0.3px;
}
footer .dot { color: var(--mauve); }

/* ---------- the page stops being a spread and becomes a scroll ---------- */

@media (max-width: 1000px) {
  .row-1,
  .row-2,
  .band,
  .payoff {
    grid-template-columns: minmax(0, 1fr);
  }
  .insets { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .note { margin-top: 0; }
  .band { gap: 22px; }
  .band-shot { margin-top: 6px; }
  .payoff { align-items: start; }
  .cast { justify-content: flex-start; }
  /* still overlaid here (the flex stack starts at 760), and the p1 body wraps
     taller, so the clipboard llama shrinks to stay off the last column. */
  .llama--strip { width: 48px; right: 2px; bottom: 2px; }
  .bubble { right: clamp(120px, 26vw, 210px); }
}

@media (max-width: 760px) {
  .stage { display: flex; flex-direction: column; gap: 10px; }
  .stage > .caption,
  .stage > .bubble,
  .stage > .pills,
  .stage > .stage-foot,
  .stage > .llama,
  .stage > .decal-bun,
  .stage > .geo {
    position: static;
    max-width: none;
    margin: 0;
    transform: none;
    align-self: flex-start;
  }
  .stage > .caption { box-shadow: 3px 3px 0 rgba(18, 9, 18, 0.28); }
  .bubble::after { display: none; }
  .pills--tr { flex-direction: row; flex-wrap: wrap; }
  .llama { width: 96px; }
  .llama--strip { width: 56px; }
  .decal-bun { width: 52px; }
  .stage-foot--band { text-align: left; }
  .stage--geo { padding-top: 12px; }
  .stage--strip .under,
  .stage--geo .under { padding-right: 4px; }
}

@media (max-width: 640px) {
  .masthead { align-items: flex-start; }
  .sticker { margin-left: 0; order: 3; }
  .insets { grid-template-columns: 1fr; }
  .wires { grid-template-columns: 1fr; }
  .bubble { max-width: none; }
  .pills--bl { max-width: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .panel { transition: transform 160ms ease, box-shadow 160ms ease; }
  .portal:hover,
  .portal:focus-within { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(18, 9, 18, 0.5); }
}

/* ---------- light scheme ----------
   The panels are paper either way; only the field under them flips. Same file,
   same tokens where it matters: the band and every screenshot stay dark, so
   nothing inside a panel moves. Text that sat on the dusk field moves to ink,
   and the mauve accents deepen so they still clear 4.5:1 on a pale ground. */

@media (prefers-color-scheme: light) {
  body {
    background:
      repeating-linear-gradient(180deg, rgba(36, 29, 40, 0.035) 0 1px, transparent 1px 7px),
      radial-gradient(120% 80% at 50% -10%, #f7f2f7 0%, #ebe5ee 55%, #ddd5e2 100%);
    color: var(--ink);
  }
  .kicker { color: var(--ink-soft); }
  .brand .tld { color: var(--mauve-deep); }
  .sticker { background: var(--mauve); color: var(--ink); }

  .note { color: var(--ink); border-color: rgba(36, 29, 40, 0.32); }
  .note h2 { color: var(--mauve-deep); }
  .note p { color: var(--ink); }
  .note .small { color: var(--ink-soft); }

  .payoff h2 { color: var(--ink); }
  .payoff p { color: var(--ink-soft); }
  .payoff p strong { color: var(--ink); }

  footer { color: var(--ink-soft); border-top-color: rgba(36, 29, 40, 0.16); }
  footer .dot { color: var(--mauve-deep); }
}

/* she has been loitering in the drop for weeks; the payoff gives her a corner of the cast line-up */
.cast-banana {
  position: absolute;
  right: calc(100% - 6px);
  bottom: 0;
  width: clamp(58px, 6.2vw, 74px);
  height: auto;
  transform: rotate(7deg);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(3px 4px 0 rgba(18, 9, 18, 0.28));
}

/* the guard stands at the end of "writes need a token" — clear of the sentence,
   clear of the line-up, and the smallest of the four on purpose */
.cast-knight {
  position: absolute;
  right: calc(100% + 84px);
  bottom: 2px;
  width: clamp(60px, 6vw, 82px);
  height: auto;
  transform: rotate(-4deg);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(3px 4px 0 rgba(18, 9, 18, 0.24));
}

/* ---------- phones: keep the cast off the captions ---------- */

@media (max-width: 640px) {
  .llama--band {
    left: -12px;
    bottom: 40px;
    width: 92px;
    transform: rotate(-6deg);
  }
  .llama--strip { width: 88px; right: 10px; bottom: 8px; }
  .llama--geo { width: 82px; right: 22px; top: 14px; }
  .cast-banana { width: 50px; }
  .llama--chef { width: 62px; right: 0; top: -28px; bottom: auto; transform: rotate(4deg); }
}

/* ---------- narrow payoff ----------
   Under 1000 the payoff stacks and the line-up goes flush left: there is no right
   edge for a decal to hang off, and a third figure would stand outside the page.
   Banana steps back into the row, the guard steps out. Placed last on purpose —
   the base .cast-banana/.cast-knight rules above are absolute and would win by
   source order inside an earlier block. */
@media (max-width: 1000px) {
  .cast-banana { position: static; width: 54px; transform: rotate(5deg); }
  .cast-knight { display: none; }
}

/* ---------- wide screens ----------
   Past ~1150 the panels grow but the decals keep their clamp max, so their
   transparent edges start landing on the first column of copy. Pull the two
   that graze text out of the way; nothing else moves. */
@media (min-width: 1150px) {
  .llama--strip { bottom: -6px; }
  .llama--bl { width: clamp(120px, 14vw, 180px); left: clamp(6px, 1.4vw, 12px); }
}