/* ============================================================
   하프라인 — Editorial Design System Tokens + Components
   Sports Editorial · NYT × The Athletic register
   AdSense-eligible · No betting motifs
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;0,6..72,800;1,6..72,400;1,6..72,600&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens ── */
:root {
  --canvas:        #ffffff;
  --canvas-soft:   #f6f9fc;
  --canvas-warm:   #faf7f2;
  --surface-sunk:  #f1f5f9;

  --ink-1:         #111111;
  --ink-2:         #334155;
  --ink-3:         #64748b;
  --ink-4:         #94a3b8;
  --ink-inv:       #ffffff;

  --accent:        #533afd;
  --accent-press:  #3f2bd1;
  --accent-tint:   #ede9ff;
  --accent-line:   #c7bcff;

  --positive:      #15803d;
  --positive-tint: #ecfdf5;
  --negative:      #b91c1c;
  --negative-tint: #fef2f2;
  --neutral:       #475569;
  --neutral-tint:  #f1f5f9;

  --hairline:      #e2e8f0;
  --hairline-str:  #cbd5e1;
  --rule-ink:      #111111;

  --fd: "Newsreader","Source Serif 4",Georgia,"Noto Serif KR",serif;
  --fu: "Public Sans","Pretendard",-apple-system,system-ui,"Noto Sans KR",sans-serif;
  --fm: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display-xl: 72px;  --t-display-xl-lh: 1.02;
  --t-display-l:  56px;  --t-display-l-lh:  1.04;
  --t-display-m:  44px;  --t-display-m-lh:  1.06;
  --t-h1: 36px;  --t-h1-lh: 1.1;
  --t-h2: 28px;  --t-h2-lh: 1.15;
  --t-h3: 22px;  --t-h3-lh: 1.25;
  --t-h4: 18px;  --t-h4-lh: 1.3;
  --t-body-l: 19px; --t-body-l-lh: 1.6;
  --t-body:   17px; --t-body-lh:   1.6;
  --t-body-s: 15px; --t-body-s-lh: 1.55;
  --t-caption: 13px; --t-caption-lh: 1.4;
  --t-eyebrow: 12px; --t-eyebrow-lh: 1.2;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-pill: 999px;

  --shadow-row:   0 1px 0 0 var(--hairline);
  --shadow-hover: 0 8px 24px -16px rgba(15,23,42,0.18);
  --shadow-focus: 0 0 0 3px rgba(83,58,253,0.25);

  --col-gap:    32px;
  --max-w:      1280px;
  --max-w-read: 680px;
  --gutter:     32px;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--ink-1);
  font-family: var(--fd);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a {
  color: var(--ink-1);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-str);
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Type ── */
h1,h2,h3,h4 {
  font-family: var(--fd); color: var(--ink-1); font-weight: 700;
  letter-spacing: -0.04em; font-variation-settings: "opsz" 36;
  text-wrap: balance; margin: 0;
}
h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); }
h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); }
h3 { font-size: var(--t-h3); line-height: var(--t-h3-lh); }
h4 { font-size: var(--t-h4); line-height: var(--t-h4-lh); font-weight: 600; }
p { font-family: var(--fd); font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--ink-1); margin: 0 0 1em; }

.eyebrow {
  font-family: var(--fu); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  line-height: var(--t-eyebrow-lh);
}
.caption { font-family: var(--fu); font-size: var(--t-caption); line-height: var(--t-caption-lh); color: var(--ink-3); }
.num, table td, table th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.num-mono { font-family: var(--fm); font-variant-numeric: tabular-nums; }
.accent-ink { color: var(--accent); }

/* ── Rules ── */
.rule       { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.rule-strong{ border: 0; border-top: 1px solid var(--ink-1); margin: 0; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fu); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--r-1);
  border: 1px solid var(--ink-1); background: var(--canvas); color: var(--ink-1);
  cursor: pointer; text-decoration: none; line-height: 1; border-bottom: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--ink-1); color: var(--ink-inv); border-bottom: none; }
