/* ═══ page chrome: scanlines, dot grid, gutter lines ═══════════════════════ */
html {
  background: var(--bg);
  background-image:
    /* scanlines */
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    /* dot grid */
    radial-gradient(circle at 1px 1px, rgba(125,133,144,.08) 1px, transparent 0);
  background-size: auto, 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: #262d36 transparent;
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: #0a0d11; }
html::-webkit-scrollbar-thumb { background: #262d36; border: 2px solid #0a0d11; }
html::-webkit-scrollbar-thumb:hover { background: #7f6418; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #262d36; border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: #7f6418; }

body {
  font-family: var(--ff-mono);
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "tnum", "calt";
  letter-spacing: 0;
}

/* ─── layout container ──────────────────────────────────── */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-5);
  position: relative;
}
@media (max-width: 560px) {
  .wrap { padding: 0 var(--space-4); }
}

/* ─── headings (mono display) ───────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: var(--lh-tight);
  color: var(--ink);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

/* convert "." display suffix into accent square */
h1:where(:not(.no-tick))::after,
h2:where(.has-tick)::after {
  content: "";
  display: inline-block;
  width: .55em; height: .14em;
  background: var(--amber);
  margin-left: .35em;
  vertical-align: middle;
  transform: translateY(-.18em);
}

/* ─── body text ─────────────────────────────────────────── */
p { color: var(--ink-1); }
p + p { margin-top: var(--space-3); }
.muted { color: var(--dim); }

a { color: var(--reg); border-bottom: 1px dotted rgba(88,166,255,.35); }
a:hover { color: var(--amber); border-bottom-color: var(--amber); }

strong, b { color: var(--ink); font-weight: 700; }
em, i { font-style: normal; color: var(--amber); }

code, kbd, samp { font-family: var(--ff-mono); font-size: .92em; padding: 1px 5px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-1); color: var(--ink); }

hr, .divider {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: var(--space-7) 0;
  position: relative;
}
.divider::before {
  content: "// ──────";
  position: absolute;
  left: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg);
  color: var(--dim-1);
  padding: 0 var(--space-3);
  font: var(--fs-xs)/1 var(--ff-mono);
  letter-spacing: .08em;
}

/* sections inside main are panels/blocks, not editorial bands */
section { position: relative; }

/* ─── blinking cursor (decorative) ──────────────────────── */
.cursor::after,
[data-cursor]::after {
  content: "▍";
  display: inline-block;
  color: var(--amber);
  margin-left: 2px;
  animation: blink 1.1s steps(2, end) infinite;
}
@keyframes blink { 0%,49% {opacity:1} 50%,100% {opacity:0} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}