@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Manrope:wght@400;600;700;800&family=IBM+Plex+Sans+JP:wght@400;500;700&display=swap");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body, "Manrope", "IBM Plex Sans JP", sans-serif);
  color: var(--text, #111827);
  background: var(--bg, #f8fafc);
  line-height: 1.6;
}

a { color: inherit; }

.topbar {
  width: min(1220px, 94vw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 10px;
  gap: 10px;
  font-size: 0.9rem;
}

.topbar a {
  text-decoration: none;
  font-weight: 700;
  color: var(--brand, #2563eb);
}

.site-wrap {
  width: min(1220px, 94vw);
  margin-inline: auto;
  padding: 8px 0 36px;
}

.page-title {
  margin: 0;
  font-family: var(--font-display, "Fraunces", serif);
  letter-spacing: 0.01em;
  line-height: 1.14;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}

.page-lead {
  margin: 10px 0;
  max-width: 72ch;
  color: var(--muted, #475569);
}

.source-note {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: var(--muted, #475569);
}

.source-note a {
  color: var(--brand, #2563eb);
  font-weight: 700;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.badge {
  padding: 6px 10px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 999px;
  background: var(--chip, #f1f5f9);
  font-size: 0.82rem;
}

.panel {
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface, #ffffff);
  border-radius: 14px;
  padding: 16px;
}

h2 {
  margin: 0 0 8px;
  font-family: var(--font-display, "Fraunces", serif);
  font-size: clamp(1.18rem, 1rem + 0.8vw, 1.8rem);
  line-height: 1.2;
}

h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

p { margin: 0; }

ul, ol { margin: 0; }

.cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--brand, #2563eb) 62%, #111827 12%);
  background: linear-gradient(180deg, var(--brand-soft, #60a5fa), var(--brand, #2563eb));
  color: #ffffff;
  font-weight: 700;
}

a:focus-visible, button:focus-visible, .cta-link:focus-visible {
  outline: 3px solid var(--accent, #f59e0b);
  outline-offset: 2px;
}

.footer-note {
  width: min(1220px, 94vw);
  margin-inline: auto;
  padding: 0 0 22px;
  color: var(--muted, #64748b);
  font-size: 0.88rem;
}

@media (max-width: 780px) {
  .site-wrap { padding-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}