/* assets/rn/pages/home.css — the home page below the hero (3-home). Linked LAST on index.html, after home-hero.css;
   unlayered, so single classes beat the legacy layer. Every rule is scoped to classes that exist only on this page
   (hm-*), plus the shared rn-* parts it lays out. The hero is home-hero.css's and nothing here reaches inside it.

   One story, in two halves. The audit half speaks the hero's own ink and paper (marks in the text colour, red only on
   the Example readout's Now finding); the lime ticker divides it from the studio half, which is lime (work, the lab);
   the method is the AI family's blue, one node. Motion is the toolkit's (assets/rn/motion.js, overhaul/MOTION.md) plus
   assets/rn/pages/home.js for the readout; each section has one moment, and every one is instant under reduced motion
   and the site pause.

    1. Sections, heads, links     5. Ticker                     9. The closing band
    2. What the audit covers      6. Studio: EDAMAME feature   10. Holds, reduced motion, forced colours
    3. What you get: the readout  7. Studio: five more
    4. Who does the audit         8. Prototype lab, method                                                        */

/* 1. Sections, heads, links ───────────────────────────────────────────────────────────────────────────────────── */
.hm-section {
  padding-block: var(--rn-section);
  color: var(--rn-text);
}

.hm-section[data-tone=light] {
  background: var(--rn-paper);
}

.hm-section[data-tone=dark] {
  background: var(--rn-ink);
}

/* Families: the studio half is lime, the method blue (tokens.css keys these off the old section classes). */
.hm-studio,
.hm-lab,
.hm-ticker {
  --rn-signal: var(--rn-lime);
  --rn-on-mark: var(--rn-ink);
}

.hm-method {
  --rn-signal: var(--rn-blue);
  --rn-on-mark: var(--rn-ink);
}

/* A signal dot on paper keeps its ink edge (lime alone on paper is about 1:1). */
.hm-lab .rn-eyebrow::before {
  box-shadow: var(--rn-signal-edge);
}

.hm-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--rn-space-5) var(--rn-space-8);
  margin: 0 0 clamp(40px, 4.6vw, 64px);
}

.hm-head h2,
.hm-get-copy h2,
.hm-method-copy h2 {
  max-width: 16ch;
  margin: var(--rn-space-4) 0 0;
  color: var(--rn-text);
}

.hm-head-aside > p {
  max-width: 46ch;
  margin: 0 0 var(--rn-space-2);
  color: var(--rn-muted);
  font: 500 var(--rn-fs-body-lg)/var(--rn-lh-lead) var(--rn-font-body);
}

.hm-lede {
  max-width: 44ch;
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-body-lg)/var(--rn-lh-lead) var(--rn-font-body);
}

/* A text link with a trailing arrow: the underline sits on the words only. */
.hm-arrow {
  text-decoration: none;
}

.hm-arrow > .hm-lt {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.hm-arrow:is(:hover, :focus-visible) > .hm-lt {
  text-decoration-thickness: 2px;
}

.hm-index,
.hm-feature-label,
.hm-work-label,
.hm-camera-label,
.hm-arc-years {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.4 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .hm-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* 2. What the audit covers: six cells in one ruled panel (static, so no lift), then the one mid-page button. ──────
   Motion: the H2's words rise into their masks; each cell's contents land in reading order, an eighth of a beat
   apart (the cells' rules stay put, so the grid never shifts). */
.hm-cover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rn-card-ring);
  border-radius: var(--rn-radius-card);
  background: var(--rn-card-bg);
  list-style: none;
}

.hm-cover-grid > li {
  min-width: 0;
  padding: clamp(24px, 2.6vw, 36px);
  border-top: 1px solid var(--rn-line);
  border-left: 1px solid var(--rn-line);
}

.hm-cover-grid > li:nth-child(-n + 3) {
  border-top: 0;
}

.hm-cover-grid > li:nth-child(3n + 1) {
  border-left: 0;
}

.hm-cover-grid h3 {
  margin: var(--rn-space-5) 0 var(--rn-space-2);
  color: var(--rn-text);
  font: var(--rn-weight-title) var(--rn-fs-title)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.hm-cover-grid p {
  max-width: 32ch;
  margin: 0;
  color: var(--rn-muted);
}

.hm-cover-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rn-space-4) var(--rn-space-6);
  margin-top: var(--rn-space-6);
}

.hm-cover-foot > p {
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-body-lg)/1.45 var(--rn-font-body);
}

.hm-cover-foot strong {
  color: var(--rn-text);
  font-weight: 700;
}

