/* The home page (RM-175): views/home.html, alpine/views/home.js, app/home/*.

   The Monument direction. Void and Ink; Beam as a line (the seam under the
   headline, the mark over each section, the strip's cells as they light);
   green only inside the hero's light and the ring's slices. Archivo condensed
   caps for display, Space Grotesk for words, JetBrains Mono for figures.
   The only soft light on the page is inside the canvases: no gradient, no
   box-shadow, no text-shadow here.

   The content edge follows the site nav's 80rem column, so the headline sits
   under the logo. */

.hm {
  --hm-edge: max(1.5rem, calc((100% - 80rem) / 2 + 1.5rem));
  --hm-line: var(--color-border);
  --hm-ground: #040609;
  color: var(--color-text);
}

.hm-k {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; line-height: 1.5;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted);
}
.hm-h2, .hm-hero__h {
  margin: 0; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.005em; text-wrap: balance;
}
.hm-h2 { margin-top: 1rem; font-size: clamp(2.5rem, 4.8vw, 4.5rem); line-height: 0.92; }
.hm-h2 span, .hm-hero__sub { display: block; color: var(--color-text-soft); }
.hm-lede { margin: 1.5rem 0 0; max-width: 44rem; font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-soft); text-wrap: pretty; }
.hm-more { margin: 1.75rem 0 0; font-size: 0.9375rem; color: var(--color-text-soft); }
.hm-note { margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--color-text-muted); }
.hm-lede a, .hm-more a, .hm-aside a {
  color: var(--color-link); text-decoration: none; border-bottom: 1px solid var(--color-link-line);
  transition: border-color 100ms var(--ease-out-expo);
}
.hm-lede a:hover, .hm-more a:hover, .hm-aside a:hover { border-bottom-color: var(--color-text); }

/* The two buttons at one height, the secondary in the primary's measure. */
.hm .btn-primary, .hm .rr-btn { min-height: 3.25rem; }
.hm .rr-btn { display: inline-flex; align-items: center; padding: 0 1.5rem; font-size: 0.8125rem; text-decoration: none; }
/* Over the imagery the outline needs more than the hairline's contrast. */
.hm-hero .rr-btn, .hm-close .rr-btn { border-color: var(--color-link-line); }
.hm .hm-prompt .rr-btn { min-height: 2.25rem; padding: 0 0.875rem; font-size: 0.75rem; }

/* ── Hero ── */
.hm-hero { position: relative; display: flex; align-items: center; min-height: 100svh; overflow: hidden; background: var(--hm-ground); }
.hm-hero__stage { position: absolute; inset: 0; overflow: hidden; }
/* The still is placed by the same cover fit as the lit plate (scene.js), so
   the canvas takes over without a jump. Until then, and without JavaScript,
   it covers the stage with the monument right of the copy. */
.hm-hero__still {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 69% 45%; user-select: none; pointer-events: none;
}
.hm-hero__stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 300ms var(--ease-out-expo); }
.hm-hero__stage.is-live canvas { opacity: 1; }
.hm-hero__fg { touch-action: pan-y; }
.hm-hero__copy { position: relative; z-index: 2; max-width: 40rem; margin-left: var(--hm-edge); padding: 8rem 1.5rem 6rem 0; }
.hm-hero__h { --beat: 100ms; font-size: clamp(2.9rem, 5vw, 5.25rem); line-height: 0.9; }
.hm-hero__l, .hm-hero__term { display: block; }
/* The full stop rides with the word: it never wraps onto a line of its own. */
.hm-hero__term { white-space: nowrap; }
.hm-hero__sub { margin-top: 0.6rem; font-size: 0.56em; line-height: 1; }

/* The audience word (home/rotator.js). Without JavaScript, and under reduced
   motion, the first audience shows and the rest of the sentence is read but
   not seen. Live, an aria-hidden copy takes the word's place: its letters are
   drawn from data-ch, so the moving copy never enters the page's text, and
   its box clips them as they pass through, top and bottom. */
.hm-rot.is-live .hm-rot__static {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}
.hm-rot__vis { position: relative; display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; }
.hm-rot__w { display: inline-block; white-space: pre; }
.hm-rot__w.is-out { position: absolute; left: 0; top: 0; }
.hm-rot__l { display: inline-block; }
.hm-rot__l::before { content: attr(data-ch); }
.hm-rot__lc { text-transform: none; }
.hm-hero__seam {
  width: 7rem; height: 2px; margin-top: 1.75rem; background: var(--color-accent); transform-origin: left center;
  animation: hm-draw 500ms var(--ease-out-expo) both; animation-delay: calc(300ms - var(--hm-t, 0ms));
}
.hm-hero__lede { --beat: 300ms; margin: 1.75rem 0 0; max-width: 33rem; font-size: 1.125rem; line-height: 1.65; color: var(--color-text-soft); }
.hm-hero__cta { --beat: 500ms; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }
.hm-hero__legend { display: none; }

/* The entrance, in three beats on the motion scale. Pure CSS, so it plays
   from first paint of the prerendered page; --hm-t is the time already spent
   when the router's fresh copy replaces it (alpine/views/home.js). */
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hm-draw { from { transform: scaleX(0); } }
.hm-beat { animation: hm-rise 500ms var(--ease-out-expo) both; animation-delay: calc(var(--beat, 0ms) - var(--hm-t, 0ms)); }

@media (max-width: 719px) {
  /* Stage starts at the top of the viewport so the glass nav sits over the
     monument, same as desktop. Copy follows the stage. */
  .hm-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hm-hero__stage { position: relative; inset: auto; height: 60svh; min-height: 24rem; }
  .hm-hero__legend { display: block; margin: 0; padding: 0.75rem var(--hm-edge) 0; font-size: 0.8125rem; color: var(--color-text-muted); }
  .hm-hero__copy { margin: 0; padding: 1.5rem var(--hm-edge) 3rem; }
  .hm-hero__h { font-size: clamp(2.5rem, 11vw, 3.25rem); }
}

/* ── Sections: each opens with a short Beam mark over its hairline ── */
.hm-sec { position: relative; padding: clamp(5rem, 11vw, 9rem) var(--hm-edge); border-top: 1px solid var(--hm-line); scroll-margin-top: 6rem; }
.hm-sec::before { content: ""; position: absolute; top: -1px; left: var(--hm-edge); width: 3.5rem; height: 1px; background: var(--color-accent); }
.hm-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.hm-grid--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hm-grid--flip > :first-child { order: 2; }
/* Text first and wider: a long heading keeps to two lines beside the plate. */
.hm-grid--text { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hm-aside { min-height: 1.5em; margin: 0; }
.hm-plate { position: sticky; top: 6rem; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hm-ground); }
.hm-plate canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@media (max-width: 960px) {
  .hm-grid, .hm-grid--flip, .hm-grid--text { grid-template-columns: 1fr; }
  .hm-grid--flip > :first-child { order: 0; }
  .hm-plate { position: relative; top: auto; }
}

/* ── The problem: the heading beside the pyramid, three figures as a ruled
   strip, then the answer as a plane of ink with the Beam seam cutting in on
   the diagonal.
   Figures are in the text colour: cyan never sits on a number. ── */
.hm-figs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(3rem, 6vw, 4.5rem) 0 0; border-top: 1px solid var(--hm-line);
}
.hm-figs > div { padding: 1.5rem 1.5rem 0 0; }
.hm-figs > div + div { padding-left: 1.5rem; border-left: 1px solid var(--hm-line); }
.hm-figs dt {
  font-family: var(--font-mono); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 500; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--color-text); white-space: nowrap;
}
.hm-figs dt span { font-size: 0.7em; color: var(--color-text-soft); }
.hm-figs dd { margin: 0.75rem 0 0; max-width: 22rem; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-soft); text-wrap: pretty; }
.hm-answer {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: clamp(1.75rem, 4vw, 3rem); background: var(--color-surface);
}
/* The seam enters from the top right on the diagonal: cyan as a line. */
.hm-answer::after {
  content: ""; position: absolute; right: -4%; top: 0; width: 30%; height: 1px; background: var(--color-accent);
  transform-origin: right center; transform: rotate(-14deg); opacity: 0.8; pointer-events: none;
}
.hm-answer__h {
  position: relative; margin: 0.75rem 0 0; font-family: var(--font-display); font-stretch: var(--font-display-stretch);
  font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 0.95; letter-spacing: 0.005em; text-wrap: balance;
}
.hm-answer__h span { display: block; color: var(--color-text-soft); }
.hm-answer__p { position: relative; margin: 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-soft); text-wrap: pretty; }
.hm-sources { margin: 1.5rem 0 0; font-size: 0.75rem; line-height: 1.7; color: var(--color-text-muted); }
/* One line where it fits; where it does not, it breaks between sources, never
   inside one. A phone's column is narrower than the longest source, so there
   the words wrap as usual. */
@media (min-width: 720px) { .hm-sources > span { white-space: nowrap; } }
.hm-sources a { color: var(--color-text-soft); text-decoration: none; border-bottom: 1px solid var(--color-link-line); }
.hm-sources a:hover { color: var(--color-text); border-bottom-color: var(--color-text); }
@media (max-width: 860px) {
  .hm-figs { grid-template-columns: 1fr; }
  .hm-figs > div { padding: 1.25rem 0; border-bottom: 1px solid var(--hm-line); }
  .hm-figs > div + div { padding-left: 0; border-left: 0; }
  .hm-answer { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── The model portfolio: the ring and its legend ── */
.hm-model { display: grid; grid-template-columns: minmax(0, 22rem) minmax(14rem, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin: 0; }
.hm-ring { position: relative; width: 100%; max-width: 22rem; }
.hm-ring .sv__wdonut {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  transform-origin: center; transition: transform 220ms var(--ease-out-expo);
}
.hm-ring.is-hot .sv__wdonut { transform: scale(1.06); }
.hm-ring circle[data-sleeve] {
  cursor: pointer;
  transition: opacity 140ms var(--ease-out-expo), stroke-width 220ms var(--ease-out-expo);
}
.hm-ring circle.is-muted { opacity: 0.22; }
.hm-ring.is-hot circle[data-sleeve]:not(.is-muted) { stroke-width: 5.75; }
.hm-ring__empty { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 22%; text-align: center; }
.hm-ring__hole {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.35rem;
  pointer-events: none; text-align: center;
}
.hm-ring__pct {
  font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-text);
}
.hm-ring__tok {
  pointer-events: auto;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-link-line);
}
.hm-ring__tok:hover { border-bottom-color: var(--color-text); }
.hm-keys { list-style: none; margin: 0; padding: 0; }
.hm-keys li { border-top: 1px solid var(--hm-line); }
.hm-keys li:first-child { border-top: 0; }
.hm-keys__row {
  display: grid; grid-template-columns: 0.625rem minmax(0, 1fr) auto; grid-template-areas: "sw name pct" ". assets assets";
  gap: 0.25rem 0.875rem; align-items: baseline; width: 100%; margin: 0; padding: 1rem 0;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: opacity 140ms var(--ease-out-expo);
}
.hm-keys li:first-child .hm-keys__row { padding-top: 0; }
.hm-keys__row.is-dim { opacity: 0.4; }
.hm-keys__row:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 2px; }
.hm-keys i { grid-area: sw; align-self: center; width: 0.625rem; height: 0.625rem; background: var(--c); }
.hm-keys b { grid-area: name; font-size: 1.0625rem; font-weight: 600; }
.hm-keys__pct { grid-area: pct; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hm-keys small { grid-area: assets; font-size: 0.8125rem; color: var(--color-text-muted); }
@media (max-width: 720px) { .hm-model { grid-template-columns: 1fr; } .hm-ring { max-width: 18rem; } }

/* ── How it is made: the four parts of a session ── */
.hm-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 2.5rem 0 0; border-top: 1px solid var(--hm-line); }
.hm-strip > div { position: relative; padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--hm-line); }
.hm-strip > div:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--hm-line); }
.hm-strip dt { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); transition: color 300ms var(--ease-out-expo); }
.hm-strip dd { margin: 0.375rem 0 0; font-size: 0.9375rem; color: var(--color-text-soft); }
/* Each cell lights in turn once the swarm plate's reveal has crossed it. */
.hm-strip > div::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 2rem; height: 1px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center; transition: transform 500ms var(--ease-out-expo);
}
.hm-strip > div:nth-child(even)::before { left: 1.25rem; }
.hm-strip > div:nth-child(2)::before { transition-delay: 100ms; }
.hm-strip > div:nth-child(3)::before { transition-delay: 200ms; }
.hm-strip > div:nth-child(4)::before { transition-delay: 300ms; }
.is-lit .hm-strip > div::before { transform: scaleX(1); }
.is-lit .hm-strip dt { color: var(--color-text); }
.hm-strip > div:nth-child(2) dt { transition-delay: 100ms; }
.hm-strip > div:nth-child(3) dt { transition-delay: 200ms; }
.hm-strip > div:nth-child(4) dt { transition-delay: 300ms; }

/* ── The members: avatars in a grid that grows with the roster ── */
.hm-crew__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; }
.hm-crew__head .hm-lede { max-width: 34rem; }
.hm-crew__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.hm-crew {
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 2.5rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 2rem 1.5rem; border-top: 1px solid var(--hm-line);
  min-height: 12rem;
}
.hm-crew.is-loaded { min-height: 0; }
.hm-crew a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem;
  color: var(--color-text); text-decoration: none;
}
.hm-crew__mark { width: 4rem; height: 4rem; }
.hm-crew__name {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem); line-height: 0.95; letter-spacing: 0.01em;
}
.hm-crew__name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.2rem; height: 1px; background: var(--color-text);
  transform: scaleX(0); transform-origin: left center; transition: transform 300ms var(--ease-out-expo);
}
.hm-crew a:hover .hm-crew__name::after, .hm-crew a:focus-visible .hm-crew__name::after { transform: scaleX(1); }
.hm-crew small { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.hm-crew:not(:has(li)) { border-top: 0; padding-top: 0; }
/* The judges: their own row under a label, after a hairline, so the oversight
   seats read as a role, not as two more analysts. */
.hm-judges { margin-top: 2.5rem; }
.hm-judges .hm-crew { margin-top: 1rem; padding-top: 1.75rem; }

/* ── How to get exposure: the heading, then the aerial plate as a wide band
   (the light dividing across the ground), then the three ways as full-width
   rows, title left and body right. The rows carry very different weights
   (the vaults hold a fee line, a button and the agent prompt; the other two
   one line each), which a row takes in its stride and a column does not. ── */
.hm-band {
  position: relative; margin: clamp(2.5rem, 5vw, 4rem) 0 0; aspect-ratio: 21 / 8;
  overflow: hidden; background: var(--hm-ground);
}
.hm-band canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hm-ways { list-style: none; margin: 0; padding: 0; }
.hm-ways > li {
  display: grid; grid-template-columns: minmax(12rem, 5fr) minmax(0, 7fr);
  gap: 1.25rem clamp(2rem, 5vw, 5rem); align-items: start;
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0; border-bottom: 1px solid var(--hm-line);
}
.hm-ways > li:last-child { border-bottom: 0; padding-bottom: 0; }
.hm-ways h3 {
  margin: 0;
  font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 800;
  text-transform: uppercase; font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 0.95;
  letter-spacing: 0.01em; text-wrap: balance;
}
/* The house's "still to come" chip, one step up to sit under a display title. */
.hm-way__t .rm-soon { margin-top: 0.875rem; padding: 0.3125rem 0.5rem; font-size: 0.625rem; }
.hm-way p { margin: 0; max-width: 40rem; font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-soft); }
.hm-way p.hm-note { margin-top: 0.875rem; max-width: none; font-size: 0.8125rem; color: var(--color-text-muted); }
/* The vaults' way in: the button with its terms beside it, then the agent
   prompt as one slim bar (label, prompt, copy), not a second card. */
.hm-act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.hm-prompt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 1.25rem;
  margin-top: 1.75rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border: 1px solid var(--color-border-light); background: var(--color-surface);
}
.hm-prompt code { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; color: var(--color-text); overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .hm-band { aspect-ratio: 16 / 11; margin-inline: calc(-1 * var(--hm-edge)); }
  .hm-ways > li { grid-template-columns: 1fr; gap: 1rem; padding: 2.25rem 0; }
  .hm-prompt { grid-template-columns: minmax(0, 1fr) auto; gap: 0.625rem 1rem; }
  .hm-prompt code { grid-column: 1 / -1; grid-row: 2; }
}

/* ── Close: the hero's light, still, behind the closing line ── */
.hm-close { overflow: hidden; background: var(--hm-ground); }
.hm-close__light {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 70% 40%; opacity: 0.32; pointer-events: none; user-select: none;
}
.hm-close__in { position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; }
.hm-close__h { margin: 0; font-size: clamp(2.75rem, 5.6vw, 5.25rem); line-height: 0.9; }
.hm-close .hm-hero__cta { margin: 0; }

/* ── Reveals. Only once JavaScript has added .hm-anim, so nothing is hidden
   from a reader that runs none, or from the prerender. ── */
.hm-anim .hm-reveal { transition: opacity 500ms var(--ease-out-expo), transform 500ms var(--ease-out-expo); }
.hm-anim .hm-reveal:not(.is-seen) { opacity: 0; transform: translateY(18px); }
/* The ring draws itself arc by arc the first time it is seen. */
@keyframes hm-arc { from { stroke-dasharray: 0 100; } }
.hm-anim .hm-model:not(.is-seen) [data-mark="series"] { stroke-dasharray: 0 100; }
.hm-anim .hm-model.is-seen circle[data-mark="series"] { animation: hm-arc 900ms var(--ease-out-expo) both; }
.hm-anim .hm-model.is-seen circle[data-mark="series"]:nth-child(3) { animation-delay: 120ms; }
.hm-anim .hm-model.is-seen circle[data-mark="series"]:nth-child(4) { animation-delay: 240ms; }
.hm-anim .hm-model.is-seen circle[data-mark="series"]:nth-child(5) { animation-delay: 360ms; }
/* The roster's names rise in a short stagger as they arrive. */
.hm-anim .hm-crew li { animation: hm-rise 500ms var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 40ms); }

@media (prefers-reduced-motion: reduce) {
  .hm-beat, .hm-hero__seam, .hm-crew li, .hm-model circle[data-mark="series"] { animation: none !important; }
  .hm-ring .sv__wdonut, .hm-ring circle[data-sleeve], .hm-keys__row { transition: none !important; }
  .hm-ring.is-hot .sv__wdonut { transform: none; }
  .hm-hero__stage canvas, .hm-strip > div::before, .hm-strip dt, .hm-crew__name::after, .hm-reveal { transition: none !important; }
}