/* =====================================================================
   Home (/): a browse page. The Featured billboard, the "what Ahaboom is" block, catalog rows, the membership
   block, then the marigold CTA band. Everything here is scoped to body[data-page="home"] or to home-only
   classes, and builds on panelab.css (.row, .tile, .badge, .cta-band).
   ===================================================================== */

.hb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Featured billboard: "Title rail" (owner-approved prototype B, 2026-10-16; owner correction the same day) ----------
   Four slides (SLICE!, RAMP, MIX, PUSH) stacked in one grid cell, laid out like the /slice/ title hero: the copy sits
   on the plain canvas on the left, in ink for every slide (the dark-ink logos), and the art takes the right side
   at its own 16:9 (never cropped sideways) and dissolves into the canvas on all four sides: a long fade toward the
   copy over the art's quiet left third, a short one under the header, a longer one into the rail, a short one on
   the right (where the art meets the screen edge, or from 1500px where it stops near the container edge, as on
   /slice/). The fades are masks, so the art really turns into the page colour; no shade box, no blurred edges.
   Under the art, a rail of four title tabs (thumbnail, name, subject, an 8 s progress line) and the pause button.
   Below 1024px: the art on top (4:3 on phones, 16:9 on small tablets) fading into the canvas top and bottom, the
   copy under it, the CTAs one row of two equal buttons.
   Lengths are in cqw of the section, so the art and the copy share one frame. */
.sb { container-type: inline-size;
  --bh: clamp(400px, 40cqw, 620px);                       /* band height */
  --aw: calc(var(--bh) * 16 / 9);                         /* art width: the art's own ratio */
  --ar: 0px;                                              /* art right edge */
  --x: max(var(--pad), calc((100cqw - var(--wrap)) / 2)); /* copy left edge: the page container */
  --cw: 460px;                                            /* copy column */
}
@media (min-width: 1500px) { .sb { --ar: max(0px, calc((100cqw - var(--wrap)) / 2 - 120px)); } }
.sb__stage { display: grid; }
.sb__slide { grid-area: 1 / 1; position: relative; display: grid; height: var(--bh); opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.sb__slide.is-on { opacity: 1; visibility: visible; z-index: 1; transition: opacity .7s ease; }
.sb__art { position: absolute; top: 0; bottom: 0; right: var(--ar); width: var(--aw);
  /* fade widths: --frk / --ftk per slide where a character comes close to that edge */
  --fl: calc(var(--aw) * .34); --fr: calc(var(--aw) * var(--frk, .07)); --ft: calc(var(--bh) * var(--ftk, .09)); --fb: calc(var(--bh) * .2);
  --mx: linear-gradient(90deg, transparent 0, rgb(0 0 0 / .1) calc(var(--fl) * .3), rgb(0 0 0 / .45) calc(var(--fl) * .6), rgb(0 0 0 / .85) calc(var(--fl) * .84), #000 var(--fl), #000 calc(100% - var(--fr)), rgb(0 0 0 / .6) calc(100% - var(--fr) * .45), transparent 100%);
  --my: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .55) calc(var(--ft) * .45), #000 var(--ft), #000 calc(100% - var(--fb)), rgb(0 0 0 / .5) calc(100% - var(--fb) * .5), transparent 100%);
  -webkit-mask-image: var(--mx), var(--my); -webkit-mask-composite: source-in;
          mask-image: var(--mx), var(--my); mask-composite: intersect; }
.sb__pic { height: 100%; }
.sb__pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 100% 30%); }

.sb__copy { position: relative; z-index: 1; grid-area: 1 / 1; align-self: center; width: calc(var(--x) + var(--cw)); padding: 24px 0 24px var(--x); color: var(--ink); }
.sb__kicker { margin: 0 0 12px; font: 700 var(--t-small)/1 var(--body); }
.sb__title { margin: 0 0 18px; line-height: 0; }
.sb__title img { width: auto; height: 112px; }
.sb__slide--slice .sb__title img { height: 124px; }
.sb__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 12px; padding: 0; list-style: none; font: 600 var(--t-meta)/1.3 var(--body); }
.sb__line { margin: 0 0 24px; font-size: var(--t-body); line-height: 1.5; max-width: 34ch; text-wrap: pretty; }