@media (max-width: 1180px) {
  .hm-cover-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-cover-grid > li:nth-child(3) {
    border-top: 1px solid var(--rn-line);
  }

  .hm-cover-grid > li:nth-child(3n + 1) {
    border-left: 1px solid var(--rn-line);
  }

  .hm-cover-grid > li:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .hm-cover-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-cover-grid > li,
  .hm-cover-grid > li:nth-child(odd) {
    padding: 20px 20px 22px;
    border-left: 0;
  }

  .hm-cover-grid > li:nth-child(2) {
    border-top: 1px solid var(--rn-line);
  }

  .hm-cover-grid > li > div {
    display: grid;
    grid-template-columns: 2.75em minmax(0, 1fr);
    column-gap: var(--rn-space-3);
  }

  .hm-cover-grid .hm-index {
    grid-row: span 2;
    line-height: 1.9;
  }

  .hm-cover-grid h3 {
    margin: 0 0 var(--rn-space-1);
  }

  .hm-cover-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 3. What you get: the copy beside the Example readout (rn-example: a paper card on ink). ──────────────────────────
   The readout is the hero's own "3 fixes, ranked", written out. Motion (home.js): the rows land in turn, then the red
   Now lands last with its finding rule, like the hero's findings list. */
.hm-get-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--rn-space-7) clamp(48px, 7vw, 112px);
}

.hm-get-copy h2 {
  margin-bottom: var(--rn-space-5);
}

.hm-terms {
  max-width: 44ch;
  margin: var(--rn-space-6) 0 var(--rn-space-3);
  border-top: 1px solid var(--rn-line);
}

.hm-terms > div {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  align-items: baseline;
  gap: var(--rn-space-4);
  padding: var(--rn-space-3) 0;
  border-bottom: 1px solid var(--rn-line);
}

.hm-terms dt {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.4 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.hm-terms dd {
  margin: 0;
  color: var(--rn-text);
  font: 600 var(--rn-fs-body)/1.45 var(--rn-font-body);
}

.hm-readout {
  justify-self: end;
  width: 100%;
  max-width: 620px;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px) clamp(14px, 1.8vw, 24px);
}

.hm-readout > figcaption {
  margin-bottom: var(--rn-space-5);
}

.hm-readout-title {
  margin: 0 0 var(--rn-space-2);
  color: var(--rn-text);
  font: 700 var(--rn-fs-title)/1.2 var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.hm-rows > li {
  grid-template-columns: 4.75em minmax(0, 1fr) auto;
  padding: var(--rn-space-4) 0;
}

.hm-rows .rn-readout-finding {
  font-size: var(--rn-fs-body-lg);
}

.hm-why {
  display: block;
  margin-top: 4px;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.45 var(--rn-font-body);
  text-wrap: pretty;
}

/* The Now chip is a neutral chip with its red state laid exactly over it (aria-hidden), so the red can land last. */
.hm-prio {
  position: relative;
}

.hm-now {
  position: absolute;
  inset: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: var(--rn-red);
  color: var(--rn-on-red);
}

@media (max-width: 1180px) {
  .hm-rows > li {
    grid-template-columns: 4.75em minmax(0, 1fr);
  }

  .hm-rows .rn-readout-area {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 900px) {
  .hm-get-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-readout {
    justify-self: stretch;
    max-width: none;
  }

  .hm-rows > li {
    grid-template-columns: 4.75em minmax(0, 1fr) auto;
  }

  .hm-rows .rn-readout-area {
    grid-column: auto;
    text-align: right;
  }
}

@media (max-width: 640px) {
  .hm-rows > li {
    grid-template-columns: 4.25em minmax(0, 1fr);
  }

  .hm-rows .rn-readout-area {
    grid-column: 2;
    text-align: left;
  }

  .hm-terms > div {
    grid-template-columns: 7.5em minmax(0, 1fr);
  }
}

/* 4. Who does the audit: text only (no portrait), the arc on one drawn rule, and the one On camera fact. ─────────────
   Motion: the rule draws across and each era lands as the line reaches its node; the channel figures roll in on
   their reels (confirmed public figures, TOM.md). Below 641px the arc runs down a plain rule instead. */
.hm-arc {
  position: relative;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.hm-arc-rule {
  position: absolute;
  top: 6px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--rn-text);
}

.hm-arc-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rn-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-arc-list > li {
  position: relative;
  min-width: 0;
  padding-top: 36px;
}

.hm-arc-list > li::before {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 1px solid var(--rn-text);
  border-radius: 50%;
  background: var(--rn-paper);
  content: "";
}

.hm-arc-list > li.is-now::before {
  background: var(--rn-text);
}

.hm-arc-list h3 {
  margin: var(--rn-space-2) 0 var(--rn-space-2);
  color: var(--rn-text);
  font: var(--rn-weight-title) var(--rn-fs-title)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.hm-arc-list p {
  max-width: 38ch;
  margin: 0;
  color: var(--rn-muted);
}

.hm-camera {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 0.9fr);
  align-items: center;
  gap: var(--rn-space-5) clamp(24px, 4vw, 56px);
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--rn-card-ring);
  border-radius: var(--rn-radius-card);
  background: var(--rn-card-bg);
}

.hm-camera-copy h3 {
  margin: var(--rn-space-1) 0 var(--rn-space-2);
  color: var(--rn-text);
  font: var(--rn-weight-title) var(--rn-fs-title)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.hm-camera-copy > p:last-child {
  max-width: 44ch;
  margin: 0;
  color: var(--rn-muted);
}

.hm-camera-label {
  margin: 0;
}

.hm-camera-stats {
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
  margin: 0;
}

.hm-camera-stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--rn-space-1);
}

