/* ═══ landing — page-specific layout ══════════════════════════════════════
   Loaded after /style.css. Consumes the shared tokens (BRIEF §1); never
   redefines them and never restates a shared component (BRIEF §5.2).
   Almost everything here exists because the landing carries one module the
   rest of the site does not: "Seraphim vs the field".                      */

/* ── the record panel, with a band hit-rate row ─────────────────────────────
   Three figures is the default; when integration wires the primary-band hit
   rate through, the panel becomes a 2×2 register rather than a 4-up squeeze. */
.record-rows.four { grid-template-columns: repeat(2, 1fr); }
.record-rows.four .record-row:nth-child(2n) { border-right: none; }
.record-rows.four .record-row:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }

/* ── the schematic ──────────────────────────────────────────────────────────
   Drawn for a ~900px plate; scaled to the full 1180px column it inflates its
   10px labels and opens empty lanes around the dot field. The caption shares
   the figure's column rather than the plate's, so its rule reads as the
   figure's rule.                                                            */
.figure-plate .fig-landscape { max-width: 900px; margin: 0 auto; }
.figure-plate figcaption { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ═══ Seraphim vs the field ═══════════════════════════════════════════════ */
.vs { margin: 0 0 var(--s6); }

.vs-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  background: var(--paper-2);
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.vs-pane {
  padding: var(--s5); min-width: 0;
  display: flex; flex-direction: column;
}
.vs-pane + .vs-pane { border-left: 1px solid var(--rule); }

/* ── the comparison plate ───────────────────────────────────────────────── */
.vs-bars { margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s4); }
.vs-bar dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .45rem;
}
.vs-bar.is-us dt { color: var(--accent-deep); }
html.dark .vs-bar.is-us dt { color: var(--accent); }
.vs-bar dd { margin: 0; display: flex; align-items: center; gap: var(--s3); }
.vs-track {
  position: relative; flex: 1 1 auto; min-width: 0;
  height: 12px; background: var(--paper-sunk);
  border: 1px solid var(--rule); border-radius: 1px;
}
.vs-track i { display: block; height: 100%; background: var(--ink-4); opacity: .55; }
.vs-bar.is-us .vs-track i { background: var(--accent-bright); opacity: 1; }
/* the field median, drawn through our own bar — the median-crosshair weight of §1.4 */
.vs-guide {
  position: absolute; top: -4px; bottom: -4px; left: 0;
  width: 0; border-left: 1.5px solid var(--rule-ink);
  text-decoration: none;
}
.vs-bar dd b {
  flex: none; min-width: 5.2ch; text-align: right;
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 600;
  line-height: 1; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
/* the shared domain, drawn rather than described — and spanning the tracks,
   not the printed values */
.vs-axis {
  display: flex; justify-content: space-between;
  margin: .45rem calc(5.2ch + var(--s3)) 0 0; padding-top: .3rem;
  border-top: 1px solid var(--rule-2);
  font-size: 0.72rem; color: var(--ink-4);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: .03em;
}

.vs-diff {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: var(--s4) 0 var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--rule);
  max-width: none;
}
.vs-diff > span:first-child {
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 600;
  letter-spacing: -0.015em; font-variant-numeric: tabular-nums lining-nums;
}
.vs-diff-t { font-size: 0.82rem; color: var(--ink-3); }
.vs-note {
  margin: auto 0 0; font-size: 0.76rem; line-height: 1.5;
  color: var(--ink-4); max-width: 44ch;
}

/* ── the rank pane ──────────────────────────────────────────────────────── */
.vs-figure {
  margin: var(--s3) 0 var(--s4);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 2.75rem); font-weight: 600; line-height: .95;
  letter-spacing: -0.032em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.vs-figure .of {
  font-family: var(--font-text); font-size: 0.84rem; font-weight: 500;
  letter-spacing: .01em; color: var(--ink-3);
}
.vs-verdict {
  margin: var(--s4) 0 0; font-size: 0.87rem; line-height: 1.6;
  color: var(--ink-2); max-width: 46ch;
}

/* the derivation, across the foot of the plate — gross rank, the fee that
   separates them, and the rank a delegator is actually paid on. Built from the
   `.record-rows` idiom (figure over tracked label, cells divided by their own
   hairlines) so it reads as part of the same register, with the §2.4 inset flag
   marking the line that matters. */
