:root {
  color-scheme: light;
  --page: #fbfbf8;
  --surface: #ffffff;
  --text: #20282e;
  --muted: #5f6b72;
  --line: #dfe4e1;
  --accent: #3f6871;
  --accent-soft: #eef3f2;
  --elsewhere: #6d7654;
  --top: #586876;
  --warning-soft: #f6f1e7;
  --error-soft: #f7eeee;
  --measure: 60ch;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-underline-offset: .17em; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #9ab8bd;
  outline-offset: 3px;
  border-radius: 3px;
}
.wrap { width: min(100% - 36px, 780px); margin: 0 auto; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: flex; align-items: baseline; gap: 13px; }
.brand a { color: var(--text); font-size: 1.16rem; font-weight: 760; text-decoration: none; letter-spacing: -.015em; }
.brand span { color: var(--muted); font-size: .84rem; }
.quiet-nav { display: flex; gap: 17px; font-size: .82rem; }
.quiet-nav a { color: var(--muted); text-decoration: none; }
.quiet-nav a:hover, .quiet-nav a:focus-visible { color: var(--accent); text-decoration: underline; }
.status-area { margin: 26px 0 10px; }
.news-section { margin: 58px 0 68px; }
.section-top { margin-bottom: 26px; }
.section-head { margin-bottom: 14px; max-width: var(--measure); }
.section-head .eyebrow,
.topic-overview > .eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: .70rem;
  font-weight: 760;
  letter-spacing: .13em;
}
.section-top .eyebrow { color: var(--top); }
.section-elsewhere .eyebrow { color: var(--elsewhere); }
.section-head h2 { margin: 0; font-size: clamp(1.5rem, 3.5vw, 1.9rem); line-height: 1.18; letter-spacing: -.025em; }
.section-head > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: .90rem; line-height: 1.5; }
.top-head { padding-bottom: 4px; }
.story { max-width: var(--measure); padding: 31px 0 38px; border-top: 1px solid var(--line); }
.story:first-of-type { border-top: 0; }
.story-featured { padding-top: 24px; }
.story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; color: var(--muted); font-size: .79rem; line-height: 1.45; margin-bottom: 9px; }
.language-mark {
  display: inline-block;
  padding: 1px 7px 2px;
  border: 1px solid #d6dedb;
  border-radius: 999px;
  background: #f3f5f3;
  color: #3e4b51;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.language-en { background: #f1f5f5; border-color: #d4e0e0; }
.story h3 {
  margin: 0 0 9px;
  font-size: clamp(1.18rem, 2.5vw, 1.38rem);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.014em;
  text-wrap: pretty;
}
.story-featured h3 { font-size: clamp(1.42rem, 3.35vw, 1.72rem); line-height: 1.24; font-weight: 680; }
.summary { margin: 0 0 13px; max-width: var(--measure); line-height: 1.62; text-wrap: pretty; }
.source-link { display: inline-block; margin-top: 5px; font-size: .88rem; font-weight: 650; text-decoration-thickness: 1px; }
.words { margin: 14px 0 5px; color: var(--muted); font-size: .88rem; }
.words summary { cursor: pointer; color: var(--accent); font-weight: 650; }
.word-list { margin: 9px 0 0; padding-left: 14px; border-left: 2px solid var(--accent-soft); }
.word-list p { margin: 4px 0; }
.elsewhere { padding: 28px 30px 8px; background: #fafaf3; border: 1px solid #e1e3d8; border-radius: 14px; }
.notice { max-width: var(--measure); border-radius: 8px; padding: 10px 12px; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.notice-info { background: var(--accent-soft); }
.notice-warn { background: var(--warning-soft); }
.notice-error { background: var(--error-soft); }
.refresh-meta { color: var(--muted); font-size: .80rem; line-height: 1.45; }
.empty { color: var(--muted); }
.footer { color: var(--muted); font-size: .78rem; line-height: 1.5; padding: 26px 0 54px; border-top: 1px solid var(--line); }
.admin-state { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 18px 0 28px; }
.admin-row { padding: 18px 0; border-top: 1px solid var(--line); }
.admin-row small, .scores, .event-key { color: var(--muted); }
.scores, .event-key { margin: 6px 0; font-size: .78rem; overflow-wrap: anywhere; }
::selection { background: #dce8e7; }
button { padding: 6px 10px; margin: 5px 4px 0 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; }

.topic-overview {
  margin: 0 0 40px;
  max-width: var(--measure);
  padding: 20px 22px 21px;
  background: #f2f5f4;
  border: 1px solid #dce4e1;
  border-left: 3px solid #7b9096;
  border-radius: 10px;
}
.topic-transition .eyebrow { margin-bottom: 5px; }
.topic-transition h2 { margin: 0; font-size: clamp(1.24rem, 2.8vw, 1.42rem); line-height: 1.22; letter-spacing: -.018em; }
.topic-transition > p:last-child { margin: 6px 0 13px; color: var(--muted); font-size: .88rem; line-height: 1.48; }
.topic-index { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 12px; border-top: 1px solid #d6dfdc; }
.topic-index a { color: #42555c; font-size: .86rem; font-weight: 650; text-decoration: none; }
.topic-index a:hover, .topic-index a:focus-visible { color: var(--accent); text-decoration: underline; }
.topic-section { margin-top: 54px; }
.category-head { padding: 13px 0 8px; border-top: 1px solid var(--category-accent, #667780); }
.category-head h2 { font-size: clamp(1.42rem, 3vw, 1.72rem); }
.topic-society_politics { --category-accent: #65778a; }
.topic-science_technology { --category-accent: #587b80; }
.topic-economy { --category-accent: #74775d; }
.topic-nature_environment { --category-accent: #607b66; }
.topic-health { --category-accent: #766b80; }
.topic-culture { --category-accent: #806e66; }
.topic-sports { --category-accent: #6b7861; }
.topic-other { --category-accent: #70777b; }


.footer-tip { display: block; margin-top: 7px; }
.translatable-text { cursor: text; }
.word-translation {
  position: fixed;
  z-index: 1000;
  max-width: min(330px, calc(100vw - 20px));
  padding: 8px 11px 9px;
  border: 1px solid #ccd8d5;
  border-radius: 8px;
  background: #fffefb;
  color: var(--text);
  box-shadow: 0 8px 28px rgba(32, 40, 46, .13);
  font-size: .88rem;
  line-height: 1.35;
  pointer-events: none;
}
.word-translation[hidden] { display: none; }
.word-translation-source { color: var(--muted); }
.word-translation-arrow { margin: 0 5px; color: #879396; }
.word-translation-result { font-weight: 700; }

@media (max-width: 600px) {
  body { font-size: 16.5px; line-height: 1.58; }
  .wrap { width: min(100% - 28px, 780px); }
  .header-inner { min-height: 62px; gap: 12px; }
  .brand span { display: none; }
  .quiet-nav { gap: 12px; font-size: .76rem; }
  .news-section { margin: 46px 0 56px; }
  .section-top { margin-bottom: 20px; }
  .topic-overview { margin-bottom: 34px; padding: 18px 17px 19px; }
  .topic-index { gap: 6px 14px; }
  .story { padding: 27px 0 33px; }
  .story h3 { font-size: 1.20rem; }
  .story-featured h3 { font-size: 1.44rem; }
  .summary { line-height: 1.58; }
  .elsewhere { padding: 22px 18px 5px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }