/* ending (loaded after styles.css and hero.css)
   The finale: the takeaway, then end credits that roll up through the starfield
   (ending.js + ending3d.js), landing on a slate with Hire Joe and Get the free kit.
   Default (no JS, reduced motion, no WebGL): the same credits as a still, typeset page.
   .credits.is-3d: a sticky, scroll-scrubbed roll; the HTML credits stay for screen readers. */

/* the takeaway opens a little closer under the kit (which ends with its own padding) */
.recap2 > .wrap:not(.rc-coda) { padding-top: clamp(64px, 5vw, 72px); }

/* the takeaway headline: one sentence per line on desktop */
@media (min-width: 900px) {
  .recap2 h2 > span { white-space: nowrap; }
}

/* ---------- the credits, as a still page ---------- */
.credits { --cr-w: min(800px, calc(100% - 32px)); position: relative; color: var(--on-dark-2); text-align: center; }
.cr-canvas { display: none; }
.cr-roll { width: var(--cr-w); margin: 0 auto; padding: clamp(48px, 5.6vw, 80px) 0 0; }
.cr-block + .cr-block { margin-top: clamp(44px, 4.4vw, 64px); }
.cr-k { margin: 0 0 18px; font: 500 12.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--signal); }
.cr-open h3 { margin: 0; font: 400 var(--t-display)/1.08 var(--display); letter-spacing: -0.024em; color: var(--on-dark); text-wrap: balance; }

