:root {
  --paper: #fbfaf7;
  --surface: #ffffff;
  --ink: #171716;
  --muted: #676762;
  --rule-soft: #deddd7;
  --rule: #2a2a28;
  --blue: #075f96;
  --green: #0e6a57;
  --night: #181917;
  --night-muted: #c9c8c1;
  --warning: #9b3a2e;
  --display: clamp(2.75rem, 7vw, 6.5rem);
  --h1: clamp(2.25rem, 5vw, 4.5rem);
  --h2: clamp(1.5rem, 2.8vw, 2.5rem);
  --h3: 1.25rem;
  --lead: 1.125rem;
  --body: 1rem;
  --meta: 0.75rem;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; font: 400 var(--body)/1.6 Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.site { --accent: var(--blue); }
.site--signal { --accent: var(--green); }
body.site--signal { word-break: keep-all; }
body.site--signal .hero h1,
body.site--signal .article h1,
body.site--signal .principle h2,
body.site--signal .story h3,
body.site--signal .article-body p { font-family: Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; letter-spacing: -.035em; }
.wrap { width: min(100% - 32px, 1440px); margin: 0 auto; }
.utility { background: var(--night); color: var(--night-muted); font: 500 var(--meta)/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.utility .wrap { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.utility a { color: var(--surface); }
.masthead { border-bottom: 1px solid var(--rule); }
.brand-row { display: flex; justify-content: space-between; align-items: end; gap: var(--s4); padding: var(--s6) 0 var(--s5); }
.wordmark { font: 700 clamp(1.4rem, 3vw, 2.3rem)/.9 Georgia, "Times New Roman", serif; letter-spacing: -.06em; text-decoration: none; }
.wordmark span { color: var(--accent); }
.edition { color: var(--muted); font: 500 var(--meta)/1.3 "SFMono-Regular", Consolas, monospace; text-align: right; }
.nav { border-top: 1px solid var(--rule-soft); display: flex; flex-wrap: wrap; overflow: visible; }
.nav a { flex: 0 0 auto; min-height: 44px; display: grid; place-items: center; padding: 0 var(--s4); border-right: 1px solid var(--rule-soft); font: 600 var(--meta)/1 Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; }
.nav .coverage-item { flex: 0 0 auto; min-height: 44px; display: grid; place-items: center; padding: 0 var(--s4); border-right: 1px solid var(--rule-soft); color: var(--muted); font: 500 var(--meta)/1 Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.nav a:first-child { border-left: 1px solid var(--rule-soft); }
.hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); gap: var(--s8); padding: var(--s12) 0 var(--s16); border-bottom: 1px solid var(--rule); }
.kicker { margin: 0 0 var(--s2); color: var(--accent); font: 600 var(--meta)/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .11em; text-transform: uppercase; }
.hero h1 { max-width: 14ch; margin: 0; font: 400 var(--display)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
.hero-action { margin: var(--s6) 0 0; font-weight: 700; }
.hero-action a { color: var(--accent); text-underline-offset: 5px; }
.dek { max-width: 62ch; margin: var(--s5) 0 0; color: var(--muted); font: 400 var(--lead)/1.55 Georgia, "Times New Roman", serif; }
.meta { margin: var(--s4) 0 0; color: var(--muted); font: 500 var(--meta)/1.4 "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; }
.source-rail { align-self: end; background: var(--night); color: var(--surface); padding: var(--s6); border-top: 4px solid var(--accent); }
.source-rail h2 { margin: 0 0 var(--s5); font: 600 var(--meta)/1.25 "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.source-rail p { margin: 0 0 var(--s5); color: var(--night-muted); font-size: .9375rem; }
.source-rail a { color: var(--surface); }
.source-rail ul { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.section { padding: var(--s12) 0; border-bottom: 1px solid var(--rule); }
.section-title { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s8); font: 600 var(--meta)/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.section-title::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.story { min-width: 0; padding: var(--s6) var(--s6) 0 0; border-right: 1px solid var(--rule-soft); }
.story + .story { padding-left: var(--s6); }
.story:last-child { border-right: 0; padding-right: 0; }
.story h3 { margin: 0; font: 400 var(--h3)/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.story h3 a { text-decoration: none; }
.story h3 a:hover { text-decoration: underline; }
.story p { margin: var(--s3) 0 0; color: var(--muted); font: 400 .9375rem/1.55 Georgia, "Times New Roman", serif; }
.story .meta { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--rule-soft); }
.principle { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s12); align-items: start; }
.principle h2 { margin: 0; font: 400 var(--h2)/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.principle p { margin: 0; color: var(--muted); }
footer { background: var(--night); color: var(--surface); }
.footer { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s8); padding: var(--s12) 0; }
.footer h2 { margin: 0; font: 400 1.5rem/1 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.footer p, .footer small { color: var(--night-muted); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-content: start; }
.footer nav a { color: var(--surface); font-size: .875rem; }
.article { width: min(100% - 32px, 860px); margin: 0 auto; padding: var(--s12) 0 var(--s20); }
.article h1 { margin: 0; font: 400 var(--h1)/1 Georgia, "Times New Roman", serif; letter-spacing: -.05em; }
.article .dek { max-width: 48ch; }
.article-body { margin-top: var(--s12); }
.article-body p { font: 400 1.18rem/1.72 Georgia, "Times New Roman", serif; }
.article-claims { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--rule-soft); }
.article-claims h2 { font: 600 var(--meta)/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.article-claims li { margin: var(--s5) 0; padding-left: var(--s2); }
.article-claims li > p:first-child { margin: 0; }
.claim-source { margin: var(--s2) 0 0; color: var(--muted); font: 500 var(--meta)/1.4 "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; }
.claim-source a { color: inherit; }
.article-sources { margin-top: var(--s12); padding-top: var(--s6); border-top: 4px solid var(--accent); }
.article-sources h2 { font: 600 var(--meta)/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.article-sources li { margin: var(--s3) 0; }
.sync-queue { padding: 0; list-style: none; }
.sync-queue li { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--rule-soft); }
.sync-queue a { text-decoration: none; }
.sync-queue a:hover, .sync-queue a:focus-visible { text-decoration: underline; }
.sync-queue span { color: var(--muted); font: 500 var(--meta)/1.4 "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; }
.notice { margin: var(--s8) 0 0; padding: var(--s4); border-left: 4px solid var(--warning); background: var(--surface); color: var(--muted); font-size: .9375rem; }
@media (max-width: 860px) {
  .hero, .principle { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .story, .story + .story { padding: var(--s5) 0; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .footer { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wrap { width: min(100% - 24px, 1440px); }
  .utility .wrap { min-height: 40px; }
  .utility .wrap > span { display: none; }
  .brand-row { align-items: start; flex-direction: column; }
  .edition { text-align: left; }
  .hero { padding-top: var(--s8); }
  .nav a, .nav .coverage-item { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