.hm-camera-stats dt {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.35 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.hm-camera-stats dd {
  margin: 0;
  color: var(--rn-text);
  font: var(--rn-weight-display) clamp(1.75rem, 1.45rem + 1vw, 2.375rem)/1 var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hm-camera-end {
  justify-self: end;
  text-align: right;
}

.hm-camera-end > p {
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.45 var(--rn-font-body);
}

@media (max-width: 1180px) {
  .hm-camera {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hm-camera-end {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--rn-space-5);
    justify-self: stretch;
    padding-top: var(--rn-space-3);
    border-top: 1px solid var(--rn-line);
    text-align: left;
  }
}

@media (max-width: 900px) {
  .hm-arc-list {
    gap: var(--rn-space-5);
  }
}

@media (max-width: 640px) {
  .hm-arc-rule {
    display: none;
  }

  .hm-arc-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-left: 6px;
    border-left: 1px solid var(--rn-text);
  }

  .hm-arc-list > li {
    padding: 0 0 var(--rn-space-6) var(--rn-space-6);
  }

  .hm-arc-list > li:last-child {
    padding-bottom: 0;
  }

  .hm-arc-list > li::before {
    top: 2px;
    left: -7px;
  }

  .hm-camera {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-camera-stats {
    justify-content: space-between;
    padding-top: var(--rn-space-4);
    border-top: 1px solid var(--rn-line);
  }

  .hm-camera-end {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 5. Ticker: the one lime band, between the audit half and the studio half. Studio capabilities only; aria-hidden.
   The track holds the list six times (each half is wider than a 2560px screen) and one gap at its end, so -50% lands
   exactly on the fourth copy and the loop never jumps; 56s keeps it at about 50px a second. It pauses offscreen and
   under the site pause (motion.css 2) and stands still under reduced motion (section 10). */
.hm-ticker > div {
  padding-inline-end: 20px;
  animation-duration: 56s;
}

/* 6. Studio: the EDAMAME Arcade feature (rn-feature on ink: stage ink, the 88px grid, the ring). ───────────────────
   From 1181px: the key art shown whole (16:9) beside the story, then a ruled row under both, the channel figures under
   the art and the highlights and links under the story. Below that it stacks in reading order: key art, story,
   figures, highlights, links. Motion: "Square Enix." lands on its lime block as the words rise; the key art fades in
   and settles. */
.hm-feature {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "media copy"
    "facts hl";
  align-items: start;
  gap: var(--rn-space-6) clamp(28px, 4vw, 56px);
  padding: clamp(20px, 3.4vw, 48px);
  background-position: -1px -1px;
}

.rn-feature-media.hm-feature-media {
  grid-area: media;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: var(--rn-radius-media);
  box-shadow: var(--rn-ring-on-ink);
}

.hm-feature-media > img {
  min-height: 0;
}

.hm-feature-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-5);
  min-width: 0;
}

.hm-feature-copy > h3 {
  max-width: 17ch;
  margin: 0;
  color: var(--rn-text);
  font: var(--rn-weight-display) var(--rn-fs-h2-sm)/var(--rn-lh-heading) var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
}

.hm-feature-copy > p:not(.rn-eyebrow) {
  margin: 0;
  color: var(--rn-muted);
}

/* The ruled row: both halves start on the same hairline. */
.hm-feature-facts,
.hm-feature-hl {
  min-width: 0;
  padding-top: var(--rn-space-4);
  border-top: 1px solid var(--rn-line);
}

.hm-feature-facts {
  grid-area: facts;
}

.hm-feature-hl {
  grid-area: hl;
}

.hm-feature-label {
  margin: 0 0 var(--rn-space-3);
}

.hm-feature-facts > dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.hm-feature-facts > dl > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--rn-space-1);
  padding-right: var(--rn-space-4);
}

