/* Hallmark · macrostructure: grid-native (numbered index rows + one plate, Swiss object-poster register)
 * theme: design.md-locked (dark clay/verified/error system on Plex Sans + Plex Mono) · structural DNA: hallmark/grid
 * nav: masthead · footer: statement · pre-emit critique: P5 H5 E5 S5 R5 V5
 * verified: chromium headless screenshots at 320/375/768/1440px, dark + light, nav overflow and chamber-fill
 * contrast issues found and fixed before handoff.
 */

@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }

.shell {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  position: relative;
}

/* THE ground: exposed 12-column hairline grid, painted behind content, never hidden */
.rails {
  position: absolute; inset: 0; z-index: var(--z-base); pointer-events: none;
  max-width: 1280px; margin-inline: auto;
  background-image: repeating-linear-gradient(to right,
    var(--color-rule) 0, var(--color-rule) 1px,
    transparent 1px, transparent calc(100% / 12));
  opacity: .55;
}

.grid-12 {
  position: relative; z-index: var(--z-raised);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-md);
}

.rule-top    { border-block-start: 1px solid var(--color-rule); }
.rule-bottom { border-block-end: 1px solid var(--color-rule); }

/* ---------------------------------------------------------------- marks kit */

.mk-period {
  display: inline-block; width: .5em; height: .5em; margin-inline-start: .06em;
  background: var(--color-accent); vertical-align: baseline;
}

.mk-bar {
  height: 3px; width: 3rem; background: var(--color-accent);
  margin-block-end: var(--space-md);
}

.mk-numeral {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(4.5rem, 12vw, 9rem); line-height: .8;
  color: color-mix(in oklab, var(--color-ink) 10%, transparent);
  user-select: none; letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- label voice */

.label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: .07em;
  color: var(--color-muted);
  text-transform: lowercase;
}

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--color-paper) 92%, transparent);
  backdrop-filter: blur(6px);
}
.nav__row {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-md);
  gap: var(--space-md);
}
.nav__brand { display: flex; align-items: center; gap: var(--space-sm); }
.nav__mark {
  width: 2.4rem; height: 2.32rem;
  background-color: var(--color-ink);
  -webkit-mask: url("assets/mark.png") center / contain no-repeat;
  mask: url("assets/mark.png") center / contain no-repeat;
  transition: background-color var(--dur-med) var(--ease-out);
}
.nav__links {
  display: flex; align-items: center; gap: var(--space-lg);
  font-family: var(--font-mono); font-size: var(--text-sm);
}
@media (max-width: 30rem) {
  .nav__links { gap: var(--space-md); }
  .nav__link--wide { display: none; }
}
.nav__links a { white-space: nowrap; position: relative; padding-block: 2px; }
.nav__links a::after {
  content: ""; position: absolute; inset-inline: 0; block-size: 1px;
  background: var(--color-accent); inset-block-end: 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }

.theme-toggle {
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .04em;
  border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink);
  border-radius: var(--radius-control); padding: .4rem .65rem; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--color-accent); }

/* ---------------------------------------------------------------- ticker */

.ticker {
  overflow: clip; border-block: 1px solid var(--color-rule);
  background: var(--color-paper-2);
}
.ticker__track {
  display: flex; gap: var(--space-2xl); white-space: nowrap;
  padding-block: var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .02em;
  color: var(--color-muted);
  animation: ticker 34s linear infinite;
  width: max-content;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }
.ticker__track em { color: var(--color-verified); font-style: normal; }

/* ---------------------------------------------------------------- hero */

.hero { padding-block: clamp(var(--space-2xl), 8vw, var(--space-4xl)) var(--space-3xl); }
.hero__head {
  grid-column: 1 / span 12;
}
.hero__title {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  letter-spacing: .005em;
  line-height: .98;
  margin: 0 0 var(--space-lg) 0;
  max-width: 16ch;
  overflow-wrap: anywhere; min-width: 0;
}
.hero__title .accent { color: var(--color-accent); }
.hero__sub {
  grid-column: 1 / span 7;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-ink);
  max-width: 52ch;
  margin: 0;
}
@media (max-width: 60rem) { .hero__sub { grid-column: 1 / span 12; } }

/* ---------------------------------------------------------------- section head (stacked, never hanging) */

.section { padding-block: clamp(var(--space-2xl), 6vw, var(--space-3xl)); }
.section__head { grid-column: 1 / span 12; margin-block-end: var(--space-xl); }
.section__head h2 {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: .01em; line-height: 1.1;
  margin: 0 0 var(--space-sm) 0;
  max-width: 20ch;
}
.section__head p {
  color: var(--color-muted); max-width: 56ch; margin: 0;
}

/* ---------------------------------------------------------------- how it works: numbered index rows */