/* primary + More info: always one row */
.sb__ctas { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 10px; }
.sb__ctas .btn { white-space: nowrap; }
.sb__more { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); }
.sb__more:hover { background: var(--surface-2); }

/* the rail: the tabs are the navigation, so nothing floats over the picture */
.sb__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) var(--tap); gap: 16px; align-items: start; max-width: var(--wrap); margin: 8px auto 0; padding: 0 var(--pad); box-sizing: content-box; }
.sb__tab { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; min-height: var(--tap); padding: 14px 0 0; border: 0; background: none; color: var(--ink-2); text-align: left; font: inherit; cursor: pointer; }
.sb__tab::before, .sb__fill { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--line); }
.sb__fill { background: var(--ink); transform: scaleX(0); transform-origin: left; }
.sb__tab[aria-current="true"] .sb__fill { animation: sb-fill var(--dwell, 4s) linear forwards; }
.sb.is-held .sb__tab[aria-current="true"] .sb__fill { animation-play-state: paused; }
.sb.is-stopped .sb__tab[aria-current="true"] .sb__fill { animation: none; transform: none; }
@keyframes sb-fill { to { transform: none; } }
.sb__thumb { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.sb__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-t, 70% 40%); transition: transform .3s; }
.sb__tab:hover .sb__thumb img { transform: scale(1.04); }
.sb__name { display: block; font: 700 var(--t-body)/1.2 var(--body); }
.sb__sub { display: block; margin-top: 2px; font-size: var(--t-meta); line-height: 1.3; }
.sb__tab[aria-current="true"], .sb__tab:hover { color: var(--ink); }
.sb__tab[aria-current="true"] .sb__sub { color: var(--ink-3); }
.sb__tab:focus-visible { outline-offset: 4px; }
.sb__pause { align-self: center; margin-top: 14px; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.sb__pause:hover { background: var(--surface-2); }
.sb__pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sb__pause .sb__i-play { display: none; fill: currentColor; stroke-width: 1.5; }
.sb.is-stopped .sb__pause .sb__i-pause { display: none; }
.sb.is-stopped .sb__pause .sb__i-play { display: block; }

/* the block after the billboard starts close to the rail */
.sb + .sec { padding-top: var(--s6); }

@media (min-width: 861px) and (max-width: 1199px) {
  .sb { --cw: 400px; }
  .sb__title img { height: 84px; }
  .sb__slide--slice .sb__title img { height: 92px; }
  .sb__wide { display: none; }
  .sb__tab { grid-template-columns: 1fr; }
  .sb__sub { display: none; }
}
@media (min-width: 1800px) {
  .sb__title img { height: 128px; }
  .sb__slide--slice .sb__title img { height: 140px; }
  .sb__meta { font-size: var(--t-small); }
  .sb__line { font-size: var(--t-lede); }
}

/* below 1024px: the art on top, fading into the canvas under the header and into the copy; the copy under it */
@media (max-width: 1023px) {
  .sb__slide { height: auto; grid-template-rows: auto 1fr; }
  .sb__art { position: relative; inset: auto; grid-area: 1 / 1; width: auto; aspect-ratio: 16 / 9;
    --my: linear-gradient(180deg, transparent 0, #000 6%, #000 76%, rgb(0 0 0 / .5) 88%, transparent 100%);
    -webkit-mask-image: var(--my); mask-image: var(--my); }
  .sb__pic img { object-position: var(--pos-m, 80% 30%); }
  .sb__copy { grid-area: 2 / 1; align-self: stretch; width: auto; display: flex; flex-direction: column; align-items: flex-start; padding: 6px var(--pad) 0; }
  .sb__ctas { margin-top: auto; width: 100%; max-width: 520px; grid-auto-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sb__art { aspect-ratio: 4 / 3; }
  .sb__kicker { margin-bottom: 8px; font-size: var(--t-meta); }
  .sb__title { margin-bottom: 10px; }
  .sb__title img, .sb__slide--slice .sb__title img { height: 60px; }
  .sb__meta { margin-bottom: 8px; }
  .sb__wide { display: none; }
  .sb__line { margin-bottom: 16px; font-size: var(--t-small); line-height: 1.45; }
  .sb__ctas { max-width: none; }
  .sb__ctas .btn { min-height: 50px; padding: 0 8px; font-size: 15px; gap: 6px; }
  .sb__ctas .btn .ic { width: 18px; height: 18px; }
  .sb__long { display: none; }
  .sb__rail { gap: 8px; margin-top: 22px; box-sizing: border-box; }
  .sb__tab { grid-template-columns: 1fr; gap: 6px; padding-top: 10px; }
  .sb__thumb { border-radius: 6px; }
  .sb__name { font-size: 14px; }
  .sb__tab:not([aria-current="true"])::before { background: transparent; }
  .sb__sub { display: none; }
  .sb__pause { margin-top: 10px; align-self: start; }
  .sb + .sec { padding-top: var(--s5); }
}
@media (prefers-reduced-motion: reduce) {
  .sb__slide, .sb__slide.is-on { transition: none; }
  .sb__tab[aria-current="true"] .sb__fill { animation: none; transform: none; }
  .sb__thumb img { transition: none; }
}

/* ---------- "One choice. Different outcomes." (owner, 2026-10-15) ----------
   A real Episode 1 decision: the comic panel on the right, the question and two choices on the left.
   Picking one swaps in the consequence panel, one line and the fraction, then the read button (panelab.js [data-demo]). */
.choice { padding-block: var(--s7) var(--s5); }
.choice__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "head art" "play art"; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.choice__head { grid-area: head; }
.choice__head h2 { margin: 0 0 10px; }
.choice__head .lede { margin: 0 0 24px; max-width: 44ch; }
.choice__art { grid-area: art; aspect-ratio: 716 / 708; border-radius: var(--r-sheet); overflow: hidden; background: var(--surface-2); box-shadow: var(--e2); }
.choice__pane { width: 100%; height: 100%; }
.choice__play { grid-area: play; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: var(--r-sheet); background: var(--surface); }
.choice__q { margin: 0 0 14px; font: 700 var(--t-sub)/1.3 var(--body); }
.choice__tag { display: block; margin-bottom: 6px; color: var(--ink-3); font: 700 var(--t-meta)/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.choice__out { display: grid; gap: 14px; justify-items: start; margin-top: 14px; }
.choice__hint { margin: 0; color: var(--ink-2); font-size: var(--t-small); }
.choice__res p { margin: 0; font-size: var(--t-small); line-height: 1.5; }
.choice__res .choice__math { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; padding: 8px 14px; border-radius: var(--r-control); background: var(--sun-soft); font: 800 var(--t-sub)/1.2 var(--display); }
.choice__math span { color: var(--ink-2); font: 700 var(--t-meta)/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.choice [hidden] { display: none; }
@media (max-width: 860px) {
  .choice { padding-top: var(--s6); }
  .choice__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "art" "play"; }
  .choice__head .lede { margin-bottom: 18px; font-size: var(--t-body); }
  .choice__art { margin-bottom: 14px; }
  .choice__play { padding: 16px 16px 18px; }
  .choice__q { font-size: var(--t-body); }
  .choice__go { width: 100%; }
}

/* ---------- catalog rows ---------- */
.hb-rows { padding-top: 4px; }
.hb-rows .sec--row + .sec--row { margin-top: 4px; }

/* concealed endings: four face-down cards instead of the ending panels */
.tile__art.hb-endings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 8%; padding: 0 9%; background: var(--ink); }
.hb-endings span { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 2px solid var(--sun); border-radius: 8px; color: var(--sun); font: 800 clamp(20px, 2.4vw, 34px)/1 var(--display); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sun) 10%, transparent) 0 6px, transparent 6px 12px); }
.hb-endings span:nth-child(2) { transform: rotate(-4deg); }
.hb-endings span:nth-child(3) { transform: rotate(3deg); }