.vs-ledger {
  grid-column: 1 / -1; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-2);
}
.vs-ledger > div {
  display: flex; flex-direction: column-reverse; gap: .3rem;
  padding: var(--s4) var(--s5);
  border-right: 1px solid var(--rule);
}
.vs-ledger > div:last-child { border-right: none; }
.vs-ledger dt {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.3;
}
.vs-ledger dd {
  margin: 0; font-family: var(--font-display);
  font-size: 1.42rem; font-weight: 600; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.vs-ledger dd .of { font-family: var(--font-text); font-size: .74rem; font-weight: 400; color: var(--ink-4); }
.vs-ledger .is-sum { box-shadow: inset 3px 0 0 var(--accent); }
.vs-ledger .is-sum dt { color: var(--accent-deep); }
html.dark .vs-ledger .is-sum dt { color: var(--accent); }

/* ── the module's own footnote ──────────────────────────────────────────── */
.vs-foot {
  margin: var(--s3) 0 0; padding: var(--s3) 0 0;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem; line-height: 1.55; color: var(--ink-3);
  max-width: 78ch;
}
.vs-foot b {
  display: inline-block; font-family: var(--font-text);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4); margin-right: .5rem;
}
.vs-foot em { font-style: italic; }

@media (max-width: 900px) {
  .vs-grid { grid-template-columns: 1fr; }
  .vs-pane + .vs-pane { border-left: none; border-top: 1px solid var(--rule); }
  .vs-note { margin-top: var(--s4); }
}
/* the derivation folds to 2-up, with the line that matters spanning the row
   rather than leaving a ruled empty cell (the `.record-rows` rule at 460px) */
@media (max-width: 620px) {
  .vs-ledger { grid-template-columns: 1fr 1fr; }
  .vs-ledger > div { padding: var(--s4); }
  .vs-ledger > div:nth-child(2) { border-right: none; }
  .vs-ledger .is-sum { grid-column: 1 / -1; border-top: 1px solid var(--rule); }
}
@media (max-width: 460px) {
  .vs-pane { padding: var(--s4); }
  .vs-bar dd b { font-size: 1.18rem; }
}

/* ── the staking claim ──────────────────────────────────────────────────────
   The fourth evidence-backed claim reuses the "vs the field" plate wholesale —
   same grid, same panes, same rank device, same ledger — because it makes the
   same kind of argument on the second reward stream. Only the prose pane is new,
   so only the prose pane gets rules. */
.stake { margin-top: var(--s7); }
.stake-prose p {
  margin: var(--s3) 0 0; font-size: 0.9rem; line-height: 1.62;
  color: var(--ink-2); max-width: 52ch;
}
/* the two streams, side by side on the three axes a holder decides on — a
   definition register, not a data table, so it carries the register's hairlines and
   tracked labels without the sort/meter machinery of §2.4. It takes the foot of the
   pane, which is what stops this column ending in dead paper. */
.stake-key {
  margin: auto 0 0; padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.stake-col { min-width: 0; padding-right: var(--s4); }
.stake-col + .stake-col { padding: 0 0 0 var(--s4); border-left: 1px solid var(--rule); }
.stake-col h4 { margin: 0 0 var(--s3); color: var(--accent-deep); }
html.dark .stake-col h4 { color: var(--accent); }
.stake-col dl { margin: 0; display: grid; gap: var(--s3); }
.stake-col dt {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: .15rem;
}
.stake-col dd { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-2); }
 /* `.stake-prose p` out-specifies `.vs-note`, so the closing statement's weight has
   to be restated here or it renders at full paragraph weight and competes with the
   key above it. Sits between body and footnote: a reader fact, not a disclaimer. */
.stake-prose .vs-note {
  margin: var(--s4) 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--rule); max-width: none;
  font-size: 0.8rem; color: var(--ink-3);
}
.stake .vs-foot code {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--ink-2); background: var(--paper-3);
  padding: .05rem .3rem; border-radius: 2px;
}
/* the bars sit under the verdict, so they get the rule the ledger used to carry;
   the closing note then takes the bottom of the pane the way it does on the
   delegation plate, and the pane no longer ends in dead paper */
/* `margin-top: auto` rather than a fixed gap: on a tall plate the slack falls
   between the verdict and the bars, where it reads as a deliberate separation,
   instead of pooling at the foot of the pane as dead paper. */
.stake-bars { margin-top: auto; padding-top: var(--s5); border-top: 1px solid var(--rule); }
.stake .vs-pane-rank .vs-note { margin: var(--s4) 0 0; max-width: none; }
@media (max-width: 900px) { .stake-key { margin-top: var(--s5); } }
@media (max-width: 560px) {
  .stake-key { grid-template-columns: 1fr; }
  .stake-col { padding-right: 0; }
  .stake-col + .stake-col {
    padding: var(--s4) 0 0; margin-top: var(--s4);
    border-left: none; border-top: 1px solid var(--rule);
  }
}