.btn-primary { background: var(--ink-1); color: var(--ink-inv); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--ink-inv); }
.btn-ghost { border: none; padding: 8px 0; color: var(--ink-3); background: none; }
.btn-ghost:hover { color: var(--accent); background: transparent; border-bottom: none; }

/* ── Masthead ── */
.masthead {
  border-bottom: 1px solid var(--ink-1);
  background: var(--canvas);
  position: sticky; top: 0; z-index: 50;
}
.masthead-top {
  max-width: var(--max-w); margin: 0 auto; padding: 14px var(--gutter);
  display: grid; grid-template-columns: 140px 1fr 140px; align-items: center; gap: var(--s-5);
}
.masthead-meta {
  font-family: var(--fu); font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; line-height: 1.5;
}
.masthead-meta strong { color: var(--ink-1); font-weight: 600; }
.masthead-brand {
  font-family: var(--fd); font-weight: 800; font-size: 34px;
  letter-spacing: -0.04em; text-align: center; color: var(--ink-1);
  font-variation-settings: "opsz" 36; border-bottom: none;
}
.masthead-brand:hover { color: var(--ink-1); border-bottom: none; }
.masthead-brand .brand-dot { color: var(--accent); }
.masthead-actions { display: flex; justify-content: flex-end; gap: var(--s-3); align-items: center; }

/* ── Site Nav ── */
.site-nav {
  border-top: 1px solid var(--hairline);
  max-width: var(--max-w); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; gap: var(--s-5);
  font-family: var(--fu); font-size: 13px; font-weight: 600; color: var(--ink-1);
  overflow-x: auto; scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  border-bottom: 2px solid transparent; padding: 4px 0; white-space: nowrap;
  color: var(--ink-1); transition: color 120ms ease, border-color 120ms ease;
}
.site-nav a:hover { color: var(--accent); border-bottom-color: transparent; }
.site-nav a.active { color: var(--accent); border-bottom-color: var(--accent); padding-bottom: 2px; }

/* ── Page layout ── */
.page { max-width: var(--max-w); margin: 0 auto; padding: var(--s-7) var(--gutter) var(--s-9); }
.page-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 300px;
  gap: var(--s-7); margin-top: var(--s-7);
}
@media (max-width: 960px) { .page-grid { grid-template-columns: 1fr; } }

/* ── Section opener ── */
.section-opener {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 var(--s-5); padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--ink-1);
}
.section-opener .title {
  font-family: var(--fd); font-size: 20px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink-1);
}
.section-opener .more {
  font-family: var(--fu); font-size: 11px; font-weight: 600;
  color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: none;
}
.section-opener .more:hover { color: var(--accent); border-bottom: none; }

/* ── Hero ── */
.hero {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  gap: var(--s-7); align-items: stretch;
  padding-bottom: var(--s-7); border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-7);
}
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; gap: var(--s-5); } }

.hero-cover {
  position: relative; aspect-ratio: 5/4; overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 65%, #533afd 130%);
}
.hero-cover .cover-art {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 20% 110%, rgba(83,58,253,0.18) 0%, rgba(83,58,253,0) 50%),
    radial-gradient(80% 60% at 90% 10%, rgba(17,17,17,0.10) 0%, rgba(17,17,17,0) 60%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 65%, #533afd 130%);
}
.hero-cover .cover-art::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='2' cy='2' r='0.5' fill='white' opacity='0.15'/></svg>");
  background-size: 4px 4px; mix-blend-mode: overlay; opacity: 0.5;
}
.hero-cover .cover-stamp {
  position: absolute; top: var(--s-5); left: var(--s-5);
  display: flex; flex-direction: column; gap: 6px; z-index: 2;
}
.hero-cover .kicker {
  font-family: var(--fu); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  display: inline-flex; align-items: center; gap: 8px; border-bottom: none;
}
.hero-cover .kicker::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  background: var(--accent); border-radius: 50%;
}
.hero-cover .issue {
  font-family: var(--fd); font-weight: 800; font-size: 17px;
  letter-spacing: -0.02em; color: #fff;
}
.hero-cover .cover-matchup {
  position: absolute; bottom: var(--s-5); left: var(--s-5); right: var(--s-5);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--s-4);
  color: #fff; z-index: 2;
}
.hero-cover .team {
  font-family: var(--fd); font-size: 36px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; font-variation-settings: "opsz" 48;
}
.hero-cover .team-r { text-align: right; }
.hero-cover .team-tag {
  display: block; font-family: var(--fu); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); margin-bottom: 5px;
}
.hero-cover .vs {
  font-family: var(--fd); font-style: italic; font-size: 16px;
  color: rgba(255,255,255,0.55); font-weight: 500; padding-bottom: 4px;
}

