*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 16px/1.6 var(--font-body); overflow-x: hidden;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, canvas, svg { display: block; max-width: 100%; }
.pixelated, canvas.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
code, kbd, pre { font-family: var(--font-mono); font-size: .92em; }
kbd { border: 1px solid var(--line); border-bottom-width: 3px; padding: 0 6px; background: var(--surface); }
pre { background: var(--bg-deep); border: 1px solid var(--line); padding: 14px 16px; overflow-x: auto; line-height: 1.5; }
::selection { background: var(--violet-1); color: var(--night-0); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
.display { font-family: var(--font-pixel); font-weight: 400; letter-spacing: .02em; line-height: 1.5; text-wrap: balance; }
h1.display { font-size: clamp(18px, 4.6vw, 30px); }
h2.display { font-size: clamp(14px, 3vw, 20px); }
h3.display { font-size: 12px; }
.label { font-family: var(--font-pixel); font-size: 10px; letter-spacing: .06em; color: var(--text-muted); }
.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--text-muted); max-width: 62ch; }
p { max-width: 70ch; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(40px, 7vw, 88px); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--amber); color: var(--night-0); padding: 10px 14px; font-weight: 700; }
.skip-link:focus { top: 8px; }

/* Pixel frame: notched corners (2px steps) — use on panels, buttons, tiles. */
.px-frame {
  --notch: 6px;
  clip-path: polygon(
    0 var(--notch), var(--px) var(--notch), var(--px) var(--px), var(--notch) var(--px), var(--notch) 0,
    calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--px), calc(100% - var(--px)) var(--px), calc(100% - var(--px)) var(--notch), 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--px)) calc(100% - var(--notch)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--notch)) calc(100% - var(--px)), calc(100% - var(--notch)) 100%,
    var(--notch) 100%, var(--notch) calc(100% - var(--px)), var(--px) calc(100% - var(--px)), var(--px) calc(100% - var(--notch)), 0 calc(100% - var(--notch))
  );
}
.panel { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line), inset 0 -6px 0 0 color-mix(in srgb, var(--line) 60%, transparent); padding: 20px; }

/* Buttons */
.btn {
  --b: var(--accent); --bi: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 10px 18px; border: 0; cursor: pointer; text-decoration: none;
  font: 400 11px/1.4 var(--font-pixel); letter-spacing: .02em;
  background: var(--b); color: var(--bi);
  box-shadow: inset 0 -4px 0 0 color-mix(in srgb, black 28%, var(--b)), inset 0 2px 0 0 color-mix(in srgb, white 30%, var(--b));
  transition: transform var(--dur-press) var(--ease-out), filter var(--dur-hover) ease;
}
.btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 0 color-mix(in srgb, black 28%, var(--b)); }
.btn--ghost { --b: transparent; --bi: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.btn--amber { --b: var(--amber); --bi: var(--night-0); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn:active { transform: translateY(2px); } }

.grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.chip { display: inline-block; font: 400 9px/1 var(--font-pixel); padding: 6px 8px; background: var(--surface-2); color: var(--text); letter-spacing: .06em; }
.chip--soon { background: var(--amber); color: var(--night-0); }
.chip--live { background: var(--mint-1); color: var(--night-0); }

/* Scroll reveal (opt-in via [data-reveal]); JS adds .is-in. */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { transform: none; transition: opacity 200ms ease; } }