.hm-feature-facts > dl > div + div {
  padding-left: var(--rn-space-4);
  border-left: 1px solid var(--rn-line);
}

.hm-feature-facts dt {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.35 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.hm-feature-facts dd {
  --hm-fact-fs: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); /* ja.css caps it to the cell */

  margin: 0;
  color: var(--rn-text);
  font: 500 var(--hm-fact-fs)/1.1 var(--rn-font-mono);
  font-variant-numeric: tabular-nums;
}

.hm-feature-hl > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rn-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-feature-hl li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-pill);
  color: var(--rn-text);
  font: 600 0.78rem/1.25 var(--rn-font-body);
}

.hm-feature-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rn-space-6);
  margin: var(--rn-space-3) 0 0;
}

@media (max-width: 1180px) {
  .hm-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "media"
      "copy"
      "facts"
      "hl";
  }

  .hm-feature-copy > p:not(.rn-eyebrow) {
    max-width: 62ch;
  }
}

@media (max-width: 640px) {
  .hm-feature {
    gap: var(--rn-space-5);
  }

  .hm-feature-facts > dl > div + div {
    padding-left: var(--rn-space-3);
  }

  .hm-feature-facts > dl > div {
    padding-right: var(--rn-space-2);
  }
}

/* 7. Studio: five more, led by one. Muse & Moonlight large, the other four as rows beside it (their rows share its
   height), so the order of importance reads at a glance. Ink cards (rn-card) with the ring; hover lifts 2px. ─────── */
.hm-work {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--rn-space-4);
  margin-top: clamp(40px, 5vw, 72px);
}

.hm-work-label {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: var(--rn-space-4);
  margin: 0 0 var(--rn-space-2);
}

.hm-work-label::after {
  flex: 1;
  height: 1px;
  background: var(--rn-line);
  content: "";
}

.hm-lead .rn-card-body {
  padding: clamp(20px, 2.4vw, 28px);
}

.hm-work-list {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--rn-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-row > .rn-card-link {
  flex-direction: row;
}

.hm-row .rn-media {
  flex: 0 0 42%;
  aspect-ratio: auto;
  min-height: 100%;
}

.hm-row .rn-card-body {
  gap: 4px;
  padding: var(--rn-space-4) var(--rn-space-5);
}

.hm-row .rn-card-title {
  font-size: var(--rn-fs-body-lg);
}

.hm-row .rn-card-body > p:not(.rn-card-kicker) {
  font-size: var(--rn-fs-small);
  line-height: 1.45;
}

.hm-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rn-text);
  font: 700 var(--rn-fs-small)/1.2 var(--rn-font-body);
}

.hm-row .hm-cue {
  padding-top: var(--rn-space-2);
}

@media (max-width: 1180px) {
  .hm-work {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-work-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .hm-work-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-row .rn-media {
    flex-basis: 36%;
  }
}

@media (max-width: 640px) {
  .hm-work-list {
    gap: var(--rn-space-2);
  }

  .hm-row .rn-card-body {
    justify-content: center;
    padding: var(--rn-space-3) var(--rn-space-4);
  }

  .hm-row .rn-card-body > p:not(.rn-card-kicker) {
    display: none;
  }

  .hm-row .hm-cue {
    padding-top: var(--rn-space-1);
  }
}

/* 8. Prototype lab and method ─────────────────────────────────────────────────────────────────────────────────────
   Lab: four games on paper, one row of four (two by two below 1181px, compact on phones). The one lime chip on each
   is its status. Method: the rune as a static SVG on the hero's window (ink, the 88px grid), paper strokes and one
   blue node. The window fades in and the mark settles from 104% like the hero's camera coming to rest, then the node
   lands (all transform and opacity: an SVG stroke draw here repainted the whole page every frame for a second on a
   phone). No canvas, no video, no three.js on this page. */
.hm-lab-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--rn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-proto .rn-card-body {
  gap: 6px;
  padding: var(--rn-space-5);
}

.hm-proto .rn-card-body > p:not(.rn-card-kicker) {
  font-size: var(--rn-fs-small);
  line-height: 1.5;
}

.hm-proto .hm-cue {
  padding-top: var(--rn-space-3);
}

@media (max-width: 1180px) {
  .hm-lab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hm-lab-grid {
    gap: var(--rn-space-3);
  }

  /* All four are playable and the lede says so: on a thumbnail this small the chip would cover the game. */
  .hm-proto .rn-media > .rn-chip {
    display: none;
  }

  .hm-proto .rn-card-body {
    gap: 2px;
    padding: var(--rn-space-3) var(--rn-space-3) var(--rn-space-4);
  }

  .hm-proto .rn-card-title {
    font-size: var(--rn-fs-body);
  }

  .hm-proto .rn-card-body > p:not(.rn-card-kicker) {
    display: none;
  }

  .hm-proto .hm-cue {
    padding-top: var(--rn-space-2);
  }
}

.hm-method-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--rn-space-7) clamp(48px, 7vw, 112px);
}

.hm-mark {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  justify-self: center;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
  background-color: var(--rn-stage);
  background-image: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  background-size: var(--rn-grid) var(--rn-grid);
  background-position: -1px -1px;
}

.hm-mark-svg {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  overflow: visible;
}

.hm-mark-svg :is(circle, path) {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hm-mark-ring {
  stroke: var(--rn-ring);
  stroke-width: 1px;
}

.hm-mark-rune {
  stroke: var(--rn-text-on-ink);
  stroke-width: 2.5px;
}

/* The one blue node, at the apex of the triangle (the SVG sits 12% in; the apex is 9.85% down its box). */
.hm-mark-node {
  position: absolute;
  top: calc(12% + 76% * 0.0985 - 2.5%);
  left: 47.5%;
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rn-signal);
}

.hm-method-copy h2 {
  margin-bottom: var(--rn-space-5);
}

.hm-method-list {
  max-width: 52ch;
  margin: var(--rn-space-6) 0 var(--rn-space-4);
  padding: 0;
  border-top: 1px solid var(--rn-line);
  list-style: none;
}

.hm-method-list > li {
  padding: var(--rn-space-4) 0;
  border-bottom: 1px solid var(--rn-line);
}

.hm-method-list h3 {
  margin: 0 0 var(--rn-space-1);
  color: var(--rn-text);
  font: var(--rn-weight-title) var(--rn-fs-body-lg)/1.3 var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.hm-method-list p {
  margin: 0;
  color: var(--rn-muted);
}

@media (max-width: 900px) {
  .hm-method-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the statement leads and the mark closes the section. */
  .hm-mark {
    order: 2;
    max-width: 320px;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .hm-mark {
    max-width: 240px;
  }
}

/* 9. The closing band: equal space above and below the card on home (the next thing is the footer). ─────────────── */
.lux-home .rn-band {
  padding-block: var(--rn-section-tight);
}

/* 10. Holds, reduced motion, forced colours ──────────────────────────────────────────────────────────────────────
   The readout is held (opacity and transform only, the first keyframe) only once home.js is live (html.hm-live), so
   if the script never arrives it simply shows. The method's mark settles as its window fades in (motion.js adds
   .is-visible) and the node lands a beat and a half later. Reduced motion and the site pause hold nothing. */
@media (prefers-reduced-motion: no-preference) {
  html.hm-live:not([data-motion="paused"]) .hm-readout:not(.rn-in) .hm-rows > li,
  html.hm-live:not([data-motion="paused"]) .hm-readout:not(.rn-in) .hm-now {
    opacity: 0;
  }

  html.hm-live:not([data-motion="paused"]) .hm-readout:not(.rn-in) .hm-rows > li.rn-finding::before {
    transform: scaleY(0);
  }

  html.js .hm-mark.is-visible:not(.rn-shown) > .hm-mark-svg {
    animation: rn-media-settle var(--rn-dur-cam) var(--rn-ease-critical) backwards;
  }

  html.js .hm-mark.is-visible:not(.rn-shown) > .hm-mark-node {
    animation: hm-node var(--rn-dur-lead) var(--rn-ease-lead) calc(var(--rn-beat) * 1.5) backwards;
  }
}

@keyframes hm-node {
  from {
    opacity: 0;
    scale: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-ticker > div {
    animation: none;
  }
}

@media (forced-colors: active) {
  .hm-now {
    border: 2px solid CanvasText;
  }

  .hm-arc-rule,
  .hm-arc-list > li.is-now::before {
    background: CanvasText;
  }

  .hm-mark-node {
    background: CanvasText;
  }
}