/* IMPACT FRAME — css/page.css
   The page: base, masthead, plate nav, plates, the hero plate. */
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.page { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); padding-block: 0 48px; }
a { color: inherit; text-decoration-color: var(--spot); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--spot-text); }
kbd {
  display: inline-block; min-width: 1.7em; padding: 0.1em 0.42em; margin: 0 0.08em;
  font: 600 0.72em/1.3 var(--f-mono); text-align: center;
  border: 1.5px solid currentColor; border-bottom-width: 3px; border-radius: 4px;
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.lbl { font: 600 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.spot { color: var(--spot-text); }

/* ---------------------------------------------------------------- masthead */
.mast { padding-block: 40px 28px; display: grid; gap: 22px; position: relative; }
.mast-top { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; }
.reg { width: 22px; height: 22px; flex: none; color: var(--ink); }
.mast-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.wordmark {
  font: 400 clamp(3rem, 11.5vw, 9.5rem)/0.86 var(--f-display);
  letter-spacing: -0.02em;
  text-shadow: 0.035em 0.03em 0 var(--spot);
  margin-left: -0.04em;
}
.wordmark span { display: inline-block; }
.mast-sub { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; }
.tagline { font: 700 clamp(1.25rem, 2.6vw, 1.9rem)/1.2 var(--f-ui); font-stretch: 92%; max-width: 30ch; }
.tagline em { font-style: normal; color: var(--spot-text); }
.mast-copy { color: var(--ink-2); max-width: 62ch; }
.tone-band { height: 14px; background: radial-gradient(circle, var(--dot) 1.4px, transparent 1.9px) 0 0 / 7px 7px; }
@media (max-width: 760px) { .mast-sub { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- plate nav */
.pnav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  background: var(--paper); border-block: 2px solid var(--ink);
}
.pnav ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pnav ol::-webkit-scrollbar { display: none; }
.pnav a {
  display: flex; gap: 6px; align-items: baseline; white-space: nowrap; padding: 10px 10px 9px;
  text-decoration: none; font: 700 0.8125rem/1 var(--f-ui); font-stretch: 88%; letter-spacing: 0.02em; text-transform: uppercase;
}
.pnav a span { font: 600 0.625rem/1 var(--f-mono); color: var(--ink-3); }
.pnav a:hover, .pnav a[aria-current="true"] { background: var(--ink); color: var(--on-ink); }
.pnav a:hover span, .pnav a[aria-current="true"] span { color: var(--spot); }

/* ------------------------------------------------------------------ plates */
.plate { padding-block: 72px 8px; display: grid; gap: 28px; }
.plate-head { display: grid; gap: 14px; border-top: 2px solid var(--ink); padding-top: 14px; position: relative; }
.plate-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: center; }
.plate-no { font: 700 0.75rem/1 var(--f-mono); letter-spacing: 0.14em; }
.plate-no b { color: var(--spot-text); font-weight: 700; }
.plate-title {
  font: 400 clamp(2rem, 5.4vw, 4.1rem)/0.98 var(--f-display);
  letter-spacing: -0.01em; text-transform: uppercase;
  text-shadow: 0.04em 0.035em 0 var(--spot);
  max-width: 18ch;
}
.dek { font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); max-width: 64ch; }
.dek b { color: var(--ink); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ hero */
.hero { padding-top: 22px; gap: 18px; }
.stage-frame { position: relative; }
.stage-frame::before, .stage-frame::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--ink); pointer-events: none;
}
.stage-frame::before { top: -9px; left: -9px; border-right: 0; border-bottom: 0; }
.stage-frame::after { bottom: -9px; right: -9px; border-left: 0; border-top: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .sep { flex: 1 1 auto; }
.btn, .seg button {
  appearance: none; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 700 0.75rem/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 12px; cursor: pointer; border-radius: 0; display: inline-flex; gap: 8px; align-items: center;
}
.btn:hover, .seg button:hover { background: var(--paper-2); }
.btn:focus-visible, .seg button:focus-visible, .rec:focus-visible, .chip:focus-visible { outline: 3px solid var(--spot); outline-offset: 2px; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.btn[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; background: var(--spot); border-radius: 50%; }
.btn[aria-pressed="false"]::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 50%; }
.btn.solid { background: var(--spot); border-color: var(--spot); color: #fff; }
.btn.solid:hover { filter: brightness(1.06); }
.seg { display: inline-flex; }
.seg button + button { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.seg button[aria-pressed="true"].hot { background: var(--spot); border-color: var(--spot); color: #fff; }
.seg-lbl { font: 600 0.625rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 18px; align-items: start; }
@media (max-width: 1080px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hero-grid .try { grid-column: 1 / -1; } }
@media (max-width: 700px) { .hero-grid { grid-template-columns: 1fr; } }
.card { border: 2px solid var(--ink); background: var(--paper); padding: 16px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.card h3 { font: 800 0.95rem/1.2 var(--f-ui); font-stretch: 90%; text-transform: uppercase; letter-spacing: 0.04em; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 0.875rem; }
.keys dt { font-weight: 700; white-space: nowrap; }
.keys dd { margin: 0; color: var(--ink-2); }
.keys dd kbd { color: var(--ink); }
.hitlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; font: 500 0.71rem/1.35 var(--f-mono); font-variant-numeric: tabular-nums; min-height: 15em; }
.hitlog li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 3.4em 7.8em; gap: 4px 8px; padding: 5px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.hitlog .st, .hitlog .sp { white-space: nowrap; }
.hitlog .mv { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hitlog .n { color: var(--ink-3); }
.hitlog .st, .hitlog .sp { text-align: right; }
.hitlog .tr { grid-column: 2 / -1; color: var(--ink-2); }
.hitlog .tr b { font-weight: 800; color: var(--ink); }
.hitlog li.t3 .tr b, .hitlog li.t4 .tr b { color: var(--spot-text); }
.hitlog li.t4 { background: linear-gradient(90deg, var(--spot-wash), transparent 80%); }
.hitlog li.rd .mv { color: var(--spot-text); }
.hitlog .tr b + b, .hitlog .st { letter-spacing: 0.05em; }
.hitlog li.vs .mv { color: var(--ink-3); }
.hitlog li.ko, .hitlog li.rd, .hitlog li.cb { grid-template-columns: 3.2em minmax(0, 1fr); }
.hitlog li.cb .mv { letter-spacing: 0.04em; }
.hitlog li.cb.secret { background: linear-gradient(90deg, var(--spot-wash), transparent 80%); }
.hitlog li.cb.secret .mv { color: var(--spot-text); }
.hitlog li.ko .mv { color: var(--spot-text); }
.hitlog .empty { display: block; color: var(--ink-3); border: 0; }
.try ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 0.9rem; color: var(--ink-2); }
.try li::marker { font: 700 0.75rem var(--f-mono); color: var(--spot-text); }
.try b { color: var(--ink); }