/* "Explore our worlds": every series once, a subject chip under the title, then a one-line hook */
.subj-chip { align-self: flex-start; max-width: 100%; margin: 2px 0 3px; padding: 2px 9px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font: 600 13px/1.4 var(--body); }

/* phones: about 2.3 tiles per view */
@media (max-width: 860px) {
  body[data-page="home"] .row { grid-auto-columns: calc((100% - 2 * var(--row-gap)) / 2.3); }
  .hb-rows .tile__title { font-size: 15px; }
  .hb-rows .tile > .badge { top: calc(62.5cqw - 6px); left: 6px; padding: 3px 7px; font-size: 12px; }
  .hb-rows .tile > .badge .ic { width: 12px; height: 12px; }
  .hb-endings span { border-radius: 5px; font-size: 18px; border-width: 1.5px; }
  .subj-chip { font-size: 12px; padding: 1px 8px; }
}

/* ---------- membership: "Two plans, plainly" (owner-approved prototype B, 2026-10-16) ----------
   No card. Left: the promise. Right: the two real ways to pay side by side, as big type split by one rule, then
   one action, "Become a member" (to /pricing/, where the parent picks the plan). Both columns start on the same
   top line and end on the same bottom line. No Tally here (owner). Phones: heading, promises, then the two plans still side by side and the button full width. */