.cr-roles { margin: 0; display: grid; gap: 14px; }
.cr-roles > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: baseline; }
.cr-roles dt { text-align: right; font: 500 12.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.cr-roles dd { margin: 0; text-align: left; font: 400 clamp(20px, 1.8vw, 24px)/1.25 var(--display); letter-spacing: -0.01em; color: var(--on-dark); }

.cr-films { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.cr-films b { display: block; font: 400 clamp(22px, 2.2vw, 30px)/1.15 var(--display); letter-spacing: -0.018em; color: var(--on-dark); }
.cr-films span { display: block; margin-top: 6px; font: 400 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-soft); }

.cr-versions { list-style: none; margin: 0 auto; padding: 0; max-width: 600px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cr-versions li { min-width: 50px; padding: 7px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--dark-line); font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.cr-versions .is-final { background: var(--signal); box-shadow: none; color: var(--ink); }
.cr-versions small { font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cr-gap { margin: 16px 0 0; font: 400 12.5px/1.4 var(--mono); letter-spacing: .06em; color: var(--on-dark-soft); }

.cr-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cr-notes li { font: italic 300 clamp(19px, 1.7vw, 23px)/1.35 var(--display); letter-spacing: -0.005em; color: var(--on-dark-2); text-wrap: balance; }

/* ---------- the slate ---------- */
.cr-slate { width: min(640px, calc(100% - 32px)); margin: clamp(56px, 6vw, 80px) auto 0; }
.cr-board { position: relative; padding: 0 clamp(20px, 3.4vw, 36px) clamp(26px, 3.4vw, 34px); border-radius: var(--r-l); background: var(--dark-2); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .08), 0 40px 80px -40px oklch(0 0 0 / .8); text-align: center; }
/* the clapper: film-leader stripes, the stick hinged at the left */
.cr-clap { position: relative; height: 40px; margin: 0 calc(-1 * clamp(20px, 3.4vw, 36px)); border-radius: var(--r-l) var(--r-l) 0 0; background: repeating-linear-gradient(118deg, var(--signal) 0 26px, var(--dark) 26px 52px); box-shadow: inset 0 -1px 0 oklch(0 0 0 / .5); }
.cr-clap i { position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; margin-bottom: 4px; border-radius: 6px 6px 3px 3px; background: repeating-linear-gradient(62deg, var(--signal) 0 26px, var(--dark) 26px 52px); box-shadow: inset 0 0 0 1px oklch(0 0 0 / .35); transform-origin: 8px 100%; rotate: calc(var(--clap, 0) * -14deg); }
.cr-fields { margin: 0 calc(-1 * clamp(20px, 3.4vw, 36px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--dark-line); }
.cr-fields > div { padding: 14px 10px 13px; text-align: left; }
.cr-fields > div + div { border-left: 1px solid var(--dark-line); }
.cr-fields dt { font: 500 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.cr-fields dd { margin: 6px 0 0; font: 500 14px/1.25 var(--mono); color: var(--on-dark); }
.cr-fields > div:last-child dd { color: var(--signal); }
.cr-wrapline { margin: 30px 0 0; font: 400 var(--t-display)/1.05 var(--display); letter-spacing: -0.026em; color: var(--on-dark); }
.cr-slate-sub { margin: 12px auto 0; max-width: 48ch; text-wrap: balance; font-size: var(--t-lead); line-height: 1.5; color: var(--on-dark-2); }
.recap2 .cr-cta { justify-content: center; margin-top: 28px; }
.cr-back { display: inline-block; margin-top: 18px; font-size: var(--t-small); color: var(--on-dark-soft); text-underline-offset: 3px; }
.cr-back:hover { color: var(--on-dark); }

/* coda: the "what is real" note after the slate; in 3D it sits right under the landed board */
.recap2 > .wrap.rc-coda { padding: clamp(40px, 4vw, 56px) 0 clamp(32px, 2.8vw, 40px); border-top: 0; }
.credits.is-3d + .wrap.rc-coda { padding-top: 8px; }
.recap2 .rc-coda .deeper { margin-top: 0; }
/* support follows the note directly: one band's padding, not two */
#support .support-in { padding: clamp(40px, 3.6vw, 52px) 0 clamp(44px, 3.6vw, 52px); }
#support .support-credit { margin-top: 28px; padding-top: 16px; }

@media (min-width: 621px) {
  .cr-roles dd { white-space: nowrap; }
}
@media (max-width: 620px) {
  .cr-roles > div { grid-template-columns: 1fr; row-gap: 4px; }
  .cr-roles dt, .cr-roles dd { text-align: center; }
  .cr-roles { gap: 20px; }
  .cr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-fields > div:nth-child(3) { border-left: 0; }
  .cr-fields > div:nth-child(n + 3) { border-top: 1px solid var(--dark-line); }
  .cr-versions li { min-width: 46px; padding: 7px 8px; }
}

/* ---------- 3D: the roll (ending.js adds .is-3d when WebGL runs and motion is allowed) ---------- */
/* The stage starts under the takeaway: the takeaway scrolls up over it and the first credits follow
   --cr-lead below its last line (at --cr-k of the stage height; ending3d.js reads the same value).
   The roll runs through 100svh of pinned scroll, and the slate's board rises in under the last
   credits, at the foot of the stage, so the note and the support block follow straight after it. */
.credits { --cr-k: .8; --cr-lead: 130px; }
.recap2 > .wrap:has(+ .credits.is-3d) { position: relative; z-index: 1; padding-bottom: 0; }
.credits.is-3d { margin-top: calc(var(--cr-lead) - var(--cr-k) * 100svh); }
.credits.is-3d .cr-track { position: relative; height: 200svh; }
.credits.is-3d .cr-stick { position: sticky; top: 0; height: 100svh; overflow: clip; }
.credits.is-3d .cr-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.credits.is-3d.is-live .cr-canvas { opacity: 1; }
/* the real credits stay in the page for screen readers and search */
.credits.is-3d .cr-roll { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.credits.is-3d .cr-slate { position: absolute; inset: 0; width: auto; margin: 0; display: grid; place-items: end center; padding: 96px 16px clamp(24px, 4.4svh, 40px); pointer-events: none; opacity: min(1, calc(var(--slate, 0) * 3)); }
.credits.is-3d .cr-board { width: min(640px, 100%); transform: translate3d(0, calc((1 - var(--slate, 0)) * (100% + 64px)), 0); }
.credits.is-3d.is-slate .cr-slate { pointer-events: auto; }
/* the stick opens only as the board arrives, and not so far that it reaches the last credits */
.credits.is-3d .cr-clap i { rotate: calc(var(--clap, 0) * -10deg); }
@media (max-width: 620px) {
  .credits { --cr-lead: 120px; }
  .credits.is-3d .cr-track { height: 225svh; }
  .credits.is-3d .cr-slate { padding: 84px 16px 16px; }
}
@media (max-height: 640px) {
  .credits.is-3d .cr-slate { padding-top: 76px; }
  .credits.is-3d .cr-wrapline { margin-top: 18px; }
}

/* recap: what you actually need (four habits, replaces the six ideas) */
.recap2 .rc-habits { margin-top: 52px; }
.recap2 .rc-habits .rc-label { margin: 0 0 12px; }
.recap2 .rc-hh { margin: 0 auto 28px; font-family: var(--display); font-size: var(--t-h3); font-weight: 500; line-height: 1.2; color: var(--on-dark); text-wrap: balance; }
.recap2 .rc-hh span { display: block; }
.recap2 .rc-hh span + span { color: var(--signal); }
@media (min-width: 1000px) { .recap2 .rc-hh span { white-space: nowrap; } }
.recap2 .rc-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.recap2 .rc-four li, .recap2 .rc-four li:not(:nth-child(3n + 1)) { padding: 26px 24px 28px; border-left: 1px solid var(--dark-line); }
.recap2 .rc-four li:first-child { border-left: 0; }
.recap2 .rc-four li { grid-template-columns: 1fr; row-gap: 10px; text-wrap: pretty; }
.recap2 .rc-four .rc-ic { grid-row: auto; }
.recap2 .rc-four b { margin: 4px 0 0; font-family: var(--display); font-size: var(--t-h4); font-weight: 560; }
.recap2 .rc-models { margin: 28px auto 0; font-family: var(--display); font-style: italic; font-size: var(--t-lead); color: var(--on-dark-2); text-wrap: balance; }
/* archival film over each habit: public-domain loops (assets/archive, see SOURCES.md), played by ending.js
   only while on screen. The habit's icon, where the Skill's icons land, sits on the film's corner. */
.recap2 .rc-four .rc-film { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-s); background: var(--dark-2); }
.recap2 .rc-four .rc-film::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(oklch(0.16 0.01 70 / .5), transparent 30%); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .1); pointer-events: none; }
.recap2 .rc-four .rc-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.recap2 .rc-four .rc-film figcaption { position: absolute; inset: 10px 12px auto; display: flex; justify-content: space-between; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: oklch(1 0 0 / .82); text-shadow: 0 1px 3px oklch(0 0 0 / .75); pointer-events: none; }
.recap2 .rc-four .rc-film + .rc-ic { position: relative; z-index: 1; margin: -30px 0 0 12px; background: var(--signal); color: var(--ink); box-shadow: 0 8px 18px -8px oklch(0 0 0 / .8); }
@media (max-width: 980px) {
  .recap2 .rc-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recap2 .rc-four li:nth-child(3) { border-left: 0; }
}
@media (max-width: 620px) {
  .recap2 .rc-four { grid-template-columns: 1fr; }
  .recap2 .rc-four li, .recap2 .rc-four li:nth-child(n) { padding: 20px 0; border-left: 0; }
  /* phones: the film becomes a small still-frame beside the words, so the four habits stay short */
  .recap2 .rc-four li { grid-template-columns: 116px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; }
  .recap2 .rc-four .rc-film { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .recap2 .rc-four .rc-film figcaption { inset: 7px 8px auto; font-size: 9px; letter-spacing: .08em; }
  .recap2 .rc-four .rc-fw { display: none; }
  .recap2 .rc-four .rc-film + .rc-ic { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 32px; height: 32px; margin: 71px 0 0 8px; }
  .recap2 .rc-four .rc-film + .rc-ic .ic { width: 17px; height: 17px; }
  .recap2 .rc-four b { grid-column: 2; grid-row: 1; margin: 0; }
  .recap2 .rc-four .rc-t { grid-column: 2; grid-row: 2; }
}