:root {
  --bg: #080b10;
  --panel: #101620;
  --panel-raised: #151e2c;
  --ink: #edf4ff;
  --muted: #a7b5c9;
  --line: #263449;
  --accent: #72b7ff;
  --accent-soft: #b5d9ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at top, #18263a 0, var(--bg) 42rem);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.container { max-width: 1120px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
.back-link, .card a, .list-card a { color: var(--accent); text-decoration: none; }
.back-link:hover, .card a:hover, .list-card a:hover { text-decoration: underline; }
.hero { padding: 5rem 0 3rem; border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--accent); font-size: .76rem; font-weight: 700; letter-spacing: .12em; margin: 0 0 .55rem; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 4.7rem); letter-spacing: -.05em; line-height: 1.02; margin-bottom: 1rem; }
h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.03em; }
h3 { font-size: 1.18rem; line-height: 1.3; }
.lede { color: var(--muted); font-size: 1.18rem; max-width: 44rem; }
.overview, .method { background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 18px; margin-top: 2rem; padding: 1.5rem; }
.overview p, .method p, .card p, .list-card p { color: var(--muted); }
.section { margin-top: 4rem; }
.section-heading { margin-bottom: 1.25rem; }
.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card, .list-card article { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.35rem; }
.card { min-height: 17rem; display: flex; flex-direction: column; }
.card a { font-weight: 700; margin-top: auto; }
.year { color: var(--accent-soft); font-size: .82rem; font-weight: 800; letter-spacing: .1em; }
.meta { color: var(--accent-soft) !important; font-size: .9rem; }
.list-card { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.method { margin-top: 4rem; }

@media (max-width: 700px) {
  .container { padding: 1.25rem 1rem 3rem; }
  .hero { padding: 3.5rem 0 2rem; }
  .card-grid, .list-card { grid-template-columns: 1fr; }
}