/* FOCAL homepage only (index.html). Loaded right after /dist/output.css.
 * Shared files stay untouched: no tailwind.config.js, src/input.css or
 * dist/output.css edits; everything homepage-specific lives here.
 */

/* ---------------------------------------------------------- type fix
 * output.css ships `font-family: Source Serif 4, Georgia, serif` unquoted.
 * A family name ending in a bare "4" is not a valid identifier, so browsers
 * drop the whole declaration and every heading falls back to Inter. Quoted
 * here: Source Serif 4 for display, Inter (body, from output.css) for text.
 * The Google Fonts link in <head> already requests 500 and 600. */
.display-hero,
.display-section,
.font-display {
  font-family: "Source Serif 4", Georgia, serif;
}

/* -------------------------------- 02 rhythm around the full-bleed scene */
/* The lead chamber hands straight into the scene and the rest chamber picks
   up right after it, so the section reads as one section in three parts. */
.home-02--lead { padding-bottom: 3.5rem; }
.home-02--rest { padding-top: 3rem; }
@media (min-width: 768px) {
  .home-02--lead { padding-bottom: 5rem; }
  .home-02--rest { padding-top: 4rem; }
}
/* Items 3 and 4 continue the list item 1 started: rule above the first. */
.home-02__items--rest { margin-top: 2.5rem; border-top: 1px solid rgba(14, 8, 41, 0.18); }

/* ------------------------------------------------ 02 proof (OPTIONAL) */
/* Ships with its caveat or not at all (copy deck F9). Small on purpose: a
   footnote to the scene, not a stat banner. */
.home-proof {
  max-width: 36rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(25, 210, 92, 0.75);
}
.home-proof__line {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(14, 8, 41, 0.8);
}
.home-proof__note {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(14, 8, 41, 0.64);
}

/* ------------------------------------------------ homes scene, mounted */
/* Live: the stage is sticky inside its scroll track. Paint the track void too,
   so nothing but the scene shows if sticky lags a frame (iOS momentum) or a
   capture renders the whole document at once. */