.steps { grid-column: 1 / span 12; }
.step {
  display: grid; grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--color-rule);
  align-items: start;
}
.step:last-child { border-block-end: 1px solid var(--color-rule); }
.step__num { grid-column: 1 / span 2; }
.step__body { grid-column: 3 / span 7; }
.step__body h3 {
  font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600;
  margin: 0 0 var(--space-xs) 0;
}
.step__body p { margin: 0; color: var(--color-ink); max-width: 60ch; }
@media (max-width: 60rem) {
  .step { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-sm); }
  .step__num { grid-column: 1 / span 3; }
  .step__body { grid-column: 1 / span 12; }
}

/* ---------------------------------------------------------------- the plate: one poster moment */

.plate {
  grid-column: 1 / span 12;
  background: var(--color-accent); color: var(--color-accent-ink);
  position: relative; overflow: clip; border-radius: var(--radius-none);
  padding: clamp(var(--space-xl), 6vw, var(--space-3xl));
}
.plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right,
    color-mix(in oklab, var(--color-paper) 18%, transparent) 0,
    color-mix(in oklab, var(--color-paper) 18%, transparent) 1px,
    transparent 1px, transparent calc(100% / 12));
}
.plate__inner { position: relative; z-index: 1; max-width: 46rem; }
.plate h2 {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1;
  margin: 0 0 var(--space-md) 0;
}
.plate p { margin: 0; font-size: var(--text-md); opacity: .92; max-width: 48ch; }

/* real sweep strip — measured numbers, N=16..1024 */
.sweep { grid-column: 1 / span 12; margin-block-start: var(--space-xl); }
.sweep__row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-block-start: 1px solid var(--color-rule);
  border-block-end: 1px solid var(--color-rule);
}
.sweep__cell {
  border-inline-start: 1px solid var(--color-rule);
  padding: var(--space-sm) var(--space-xs);
  text-align: center;
  font-family: var(--font-mono);
}
.sweep__cell:first-child { border-inline-start: none; }
.sweep__cell .n { display: block; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.sweep__cell .ratio { display: block; font-size: var(--text-md); font-weight: 600; color: var(--color-ink); margin-block-start: var(--space-3xs); font-variant-numeric: tabular-nums; }
.sweep__caption { color: var(--color-muted); font-size: var(--text-sm); margin-block-start: var(--space-sm); }

/* ---------------------------------------------------------------- cli */

.cli { grid-column: 1 / span 12; }
.cli__frame { border-block-start: 1px solid var(--color-rule); }
.cli__label {
  display: block; padding-block: var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); letter-spacing: .06em;
}
.cli pre {
  margin: 0 0 var(--space-lg) 0; padding: var(--space-lg);
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--text-base); line-height: 1.7;
}
.cli pre .comment { color: var(--color-muted); }
.cli pre .flag { color: var(--color-accent); }

/* ---------------------------------------------------------------- get it */

.get { grid-column: 1 / span 12; display: grid; gap: var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 60rem) { .get { grid-template-columns: 1fr; } }
.get__card {
  border-block-start: 2px solid var(--color-rule);
  padding-block-start: var(--space-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.get__card:hover { border-color: var(--color-accent); }
.get__card .label { display: block; margin-block-end: var(--space-2xs); }
.get__card code {
  display: block; font-family: var(--font-mono); font-size: var(--text-base);
  color: var(--color-ink);
}
.get__install {
  grid-column: 1 / span 12;
  margin-block-start: var(--space-2xl);
  display: flex; justify-content: center;
}
.install-bar {
  display: flex; align-items: stretch;
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: var(--radius-control);
  overflow: clip;
}
.install-bar code {
  display: flex; align-items: center;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-mono); font-size: var(--text-base); color: var(--color-ink);
  white-space: nowrap;
}
.copy-btn {
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .03em;
  border: none; border-inline-start: 1px solid var(--color-rule);
  background: transparent; color: var(--color-muted);
  border-radius: 0; padding: var(--space-sm) var(--space-lg); cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.copy-btn:hover, .copy-btn:focus-visible { color: var(--color-accent); background: var(--color-paper-2); }

/* ---------------------------------------------------------------- footer */

.footer { padding-block: var(--space-xl); border-block-start: 1px solid var(--color-rule); }
.footer__row {
  grid-column: 1 / span 12;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl);
  flex-wrap: wrap;
}
.footer__word {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: .04em;
  font-size: var(--text-base); color: var(--color-ink);
}
.footer__links {
  display: flex; gap: var(--space-lg); align-items: center;
  font-family: var(--font-mono); font-size: var(--text-sm);
}
.footer__links a:hover, .footer__links a:focus-visible { color: var(--color-accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------------------------------------------------------------- focus */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* ---------------------------------------------------------------- responsive floors */

@media (max-width: 26rem) {
  .hero__title { font-size: clamp(2.1rem, 9vw, 3rem); }
  .plate h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .sweep__row { grid-template-columns: repeat(4, 1fr); }
  .sweep__cell:nth-child(5) { border-inline-start: none; grid-column: 1; }
}