/* base: reset + typography + layout rhythm */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  /* faint engineering grid */
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}

main { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }

p { max-width: var(--maxw-prose); color: var(--fg-soft); }
p strong, li strong { color: var(--fg); font-weight: 600; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { padding-left: 1.2rem; color: var(--fg-soft); }
li { margin-bottom: 0.4rem; max-width: var(--maxw-prose); }

code, .num {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

section {
  padding: var(--sp-section) var(--sp-4);
  max-width: var(--maxw);
  margin: 0 auto;
}

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--sp-2);
}

.lead { font-size: 1.18rem; line-height: 1.6; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
th, td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
th {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
td { color: var(--fg-soft); }
td.num, th.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }

figure { margin: var(--sp-4) 0; }
figcaption {
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
  color: var(--fg-mute);
  margin-top: var(--sp-2);
}

svg text { font-family: var(--font-mono); }

::selection { background: var(--accent-soft); color: var(--fg); }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  section { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}
@media (min-width: 640px) and (max-width: 900px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
}