/* ═══════════════════════════════════════════════════════════════
   base — reset, page chrome, shared primitives
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html:focus-within { scroll-behavior: smooth; }
body {
  background: var(--ebony);
  color: var(--ivory);
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* — machine layer type — */
.mono, .k {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mono-s { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

/* — kickers & numerals — */
.kicker { color: var(--brass); }
.numeral { font-family: var(--mono); font-weight: 600; color: var(--brass); font-size: 12px; letter-spacing: 0.3em; }

/* — the fixed tracker bar: brass hairline at the vertical golden section — */
#tracker-bar {
  position: fixed;
  left: 0; right: 0;
  top: var(--track);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass) 6%, var(--brass) 94%, transparent);
  box-shadow: 0 0 12px rgba(176, 141, 63, 0.35);
  z-index: 60;
  pointer-events: none;
}
/* brass perforation just crossed → felt flash on the bar itself */
#tracker-bar.fired { animation: bar-felt 420ms ease-out; }
@keyframes bar-felt {
  0% { box-shadow: 0 0 18px rgba(122, 31, 43, 0.9), 0 0 4px var(--felt); }
  100% { box-shadow: 0 0 12px rgba(176, 141, 63, 0.35); }
}

/* — section frame — */
section.board {
  position: relative;
  min-height: 100vh;
  padding: var(--gutter);
  overflow: clip;
}
.board-head { margin-bottom: clamp(24px, 4vh, 48px); }
.board-head .k { display: block; color: var(--copper); margin-bottom: 10px; }
.board-head h2 {
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ivory);
}
.board--kraft .board-head h2 { color: var(--ink); }
.board--kraft { background: var(--kraft); color: var(--ink); }

/* — rules (hairlines) — */
.rule { border: 0; border-top: 1px solid var(--brass-d); opacity: 0.55; }
.rule--kraft { border-top-color: rgba(36, 28, 18, 0.35); }

/* — buttons: brass key with double-escapement recoil — */
.keybtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--ebony-2);
  border: 1px solid var(--brass-d);
  padding: 15px 26px;
  border-radius: 3px;
  box-shadow: 0 3px 0 var(--brass-d), 0 6px 14px rgba(0,0,0,0.4);
  transition: box-shadow 90ms ease, transform 90ms ease, background var(--sfumato);
  text-decoration: none;
}
.keybtn:hover { background: var(--ebony-3); border-color: var(--brass); }
.keybtn:active, .keybtn.struck {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--brass-d), 0 1px 5px rgba(0,0,0,0.5);
}
.keybtn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--verdigris); }
.keybtn--felt { background: var(--felt); border-color: var(--felt-dark); box-shadow: 0 3px 0 var(--felt-dark), 0 6px 14px rgba(0,0,0,0.4); }
.keybtn--felt:hover { background: var(--felt-dark); }

/* — status chip — */
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--verdigris); }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--verdigris); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* — focus — */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* — reduced motion: the poster fallback for every scene — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  #tracker-bar { box-shadow: none; }
}

/* — paper grain overlay (feTurbulence data-uri, subtile) — */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}