/* ============================================================
   components.css  ·  reusable blocks (v12 MASTHEAD)
   page hero · hero media (the offset block) · scorewall (the
   signature) · feature panel · docket (arenas) · stack (games)
   · ledger · marquee · link rows · nav routes
   ============================================================ */

/* ── PAGE HERO — uppercase, tight leading, left, edge to edge ── */
.phero { padding: calc(var(--s16) + var(--s3)) 0 var(--s10); }
.phero-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5);
}
.phero-status {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2);
  border: 1px solid var(--line); padding: 8px 16px;
}
.phero-status::before { content: ""; width: 6px; height: 6px; background: var(--fg); }
.phero-loc { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.phero-title {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--t-hero); line-height: 0.88; letter-spacing: -0.01em; color: var(--fg);
}
.phero-lead { margin-top: var(--s5); max-width: 60ch; font-size: var(--t-lead); line-height: 1.6; color: var(--fg-2); }
.phero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }

.venture-disclaimer { margin-top: var(--s5); font-size: 0.8125rem; color: var(--fg-3); max-width: 56ch; }

/* ── HERO ROW — the headline against an offset image block.
   index.html only: the one asymmetric, overlapping treatment. ── */
.hero-row { display: grid; grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s6); }
@media (min-width: 900px) {
  .hero-row { grid-template-columns: 1.35fr 0.85fr; gap: var(--s6); align-items: start; }
  /* the offset: pushed down past the headline's own line-box, never
     overlapping the type itself — asymmetric, not a collision */
  .hero-media { margin-top: clamp(var(--s10), 11vw, var(--s16)); }
}
.hero-media { position: relative; border: 1px solid var(--line); aspect-ratio: 4 / 5; overflow: clip; background: var(--paper-2); }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.hero-media.awaiting img { display: none; }
.hero-media.awaiting .hero-media-cap { display: none; }
.hero-media-cap {
  position: absolute; left: var(--s3); bottom: var(--s3);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--plate-fg); background: var(--plate-bg); padding: 5px 11px;
}

/* ── SCOREWALL — the signature. index.html only. huge tabular
   scores, red interpunct, one on-load entrance — no scroll-link. ── */
.scorewall {
  display: flex; flex-wrap: wrap; gap: var(--s8);
  margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line);
}
.scoreline { display: flex; flex-direction: column; gap: 6px; }
.scoreline-v {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-score); line-height: 0.88; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.scoreline-v .sep { color: var(--red-ink); }
.scoreline-k { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }

@media (prefers-reduced-motion: no-preference) {
  .scoreline {
    opacity: 0; transform: translateY(10px);
    animation: score-in var(--dur-2) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 0.08s + 0.1s);
  }
  @keyframes score-in { to { opacity: 1; transform: none; } }
}

/* ── FEATURE PANEL — hard-edged, grayscale photography does the
   grit, not a dark ground or noise. ── */
.feature { padding-block: 0 var(--s12); }
.feature-panel {
  position: relative; border: 1px solid var(--line); overflow: clip;
  aspect-ratio: 16 / 9; background: var(--paper-2);
}
.feature-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.feature-panel.awaiting img { display: none; }
.feature-mark { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: clamp(1.6rem, 5vw, 3rem); }
.feature-panel.awaiting .feature-mark { display: flex; }
.feature-cap {
  position: absolute; left: var(--s3); bottom: var(--s3);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--plate-fg); background: var(--plate-bg); padding: 5px 11px;
}
/* narrow: a short awaiting panel leaves no room between its centred
   mark and the caption pinned to the bottom — the two collide. Reserve
   the caption's band so the mark centres in the space above it. Only
   an issue once the panel gets short; desktop centring is left alone. */
@media (max-width: 860px) {
  .feature-panel.awaiting .feature-mark { padding-bottom: var(--s10); }
  .feature-cap { right: var(--s3); }
}

/* ── MARQUEE — static tracked-caps keyword strip, no loop ── */
.marquee { border-block: 1px solid var(--line); padding-block: var(--s3); overflow: clip; }
.marquee-row { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.marq-item {
  display: inline-flex; align-items: center; font-family: var(--f-mono); font-weight: 500;
  font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2); white-space: nowrap; padding-inline: var(--s4);
}
.marq-item::after { content: ""; width: 4px; height: 4px; background: var(--fg-3); margin-left: var(--s2); }
.marq-item:last-child::after { display: none; }
/* below this width some lines wrap 2 phrases and others wrap 1, so
   each line centers at a different width and the lines zigzag
   against each other. force one phrase per line so every line
   centers consistently instead. */
@media (max-width: 640px) {
  .marq-item { flex: 1 1 100%; justify-content: center; }
}

/* ── DOCKET — arenas (record.html). an asymmetric hairline-divided
   list, never three equal cards. rows step in on alternating lines. ── */
.docket { margin-top: var(--s10); border-top: 1px solid var(--line); }
.docket-row { padding-block: var(--s6); border-bottom: 1px solid var(--line); max-width: 68ch; }
.docket-row:nth-child(even) { margin-left: clamp(0px, 10vw, 140px); }
/* the alternating step is a desktop device — it needs room either side
   to read as deliberate. In a single narrow column it just looks like
   one row (and its hairline rule) is misaligned against its neighbours,
   and squeezes that row's title onto an extra line. Collapse flush. */