.mb { padding: var(--sec-y) var(--gut) calc(var(--sec-y) / 2); }
.mb__in { max-width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: stretch; }
.mb h2 { margin: 0 0 26px; font: 800 var(--t-h2)/1.02 var(--display); letter-spacing: -.015em; }
.mb__l { display: block; }
.mb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.mb__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; }
.mb__list .ic { width: 24px; height: 24px; margin-top: 1px; }
.mb__list b { display: block; font-size: var(--t-body); line-height: 1.3; }
.mb__list span { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.45; }
.mb__price { position: relative; display: flex; flex-direction: column; }
.mb__label { margin: 10px 0 18px; font: 700 var(--t-sub)/1.2 var(--body); }
.mb__plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0 0 18px; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.mb__plan { padding: 18px 0 0; }
.mb__plan:first-child { padding-right: 28px; }
.mb__plan + .mb__plan { padding-left: 28px; border-left: 1px solid var(--line); }
.mb__name { display: block; margin-bottom: 8px; color: var(--ink-2); font: 700 var(--t-small)/1.2 var(--body); }
.mb__num { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font: 600 var(--t-body)/1 var(--body); }
.mb__num b { font: 800 64px/.9 var(--display); letter-spacing: -.03em; }
.mb__note { display: block; margin-top: 10px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.4; }
.mb__note strong { color: var(--ink); white-space: nowrap; }
.mb__facts { margin: 0 0 22px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.mb__cta { margin-top: auto; width: 100%; }
@media (min-width: 861px) and (max-width: 1199px) {
  .mb__num b { font-size: 48px; }
}
@media (max-width: 860px) {
  .mb__in { grid-template-columns: 1fr; }
  .mb h2 { margin-bottom: 20px; font-size: 30px; }
  .mb__price { margin-top: 36px; }
  .mb__label { margin: 0 0 14px; }
  .mb__plan:first-child { padding-right: 16px; }
  .mb__plan + .mb__plan { padding-left: 16px; }
  .mb__num { flex-wrap: wrap; row-gap: 4px; }
  .mb__num b { font-size: 46px; }
  .mb__num span { flex-basis: 100%; font-size: var(--t-small); }
}

/* ---------- what Ahaboom is (replaces the interactive choice demo, owner 2026-10-15) ---------- */
.what { padding-block: var(--s7) var(--s5); }
.what__in { max-width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.what__art { margin: 0; border-radius: var(--r-sheet); overflow: hidden; box-shadow: var(--e2); }
.what__art img { display: block; width: 100%; height: auto; }
.what__copy h2 { margin: 0 0 12px; }
.what__copy .lede { margin: 0 0 20px; max-width: 46ch; }
.what__list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 0; }
.what__list li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); }
.what__list li:last-child { border-bottom: 1px solid var(--line); }
.what__list b { font-size: var(--t-body); }
.what__list span { color: var(--ink-2); font-size: var(--t-small); }
@media (max-width: 860px) { .what__in { grid-template-columns: 1fr; } }