.hero-body { display: flex; flex-direction: column; padding-top: var(--s-2); }
.hero-eyebrow {
  font-family: var(--fu); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-4); display: inline-flex; align-items: center; gap: 10px;
}
.hero-eyebrow .league-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.hero-headline {
  font-family: var(--fd); font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.03; letter-spacing: -0.045em; font-weight: 800;
  font-variation-settings: "opsz" 72; color: var(--ink-1); margin: 0 0 var(--s-4);
  text-wrap: balance;
}
.hero-headline em { font-style: italic; font-weight: 600; color: var(--ink-2); }
.hero-dek {
  font-family: var(--fd); font-size: 18px; line-height: 1.55; color: var(--ink-2);
  margin: 0 0 var(--s-5); max-width: 52ch;
}
.hero-byline {
  font-family: var(--fu); font-size: 12px; color: var(--ink-3);
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5);
}
.hero-byline .author { color: var(--ink-1); font-weight: 600; }
.hero-byline .divider { width: 1px; height: 11px; background: var(--hairline-str); }
.hero-spec {
  margin-top: auto; display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--ink-1); border-bottom: 1px solid var(--hairline);
}
.hero-spec .cell { padding: var(--s-4) var(--s-3) var(--s-4) 0; border-right: 1px solid var(--hairline); }
.hero-spec .cell:last-child { border-right: 0; padding-right: 0; }
.hero-spec .cell .label {
  font-family: var(--fu); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px;
}
.hero-spec .cell .value {
  font-family: var(--fd); font-weight: 700; font-size: 22px;
  letter-spacing: -0.03em; color: var(--ink-1); font-variant-numeric: tabular-nums;
}
.hero-spec .cell .value .unit {
  font-family: var(--fu); font-size: 11px; font-weight: 500; color: var(--ink-3); margin-left: 3px;
}

/* ── Data Table ── */
.data-table { width: 100%; border-collapse: collapse; font-family: var(--fu); }
.data-table thead th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); padding: 10px var(--s-3);
  border-bottom: 1px solid var(--ink-1); white-space: nowrap; background: var(--canvas);
}
.data-table thead th.num-col,
.data-table tbody td.num-col { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody td {
  padding: 13px var(--s-3); border-bottom: 1px solid var(--hairline);
  font-size: 14px; color: var(--ink-1); font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--canvas-soft); transition: background 80ms ease; }