@media (max-width: 860px) {
  .docket-row:nth-child(even) { margin-left: 0; }
}
.docket-k {
  display: block; font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s2);
}
.docket-title {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 0.92; margin-bottom: var(--s2);
}
.docket-desc { color: var(--fg-2); font-size: 1rem; margin-bottom: var(--s3); }
.docket-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-2); border: 1px solid var(--line); padding: 5px 12px;
}

/* ── STACK — games (games.html). full-width alternating rows,
   uneven image crops per row. never a 3-up grid. ── */
.stack { margin-top: var(--s10); display: flex; flex-direction: column; gap: var(--s16); }
.stack-row { display: flex; flex-direction: column; gap: var(--s5); }
@media (min-width: 860px) {
  .stack-row { flex-direction: row; align-items: center; gap: var(--s8); }
  .stack-row:nth-child(even) { flex-direction: row-reverse; }
}
/* the default ratio matters: without it an unlisted nth-child (a 4th game,
   a 5th) gets no height at all and the row silently collapses */
.stack-media { flex: 1 1 50%; position: relative; border: 1px solid var(--line); overflow: clip; background: var(--paper-2); width: 100%; aspect-ratio: 4 / 3; }
.stack-row:nth-child(1) .stack-media { aspect-ratio: 5 / 4; }
.stack-row:nth-child(2) .stack-media { aspect-ratio: 1 / 1; }
.stack-row:nth-child(3) .stack-media { aspect-ratio: 16 / 10; }
.stack-row:nth-child(4) .stack-media { aspect-ratio: 3 / 2; }
.stack-media img, .stack-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.stack-media .await {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3);
}
.stack-cap {
  position: absolute; left: var(--s3); bottom: var(--s3);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--plate-fg); background: var(--plate-bg); padding: 5px 11px;
}
.stack-body { flex: 1 1 50%; }
.stack-score { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 3.8rem); line-height: 0.88; letter-spacing: -0.01em; margin-bottom: var(--s2); }
.stack-score .sep { color: var(--red-ink); }
.stack-title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 3.8vw, 2.3rem); line-height: 0.94; margin-bottom: var(--s2); }
.stack-scorelabel { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
/* in-development marker — outlined, not the solid red of a live CTA */
.stack-status { border: 1px solid var(--red-ink); color: var(--red-ink); padding: 3px 9px; letter-spacing: 0.1em; }
.stack-desc { color: var(--fg-2); font-size: 1rem; margin-bottom: var(--s3); max-width: 54ch; }
.stack-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s4); }
.stack-foot { display: flex; align-items: center; gap: var(--s3); }
.play-btn {
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-red); background: var(--red); padding: 12px 22px;
  display: inline-flex; align-items: center; gap: 8px; transition: background var(--dur-1) var(--ease-out);
}
.play-btn:hover { background: #970f1a; }
.play-btn svg { width: 11px; height: 11px; }
.play-btn[aria-disabled="true"] { background: var(--paper-2); color: var(--fg-3); }
/* must sit after .play-btn — same specificity, so source order decides */
.play-btn--wip { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.play-btn--wip:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--fg-2); }

/* ── LEDGER — scorecard rows (stats). heavy tabular numerals, no
   accent: red is not one of this component's jobs. ── */
.ledger { margin-top: var(--s8); border-top: 1px solid var(--line); max-width: 900px; }
.ledger .row { display: flex; align-items: baseline; gap: var(--s3); padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.ledger .v {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-num); line-height: 1; letter-spacing: -0.01em;
  min-width: 4.5ch; color: var(--fg); font-variant-numeric: tabular-nums;
}
.ledger .lead-dots { flex: 1; min-width: var(--s3); border-bottom: 2px dotted var(--fg-3); transform: translateY(-0.35em); }
.ledger .k { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); text-align: right; max-width: 30ch; }
/* narrow: the wrapped label eats the row, so the leader collapses to a
   stub floating between two gaps — it stops reading as a leader at all.
   Drop it and let the row sit as a clean numeral-left / label-right pair. */
@media (max-width: 640px) {
  .ledger .lead-dots { display: none; }
  .ledger .k { margin-left: auto; }
}

/* ── LINK ROWS — socials ── */
.links-list { margin-top: var(--s5); border-top: 1px solid var(--line); }
.link-row {
  display: flex; align-items: baseline; gap: var(--s2);
  padding-block: var(--s4); border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-1) var(--ease-out);
}
.link-row:hover { padding-left: var(--s1); }
.link-name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; letter-spacing: -0.005em; }
.link-dots { flex: 1; min-width: var(--s3); border-bottom: 2px dotted var(--fg-3); transform: translateY(-0.35em); }
.link-handle { font-family: var(--f-mono); font-size: var(--t-label); color: var(--fg-2); white-space: nowrap; }

/* ── INDEX ROUTES — the site's own contents page. numbered
   because these ARE a genuine sequence (the site's own page order). ── */
.routes { margin-top: var(--s10); border-top: 1px solid var(--line); }
.route {
  display: flex; align-items: center; gap: var(--s3);
  padding-block: var(--s5); border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-1) var(--ease-out);
}
.route:hover { padding-left: var(--s2); }
.route-n { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--fg-3); width: 3ch; }
.route-name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 3.8vw, 2.5rem); letter-spacing: -0.01em; line-height: 1; }
.route-desc { font-size: 0.9375rem; color: var(--fg-2); margin-left: auto; max-width: 34ch; text-align: right; }
@media (max-width: 640px) { .route-desc { display: none; } }
.route-arrow { color: var(--fg-3); }