/* Home "what Ahaboom is": a four-panel comic page hosted by Tally.
   Platform type stays Bricolage + Lexend; Bangers letters only what is inside the
   panels (balloons, the one caption, the x-ray labels), as the reader letters the comic.
   Balloon geometry is set in container units of each panel, so a balloon stays over
   the same spot in the art at every width. */
@font-face { font-family: "Bangers"; font-weight: 400; font-display: swap; src: url("/assets/fonts/bangers-latin-400-normal.woff2") format("woff2"); }

.cp {
  --paper: #ffffff;
  --border: 3px;
  --gutter: clamp(10px, 1.1vw, 16px);
  --letter: "Bangers", "Bricolage", system-ui, sans-serif;
  padding: var(--sec-y) var(--gut);
  background: var(--canvas);
}
.cp__in {
  max-width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: clamp(32px, 4vw, 64px); align-items: center;
}

/* the page: white paper with a printed margin, panels in ink borders */
.cp__page {
  margin: 0; padding: clamp(12px, 1.6vw, 22px);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(20, 20, 20, .08), 0 18px 40px -18px rgba(20, 20, 20, .28);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter);
}
.cp__p { position: relative; margin: 0; border: var(--border) solid var(--ink); background: #ddd; overflow: hidden; container-type: inline-size; }
.cp__p > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp__p--1 { grid-column: 1 / 7; aspect-ratio: 3 / 2; }
.cp__p--2 { grid-column: 7 / 13; aspect-ratio: 3 / 2; }
.cp__p--3 { grid-column: 1 / 8; aspect-ratio: 712 / 706; }
.cp__p--4 { grid-column: 8 / 13; }      /* takes panel 3's height: a tall panel */
.cp__p--4 > img { position: absolute; inset: 0; }

/* in-world lettering. --bl font size, --bx/--by position, --bw width (all % / cqw of the panel) */
.bl {
  position: absolute; z-index: 3; margin: 0; box-sizing: border-box;
  left: var(--bx); top: var(--by); width: var(--bw);
  padding: .62em .9em .55em;
  border: 2.5px solid var(--ink); border-radius: 50% / 48%;
  background: var(--paper); color: var(--ink);
  font: 400 var(--bl, 5cqw)/1.04 var(--letter); letter-spacing: .03em; text-align: center; text-transform: uppercase;
  text-wrap: balance;
}
/* the tail: an svg wedge whose base sits inside the balloon edge, so its white fill
   covers the balloon border at the join; only the two sides are stroked.
   --tx: base x along the balloon, --ta: rotation (0 points straight down), --tl: length */
.bl__tail {
  position: absolute; left: var(--tx, 30%); top: calc(100% - 9px);
  width: 1.1em; height: var(--tl, 2em); margin-left: -.55em;
  transform: rotate(var(--ta, 0deg)); transform-origin: 50% 0;
  overflow: visible; pointer-events: none;
}
.bl__tail path { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bl--side .bl__tail { left: calc(100% - 9px); top: var(--ty, 55%); }
.bl--up .bl__tail { top: auto; bottom: calc(100% - 9px); transform-origin: 50% 100%; }

/* the one caption box on the page: plain paper, it labels the real panel (marigold is the x-ray only) */
.cap {
  position: absolute; z-index: 3; margin: 0;
  padding: .4em .65em .32em; border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 400 var(--cl, 3.6cqw)/1.05 var(--letter); letter-spacing: .04em; text-transform: uppercase;
}

/* panel 1: the grey kitchen, held back further than the art already is */
.cp__p--1 > img { filter: saturate(.7) contrast(.96); }

/* panel 3: the x-ray. The svg shares the image's 712x706 box, so the outlines stay on the gate */
.xr { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.xr__wired { fill: none; stroke: var(--sun); stroke-width: 6; stroke-dasharray: 14 9; stroke-linejoin: round; }
.xr__clear { fill: none; stroke: var(--sun); stroke-width: 8; stroke-linejoin: round; }
.xr__veil { fill: rgba(16, 16, 20, .3); }
.xr__num, .xr__word { font-family: var(--letter); fill: var(--sun); stroke: var(--ink); stroke-width: 7px; paint-order: stroke fill; stroke-linejoin: round; }
.xr__num { font-size: 46px; }
.xr__word { font-size: 25px; letter-spacing: 1px; }
.xr__under { fill: none; stroke: var(--ink); stroke-width: 11; stroke-linejoin: round; opacity: .85; }
.xr__tag rect { fill: var(--sun); stroke: var(--ink); stroke-width: 3; }
.xr__tag text { font: 400 30px var(--letter); letter-spacing: 1px; fill: var(--ink); }
.xr__lead { stroke: var(--ink); stroke-width: 3; fill: none; }

/* the outline draws in once when the page scrolls into view; visible by default */
@media (prefers-reduced-motion: no-preference) {
  .js .xr__wired, .js .xr__clear { stroke-dashoffset: 0; transition: opacity .5s ease-out .2s; }
  .js .cp:not(.is-in) .xr { opacity: 0; }
  .js .xr { transition: opacity .7s cubic-bezier(.16, 1, .3, 1) .35s; }
}

/* the parents' column */
.cp__copy h2 { margin: 0 0 18px; font: 800 var(--t-h2)/1.06 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.cp__copy p { margin: 0 0 22px; color: var(--ink-2); font: 400 var(--t-sub)/1.5 var(--body); max-width: 34ch; }
.cp__link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font: 700 var(--t-body)/1.2 var(--body); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.cp__link:hover { text-decoration-thickness: 3px; }
.cp__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 2px; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--sun); color: var(--ink); }

@media (max-width: 1100px) {
  .cp__in { grid-template-columns: 1fr; gap: 36px; }
  .cp__page { max-width: 860px; }
  .cp__copy { max-width: 640px; }
}

/* phone: one panel per row, balloons scale up against the narrower panel */
@media (max-width: 640px) {
  .cp { padding-block: 56px; }
  .cp__page { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .cp__p--1, .cp__p--2, .cp__p--3, .cp__p--4 { grid-column: 1; }
  .cp__p--4 { aspect-ratio: 4 / 5; }
  .cp__copy h2 { font-size: 30px; }
  .cp__copy p { font-size: 18px; }
}


/* ---- balloon placement, per panel (percent of the panel, type in cqw of the panel) ---- */
.bl--mom    { --bx: 3%;  --by: 5%;  --bw: 38%; --bl: max(16px, 4.6cqw); --tx: 20%; --ta: 30deg; --tl: 3.4em; }
.bl--ugh    { --bx: 76%; --by: 10%; --bw: auto; --bl: max(16px, 4.6cqw); --tx: 26%; --ta: 52deg; --tl: 2.8em; white-space: nowrap; padding-inline: 1.1em; }
.bl--tally2 { --bx: 2%;  --by: 3%;  --bw: 42%; --bl: max(16px, 4.6cqw); --ty: 60%; --ta: -76deg; --tl: 3em; }
/* panel 3 is the episode's own art: these two balloons sit exactly over its lettering
   (measured on the 712x706 panel) and re-letter it, so they keep a fixed ellipse */
.bl--tally3, .bl--alexa3 { display: flex; align-items: center; justify-content: center; padding: .4em 1.1em; }
.bl--tally3 { --bx: .4%; --by: -.8%; --bw: 48.4%; height: 25.6cqw; --bl: max(15px, 3.75cqw); --tx: 42%; --ta: 4deg; --tl: 2.2em; }
.bl--alexa3 { --bx: 59%; --by: -.2%; --bw: 40.6%; height: 20.6cqw; --bl: max(15px, 4.5cqw); --tx: 55%; --ta: -6deg; --tl: 1.9em; }
.bl--alexa4 { --bx: 19%; --by: 4.5%; --bw: 62%; --bl: max(17px, 6.4cqw); --tx: 45%; --ta: 2deg; --tl: 2em; }
.cap--real  { left: 0; bottom: 0; border-width: 2.5px 2.5px 0 0; --cl: max(13px, 3.3cqw); }
.cp__p--4 > img { object-position: 50% 60%; }
@media (max-width: 640px) {
  /* phone: the two episode balloons may grow past the baked ones; one lettering size on every panel */
  .bl--tally3 { height: auto; min-height: 25.6cqw; --bw: 52%; --bl: 16px; }
  .bl--alexa3 { --bl: 16px; }
  .cp__p--4 { aspect-ratio: 5 / 6; }
}
/* live home (owner, 2026-10-16): on narrow screens the parents' copy comes first */
@media (max-width: 1100px) { .cp__copy { order: -1; } }