.data-table .team-cell {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--fd); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
}
.data-table .team-cell .crest {
  width: 26px; height: 26px; border-radius: var(--r-1);
  display: grid; place-items: center; font-family: var(--fu);
  font-weight: 700; font-size: 9px; color: var(--ink-inv);
  letter-spacing: 0.04em; background: var(--ink-1); flex-shrink: 0;
}
.data-table .rank {
  font-family: var(--fm); font-size: 12px; color: var(--ink-3);
  width: 20px; display: inline-block; text-align: right; margin-right: var(--s-2);
}
.form-pills { display: inline-flex; gap: 3px; }
.form-pills .pill {
  width: 18px; height: 18px; border-radius: 3px; display: grid; place-items: center;
  font-family: var(--fu); font-size: 9px; font-weight: 700; color: var(--ink-inv);
}
.form-pills .pill.w { background: var(--positive); }
.form-pills .pill.l { background: var(--negative); }
.form-pills .pill.d { background: var(--neutral); }
.delta-up   { font-family: var(--fu); font-size: 11px; font-weight: 600; color: var(--positive); }
.delta-down { font-family: var(--fu); font-size: 11px; font-weight: 600; color: var(--negative); }
.key-stat   { font-family: var(--fm); font-size: 13px; font-weight: 600; color: var(--accent); }

.data-analysis {
  padding: var(--s-5) 0 0; border-top: 1px solid var(--hairline); margin-top: var(--s-3);
  display: grid; grid-template-columns: 72px 1fr; gap: var(--s-5);
}
.data-analysis .tag {
  font-family: var(--fu); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); padding-top: 3px;
}
.data-analysis p { font-family: var(--fd); font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.data-analysis p strong { color: var(--ink-1); font-weight: 600; }
.data-footnote {
  font-family: var(--fu); font-size: 11px; color: var(--ink-4);
  letter-spacing: 0.04em; margin-top: var(--s-4); line-height: 1.5;
}

/* ── Story Grid ── */
.story-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-7);
}
@media (max-width: 720px) { .story-grid { grid-template-columns: 1fr; } }
@media (min-width: 721px) and (max-width: 960px) { .story-grid { grid-template-columns: repeat(2,1fr); } }