html.homes3d-live .homes3d:not(.is-still) .homes3d__track { background: #0E0829; }

/* Balanced ragged edge for the homepage's own paragraphs (no orphans like a
   lone "is." or "5000."). Hero copy is left exactly as it was. */
.chamber-body p,
.chamber-body dd,
.h3d-card__cap {
  text-wrap: pretty;
}
/* Section titles break in balanced lines (no lone "number." or "mystery.").
   The 03 title keeps each "No ..." whole with &nbsp; and a word joiner after
   the hyphen in index.html (plain text, so main.js still splits its words).
   The hero H1 is not touched. */
.chamber-body .display-section {
  text-wrap: balance;
}

/* =====================================================================
 * Copy beats (2026-10-07, reworked 2026-10-08). Pairs with js/home-beats.js.
 * Used by "The read" (02's rail) and the homes scene's copy (css/home-scene.css
 * holds that block's own look). CSS picks the mode and tells the script
 * through --beats-mode:
 *   pin    desktop: the read panel (beside the pinned 02 copy) and the
 *          homes copy (beside the scene), one beat at a time.
 *   card   phones, tablets: a swipeable rail, one card in view, the next
 *          peeking. A set listed out ran too long on a phone (Bryan, 10-07).
 *   flow   a plain list that fades up once (homes copy when its scene fell
 *          back to the still on desktop).
 * At rest (no JS, reduced motion, script never wired) every beat is plain
 * text in order: everything that hides a beat sits under html.beats-live
 * (head gate) or html.beats-ready / [data-mode] (set by the script).
 * ===================================================================== */
.home-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@property --beat-f { syntax: "<number>"; inherits: true; initial-value: 1; }

.beats { --beats-mode: flow; --beat-len: 34vh; position: relative; }
.beats__rail { display: none; }
.beats__list { list-style: none; margin: 0; padding: 0; }
.beat { position: relative; }
.beat p { margin: 0; }
.beat__k {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: Inter, system-ui, sans-serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  color: rgba(14, 8, 41, 0.6);
}
.beat__k span { font-variant-numeric: tabular-nums; color: rgba(14, 8, 41, 0.42); }
/* the beat's tick: hollow until the beat is the one being read */
.beat__k::before {
  content: ""; flex: none; width: 7px; height: 7px; box-sizing: border-box;
  border: 1px solid rgba(14, 8, 41, 0.4);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.beats__label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  margin: 0 0 0.55rem;
  font-family: Inter, system-ui, sans-serif; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(14, 8, 41, 0.58);
}
.beats__count { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.beats__count b { font-weight: 600; color: #0E0829; }

/* ------------------------------------------------ 02 lead: the read */
/* One composition (Bryan, 10-08: no card, and no dead space). Desktop: the
   title, intro and item 1 on the left, the read on the right, set straight
   on the linen with hairline rules. With motion, the whole block pins,
   centred in the viewport, while the six take turns. Phones: one column,
   title, intro, the read (swipeable cards), item 1. */
.home-02__head .kicker { margin: 0 0 1.5rem; }
.home-02__head .display-section { text-wrap: balance; }
.home-02__head .body-lg { margin-top: 1.5rem; max-width: 36rem; text-wrap: pretty; }
.home-02__items { margin-top: 2.5rem; }
.home-02__items dd { text-wrap: pretty; }
/* the read sits on a card of the page's own linen, lifted by a soft shadow
   (Bryan, 10-08): paper on paper, not a box of a different colour */
.home-read {
  --read-pad: clamp(1.25rem, 2.4vw, 2.25rem);
  margin-top: 2.5rem; padding: var(--read-pad);
  background: #E5E0DC;
  border: 1px solid rgba(14, 8, 41, 0.07);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(14, 8, 41, 0.06),
    0 24px 50px -30px rgba(14, 8, 41, 0.34);
}
@media (min-width: 1024px) and (min-aspect-ratio: 9/10) {
  .home-02__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "head read" "items read"; grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 7vw, 6.5rem); align-items: start;
  }
  .home-02__head { grid-area: head; }
  .home-read { grid-area: read; margin-top: 0.15rem; }
  .home-02__items { grid-area: items; margin-top: 2.25rem; }
}

/* the read, typographic: a label row with the count, a progress hairline, the
   beats, and (pinned) a labelled index along the foot */
.beats__top {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid rgba(14, 8, 41, 0.2);
}
.beats__title {
  margin: 0; font-family: Inter, system-ui, sans-serif; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(14, 8, 41, 0.62);
}
.beats--read .beats__count { display: none; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; color: rgba(14, 8, 41, 0.45); font-variant-numeric: tabular-nums; }
.beats--read .beats__count b { color: #0E0829; }
.beats--read .beat { padding: 1.1rem 0 1.15rem; }
.beats--read .beat + .beat { border-top: 1px solid rgba(14, 8, 41, 0.1); }
.beats--read .beat__q {
  margin-top: 0.55rem !important;
  font-family: "Source Serif 4", Georgia, serif; font-weight: 500;
  font-size: clamp(1.3rem, 1.9vw, 1.55rem); line-height: 1.24; letter-spacing: -0.008em; color: #0E0829; text-wrap: pretty;
}
.beats--read .beat__a { margin-top: 0.4rem !important; font-size: 1rem; line-height: 1.55; color: rgba(14, 8, 41, 0.72); text-wrap: pretty; }
.beats--read .beat--answer .beat__q { font-weight: 600; }
.beats--read .beat--answer .beat__a { font-family: "Source Serif 4", Georgia, serif; font-size: 1.15rem; color: #0A7D34; }
html.beats-live .beats--read .beats__count { display: inline; }

/* ---- pin (desktop): the whole lead pins, centred; one beat at a time ---- */
@media (min-width: 1024px) and (min-aspect-ratio: 9/10) {
  html.beats-live .home-02--lead { padding-top: 0; padding-bottom: 0; }
  html.beats-live .home-02__track { position: relative; height: calc(100vh + var(--read-n, 6) * 30vh); }
  html.beats-live .home-02__stage {
    position: sticky; top: 0; height: 100vh; box-sizing: border-box;
    display: flex; align-items: center; padding: 5rem 0 2.5rem;
  }
  html.beats-live .home-02__grid { width: 100%; max-width: min(84rem, 100%); column-gap: clamp(3.5rem, 7vw, 8rem); }
  /* set larger while pinned, so the one composition holds the screen */
  html.beats-live .home-02__head .display-section { font-size: clamp(2.5rem, 3.9vw, 4rem); line-height: 1.06; }
  html.beats-live .home-02__head .body-lg { font-size: clamp(1.125rem, 1.35vw, 1.3rem); max-width: 34rem; margin-top: 1.75rem; }
  html.beats-live .home-02__items { margin-top: clamp(2rem, 4vh, 3rem); }
  html.beats-live .home-02__items dt { font-size: clamp(1.3rem, 1.6vw, 1.55rem); }
  html.beats-live .home-02__items dd { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.6; }
  html.beats-live .beats--read { --beats-mode: pin; }
  html.beats-live .beats--read .beats__top::after {
    content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: calc(var(--beats-p, 0) * 100%);
    background: #19D25C; box-shadow: 0 0 6px rgba(25, 210, 92, 0.5);
  }
  html.beats-live .beats--read .beats__rail { display: block; margin-top: 2.5rem; }
  html.beats-live .beats--read { display: flex; flex-direction: column; }
  html.beats-live .beats--read .beats__rail { order: 3; }
  html.beats-live .beats--read .beats__list { display: grid; margin-top: 1.6rem; }
  html.beats-live .beats--read .beat { grid-area: 1 / 1; padding: 0; border: 0; }
  html.beats-live .beats--read .beat__k { color: #0A7D34; }
  html.beats-live .beats--read .beat__k span { color: rgba(10, 125, 52, 0.7); }
  html.beats-live .beats--read .beat__q {
    margin-top: 1rem !important; font-size: clamp(2.2rem, 3.3vw, 3.4rem); line-height: 1.1; letter-spacing: -0.018em; text-wrap: balance;
  }
  html.beats-live .beats--read .beat__a { margin-top: 1.1rem !important; font-size: clamp(1.1rem, 1.3vw, 1.3rem); max-width: 32rem; }
  html.beats-live .beats--read .beat--answer .beat__a { font-size: clamp(1.4rem, 2vw, 1.85rem); }
  html.beats-live .beats--read .beats__title { font-size: 0.8rem; }
  html.beats-live .beats--read .beats__count { font-size: 0.8rem; }
  html.beats-live .beats--read .beat__k { font-size: 0.75rem; }
  html.beats-live:not(.beats-ready) .beats--read .beat:not(:first-child) { visibility: hidden; }
  /* the index: six labelled ticks in two rows; each jumps to its beat */
  html.beats-live .beats--read .beats__index {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem;
    padding: 0.8rem 0 0; border-top: 1px solid rgba(14, 8, 41, 0.14);
  }
  html.beats-live .beats--read .beats__index::before,
  html.beats-live .beats--read .beats__index::after { display: none; }
  html.beats-live .beats--read .beats__index button {
    display: flex; width: 100%; padding: 0.4rem 0 0.4rem 1rem; gap: 0.45rem;
    font-size: 0.7rem; letter-spacing: 0.13em; color: rgba(14, 8, 41, 0.5); white-space: nowrap;
  }
  html.beats-live .beats--read .beats__index button span { color: rgba(14, 8, 41, 0.36); }
  html.beats-live .beats--read .beats__index button::before {
    left: 0; width: 7px; height: 7px; border-color: rgba(14, 8, 41, 0.38); background: #E5E0DC;
  }
  html.beats-live .beats--read .beats__index button:hover { color: #0E0829; }
  html.beats-live .beats--read .beats__index li.is-past button::before { background: rgba(14, 8, 41, 0.45); border-color: transparent; }
  html.beats-live .beats--read .beats__index li.is-on button { color: #0A7D34; }
  html.beats-live .beats--read .beats__index li.is-on button span { color: rgba(10, 125, 52, 0.75); }
  html.beats-live .beats--read .beats__index li.is-on button::before {
    background: #19D25C; border-color: #19D25C; box-shadow: 0 0 0 3px rgba(25, 210, 92, 0.16);
  }
}

/* ---- flow: fades up once (and its tick lights in the reading band) ---- */
html.beats-live.beats-ready .beats[data-mode="flow"] .beat {
  transition: opacity 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
html.beats-live.beats-ready .beats[data-mode="flow"] .beat:not(.is-seen) { opacity: 0; transform: translateY(14px); }
html.beats-live .beats[data-mode="flow"] .beat.is-on .beat__k::before {
  background: #19D25C; border-color: #19D25C; box-shadow: 0 0 0 3px rgba(25, 210, 92, 0.16);
}

/* ---- pin (the homes copy on desktop): every beat sits in the same grid
   cell, so the cell is as tall as the longest beat and nothing shifts when
   they swap. The new beat is printed top to bottom by a green scan line
   (the scene's own scan); the old one lifts away. */
html.beats-live .beats[data-mode="pin"] .beat {
  --beat-f: 0;
  opacity: 0; transform: translateY(var(--beat-exit, -10px));
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), transform 0.42s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), --beat-f 0s linear 0.42s;
}
html.beats-live .beats[data-mode="pin"][data-dir="back"] .beat { --beat-exit: 10px; }
html.beats-live .beats[data-mode="pin"] .beat.is-on {
  --beat-f: 1;
  opacity: 1; transform: none; pointer-events: auto;
  transition: --beat-f 0.74s cubic-bezier(0.45, 0.05, 0.25, 1) 0.12s, opacity 0.18s linear 0.12s, transform 0.74s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 0.12s;
}
/* the reveal and its scan line share one value on one box (the text, not the
   stretched grid cell), so the line always rides the edge of the print */
html.beats-live .beats[data-mode="pin"] .beat__in,
html.beats-live .beats[data-mode="card"] .beat__in {
  position: relative;
  clip-path: inset(-0.6rem -2rem calc((1 - var(--beat-f)) * 100% - 6px) -2rem);
}
html.beats-live .beats[data-mode="pin"] .beat__in::after {
  content: ""; position: absolute; left: -0.75rem; right: 8%; height: 1px;
  top: calc(var(--beat-f) * 100% + 2px);
  background: linear-gradient(90deg, rgba(25, 210, 92, 0), #19D25C 10%, #34FE76 55%, rgba(25, 210, 92, 0));
  box-shadow: 0 0 10px 1px rgba(25, 210, 92, 0.45);
  opacity: 0; pointer-events: none;
}
html.beats-live .beats[data-mode="pin"] .beat.is-on .beat__in::after { animation: beat-scan 0.86s linear 0.12s both; }
@keyframes beat-scan { 0% { opacity: 0; } 10% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
html.beats-live .beats[data-mode="pin"] .beat__k::before { display: none; }

/* the index: one tick per beat, the fill scrubbed by progress; each tick is
   a button that jumps to its beat (layout per block: css/home-scene.css) */
.beats__index { position: relative; list-style: none; margin: 0; padding: 0; }
.beats__index button {
  position: relative; display: flex; align-items: center; gap: 0.55rem;
  margin: 0; padding: 0.5rem 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: Inter, system-ui, sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2;
  transition: color 0.25s;
}
.beats__index::before,
.beats__index::after { content: ""; position: absolute; }
.beats__index button::before {
  content: ""; position: absolute; z-index: 1; box-sizing: border-box;
  top: 50%; transform: translateY(-50%); border: 1px solid transparent;
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}


/* ---- cards (phones, tablets): each set is a rail you swipe ----
   One card in view, the next peeking; native horizontal scroll with snap, so
   a vertical flick never hides copy and swiping back never replays. Each
   card prints in once with the desktop's scan line. */
@media (max-width: 1023px), (max-aspect-ratio: 9/10) {
  html.beats-live .beats { --beats-mode: card; --bleed: 1.25rem; }
  html.beats-live .beats__rail { display: block; margin-top: 1.4rem; }
  html.beats-live .beats--h3d .beats__label { display: flex; color: rgba(229, 224, 220, 0.62); }
  html.beats-live .beats--h3d .beats__count b { color: #F4F1ED; }
  html.beats-live .beats__index { display: flex; gap: 4px; padding: 0; }
  html.beats-live .beats__index::before,
  html.beats-live .beats__index::after { display: none; }
  html.beats-live .beats__index li { flex: 1 1 0; }
  html.beats-live .beats__index button {
    display: block; width: 100%; height: 22px; padding: 0; font-size: 0; line-height: 0; color: transparent;
  }
  html.beats-live .beats__index button span { display: none; }
  html.beats-live .beats__index button::before {
    left: 0; right: 0; top: 50%; width: auto; height: 3px; transform: translateY(-50%);
    border: 0; background: rgba(229, 224, 220, 0.2); box-shadow: none;
  }
  html.beats-live .beats__index li.is-past button::before { background: rgba(229, 224, 220, 0.6); box-shadow: none; }
  html.beats-live .beats__index li.is-on button::before { background: #34FE76; box-shadow: 0 0 10px rgba(52, 254, 118, 0.6); }

  html.beats-live .beats__list {
    position: relative; display: flex; gap: 0.75rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0.6rem calc(-1 * var(--bleed)) 0; padding: 0.4rem var(--bleed) 0.7rem; scroll-padding-inline: var(--bleed);
    border: 0;
  }
  html.beats-live .beats__list::-webkit-scrollbar { display: none; }
  html.beats-live .beats__list:focus-visible { outline: 2px solid #19D25C; outline-offset: 2px; }
  html.beats-live .beats .beat {
    flex: 0 0 min(84%, 24rem); box-sizing: border-box; scroll-snap-align: start;
    padding: 1.05rem 1.1rem 1.2rem; border: 1px solid rgba(171, 193, 238, 0.24); background: rgba(255, 255, 255, 0.035);
    opacity: 1; transform: none;
  }
  html.beats-live .beats--read .beat + .beat { border-top: 1px solid rgba(171, 193, 238, 0.24); }
  html.beats-live .beats .beat p { transition: opacity 0.35s; }
  html.beats-live .beats[data-mode="card"] .beat:not(.is-on) > p { opacity: 0.42; }
  html.beats-live .beats[data-mode="card"] .beat.is-on .beat__k { color: #F4F1ED; }
  html.beats-live .beats[data-mode="card"] .beat.is-on .beat__k::before { background: #34FE76; border-color: #34FE76; box-shadow: 0 0 0 3px rgba(52, 254, 118, 0.16), 0 0 10px rgba(52, 254, 118, 0.5); }
  /* the read sits on the linen: ink type, hairline cards, ink segments */
  html.beats-live .beats--read .beat__q { font-size: 1.32rem; }
  html.beats-live .beats--read .beats__rail { margin-top: 0.9rem; }
  html.beats-live .beats.beats--read .beat { border-color: rgba(14, 8, 41, 0.18); background: transparent; }
  html.beats-live .beats--read .beat + .beat { border-top-color: rgba(14, 8, 41, 0.16); }
  html.beats-live .beats--read .beats__index button::before { background: rgba(14, 8, 41, 0.14); }
  html.beats-live .beats--read .beats__index li.is-past button::before { background: rgba(14, 8, 41, 0.45); }
  html.beats-live .beats--read .beats__index li.is-on button::before { background: #19D25C; box-shadow: 0 0 6px rgba(25, 210, 92, 0.45); }
  html.beats-live .beats--read[data-mode="card"] .beat.is-on .beat__k { color: #0E0829; }
  html.beats-live .beats--read[data-mode="card"] .beat.is-on .beat__k::before { background: #19D25C; border-color: #19D25C; box-shadow: 0 0 0 3px rgba(25, 210, 92, 0.16); }
  html.beats-live .beats--read { --bleed: 1.25rem; }
}
@media (min-width: 768px) and (max-width: 1023px), (min-width: 768px) and (max-aspect-ratio: 9/10) {
  html.beats-live .beats--h3d { --bleed: 2rem; }
}
/* the read's rail runs to its card's inner edges */
html.beats-live .beats.beats--read { --bleed: var(--read-pad, 1.25rem); }
@keyframes beat-f-in { from { --beat-f: 0; } to { --beat-f: 1; } }
html.beats-live .beats[data-mode="card"] .beat.is-print .beat__in { animation: beat-f-in 0.8s cubic-bezier(0.45, 0.05, 0.25, 1) both; }
html.beats-live .beats[data-mode="card"] .beat__in::after {
  content: ""; position: absolute; left: -0.4rem; right: -0.4rem; height: 1px; pointer-events: none;
  top: calc(var(--beat-f) * 100% + 2px);
  background: linear-gradient(90deg, rgba(25, 210, 92, 0), #19D25C 12%, #34FE76 55%, rgba(25, 210, 92, 0));
  box-shadow: 0 0 10px 1px rgba(25, 210, 92, 0.45); opacity: 0;
}
html.beats-live .beats[data-mode="card"] .beat.is-print .beat__in::after { animation: beat-scan 0.8s linear both; }

@media (prefers-reduced-motion: reduce) {
  .beat, .beat::after, .beat p, .beat__in, .beat__in::after, .beat__k::before, .beats__index button, .beats__index button::before { transition: none !important; animation: none !important; }
}