.story { display: flex; flex-direction: column; gap: var(--s-3); }
.story .thumb { aspect-ratio: 4/3; background: var(--canvas-soft); overflow: hidden; }
.story .thumb.gradient-a { background: linear-gradient(135deg, #0f172a, #475569); }
.story .thumb.gradient-b { background: linear-gradient(135deg, #1e3a8a, #533afd); }
.story .thumb.gradient-c { background: linear-gradient(135deg, #7c2d12, #b91c1c); }
.story .thumb img { width: 100%; height: 100%; object-fit: cover; }
.story .kicker {
  font-family: var(--fu); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.story .title {
  font-family: var(--fd); font-size: 20px; line-height: 1.18; letter-spacing: -0.03em;
  font-weight: 700; color: var(--ink-1); margin: 0; text-wrap: balance;
}
.story .dek { font-family: var(--fd); font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.story .byline { font-family: var(--fu); font-size: 11px; color: var(--ink-3); }
.story .byline strong { color: var(--ink-1); font-weight: 600; }

/* ── Sidebar ── */
.sidebar { display: flex; flex-direction: column; gap: var(--s-7); }
.standings-card { border-top: 2px solid var(--ink-1); padding-top: var(--s-4); }
.standings-card .league-tag {
  font-family: var(--fu); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.standings-card h3 {
  font-family: var(--fd); font-size: 17px; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 var(--s-3); color: var(--ink-1);
}
.mini-table { width: 100%; border-collapse: collapse; font-family: var(--fu); }
.mini-table th, .mini-table td {
  padding: 9px 5px; border-bottom: 1px solid var(--hairline);
  font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-1);
}
.mini-table th {
  font-size: 9px; color: var(--ink-3); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; border-bottom-color: var(--ink-1);
}
.mini-table th:first-child, .mini-table td:first-child { text-align: left; }
.mini-table .pos { color: var(--ink-3); width: 16px; font-family: var(--fm); font-size: 11px; }
.mini-table .team-name { font-family: var(--fd); font-weight: 600; letter-spacing: -0.01em; }
.mini-table .gd-pos { color: var(--positive); }
.mini-table .gd-neg { color: var(--negative); }
.mini-table tbody tr:last-child td { border-bottom: 0; }

/* ── Newsletter ── */
.newsletter {
  background: var(--canvas-warm); padding: var(--s-6) var(--s-5);
  border-top: 3px solid var(--accent);
}
.newsletter .eyebrow { margin-bottom: var(--s-3); }
.newsletter h3 {
  font-family: var(--fd); font-size: 22px; letter-spacing: -0.03em;
  font-weight: 700; margin: 0 0 var(--s-3);
}
.newsletter p { font-size: 13px; color: var(--ink-2); margin: 0 0 var(--s-4); line-height: 1.55; }
.newsletter form { display: flex; gap: 6px; }
.newsletter input {
  flex: 1; padding: 9px 11px; border: 1px solid var(--hairline-str);
  background: #fff; font-family: var(--fu); font-size: 13px; color: var(--ink-1);
  border-radius: var(--r-1); outline: none;
}
.newsletter input:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.newsletter button {
  background: var(--ink-1); color: #fff; border: 0; padding: 9px 14px;
  font-family: var(--fu); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer; border-radius: var(--r-1);
  transition: background 120ms ease;
}
.newsletter button:hover { background: var(--accent); }

/* ── AdSense Slots ── */
.ad-slot {
  position: relative; background: var(--canvas-soft);
  border: 1px dashed var(--hairline-str);
  display: grid; place-items: center; text-align: center;
  font-family: var(--fu); color: var(--ink-3);
}
.ad-slot::before {
  content: "Advertisement"; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-4);
}
.ad-slot .ad-body {
  font-family: var(--fu); font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em;
  display: flex; flex-direction: column; gap: 2px; align-items: center; padding: var(--s-5);
}
.ad-slot .ad-body .dim { font-family: var(--fm); font-size: 11px; color: var(--ink-4); }
.ad-leaderboard  { height: 110px; max-width: 100%; margin: var(--s-5) 0; }
.ad-in-article   { height: 260px; margin: var(--s-7) 0; }
.ad-rectangle    { aspect-ratio: 300/250; }

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--ink-1); background: var(--canvas);
  padding: var(--s-7) var(--gutter);
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7); margin-bottom: var(--s-7);
}
@media (max-width: 720px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-brand {
  font-family: var(--fd); font-size: 26px; font-weight: 800;
  letter-spacing: -0.03em; border-bottom: none; color: var(--ink-1);
}
.footer-brand:hover { color: var(--ink-1); border-bottom: none; }
.footer-brand .brand-dot { color: var(--accent); }
.footer-tagline {
  font-family: var(--fd); font-size: 13px; color: var(--ink-2);
  margin-top: var(--s-3); max-width: 36ch; line-height: 1.55;
}
.footer-col h5 {
  font-family: var(--fu); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  font-family: var(--fu); font-size: 12px; color: var(--ink-2); border-bottom: none;
  transition: color 120ms ease;
}
.footer-col a:hover { color: var(--accent); border-bottom: none; }
.footer-legal {
  padding-top: var(--s-5); border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  font-family: var(--fu); font-size: 11px; color: var(--ink-3); line-height: 1.6;
}
.footer-legal .spacer { flex: 1; }

/* ── GSAP animation initial states ── */
.anim-hero-hl    { opacity: 0; transform: translateY(16px); }
.anim-hero-dek   { opacity: 0; transform: translateY(12px); }
.anim-hero-meta  { opacity: 0; }
.anim-fade-up    { opacity: 0; transform: translateY(20px); }
.anim-fade-left  { opacity: 0; transform: translateX(-12px); }
.anim-masthead   { opacity: 0; transform: translateY(-8px); }

/* ── Responsive ── */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .masthead-top { grid-template-columns: 1fr auto; }
  .masthead-meta { display: none; }
  .hero-spec { grid-template-columns: repeat(2,1fr); }
  .data-analysis { grid-template-columns: 1fr; }
  .data-analysis .tag { padding-top: 0; }
  .footer-cols { grid-template-columns: 1fr; }
}