/*
 * `--ink` is the constant deep brand colour used for dark surfaces in BOTH schemes,
 * so it must never be inverted. Body copy reads from `--text`, which does invert.
 */
:root {
  --ink: #202124;
  --text: #202124;
  --ink-soft: #3f4246;
  --muted: #686c72;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f5f7f9;
  --line: #e2e5e9;
  --line-strong: #c5cad0;
  --tint: #f5f7f9;
  --tint-civic: #f5f7f9;
  --tint-page: #fafbfc;
  --tint-header: #ffffff;
  --tint-analysis: #f4f6f8;
  --note-bg: #fff8df;
  --note-ink: #5a4b1c;
  --photo-fallback: #eef1f4;
  --chip-bg: #f0f2f5;
  --track: #e9edf1;
  --green: #0b67b2;
  --green-dark: #07569a;
  --green-soft: #edf5fc;
  --green-bright: #d8eafb;
  --yellow: #efbd3d;
  --red: #c7352d;
  --blue: #0b67b2;
  --news-blue: #0b67b2;
  --news-blue-dark: #07569a;
  --news-red: #c7352d;
  --action-blue: #0b67b2;
  --action-blue-dark: #07569a;
  --map-accent: #16745f;
  --history-accent: #9a641d;
  --quiz-green: #16805f;
  --quiz-blue: #1976bd;
  --game-paper: #fff9e9;
  --shadow: none;
  --shadow-lift: 0 2px 5px rgba(32, 33, 36, 0.10);
  --radius: 3px;
  --container: 1040px;
  --mobile-nav-height: 60px;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

/* Dark palette: only tokens change, so component rules stay single-sourced. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #ededed;
    --ink-soft: #c9c9c9;
    --muted: #9a9a9a;
    --paper: #121212;
    --surface: #1c1c1c;
    --surface-hover: #242424;
    --line: #333333;
    --line-strong: #4d4d4d;
    --tint: #1a1a1a;
    --tint-civic: #1a1a1a;
    --tint-page: #161616;
    --tint-header: #1c1c1c;
    --tint-analysis: #1a1a1a;
    --note-bg: #2f2915;
    --note-ink: #f2e4ad;
    --photo-fallback: #2a2a2a;
    --chip-bg: #2a2a2a;
    --track: #2e2e2e;
    --green: #68aee8;
    --green-dark: #90c5ef;
    --green-soft: #172b3f;
    --green-bright: #d8eafb;
    --red: #e28c8c;
    --blue: #6fb6e2;
    --news-blue: #90c5ef;
    --news-blue-dark: #90c5ef;
    --news-red: #f0a49a;
    --map-accent: #7bd2b8;
    --history-accent: #e4ba74;
    --quiz-green: #7bd2b8;
    --quiz-blue: #90c5ef;
    --game-paper: #161a16;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lift: 0 14px 34px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --text: #ededed;
  --ink-soft: #c9c9c9;
  --muted: #9a9a9a;
  --paper: #121212;
  --surface: #1c1c1c;
  --surface-hover: #242424;
  --line: #333333;
  --line-strong: #4d4d4d;
  --tint: #1a1a1a;
  --tint-civic: #1a1a1a;
  --tint-page: #161616;
  --tint-header: #1c1c1c;
  --tint-analysis: #1a1a1a;
  --note-bg: #2f2915;
  --note-ink: #f2e4ad;
  --photo-fallback: #2a2a2a;
  --chip-bg: #2a2a2a;
  --track: #2e2e2e;
  --green: #68aee8;
  --green-dark: #90c5ef;
  --green-soft: #172b3f;
  --green-bright: #d8eafb;
  --red: #e28c8c;
  --blue: #6fb6e2;
  --news-blue: #90c5ef;
  --news-blue-dark: #90c5ef;
  --news-red: #f0a49a;
  --map-accent: #7bd2b8;
  --history-accent: #e4ba74;
  --quiz-green: #7bd2b8;
  --quiz-blue: #90c5ef;
  --game-paper: #161a16;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 14px 34px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  color: var(--text);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: .2em; touch-action: manipulation; }
a:hover { color: var(--green); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
button, input, select { font: inherit; }

.container { width: min(calc(100% - 28px), var(--container)); margin-inline: auto; }
.section-space { padding-block: 30px; }
.section-space--small { margin-top: 32px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 14px; color: white; background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* Mobile navigation stays within thumb reach. */
.site-header { position: relative; z-index: 10; background: var(--tint-header); border-bottom: 1px solid var(--line); }
.site-header__top { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 11px; }
.brand__name { color: var(--text); font-size: 28px; font-weight: 900; line-height: 1.15; letter-spacing: -.055em; text-decoration: none; }
.brand__logo { display: block; width: min(242px, 68vw); line-height: 0; }
.brand__logo img { width: 100%; height: auto; }
.brand__tagline { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.custom-logo { max-height: 58px; width: auto; }
.site-header__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; width: 100%; }
.site-header__search { display: flex; flex: 1 1 210px; max-width: 330px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; }
.site-header__search input { width: 100%; min-width: 0; padding: 6px 10px; border: 0; background: transparent; font-size: 12px; }
.site-header__search button { flex: 0 0 auto; min-height: 44px; padding: 6px 11px; color: white; background: var(--ink); border: 0; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.language-switch { display: inline-grid; min-width: 42px; min-height: 34px; place-items: center; padding: 5px 11px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 900; line-height: 1; text-decoration: none; }
.language-switch:hover { color: white; background: var(--green-dark); border-color: var(--green-dark); }
.independent-label { padding: 0; color: var(--green-dark); font-size: 12px; font-weight: 700; }
.site-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 100; padding-bottom: env(safe-area-inset-bottom); background: var(--ink); box-shadow: 0 -5px 20px rgba(12, 29, 24, .18); }
.site-nav .container { width: 100%; }
.site-nav__list { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 0; list-style: none; }
.site-nav__list a { display: grid; min-height: var(--mobile-nav-height); place-items: center; padding: 5px 2px; color: white; font-size: 12px; font-weight: 800; line-height: 1.25; text-align: center; text-decoration: none; white-space: nowrap; }
.site-nav__list a:hover, .site-nav__list .current-menu-item > a, .site-nav__list .current-menu-parent > a { color: white; background: var(--green); }
.site-nav__list--english a { font-size: 12px; }

.eyebrow { margin: 0 0 7px; color: var(--green); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.eyebrow a:hover { text-decoration-thickness: 2px; }
.hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero__inner { padding-block: 26px; }
.hero h1 { max-width: 720px; overflow-wrap: anywhere; margin: 0; font-size: clamp(34px, 9.5vw, 44px); line-height: 1.14; letter-spacing: -.055em; }
.hero__lead { max-width: 690px; margin: 12px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.hero__promise { display: flex; align-items: center; gap: 5px; margin: 13px 0 0; color: var(--green-dark); font-size: 12px; font-weight: 800; }
.hero__promise span { display: inline-flex; align-items: center; }
.hero__promise span:not(:last-child)::after { margin-left: 5px; color: var(--muted); content: "→"; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 16px; margin-top: 18px; }
.hero__actions .button { min-height: 44px; padding: 8px 16px; font-size: 13px; }
.hero__actions .text-link { min-height: 44px; font-size: 12px; }
.hero-author { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 11px; width: min(100%, 390px); margin-top: 15px; padding: 7px; color: var(--text); background: var(--paper); border: 1px solid var(--line); border-radius: 11px; text-decoration: none; }
.hero-author:hover { color: var(--text); border-color: var(--line-strong); }
.hero-author img { width: 58px; height: 58px; object-fit: cover; object-position: 57% 32%; border-radius: 7px; }
.hero-author span { min-width: 0; line-height: 1.35; }
.hero-author strong, .hero-author small, .hero-author em { display: block; }
.hero-author strong { font-size: 14px; }
.hero-author small { color: var(--green-dark); font-size: 12px; font-weight: 800; }
.hero-author em { margin-top: 2px; color: var(--muted); font-size: 12px; font-style: normal; }

.home-hero { color: white; background: var(--ink); }
.home-hero__inner { padding-block: 33px 29px; }
.home-hero .eyebrow { color: #8fe0c4; }
.home-hero h1 { max-width: 780px; overflow-wrap: anywhere; margin: 0; color: white; font-size: clamp(36px, 10.5vw, 54px); line-height: 1.12; letter-spacing: -.06em; }
.home-hero > .container > p:not(.eyebrow) { max-width: 660px; margin: 13px 0 0; color: #dfdfdf; font-size: 14px; line-height: 1.75; }
.tomiya-search--home { margin-top: 18px; padding: 8px; background: var(--surface); border-radius: 12px; }
.home-hero__popular { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 11px; color: #c5c5c5; font-size: 12px; }
.home-hero__popular a { color: white; font-weight: 800; }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 10px 18px; border: 2px solid var(--text); border-radius: 999px; color: var(--text); font-weight: 800; text-align: center; text-decoration: none; }
.button:hover { color: white; background: var(--ink); }
.button--dark { color: white; background: var(--ink); border-color: var(--ink); }
.button--dark:hover { color: white; background: var(--green); border-color: var(--green); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; }

.section-heading { display: flex; align-items: flex-start; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.section-heading h2 { margin: 0; font-size: 26px; line-height: 1.28; letter-spacing: -.04em; }
.hero h1, .section-heading h2, .archive-heading h1, .page-single__header h1, .article-single__header h1, .report-section__heading h2 { text-wrap: balance; }
.section-heading > a { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; font-weight: 800; }
.archive-heading { max-width: 820px; margin-bottom: 30px; }
.archive-heading--wide { max-width: 980px; }
.archive-heading h1, .page-single__header h1, .error-page h1 { margin: 0 0 13px; font-size: 36px; line-height: 1.2; letter-spacing: -.05em; }
.archive-heading > p:not(.eyebrow) { color: var(--muted); font-size: 16px; }
.archive-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: -8px 0 32px; }
.archive-filters__heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 3px 18px; margin-bottom: 3px; padding-top: 11px; border-top: 3px solid var(--text); }
.archive-filters__heading strong { color: var(--text); font-size: 17px; line-height: 1.3; }
.archive-filters__heading span { color: var(--muted); font-size: 12px; }
.archive-filter { --filter-accent: var(--green); position: relative; display: flex; min-width: 0; min-height: 128px; flex-direction: column; padding: 16px 16px 13px; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--filter-accent); border-radius: 4px; box-shadow: var(--shadow); text-decoration: none; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease); }
.archive-filter--guide { --filter-accent: var(--blue); }
.archive-filter--policy-proposals { --filter-accent: var(--text); }
.archive-filter--life { --filter-accent: var(--yellow); }
.archive-filter:hover { color: var(--text); border-color: var(--filter-accent); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.archive-filter__kicker { color: var(--filter-accent); font-size: 12px; font-weight: 900; letter-spacing: .08em; line-height: 1.3; }
.archive-filter__title { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }
.archive-filter__description { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.archive-filter__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 11px; }
.archive-filter__meta b { color: var(--muted); font-size: 12px; font-weight: 800; }
.archive-filter__meta i { display: grid; width: 29px; height: 29px; place-items: center; color: white; background: var(--ink); border: 1px solid color-mix(in srgb, var(--text) 28%, transparent); border-radius: 50%; font-size: 15px; font-style: normal; font-weight: 900; transition: color 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease); }
.archive-filter:hover .archive-filter__meta i { color: var(--ink); background: var(--yellow); border-color: var(--yellow); transform: translateX(2px); }
.archive-secondary-link { margin: -18px 0 26px; font-size: 13px; font-weight: 800; }

.archive-category-tabs { margin: -8px 0 24px; }
.archive-category-tabs__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding-top: 10px; border-top: 3px solid var(--ink); }
.archive-category-tabs__heading strong { font-size: 15px; }
.archive-category-tabs__heading span { color: var(--muted); font-size: 12px; }
.archive-category-tabs__scroller { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 7px; overscroll-behavior-inline: contain; scrollbar-width: thin; scroll-snap-type: inline proximity; }
.archive-category-tabs__scroller a { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; font-size: 12px; font-weight: 800; text-decoration: none; scroll-snap-align: start; }
.archive-category-tabs__scroller a:hover { color: var(--news-blue); border-color: var(--news-blue); }
.archive-category-tabs__scroller a.is-active { color: white; background: var(--ink); border-color: var(--ink); }
.archive-category-tabs__scroller small { color: var(--muted); font-size: 12px; font-weight: 700; }
.archive-category-tabs__scroller a.is-active small { color: rgba(255, 255, 255, .72); }

/* News archive controls and chronological list ------------------------------ */
.archive-results { margin-top: 24px; }
.archive-results__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 8px; padding: 18px 0 14px; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--line-strong); }
.archive-results__head .eyebrow { margin-bottom: 3px; color: var(--news-blue); }
.archive-results__head h2 { margin: 0; font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
.archive-results__head > div:first-child > p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.archive-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.archive-control { display: inline-grid; grid-template-columns: auto repeat(2, auto); align-items: center; overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; }
.archive-control > span { padding: 0 10px; color: var(--muted); font-size: 12px; font-weight: 800; }
.archive-control a { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 7px 13px; color: var(--text); border-left: 1px solid var(--line); font-size: 12px; font-weight: 800; text-decoration: none; }
.archive-control a:hover { color: var(--news-blue); background: var(--surface-hover); }
.archive-control a.is-active { color: white; background: var(--ink); }
.news-list { margin: 0; padding: 0; list-style: none; }
.news-list__item { border-bottom: 1px solid var(--line); }
.news-list-item { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 15px 0; }
.news-list-item__media { display: block; align-self: start; overflow: hidden; aspect-ratio: 16 / 10; background: var(--green-soft); border-radius: 4px; }
.news-list-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms var(--ease); }
.news-list-item__media:hover img { transform: scale(1.025); }
.news-list-item__body { min-width: 0; }
.news-list-item__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.news-list-item__meta time { font-variant-numeric: tabular-nums; }
.news-list-item__meta span { color: var(--news-blue); }
.news-list-item__meta a { color: var(--muted); }
.news-list-item h2 { margin: 0; font-size: 15px; line-height: 1.45; }
.news-list-item h2 a { color: var(--text); text-decoration: none; }
.news-list-item h2 a:hover { color: var(--news-blue); text-decoration: underline; text-underline-offset: 3px; }
.news-list-item__body > p { display: none; }
.news-list-item__read { display: none; }

@media (min-width: 721px) {
	.archive-category-tabs { margin-bottom: 30px; }
	.archive-category-tabs__scroller { flex-wrap: wrap; overflow: visible; }
  .archive-results { margin-top: 46px; }
  .archive-results__head { padding: 21px 0 17px; }
  .archive-results__head h2 { font-size: 28px; }
  .archive-control > span { padding-inline: 12px; font-size: 12px; }
  .archive-control a { min-height: 42px; padding-inline: 15px; font-size: 13px; }
  .news-list-item { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; padding: 22px 0; }
  .news-list-item__meta { margin-bottom: 7px; font-size: 12px; }
  .news-list-item h2 { font-size: 20px; line-height: 1.45; }
  .news-list-item__body > p { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .news-list-item__read { display: inline-flex; margin-top: 8px; color: var(--news-blue); font-size: 12px; font-weight: 800; text-decoration: none; }
  .news-list-item__read span { margin-left: 5px; }
}

@media (max-width: 520px) {
  .archive-results__head { align-items: stretch; }
  .archive-controls { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .archive-control { grid-template-columns: auto repeat(2, minmax(0, 1fr)); }
  .archive-control > span { padding-inline: 7px; font-size: 12px; }
  .archive-control a { min-width: 0; padding-inline: 6px; }
}

/* Dense, scannable cards are the default on small screens. */
.article-grid { display: grid; gap: 10px; }
.article-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); min-height: 120px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.article-card__media { display: grid; min-height: 100%; place-items: center; overflow: hidden; color: var(--green-dark); background: var(--green-soft); text-decoration: none; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { min-width: 0; padding: 10px 11px; }
.article-card__body .eyebrow { margin-bottom: 4px; font-size: 12px; }
.article-card__title { margin: 0; font-size: 15px; line-height: 1.4; }
.article-card__title a { color: var(--text); text-decoration: none; }
.article-card__meta { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.article-card__body > p { display: none; }
.article-card__body > p.article-card__topics { display: block; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.article-card__topics a { font-weight: 800; }
.article-card__read { display: inline-block; margin-top: 4px; color: var(--green-dark); font-size: 12px; font-weight: 800; }
.article-grid--featured-first .article-card:first-child { display: block; min-height: 0; }
.article-grid--featured-first .article-card:first-child .article-card__media { min-height: 0; aspect-ratio: 16 / 9; }
.article-grid--featured-first .article-card:first-child .article-card__body { padding: 17px; }
.article-grid--featured-first .article-card:first-child .article-card__title { font-size: 20px; }

.politics-section { background: var(--tint-civic); border-block: 1px solid var(--line); }
.person-directory-guide { margin: -14px 0 38px; background: var(--surface); border-block: 1px solid var(--line); border-top: 4px solid var(--news-blue); }
.person-directory-guide__intro { padding: 20px 0 18px; }
.person-directory-guide__intro .eyebrow { margin-bottom: 5px; }
.person-directory-guide__intro h2 { margin: 0; font-size: 25px; line-height: 1.3; letter-spacing: -.035em; }
.person-directory-guide__intro > p:last-child { margin: 9px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.person-directory-guide__rows { margin: 0; border-top: 1px solid var(--line); }
.person-directory-guide__rows div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.person-directory-guide__rows dt { color: var(--news-blue); font-size: 12px; font-weight: 900; }
.person-directory-guide__rows dd { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.person-directory-guide__links { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 14px 0 5px; }
.person-directory-guide__links a { display: inline-flex; min-height: 36px; align-items: center; color: var(--news-blue); font-size: 12px; font-weight: 900; }
.person-directory-guide__links a::after { margin-left: 6px; content: "\2192"; }
.person-directory-guide__note { margin: 0; padding: 10px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.person-grid { display: grid; gap: 12px; }
.person-group + .person-group { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(7, 86, 64, .2); }
.person-group__heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 16px; }
.person-group__heading h2, .person-group__heading h3 { margin: 0; font-family: var(--serif); font-size: 26px; }
.person-group__heading p { margin: 0; color: var(--muted); font-size: 12px; }
.person-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); min-height: 184px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.person-card[hidden] { display: none; }
.person-card__photo { display: grid; min-height: 100%; place-items: center; overflow: hidden; color: white; background: linear-gradient(135deg, var(--green), var(--ink)); font-size: 50px; font-weight: 800; text-decoration: none; }
.person-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; background: var(--photo-fallback); }
.person-card__body { min-width: 0; padding: 10px; }
.person-card__body .eyebrow { margin-bottom: 2px; font-size: 12px; }
.person-card h2 { margin: 0; font-size: 18px; line-height: 1.25; }
.person-card h2 a { color: var(--text); text-decoration: none; }
.person-card__kana { margin: 0; color: var(--muted); font-size: 12px; }
.person-card__affiliation { margin: 1px 0 6px; color: var(--muted); font-size: 12px; }
.person-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; width: 100%; margin: 0 0 9px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 7px; }
.person-card__facts--mayor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.person-card__facts div { min-width: 0; padding: 4px; background: var(--paper); }
.person-card__facts dt { color: var(--muted); font-size: 12px; }
.person-card__facts dd { margin: 1px 0 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 800; }
.person-card__mayor-note { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.person-card__activity { padding-top: 7px; border-top: 1px solid var(--line); }
.person-card__activity > strong { display: block; color: var(--green-dark); font-size: 12px; }
.person-card__activity p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.person-card__activity a { color: var(--text); font-weight: 700; text-decoration: none; }
.person-card__credit { display: none; }
.person-card__detail { display: inline-flex; min-height: 30px; align-items: center; margin-top: 1px; font-size: 12px; font-weight: 800; }
.source-promo { display: flex; align-items: flex-start; flex-direction: column; gap: 18px; padding: 26px 20px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.source-promo h2 { margin: 0; font-size: 28px; }
.source-promo p { margin-bottom: 0; }
.issues-section { background: var(--paper); border-bottom: 1px solid var(--line); }
.issues-section__intro, .section-intro { max-width: 800px; margin: -5px 0 16px; color: var(--muted); font-size: 14px; }
.topic-nav { display: flex; gap: 7px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.topic-nav::-webkit-scrollbar { display: none; }
.topic-nav a { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; padding: 6px 13px; color: var(--green-dark); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 800; text-decoration: none; }

/* Data journalism: charts stay native HTML/SVG so labels remain readable and updateable. */
.report-spotlight { margin-block: 14px 0; }
.report-spotlight__link { display: block; overflow: hidden; color: white; background: var(--ink); border-radius: var(--radius); text-decoration: none; }
.report-spotlight__link:hover { color: white; }
.report-spotlight__intro { padding: 20px; }
.report-spotlight__intro .eyebrow { color: #8fe0c4; }
.report-spotlight__intro h2 { margin: 0; overflow-wrap: anywhere; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }
.report-spotlight__intro p { margin: 8px 0 10px; color: var(--line); font-size: 12px; line-height: 1.6; }
.report-spotlight__intro > span { color: white; font-size: 12px; font-weight: 900; }
.report-spotlight__numbers { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid rgba(255,255,255,.16); }
.report-spotlight__numbers div { min-width: 0; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.report-spotlight__numbers div:last-child { border-bottom: 0; }
.report-spotlight__numbers dt { color: #bbbbbb; font-size: 12px; line-height: 1.4; }
.report-spotlight__numbers dd { margin: 5px 0 0; color: #fff; }
.report-spotlight__numbers dd > strong { display: block; font-size: clamp(25px, 7vw, 31px); font-weight: 900; line-height: 1.05; letter-spacing: -.04em; }
.report-spotlight__numbers dd > span { display: block; margin-top: 6px; color: #c8c8c8; font-size: 12px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.report-spotlight__numbers small { margin-left: 2px; font-size: 12px; letter-spacing: 0; }
.report-spotlight__numbers .report-spotlight__word { letter-spacing: .02em; }

.mayor-report { overflow: clip; background: var(--tint-page); }
.report-hero { color: white; background: var(--ink); }
.report-hero__inner { display: grid; gap: 22px; padding-block: 35px; }
.report-hero .eyebrow { color: #8fe0c4; }
.report-hero h1 { max-width: 850px; margin: 0; overflow-wrap: anywhere; font-size: clamp(32px, 8.5vw, 56px); line-height: 1.12; letter-spacing: -.055em; }
.report-hero__lead { max-width: 780px; margin: 15px 0 0; color: #dcdcdc; font-size: 14px; line-height: 1.75; }
.report-hero__meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 16px; color: #b8b8b8; font-size: 12px; }
.report-hero__meta span:not(:last-child)::after, .report-hero__meta time::after { margin-left: 12px; color: #6a6a6a; content: "/"; }
.report-hero__number { align-self: end; padding: 17px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; }
.report-hero__number > span { display: block; color: #c7c7c7; font-size: 12px; font-weight: 800; }
.report-hero__number strong { display: block; margin-top: 4px; color: white; font-size: 58px; line-height: 1; letter-spacing: -.065em; }
.report-hero__number strong small { font-size: 22px; }
.report-hero__number p { margin: 8px 0 0; color: #c7c7c7; font-size: 12px; }
.report-toc { position: sticky; top: 0; z-index: 8; overflow-x: auto; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); scrollbar-width: none; }
.report-toc::-webkit-scrollbar { display: none; }
.report-toc .container { display: flex; width: max-content; min-width: 100%; }
.report-toc a { display: inline-flex; min-height: 46px; flex: 0 0 auto; align-items: center; padding: 0 13px; color: var(--text); border-right: 1px solid var(--line); font-size: 12px; font-weight: 900; text-decoration: none; }
.report-section { padding-block: 42px; scroll-margin-top: 50px; }
.report-section--tint { background: var(--tint); border-block: 1px solid var(--line); }
.report-section--dark { color: white; background: #2e2e2e; }
.report-section__heading { max-width: 820px; margin-bottom: 22px; }
.report-section__heading h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(27px, 7.3vw, 42px); line-height: 1.18; letter-spacing: -.05em; }
.report-section__heading > p:not(.eyebrow) { margin: 11px 0 0; color: var(--muted); font-size: 13px; }
.report-section--dark .report-section__heading > p:not(.eyebrow) { color: #c7c7c7; }
.report-intent__grid { display: grid; gap: 20px; }
.report-prose p { margin: 0 0 15px; font-size: 15px; }
.report-principles { margin: 0; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.report-principles p { margin: 4px 0 14px; color: var(--muted); font-size: 12px; }
.report-principles p:last-child { margin-bottom: 0; }
.evidence-tag { display: inline-flex; width: max-content; padding: 3px 7px; color: var(--green-dark); background: var(--green-soft); border-radius: 4px; font-size: 12px; font-weight: 900; line-height: 1.5; letter-spacing: .04em; }
.evidence-tag--analysis { color: #705800; background: #fff2bc; }
.evidence-tag--question { color: #774040; background: #f9dddd; }
.election-visuals { display: grid; gap: 10px; }
.election-card { display: grid; gap: 15px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.election-card h3 { margin: 7px 0 5px; font-size: 18px; line-height: 1.35; }
.election-card p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.turnout-ring { display: grid; width: 110px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0 42.2%, var(--track) 42.2%); }
.turnout-ring::before { grid-area: 1/1; width: 78px; aspect-ratio: 1; background: var(--surface); border-radius: 50%; content: ""; }
.turnout-ring span { z-index: 1; grid-area: 1/1; text-align: center; }
.turnout-ring strong { display: block; font-size: 22px; line-height: 1; }
.turnout-ring small { color: var(--muted); font-size: 12px; }
.seat-equation { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 92px; padding: 8px; color: white; background: var(--ink); border-radius: 10px; }
.seat-equation span { font-size: 12px; text-align: center; }
.seat-equation strong { display: block; color: #8fe0c4; font-size: 30px; line-height: 1; }
.seat-equation b { color: #939393; font-size: 17px; }
.chart-note { margin: 12px 0 0; padding: 14px 16px; background: var(--note-bg); border-left: 4px solid var(--yellow); border-radius: 4px 9px 9px 4px; font-size: 12px; }
.data-figure { margin: 0 0 13px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.data-figure__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.data-figure__header h3 { margin: 6px 0 0; font-size: 18px; line-height: 1.3; }
.data-figure__header > strong { color: var(--green-dark); font-size: 16px; line-height: 1.25; text-align: right; white-space: nowrap; }
.data-figure figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.line-chart-wrap { width: 100%; overflow-x: auto; }
.line-chart { display: block; width: 100%; min-width: 430px; height: auto; overflow: visible; }
.line-chart__grid { stroke: var(--line); stroke-width: 1; }
.line-chart__axis, .line-chart__year { fill: var(--muted); font-size: 12px; }
.line-chart__actual { fill: none; stroke: var(--green); stroke-linecap: round; stroke-width: 5; }
.line-chart__projection { fill: none; stroke: #c49614; stroke-dasharray: 7 6; stroke-linecap: round; stroke-width: 4; }
.line-chart__dot { fill: #fff; stroke: #c49614; stroke-width: 3; }
.line-chart__dot--actual { fill: var(--green); stroke: white; stroke-width: 2; }
/* Neutral third-party projection: distinct hue AND dash pattern, so the three
   lines stay separable without relying on colour alone. */
.line-chart__ipss { fill: none; stroke: var(--blue); stroke-dasharray: 2 6; stroke-linecap: round; stroke-width: 4; }
.line-chart__dot--ipss { fill: var(--surface); stroke: var(--blue); stroke-width: 3; }
.line-chart__gap { stroke: var(--muted); stroke-dasharray: 3 3; stroke-width: 1.5; }
.line-chart__gap-label { fill: var(--muted); font-size: 12px; }
.line-chart__gap-value { fill: var(--text); font-size: 13px; font-weight: 900; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 9px; color: var(--muted); font-size: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-line { width: 20px; height: 3px; background: var(--green); }
.legend-line--projection { height: 0; background: none; border-top: 3px dashed #c49614; }
.legend-line--ipss { height: 0; background: none; border-top: 3px dotted var(--blue); }
.legend-box { width: 10px; height: 10px; background: #49ad88; }
.legend-box--working { background: #2b6653; }
.legend-box--older { background: #e1b63b; }
.report-callout { margin: 13px 0; padding: 16px; color: white; background: var(--ink); border-radius: 12px; }
.report-callout > span { color: #8fe0c4; font-size: 12px; font-weight: 900; }
.report-callout ul { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 18px; font-size: 12px; }
/* Counter-evidence reads as a note, not a verdict, so it stays on paper. */
.report-callout--counter { color: var(--text); background: var(--surface); border: 1px solid var(--line); }
.report-callout--counter > span { color: var(--muted); }
.report-callout--counter ul { gap: 9px; line-height: 1.7; }
.report-prose--wide { max-width: 62ch; margin: 22px 0; }
.report-prose--wide h3 { margin: 26px 0 10px; font-size: 20px; line-height: 1.4; }
.report-prose--wide .evidence-tag { margin-bottom: 2px; }
.assumption-chart { display: grid; gap: 9px; }
.assumption-chart__group { margin: 8px 0 2px; color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.assumption-chart__group:first-child { margin-top: 0; }
.assumption-chart__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 34px; gap: 10px; align-items: center; }
.assumption-chart__label strong { display: block; font-size: 12px; line-height: 1.35; }
.assumption-chart__label small { color: var(--muted); font-size: 12px; }
.assumption-chart__track { height: 14px; background: var(--track); border-radius: 3px; }
.assumption-chart__track i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.assumption-chart__row--plan .assumption-chart__track i { background: #c49614; }
.assumption-chart__value { font-size: 13px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.stacked-chart { display: grid; gap: 15px; }
.stacked-chart__row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 5px 8px; align-items: center; }
.stacked-chart__row > strong { grid-row: 1 / span 2; font-size: 12px; }
.stacked-chart__bar { display: flex; height: 20px; overflow: hidden; border-radius: 3px; }
.stacked-chart__bar span { display: block; height: 100%; }
.stacked-chart__child { background: #49ad88; }
.stacked-chart__working { background: #2b6653; }
.stacked-chart__older { background: #e1b63b; }
.stacked-chart__row small { color: var(--muted); font-size: 12px; }
/* Comparison rows are labelled by source, not by year, so they need more room. */
.stacked-chart--compare .stacked-chart__row { grid-template-columns: 68px minmax(0, 1fr); }
.stacked-chart--compare .stacked-chart__row > strong { font-size: 12px; }
.data-figure--dark { background: #404040; border-color: #5b5b5b; box-shadow: none; }
.data-figure--dark figcaption { color: #c7c7c7; }
.priority-chart { display: grid; gap: 14px; }
.priority-chart__row > div:first-child { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.priority-chart__row strong { font-size: 12px; }
.priority-chart__row span { color: #8fe0c4; font-size: 13px; font-weight: 900; }
.priority-chart__track { height: 12px; overflow: hidden; background: #292929; border-radius: 2px; }
.priority-chart__track i { display: block; height: 100%; background: #73d5b2; }
.dark-callout { margin: 12px 0 0; padding: 15px; color: #f9e7a5; background: rgba(0,0,0,.17); border-radius: 9px; font-size: 12px; }
.report-timeline { display: grid; gap: 0; margin: 0 0 20px; padding: 0; list-style: none; }
.report-timeline li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 0 0 18px; }
.report-timeline time { position: relative; color: var(--green-dark); font-size: 12px; font-weight: 900; }
.report-timeline time::after { position: absolute; top: 4px; right: -4px; bottom: -22px; width: 2px; background: var(--line); content: ""; }
.report-timeline li:last-child time::after { display: none; }
.report-timeline div { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.report-timeline strong { font-size: 14px; }
.report-timeline p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.report-timeline__future { opacity: .72; }
.report-ledger { display: grid; gap: 9px; }
.report-ledger article { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.report-ledger h3 { margin: 7px 0 6px; font-size: 17px; line-height: 1.35; }
.report-ledger p { margin: 0; color: var(--muted); font-size: 12px; }
.report-ledger p strong { color: var(--text); font-size: 18px; }
.report-ledger h4 { margin: 12px 0 3px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--green-dark); font-size: 12px; }
.finance-figure { margin-top: 20px; }
.finance-bars { display: grid; gap: 14px; }
.finance-bars > div { display: grid; grid-template-columns: 60px minmax(0, 1fr) 69px; align-items: center; gap: 7px; }
.finance-bars span { color: var(--muted); font-size: 12px; }
.finance-bars i { height: 15px; overflow: hidden; background: var(--track); border-radius: 2px; }
.finance-bars b { display: block; height: 100%; background: var(--green); }
.finance-bars > div:nth-child(2) b { background: #c49614; }
.finance-bars strong { font-size: 12px; text-align: right; }
.election-questions { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.election-questions li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.election-questions > li > span { color: var(--green); font-size: 12px; font-weight: 900; }
.election-questions h3 { margin: 0; font-size: 15px; line-height: 1.4; }
.election-questions p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.report-sources ul { display: grid; gap: 1px; margin: 0; padding: 0; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 10px; list-style: none; }
.report-sources li { background: var(--surface); }
.report-sources li a { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 9px 13px; color: var(--text); font-size: 12px; font-weight: 800; text-decoration: none; }
.report-sources li a::after { color: var(--green); content: "↗"; }
.report-sources > p { color: var(--muted); font-size: 12px; }
.mayor-report-promo { display: flex; align-items: flex-start; flex-direction: column; gap: 9px; margin-bottom: 22px; padding: 17px; color: white; background: var(--ink); border-radius: 12px; text-decoration: none; }
.mayor-report-promo:hover { color: white; }
.mayor-report-promo small { display: block; color: #b2b2b2; font-size: 12px; }
.mayor-report-promo strong { display: block; margin-top: 4px; font-size: 16px; line-height: 1.4; }
.mayor-report-promo b { color: #8fe0c4; font-size: 12px; }
.author-profile { display: grid; gap: 0; max-width: 850px; margin: 18px 0 30px; overflow: hidden; background: var(--ink); border-radius: 13px; }
.author-profile > img { width: 100%; max-height: 340px; object-fit: cover; object-position: center 32%; }
.author-profile figcaption { padding: 20px; color: white; }
.author-profile .eyebrow { color: #8fe0c4; }
.author-profile h2 { margin: 0; color: white; font-size: 29px; }
.author-profile p:not(.eyebrow) { margin: 7px 0 12px; color: #dadada; font-size: 13px; }
.author-profile small { display: block; padding-top: 10px; color: #aeaeae; border-top: 1px solid rgba(255,255,255,.16); font-size: 12px; }

.notice-box, .metric-caution, .article-sources { padding: 16px 17px; background: var(--note-bg); border-left: 4px solid var(--yellow); border-radius: 4px 10px 10px 4px; color: var(--note-ink); }
.dashboard-tools { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-bottom: 22px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.dashboard-tools label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.dashboard-tools input, .dashboard-tools select { min-height: 48px; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }

.person-hero { color: white; background: linear-gradient(125deg, var(--ink), var(--green-dark)); }
.person-hero__grid { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: start; gap: 18px; padding-block: 30px; }
.person-hero__grid > div:last-child { min-width: 0; }
.person-hero__photo { display: grid; width: 116px; aspect-ratio: 4 / 5; place-items: center; overflow: hidden; color: var(--ink); background: var(--yellow); border-radius: var(--radius); font-family: var(--serif); font-size: 52px; font-weight: 800; box-shadow: var(--shadow); }
.person-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.person-hero h1 { margin: 0 0 16px; overflow-wrap: anywhere; font-family: var(--serif); font-size: 34px; line-height: 1.15; letter-spacing: -.05em; }
.person-kana { margin: -11px 0 16px; color: var(--line-strong); font-size: 13px; letter-spacing: .08em; }
.person-hero .eyebrow { color: var(--yellow); }
.person-hero .text-link { color: white; }
.person-photo-credit { margin: 0; color: var(--line-strong); font-size: 12px; }
.profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; max-width: 800px; margin: 0 0 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; }
.profile-facts div { min-width: 0; padding: 10px; background: rgba(255,255,255,.07); }
.profile-facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.profile-facts dt { color: var(--line-strong); font-size: 12px; }
.profile-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 700; }

.metric-caution { margin: 0; font-size: 13px; }
.activity-facts { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.activity-facts__intro { margin: -5px 0 16px; color: var(--muted); font-size: 13px; }
.activity-fact-grid { display: grid; gap: 9px; }
.activity-fact { display: flex; align-items: flex-start; flex-direction: column; padding: 14px; background: var(--paper); border-radius: 9px; }
.activity-fact > span { color: var(--muted); font-size: 12px; }
.activity-fact > strong { margin-top: 4px; font-size: 18px; line-height: 1.35; }
.activity-fact > small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.activity-fact > a { display: inline-flex; min-height: 36px; align-items: center; margin-top: 5px; font-size: 12px; font-weight: 800; }

.money-grid { display: grid; gap: 10px; }
.money-grid > div { display: flex; flex-direction: column; gap: 7px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.money-grid span { color: var(--muted); font-size: 12px; }
.money-grid strong { font-size: 23px; line-height: 1.35; }
.money-grid small { color: var(--muted); }
.money-total { overflow: hidden; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--green-dark); border-radius: 10px; }
.money-total__label { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.money-total__amount { margin: 4px 0 0; color: var(--text); font-size: clamp(32px, 9vw, 48px); font-weight: 900; letter-spacing: -.04em; line-height: 1.2; }
.money-total__formula { margin: 7px 0 18px; color: var(--muted); font-size: 12px; }
.money-breakdown { margin: 0; border-top: 1px solid var(--line); }
.money-breakdown div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.money-breakdown dt { color: var(--text); font-size: 13px; font-weight: 800; }
.money-breakdown dt small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
.money-breakdown dd { margin: 0; color: var(--text); font-size: 17px; font-weight: 900; white-space: nowrap; }
.money-total__sources { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; font-size: 12px; font-weight: 800; }
.money-section .metric-caution { margin-top: 14px; }

.timeline { position: relative; margin-left: 5px; padding-left: 18px; border-left: 2px solid var(--green-soft); }
.timeline article { position: relative; margin-bottom: 18px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.timeline article::before { position: absolute; top: 23px; left: -25px; width: 11px; height: 11px; background: var(--green); border: 3px solid var(--paper); border-radius: 50%; content: ""; }
.timeline time { color: var(--muted); font-size: 12px; }
.timeline h3 { margin: 4px 0; font-size: 18px; }

.scroll-hint { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.table-scroll { max-width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th, .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.data-table thead th { color: white; background: var(--ink); font-size: 12px; }
.position { padding: 4px 9px; border-radius: 999px; background: var(--chip-bg); font-size: 12px; font-weight: 800; }
.position--for { color: var(--green-dark); background: var(--green-soft); }
.position--against { color: #7d1f1f; background: #fae3e3; }
.position--absent { color: #755d10; background: #fff3c4; }
.position--excluded { color: #4a4a4a; background: #ececec; }
.position--abstain { color: #4a4a4a; background: #ececec; }
.position--chair { color: #6b6b6b; background: #f2f2f2; }

/* The main comparison becomes readable cards instead of a wide table. */
.table-scroll--comparison { overflow: visible; background: transparent; border: 0; }
.comparison-table, .comparison-table tbody { display: block; white-space: normal; }
.comparison-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.comparison-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin-bottom: 12px; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.comparison-table th, .comparison-table td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.comparison-table tbody th { grid-column: 1 / -1; font-size: 19px; }
.comparison-table td { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.comparison-table td::before { color: var(--muted); font-size: 12px; content: attr(data-label); }

.source-list { display: grid; gap: 8px; }
.source-item { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.source-item__link { display: grid; grid-template-columns: 46px minmax(0, 1fr) 14px; align-items: center; gap: 10px; min-height: 92px; padding: 11px 12px; color: var(--text); text-decoration: none; }
.source-item__link:hover { color: var(--text); background: var(--surface-hover); }
.source-item__type { display: grid; width: 46px; height: 46px; place-items: center; color: var(--green-dark); background: var(--green-soft); border-radius: 50%; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.source-item__body { min-width: 0; }
.source-item__body strong, .source-item__body small, .source-item__body em { display: block; }
.source-item__body strong { font-size: 15px; line-height: 1.35; }
.source-item__body small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.source-item__body em { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.source-item__link > b { color: var(--muted); font-size: 22px; font-weight: 400; }
.source-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.source-facts div { min-width: 0; padding: 13px; border: 1px solid var(--line); }
.source-facts dt { color: var(--muted); font-size: 12px; }
.source-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 700; }

.article-single, .page-single, .source-single { max-width: 760px; margin-inline: auto; }
.article-single__header h1 { margin: 8px 0 11px; font-family: var(--serif); font-size: 29px; line-height: 1.27; letter-spacing: -.035em; overflow-wrap: anywhere; }
.article-single__meta { color: var(--muted); font-size: 12px; }
.article-single__hero { width: calc(100% + 28px); margin: 24px 0 20px -14px; }
.article-single__hero-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-soft); }
.article-single__hero-image img { width: 100%; height: 100%; object-fit: cover; }
.article-image-note { margin: 7px 14px 0; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: right; }
.article-image-note a { color: inherit; }
.article-brief { margin: 0 0 24px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.article-brief strong { color: var(--green-dark); font-size: 13px; }
.article-brief p { margin: 5px 0 0; font-size: 15px; line-height: 1.75; }
.article-process { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0 0 28px; padding: 0; list-style: none; }
.article-process li { display: flex; min-height: 44px; align-items: center; gap: 7px; padding: 8px 10px; background: var(--green-soft); border-radius: 8px; color: var(--green-dark); font-size: 12px; font-weight: 800; }
.article-process span { display: grid; width: 21px; height: 21px; flex: 0 0 auto; place-items: center; color: white; background: var(--green-dark); border-radius: 50%; font-size: 12px; }
.entry-content { font-size: 17px; line-height: 1.9; }
.entry-content h2 { margin-top: 2em; font-family: var(--serif); font-size: 26px; line-height: 1.4; }
.entry-content h3 { margin-top: 1.7em; font-size: 20px; }
.entry-content p, .entry-content ul, .entry-content ol { max-width: 760px; }
.entry-content li + li { margin-top: .55em; }
.entry-content a { overflow-wrap: anywhere; }
.entry-content blockquote { margin: 1.7em 0; padding: 16px 18px; background: var(--surface); border-left: 4px solid var(--green); }
.fact-timeline { margin: 1.2em 0; padding: 0; list-style: none; counter-reset: facts; }
.fact-timeline li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); counter-increment: facts; }
.fact-timeline li:first-child { border-top: 1px solid var(--line); }
.fact-timeline strong { color: var(--green-dark); font-size: 13px; }
.fact-timeline span { min-width: 0; }
.profile-source-note { color: var(--muted); font-size: 12px; }
.article-sources { margin-top: 38px; font-size: 14px; }
.article-sources p { margin-bottom: 0; }
.article-dialogue { margin-top: 26px; padding: 22px 18px; background: var(--green-soft); border-radius: var(--radius); }
.article-dialogue h2 { margin: 0; font-family: var(--serif); font-size: 27px; line-height: 1.4; }
.article-dialogue p:not(.eyebrow) { margin: 10px 0 0; }
.article-dialogue__actions { display: grid; gap: 9px; margin-top: 18px; }
.empty-state { padding: 24px 18px; background: rgba(255,255,255,.65); border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); text-align: center; }
.pagination { margin-top: 30px; }
.pagination .nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pagination .page-numbers { display: grid; min-width: 42px; min-height: 42px; place-items: center; padding: 5px 10px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 800; text-decoration: none; }
.pagination .page-numbers.current { color: white; background: var(--green-dark); border-color: var(--green-dark); }

.dashboard-group__heading { display: flex; align-items: flex-start; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.dashboard-group__heading h2 { margin: 0; font-size: 26px; line-height: 1.25; }
.dashboard-group__heading > p { margin: 0; color: var(--muted); font-size: 12px; }
.dashboard-mayor-card { display: grid; gap: 14px; padding: 17px; color: white; background: var(--ink); border-radius: 12px; }
.dashboard-mayor-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
.dashboard-mayor-card > div strong { font-size: 23px; }
.dashboard-mayor-card > div strong a { color: white; }
.dashboard-mayor-card > div span { color: #b9b9b9; font-size: 12px; }
.dashboard-mayor-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; }
.dashboard-mayor-card dl div { padding: 9px; background: #323232; }
.dashboard-mayor-card dt { color: #b9b9b9; font-size: 12px; }
.dashboard-mayor-card dd { margin: 2px 0 0; font-size: 12px; font-weight: 800; }
.dashboard-mayor-card .button { min-height: 42px; width: 100%; color: var(--ink); background: #fff; border-color: #fff; font-size: 12px; }

.site-footer { padding-top: 42px; color: #dcdcdc; background: #1a1a1a; }
.site-footer__grid { display: grid; gap: 28px; }
.site-footer__brand { margin: 0; color: white; font-family: var(--serif); font-size: 29px; font-weight: 800; }
.site-footer__notice { color: #acacac; font-size: 12px; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: inline-flex; min-height: 44px; align-items: center; color: white; }
.site-footer__bottom { margin-top: 30px; padding-block: 17px; border-top: 1px solid rgba(255,255,255,.12); }

@media (min-width: 721px) {
	.archive-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.archive-filters__heading { grid-column: 1 / -1; }
	.archive-filter { min-height: 148px; padding: 18px 17px 14px; }
	.archive-filter__title { font-size: 21px; }
	.archive-filter__description { font-size: 12px; }
	.archive-filter__meta b { font-size: 12px; }
  body { padding-bottom: 0; }
  .container { width: min(calc(100% - 40px), var(--container)); }
  .section-space { padding-block: clamp(48px, 6vw, 76px); }
  .section-space--small { margin-top: clamp(48px, 6vw, 72px); }
  .site-header__top { min-height: 86px; align-items: center; justify-content: space-between; flex-direction: row; gap: 28px; padding-block: 0; }
  .brand__name { font-size: clamp(32px, 3vw, 38px); }
  .brand__tagline { font-size: 13px; letter-spacing: .04em; }
  .site-header__tools { width: auto; justify-content: flex-end; }
  .site-header__search { flex-basis: 240px; }
  .independent-label { max-width: 290px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; text-align: center; }
  .site-nav { position: static; padding-bottom: 0; box-shadow: none; }
  .site-nav .container { width: min(calc(100% - 40px), var(--container)); }
  .site-nav__list { display: flex; min-width: max-content; }
  .site-nav__list a { display: block; min-height: 0; padding: 11px 18px; font-size: 14px; }
  .site-nav__list--english a { font-size: 13px; }
  .hero__inner { padding-block: 60px; }
  .hero h1 { font-size: clamp(48px, 6vw, 66px); }
  .hero__lead { margin-top: 22px; font-size: 19px; }
	.hero-author { grid-template-columns: 68px minmax(0, 1fr); width: 430px; margin-top: 22px; padding: 9px; }
	.hero-author img { width: 68px; height: 68px; }
	.hero-author strong { font-size: 16px; }
	.hero-author small { font-size: 12px; }
	.author-profile { grid-template-columns: minmax(220px, 310px) minmax(0, 1fr); align-items: stretch; }
	.author-profile > img { height: 100%; max-height: none; }
	.author-profile figcaption { display: flex; justify-content: center; flex-direction: column; padding: 30px; }
  .section-heading { align-items: end; justify-content: space-between; flex-direction: row; gap: 24px; margin-bottom: 30px; }
  .section-heading h2 { font-size: clamp(32px, 3.5vw, 42px); }
  .archive-heading { margin-bottom: 42px; }
  .archive-heading h1, .page-single__header h1, .error-page h1 { font-size: clamp(44px, 5vw, 60px); }
  .archive-heading > p:not(.eyebrow) { font-size: 18px; }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .article-card, .article-grid--featured-first .article-card:first-child { display: block; min-height: 0; }
  .article-card__media, .article-grid--featured-first .article-card:first-child .article-card__media { aspect-ratio: 16 / 9; min-height: 0; }
  .article-card__media img { transition: transform 250ms ease; }
  .article-card__body, .article-grid--featured-first .article-card:first-child .article-card__body { padding: 21px; }
  .article-card__title, .article-grid--featured-first .article-card:first-child .article-card__title { font-size: 20px; }
  .article-card__body .eyebrow { font-size: 12px; }
  .article-card__meta { margin: 9px 0; font-size: 13px; }
  .article-card__body > p { display: block; margin-bottom: 0; color: var(--muted); font-size: 14px; }
	.article-card__body > p.article-card__topics { margin-top: 10px; font-size: 12px; }
  .article-card__read { margin-top: 10px; font-size: 12px; }
	.person-directory-guide { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); gap: 0 42px; margin-top: -8px; padding-top: 2px; }
	.person-directory-guide__intro { padding: 25px 0 22px; }
	.person-directory-guide__intro h2 { font-size: 30px; }
	.person-directory-guide__intro > p:last-child { font-size: 14px; }
	.person-directory-guide__rows { border-top: 0; }
	.person-directory-guide__rows div { grid-template-columns: 100px minmax(0, 1fr); padding: 15px 0; }
	.person-directory-guide__rows dt { font-size: 12px; }
	.person-directory-guide__rows dd { font-size: 13px; }
	.person-directory-guide__links,
	.person-directory-guide__note { grid-column: 1 / -1; }
	.person-directory-guide__links { border-top: 1px solid var(--line); }
  .person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .person-grid--mayor { grid-template-columns: minmax(260px, 380px); }
  .person-card { display: grid; grid-template-columns: 1fr; grid-template-rows: 190px auto; min-height: 0; }
  .person-card__body { padding: 19px; }
  .person-card__body .eyebrow { font-size: 12px; }
  .person-card h2 { font-size: 24px; }
  .person-card__kana { font-size: 12px; }
  .person-card__affiliation { margin: 2px 0 14px; font-size: 13px; }
  .person-card__facts div { padding: 8px; }
  .person-card__facts dt { font-size: 12px; }
  .person-card__facts dd { font-size: 12px; }
  .person-card__mayor-note { padding-top: 12px; font-size: 12px; }
  .person-card__activity { padding-top: 12px; }
  .person-card__activity > strong { font-size: 12px; }
  .person-card__activity p { font-size: 12px; }
  .person-card__credit { display: block; margin: 14px 0 0; color: var(--muted); font-size: 12px; }
  .person-card__detail { min-height: 44px; font-size: 12px; }
  .source-promo { align-items: center; justify-content: space-between; flex-direction: row; gap: 40px; padding: 38px clamp(28px, 5vw, 52px); }
  .source-promo h2 { font-size: clamp(32px, 3vw, 40px); }
  .issues-section__intro { margin-top: -14px; font-size: 17px; }
	.report-spotlight { margin-top: 24px; }
	.report-spotlight__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .85fr); align-items: stretch; }
	.report-spotlight__intro { padding: 28px 32px; }
	.report-spotlight__intro h2 { font-size: 34px; }
	.report-spotlight__intro p { font-size: 14px; }
	.report-spotlight__numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; border-top: 0; border-left: 1px solid rgba(255,255,255,.16); }
	.report-spotlight__numbers div { display: flex; justify-content: center; flex-direction: column; padding: 18px 14px; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 0; }
	.report-spotlight__numbers div:last-child { border-right: 0; }
	.report-spotlight__numbers dt { font-size: 12px; }
	.report-spotlight__numbers dd > strong { font-size: 27px; }
	.report-hero__inner { grid-template-columns: minmax(0, 1fr) 250px; align-items: end; gap: 45px; padding-block: 62px; }
	.report-hero__number { padding: 23px; }
	.report-hero__number strong { font-size: 72px; }
	.report-toc a { min-height: 52px; padding-inline: 20px; font-size: 12px; }
	.report-section { padding-block: 66px; scroll-margin-top: 58px; }
	.report-intent__grid { grid-template-columns: minmax(0, 1.6fr) minmax(250px, .8fr); gap: 45px; }
	.report-prose p { font-size: 17px; }
	.election-visuals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.election-card { grid-template-columns: 120px minmax(0, 1fr); align-items: center; padding: 22px; }
	.election-card--council { grid-template-columns: 180px minmax(0, 1fr); }
	.data-figure { padding: 25px; }
	.line-chart { min-width: 0; }
	.report-callout { padding: 21px 24px; }
	.report-callout ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 30px; }
	.stacked-chart__row { grid-template-columns: 55px minmax(0, 1fr) 190px; }
	.stacked-chart__row > strong { grid-row: auto; }
	.stacked-chart--compare .stacked-chart__row { grid-template-columns: 80px minmax(0, 1fr) 230px; }
	.report-callout--counter ul { grid-template-columns: minmax(0, 1fr); font-size: 12px; }
	.assumption-chart__row { grid-template-columns: 150px minmax(0, 1fr) 42px; }
	.assumption-chart__label strong { font-size: 12px; }
	.assumption-chart__label small { font-size: 12px; }
	.priority-chart__row strong { font-size: 12px; }
	.report-timeline li { grid-template-columns: 95px minmax(0, 1fr); gap: 25px; }
	.report-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.report-ledger article { padding: 21px; }
	.finance-bars > div { grid-template-columns: 100px minmax(0, 1fr) 100px; }
	.election-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.election-questions li { padding: 20px; }
	.mayor-report-promo { align-items: center; justify-content: space-between; flex-direction: row; padding: 21px 24px; }
  .person-hero__grid { grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: clamp(38px, 7vw, 80px); min-height: 440px; padding-block: 58px; }
  .person-hero__photo { width: 240px; }
  .person-hero h1 { font-size: clamp(56px, 7vw, 84px); }
  .profile-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-facts div { padding: 14px 18px; }
	.profile-facts div:last-child:nth-child(odd) { grid-column: auto; }
	.profile-facts div:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
	.profile-facts div:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .profile-facts dt { font-size: 12px; }
  .profile-facts dd { font-size: 16px; }
	.activity-facts { padding: clamp(28px, 4vw, 42px); }
	.activity-fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.activity-fact { min-height: 150px; padding: 19px; }
  .money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .money-grid > div { min-height: 140px; justify-content: space-between; padding: 22px; }
  .money-grid strong { font-size: 28px; }
  .scroll-hint { display: none; }
  .table-scroll--comparison { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); }
  .comparison-table { display: table; white-space: nowrap; }
  .comparison-table thead { position: static; display: table-header-group; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
  .comparison-table tbody { display: table-row-group; }
  .comparison-table tr { display: table-row; margin: 0; padding: 0; background: transparent; border: 0; }
  .comparison-table th, .comparison-table td { display: table-cell; padding: 15px 18px; border-bottom: 1px solid var(--line); }
  .comparison-table td::before { content: none; }
	.source-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.source-item__link { grid-template-columns: 58px minmax(0, 1fr) 18px; min-height: 126px; padding: 17px; }
	.source-item__type { width: 58px; height: 58px; font-size: 12px; }
	.source-item__body strong { font-size: 18px; }
	.source-item__body small { font-size: 12px; }
	.source-item__body em { font-size: 12px; }
	.dashboard-group__heading { align-items: end; justify-content: space-between; flex-direction: row; }
	.dashboard-group__heading h2 { font-size: 34px; }
	.dashboard-group__heading > p { max-width: 560px; font-size: 13px; text-align: right; }
	.dashboard-mayor-card { grid-template-columns: minmax(160px, .55fr) minmax(360px, 1.4fr) auto; align-items: center; padding: 22px; }
	.dashboard-mayor-card .button { width: auto; }
  .source-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-facts div { padding: 18px; }
  .article-single__header h1 { font-size: clamp(46px, 6vw, 68px); }
  .article-single__meta { font-size: 13px; }
  .article-single__hero { width: auto; margin: 36px 0 28px; }
  .article-single__hero-image { border-radius: var(--radius); }
  .article-image-note { margin-inline: 2px; font-size: 12px; }
  .article-brief { padding: 20px 22px; }
  .article-process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .entry-content h2 { font-size: 1.8em; }
  .article-dialogue { padding: 32px; }
  .article-dialogue__actions { display: flex; flex-wrap: wrap; }
  .site-footer { padding-top: 58px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 50px; }
}

@media (min-width: 521px) and (max-width: 720px) {
  .archive-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-filters__heading { grid-column: 1 / -1; }
}

@media (min-width: 981px) {
	.hero__inner { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr); align-items: center; gap: clamp(50px, 7vw, 100px); padding-block: 72px; }
	.hero-author { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 0; width: 100%; margin: 0; overflow: hidden; padding: 0; color: white; background: var(--ink); border: 0; border-radius: 14px; box-shadow: var(--shadow); }
	.hero-author:hover { color: white; border-color: transparent; }
	.hero-author img { width: 100%; height: 270px; object-position: center 30%; border-radius: 0; }
	.hero-author span { padding: 17px 19px 19px; }
	.hero-author strong { font-size: 20px; }
	.hero-author small { margin-top: 2px; color: #8fe0c4; font-size: 12px; }
	.hero-author em { margin-top: 5px; color: #b8b8b8; font-size: 12px; }
  .person-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .person-grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .person-grid--mayor { grid-template-columns: minmax(260px, 380px); }
  .issues-section .article-grid,
  .home-picks .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .person-hero__grid { grid-template-columns: 280px minmax(0, 1fr); }
  .person-hero__photo { width: 280px; }
  .money-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .source-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.report-hero h1 { font-size: 62px; }
	.report-section__heading h2 { font-size: 46px; }
	.report-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (hover: hover) {
  .article-card:hover { border-color: var(--line-strong); }
  .article-card:hover .article-card__media img { transform: scale(1.025); }
  .data-table tbody tr:hover { background: var(--surface-hover); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Phase 1: news-first home. */
.home-news { padding-block: 26px 32px; background: var(--surface); border-bottom: 1px solid var(--line); }
.home-news__header { margin-bottom: 19px; }
.home-news__header h2 { margin: 0; font-size: clamp(36px, 10vw, 47px); line-height: 1.1; letter-spacing: -.055em; }
.home-news__header > p { max-width: 700px; margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.home-news__all { display: inline-flex; min-height: 44px; align-items: center; margin-top: 10px; font-size: 12px; font-weight: 900; }
.home-news__featured-label { grid-column: 1 / -1; margin: 0 -0px -5px; color: var(--green-dark); font-size: 12px; font-weight: 900; }

.home-popular { padding-block: 24px 28px; background: var(--tint-page); border-bottom: 1px solid var(--line); }
.home-popular__header { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 11px; padding-bottom: 9px; border-bottom: 3px solid var(--text); }
.home-popular__header h2 { margin: 0; font-size: 21px; line-height: 1.3; letter-spacing: -.025em; }
.home-popular__header p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.home-popular__list { margin: 0; padding: 0; background: var(--surface); border-bottom: 1px solid var(--line); list-style: none; }
.home-popular__list li { border-top: 1px solid var(--line); }
.home-popular__list li:first-child { border-top: 0; }
.home-popular__list a { display: grid; grid-template-columns: 27px 92px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 82px; padding: 10px 8px; color: var(--text); text-decoration: none; }
.home-popular__list a:hover .home-popular__body strong { color: var(--news-blue); text-decoration: underline; text-underline-offset: 3px; }
.home-popular__rank { align-self: start; padding-top: 3px; color: var(--muted); font-size: 19px; font-weight: 900; line-height: 1; text-align: center; }
.home-popular__list li:first-child .home-popular__rank { color: var(--news-red); }
.home-popular__note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

/* 編集部が選ぶ枠。読まれた順の一覧と役割が違うことが分かるよう、見出しを立てる。 */
.home-picks { padding-top: 8px; }
.home-picks .eyebrow { color: var(--news-blue-dark); }
.home-popular__media { display: block; overflow: hidden; background: var(--photo-fallback); aspect-ratio: 16 / 9; }
.home-popular__media img { width: 100%; height: 100%; object-fit: cover; }
.home-popular__body { min-width: 0; }
.home-popular__body small { display: block; margin-bottom: 3px; color: var(--news-blue); font-size: 12px; font-weight: 800; }
.home-popular__body strong { display: -webkit-box; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 750; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.home-popular__note { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; text-align: right; }

.reporter-note { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 11px; margin-block: 14px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.reporter-note > img { width: 58px; height: 68px; object-fit: cover; object-position: 57% 30%; border-radius: 8px; }
.reporter-note .eyebrow { margin-bottom: 2px; font-size: 12px; }
.reporter-note h2 { margin: 0; font-size: 14px; line-height: 1.4; }
.reporter-note p:not(.eyebrow) { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.reporter-note small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.reporter-note > a { display: inline-flex; min-height: 38px; grid-column: 2; align-items: center; font-size: 12px; font-weight: 900; }

.civic-entry { background: var(--tint-civic); border-block: 1px solid var(--line); }
.civic-entry__grid { display: grid; gap: 10px; }
.civic-entry__mayor, .civic-entry__council { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: stretch; min-height: 116px; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.civic-entry__mayor:hover, .civic-entry__council:hover { color: var(--text); border-color: var(--line-strong); }
.civic-entry__mayor > img { width: 92px; height: 100%; object-fit: cover; object-position: center top; background: var(--photo-fallback); }
.civic-entry__mayor > span, .civic-entry__council > span:last-child { display: flex; justify-content: center; flex-direction: column; min-width: 0; padding: 12px; }
.civic-entry__grid small, .civic-entry__grid strong, .civic-entry__grid em { display: block; }
.civic-entry__grid small { color: var(--green-dark); font-size: 12px; font-weight: 800; }
.civic-entry__grid strong { margin-top: 2px; font-size: 19px; line-height: 1.25; }
.civic-entry__grid em { margin-top: 5px; color: var(--muted); font-size: 12px; font-style: normal; }
.civic-entry__council { grid-template-columns: 112px minmax(0, 1fr); }
.council-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 7px; background: var(--paper); }
.council-faces img { width: 100%; height: 49px; object-fit: cover; object-position: center top; border-radius: 5px; background: var(--photo-fallback); }

@media (min-width: 721px) {
	.home-popular { padding-block: 28px 33px; }
	.home-popular__header h2 { font-size: 24px; }
	.home-popular__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
	.home-popular__list li,
	.home-popular__list li:first-child { min-width: 0; border-top: 0; border-right: 1px solid var(--line); }
	.home-popular__list li:last-child { border-right: 0; }
	.home-popular__list a { display: block; min-height: 238px; padding: 12px; }
	.home-popular__rank { display: block; margin-bottom: 7px; padding: 0; text-align: left; }
	.home-popular__media { margin-bottom: 10px; }
	.home-popular__body strong { font-size: 12px; line-height: 1.55; }
	.home-news { padding-block: 48px 58px; }
	.home-news__header { display: grid; grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr); align-items: end; gap: 55px; margin-bottom: 30px; }
	.home-news__header h2 { font-size: clamp(50px, 6vw, 68px); }
	.home-hero__inner { padding-block: 62px 54px; }
	.home-hero h1 { font-size: clamp(52px, 6vw, 70px); }
	.home-hero > .container > p:not(.eyebrow) { font-size: 18px; }
	.tomiya-search--home { max-width: 720px; margin-top: 24px; padding: 12px; }
	.home-hero__popular { margin-top: 15px; font-size: 12px; }
	.home-news__header > p { margin: 0 0 4px; font-size: 17px; }
	.home-news__grid .article-card:first-child { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
	.home-news__grid .article-card:first-child .article-card__media { min-height: 310px; aspect-ratio: auto; }
	.home-news__grid .article-card:first-child .article-card__body { display: flex; justify-content: center; flex-direction: column; }
	.home-news__grid .article-card:first-child .article-card__title { font-size: clamp(24px, 3vw, 34px); }
	.home-news__all { margin-top: 17px; font-size: 14px; }
	.reporter-note { grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-block: 22px; padding: 14px; }
	.reporter-note > img { width: 78px; height: 78px; }
	.reporter-note .eyebrow { font-size: 12px; }
	.reporter-note h2 { font-size: 18px; }
	.reporter-note p:not(.eyebrow) { font-size: 12px; }
	.reporter-note > a { min-height: 44px; grid-column: auto; padding-inline: 10px; font-size: 12px; }
	.civic-entry__grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 18px; }
	.civic-entry__mayor, .civic-entry__council { min-height: 180px; }
	.civic-entry__mayor { grid-template-columns: 145px minmax(0, 1fr); }
	.civic-entry__mayor > img { width: 145px; }
	.civic-entry__council { grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr); }
	.council-faces { gap: 4px; padding: 10px; }
	.council-faces img { height: 78px; }
	.civic-entry__mayor > span, .civic-entry__council > span:last-child { padding: 20px; }
	.civic-entry__grid small { font-size: 12px; }
	.civic-entry__grid strong { font-size: 26px; }
	.civic-entry__grid em { font-size: 12px; }
}

@media (min-width: 981px) {
	.home-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-news__grid .article-card:first-child .article-card__media { min-height: 360px; }
}

/* Phase 2: search and topic-centered information architecture. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.screen-reader-text:focus { top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; margin: 0; padding: 10px 14px; color: white; background: var(--ink); clip: auto; clip-path: none; white-space: normal; }

.home-search { margin-bottom: 27px; padding: 17px; color: white; background: var(--ink); border-radius: var(--radius); }
.home-search .eyebrow { margin-bottom: 2px; color: #8fe0c4; font-size: 12px; }
.home-search h2 { margin: 0 0 11px; color: white; font-size: 22px; line-height: 1.25; }
.tomiya-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.tomiya-search input { width: 100%; min-width: 0; min-height: 48px; padding: 9px 13px; color: var(--text); background: var(--surface); border: 2px solid transparent; border-radius: 9px; font-size: 13px; }
.tomiya-search button { min-height: 48px; padding: 8px 15px; color: var(--ink); background: var(--green-bright); border: 0; border-radius: 9px; font-size: 13px; font-weight: 900; cursor: pointer; }
.tomiya-search button:hover { background: #fff; }
.home-search__popular { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 11px; margin-top: 11px; color: #b8b8b8; font-size: 12px; }
.home-search__popular a { color: white; font-weight: 800; }
.home-today-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.home-today-heading .eyebrow { margin-bottom: 1px; }
.home-today-heading h2 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.04em; }
.home-today-heading h3 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.04em; }
.home-today-heading > p { max-width: 170px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: right; }

.home-topics { padding-bottom: 16px; }
.topic-card-grid { display: grid; gap: 9px; }
.topic-card { display: flex; min-width: 0; min-height: 146px; justify-content: center; flex-direction: column; padding: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.topic-card:hover { color: var(--text); border-color: var(--line-strong); }
.topic-card > span { color: var(--green); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.topic-card > strong { margin-top: 2px; font-size: 22px; line-height: 1.25; }
.topic-card > p { display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.topic-card > small { margin-top: 7px; color: var(--muted); font-size: 12px; }
.topic-card > em { margin-top: 8px; color: var(--green-dark); font-size: 12px; font-style: normal; font-weight: 900; }
.topic-card-grid--compact .topic-card { min-height: 130px; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* 指で押せる高さ（24px）を確保する。文字は小さいままでよい。 */
.breadcrumbs a { display: inline-block; padding-block: 4px; }
.breadcrumbs span[aria-current="page"] { max-width: min(32em, 100%); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumbs--on-dark { position: relative; z-index: 1; margin-bottom: -1px; padding-top: 13px; color: #cccccc; }
.breadcrumbs--on-dark a { color: white; }
.article-key-points, .article-status, .article-relations { margin-top: 30px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.article-key-points h2, .article-status h2, .article-relations h2 { margin: 0; font-size: 23px; line-height: 1.3; }
.article-key-points ol { margin: 13px 0 0; padding-left: 1.4em; }
.article-key-points li + li { margin-top: 8px; }
.article-status { background: var(--tint); border-color: var(--line); }
.article-status p { margin: 6px 0 0; font-size: 14px; }
.article-relations { background: var(--tint-page); }
.article-relations__grid { display: grid; gap: 10px; margin-top: 14px; }
.article-relations__grid section { padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.article-relations__grid h3 { margin: 0 0 7px; font-size: 13px; }
.article-relations__grid a { display: block; padding: 3px 0; font-size: 13px; font-weight: 700; }

.topic-page { background: var(--tint-page); }
.topic-hero { color: white; background: var(--ink); }
.topic-hero__inner { padding-block: 34px; }
.topic-hero .eyebrow { color: #8fe0c4; }
/* Japanese line breaking refuses to split before 「ー」 or 「、」, so a headline such
   as 「そのロープウェー、」 is one unbreakable run and pushed the document wider than a
   390px phone, which made the whole page scroll sideways. Allow the break and let
   the size fall further on the narrowest screens. */
.topic-hero h1 { max-width: 820px; margin: 0; overflow-wrap: anywhere; color: white; font-size: clamp(30px, 9vw, 52px); line-height: 1.12; letter-spacing: -.055em; }
.topic-hero__description { max-width: 760px; margin: 13px 0 0; color: #dcdcdc; font-size: 14px; line-height: 1.7; }
.topic-hero__meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 17px; color: #b8b8b8; font-size: 12px; }
.topic-hero__meta span:not(:last-child)::after { margin-left: 12px; color: #6a6a6a; content: "/"; }
.topic-toc { position: sticky; top: 0; z-index: 8; overflow-x: auto; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.topic-toc::-webkit-scrollbar { display: none; }
.topic-toc .container { display: flex; width: max-content; min-width: 100%; }
.topic-toc a { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; padding: 0 12px; color: var(--text); border-right: 1px solid var(--line); font-size: 12px; font-weight: 900; text-decoration: none; }
.topic-section { padding-block: 38px; scroll-margin-top: 48px; }
.topic-section--tint { background: var(--tint); border-block: 1px solid var(--line); }
.topic-section--civic { background: var(--tint-civic); border-block: 1px solid var(--line); }
.topic-section--analysis { background: var(--tint-analysis); border-block: 1px solid var(--line); }
.topic-section__heading { max-width: 800px; margin-bottom: 18px; }
.topic-section__heading h2 { margin: 0; font-size: 28px; line-height: 1.25; letter-spacing: -.04em; }
.topic-section__heading > p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.topic-current__lead { max-width: 850px; margin: 0 0 20px; color: var(--ink-soft); font-size: 18px; font-weight: 700; line-height: 1.75; }
.topic-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.topic-fact { min-width: 0; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.topic-fact > span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.topic-fact > strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 20px; line-height: 1.25; }
.topic-fact > p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.topic-fact > a { display: inline-flex; min-height: 36px; align-items: center; margin-top: 5px; font-size: 12px; font-weight: 900; }
.topic-timeline { margin: 0; padding: 0; list-style: none; }
.topic-timeline li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.topic-timeline time { color: var(--green-dark); font-size: 12px; font-weight: 900; }
.topic-timeline h3 { margin: 0; font-size: 16px; line-height: 1.4; }
.topic-timeline p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.topic-timeline a { display: inline-flex; min-height: 36px; align-items: center; font-size: 12px; font-weight: 900; }
.topic-data-bars { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.topic-data-bars li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.topic-data-bars__label { display: flex; align-items: flex-start; flex-direction: column; grid-row: 1 / 3; }
.topic-data-bars__label strong { font-size: 13px; }
.topic-data-bars__label span { display: inline-flex; margin-top: 3px; padding: 1px 6px; color: var(--green-dark); background: var(--green-soft); border-radius: 999px; font-size: 12px; font-weight: 900; }
.topic-data-bars .is-projection .topic-data-bars__label span { color: #5f5535; background: #f4e9c6; }
.topic-data-bars__track { height: 15px; overflow: hidden; background: var(--track); border-radius: 4px; }
.topic-data-bars__track span { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.topic-data-bars .is-projection .topic-data-bars__track span { background: repeating-linear-gradient(135deg, #b69a43 0, #b69a43 6px, #d4bd72 6px, #d4bd72 11px); }
/* Second and third projection series: same hues as the report page's line chart. */
.topic-data-bars .is-series-2 .topic-data-bars__label span { color: #17506f; background: #d6e7f2; }
.topic-data-bars .is-series-2 .topic-data-bars__track span { background: repeating-linear-gradient(135deg, #1d6fa5 0, #1d6fa5 6px, #7aabc9 6px, #7aabc9 11px); }
.topic-data-bars .is-series-3 .topic-data-bars__label span { color: #6b3a3a; background: #f2dede; }
.topic-data-bars .is-series-3 .topic-data-bars__track span { background: repeating-linear-gradient(135deg, #a4514f 0, #a4514f 6px, #cc8a88 6px, #cc8a88 11px); }
.topic-data-bars__value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.topic-data-bars__value strong { font-size: 15px; line-height: 1.2; }
.topic-data-bars__value small { color: var(--muted); font-size: 12px; }
.topic-data-bars__value a { margin-left: auto; font-size: 12px; font-weight: 900; }
.topic-data__note { margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.topic-people-grid { display: grid; gap: 8px; }
.topic-person { display: grid; grid-template-columns: 72px minmax(0, 1fr); min-height: 88px; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.topic-person > img { width: 72px; height: 100%; object-fit: cover; object-position: center top; }
.topic-person > span { display: flex; justify-content: center; flex-direction: column; padding: 10px; }
.topic-person small { color: var(--green-dark); font-size: 12px; font-weight: 800; }
.topic-person strong { font-size: 16px; }
.topic-person em { color: var(--muted); font-size: 12px; font-style: normal; }
.topic-question-list { margin-top: 25px; }
.topic-question-list > h3 { margin: 0 0 8px; font-size: 20px; }
.topic-question-list article { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.topic-question-list time { color: var(--muted); font-size: 12px; }
.topic-question-list h4 { margin: 0; font-size: 14px; line-height: 1.45; }
.topic-question-list h4 a { color: var(--text); text-decoration: none; }
.topic-question-list p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.topic-source-list { display: grid; gap: 7px; }
.topic-source-list > a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 72px; padding: 10px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.topic-source-list > a > span { display: grid; width: 44px; height: 44px; place-items: center; color: white; background: var(--ink); border-radius: 50%; font-size: 12px; font-weight: 900; }
.topic-source-list strong { font-size: 13px; line-height: 1.4; }
.topic-source-list em { grid-column: 2; color: var(--green-dark); font-size: 12px; font-style: normal; font-weight: 900; }

.topic-explorer { margin-top: 36px; padding: 18px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); }
.topic-explorer > h2 { margin: 0 0 12px; font-size: 24px; }
.topic-explorer__grid { display: grid; gap: 8px; }
.topic-explorer__card { display: flex; justify-content: center; flex-direction: column; padding: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.topic-explorer__card > span { color: var(--green); font-size: 12px; font-weight: 900; }
.topic-explorer__card > strong { font-size: 21px; }
.topic-explorer__card > p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.topic-explorer__card > small { margin-top: 7px; color: var(--muted); font-size: 12px; }
.topic-explorer__card > em { margin-top: 7px; color: var(--green-dark); font-size: 12px; font-style: normal; font-weight: 900; }

.search-heading { max-width: 850px; margin-bottom: 34px; }
.search-heading h1 { margin: 0 0 17px; font-size: 36px; line-height: 1.15; letter-spacing: -.05em; }
.search-heading > p:not(.eyebrow) { color: var(--muted); }
.tomiya-search--results { padding: 10px; background: var(--ink); border-radius: 11px; }
.search-topics { margin-bottom: 35px; }
.search-results { margin-top: 25px; }
.search-result-group + .search-result-group { margin-top: 28px; }
.search-result-group > h3 { margin: -5px 0 10px; font-size: 22px; }
.search-result-list { display: grid; gap: 8px; }
.search-result-item { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.search-result-item:has(.search-result-item__image) { grid-template-columns: 84px minmax(0, 1fr); }
.search-result-item__image { overflow: hidden; }
.search-result-item__image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.search-result-item > div { min-width: 0; padding: 12px; }
.search-result-item .eyebrow { margin-bottom: 2px; font-size: 12px; }
.search-result-item h2 { margin: 0; font-size: 16px; line-height: 1.4; }
.search-result-item h2 a { color: var(--text); text-decoration: none; }
.search-result-item p:not(.eyebrow) { display: none; }
.search-result-item__link { display: inline-flex; min-height: 32px; align-items: center; margin-top: 3px; font-size: 12px; font-weight: 900; }

@media (min-width: 721px) {
	.home-search { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 10px 25px; padding: 22px; }
	.home-search h2 { margin-bottom: 0; font-size: 27px; }
	.tomiya-search input { font-size: 15px; }
	.home-search__popular { grid-column: 2; margin-top: 0; font-size: 12px; }
	.home-today-heading { margin: 38px 0 19px; }
	.home-today-heading h2 { font-size: 38px; }
	.home-today-heading h3 { font-size: 38px; }
	.home-today-heading > p { max-width: none; font-size: 12px; }
	.home-topics { padding-bottom: 30px; }
	.topic-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.topic-card { min-height: 190px; padding: 21px; }
	.topic-card > strong { font-size: 27px; }
	.topic-card > p { font-size: 12px; }
	.article-relations__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.topic-hero__inner { padding-block: 60px; }
	.topic-hero h1 { font-size: 62px; }
	.topic-hero__description { font-size: 17px; }
	.topic-hero__meta { font-size: 12px; }
	.topic-toc a { min-height: 50px; padding-inline: 18px; font-size: 12px; }
	.topic-section { padding-block: 62px; scroll-margin-top: 54px; }
	.topic-section__heading { margin-bottom: 28px; }
	.topic-section__heading h2 { font-size: 40px; }
	.topic-section__heading > p:not(.eyebrow) { font-size: 14px; }
	.topic-current__lead { font-size: 22px; }
	.topic-fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
	.topic-fact { padding: 20px; }
	.topic-fact > span { font-size: 12px; }
	.topic-fact > strong { font-size: 27px; }
	.topic-fact > p { font-size: 12px; }
	.topic-timeline li { grid-template-columns: 130px minmax(0, 1fr); gap: 28px; padding: 20px 0; }
	.topic-timeline time { font-size: 13px; }
	.topic-timeline h3 { font-size: 19px; }
	.topic-timeline p { font-size: 13px; }
	.topic-data-bars { gap: 18px; }
	.topic-data-bars li { grid-template-columns: 90px minmax(0, 1fr) 260px; gap: 14px; }
	.topic-data-bars__label { grid-row: auto; }
	.topic-data-bars__label strong { font-size: 16px; }
	.topic-data-bars__track { height: 20px; }
	.topic-data-bars__value strong { font-size: 18px; }
	.topic-data-bars__value small { font-size: 12px; }
	.topic-data__note { font-size: 12px; }
	.topic-people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.topic-person { grid-template-columns: 92px minmax(0, 1fr); min-height: 115px; }
	.topic-person > img { width: 92px; }
	.topic-person > span { padding: 14px; }
	.topic-person strong { font-size: 18px; }
	.topic-question-list article { grid-template-columns: 130px minmax(0, 1fr); gap: 24px; padding: 16px 0; }
	.topic-question-list time { font-size: 12px; }
	.topic-question-list h4 { font-size: 17px; }
	.topic-question-list p { font-size: 12px; }
	.topic-source-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.topic-source-list > a { min-height: 92px; padding: 15px; }
	.topic-source-list strong { font-size: 15px; }
	.topic-explorer { padding: 26px; }
	.topic-explorer > h2 { font-size: 30px; }
	.topic-explorer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.search-heading h1 { font-size: 56px; }
	.tomiya-search--results { padding: 13px; }
	.search-result-item, .search-result-item:has(.search-result-item__image) { grid-template-columns: 120px minmax(0, 1fr); min-height: 150px; }
	.search-result-item:not(:has(.search-result-item__image)) { grid-template-columns: minmax(0, 1fr); }
	.search-result-item > div { padding: 19px; }
	.search-result-item h2 { font-size: 22px; }
	.search-result-item p:not(.eyebrow) { display: block; margin: 7px 0 0; color: var(--muted); font-size: 12px; }
	.search-result-item__link { min-height: 40px; font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   Phase 4: reading experience, colour scheme control, and legibility floors.
   --------------------------------------------------------------------------- */

/* Translucent bars must follow the scheme instead of assuming a white page. */
.report-toc, .topic-toc { background: var(--surface); background: color-mix(in srgb, var(--surface) 96%, transparent); }
.empty-state { background: var(--surface); background: color-mix(in srgb, var(--surface) 65%, transparent); }

/* Colour scheme toggle ------------------------------------------------------ */
.theme-toggle { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 5px 12px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 800; cursor: pointer; transition: background 180ms var(--ease), border-color 180ms var(--ease); }
.theme-toggle:hover { background: var(--surface-hover); border-color: var(--green); }
.theme-toggle__icon { display: grid; place-items: center; }
.theme-toggle__icon svg { grid-area: 1 / 1; }
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: block; }
}

/* Reading progress ---------------------------------------------------------- */
.reading-progress { position: sticky; top: 0; z-index: 50; height: 3px; background: var(--line); }
.reading-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-bright)); transform: scaleX(0); transform-origin: 0 50%; }

/* Back to top --------------------------------------------------------------- */
.back-to-top { position: fixed; right: 14px; bottom: calc(var(--mobile-nav-height) + 14px + env(safe-area-inset-bottom)); z-index: 90; display: grid; width: 44px; height: 44px; place-items: center; visibility: hidden; opacity: 0; color: white; background: var(--ink); border: 0; border-radius: 50%; box-shadow: var(--shadow-lift); cursor: pointer; transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms; transform: translateY(8px); }
.back-to-top.is-visible { visibility: visible; opacity: .92; transform: none; }
.back-to-top:hover { opacity: 1; background: var(--green-dark); }

/* Article table of contents ------------------------------------------------- */
.article-toc { margin: 0 0 28px; padding: 16px 18px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); }
.article-toc h2 { margin: 0 0 9px; font-size: 14px; font-weight: 900; letter-spacing: .02em; }
.article-toc ol { display: grid; gap: 2px; margin: 0; padding-left: 1.3em; }
.article-toc li { font-size: 14px; line-height: 1.6; }
.article-toc a { display: inline-block; padding: 3px 0; color: var(--text); font-weight: 700; text-decoration-color: var(--line-strong); }
.article-toc a:hover { color: var(--green-dark); }
.article-toc a[aria-current="true"] { color: var(--green-dark); text-decoration-color: currentColor; }

/* Share --------------------------------------------------------------------- */
.article-share { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.article-share__label { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 800; }
.article-share__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.article-share__button { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 8px 14px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease); }
.article-share__button:hover { color: white; background: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.article-share__button--x:hover { background: #000; border-color: #000; }
.article-share__button--line:hover { background: #06c755; border-color: #06c755; }
.article-share__button--facebook:hover { background: #1877f2; border-color: #1877f2; }
.article-share__button.is-copied { color: var(--green-dark); background: var(--green-soft); border-color: var(--green); }
.article-share__button.is-copied:hover { transform: none; }

/* Related posts -------------------------------------------------------------- */
.related-posts { margin-top: 36px; }
.related-posts__heading { margin-bottom: 14px; }
.related-posts__heading h2 { margin: 0; font-size: 24px; line-height: 1.3; letter-spacing: -.03em; }
.source-related-articles .related-posts__heading > p:last-child { max-width: 620px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.related-posts__grid { display: grid; gap: 10px; }
.related-post { display: grid; grid-template-columns: 96px minmax(0, 1fr); overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease); }
.related-post:hover { color: var(--text); border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.related-post__media { overflow: hidden; background: var(--green-soft); }
.related-post__media img { width: 100%; height: 100%; object-fit: cover; }
.related-post__body { display: flex; justify-content: center; flex-direction: column; min-width: 0; padding: 11px 13px; }
.related-post__body small { color: var(--green-dark); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.related-post__body strong { margin-top: 3px; font-size: 15px; line-height: 1.4; }
.related-post__body time { margin-top: 4px; color: var(--muted); font-size: 12px; }
.article-reading-end { width: 1px; height: 1px; pointer-events: none; }

.site-footer__bottom { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
.site-footer__feed { display: inline-block; padding-block: 5px; color: white; font-size: 12px; font-weight: 700; }

/* Mobile navigation icons ---------------------------------------------------- */
@media (max-width: 720px) {
  .site-nav__list a { gap: 3px; grid-auto-rows: min-content; align-content: center; padding: 6px 2px; font-size: 12px; --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5ZM2 12l10 5 10-5-2.4-1.2L12 14.6 4.4 10.8 2 12Zm0 5 10 5 10-5-2.4-1.2L12 19.6 4.4 15.8 2 17Z'/%3E%3C/svg%3E"); }
  .site-nav__list a::before { display: block; width: 19px; height: 19px; margin: 0 auto; background-color: currentColor; content: ""; -webkit-mask: var(--nav-icon) center / contain no-repeat; mask: var(--nav-icon) center / contain no-repeat; }
  .site-nav__list a[href*="/news"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h15v16H4a2 2 0 0 1-2-2V4Zm16 4h4v10a2 2 0 0 1-2 2h-2V8ZM5 7h9v2H5V7Zm0 4h9v2H5v-2Zm0 4h9v2H5v-2Z'/%3E%3C/svg%3E"); }
  .site-nav__list a[href*="/life"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v10h5v-6h4v6h5V11h3L12 3Z'/%3E%3C/svg%3E"); }
  .site-nav__list a[href*="/mayor-report"], .site-nav__list a[href*="/data"], .site-nav__list a[href*="/politics"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h3V10H4v10Zm6.5 0h3V4h-3v16ZM17 20h3v-7h-3v7Z'/%3E%3C/svg%3E"); }
  .site-nav__list a[href*="/people"], .site-nav__list a[href*="/person"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-7 2-7 4.5V21h14v-2.5C16 16 13 14 9 14Zm8.5-2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0 2c-.9 0-1.7.1-2.4.4 1.8 1.1 2.9 2.6 2.9 4.1V21H24v-2.5C24 16 21.3 14 17.5 14Z'/%3E%3C/svg%3E"); }
  .site-nav__list a[href*="/issues"], .site-nav__list a[href*="/category"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2a9 9 0 1 0 5.6 16.1l4.1 4.1 1.4-1.4-4.1-4.1A9 9 0 0 0 11 2Zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14Z'/%3E%3C/svg%3E"); }
  .site-nav__list a[href*="/civic"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h3V10H4v10Zm6.5 0h3V4h-3v16ZM17 20h3v-7h-3v7Z'/%3E%3C/svg%3E"); }
  .site-nav__list a[href*="/know-tomiya"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 4-6-2-7 2.5v17L9 19l6 2 7-2.5v-17L15 4Zm-1 14.6-4-1.33V4.4l4 1.33V18.6Zm-10 .5V5.9l4-1.43v12.87L4 19.1Zm16-2-4 1.43V5.67l4-1.43V17.1Z'/%3E%3C/svg%3E"); }
  .site-nav__list a[href*="/quiz"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a8 8 0 0 0-8 8h3a5 5 0 1 1 6.5 4.77V17h-3v-4.5H12a2.5 2.5 0 1 0-2.5-2.5h-3A5.5 5.5 0 1 1 14 15.12V18h-5v-5.88A5.5 5.5 0 0 1 12 2Zm-1.5 18h3v3h-3v-3Z'/%3E%3C/svg%3E"); }
}

/* Legibility floor: labels below ~10px were unreadable on phones. -------------- */
@media (max-width: 720px) {
  .site-header__search input { font-size: 12.5px; }
  .site-header__search button { font-size: 12px; }
  .independent-label { font-size: 12px; }
  .home-hero__popular { font-size: 12px; }
  .home-today-heading > p { max-width: 190px; font-size: 12px; }
  .article-card__body .eyebrow { font-size: 12px; }
  .article-card__meta, .article-card__body > p.article-card__topics, .article-card__read { font-size: 12px; }
  .person-card__body .eyebrow { font-size: 12px; }
  .person-card__kana { font-size: 12px; }
  .person-card__affiliation { font-size: 12px; }
  .person-card__facts dt { font-size: 12px; }
  .person-card__facts dd { font-size: 12px; }
  .person-card__mayor-note { font-size: 12px; }
  .person-card__activity > strong { font-size: 12px; }
  .person-card__activity p { font-size: 12px; }
  .person-card__detail { min-height: 36px; font-size: 12px; }
  .civic-entry__grid small { font-size: 12px; }
  .civic-entry__grid em { font-size: 12px; }
  .topic-card > span { font-size: 12px; }
  .topic-card > p { font-size: 12px; }
  .topic-card > small { font-size: 12px; }
  .topic-card > em { font-size: 12px; }
  .report-spotlight__numbers dt { font-size: 12px; }
  .report-spotlight__numbers small { font-size: 12px; }
  .report-spotlight__intro p, .report-spotlight__intro > span { font-size: 13px; }
  .report-hero__meta { font-size: 12px; }
  .report-toc a, .topic-toc a { font-size: 12px; }
  .data-figure figcaption { font-size: 12px; }
  .chart-legend { font-size: 12px; }
  .stacked-chart__row small { font-size: 12px; }
  .report-timeline p, .report-ledger p, .election-questions p { font-size: 12px; }
  .report-sources li a { font-size: 12px; }
  .dashboard-mayor-card dt { font-size: 12px; }
  .dashboard-mayor-card dd { font-size: 12px; }
  .source-item__body small { font-size: 12px; }
  .source-item__body em { font-size: 12px; }
  .topic-hero__meta { font-size: 12px; }
  .topic-fact > span { font-size: 12px; }
  .topic-fact > p { font-size: 12px; }
  .topic-fact > a { font-size: 12px; }
  .topic-person small, .topic-person em { font-size: 12px; }
  .topic-question-list time, .topic-question-list p { font-size: 12px; }
  .topic-source-list em { font-size: 12px; }
  .topic-explorer__card > span, .topic-explorer__card > small { font-size: 12px; }
  .topic-explorer__card > em { font-size: 12px; }
  .search-result-item .eyebrow { font-size: 12px; }
  .search-result-item__link { font-size: 12px; }
  .article-image-note { font-size: 12px; }
  .reporter-note .eyebrow { font-size: 12px; }
  .reporter-note p:not(.eyebrow) { font-size: 12px; }
  .reporter-note > a { font-size: 12px; }
}

/* Micro-interactions --------------------------------------------------------- */
.article-card, .topic-card, .source-item, .civic-entry__mayor, .civic-entry__council, .topic-person, .topic-explorer__card { transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease); }
.button, .text-link, .pagination .page-numbers { transition: color 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease); }

@media (hover: hover) {
  .article-card:hover, .topic-card:hover, .source-item:hover, .civic-entry__mayor:hover, .civic-entry__council:hover, .topic-person:hover, .topic-explorer__card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
  .report-spotlight__link, .mayor-report-promo, .related-post { transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
  .report-spotlight__link:hover, .mayor-report-promo:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
}

@media (min-width: 721px) {
  .related-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .related-post { grid-template-columns: minmax(0, 1fr); }
  .related-post__media { aspect-ratio: 16 / 9; }
  .related-post__body { padding: 15px 17px; }
  .related-post__body strong { font-size: 17px; }
  .related-posts__heading h2 { font-size: 30px; }
  .article-toc { padding: 22px 26px; }
  .article-toc h2 { font-size: 16px; }
  .article-toc li { font-size: 15px; }
  .article-share__label { font-size: 13px; }
  .article-share__button { font-size: 13px; }
  .back-to-top { right: 26px; bottom: 26px; width: 48px; height: 48px; }
}

/* Print: readers archive civic records, so strip chrome and keep the evidence. */
@media print {
  .site-nav, .site-header__tools, .reading-progress, .back-to-top, .article-share, .related-posts, .article-dialogue, .topic-explorer, .pagination, .skip-link { display: none !important; }
  body { padding-bottom: 0; color: #000; background: #fff; font-size: 11pt; }
  .site-header { border-bottom: 1px solid #000; }
  .article-single, .page-single, .source-single { max-width: none; }
  .entry-content a::after { font-size: .85em; content: " (" attr(href) ")"; word-break: break-all; }
  .table-scroll, .data-table { overflow: visible; }
  .article-single__hero { break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   Council data visualisations.
   Palette slots are the documented categorical steps 1-3, validated all-pairs
   in both modes against this theme's card surfaces (light #ffffff CVD dE 9.2 /
   normal 24.0; dark #1f1f1f CVD dE 9.4 / normal 20.9).
   --------------------------------------------------------------------------- */
:root {
  --chart-1: #2a78d6;        /* slot 1 - counts (single series) */
  --chart-against: #eb6834;  /* slot 2 - dissent */
  --chart-absent: #1baf7a;   /* slot 3 - absence */
  --chart-context: #d2d2d2;  /* de-emphasis: the 賛成 majority */
  --chart-grid: #e6e6e6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chart-1: #3987e5;
    --chart-against: #d95926;
    --chart-absent: #199e70;
    --chart-context: #454545;
    --chart-grid: #2e2e2e;
  }
}
:root[data-theme="dark"] {
  --chart-1: #3987e5;
  --chart-against: #d95926;
  --chart-absent: #199e70;
  --chart-context: #454545;
  --chart-grid: #2e2e2e;
}

.council-data { background: var(--tint-page); }

/* Hero figure: the one number the page leads with. Sans, proportional digits. */
.hero-figure { display: grid; gap: 14px; }
.hero-figure__number { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.hero-figure__number strong { font-family: var(--sans); font-size: clamp(56px, 17vw, 104px); font-weight: 800; line-height: .95; letter-spacing: -.05em; font-variant-numeric: proportional-nums; }
.hero-figure__number span { color: var(--muted); font-size: clamp(15px, 4.2vw, 20px); font-weight: 700; }

/* Legend keys: identity never rests on colour alone, so each key carries a glyph. */
.chart-legend--keys { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.chart-legend--keys li { display: inline-flex; align-items: center; gap: 6px; }
.key-swatch { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 3px; color: #fff; font-size: 10px; font-weight: 900; line-height: 1; }
.key-swatch--for { background: var(--chart-context); }
.key-swatch--against { background: var(--chart-against); }
.key-swatch--absent { background: var(--chart-absent); }

/* Vote matrix: a real table, so the record is reachable without the tooltip. */
.vote-matrix__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vote-matrix { border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.vote-matrix__corner { width: 74px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: left; vertical-align: bottom; }
.vote-matrix__name { width: 19px; padding: 0; vertical-align: bottom; }
.vote-matrix__name span { display: block; height: 5.4em; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.05; text-align: left; white-space: nowrap; writing-mode: vertical-rl; }
.vote-matrix__bill { width: 74px; overflow: hidden; font-size: 12px; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.vote-matrix__bill a { color: var(--text); text-decoration: none; }
.vote-matrix__bill a:hover { color: var(--green-dark); text-decoration: underline; }
.vm { display: table-cell; width: 19px; height: 19px; padding: 0; border-radius: 3px; color: #fff; font-size: 10px; font-weight: 900; line-height: 19px; text-align: center; }
.vm-for { background: var(--chart-context); }
.vm-against { background: var(--chart-against); }
.vm-absent { background: var(--chart-absent); }
/* マス内の文字は読み上げ専用。視覚的には色のブロックだけを見せる。 */
.vm i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.vm { position: relative; }
.chip--exception[aria-pressed="true"] { outline: 2px solid var(--news-blue-dark); outline-offset: 1px; }
.vm-none { background: repeating-linear-gradient(45deg, var(--chart-grid) 0 3px, transparent 3px 6px); }

.exception-list { margin-top: 20px; padding: 17px 19px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.exception-list h3 { margin: 0 0 9px; font-size: 16px; }
.exception-list ol { display: grid; gap: 10px; margin: 0; padding-left: 1.3em; }
.exception-list a { font-weight: 700; }
.exception-list small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }

/* Horizontal count bars: one nominal series, so one hue for every bar. */
.count-bars { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.count-bars li { display: grid; grid-template-columns: 58px minmax(0, 1fr) 52px; align-items: center; gap: 10px; }
.count-bars__label { color: var(--text); font-size: 12px; font-weight: 700; }
.count-bars__track { height: 16px; background: var(--chart-grid); border-radius: 3px; }
.count-bars__track i { display: block; height: 100%; background: var(--chart-1); border-radius: 0 4px 4px 0; }
.count-bars__value { color: var(--text); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.count-bars__value small { margin-left: 1px; color: var(--muted); font-size: 12px; font-weight: 600; }

/* Column chart: value rides the cap, so no y-axis is needed. */
.day-columns { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 10px; align-items: end; height: 190px; margin: 0; padding: 0 0 2px; list-style: none; border-bottom: 1px solid var(--chart-grid); }
.day-columns li { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: end; height: 100%; min-width: 0; }
.day-columns__value { color: var(--text); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.day-columns__bar { display: block; width: min(100%, 24px); margin: 4px auto 0; background: var(--chart-1); border-radius: 4px 4px 0 0; align-self: end; }
.day-columns__label { padding-top: 7px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }

@media (min-width: 721px) {
  .hero-figure__number span { font-size: 22px; }
  .vote-matrix__corner, .vote-matrix__bill { width: 104px; font-size: 12px; }
  .vote-matrix__name { width: 24px; }
  .vote-matrix__name span { height: 6.2em; font-size: 12px; }
  .vm { width: 24px; height: 24px; font-size: 12px; line-height: 24px; }
  .count-bars li { grid-template-columns: 84px minmax(0, 1fr) 70px; gap: 14px; }
  .count-bars__track { height: 20px; }
  .count-bars__label, .count-bars__value { font-size: 15px; }
  .day-columns { height: 240px; gap: 20px; }
  .day-columns__label { font-size: 12px; }
  .exception-list { padding: 24px 26px; }
  .exception-list h3 { font-size: 19px; }
}

@media (forced-colors: active) {
  .vm { border: 1px solid CanvasText; forced-color-adjust: none; }
  .count-bars__track i, .day-columns__bar { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
   News-desk refinement.
   Headlines were sized like a landing page (up to 68px); a news index wants a
   quiet frame and a dense, scannable list. Colour is spent on links and one
   accent rule, not on large fields.
   --------------------------------------------------------------------------- */

/* Quieter masthead ---------------------------------------------------------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.brand__tagline { color: var(--muted); }
.independent-label { color: var(--muted); }

/* Hero: a lede, not a billboard --------------------------------------------- */
.home-hero { background: var(--ink); }
.home-hero__inner { padding-block: 22px 20px; }
.home-hero h1 { font-size: clamp(23px, 6.4vw, 30px); line-height: 1.35; letter-spacing: -.02em; }
.home-hero > .container > p:not(.eyebrow) { margin-top: 9px; font-size: 13px; line-height: 1.7; }
.tomiya-search--home { margin-top: 14px; padding: 6px; border-radius: 6px; }
.home-hero__popular { margin-top: 9px; }

/* Section headings sized for scanning --------------------------------------- */
.home-news { padding-block: 20px 26px; }
.home-news__header { margin-bottom: 14px; }
.home-news__header h2,
.home-today-heading h2,
.home-today-heading h3 { font-size: 19px; line-height: 1.4; letter-spacing: 0; }
.home-news__header > p { font-size: 13px; }
.home-today-heading > p { display: none; }
.section-heading h2 { font-size: 19px; line-height: 1.4; letter-spacing: 0; }
.section-heading { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.section-intro, .issues-section__intro { margin-top: 0; font-size: 13px; }
.archive-heading h1, .page-single__header h1, .error-page h1 { font-size: clamp(24px, 6vw, 30px); line-height: 1.4; letter-spacing: -.01em; }
.archive-heading > p:not(.eyebrow) { font-size: 14px; }
.eyebrow { margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: none; }

/* Cards read as a list ------------------------------------------------------- */
.article-card { border-radius: 4px; }
.article-card__title { font-size: 16px; line-height: 1.5; }
.article-grid--featured-first .article-card:first-child .article-card__title { font-size: 18px; }
.home-news__featured-label { color: var(--muted); font-weight: 700; }
.topic-card > strong { font-size: 17px; }
.civic-entry__grid strong { font-size: 17px; }

/* Article page: a single readable column ------------------------------------ */
.article-single__header h1 { font-size: clamp(22px, 5.6vw, 28px); line-height: 1.5; letter-spacing: -.01em; }
.entry-content { font-size: 16px; line-height: 1.95; }
.entry-content h2 { margin-top: 1.9em; font-size: 19px; line-height: 1.5; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.entry-content h3 { font-size: 17px; }
.article-dialogue h2 { font-size: 20px; }
.related-posts__heading h2 { font-size: 18px; }
.source-promo h2 { font-size: 20px; }

@media (min-width: 721px) {
  .home-hero__inner { padding-block: 34px 30px; }
  .home-hero h1 { font-size: 34px; }
  .home-hero > .container > p:not(.eyebrow) { font-size: 15px; }
  .home-news { padding-block: 30px 40px; }
  .home-news__header { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 36px; margin-bottom: 18px; }
  .home-news__header h2,
  .home-today-heading h2,
  .home-today-heading h3 { font-size: 23px; }
  .section-heading { margin-bottom: 16px; }
  .section-heading h2 { font-size: 23px; }
  .archive-heading h1, .page-single__header h1, .error-page h1 { font-size: 32px; }
  .archive-heading { margin-bottom: 26px; }
  .section-space { padding-block: 34px; }
  .section-space--small { margin-top: 34px; }
  .article-grid { gap: 14px; }
  .article-card__title { font-size: 17px; }
  .home-news__grid .article-card:first-child .article-card__title { font-size: 22px; }
  .article-card__body, .article-grid--featured-first .article-card:first-child .article-card__body { padding: 15px 16px; }
  .article-card__body > p { font-size: 13px; }
  .article-single__header h1 { font-size: 30px; }
  .entry-content { font-size: 17px; }
  .entry-content h2 { font-size: 22px; }
  .article-single__hero { margin: 22px 0 20px; }
  .report-spotlight__intro h2 { font-size: 24px; }
  .topic-hero h1 { font-size: 32px; line-height: 1.4; }
  .topic-hero__inner { padding-block: 32px; }
  .report-hero h1 { font-size: 32px; line-height: 1.4; }
  .report-hero__inner { padding-block: 34px; }
  .report-section__heading h2 { font-size: 24px; }
  .person-hero h1 { font-size: 34px; }
  .person-hero__grid { min-height: 0; padding-block: 30px; }
  .search-heading h1 { font-size: 30px; }
}

@media (min-width: 981px) {
  .home-hero h1 { font-size: 36px; }
  .hero h1 { font-size: 36px; line-height: 1.4; }
}

/* Question record pages ------------------------------------------------------ */
.question-single { max-width: 760px; }
.question-single__header h1 { margin: 6px 0 10px; font-size: clamp(21px, 5.4vw, 27px); line-height: 1.5; letter-spacing: -.01em; }
.question-single__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13px; }
.question-asker { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 13px; margin: 20px 0; padding: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.question-asker:hover { color: var(--text); border-color: var(--line-strong); }
.question-asker img { width: 56px; height: 56px; object-fit: cover; object-position: center top; border-radius: 4px; background: var(--photo-fallback); }
.question-asker small, .question-asker strong, .question-asker em { display: block; }
.question-asker small { color: var(--green-dark); font-size: 12px; font-weight: 700; }
.question-asker strong { margin-top: 2px; font-size: 18px; }
.question-asker em { margin-top: 2px; color: var(--muted); font-size: 12px; font-style: normal; }
.question-watch { margin: 24px 0; padding: 18px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); }
.question-watch h2 { margin: 0 0 6px; font-size: 17px; }
.question-watch > p { margin: 0 0 13px; color: var(--muted); font-size: 13px; }
.question-watch__links { display: grid; gap: 9px; }
.question-watch__link { display: block; padding: 13px 15px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; text-decoration: none; transition: border-color 160ms var(--ease), background 160ms var(--ease); }
.question-watch__link:hover { color: var(--text); background: var(--surface-hover); border-color: var(--green); }
.question-watch__link strong { display: block; font-size: 15px; }
.question-watch__link small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.question-related { margin: 26px 0; }
.question-related h2 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font-size: 17px; }
.question-related__note { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.question-related ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.question-related li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.question-related li a { font-size: 14px; font-weight: 700; text-decoration: none; }
.question-related li a:hover { text-decoration: underline; }
.question-related li small { flex: 0 0 auto; color: var(--muted); font-size: 12px; }

@media (min-width: 721px) {
  .question-single__header h1 { font-size: 28px; }
  .question-asker { grid-template-columns: 68px minmax(0, 1fr); padding: 16px; }
  .question-asker img { width: 68px; height: 68px; }
  .question-watch { padding: 24px; }
  .question-watch__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-related li a { font-size: 15px; }
}

/*
 * The wordmark is dark ink plus a gold rule, so it needs a light-on-dark twin.
 * Every rule below is qualified with `img` to outrank `.brand__logo img`,
 * which sets display:block on both and would otherwise stack them.
 */
.brand__logo img.brand__logo--light { display: block; }
.brand__logo img.brand__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo img.brand__logo--light { display: none; }
  :root:not([data-theme="light"]) .brand__logo img.brand__logo--dark { display: block; }
}
:root[data-theme="light"] .brand__logo img.brand__logo--light { display: block; }
:root[data-theme="light"] .brand__logo img.brand__logo--dark { display: none; }
:root[data-theme="dark"] .brand__logo img.brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo img.brand__logo--dark { display: block; }

/* ---------------------------------------------------------------------------
   Home lede: the masthead carries the search, so the hero carries the purpose.
   --------------------------------------------------------------------------- */
.home-hero__kicker { margin: 0 0 10px; color: var(--green-bright); font-size: 12px; font-weight: 700; }
.home-hero h1 { max-width: 22em; }
.home-hero__creed { max-width: 40em; margin: 12px 0 0; color: #d9d9d9; font-size: 13px; line-height: 1.85; }
.home-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
.button--light { min-height: 42px; padding: 8px 18px; color: var(--ink); background: #fff; border-color: #fff; font-size: 13px; }
.button--light:hover { color: var(--ink); background: var(--green-bright); border-color: var(--green-bright); }
.text-link--on-dark { color: #fff; font-size: 13px; }
.text-link--on-dark:hover { color: var(--green-bright); }

/* Election clock ------------------------------------------------------------- */
.election-clock { background: var(--tint); border-bottom: 1px solid var(--line); }
.election-clock__inner { padding-block: 16px; }
.election-clock h2 { margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: .01em; }
.election-clock__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.election-clock__list li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 4px 10px; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
.election-clock__name { color: var(--text); font-size: 13px; font-weight: 800; }
.election-clock__count { color: var(--text); font-size: 13px; }
.election-clock__count strong { margin-right: 1px; font-size: 25px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: proportional-nums; }
.election-clock__when { color: var(--muted); font-size: 12px; }
.election-clock__last { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.election-clock__note { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

@media (min-width: 721px) {
  .home-hero__kicker { font-size: 13px; }
  .home-hero__creed { font-size: 15px; }
  .election-clock__inner { padding-block: 18px; }
  .election-clock h2 { font-size: 15px; }
  .election-clock__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .election-clock__list li { padding: 14px 17px; }
  .election-clock__count strong { font-size: 30px; }
}

/* ---------------------------------------------------------------------------
   Mobile list density. A phone screen should show headlines, not cards:
   thumbnail, genre, headline, date — nothing else competing for height.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .article-grid { gap: 0; }
  .article-card { grid-template-columns: 112px minmax(0, 1fr); min-height: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .article-card__media { align-self: start; aspect-ratio: 16 / 10; min-height: 0; margin: 11px 0 11px 0; border-radius: 4px; }
  .article-card__body { display: flex; justify-content: center; flex-direction: column; padding: 11px 0 11px 11px; }
  .article-card__body .eyebrow { margin-bottom: 3px; font-size: 12px; }
  .article-card__title { font-size: 14.5px; line-height: 1.45; }
  .article-card__title a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .article-card__meta { margin: 4px 0 0; font-size: 12px; }
  /* Topics and the read-cue are useful on a wide screen; on a phone they only add height. */
  .article-card__body > p.article-card__topics,
  .article-card__read { display: none; }

  /* The lead item keeps its picture but loses the poster-sized padding. */
  .article-grid--featured-first .article-card:first-child { display: block; padding-bottom: 3px; }
  .article-grid--featured-first .article-card:first-child .article-card__media { margin: 0; aspect-ratio: 16 / 9; border-radius: 4px; }
  .article-grid--featured-first .article-card:first-child .article-card__body { padding: 10px 0 12px; }
  .article-grid--featured-first .article-card:first-child .article-card__title { font-size: 18px; line-height: 1.42; }
  .article-grid--featured-first .article-card:first-child .article-card__title a { -webkit-line-clamp: 4; }

  .home-news__featured-label { margin-bottom: 6px; }
  .home-news__all { margin-top: 4px; }
  .related-post { grid-template-columns: 112px minmax(0, 1fr); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .related-post__media { align-self: start; aspect-ratio: 16 / 10; margin: 11px 0; border-radius: 4px; }
  .related-post__body { padding: 11px 0 11px 11px; }
  .related-post__body strong { font-size: 14.5px; line-height: 1.45; }
}

/* Ropeway feature page ------------------------------------------------------- */
.ropeway-page { background: var(--tint-page); }
.evidence-key { margin-bottom: 26px; padding: 15px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.evidence-key p { margin: 0 0 8px; font-size: 13px; }
.evidence-key ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.evidence-key li { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.evidence-key .evidence-tag { flex: 0 0 auto; }
.ropeway-lead { margin-bottom: 8px; }
.ropeway-lead h2 { margin: 0 0 10px; font-size: 19px; }

.wall-grid { display: grid; gap: 12px; }
.wall-card { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: 5px; }
.wall-card--1 { border-top-color: var(--chart-against); }
.wall-card--2 { border-top-color: var(--yellow); }
.wall-card--3 { border-top-color: var(--chart-1); }
.wall-card__no { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.wall-card h3 { margin: 3px 0 8px; font-size: 19px; }
.wall-card p:not(.wall-card__no) { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }

.ropeway-quote { margin: 18px 0; padding: 18px 20px; background: var(--surface); border-left: 4px solid var(--ink); }
.ropeway-quote p { margin: 0 0 10px; font-size: 15px; line-height: 1.9; }
.ropeway-quote p:last-of-type { margin-bottom: 10px; }
.ropeway-quote cite { color: var(--muted); font-size: 12px; font-style: normal; }

.ropeway-asks { display: grid; gap: 9px; margin: 14px 0 18px; padding: 0 0 0 1.3em; }
.ropeway-asks li { font-size: 14px; line-height: 1.7; }
.ropeway-asks strong { display: block; }
.ropeway-asks span { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.ropeway-gap { margin-top: 14px; padding: 14px 16px; background: var(--tint); border: 1px solid var(--line); border-radius: 5px; font-size: 14px; line-height: 1.85; }

.lever-grid { display: grid; gap: 12px; }
.lever-col { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
.lever-col h3 { margin: 0 0 10px; padding-bottom: 7px; border-bottom: 2px solid var(--ink); font-size: 16px; }
.lever-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lever-col li { padding-left: 20px; color: var(--ink-soft); font-size: 13px; line-height: 1.75; position: relative; }
.lever-col li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.lever-col--can li::before { color: var(--green-dark); content: "○"; }
.lever-col--cannot li::before { color: var(--chart-against); content: "×"; }
.lever-col li strong { color: var(--text); }

.unknown-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.unknown-list li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; position: relative; }
.unknown-list li::before { position: absolute; left: 0; color: var(--muted); content: "▸"; }

@media (min-width: 721px) {
  .evidence-key { display: flex; align-items: baseline; gap: 22px; }
  .evidence-key p { margin: 0; flex: 0 0 auto; }
  .evidence-key ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .wall-card { padding: 22px; }
  .lever-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .lever-col { padding: 24px; }
  .ropeway-quote { padding: 24px 28px; }
  .ropeway-quote p { font-size: 16px; }
  .ropeway-asks li { font-size: 15px; }
}

/* Corrections are part of the record, so they sit above the article, not below. */
.correction-note { margin: 0 0 24px; padding: 15px 17px; background: var(--note-bg); border-left: 4px solid var(--yellow); border-radius: 4px 6px 6px 4px; color: var(--note-ink); }
.correction-note p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.8; }
.correction-note p:last-child { margin-bottom: 0; }
.correction-note strong { color: inherit; }
.ropeway-subhead { margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 16px; }
.severance-section .money-grid strong { font-size: 21px; }
.severance-section .metric-caution a { color: inherit; font-weight: 700; white-space: nowrap; }

/* Commuting flow diagram ----------------------------------------------------- */
.flow-diagram { display: block; width: 100%; height: auto; overflow: visible; }
.flow-node { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.flow-node__name { fill: var(--text); font-size: 19px; font-weight: 800; }
.flow-node__sub { fill: var(--muted); font-size: 12px; }
.flow-arrow { fill: none; opacity: .9; }
.flow-arrow--out { stroke: var(--chart-against); }
.flow-arrow--in { stroke: var(--chart-1); }
.flow-label { font-size: 19px; font-weight: 800; }
.flow-label--out { fill: var(--text); }
.flow-label--in { fill: var(--text); }
.flow-sub { fill: var(--muted); font-size: 12px; }
.flow-net { fill: var(--muted); font-size: 12.5px; font-weight: 700; }

/* Single stacked bar --------------------------------------------------------- */
.stack-bar { display: flex; gap: 2px; height: 42px; margin: 4px 0 14px; }
.stack-bar__seg { display: grid; min-width: 0; place-items: center; overflow: hidden; color: #fff; font-size: 12px; font-weight: 800; }
.stack-bar__seg:first-child { border-radius: 4px 0 0 4px; }
.stack-bar__seg:last-child { border-radius: 0 4px 4px 0; }
.stack-bar__seg--out { background: var(--chart-against); }
.stack-bar__seg--own { background: var(--chart-1); }
.stack-bar__seg--none { background: var(--chart-context); color: var(--text); }
.stack-bar__seg--unknown { background: var(--line-strong); }
.key-swatch--out { background: var(--chart-against); }
.key-swatch--own { background: var(--chart-1); }
.key-swatch--none { background: var(--chart-context); }
.key-swatch--unknown { background: var(--line-strong); }

@media (max-width: 720px) {
  .flow-node__name { font-size: 22px; }
  .flow-node__sub, .flow-sub { font-size: 14px; }
  .flow-label { font-size: 23px; }
  .flow-net { font-size: 14px; }
  .stack-bar { height: 36px; }
  .stack-bar__seg { font-size: 12px; }
}
/* Congestion above 1.0 means demand exceeds the road's capacity. */
.count-bars--congestion .count-bars__label { font-size: 12px; }
.count-bars__track--over i { background: var(--chart-against); }
.count-bars__label small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }

/* Editorial policy page ------------------------------------------------------ */
.policy-page { background: var(--tint-page); }
.policy-hero { color: #fff; background: var(--ink); }
.policy-hero__inner { padding-block: 30px; }
.policy-hero__eyebrow { margin: 11px 0 7px; color: #9fc1b2; font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.policy-hero h1 { margin: 0; font-size: clamp(25px, 6.5vw, 34px); line-height: 1.4; letter-spacing: -.02em; }
.policy-hero__lead { max-width: 46em; margin: 13px 0 0; color: #d6ded9; font-size: 14px; line-height: 1.9; }
.policy-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 20px; }
.policy-stat { padding: 15px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
.policy-stat strong { display: block; font-size: clamp(28px, 8vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.policy-stat span { display: block; margin-top: 5px; font-size: 13px; font-weight: 800; }
.policy-stat small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.mark-grid { display: grid; gap: 11px; }
.mark-card { padding: 17px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: 5px; }
.mark-card--fact { border-top-color: var(--green); }
.mark-card--analysis { border-top-color: var(--yellow); }
.mark-card--question { border-top-color: var(--chart-against); }
.mark-card h3 { margin: 9px 0 6px; font-size: 17px; }
.mark-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.stance-grid { display: grid; gap: 12px; }
.stance-col { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
.stance-col h3 { margin: 0 0 10px; padding-bottom: 7px; border-bottom: 2px solid var(--ink); font-size: 16px; }
.stance-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.stance-col li { position: relative; padding-left: 21px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.75; }
.stance-col li::before { position: absolute; left: 0; font-weight: 800; }
.stance-col--do li::before { color: var(--green-dark); content: "○"; }
.stance-col--dont li::before { color: var(--chart-against); content: "×"; }
.correction-example { padding: 17px 19px; background: var(--note-bg); border-left: 4px solid var(--yellow); border-radius: 4px 6px 6px 4px; color: var(--note-ink); }
.correction-example__label { margin: 0 0 8px; font-size: 12px; font-weight: 800; }
.correction-example p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.85; }
.correction-example p:last-child { margin-bottom: 0; }
.correction-example a { color: inherit; font-weight: 700; }
.policy-author { display: grid; gap: 16px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.policy-author > img { width: 110px; height: 130px; object-fit: cover; object-position: 57% 30%; border-radius: 5px; }
.policy-author__name { margin: 0; font-size: 21px; font-weight: 800; }
.policy-author__role { margin: 2px 0 12px; color: var(--green-dark); font-size: 12px; font-weight: 700; }
.policy-author p { margin: 0 0 11px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.9; }
.policy-author__note { margin: 12px 0 0 !important; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted) !important; font-size: 12px !important; }
.policy-manifesto { max-width: 850px; margin-inline: auto; }
.policy-manifesto > .eyebrow { color: var(--green-dark); }
.policy-manifesto h2 { max-width: 16em; margin: 6px 0 16px; font-size: clamp(24px, 6vw, 38px); line-height: 1.45; letter-spacing: -.03em; }
.policy-manifesto__body { padding-left: 17px; border-left: 3px solid var(--green); }
.policy-manifesto__body p { margin: 0 0 13px; color: var(--ink-soft); font-size: 14px; line-height: 2; }
.policy-manifesto__body p:last-child { margin-bottom: 0; }
.policy-proposal-bridge { padding: 22px; color: #fff; background: #075d43; border-radius: var(--radius); }
.policy-proposal-bridge .eyebrow { margin-bottom: 7px; color: #c7e5d8; }
.policy-proposal-bridge h2 { max-width: 20em; margin: 0 0 12px; font-size: clamp(22px, 5.6vw, 32px); line-height: 1.5; letter-spacing: -.025em; }
.policy-proposal-bridge__copy > p:last-child { max-width: 48em; margin: 0; color: #e4efe9; font-size: 13.5px; line-height: 1.9; }
.policy-proposal-flow { display: grid; gap: 0; margin: 21px 0; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 24%); }
.policy-proposal-flow li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / 24%); }
.policy-proposal-flow li > span { padding-top: 2px; color: #c7e5d8; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.policy-proposal-flow strong { display: block; font-size: 14px; }
.policy-proposal-flow small { display: block; margin-top: 3px; color: #d5e4dd; font-size: 12px; line-height: 1.6; }
.policy-proposal-bridge__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.policy-proposal-bridge__actions .button { border-color: #fff; }
.policy-proposal-bridge__actions > a:not(.button) { color: #fff; font-size: 12px; font-weight: 800; }
#editorial-standards { scroll-margin-top: 90px; }

@media (min-width: 721px) {
  .policy-hero__inner { padding-block: 44px; }
  .policy-hero h1 { font-size: 38px; }
  .policy-hero__lead { font-size: 16px; }
  .policy-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .policy-stat { padding: 20px 18px; }
  .policy-stat strong { font-size: 34px; }
  .mark-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mark-card { padding: 22px; }
  .stance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .stance-col { padding: 24px; }
  .policy-author { grid-template-columns: 180px minmax(0, 1fr); gap: 26px; padding: 26px; }
  .policy-author > img { width: 180px; height: 220px; }
  .policy-manifesto__body { padding-left: 26px; }
  .policy-manifesto__body p { font-size: 15.5px; }
  .policy-proposal-bridge { padding: 34px 38px; }
  .policy-proposal-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .policy-proposal-flow li { grid-template-columns: 34px minmax(0, 1fr); padding: 15px 18px; border-right: 1px solid rgb(255 255 255 / 24%); }
  .policy-proposal-flow li:first-child { padding-left: 0; }
  .policy-proposal-flow li:last-child { padding-right: 0; border-right: 0; }
  .policy-proposal-flow strong { font-size: 15px; }
  .correction-example { padding: 22px 26px; }
}

/* Deep-dive charts ----------------------------------------------------------- */
.dd-plan { stroke: var(--chart-1); stroke-dasharray: 7 6; }
.dd-ipss { stroke: var(--chart-against); stroke-dasharray: 7 6; }
.dd-anno { font-size: 12px; font-weight: 800; }
.dd-anno--plan { fill: var(--chart-1); }
.dd-anno--ipss { fill: var(--chart-against); }
.legend-line.dd-legend--plan { height: 0; background: none; border-top: 3px dashed var(--chart-1); }
.legend-line.dd-legend--ipss { height: 0; background: none; border-top: 3px dashed var(--chart-against); }
.tfr-bars .count-bars__label { font-size: 12px; }
.tfr-bars .tfr-row--plan i { background: var(--ink); }
.tfr-bars .tfr-row--real i { background: var(--chart-against); }
.tfr-bars .tfr-row--ref i { background: var(--chart-1); }
.tfr-bars .tfr-row--plan .count-bars__label { font-weight: 800; }
@media (max-width: 720px) { .dd-anno { font-size: 13px; } }

/* Measure cards: comparing what is actually in motion --------------------- */
.measure-grid { display: grid; gap: 12px; margin: 18px 0; }
.measure-card { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--chart-1); border-radius: 5px; }
.measure-card--future { border-top-color: var(--line-strong); }
.measure-card__tag { display: inline-block; margin: 0 0 6px; padding: 2px 8px; color: var(--green-dark); background: var(--green-soft); border-radius: 3px; font-size: 12px; font-weight: 800; }
.measure-card--future .measure-card__tag { color: var(--muted); background: var(--chip-bg); }
.measure-card h3 { margin: 0 0 8px; font-size: 17px; }
.measure-card__num { margin: 0 0 10px !important; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.measure-card__num small { font-size: 14px; font-weight: 700; }
.measure-card p { margin: 0 0 9px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.measure-card__note { margin: 10px 0 0 !important; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted) !important; font-size: 12px !important; }
@media (min-width: 721px) {
  .measure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .measure-card { padding: 22px; }
}

/* Age-range chart: which support applies at which age ---------------------- */
.age-gantt { margin: 4px 0 12px; }
.age-gantt__scale { display: flex; justify-content: space-between; margin: 0 0 6px calc(112px + 10px); color: var(--muted); font-size: 12px; }
.age-gantt__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 7px; }
.age-gantt__label { font-size: 12px; font-weight: 700; line-height: 1.35; }
.age-gantt__label small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.age-gantt__track { position: relative; height: 26px; background: var(--chart-grid); border-radius: 3px; }
.age-gantt__bar { position: absolute; top: 0; height: 100%; display: grid; place-items: center; overflow: hidden; padding: 0 6px; border-radius: 3px; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.age-gantt__bar--a { background: var(--chart-1); }
.age-gantt__bar--b { background: var(--chart-against); }
.age-gantt__bar--c { background: var(--chart-absent); }
.age-gantt__bar--d { background: var(--ink); }

/* Numbered step flow ------------------------------------------------------- */
.step-flow { display: grid; gap: 0; margin: 6px 0 12px; padding: 0; list-style: none; counter-reset: none; }
.step-flow li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.step-flow li:last-child { border-bottom: 0; }
.step-flow__no { display: grid; width: 26px; height: 26px; place-items: center; background: var(--ink); border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; }
.step-flow strong { display: block; font-size: 14.5px; }
.step-flow p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }

/* Waste container colour key ---------------------------------------------- */
.waste-key { display: grid; gap: 14px; margin: 6px 0 12px; }
.waste-key__group { padding: 14px 16px; background: var(--tint); border: 1px solid var(--line); border-radius: 5px; }
.waste-key__title { margin: 0 0 9px; font-size: 13px; font-weight: 800; }
.waste-key ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.waste-key li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.6; }
.waste-chip { flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 3px; }
.waste-chip--blue { background: #1f6fb2; }
.waste-chip--black { background: #333; }
.waste-chip--white { background: #fff; }
.waste-chip--brown { background: #8a5a2b; }
.waste-chip--green { background: #2e7d43; }
.waste-chip--none { background: repeating-linear-gradient(45deg, var(--chart-grid) 0 4px, transparent 4px 8px); }
.waste-chip--bag { background: var(--note-bg); }

@media (min-width: 721px) {
  .age-gantt__scale { margin-left: calc(150px + 12px); font-size: 12px; }
  .age-gantt__row { grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
  .age-gantt__label { font-size: 13px; }
  .age-gantt__track { height: 30px; }
  .age-gantt__bar { font-size: 12px; }
  .waste-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .step-flow strong { font-size: 15.5px; }
}

/* Department chips ---------------------------------------------------------- */
.dept-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 12px; }
.dept-chip { display: inline-flex; align-items: center; padding: 7px 13px; background: var(--green-soft); border: 1px solid var(--line); border-radius: 999px; color: var(--green-dark); font-size: 13px; font-weight: 700; }
@media (min-width: 721px) { .dept-chip { padding: 8px 16px; font-size: 14px; } }

/* News map ------------------------------------------------------------------
   One palette serves both colour schemes. The six hues were chosen by maximising
   the minimum OKLab dE across normal vision and simulated deuteranopia,
   protanopia and tritanopia (worst case 9.1), under the constraint that every
   hue keeps at least 3:1 contrast against both #fff and the dark surface.
   Colour is never the only cue: each pin also carries its number, and the list
   below the map repeats the category in words. */
:root {
  --map-gov: #397dd4;
  --map-transit: #af4709;
  --map-school: #70609a;
  --map-health: #8f5b61;
  --map-life: #b4745a;
  --map-history: #917e9c;
  --map-land: #eef0ee;
  --map-edge: #8b948f;
  --map-school-dot: #9aa39f;
  --map-road: #c2c7c4;
  --map-road-minor: #d6dad7;
  --map-road-ink: #8a918d;
  --map-place-ink: #5c6360;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --map-land: #2a2f31;
    --map-edge: #6b7571;
    --map-school-dot: #737d79;
    --map-road: #454d4a;
    --map-road-minor: #3a4240;
    --map-road-ink: #869089;
    --map-place-ink: #a9b3ae;
  }
}
:root[data-theme="dark"] {
  --map-land: #2a2f31;
  --map-edge: #6b7571;
  --map-school-dot: #737d79;
  --map-road: #454d4a;
  --map-road-minor: #3a4240;
  --map-road-ink: #869089;
  --map-place-ink: #a9b3ae;
}

.newsmap-figure { padding-bottom: 6px; }
.newsmap-canvas { margin: 4px 0 10px; }
.newsmap-svg { display: block; width: 100%; height: auto; max-height: 78vh; margin: 0 auto; }
.newsmap-shape { fill: var(--map-land); stroke: var(--map-edge); stroke-width: 1.6; stroke-linejoin: round; }
.newsmap-school { fill: var(--map-school-dot); }

/* Roads give the silhouette a frame of reference. They are context, never the
   subject, so they sit below the labels in weight as well as in stacking. */
.newsmap-road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.newsmap-road--primary { stroke: var(--map-road-minor); stroke-width: 1.4; }
.newsmap-road--trunk { stroke: var(--map-road); stroke-width: 2.6; }
.newsmap-road--motorway { stroke: var(--map-road); stroke-width: 2.6; stroke-dasharray: 9 5; }
.newsmap-roadlabel { fill: var(--map-road-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.newsmap-place { fill: var(--map-place-ink); font-size: 13.5px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--map-land); stroke-width: 3.5; stroke-linejoin: round; }
.newsmap-link { fill: none; stroke: var(--map-transit); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.86; }
.newsmap-link--route1 { stroke: #008f76; }
.newsmap-link--route2 { stroke: #8756b4; stroke-dasharray: 7 5; }
.newsmap-route-terminal { fill: var(--surface); stroke: var(--map-transit); stroke-width: 3; }
.newsmap-linklabel { fill: var(--map-transit); font-size: 15px; font-weight: 700; }

.newsmap-pin { cursor: pointer; }
.newsmap-pin__halo { fill: var(--surface); opacity: 0.9; }
.newsmap-pin__dot { fill: var(--map-gov); stroke: var(--surface); stroke-width: 2.2; }
.newsmap-pin__no { fill: #ffffff; font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.newsmap-pin--transit .newsmap-pin__dot { fill: var(--map-transit); }
.newsmap-pin--school .newsmap-pin__dot { fill: var(--map-school); }
.newsmap-pin--health .newsmap-pin__dot { fill: var(--map-health); }
.newsmap-pin--life .newsmap-pin__dot { fill: var(--map-life); }
.newsmap-pin--history .newsmap-pin__dot { fill: var(--map-history); }
.newsmap-pin.is-active .newsmap-pin__dot,
.newsmap-pin:hover .newsmap-pin__dot { stroke: var(--text); stroke-width: 3; }
.newsmap-pin:focus-visible { outline: none; }
.newsmap-pin:focus-visible .newsmap-pin__dot { stroke: var(--text); stroke-width: 3.4; }
[data-cat].is-dim { opacity: 0.16; }
.newsmap-item.is-dim { display: none; }

.newsmap-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.newsmap-filter { padding: 7px 13px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-soft); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.newsmap-filter:hover { background: var(--surface-hover); }
.newsmap-filter.is-on { background: var(--text); border-color: var(--text); color: var(--surface); }
.newsmap-filter i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
.newsmap-filter--gov i { background: var(--map-gov); }
.newsmap-filter--transit i { background: var(--map-transit); }
.newsmap-filter--school i { background: var(--map-school); }
.newsmap-filter--health i { background: var(--map-health); }
.newsmap-filter--life i { background: var(--map-life); }
.newsmap-filter--history i { background: var(--map-history); }

.newsmap-attr { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.newsmap-attr a { color: inherit; }
.newsmap-route-detail { margin-top: 28px; padding: clamp(20px, 3.5vw, 38px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.newsmap-route-detail__head { display: flex; gap: 18px; align-items: flex-end; justify-content: space-between; }
.newsmap-route-detail__eyebrow { margin: 0 0 6px; color: var(--map-transit); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.newsmap-route-detail__head h2 { max-width: 760px; margin: 0; font-size: clamp(22px, 3vw, 34px); line-height: 1.35; }
.newsmap-route-detail__feature { flex: 0 0 auto; padding-bottom: 4px; color: var(--text); font-size: 14px; font-weight: 800; text-decoration: none; }
.newsmap-route-detail__feature:hover { text-decoration: underline; }
.newsmap-route-detail__intro { max-width: 850px; margin: 16px 0 18px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.85; }
.newsmap-route-switch { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.newsmap-route-switch__button { padding: 8px 15px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.newsmap-route-switch__button:hover { background: var(--surface-hover); }
.newsmap-route-switch__button.is-on { background: var(--text); border-color: var(--text); color: var(--surface); }
.newsmap-route-switch__button--r1:not(.is-on) { border-color: #008f76; color: #007964; }
.newsmap-route-switch__button--r2:not(.is-on) { border-color: #8756b4; color: #704393; }
.newsmap-route-layout { display: grid; gap: 18px; }
.newsmap-route-zoom { min-width: 0; margin: 0; }
.newsmap-route-zoom svg { display: block; width: 100%; height: auto; }
.newsmap-route-zoom figcaption { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.newsmap-route-zoom__land { fill: var(--tint); stroke: var(--line); }
.newsmap-route-zoom__road { fill: none; stroke: var(--map-road); stroke-width: 12; stroke-linecap: round; opacity: .72; }
.newsmap-route-zoom__road--minor { stroke-width: 4; opacity: .58; }
.newsmap-route-zoom__border { fill: none; stroke: var(--map-edge); stroke-width: 1.5; stroke-dasharray: 8 7; }
.newsmap-route-zoom__border-label { fill: var(--muted); font-size: 13px; font-weight: 800; }
.newsmap-route-zoom__districts text { fill: var(--map-place-ink); font-size: 17px; font-weight: 800; paint-order: stroke; stroke: var(--tint); stroke-width: 5; stroke-linejoin: round; }
.newsmap-route-path { fill: none; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; opacity: .94; }
.newsmap-route-path--route1 { stroke: #008f76; }
.newsmap-route-path--route2 { stroke: #8756b4; }
.newsmap-route-waypoint { stroke: var(--surface); stroke-width: 3; }
.newsmap-route-waypoint--route1 { fill: #008f76; }
.newsmap-route-waypoint--route2 { fill: #8756b4; }
.newsmap-route-route-label { font-size: 15px; font-weight: 900; paint-order: stroke; stroke: var(--tint); stroke-width: 5; stroke-linejoin: round; }
.newsmap-route-route-label--route1 { fill: #007a65; }
.newsmap-route-route-label--route2 { fill: #704393; }
.newsmap-route-terminal--zoom { fill: #fff4a6; stroke: var(--text); stroke-width: 3; }
.newsmap-route-terminal-group text { fill: var(--text); font-size: 17px; font-weight: 900; paint-order: stroke; stroke: var(--tint); stroke-width: 5; stroke-linejoin: round; }
.newsmap-route-obstacle path { fill: none; stroke: #9b6330; stroke-width: 2; stroke-dasharray: 5 4; }
.newsmap-route-obstacle text { fill: #805126; font-size: 13px; font-weight: 800; }
.newsmap-route-north path { fill: none; stroke: var(--text); stroke-width: 2; }
.newsmap-route-north text { fill: var(--text); font-size: 12px; font-weight: 800; }
.newsmap-route-group, .newsmap-route-card { transition: opacity .18s ease, filter .18s ease; }
.newsmap-route-group.is-route-muted { opacity: .09; }
.newsmap-route-card.is-route-muted { opacity: .38; filter: grayscale(.8); }
.newsmap-route-cards { display: grid; gap: 10px; }
.newsmap-route-card { padding: 16px; border: 1px solid var(--line); border-top: 5px solid #008f76; border-radius: 9px; }
.newsmap-route-card--route2 { border-top-color: #8756b4; }
.newsmap-route-card__title span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.newsmap-route-card__title strong { display: block; font-size: 17px; line-height: 1.5; }
.newsmap-route-card__path { margin: 10px 0; color: var(--ink-soft); font-size: 13px; font-weight: 700; line-height: 1.75; }
.newsmap-route-card__path span { color: var(--muted); }
.newsmap-route-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
.newsmap-route-card dl div { padding: 9px 10px; background: var(--tint); border-radius: 6px; }
.newsmap-route-card dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.newsmap-route-card dd { margin: 2px 0 0; color: var(--text); font-size: 15px; font-weight: 900; }
.newsmap-route-card dd small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.35; }
.newsmap-route-card > p:last-child { margin: 11px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.7; }
.newsmap-route-disclosure { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 15px 17px; background: var(--tint); border-left: 4px solid var(--map-transit); border-radius: 6px; }
.newsmap-route-disclosure p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.newsmap-route-disclosure a { flex: 0 0 auto; color: var(--text); font-size: 12.5px; font-weight: 800; text-decoration: none; }
.newsmap-route-disclosure a:hover { text-decoration: underline; }
.newsmap-lede { margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; line-height: 1.85; }
.newsmap-note { margin-top: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--text); border-radius: 8px; }
.newsmap-note p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.95; }
.newsmap-note strong { color: var(--text); }

.newsmap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 861px) { .newsmap-list { grid-template-columns: repeat(2, 1fr); } }
.newsmap-item { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; scroll-margin-top: 84px; }
.newsmap-item:target { border-color: var(--text); }
.newsmap-item__head { display: flex; gap: 12px; align-items: flex-start; }
.newsmap-item__no { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--map-gov); color: #fff; font-size: 14px; font-weight: 700; }
.newsmap-item__no--transit { background: var(--map-transit); }
.newsmap-item__no--school { background: var(--map-school); }
.newsmap-item__no--health { background: var(--map-health); }
.newsmap-item__no--life { background: var(--map-life); }
.newsmap-item__no--history { background: var(--map-history); }
.newsmap-item h3 { margin: 2px 0 4px; font-size: 16px; line-height: 1.5; }
.newsmap-item__addr { margin: 0; color: var(--muted); font-size: 12.5px; }
.newsmap-item__cat { display: inline-block; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 700; }
.newsmap-item__note { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.newsmap-item__links { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.newsmap-item__links a { display: block; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.6; text-decoration: none; }
.newsmap-item__links a::before { content: "▸ "; color: var(--muted); }
.newsmap-item__links a:hover { text-decoration: underline; }

.newsmap-wide { display: grid; gap: 10px; }
@media (min-width: 861px) { .newsmap-wide { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .newsmap-route-layout { grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); align-items: start; }
}
.newsmap-wide__item { display: block; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.newsmap-wide__item:hover { background: var(--surface-hover); }
.newsmap-wide__item strong { display: block; color: var(--text); font-size: 15px; line-height: 1.55; }
.newsmap-wide__item span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.7; }

/* Narrow screens. The SVG scales down with the viewport, so type set in user
   units shrinks with it — at 390px every label would land near 7px. Sizes are
   scaled back up here, and the twelve rural district names drop out so the ones
   that remain have room to breathe. */
@media (max-width: 720px) {
  .newsmap-figure .data-figure__header { display: block; }
  .newsmap-figure__lede { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
  .newsmap-svg { max-height: none; }
  .newsmap-place { font-size: 18.5px; stroke-width: 4.5; }
  .newsmap-place--r2 { display: none; }
  .newsmap-roadlabel { font-size: 17px; }
  .newsmap-linklabel { font-size: 19px; }
  .newsmap-pin__no { font-size: 19px; }
  .newsmap-pin__dot { r: 16; }
  .newsmap-pin__halo { r: 22; }
  .newsmap-school { r: 4.5; }
  .newsmap-road--trunk, .newsmap-road--motorway { stroke-width: 3.4; }
  .newsmap-road--primary { stroke-width: 2; }
  .newsmap-filters { gap: 5px; }
  .newsmap-filter { padding: 6px 11px; font-size: 12.5px; }
  .newsmap-route-detail { margin-top: 20px; border-radius: 10px; }
  .newsmap-route-detail__head, .newsmap-route-disclosure { display: block; }
  .newsmap-route-detail__feature { display: inline-block; margin-top: 12px; }
  .newsmap-route-detail__intro { font-size: 13.5px; }
  .newsmap-route-zoom__districts text, .newsmap-route-terminal-group text { font-size: 20px; }
  .newsmap-route-route-label { font-size: 18px; }
  .newsmap-route-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newsmap-route-card dl div:last-child { grid-column: 1 / -1; }
  .newsmap-route-disclosure a { display: inline-block; margin-top: 10px; }
}

/* "Where this happened" block on an article -------------------------------- */
.article-place { display: grid; gap: 14px; margin: 26px 0; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
@media (min-width: 641px) { .article-place { grid-template-columns: 148px 1fr; align-items: center; gap: 20px; } }
.article-place__map { display: grid; place-items: center; padding: 6px; background: var(--surface-hover); border-radius: 10px; }
.article-place__svg { display: block; width: 100%; max-width: 132px; height: auto; }
.article-place__halo { opacity: 0.16; }
.article-place__no { font-size: 44px; }
.newsmap-pin--gov-fill { fill: var(--map-gov); }
.newsmap-pin--transit-fill { fill: var(--map-transit); }
.newsmap-pin--school-fill { fill: var(--map-school); }
.newsmap-pin--health-fill { fill: var(--map-health); }
.newsmap-pin--life-fill { fill: var(--map-life); }
.newsmap-pin--history-fill { fill: var(--map-history); }
.article-place__eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.article-place h2 { margin: 0 0 5px; font-size: 19px; line-height: 1.4; }
.article-place__addr { margin: 0; color: var(--muted); font-size: 12.5px; }
.article-place__note { margin: 9px 0 12px; color: var(--ink-soft); font-size: 14px; line-height: 1.85; }
.article-place__link { display: inline-block; color: var(--text); font-size: 14px; font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--line-strong); }
.article-place__link:hover { border-bottom-color: var(--text); }

/* Proportional-symbol district map ------------------------------------------
   A sequential ramp: lightness is monotonic across the five steps, so the order
   survives greyscale and every simulated colour-vision deficiency (worst
   adjacent-step dE 8.3 light / 9.5 dark). The palest step sits close to the land
   fill, so every circle carries a stroke — without it the lightest wards would
   disappear rather than read as "low". */
:root {
  --age-1: #cbd8d1;
  --age-2: #f3d193;
  --age-3: #e79f52;
  --age-4: #cf5f33;
  --age-5: #98371c;
  --age-edge: rgba(0, 0, 0, .34);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --age-1: #3d4744;
    --age-2: #6f5d32;
    --age-3: #ac7e40;
    --age-4: #d69d54;
    --age-5: #f4bf78;
    --age-edge: rgba(255, 255, 255, .34);
  }
}
:root[data-theme="dark"] {
  --age-1: #3d4744;
  --age-2: #6f5d32;
  --age-3: #ac7e40;
  --age-4: #d69d54;
  --age-5: #f4bf78;
  --age-edge: rgba(255, 255, 255, .34);
}
.distmap { margin: 4px 0 8px; }
.distmap__svg { display: block; width: 100%; height: auto; max-height: 76vh; margin: 0 auto; }
.distmap__dot { stroke: var(--age-edge); stroke-width: 1; }
.distmap__dot--b1 { fill: var(--age-1); }
.distmap__dot--b2 { fill: var(--age-2); }
.distmap__dot--b3 { fill: var(--age-3); }
.distmap__dot--b4 { fill: var(--age-4); }
.distmap__dot--b5 { fill: var(--age-5); }
.distmap__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; }
.distmap__key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 12.5px; font-weight: 700; }
.distmap__sw { display: inline-block; width: 15px; height: 15px; border: 1px solid var(--age-edge); border-radius: 50%; }
.distmap__sw--b1 { background: var(--age-1); }
.distmap__sw--b2 { background: var(--age-2); }
.distmap__sw--b3 { background: var(--age-3); }
.distmap__sw--b4 { background: var(--age-4); }
.distmap__sw--b5 { background: var(--age-5); }
@media (max-width: 720px) { .distmap__svg { max-height: none; } }

/* Vote ranking with an explicit cut-off ------------------------------------
   The point of the chart is the line between the last winner and the first
   loser, so the losing rows are muted and the boundary is drawn, rather than
   leaving the reader to count to eighteen. */
.vote-rank-list { counter-reset: none; }
.vote-rank .count-bars__track i { background: var(--chart-1); }
.count-bars__row--out .count-bars__label,
.count-bars__row--out .count-bars__value { color: var(--muted); }
.count-bars__row--out .count-bars__track i { background: var(--chart-context); }
.count-bars__row--out:first-of-type { margin-top: 10px; padding-top: 12px; border-top: 2px dashed var(--line-strong); position: relative; }
.count-bars__row--out:first-of-type::before { content: "当選ライン"; position: absolute; top: -9px; left: 0; padding: 0 7px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 800; }

/* Seats vs candidates -------------------------------------------------------
   One bar per election: its full length is how many people stood, and the
   filled part is how many seats there were. The gap between the two is the
   whole point of the chart, so the two segments sit in one track rather than
   in two bars the reader has to compare. */
.seat-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.seat-bars li { display: grid; grid-template-columns: 96px 1fr 54px; gap: 10px; align-items: center; }
.seat-bars__label { color: var(--text); font-size: 13px; font-weight: 800; line-height: 1.3; }
.seat-bars__label small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.seat-bars__track { display: flex; height: 30px; background: var(--surface-hover); border-radius: 5px; overflow: hidden; }
.seat-bars__track i { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; }
.seat-bars__track i span { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
.seat-bars__won { background: var(--chart-1); color: #fff; }
.seat-bars__lost { background: var(--chart-context); color: var(--text); }
.seat-bars__value { color: var(--text); font-size: 15px; font-weight: 800; text-align: right; }
.seat-bars__value small { margin-left: 1px; font-size: 12px; font-weight: 700; }
.seat-bars__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; }
.seat-bars__key { display: inline-flex; align-items: center; color: var(--ink-soft); font-size: 12.5px; font-weight: 700; }
.seat-bars__key::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 6px; border-radius: 3px; }
.seat-bars__key--won::before { background: var(--chart-1); }
.seat-bars__key--lost::before { background: var(--chart-context); }
@media (max-width: 560px) {
  .seat-bars li { grid-template-columns: 78px 1fr 46px; gap: 7px; }
  .seat-bars__label { font-size: 12px; }
  .seat-bars__track { height: 27px; }
  .seat-bars__track i { font-size: 12px; }
}

/* Part of a whole ----------------------------------------------------------
   For "27 of 49" figures. Two separate bars make the reader do the division;
   one track with the total stated above it does not. The headline number is
   the thing worth remembering, so it is set large and first. */
.split-bar { margin: 4px 0 10px; }
.split-bar__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; margin-bottom: 9px; }
.split-bar__total strong { color: var(--text); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.split-bar__total span { color: var(--muted); font-size: 13px; font-weight: 700; }
.split-bar__track { display: flex; height: 48px; background: var(--surface-hover); border-radius: 6px; overflow: hidden; }
.split-bar__track i { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 0 4px; font-style: normal; line-height: 1.2; text-align: center; }
.split-bar__track b { font-size: 17px; font-weight: 800; white-space: nowrap; }
.split-bar__track em { font-size: 12px; font-style: normal; font-weight: 700; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.split-bar__a { background: var(--chart-1); color: #fff; }
.split-bar__b { background: var(--chart-context); color: var(--text); }
.split-bar__c { background: var(--chart-against); color: #fff; }
.split-bar__note { margin: 8px 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.75; }
@media (max-width: 560px) {
  .split-bar__total strong { font-size: 27px; }
  .split-bar__track { height: 44px; }
  .split-bar__track b { font-size: 15px; }
  .split-bar__track em { font-size: 12px; }
}

/* Key points as a standfirst -----------------------------------------------
   The same block is now printed above the contents list, where a reader meets
   it before deciding to read on, so it needs the weight of a lead rather than
   the quieter look it had at the foot of the article. */
.article-key-points--lead { margin: 22px 0 4px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--text); border-radius: 10px; }
.article-key-points--lead h2 { margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.article-key-points--lead ol { margin: 0; padding-left: 1.25em; display: grid; gap: 7px; }
.article-key-points--lead li { color: var(--text); font-size: 15.5px; line-height: 1.85; }
@media (min-width: 721px) { .article-key-points--lead li { font-size: 16px; } }
/* 図の見出しは h2 でも従来の大きさを保つ */
.data-figure__header h2 { margin: 6px 0 0; font-size: 18px; line-height: 1.3; }

/* Homepage tidying ----------------------------------------------------------
   The two theme grids used to be separate sections with a heading and a lead
   paragraph each, which read as two lists doing the same job. They now share
   one heading, so the second grid needs the tighter top spacing. */
.section-space--tight { padding-top: 0; }
.home-themes + .home-themes { margin-top: -6px; }
.reporter-note__actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }

/* The editor's point of view follows the headlines, rather than delaying them. */
.tom-message { background: var(--tint-page); border-bottom: 1px solid var(--line); }
.tom-message__inner { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px 15px; padding-block: 20px; }
.tom-message__inner > img { width: 74px; height: 88px; object-fit: cover; object-position: 57% 30%; border-radius: 8px; }
.tom-message__body .eyebrow { margin-bottom: 3px; color: var(--green-dark); font-size: 12px; font-weight: 900; }
.tom-message__body h2 { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -.02em; }
.tom-message__body > p:not(.eyebrow) { margin: 7px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.75; }
.tom-message__body small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.tom-message__actions { display: flex; grid-column: 1 / -1; align-items: center; flex-wrap: wrap; gap: 5px 16px; margin: 0; }
.tom-message__actions .button { min-height: 40px; padding: 7px 15px; color: #fff; background: #0a7048; border-color: #0a7048; font-size: 12px; }
.tom-message__actions .button:hover { color: #fff; background: #07583a; border-color: #07583a; }
.tom-message__actions > a:not(.button) { display: inline-flex; min-height: 40px; align-items: center; font-size: 12px; font-weight: 800; }
@media (min-width: 721px) {
  .tom-message__inner { grid-template-columns: 112px minmax(0, 1fr) 180px; align-items: center; gap: 26px; padding-block: 27px; }
  .tom-message__inner > img { width: 112px; height: 112px; }
  .tom-message__body h2 { font-size: 25px; }
  .tom-message__body > p:not(.eyebrow) { font-size: 14px; }
  .tom-message__body small { font-size: 12px; }
  .tom-message__actions { grid-column: auto; align-items: stretch; flex-direction: column; }
  .tom-message__actions .button,
  .tom-message__actions > a:not(.button) { justify-content: center; text-align: center; }
}

/* Timeline ------------------------------------------------------------------
   Past and scheduled events share one column and one rule, because the point
   of the page is that the next election sits on the same line as the last one.
   Future entries are drawn with a hollow marker rather than moved elsewhere. */
:root {
  --tl-gov: #397dd4;
  --tl-data: #70609a;
  --tl-transit: #af4709;
  --tl-health: #8f5b61;
  --tl-life: #b4745a;
  --tl-history: #917e9c;
  --tl-rule: var(--line-strong);
}
.timeline { list-style: none; margin: 18px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 9px; width: 2px; background: var(--tl-rule); }
@media (min-width: 721px) { .timeline::before { left: 92px; } }
.timeline__item { position: relative; padding: 0 0 22px 32px; }
@media (min-width: 721px) { .timeline__item { padding-left: 116px; } }
.timeline__marker { position: absolute; left: 0; top: 3px; width: 20px; display: grid; place-items: center; }
@media (min-width: 721px) { .timeline__marker { left: 83px; } }
.timeline__dot { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--tl-gov); box-shadow: 0 0 0 4px var(--surface); }
.timeline__dot--gov { background: var(--tl-gov); }
.timeline__dot--data { background: var(--tl-data); }
.timeline__dot--transit { background: var(--tl-transit); }
.timeline__dot--health { background: var(--tl-health); }
.timeline__dot--life { background: var(--tl-life); }
.timeline__dot--history { background: var(--tl-history); }
.timeline__item--future .timeline__dot { background: var(--surface); border: 3px solid var(--tl-rule); }
.timeline__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin: 0 0 3px; }
.timeline__when strong { color: var(--text); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.timeline__when span { color: var(--muted); font-size: 13px; font-weight: 700; }
@media (min-width: 721px) {
  .timeline__when { position: absolute; left: 0; top: 0; width: 74px; display: block; text-align: right; }
  .timeline__when strong { display: block; font-size: 16px; }
  .timeline__when span { display: block; margin-top: 1px; font-size: 12px; }
  .timeline__cat { display: none !important; }
}
.timeline__cat { display: inline-block; padding: 1px 8px; border-radius: 999px; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; }
.timeline__cat--gov { background: var(--tl-gov); }
.timeline__cat--data { background: var(--tl-data); }
.timeline__cat--transit { background: var(--tl-transit); }
.timeline__cat--health { background: var(--tl-health); }
.timeline__cat--life { background: var(--tl-life); }
.timeline__cat--history { background: var(--tl-history); }
.timeline__body h2 { margin: 0 0 5px; font-size: 17px; line-height: 1.45; }
@media (min-width: 721px) { .timeline__body h2 { font-size: 18px; } }
.timeline__desc { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.8; }
.timeline__link { display: inline-block; margin-top: 7px; color: var(--text); font-size: 13.5px; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--line-strong); }
.timeline__link:hover { border-bottom-color: var(--text); }
.timeline__now { position: relative; margin: 4px 0 22px; padding: 10px 0 10px 32px; border-top: 2px dashed var(--text); border-bottom: 2px dashed var(--text); }
@media (min-width: 721px) { .timeline__now { padding-left: 116px; } }
.timeline__now-label { display: block; color: var(--text); font-size: 14px; font-weight: 800; }
.timeline__now-note { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.timeline__note { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.8; }
.timeline-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.timeline-filter { padding: 7px 13px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-soft); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.timeline-filter:hover { background: var(--surface-hover); }
.timeline-filter.is-on { background: var(--text); border-color: var(--text); color: var(--surface); }
.timeline-filter i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; }
.timeline-filter--gov i { background: var(--tl-gov); }
.timeline-filter--data i { background: var(--tl-data); }
.timeline-filter--transit i { background: var(--tl-transit); }
.timeline-filter--health i { background: var(--tl-health); }
.timeline-filter--life i { background: var(--tl-life); }
.timeline-filter--history i { background: var(--tl-history); }
.timeline-crosslink { display: grid; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
@media (min-width: 721px) { .timeline-crosslink { grid-template-columns: 1fr auto; align-items: center; gap: 22px; } }
.timeline-crosslink h2 { margin: 0 0 5px; font-size: 18px; }
.timeline-crosslink p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }

/* History as a visual learning page ---------------------------------------- */
.history-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.history-hero-actions .button, .history-print-button { min-height: 42px; padding: 8px 17px; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.history-print-button { color: #fff; background: transparent; border: 1px solid rgb(255 255 255 / 55%); }
.history-print-button:hover { color: var(--ink); background: #fff; }
.history-section-heading { max-width: 780px; margin-bottom: 20px; }
.history-section-heading h2 { margin: 0; font-size: clamp(26px, 7vw, 38px); line-height: 1.35; letter-spacing: -.035em; }
.history-section-heading > p:last-child { margin: 9px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.85; }
.history-era-grid { display: grid; gap: 13px; }
.history-era-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.history-era-card > img, .history-era-card__visual { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #dcefe8; }
.history-era-card__visual svg { display: block; width: 100%; height: 100%; }
.history-era-card__body { padding: 17px; }
.history-era-card time { display: block; margin-bottom: 5px; color: var(--green-dark); font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.history-era-card h3 { margin: 0 0 7px; font-size: 19px; line-height: 1.45; }
.history-era-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.history-era-card small { display: block; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; }
.history-era-card small a { color: inherit; }
.history-before-note { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; margin-top: 18px; padding: 18px; background: var(--note-bg); border-left: 4px solid var(--yellow); border-radius: 8px; color: var(--note-ink); }
.history-before-note__mark { display: grid; width: 40px; height: 40px; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 50%; font-size: 22px; font-weight: 900; }
.history-before-note h2 { margin: 0 0 6px; font-size: 17px; }
.history-before-note p { margin: 0; font-size: 12.5px; line-height: 1.8; }
.history-before-note a { display: inline-block; margin-top: 8px; color: inherit; font-size: 12px; font-weight: 800; }
.history-population { display: grid; gap: 20px; margin-top: 32px; padding: 22px; color: #fff; background: #182c25; border-radius: 12px; }
.history-population .eyebrow { color: #8fe0c4; }
.history-population h2 { margin: 0; font-size: clamp(23px, 6vw, 32px); line-height: 1.4; }
.history-population__intro > p:last-child { margin: 10px 0 0; color: #d9e4df; font-size: 13px; line-height: 1.85; }
.history-population-chart { margin: 0; }
.history-population-chart ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.history-population-chart li { display: grid; grid-template-columns: 54px minmax(0, 1fr) 72px; align-items: center; gap: 8px; }
.history-population-chart li > span { color: #c7d6cf; font-size: 12px; font-weight: 800; }
.history-population-chart li > i { display: block; height: 24px; overflow: hidden; background: rgb(255 255 255 / 12%); border-radius: 3px; }
.history-population-chart li > i::before { display: block; width: var(--history-value); height: 100%; background: #f0bd35; content: ""; }
.history-population-chart strong { font-size: 13px; text-align: right; white-space: nowrap; }
.history-population-chart strong small { margin-left: 2px; font-size: 12px; }
.history-population-chart figcaption { margin-top: 13px; color: #b9c9c1; font-size: 12px; line-height: 1.65; }
.history-line { scroll-margin-top: 24px; }
.history-section-heading--line { margin-bottom: 18px; }
.history-era-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.history-era-overview li { min-height: 118px; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--tl-history); border-radius: 8px; }
.history-era-overview li:nth-child(2) { border-top-color: var(--tl-life); }
.history-era-overview li:nth-child(3) { border-top-color: var(--tl-gov); }
.history-era-overview li:nth-child(4) { border-top-color: var(--tl-transit); }
.history-era-overview li:nth-child(5) { grid-column: 1 / -1; border-top-color: var(--tl-data); }
.history-era-overview time { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.history-era-overview strong { display: block; margin-top: 7px; font-size: 15px; line-height: 1.45; }
.history-era-overview span { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.timeline-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px 20px; margin: 24px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.timeline-controls > p { margin: 0; color: var(--muted); font-size: 12px; }
.timeline-view-controls { display: inline-flex; padding: 3px; background: var(--chip-bg); border: 1px solid var(--line); border-radius: 999px; }
.timeline-view-toggle { min-height: 38px; padding: 7px 13px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.timeline-view-toggle span { margin-left: 3px; color: var(--muted); font-size: 12px; }
.timeline-view-toggle.is-on { color: #fff; background: #075d43; }
.timeline-view-toggle.is-on span { color: #d9e9e3; }
.timeline-view-toggle:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.history-classroom { padding-top: 0; }
.history-question-grid { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.history-question-grid li { position: relative; min-height: 160px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 9px; }
.history-question-grid li > span { display: block; color: var(--green-dark); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.history-question-grid strong { display: block; margin-top: 9px; font-size: 17px; line-height: 1.5; }
.history-question-grid p { margin: 8px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.75; }
.history-glossary { margin-top: 22px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.history-glossary h3 { margin: 0 0 13px; font-size: 18px; }
.history-glossary dl { display: grid; gap: 0; margin: 0; }
.history-glossary dl > div { padding: 12px 0; border-top: 1px solid var(--line); }
.history-glossary dt { font-size: 14px; font-weight: 900; }
.history-glossary dt span { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.history-glossary dd { margin: 4px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.75; }
.history-classroom__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

@media (min-width: 721px) {
  .history-hero-actions { margin-top: 22px; }
  .history-era-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .history-era-card__body { padding: 20px; }
  .history-before-note { grid-template-columns: 52px minmax(0, 1fr); gap: 18px; margin-top: 22px; padding: 23px 25px; }
  .history-before-note__mark { width: 48px; height: 48px; font-size: 25px; }
  .history-before-note h2 { font-size: 20px; }
  .history-before-note p { font-size: 14px; }
  .history-population { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 38px; margin-top: 42px; padding: 32px 36px; }
  .history-population-chart li { grid-template-columns: 70px minmax(0, 1fr) 92px; gap: 12px; }
  .history-population-chart li > i { height: 29px; }
  .history-population-chart strong { font-size: 16px; }
  .history-era-overview { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .history-era-overview li, .history-era-overview li:nth-child(5) { grid-column: auto; min-height: 132px; padding: 17px; }
  .history-era-overview strong { font-size: 16px; }
  .history-era-overview span { font-size: 12px; }
  .history-question-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .history-question-grid li { padding: 22px; }
  .history-glossary { padding: 24px 28px; }
  .history-glossary dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
}

@media print {
  .timeline-page .topic-hero { color: #000; background: #fff; border-bottom: 2px solid #000; }
  .timeline-page .breadcrumbs, .history-hero-actions, .timeline-controls, .timeline-filters, .history-classroom__actions, .timeline-crosslink { display: none !important; }
  .timeline-page .topic-hero__description, .timeline-page .topic-hero__meta { color: #333; }
  .history-era-grid, .history-question-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history-population { color: #000; background: #fff; border: 2px solid #000; }
  .history-population .eyebrow, .history-population__intro > p:last-child, .history-population-chart figcaption { color: #333; }
  .history-era-card, .history-before-note, .history-population, .history-question-grid li, .timeline__body { break-inside: avoid; box-shadow: none; }
}

/* Homepage: chronology and the folded-in data report ------------------------
   The countdown and the timeline are the same subject — when things happen —
   so the link to the chronology lives with the countdown rather than in a
   section of its own. The data report is now a footer inside 市政を深く知る,
   which is where a reader who wants the long view already is. */
.election-clock__link { margin: 10px 0 0; }
.election-clock__link a { color: inherit; font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; opacity: .9; }
.election-clock__link a:hover { opacity: 1; }
.issues-section .report-spotlight { margin-top: 22px; }
.issues-section .report-spotlight h3 { margin: 0; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }

/* Purpose-first routes ------------------------------------------------------
   The masthead explains what the publication is; this row answers what a
   reader can do next. Colour is a stable category cue and every card repeats
   the meaning in text, so hue is never the only signal. */
.home-routes { padding-block: 20px; background: var(--tint-page); border-bottom: 1px solid var(--line); }
.home-routes__heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 12px; }
.home-routes__heading h2 { margin: 0; font-size: 18px; line-height: 1.35; }
.home-routes__heading p { margin: 0; color: var(--muted); font-size: 12px; }
.home-routes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.home-route { --route-accent: var(--tl-gov); display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 1px 9px; min-height: 94px; padding: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--route-accent); border-radius: 8px; text-decoration: none; }
.home-route > span { grid-row: 1 / span 2; color: var(--route-accent); font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.home-route strong { font-size: 14px; line-height: 1.45; }
.home-route small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.home-route--life { --route-accent: var(--tl-life); }
.home-route--timeline { --route-accent: var(--tl-data); }
.home-route--data { --route-accent: var(--tl-transit); }
.home-route:hover { background: var(--surface-hover); border-color: var(--route-accent); }
.home-route:focus-visible { outline: 3px solid var(--route-accent); outline-offset: 3px; }
.home-news__header > p small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
@media (min-width: 721px) {
  .home-routes { padding-block: 26px; }
  .home-routes__heading { margin-bottom: 16px; }
  .home-routes__heading h2 { font-size: 22px; }
  .home-routes__heading p { font-size: 13px; }
  .home-routes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .home-route { min-height: 112px; padding: 17px; }
  .home-route strong { font-size: 16px; }
  .home-route small { font-size: 12px; }
}

/* Chronology controls and time-aware wayfinding ---------------------------- */
.timeline-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.timeline-summary div { padding: 13px 10px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--tl-history); border-radius: 8px; text-align: center; }
.timeline-summary div:nth-child(2) { border-top-color: var(--tl-data); }
.timeline-summary div:nth-child(3) { border-top-color: var(--tl-gov); }
.timeline-summary strong { display: block; color: var(--text); font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.timeline-summary span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.timeline-filter-status { display: inline-flex; align-items: center; min-height: 34px; margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.timeline__body { padding: 13px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--tl-gov); border-radius: 9px; }
.timeline__item[data-cat="data"] .timeline__body { border-left-color: var(--tl-data); }
.timeline__item[data-cat="transit"] .timeline__body { border-left-color: var(--tl-transit); }
.timeline__item[data-cat="health"] .timeline__body { border-left-color: var(--tl-health); }
.timeline__item[data-cat="life"] .timeline__body { border-left-color: var(--tl-life); }
.timeline__item[data-cat="history"] .timeline__body { border-left-color: var(--tl-history); }
.timeline__item--future .timeline__body { background: var(--tint-page); border-style: dashed; }
.timeline-filter:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
@media (min-width: 721px) {
  .timeline-summary { gap: 12px; margin-bottom: 22px; }
  .timeline-summary div { padding: 18px; }
  .timeline-summary strong { font-size: 34px; }
  .timeline-summary span { font-size: 12px; }
  .timeline-filters { position: sticky; z-index: 5; top: 0; padding-block: 10px; background: color-mix(in srgb, var(--tint-page) 94%, transparent); backdrop-filter: blur(8px); }
  .timeline-filter-status { margin-left: auto; }
}

/* Publication-order navigation --------------------------------------------- */
.article-chronology { margin: 34px 0; padding-top: 24px; border-top: 1px solid var(--line); }
.article-chronology h2 { margin: 0 0 12px; font-size: 18px; }
.article-chronology__grid { display: grid; gap: 8px; }
.article-chronology__item { display: grid; gap: 5px; min-height: 118px; padding: 15px 16px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; text-decoration: none; }
.article-chronology__item > span { color: var(--green-dark); font-size: 12px; font-weight: 900; }
.article-chronology__item strong { font-size: 14px; line-height: 1.55; }
.article-chronology__item time { align-self: end; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.article-chronology__item--newer { text-align: right; }
.article-chronology__item:hover { background: var(--surface-hover); border-color: var(--green-dark); }
@media (min-width: 641px) {
  .article-chronology__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .article-chronology__item--newer:only-child { grid-column: 2; }
  .article-chronology__item strong { font-size: 15px; }
}

/* Chart reading aids --------------------------------------------------------
   A single blue rule identifies quantitative figures site-wide. Subtle
   quarter guides make lengths easier to compare without adding a dense axis. */
.data-figure { --figure-accent: var(--chart-1); border-top: 4px solid var(--figure-accent); }
.data-figure[role="group"] { scroll-margin-top: 70px; }
.count-bars__track,
.topic-data-bars__track { position: relative; }
.count-bars__track::after,
.topic-data-bars__track::after { position: absolute; z-index: 2; inset: 0; pointer-events: none; content: ""; background: linear-gradient(to right, transparent 24.7%, color-mix(in srgb, var(--text) 17%, transparent) 25%, transparent 25.3%, transparent 49.7%, color-mix(in srgb, var(--text) 17%, transparent) 50%, transparent 50.3%, transparent 74.7%, color-mix(in srgb, var(--text) 17%, transparent) 75%, transparent 75.3%); }
.count-bars li:hover .count-bars__label,
.count-bars li:hover .count-bars__value { color: var(--green-dark); }
.count-bars__value,
.topic-data-bars__value,
.hero-figure__number { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .count-bars li { grid-template-columns: minmax(78px, 1.1fr) minmax(72px, 1.7fr) minmax(48px, auto); gap: 7px; }
  .count-bars__label { overflow-wrap: anywhere; font-size: 12px; line-height: 1.35; }
  .count-bars__value { font-size: 12px; }
}

/* "When did this happen" block on an article --------------------------------
   A short stretch of the chronology rather than a single date: the event
   before and after are what turn a fact into a sequence. */
.article-when { margin: 26px 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.article-when__eyebrow { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.article-when__list { list-style: none; margin: 0; padding: 0; position: relative; }
.article-when__list::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 6px; width: 2px; background: var(--line-strong); }
.article-when__item { position: relative; display: grid; grid-template-columns: 1fr; gap: 1px; padding: 0 0 13px 26px; }
@media (min-width: 561px) { .article-when__item { grid-template-columns: 118px 1fr; gap: 12px; align-items: baseline; } }
.article-when__dot { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; }
.article-when__item.is-future .article-when__dot { background: var(--surface); border: 3px solid var(--line-strong); }
.article-when__when { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.article-when__title { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.article-when__title em { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 700; }
.article-when__item.is-current .article-when__when,
.article-when__item.is-current .article-when__title { color: var(--text); font-weight: 800; }
.article-when__link { display: inline-block; margin-top: 2px; color: var(--text); font-size: 14px; font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--line-strong); }
.article-when__link:hover { border-bottom-color: var(--text); }

/* News-portal home ---------------------------------------------------------
   Lead with one top story and a compact headline desk. The about statement
   remains near the footer, where it supports trust without delaying news. */
.home-news { padding-block: 22px 28px; }
.home-news__header { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 3px solid var(--ink); }
.home-news__header h1 { margin: 0; font-size: 25px; line-height: 1.35; letter-spacing: -.025em; }
.home-news__header .eyebrow { margin-bottom: 2px; color: var(--green-dark); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.home-news__header > p { max-width: 560px; margin: 0; font-size: 12px; line-height: 1.6; }
.home-news__featured-label { margin-bottom: 5px; }
.home-news__grid .article-card:first-of-type { display: block; min-height: 0; }
.home-news__grid .article-card:first-of-type .article-card__media { min-height: 0; aspect-ratio: 16 / 9; }
.home-news__grid .article-card:first-of-type .article-card__body { padding: 13px 0 15px; }
.home-news__grid .article-card:first-of-type .article-card__title { font-size: 20px; line-height: 1.45; }
.home-news__grid .article-card:not(:first-of-type) { border-width: 0 0 1px; border-radius: 0; }
.home-news__all { width: 100%; justify-content: flex-end; margin-top: 8px; border-top: 1px solid var(--line); }
.election-clock { border-top: 0; }

@media (min-width: 721px) {
  .home-news { padding-block: 28px 34px; }
  .home-news__header { margin-bottom: 18px; }
  .home-news__header h1 { font-size: 30px; }
  .home-news__header > p { font-size: 13px; text-align: right; }
  .home-news__grid { grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); grid-auto-flow: row; gap: 0 22px; }
  .home-news__featured-label { grid-column: 1 / -1; }
  .home-news__grid .article-card:first-of-type { grid-column: 1; grid-row: 2 / span 4; align-self: start; border: 0; }
  .home-news__grid .article-card:first-of-type .article-card__body { padding: 14px 2px 0; }
  .home-news__grid .article-card:first-of-type .article-card__title { font-size: 25px; }
  .home-news__grid .article-card:not(:first-of-type) { display: grid; grid-column: 2; grid-template-columns: 118px minmax(0, 1fr); min-height: 102px; }
  .home-news__grid .article-card:not(:first-of-type) .article-card__media { min-height: 101px; aspect-ratio: auto; }
  .home-news__grid .article-card:not(:first-of-type) .article-card__body { padding: 9px 2px 9px 12px; }
  .home-news__grid .article-card:not(:first-of-type) .article-card__title { font-size: 14px; line-height: 1.45; }
  .home-news__grid .article-card:not(:first-of-type) .article-card__meta { margin-top: 4px; font-size: 12px; }
  .home-news__grid .article-card:not(:first-of-type) .article-card__body > p,
  .home-news__grid .article-card:not(:first-of-type) .article-card__read { display: none; }
}

/* Keep the popularity desk beside the lead story, where readers expect it. */
.home-news__layout { display: grid; gap: 24px; }
.home-news__lead { min-width: 0; }
.home-news__lead-grid { display: block; }
.home-news__lead-grid .article-card { border: 0; }
.home-news__lead-grid .article-card__body { padding-inline: 0; }
.home-news__popular { margin: 0; padding: 0; background: transparent; border: 0; }
.home-news__popular .home-popular__header { margin-bottom: 0; padding-bottom: 9px; border-bottom-width: 3px; }
.home-news__popular .home-popular__header h2 { font-size: 19px; }
.home-news__popular .home-popular__list { display: block; background: transparent; border-top: 0; }
.home-news__popular .home-popular__list li,
.home-news__popular .home-popular__list li:first-child { border-top: 1px solid var(--line); border-right: 0; }
.home-news__popular .home-popular__list li:first-child { border-top: 0; }
.home-news__popular .home-popular__list a { display: grid; grid-template-columns: 28px 92px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 86px; padding: 9px 0; }
.home-news__popular .home-popular__rank { align-self: center; margin: 0; padding: 0; font-size: 21px; text-align: center; }
.home-news__popular .home-popular__media { margin: 0; aspect-ratio: 16 / 10; }
.home-news__popular .home-popular__body strong { font-size: 13px; line-height: 1.45; -webkit-line-clamp: 3; }
.home-news__popular .home-popular__note { margin-top: 8px; }

@media (min-width: 721px) {
  .home-news__layout { grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); align-items: start; gap: 26px; }
  .home-news__lead-grid .article-card__media { aspect-ratio: 16 / 10; }
  .home-news__lead-grid .article-card__body { padding: 14px 2px 0; }
  .home-news__lead-grid .article-card__title { font-size: 25px; }
  .home-news__popular .home-popular__header h2 { font-size: 21px; }
}

/* Reviewed English entry --------------------------------------------------- */
.english-edition { background: var(--paper); }
.english-edition h1,
.english-edition h2,
.english-edition strong { text-wrap: balance; }
.english-hero { color: white; background: var(--ink); }
.english-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 92px; align-items: end; gap: 18px; padding-block: 38px 34px; }
.english-hero .eyebrow { color: #8fe0c4; }
.english-hero h1 { max-width: 720px; margin: 0; color: white; font-size: clamp(38px, 11vw, 57px); line-height: 1.04; letter-spacing: -.055em; }
.english-hero__lead { max-width: 680px; margin: 16px 0 0; color: #deded9; font-size: 14px; line-height: 1.75; }
.english-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 22px; }
.english-hero__actions .button { font-size: 12px; }
.english-hero__actions .button span { margin-left: 4px; color: #525252; font-size: 12px; }
.english-hero__actions > a:not(.button) { color: white; font-size: 12px; font-weight: 800; }
.english-hero__author { margin: 0; }
.english-hero__author img { width: 92px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 57% 30%; border: 2px solid rgba(255,255,255,.6); border-radius: 8px; }
.english-hero__author figcaption { margin-top: 7px; line-height: 1.25; }
.english-hero__author strong,
.english-hero__author span { display: block; }
.english-hero__author strong { color: white; font-size: 12px; }
.english-hero__author span { margin-top: 2px; color: #bfc7c4; font-size: 12px; }

.english-statement { background: var(--tint-page); border-bottom: 1px solid var(--line); }
.english-statement__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 29px; }
.english-hero__copy,
.english-hero__author,
.english-statement__inner > *,
.english-election__inner > *,
.english-language-note > * { min-width: 0; }
.english-statement h2 { max-width: 760px; margin: 0; font-size: 25px; line-height: 1.22; letter-spacing: -.035em; }
.english-statement p:not(.eyebrow) { max-width: 790px; margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.english-statement p.english-statement__note { color: var(--muted); font-size: 12px; }

.english-section-heading { max-width: 760px; margin-bottom: 22px; }
.english-section-heading h2 { margin: 0; font-size: clamp(30px, 8vw, 43px); line-height: 1.15; letter-spacing: -.04em; }
.english-section-heading > p:not(.eyebrow) { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.english-latest { border-bottom: 1px solid var(--line); }
.english-latest__heading { margin-bottom: 16px; }
.english-latest__grid { display: grid; gap: 10px; }
.english-latest-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 106px; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; text-decoration: none; }
.english-latest-card:hover { color: var(--text); border-color: var(--news-blue); }
.english-latest-card__media { display: block; background: var(--photo-fallback); }
.english-latest-card__media img { width: 100%; height: 100%; object-fit: cover; }
.english-latest-card__body { display: flex; justify-content: center; flex-direction: column; min-width: 0; padding: 12px; }
.english-latest-card time { color: var(--muted); font-size: 12px; }
.english-latest-card strong { display: -webkit-box; margin-top: 3px; overflow: hidden; font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.english-latest-card em { margin-top: 6px; color: var(--news-blue); font-size: 12px; font-style: normal; font-weight: 900; }
.english-route-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.english-route { --route-accent: var(--green); display: flex; min-height: 188px; flex-direction: column; padding: 18px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--route-accent); border-radius: 8px; text-decoration: none; transition: transform 160ms var(--ease), border-color 160ms var(--ease); }
.english-route:hover { color: var(--text); border-color: var(--route-accent); transform: translateY(-2px); }
.english-route > span { color: var(--route-accent); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.english-route strong { margin-top: 7px; font-size: 20px; line-height: 1.2; }
.english-route p { margin: 9px 0 13px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.english-route em { margin-top: auto; color: var(--text); font-size: 12px; font-style: normal; font-weight: 900; }
.english-route--people { --route-accent: var(--chart-1); }
.english-route--proposal { --route-accent: #b4502b; }
.english-route--data { --route-accent: #7359a8; }
.english-route--map { --route-accent: #167a88; }
.english-route--history { --route-accent: #956d15; }

.english-election { color: white; background: var(--green-dark); }
.english-election__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 32px; }
.english-election .eyebrow { color: #a8e1cf; }
.english-election h2 { margin: 0; color: white; line-height: .9; }
.english-election h2 strong { font-size: clamp(58px, 20vw, 92px); font-variant-numeric: tabular-nums; letter-spacing: -.065em; }
.english-election__inner > div:last-child { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; }
.english-election__inner p:not(.eyebrow) { max-width: 510px; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.35; }
.english-election__inner small { max-width: 570px; margin-top: 8px; color: #c7ded6; font-size: 12px; line-height: 1.6; }
.english-election__inner a { margin-top: 14px; color: white; font-size: 12px; font-weight: 900; }

.english-language-note { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-block: 26px 52px; padding-block: 20px; border-block: 1px solid var(--line-strong); }
.english-language-note h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.english-language-note > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }

@media (min-width: 721px) {
  .english-hero__inner { grid-template-columns: minmax(0, 1fr) 160px; gap: 44px; padding-block: 66px 58px; }
  .english-hero h1 { font-size: clamp(56px, 6vw, 78px); }
  .english-hero__lead { font-size: 18px; }
  .english-hero__actions .button { font-size: 13px; }
  .english-hero__author img { width: 160px; }
  .english-hero__author strong { font-size: 15px; }
  .english-hero__author span { font-size: 12px; }
  .english-statement__inner { grid-template-columns: 170px minmax(0, 1fr); gap: 40px; padding-block: 48px; }
  .english-statement h2 { font-size: 36px; }
  .english-statement p:not(.eyebrow) { font-size: 15px; }
	.english-latest__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.english-latest-card { display: block; }
	.english-latest-card__media { aspect-ratio: 16 / 9; }
	.english-latest-card__body { min-height: 142px; padding: 15px; }
	.english-latest-card strong { font-size: 14px; }
  .english-route-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .english-route { min-height: 230px; padding: 22px; }
  .english-route strong { font-size: 24px; }
  .english-route p { font-size: 13px; }
  .english-route em { font-size: 12px; }
  .english-election__inner { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 52px; padding-block: 48px; }
  .english-election__inner p:not(.eyebrow) { font-size: 23px; }
  .english-election__inner small { font-size: 12px; }
  .english-language-note { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 48px; margin-block: 44px 76px; padding-block: 28px; }
  .english-language-note > p { font-size: 14px; }
}

@media (max-width: 420px) {
  .site-nav__list--english a { font-size: 12px; letter-spacing: -.02em; }
  .english-hero__inner { grid-template-columns: minmax(0, 1fr) 74px; gap: 12px; }
  .english-hero__author img { width: 74px; }
}

@media (max-width: 720px) {
  .site-header__search { flex: 1 1 170px; max-width: none; }
  .language-switch,
  .theme-toggle { flex: 0 0 auto; }
  .independent-label { flex: 1 0 100%; }
}

/* Tomiya Quiz ------------------------------------------------------------- */
.site-footer__quiz { display: inline-flex; min-height: 44px; align-items: center; margin-top: 9px; color: var(--green-bright); font-size: 13px; font-weight: 900; }

.quiz-promo { color: white; background: var(--green-dark); }
.quiz-promo__inner { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 12px 15px; padding-block: 24px; }
.quiz-promo__mark { display: grid; width: 62px; aspect-ratio: 1; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 50%; transform: rotate(-4deg); }
.quiz-promo__mark span { grid-area: 1 / 1; margin-top: -8px; font-size: 36px; font-weight: 950; line-height: 1; }
.quiz-promo__mark small { grid-area: 1 / 1; align-self: end; margin-bottom: 7px; font-size: 12px; font-weight: 900; }
.quiz-promo .eyebrow { margin-bottom: 2px; color: #a8e1cf; }
.quiz-promo h2 { margin: 0; color: white; font-size: 22px; line-height: 1.25; letter-spacing: -.03em; }
.quiz-promo__copy > p:not(.eyebrow) { margin: 7px 0 0; color: #d6e6e0; font-size: 12px; line-height: 1.65; }
.quiz-promo .button { grid-column: 1 / -1; width: 100%; }

.quiz-hero { color: white; background: var(--ink); }
.quiz-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: end; gap: 18px; min-height: 550px; padding-block: 42px 38px; }
.quiz-hero .eyebrow { color: #8fe0c4; }
.quiz-hero h1 { margin: 0; color: white; font-size: clamp(52px, 15vw, 76px); line-height: .98; letter-spacing: -.07em; }
.quiz-hero__copy > p:not(.eyebrow, .quiz-noscript) { max-width: 590px; margin: 17px 0 0; color: #d7d7d7; font-size: 14px; line-height: 1.8; }
.quiz-hero__facts { display: flex; gap: 7px; margin: 22px 0; padding: 0; list-style: none; }
.quiz-hero__facts li { min-width: 68px; padding: 9px 10px; color: #bfc4c2; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 6px; font-size: 12px; text-align: center; }
.quiz-hero__facts strong { display: block; color: white; font-size: 20px; line-height: 1.1; }
.quiz-start { min-width: 190px; cursor: pointer; }
.quiz-noscript { color: white; font-size: 12px; }
.quiz-hero__tom { position: relative; margin: 0; }
.quiz-hero__tom > div { position: absolute; top: -36px; right: -4px; z-index: 2; display: grid; width: 55px; height: 55px; place-items: center; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 50% 50% 8px 50%; transform: rotate(7deg); }
.quiz-hero__tom > div span { font-size: 28px; font-weight: 950; }
.quiz-hero__tom img { width: 104px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 57% 30%; border: 2px solid rgba(255,255,255,.6); border-radius: 8px; }
.quiz-hero__tom figcaption { margin-top: 7px; color: #bfc4c2; font-size: 12px; line-height: 1.4; }

.quiz-game { min-height: 720px; background: var(--tint-page); }
.quiz-game__inner { width: min(calc(100% - 28px), 780px); padding-block: 22px 56px; }
.quiz-progress { position: sticky; top: 0; z-index: 6; padding: 12px 0 15px; background: color-mix(in srgb, var(--tint-page) 94%, transparent); backdrop-filter: blur(9px); }
.quiz-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 900; }
.quiz-progress > div:first-child strong { color: var(--text); font-size: 13px; }
.quiz-progress__track { height: 7px; overflow: hidden; background: var(--track); border-radius: 999px; }
.quiz-progress__track i { display: block; width: 10%; height: 100%; background: var(--green); border-radius: inherit; transition: width 260ms var(--ease); }
.quiz-question-list { margin: 0; padding: 0; list-style: none; }
.quiz-question { padding-top: 30px; }
.quiz-question__meta { display: flex; align-items: center; gap: 8px; margin: 0 0 13px; }
.quiz-question__meta span { display: inline-grid; min-width: 45px; min-height: 30px; place-items: center; color: white; background: var(--green-dark); border-radius: 4px; font-size: 12px; font-weight: 950; }
.quiz-question__meta em { color: var(--green-dark); font-size: 12px; font-style: normal; font-weight: 900; }
.quiz-question h2 { margin: 0; color: var(--text); font-size: clamp(24px, 7vw, 38px); line-height: 1.35; letter-spacing: -.035em; }
.quiz-question h2:focus { outline: 0; }
.quiz-choices { display: grid; gap: 9px; margin-top: 27px; }
.quiz-choices button { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 15px; color: var(--text); background: var(--surface); border: 2px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 850; line-height: 1.5; text-align: left; cursor: pointer; transition: border-color 150ms var(--ease), transform 150ms var(--ease), background 150ms var(--ease); }
.quiz-choices button:hover:not(:disabled) { border-color: var(--green-dark); transform: translateY(-1px); }
.quiz-choices button > span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--green-dark); background: var(--green-soft); border-radius: 50%; font-size: 12px; font-weight: 950; }
.quiz-choices button:disabled { cursor: default; }
.quiz-choices button.is-correct { background: var(--green-soft); border-color: var(--green); }
.quiz-choices button.is-correct > span { color: white; background: var(--green-dark); }
.quiz-choices button.is-wrong { background: color-mix(in srgb, var(--red) 9%, var(--surface)); border-color: var(--red); }
.quiz-choices button.is-wrong > span { color: white; background: var(--red); }

.quiz-feedback { margin-top: 17px; padding: 19px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 8px; }
.quiz-feedback__result { margin: 0; font-size: 19px; font-weight: 950; }
.quiz-feedback__result.is-correct { color: var(--green-dark); }
.quiz-feedback__result.is-wrong { color: var(--red); }
.quiz-feedback > p:not(.quiz-feedback__result) { margin: 8px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.quiz-feedback > a { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 900; }
.quiz-feedback .quiz-next { width: 100%; margin-top: 18px; cursor: pointer; }

.quiz-result { min-height: 720px; color: white; background: var(--green-dark); }
.quiz-result__inner { width: min(calc(100% - 28px), 780px); padding-block: 52px 64px; text-align: center; }
.quiz-result .eyebrow { color: #a8e1cf; }
.quiz-result__score { display: flex; align-items: baseline; justify-content: center; margin-top: 6px; line-height: 1; }
.quiz-result__score strong { color: white; font-size: clamp(88px, 30vw, 150px); font-variant-numeric: tabular-nums; letter-spacing: -.09em; }
.quiz-result__score span { margin-left: 10px; color: #c4ddd5; font-size: 14px; font-weight: 800; }
.quiz-result h2 { margin: 12px 0 0; color: white; font-size: clamp(27px, 8vw, 43px); line-height: 1.2; }
.quiz-result h2:focus { outline: 0; }
.quiz-result__inner > p:not(.eyebrow, .quiz-result__best) { max-width: 590px; margin: 12px auto 0; color: #d7e7e1; font-size: 14px; line-height: 1.8; }
.quiz-result__best { display: inline-block; margin: 17px 0 0; padding: 5px 12px; color: var(--ink); background: var(--yellow); border-radius: 999px; font-size: 12px; font-weight: 950; }
.quiz-result__review { margin-top: 28px; padding: 18px; color: var(--text); background: var(--surface); border-radius: 8px; text-align: left; }
.quiz-result__review h3 { margin: 0 0 9px; font-size: 15px; }
.quiz-result__review ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.quiz-result__review a { display: block; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; font-weight: 800; line-height: 1.5; }
.quiz-result__review p { margin: 0; color: var(--muted); font-size: 12px; }
.quiz-result__actions { display: grid; gap: 9px; margin-top: 20px; }
.quiz-result__actions .button { width: 100%; cursor: pointer; }
.quiz-result__actions .quiz-share { color: white; background: transparent; border-color: rgba(255,255,255,.7); }

.quiz-about { display: grid; gap: 16px; }
.quiz-about h2 { margin: 0; font-size: 28px; line-height: 1.25; }
.quiz-about > div:last-child > p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.9; }
.quiz-about small { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.7; }

@media (min-width: 721px) {
  .quiz-promo__inner { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 25px; padding-block: 30px; }
  .quiz-promo__mark { width: 88px; }
  .quiz-promo__mark span { margin-top: -11px; font-size: 48px; }
  .quiz-promo__mark small { margin-bottom: 10px; font-size: 12px; }
  .quiz-promo h2 { font-size: 30px; }
  .quiz-promo__copy > p:not(.eyebrow) { font-size: 13px; }
  .quiz-promo .button { grid-column: auto; width: auto; white-space: nowrap; }
  .quiz-hero__inner { grid-template-columns: minmax(0, 1fr) 230px; gap: 66px; min-height: 650px; padding-block: 76px 68px; }
  .quiz-hero h1 { font-size: clamp(78px, 9vw, 118px); }
  .quiz-hero__copy > p:not(.eyebrow, .quiz-noscript) { font-size: 18px; }
  .quiz-hero__facts li { min-width: 92px; padding: 12px; font-size: 12px; }
  .quiz-hero__facts strong { font-size: 27px; }
  .quiz-hero__tom img { width: 230px; }
  .quiz-hero__tom > div { top: -50px; right: -18px; width: 82px; height: 82px; }
  .quiz-hero__tom > div span { font-size: 42px; }
  .quiz-hero__tom figcaption { font-size: 12px; }
  .quiz-game__inner { padding-block: 34px 88px; }
  .quiz-question { padding-top: 46px; }
  .quiz-choices { gap: 12px; }
  .quiz-choices button { min-height: 74px; padding: 13px 19px; font-size: 17px; }
  .quiz-feedback { padding: 24px 26px; }
  .quiz-feedback > p:not(.quiz-feedback__result) { font-size: 15px; }
  .quiz-feedback .quiz-next { width: auto; min-width: 190px; }
  .quiz-result__inner { padding-block: 76px 90px; }
  .quiz-result__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz-about { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 52px; }
  .quiz-about h2 { font-size: 38px; }
}

@media (max-width: 720px) {
  .quiz-hero__inner { position: relative; display: block; min-height: 550px; padding-bottom: 38px; }
  .quiz-hero h1 { font-size: clamp(48px, 14.2vw, 56px); white-space: nowrap; }
  .quiz-hero__copy { min-width: 0; }
  .quiz-hero__copy > p:not(.eyebrow, .quiz-noscript) { padding-right: 18px; }
  .quiz-hero__tom { position: absolute; right: 14px; bottom: 38px; width: 104px; }
}

/* Course-based quiz entrance: one promise, then three inviting choices. */
.quiz-promo__mark span { margin-top: 0; }
.quiz-hero { position: relative; overflow: hidden; background: #182338; }
.quiz-hero::before { position: absolute; top: -70px; right: -55px; width: 250px; aspect-ratio: 1; border: 38px solid rgba(255,255,255,.035); border-radius: 50%; content: ""; }
.quiz-hero__inner { position: relative; display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 22px; padding-block: 48px 52px; }
.quiz-hero h1 { font-size: clamp(52px, 14vw, 76px); }
.quiz-hero__copy > p.quiz-hero__promise { margin-top: 20px; color: white; font-size: clamp(20px, 6vw, 29px); font-weight: 700; line-height: 1.45; letter-spacing: -.025em; }
.quiz-hero__promise strong { color: #ffd750; }
.quiz-hero__copy > p:not(.eyebrow, .quiz-noscript, .quiz-hero__promise) { max-width: 650px; margin-top: 9px; padding: 0; color: #cbd2dc; font-size: 13px; line-height: 1.75; }
.quiz-hero__mark { position: relative; width: 108px; height: 144px; justify-self: end; }
.quiz-hero__mark span,
.quiz-hero__mark i,
.quiz-hero__mark b { position: absolute; display: grid; width: 72px; aspect-ratio: 1; place-items: center; color: #182338; border: 3px solid #182338; font-size: 42px; font-style: normal; font-weight: 950; line-height: 1; box-shadow: 5px 5px 0 rgba(0,0,0,.18); }
.quiz-hero__mark span { top: 0; right: 2px; z-index: 3; background: #ffd750; transform: rotate(6deg); }
.quiz-hero__mark i { top: 44px; left: 0; z-index: 2; color: white; background: #1976bd; transform: rotate(-8deg); }
.quiz-hero__mark b { right: 0; bottom: 0; color: white; background: #d74638; transform: rotate(4deg); }

.quiz-levels { background: var(--surface); border-bottom: 1px solid var(--line); }
.quiz-levels__inner { padding-block: 34px 48px; }
.quiz-levels__header { max-width: 720px; margin-bottom: 20px; }
.quiz-levels__header .eyebrow { margin-bottom: 4px; }
.quiz-levels__header h2 { margin: 0; font-size: 30px; line-height: 1.25; letter-spacing: -.035em; }
.quiz-levels__header > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.quiz-level-grid { display: grid; gap: 11px; }
.quiz-level-card { --quiz-card-accent: #16805f; position: relative; display: flex; min-height: 220px; flex-direction: column; padding: 20px; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--quiz-card-accent); border-radius: 4px; text-align: left; cursor: pointer; transition: border-color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease); }
.quiz-level-card::after { position: absolute; top: -27px; right: 7px; color: color-mix(in srgb, var(--quiz-card-accent) 8%, transparent); font-size: 130px; font-weight: 950; line-height: 1; content: "?"; pointer-events: none; }
.quiz-level-card--intermediate { --quiz-card-accent: #1976bd; }
.quiz-level-card--advanced { --quiz-card-accent: #c7352d; }
.quiz-level-card:hover { border-color: var(--quiz-card-accent); box-shadow: 0 5px 15px rgba(32,33,36,.12); transform: translateY(-3px); }
.quiz-level-card > span { position: relative; z-index: 1; width: fit-content; padding: 4px 9px; color: white; background: var(--quiz-card-accent); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.quiz-level-card > strong { position: relative; z-index: 1; display: block; margin-top: 13px; font-size: 25px; line-height: 1.25; letter-spacing: -.035em; }
.quiz-level-card > p { position: relative; z-index: 1; margin: 8px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.quiz-level-card > small { position: relative; z-index: 1; display: block; margin-top: 11px; color: var(--muted); font-size: 12px; font-weight: 700; }
.quiz-level-card > b { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 17px; color: var(--quiz-card-accent); border-top: 1px solid var(--line); font-size: 12px; }
.quiz-level-card > b i { display: grid; width: 27px; aspect-ratio: 1; place-items: center; color: white; background: var(--quiz-card-accent); border-radius: 50%; font-style: normal; transition: transform 150ms var(--ease); }
.quiz-level-card:hover > b i { transform: translateX(3px); }

.quiz-game { --quiz-accent: #16805f; }
.quiz-game[data-level="intermediate"] { --quiz-accent: #1976bd; }
.quiz-game[data-level="advanced"] { --quiz-accent: #c7352d; }
.quiz-progress > div:first-child b { color: var(--quiz-accent); }
.quiz-progress__track i,
.quiz-question__meta span { background: var(--quiz-accent); }
.quiz-question__meta em,
.quiz-feedback__result.is-correct { color: var(--quiz-accent); }
.quiz-choices button:hover:not(:disabled) { border-color: var(--quiz-accent); }
.quiz-choices button > span { color: var(--quiz-accent); background: color-mix(in srgb, var(--quiz-accent) 10%, var(--surface)); }
.quiz-choices button.is-correct { background: color-mix(in srgb, var(--quiz-accent) 10%, var(--surface)); border-color: var(--quiz-accent); }
.quiz-choices button.is-correct > span { background: var(--quiz-accent); }
.quiz-feedback { border-left-color: var(--quiz-accent); }

.quiz-result { background: #126447; }
.quiz-result[data-level="intermediate"] { background: #125d94; }
.quiz-result[data-level="advanced"] { background: #a9362c; }
.quiz-result__actions .quiz-course-select { color: white; background: transparent; border-color: rgba(255,255,255,.72); }

@media (min-width: 721px) {
  .quiz-promo__mark span { margin-top: 0; }
  .quiz-hero__inner { grid-template-columns: minmax(0, 1fr) 230px; gap: 70px; padding-block: 66px 70px; }
  .quiz-hero h1 { font-size: clamp(78px, 8vw, 108px); }
  .quiz-hero__copy > p:not(.eyebrow, .quiz-noscript, .quiz-hero__promise) { font-size: 16px; }
  .quiz-hero__mark { width: 215px; height: 218px; }
  .quiz-hero__mark span,
  .quiz-hero__mark i,
  .quiz-hero__mark b { width: 112px; font-size: 66px; border-width: 4px; box-shadow: 8px 8px 0 rgba(0,0,0,.18); }
  .quiz-hero__mark span { right: 8px; }
  .quiz-hero__mark i { top: 73px; }
  .quiz-hero__mark b { right: 14px; }
  .quiz-levels__inner { padding-block: 45px 64px; }
  .quiz-levels__header h2 { font-size: 39px; }
  .quiz-level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .quiz-level-card { min-height: 285px; padding: 24px; }
  .quiz-level-card > strong { font-size: 29px; }
  .quiz-level-card > p { font-size: 14px; }
  .quiz-result__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .quiz-hero__inner { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; padding-block: 44px 46px; }
  .quiz-hero h1 { font-size: clamp(49px, 14vw, 62px); white-space: nowrap; }
  .quiz-hero__copy > p.quiz-hero__promise { font-size: 19px; }
  .quiz-hero__mark { width: 94px; height: 130px; }
  .quiz-hero__mark span,
  .quiz-hero__mark i,
  .quiz-hero__mark b { width: 64px; font-size: 36px; }
  .quiz-result__actions { grid-template-columns: 1fr; }
}

/* Five destinations keep their full names and share the dock evenly. */
@media (max-width: 720px) {
  .site-nav__list:not(.site-nav__list--english) { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: initial; }
  .site-nav__list:not(.site-nav__list--english) a { font-size: 12px; }
}
.article-when__gap { padding: 0 0 13px 26px; color: var(--muted); font-size: 15px; letter-spacing: .2em; }

/* Tomiya grow game --------------------------------------------------------- */
.grow-game-page { --grow-green: #198754; --grow-blue: #4059ad; --grow-yellow: #ffd84d; background: #fff9e9; }
.grow-hero { position: relative; overflow: hidden; color: #fff; background: #173e32; }
.grow-hero::before { position: absolute; top: -90px; right: -80px; width: 280px; aspect-ratio: 1; background: #ffd84d; border-radius: 50%; content: ""; opacity: .95; }
.grow-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 330px; padding-block: 46px; }
.grow-hero .eyebrow { color: #aee5ce; }
.grow-hero h1 { margin: 0; color: #fff; font-size: clamp(44px, 13vw, 58px); line-height: .98; letter-spacing: -.065em; }
.grow-hero h1 + p { max-width: 530px; margin: 20px 0 0; color: #d8e7e1; font-size: 14px; font-weight: 700; line-height: 1.75; }
.grow-hero__produce { display: none; position: relative; width: 112px; height: 210px; }
.grow-hero__produce span,
.grow-hero__produce i { position: absolute; bottom: 9px; width: 12px; height: 150px; background: #f8f2d9; border: 3px solid #173e32; border-radius: 999px; transform-origin: bottom; }
.grow-hero__produce span { left: 27px; transform: rotate(-8deg); }
.grow-hero__produce i { left: 66px; height: 176px; transform: rotate(7deg); }
.grow-hero__produce span::before,
.grow-hero__produce i::before { position: absolute; top: -8px; left: -24px; width: 34px; height: 22px; background: #7fc86c; border: 3px solid #173e32; border-radius: 80% 20% 70% 30%; content: ""; transform: rotate(-20deg); }
.grow-hero__produce b,
.grow-hero__produce em { position: absolute; z-index: 2; width: 43px; aspect-ratio: 1; background: #5265bd; border: 4px solid #173e32; border-radius: 50%; box-shadow: inset 8px 8px 0 rgba(255,255,255,.12); }
.grow-hero__produce b { top: 24px; right: 6px; }
.grow-hero__produce em { top: 63px; right: 36px; }

.grow-picker { width: min(calc(100% - 28px), 980px); }
.grow-picker__header { max-width: 680px; margin-bottom: 22px; }
.grow-picker__header h2 { margin: 0; font-size: clamp(30px, 8vw, 44px); line-height: 1.2; letter-spacing: -.045em; }
.grow-picker__header > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.grow-picker__grid { display: grid; gap: 14px; }
.grow-crop-card { position: relative; display: grid; min-height: 210px; grid-template-columns: 44% minmax(0, 1fr); align-items: center; overflow: hidden; padding: 0; color: #15352a; background: #e7f5de; border: 3px solid #15352a; border-radius: 22px 8px 22px 8px; text-align: left; cursor: pointer; box-shadow: 7px 7px 0 #15352a; transition: transform 140ms var(--ease), box-shadow 140ms var(--ease); }
.grow-crop-card--blueberry { color: #18214b; background: #e4e8ff; border-color: #18214b; box-shadow: 7px 7px 0 #18214b; }
.grow-crop-card:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 currentColor; }
.grow-crop-card:active { transform: translate(4px, 4px); box-shadow: 3px 3px 0 currentColor; }
.grow-crop-card__picture { align-self: stretch; display: grid; place-items: center; padding: 15px; background: rgba(255,255,255,.45); }
.grow-crop-card__picture svg { width: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.grow-crop-card--sprout .grow-crop-card__picture svg path:nth-child(2) { fill: #6db865; }
.grow-crop-card--sprout .grow-crop-card__picture ellipse { fill: #e9d7a5; }
.grow-crop-card--blueberry .grow-crop-card__picture svg g { fill: #5265bd; }
.grow-crop-card__copy { display: block; padding: 20px; }
.grow-crop-card__copy small,
.grow-crop-card__copy strong,
.grow-crop-card__copy em { display: block; }
.grow-crop-card__copy small { font-size: 12px; font-weight: 900; }
.grow-crop-card__copy strong { margin-top: 3px; font-size: clamp(25px, 7vw, 37px); line-height: 1.2; letter-spacing: -.05em; }
.grow-crop-card__copy em { margin-top: 18px; font-size: 12px; font-style: normal; font-weight: 900; }
.grow-crop-card > b { position: absolute; top: 10px; right: 10px; padding: 5px 9px; color: #173e32; background: #ffd84d; border: 2px solid currentColor; border-radius: 999px; font-size: 12px; transform: rotate(4deg); }

.grow-play { --crop-accent: #198754; --crop-dark: #153e31; min-height: 760px; padding-block: 22px 60px; background: #eef8e9; }
.grow-play--blueberry { --crop-accent: #5265bd; --crop-dark: #202b65; background: #f0f2ff; }
.grow-play__inner { width: min(calc(100% - 28px), 760px); }
.grow-play__header { display: grid; gap: 13px; margin-bottom: 16px; }
.grow-play__header > button { width: fit-content; padding: 8px 0; color: var(--crop-dark); background: transparent; border: 0; font-size: 12px; font-weight: 900; cursor: pointer; }
.grow-play__header .eyebrow { color: var(--crop-accent); }
.grow-play__header h2 { margin: 0; color: var(--crop-dark); font-size: clamp(29px, 8vw, 44px); line-height: 1.2; letter-spacing: -.045em; }
.grow-play__header h2:focus { outline: 0; }
.grow-progress { margin-bottom: 13px; }
.grow-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.grow-progress strong { color: var(--crop-dark); font-size: 14px; }
.grow-progress span { color: var(--crop-dark); font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.grow-progress__track { height: 12px; overflow: hidden; background: rgba(255,255,255,.8); border: 2px solid var(--crop-dark); border-radius: 999px; }
.grow-progress__track i { display: block; width: 0; height: 100%; background: var(--crop-accent); transition: width 160ms ease-out; }
.grow-tap { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; color: var(--crop-dark); background: transparent; border: 0; border-radius: 28px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.grow-tap__scene { position: relative; display: block; }
.grow-tap svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 0 rgba(23,62,50,.11)); }
.grow-tap .scene-bg { fill: #dff3d4; stroke: var(--crop-dark); stroke-width: 7; }
.grow-tap--blueberry .scene-bg { fill: #e4e7ff; }
.grow-tap .scene-ground { fill: #b77943; stroke: var(--crop-dark); stroke-width: 6; }
.grow-tap .scene-sun { fill: #ffd84d; stroke: var(--crop-dark); stroke-width: 6; }
.grow-tap .seed { fill: #e8d39c; stroke: var(--crop-dark); stroke-width: 5; }
.grow-tap .sprout-lines { fill: none; stroke: #f7f2dc; stroke-linecap: round; stroke-width: 14; }
.grow-tap .sprout-leaves { fill: #6db865; stroke: var(--crop-dark); stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; }
.grow-tap .harvest-crate { fill: #f0b64c; stroke: var(--crop-dark); stroke-width: 5; }
.grow-tap .berry-stems { fill: none; stroke: #477a47; stroke-linecap: round; stroke-linejoin: round; stroke-width: 9; }
.grow-tap .berry-stems .plant-pot { fill: #d88d56; stroke: var(--crop-dark); stroke-width: 6; }
.grow-tap .berry-leaves { fill: #65a75d; stroke: var(--crop-dark); stroke-width: 5; }
.grow-tap .berry-flowers { fill: #fffdf6; stroke: #e2b942; stroke-width: 5; }
.grow-tap .berries { fill: #5265bd; stroke: var(--crop-dark); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.grow-tap .produce-pack { fill: rgba(255,255,255,.92); stroke: var(--crop-dark); stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; }
.grow-tap .produce-pack .pack-sprouts { fill: none; stroke: #e8dfbc; stroke-width: 13; }
.grow-tap .produce-pack .pack-label { fill: #ffd84d; stroke: var(--crop-dark); }
.grow-tap .produce-pack text { fill: var(--crop-dark); stroke: none; font-family: var(--sans); font-size: 20px; font-weight: 800; text-anchor: middle; }
.grow-tap .produce-pack text.pack-title { font-size: 31px; }
.grow-tap .berry-pack g { fill: #5265bd; stroke: var(--crop-dark); stroke-width: 5; }
.grow-tap .berry-pack .pack-label { fill: #ffd84d; }
.grow-tap [data-grow-reveal] { opacity: 0; transform: translateY(10px) scale(.96); transform-origin: center; transition: opacity 260ms ease-out, transform 320ms cubic-bezier(.2,.9,.25,1.3); }
.grow-tap [data-grow-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); }
.grow-tap__cue { position: absolute; right: 24px; bottom: 21px; z-index: 5; padding: 9px 13px; color: #fff; background: var(--crop-dark); border: 3px solid #fff; border-radius: 999px; font-size: 12px; font-weight: 950; box-shadow: 3px 3px 0 var(--crop-accent); transform: rotate(-2deg); }
.grow-tap:active svg { transform: scale(.985); }
.grow-tap.is-tapped svg { animation: grow-wiggle 260ms ease-out; }
.grow-tap-burst { position: absolute; z-index: 8; color: var(--crop-dark); font-size: 22px; font-style: normal; font-weight: 950; pointer-events: none; transform: translate(-50%, -50%); animation: grow-pop 620ms ease-out forwards; }
.grow-confetti { position: absolute; z-index: 9; inset: 0; overflow: hidden; pointer-events: none; }
.grow-confetti i { position: absolute; top: -8%; left: var(--confetti-x); width: 10px; height: 20px; background: #ffd84d; animation: grow-confetti 1.55s var(--confetti-delay) ease-in forwards; }
.grow-confetti i:nth-child(3n) { background: #ef5b48; }
.grow-confetti i:nth-child(3n + 1) { background: #5265bd; }
.grow-complete { margin-top: 14px; padding: 6px; color: #fff; background: var(--crop-dark); border-radius: 12px; text-align: center; }
.grow-complete__cheer { padding: 12px 12px 15px; }
.grow-complete__cheer strong { display: block; font-size: 20px; }
.grow-complete__cheer p { margin: 3px 0 0; color: rgba(255,255,255,.78); font-size: 12px; }
.grow-learn { position: relative; padding: 18px; color: var(--crop-dark); background: #fffdf5; border-radius: 8px; text-align: left; }
.grow-learn::before { position: absolute; top: -10px; left: 25px; width: 20px; height: 20px; background: #fffdf5; content: ""; transform: rotate(45deg); }
.grow-learn__label { display: inline-block; margin: 0 0 7px; padding: 4px 8px; color: var(--crop-dark); background: var(--crop-accent); border-radius: 3px; font-size: 12px; font-weight: 950; letter-spacing: .04em; }
.grow-learn h3 { margin: 0; color: var(--crop-dark); font-size: 21px; line-height: 1.35; }
.grow-learn > p:not(.grow-learn__label) { margin: 7px 0 0; color: var(--crop-dark); font-size: 12px; font-weight: 700; line-height: 1.75; }
.grow-learn__sources { display: flex; flex-wrap: wrap; gap: 4px 15px; margin-top: 11px; }
.grow-learn__sources a { color: var(--crop-dark); font-size: 12px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.grow-learn__sources a::after { margin-left: 4px; content: "\2197"; }
.grow-play__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.grow-play__actions button { min-height: 42px; padding: 7px 14px; color: var(--crop-dark); background: transparent; border: 1px solid var(--crop-dark); border-radius: 5px; font-size: 12px; font-weight: 900; cursor: pointer; }
.grow-master { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 15px; margin-block: 28px 55px; padding: 22px; color: #173e32; background: #ffd84d; border: 4px solid #173e32; border-radius: 18px 5px 18px 5px; box-shadow: 7px 7px 0 #173e32; }
.grow-master__medal { display: grid; width: 70px; aspect-ratio: 1; place-items: center; color: #ffd84d; background: #173e32; border-radius: 50%; font-size: 35px; }
.grow-master .eyebrow { color: #173e32; }
.grow-master h2 { margin: 0; font-size: 25px; line-height: 1.2; }
.grow-master p { margin: 5px 0 0; font-size: 13px; font-weight: 700; }
.grow-master .button { grid-column: 1 / -1; width: 100%; }
.grow-noscript { padding-block: 30px; }

.quiz-bonus { display: grid; grid-template-columns: 75px minmax(0, 1fr); align-items: center; gap: 16px; margin-bottom: 48px; padding: 20px; color: #173e32; background: #fff5c5; border: 3px solid #173e32; border-radius: 16px 5px 16px 5px; box-shadow: 6px 6px 0 #173e32; }
.quiz-bonus__picture { position: relative; display: block; width: 75px; height: 90px; }
.quiz-bonus__picture::before,
.quiz-bonus__picture::after { position: absolute; content: ""; }
.quiz-bonus__picture::before { bottom: 0; left: 18px; width: 9px; height: 75px; background: #f4edd5; border: 3px solid #173e32; border-radius: 999px; transform: rotate(-8deg); }
.quiz-bonus__picture::after { top: 6px; right: 4px; width: 35px; aspect-ratio: 1; background: #5265bd; border: 3px solid #173e32; border-radius: 50%; box-shadow: -23px 24px 0 #5265bd, 1px 41px 0 #5265bd; }
.quiz-bonus .eyebrow { color: #173e32; }
.quiz-bonus h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.quiz-bonus p:not(.eyebrow) { margin: 6px 0 12px; font-size: 12px; line-height: 1.7; }
.quiz-bonus a { font-size: 12px; font-weight: 900; }

@keyframes grow-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -170%) scale(1.15) rotate(-8deg); } }
@keyframes grow-wiggle { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-1.2deg) scale(.992); } 70% { transform: rotate(1deg); } }
@keyframes grow-confetti { to { top: 110%; transform: rotate(var(--confetti-turn)); } }

@media (min-width: 721px) {
  .grow-hero__inner { grid-template-columns: minmax(0, 1fr) 240px; min-height: 440px; padding-block: 66px; }
  .grow-hero h1 { font-size: clamp(74px, 8vw, 104px); }
  .grow-hero h1 + p { font-size: 17px; }
  .grow-hero__produce { display: block; justify-self: center; width: 190px; height: 275px; transform: scale(1.25); }
  .grow-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .grow-crop-card { min-height: 280px; }
  .grow-play { padding-block: 35px 78px; }
  .grow-play__header { grid-template-columns: 160px minmax(0, 1fr); align-items: end; }
  .grow-progress strong { font-size: 17px; }
  .grow-progress span { font-size: 14px; }
  .grow-complete__cheer strong { font-size: 25px; }
  .grow-learn { padding: 22px 24px; }
  .grow-learn h3 { font-size: 25px; }
  .grow-learn > p:not(.grow-learn__label) { font-size: 13px; }
  .grow-master { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 22px; padding: 28px 32px; }
  .grow-master__medal { width: 88px; font-size: 43px; }
  .grow-master h2 { font-size: 32px; }
  .grow-master .button { grid-column: auto; width: auto; white-space: nowrap; }
  .quiz-bonus { grid-template-columns: 105px minmax(0, 1fr) auto; gap: 25px; padding: 25px 30px; }
  .quiz-bonus__picture { width: 100px; height: 105px; }
  .quiz-bonus h2 { font-size: 29px; }
  .quiz-bonus p:not(.eyebrow) { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .grow-tap [data-grow-reveal],
  .grow-tap.is-tapped svg,
  .grow-tap-burst,
  .grow-confetti i { animation: none; transition: none; }
}

/* Consolidated navigation hubs -------------------------------------------- */
.route-hub-page { background: var(--surface); }
.route-hub-hero { --route-hero-accent: var(--news-blue); position: relative; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: inset 0 -4px 0 var(--route-hero-accent); }
.route-hub-hero--know { --route-hero-accent: #16745f; }
.route-hub-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 24px 34px; }
.route-hub-hero .breadcrumbs { margin-bottom: 28px; }
.route-hub-hero__copy { position: relative; z-index: 1; min-width: 0; }
.route-hub-hero .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; color: var(--route-hero-accent); font-size: 12px; letter-spacing: .06em; }
.route-hub-hero .eyebrow::before { width: 24px; height: 3px; background: currentColor; content: ""; }
.route-hub-hero h1 { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: clamp(42px, 12vw, 62px); line-height: 1.08; letter-spacing: -.055em; }
.route-hub-hero p.route-hub-hero__lead { max-width: 32em; margin: 15px 0 0; overflow-wrap: anywhere; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.route-hub-hero__links { display: flex; flex-wrap: wrap; gap: 7px 22px; margin-top: 22px; }
.route-hub-hero__links a { display: inline-flex; align-items: center; gap: 12px; padding-block: 5px; color: var(--route-hero-accent); border-bottom: 2px solid currentColor; font-size: 13px; font-weight: 900; text-decoration: none; }
.route-hub-hero__links a span { transition: transform 150ms var(--ease); }
.route-hub-hero__links a:hover span { transform: translateX(3px); }
.route-hub-hero__visual { width: 100%; max-width: 470px; min-width: 0; margin: 26px auto 0; }
.route-hub-hero__visual svg { display: block; width: 100%; max-width: 100%; height: auto; }
.route-hub-hero__visual figcaption { margin: 10px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.route-hub-hero__visual figcaption strong { color: var(--ink-soft); font-weight: 800; }

/* 人口の2本線。/mayor-report/ と同じ数字を、入口では結論だけ見せる。 */
.hub-chart__grid line { stroke: var(--line); stroke-width: 1; }
.hub-chart__tick { fill: var(--muted); font-size: 12px; font-weight: 700; }
.hub-chart__wedge { fill: color-mix(in srgb, var(--news-blue) 9%, transparent); }
.hub-chart__line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.hub-chart__line--plan { stroke: var(--news-blue); }
.hub-chart__line--ipss { stroke: var(--news-red); stroke-dasharray: 9 7; }
.hub-chart__dot { stroke: var(--surface); stroke-width: 3; }
.hub-chart__dot--plan { fill: var(--news-blue); }
.hub-chart__dot--ipss { fill: var(--news-red); }
.hub-chart__label { font-size: 13px; font-weight: 900; }
.hub-chart__label .is-plan { fill: var(--news-blue); }
.hub-chart__label .is-ipss { fill: var(--news-red); }

/* 市域の形。座標は地図ページと同じ inc/news-map-data.php から。 */
.hub-map { max-height: 330px; margin-inline: auto; }
.hub-map__outline { fill: color-mix(in srgb, #16745f 7%, var(--surface)); stroke: #16745f; stroke-linejoin: round; stroke-width: 9; }
.hub-map__road { fill: none; stroke: var(--muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10; opacity: .4; }
.hub-map__school { fill: var(--news-blue); opacity: .55; }
.hub-map__pin { fill: var(--news-red); stroke: var(--surface); stroke-width: 5; }

/* 400年を4つの節目で。年表ページの同じ出来事。 */
.hub-era { margin-bottom: 30px; }
.hub-era__head h2,
.hub-facts__head h2 { margin: 0; font-size: 22px; line-height: 1.35; letter-spacing: -.03em; }
.hub-era__head p,
.hub-facts__head p { margin: 7px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.hub-era__list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: none; }
.hub-era__item { position: relative; padding: 16px 16px 16px 20px; background: var(--tint); border-left: 4px solid var(--line); border-radius: 3px; }
.hub-era__item.is-now { background: color-mix(in srgb, #16745f 6%, var(--surface)); border-left-color: #16745f; }
.hub-era__year { display: flex; align-items: baseline; gap: 7px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.hub-era__year small { padding: 2px 7px; color: var(--surface); background: var(--ink-soft); border-radius: 2px; font-size: 12px; font-weight: 800; }
.hub-era__item.is-now .hub-era__year small { background: #16745f; }
.hub-era__year strong { color: var(--text); font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.hub-era h3.hub-era__head-line { margin: 8px 0 0; font-size: 16px; line-height: 1.4; letter-spacing: -.02em; }
.hub-era__value { display: flex; align-items: baseline; gap: 4px; margin: 6px 0 0; }
.hub-era__value strong { font-size: 27px; font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hub-era__value span { color: var(--muted); font-size: 13px; font-weight: 700; }
.hub-era__note { margin: 5px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.hub-era__foot { margin: 14px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.hub-era__foot strong { color: var(--text); font-weight: 900; }
.hub-era__foot a { font-weight: 800; white-space: nowrap; }

/* 現在地の4つの数字。すべて本紙の特設ページに出典がある。 */
.hub-facts { margin-bottom: 30px; }
.hub-facts__list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.hub-fact { display: flex; flex-direction: column; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--news-blue); border-radius: 3px; }
.hub-fact__value { display: flex; align-items: baseline; gap: 4px; margin: 0; color: var(--news-blue); }
.hub-fact__value strong { font-size: 38px; font-weight: 900; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.hub-fact__value span { font-size: 14px; font-weight: 800; }
.hub-facts h3.hub-fact__label { margin: 9px 0 0; font-size: 15px; line-height: 1.4; letter-spacing: -.02em; }
.hub-fact__note { margin: 5px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.hub-fact__link { margin-top: auto; padding-top: 12px; color: var(--news-blue); font-size: 13px; font-weight: 800; text-decoration: none; }
.hub-fact__link:hover { text-decoration: underline; }
.hub-fact__link span { display: inline-block; transition: transform 150ms var(--ease); }
.hub-fact__link:hover span { transform: translateX(3px); }
.route-hub-content__guide { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 800; }
.route-hub-grid { display: grid; gap: 12px; }
.route-hub-card { --route-accent: var(--news-blue); position: relative; display: flex; min-height: 250px; flex-direction: column; padding: 22px 20px 0; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--route-accent); border-radius: 3px; text-decoration: none; transition: border-color 150ms var(--ease), background 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease); }
.route-hub-card:hover { color: var(--text); background: color-mix(in srgb, var(--route-accent) 3%, var(--surface)); border-color: var(--route-accent); box-shadow: 0 7px 18px rgba(32,33,36,.1); transform: translateY(-2px); }
.route-hub-card--proposal { --route-accent: var(--news-red); }
.route-hub-card--map { --route-accent: #16745f; }
.route-hub-card--history { --route-accent: #9a641d; }
.route-hub-card__heading { display: grid; grid-template-columns: minmax(0, 1fr) 66px; align-items: start; gap: 14px; }
.route-hub-card small { display: block; color: var(--route-accent); font-size: 12px; font-weight: 900; }
.route-hub-card h2 { margin: 4px 0 0; color: var(--text); font-size: 30px; line-height: 1.2; letter-spacing: -.04em; }
.route-hub-card__icon { display: grid; width: 66px; aspect-ratio: 1; place-items: center; color: white; background: var(--route-accent); border-radius: 50%; transform: rotate(2deg); }
.route-hub-card:nth-child(even) .route-hub-card__icon { transform: rotate(-3deg); }
.route-hub-card__icon svg { width: 38px; height: 38px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.route-hub-card p.route-hub-card__summary { max-width: 34em; margin: 17px 0 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
.route-hub-card p.route-hub-card__flow { display: flex; align-items: center; gap: 7px; margin: 17px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.route-hub-card__flow b { font-weight: 800; }
.route-hub-card__flow span { color: var(--route-accent); font-weight: 900; }
.route-hub-card strong.route-hub-card__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto -20px 0; padding: 15px 20px; color: var(--route-accent); background: color-mix(in srgb, var(--route-accent) 4%, var(--surface)); border-top: 1px solid var(--line); font-size: 13px; }
.route-hub-card__cta span { display: grid; width: 28px; aspect-ratio: 1; place-items: center; color: white; background: var(--route-accent); border-radius: 50%; transition: transform 150ms var(--ease); }
.route-hub-card:hover .route-hub-card__cta span { transform: translateX(3px); }
.route-hub-note { display: grid; gap: 17px; align-items: center; margin-top: 28px; padding: 22px; background: var(--tint); border-left: 4px solid var(--ink); }
.route-hub-note h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.route-hub-note p { margin: 6px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.route-hub-note .button { width: 100%; }

@media (min-width: 721px) {
  .site-nav__list:not(.site-nav__list--english) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-width: 0; width: 100%; }
  .site-nav__list:not(.site-nav__list--english) a { padding-inline: 8px; text-align: center; }
  .route-hub-hero__inner { grid-template-columns: minmax(0, .95fr) minmax(360px, .75fr); column-gap: clamp(44px, 7vw, 100px); align-items: center; min-height: 430px; padding-block: 32px 42px; }
  .route-hub-hero .breadcrumbs { grid-column: 1 / -1; align-self: start; margin-bottom: 20px; }
  .route-hub-hero h1 { font-size: clamp(58px, 6vw, 78px); }
  .route-hub-hero p.route-hub-hero__lead { font-size: 17px; }
  .route-hub-hero__links a { font-size: 14px; }
  .route-hub-hero__visual { margin: 0; max-width: 500px; }
  .route-hub-hero__visual figcaption { font-size: 13px; }
  .hub-map { max-height: 380px; }
  .hub-era__head h2,
  .hub-facts__head h2 { font-size: 27px; }
  .hub-era__head p,
  .hub-facts__head p { font-size: 14px; }
  .hub-era__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .hub-era__item { padding: 18px 16px 18px 18px; border-left: none; border-top: 4px solid var(--line); border-radius: 0; }
  .hub-era__item + .hub-era__item { border-left: 1px solid var(--line); }
  .hub-era__item.is-now { border-left-color: var(--line); border-top-color: #16745f; }
  .hub-era h3.hub-era__head-line { font-size: 17px; }
  .hub-era__value strong { font-size: 31px; }
  .hub-era__foot { font-size: 14px; }
  .hub-facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .hub-fact { padding: 20px; }
  .hub-facts h3.hub-fact__label { font-size: 16px; }
  .route-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .route-hub-card { min-height: 300px; padding: 30px 30px 0; }
  .route-hub-card__heading { grid-template-columns: minmax(0, 1fr) 82px; }
  .route-hub-card__icon { width: 82px; }
  .route-hub-card__icon svg { width: 47px; height: 47px; }
  .route-hub-card h2 { font-size: 39px; }
  .route-hub-card p.route-hub-card__summary { font-size: 15px; }
  .route-hub-card p.route-hub-card__flow { gap: 9px; font-size: 12px; }
  .route-hub-card strong.route-hub-card__cta { margin-inline: -30px; padding: 17px 30px; font-size: 14px; }
  .route-hub-note { grid-template-columns: minmax(0, 1fr) auto; padding: 25px 28px; }
  .route-hub-note .button { width: auto; white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   Newsroom palette (v0.76)

   Familiar Japanese news-site cues replace the product-dashboard look:
   white paper, blue links, a restrained red signal, square controls and rules
   instead of coloured card surfaces. Dark mode remains an explicit choice.
   --------------------------------------------------------------------------- */

.eyebrow { color: var(--news-red); letter-spacing: .08em; }
.home-news__featured-label { color: var(--news-red); }

.site-header { background: var(--surface); }
.site-header__search,
.language-switch,
.theme-toggle,
.independent-label { border-radius: 3px; }
.site-header__search button { background: var(--news-blue); }
.site-header__search button:hover { background: var(--news-blue-dark); }
.language-switch:hover { color: #fff; background: var(--news-blue); border-color: var(--news-blue); }
.independent-label { border: 0; }

.site-nav { background: var(--surface); border-block: 1px solid var(--line); box-shadow: 0 -1px 4px rgba(32, 33, 36, .08); }
.site-nav__list a { color: var(--text); background: transparent; border-bottom: 3px solid transparent; }
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-parent > a { color: var(--news-blue); background: var(--surface-hover); border-bottom-color: var(--news-blue); }

.button { border-width: 1px; border-radius: 3px; }
.button--dark { color: #fff; background: var(--news-blue); border-color: var(--news-blue); }
.button--dark:hover { color: #fff; background: var(--news-blue-dark); border-color: var(--news-blue-dark); }
.tom-message__actions .button { background: var(--news-blue); border-color: var(--news-blue); }
.tom-message__actions .button:hover { background: var(--news-blue-dark); border-color: var(--news-blue-dark); }

.archive-filter,
.article-card,
.topic-card,
.source-item,
.topic-person,
.topic-explorer__card,
.civic-entry__mayor,
.civic-entry__council,
.data-figure,
.report-ledger article,
.election-questions li,
.money-grid > div,
.money-total,
.timeline article,
.table-scroll,
.comparison-table tr,
.article-brief,
.article-dialogue,
.newsmap-route-detail,
.newsmap-item,
.newsmap-wide__item,
.article-place,
.article-key-points--lead,
.timeline-crosslink,
.history-era-card,
.article-when { border-radius: 3px; box-shadow: none; }

.archive-filter:hover,
.article-card:hover,
.topic-card:hover,
.source-item:hover,
.civic-entry__mayor:hover,
.civic-entry__council:hover,
.topic-person:hover,
.topic-explorer__card:hover { box-shadow: none; transform: none; }

.person-card__photo { background: var(--tint); }
.reading-progress span { background: var(--news-blue); }
.policy-proposal-bridge { background: var(--news-blue-dark); border-radius: 3px; }

/* Feature headers read as sections of a newspaper, rather than dark app pages. */
:root .topic-hero,
:root .policy-hero,
:root .report-hero,
:root .person-hero,
:root .english-hero { color: var(--text); background: var(--tint-page); border-bottom: 3px solid var(--news-blue); }
:root .topic-hero h1,
:root .policy-hero h1,
:root .report-hero h1,
:root .person-hero h1,
:root .english-hero h1 { color: var(--text); }
:root .topic-hero__description,
:root .topic-hero__meta,
:root .policy-hero__lead,
:root .report-hero__lead,
:root .report-hero__meta,
:root .english-hero__lead { color: var(--ink-soft); }
:root .breadcrumbs--on-dark { color: var(--muted); }
:root .breadcrumbs--on-dark a { color: var(--news-blue); }
:root .policy-hero__eyebrow,
:root .person-hero .eyebrow,
:root .english-hero .eyebrow { color: var(--news-red); }
:root .person-hero .text-link { color: var(--news-blue); }
:root .report-hero__number { background: var(--surface); border-color: var(--line); border-radius: 3px; }
:root .report-hero__number > span,
:root .report-hero__number p { color: var(--muted); }
:root .report-hero__number strong { color: var(--text); }

@media (min-width: 721px) {
  .site-nav { box-shadow: none; }
  .site-nav__list a { padding-block: 10px 8px; }
}

@media (max-width: 720px) {
  .site-nav { border-top-color: var(--line-strong); border-bottom: 0; }
  .site-nav__list a { color: var(--text); border-top: 3px solid transparent; border-bottom: 0; }
  .site-nav__list a:hover,
  .site-nav__list .current-menu-item > a,
  .site-nav__list .current-menu-parent > a { color: var(--news-blue); background: #f3f7fb; border-top-color: var(--news-blue); }
}

/* People directory: a lively visual guide to questions, votes and public money. */
.people-page { --people-ink: #173e32; --people-yellow: #ffd84d; --people-blue: #5265bd; --people-red: #c53b2d; --people-green: #7fc86c; padding-bottom: 64px; color: #202326; background: #fff9e9; }
.people-hero { position: relative; overflow: hidden; color: #fff; background: var(--people-ink); }
.people-hero::before { position: absolute; right: -74px; bottom: -92px; width: 230px; aspect-ratio: 1; background: var(--people-yellow); border-radius: 50%; content: ""; }
.people-hero__inner { position: relative; display: grid; min-height: 455px; align-items: center; gap: 20px; padding-block: 42px 48px; }
.people-hero header { position: relative; z-index: 2; }
.people-hero .eyebrow { margin-bottom: 9px; color: #aee5ce; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.people-hero h1 { margin: 0; color: #fff; font-size: clamp(48px, 14vw, 64px); line-height: 1.02; letter-spacing: -.065em; }
.people-hero header > p:last-child { max-width: 560px; margin: 20px 0 0; color: #d8e7e1; font-size: 14px; font-weight: 750; line-height: 1.8; }
.people-hero__visual { justify-self: center; width: min(64vw, 230px); transform: rotate(1.5deg); }
.people-hero__visual svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(8px 9px 0 rgba(0,0,0,.18)); }
.people-hero__sun { fill: var(--people-yellow); stroke: var(--people-ink); stroke-width: 7; }
.people-hero__paper rect { fill: #fffdf5; stroke: var(--people-ink); stroke-width: 7; }
.people-hero__paper circle { fill: #dfeadd; stroke: var(--people-ink); stroke-width: 7; }
.people-hero__paper path { fill: none; stroke: var(--people-ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 7; }
.people-hero__bubble path { fill: var(--people-yellow); stroke: var(--people-ink); stroke-linejoin: round; stroke-width: 7; }
.people-hero__bubble circle { fill: var(--people-ink); }
.people-hero__check { fill: none; stroke: var(--people-green); stroke-linecap: round; stroke-linejoin: round; stroke-width: 14; }
.people-content { position: relative; }
.people-page .person-directory-guide { position: relative; z-index: 3; display: block; margin: -28px 0 58px; padding: 0; background: transparent; border: 0; }
.people-page .person-directory-guide__intro { max-width: 760px; padding: 23px 24px; color: var(--people-ink); background: #fff; border: 3px solid var(--people-ink); border-radius: 18px 6px 18px 6px; box-shadow: 7px 7px 0 var(--people-ink); }
.people-page .person-directory-guide__intro .eyebrow { margin-bottom: 6px; color: var(--people-red); font-size: 12px; font-weight: 950; letter-spacing: .06em; }
.people-page .person-directory-guide__intro h2 { margin: 0; color: var(--people-ink); font-size: 27px; line-height: 1.25; letter-spacing: -.04em; }
.people-page .person-directory-guide__intro > p:last-child { margin: 8px 0 0; color: #46544f; font-size: 13px; font-weight: 650; line-height: 1.75; }
.person-guide-cards { display: grid; gap: 14px; margin-top: 22px; }
.person-guide-card { min-height: 175px; padding: 20px; color: var(--people-ink); background: #e4e8ff; border: 3px solid var(--people-ink); border-radius: 16px 5px 16px 5px; box-shadow: 6px 6px 0 var(--people-ink); }
.person-guide-card--decision { background: #fff0ad; transform: rotate(.35deg); }
.person-guide-card--money { background: #e4f3df; transform: rotate(-.3deg); }
.person-guide-card > span { display: grid; width: 54px; aspect-ratio: 1; place-items: center; color: #fff; background: var(--people-blue); border: 3px solid var(--people-ink); border-radius: 50%; }
.person-guide-card--decision > span { color: var(--people-ink); background: var(--people-yellow); }
.person-guide-card--money > span { background: var(--people-green); }
.person-guide-card svg { width: 36px; height: 36px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.person-guide-card h3 { margin: 14px 0 0; color: var(--people-ink); font-size: 22px; line-height: 1.25; }
.person-guide-card p { margin: 6px 0 0; color: #33473f; font-size: 12px; font-weight: 700; line-height: 1.65; }
.people-page .person-directory-guide__links { display: grid; gap: 9px; margin-top: 22px; padding: 0; border: 0; }
.people-page .person-directory-guide__links a { display: flex; min-height: 52px; align-items: center; justify-content: space-between; padding: 10px 15px; color: var(--people-ink); background: #fff; border: 2px solid var(--people-ink); border-radius: 5px; font-size: 12px; font-weight: 800; text-decoration: none; }
.people-page .person-directory-guide__links a span { font-size: 15px; font-weight: 950; }
.people-page .person-directory-guide__links a::after { display: grid; width: 28px; aspect-ratio: 1; margin: 0; place-items: center; color: #fff; background: var(--people-ink); border-radius: 50%; content: "\2192"; transition: transform 160ms ease; }
.people-page .person-directory-guide__links a:hover { color: var(--people-ink); background: var(--people-yellow); }
.people-page .person-directory-guide__links a:hover::after { transform: translateX(3px); }
.people-directory { padding-top: 2px; }
.people-page .person-group + .person-group { margin-top: 60px; padding-top: 56px; border-top: 4px solid var(--people-ink); }
.people-page .person-group__heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.people-page .person-group__heading > span { display: grid; width: 48px; aspect-ratio: 1; flex: 0 0 auto; place-items: center; color: var(--people-yellow); background: var(--people-ink); border-radius: 50%; }
.people-page .person-group__heading > span svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.people-page .person-group__heading h2 { margin: 0; color: var(--people-ink); font-family: var(--sans); font-size: 31px; line-height: 1.1; letter-spacing: -.045em; }
.people-page .person-group__heading p { margin: 5px 0 0; color: #5e6965; font-size: 12px; font-weight: 700; }
.people-page .person-grid { gap: 18px; }
.people-page .person-card { grid-template-rows: none; overflow: hidden; color: #202326; background: #fff; border: 2px solid var(--people-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--people-ink); transition: transform 170ms ease, box-shadow 170ms ease; }
.people-page .person-card:hover { border-color: var(--people-ink); box-shadow: 6px 6px 0 var(--people-ink); transform: translate(-1px, -1px); }
.people-page .person-group--mayor .person-card { border-color: var(--people-ink); box-shadow: 7px 7px 0 var(--people-yellow), 10px 10px 0 var(--people-ink); }
.people-page .person-card__photo { min-height: 0; background: #e4f3df; border-bottom: 2px solid var(--people-ink); }
.people-page .person-card__photo img { display: block; min-height: 0; background: #e4f3df; }
.people-page .person-card__body { display: flex; flex-direction: column; padding: 17px; }
.people-page .person-card__body .eyebrow { margin-bottom: 4px; color: var(--people-red); font-size: 12px; font-weight: 950; line-height: 1.4; }
.people-page .person-card h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.035em; }
.people-page .person-card h2 a { color: #202326; }
.people-page .person-card__kana { color: #66716d; font-size: 12px; line-height: 1.55; }
.people-page .person-card__affiliation { margin: 4px 0 14px; color: #66716d; font-size: 12px; line-height: 1.55; }
.people-page .person-card__facts { gap: 7px; margin-bottom: 12px; overflow: visible; background: transparent; border: 0; border-radius: 0; }
.people-page .person-card__facts div { padding: 9px; background: #fff9e9; border: 1px solid #d9d2bd; border-radius: 5px; }
.people-page .person-card__facts dt { color: #66716d; font-size: 12px; }
.people-page .person-card__facts dd { color: var(--people-ink); font-size: 12px; }
.people-page .person-card__activity { padding-top: 11px; border-top: 2px solid #e7e1d2; }
.people-page .person-card__activity > strong { color: var(--people-ink); font-size: 12px; }
.people-page .person-card__activity p { color: #59635f; font-size: 12px; line-height: 1.55; }
.people-page .person-card__activity a { color: #126ab5; }
.people-page .person-card__credit { margin-top: auto; padding-top: 16px; color: #77807d; font-size: 12px; line-height: 1.5; }
.people-page .person-card__detail { display: flex; min-height: 44px; align-items: center; justify-content: center; margin-top: 12px; padding: 7px 10px; color: #fff; background: var(--people-ink); border-radius: 4px; font-size: 12px; font-weight: 900; text-decoration: none; }
.people-page .person-card__detail::after { margin-left: 8px; content: "\2192"; }
.people-page .person-card__detail:hover { color: var(--people-ink); background: var(--people-yellow); }

@media (max-width: 359px) {
  .people-page .person-card { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .people-page .person-card__photo { aspect-ratio: 16 / 9; }
  .people-page .person-card__facts div { padding: 7px; }
  .people-page .person-card__facts dt { font-size: 12px; }
  .people-page .person-card__facts dd { font-size: 12px; }
}

@media (min-width: 560px) and (max-width: 720px) {
  .people-page .person-grid--archive:not(.person-grid--mayor) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .people-page .person-grid--archive:not(.person-grid--mayor) .person-card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .people-page .person-grid--archive:not(.person-grid--mayor) .person-card__photo { aspect-ratio: 16 / 9; }
}

@media (min-width: 721px) {
  .people-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .65fr); min-height: 480px; gap: 54px; padding-block: 62px 88px; }
  .people-hero h1 { font-size: clamp(72px, 7vw, 94px); }
  .people-hero header > p:last-child { font-size: 17px; }
  .people-hero__visual { justify-self: end; width: min(31vw, 380px); }
  .people-page .person-directory-guide { margin-top: -42px; }
  .people-page .person-directory-guide__intro { padding: 28px 32px; }
  .people-page .person-directory-guide__intro h2 { font-size: 37px; }
  .people-page .person-directory-guide__intro > p:last-child { font-size: 15px; }
  .person-guide-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
  .person-guide-card { min-height: 215px; padding: 24px; }
  .person-guide-card > span { width: 62px; }
  .person-guide-card h3 { font-size: 27px; }
  .person-guide-card p { font-size: 13px; }
  .people-page .person-directory-guide__links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .people-page .person-group__heading h2 { font-size: 40px; }
  .people-page .person-grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .people-page .person-grid--archive:not(.person-grid--mayor) .person-card { grid-template-rows: auto minmax(0, 1fr); }
  .people-page .person-grid--archive:not(.person-grid--mayor) .person-card__photo { aspect-ratio: 16 / 9; }
  .people-page .person-grid--mayor { display: block; max-width: 760px; }
  .people-page .person-grid--mayor .person-card { grid-template-columns: minmax(240px, .8fr) minmax(300px, 1fr); grid-template-rows: none; }
  .people-page .person-grid--mayor .person-card__photo { border-right: 3px solid var(--people-ink); border-bottom: 0; }
  .people-page .person-grid--mayor .person-card__body { padding: 25px; }
  .people-page .person-card__body { padding: 20px; }
}

@media (min-width: 1080px) {
  .people-page .person-grid--archive:not(.person-grid--mayor) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 議案・会議の記録ページ。記事ではなく記録なので、見出しと事実だけを並べる。 */
.council-record__crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.council-record__crumbs a { font-weight: 700; }
.council-record__head { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.council-record__head h1 { margin: 4px 0 16px; font-size: 24px; line-height: 1.45; }
.council-record__facts { display: grid; grid-template-columns: 1fr; gap: 1px; overflow: hidden; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 10px; }
.council-record__facts div { min-width: 0; padding: 11px 14px; background: var(--surface); }
.council-record__facts dt { color: var(--muted); font-size: 12px; }
.council-record__facts dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 700; }

.council-index__lead { max-width: 62ch; margin: -6px 0 20px; color: var(--ink-soft); font-size: 15px; line-height: 1.85; }
.council-index__empty { margin: 12px 0 0; color: var(--muted); font-size: 14px; }

.council-filter { display: grid; gap: 12px; margin: 0 0 18px; }
.council-filter__search { display: grid; gap: 5px; }
.council-filter__search span { color: var(--muted); font-size: 12px; font-weight: 700; }
.council-filter__search input { width: 100%; max-width: 420px; min-height: 44px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; font-size: 15px; }
.council-filter__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.council-filter__chips .chip { min-height: 36px; padding: 7px 13px; color: var(--ink-soft); background: var(--chip-bg); border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.council-filter__chips .chip:hover { background: var(--surface-hover); }
.council-filter__chips .chip.is-active { color: #fff; background: var(--news-blue-dark); }

.data-table td.is-split { color: #7d1f1f; background: #fae3e3; font-weight: 800; }

.link-list { margin: 0; padding-left: 1.2em; }
.link-list li + li { margin-top: 6px; }

@media (min-width: 700px) {
  .council-record__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .council-record__facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .council-record__head h1 { font-size: 30px; }
}

/* 議員1人の賛否は163件になるため、会議ごとに畳む。 */
.vote-group { margin: 0 0 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.vote-group > summary { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; min-height: 48px; padding: 13px 16px; cursor: pointer; list-style: none; }
.vote-group > summary::-webkit-details-marker { display: none; }
.vote-group > summary::after { flex: none; color: var(--muted); content: "＋"; font-size: 15px; font-weight: 800; }
.vote-group[open] > summary { border-bottom: 1px solid var(--line); }
.vote-group[open] > summary::after { content: "－"; }
.vote-group > summary:hover { background: var(--surface-hover); }
.vote-group__name { font-size: 15px; font-weight: 800; }
.vote-group__meta { color: var(--muted); font-size: 12px; }
.vote-group .scroll-hint { margin: 12px 16px 0; }
.vote-group .table-scroll { margin: 8px 0 0; border: 0; border-radius: 0; }

/* 賛否マトリクスは7会議ぶんになったので、会議の見出しで区切る。 */
.vote-matrix__group th { position: sticky; left: 0; padding: 9px 12px; color: var(--ink-soft); background: var(--chip-bg); font-size: 12px; font-weight: 800; text-align: left; }

/* Mobile density pass -------------------------------------------------------
   A phone is an index first: keep the whole row tappable, but spend far less
   vertical space on photography, summaries and decorative padding. */
@media (max-width: 720px) {
  .container { width: min(calc(100% - 24px), var(--container)); }
  .section-space { padding-block: 21px; }
  .section-space--tight { padding-block: 15px; }
  .section-heading { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px 14px; margin-bottom: 9px; padding-bottom: 6px; }
  .section-heading h2 { font-size: 17px; line-height: 1.35; }
  .section-heading > a { min-height: 32px; flex: 0 0 auto; font-size: 12px; }
  .section-intro,
  .issues-section__intro { display: -webkit-box; margin: 0 0 10px; overflow: hidden; font-size: 12px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

  /* Reusable story cards become compact index rows. */
  .article-grid { gap: 0; }
  .article-card { grid-template-columns: 88px minmax(0, 1fr); min-height: 92px; border-width: 0 0 1px; border-radius: 0; }
  .article-card__media { min-height: 91px; aspect-ratio: auto; }
  .article-card__body { padding: 8px 0 8px 10px; }
  .article-card__body .eyebrow { margin-bottom: 2px; font-size: 12px; }
  .article-card__title { display: -webkit-box; overflow: hidden; font-size: 13.5px; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .article-card__meta { margin-top: 3px; font-size: 12px; }
  .article-card__body > p.article-card__topics,
  .article-card__read { display: none; }

  /* Top story: a lead headline with a thumbnail, not a full-screen billboard. */
  .home-news { padding-block: 15px 18px; }
  .home-news__header { gap: 3px 12px; margin-bottom: 9px; padding-bottom: 8px; border-bottom-width: 2px; }
  .home-news__header h1 { font-size: 20px; line-height: 1.3; }
  .home-news__header > p { font-size: 12px; line-height: 1.5; }
  .home-news__layout { gap: 13px; }
  .home-news__featured-label { margin-bottom: 3px; font-size: 12px; }
  .article-grid--featured-first .article-card:first-child,
  .home-news__lead-grid .article-card:first-child { display: grid; grid-template-columns: 124px minmax(0, 1fr); min-height: 108px; }
  .article-grid--featured-first .article-card:first-child .article-card__media,
  .home-news__lead-grid .article-card:first-child .article-card__media { min-height: 108px; aspect-ratio: auto; }
  .article-grid--featured-first .article-card:first-child .article-card__body,
  .home-news__lead-grid .article-card:first-child .article-card__body { padding: 5px 0 5px 10px; }
  .article-grid--featured-first .article-card:first-child .article-card__title,
  .home-news__lead-grid .article-card:first-child .article-card__title { font-size: 14px; line-height: 1.45; }
  .home-news__lead-grid .article-card__body > p,
  .home-news__lead-grid .article-card__topics,
  .home-news__lead-grid .article-card__read { display: none; }
  .home-news__all { min-height: 36px; margin-top: 2px; font-size: 12px; }
  .home-news__popular .home-popular__header { padding-bottom: 5px; border-bottom-width: 2px; }
  .home-news__popular .home-popular__header h2 { font-size: 16px; }
  .home-popular__header p { font-size: 12px; }
  .home-news__popular .home-popular__list a { grid-template-columns: 18px 70px minmax(0, 1fr); gap: 7px; min-height: 59px; padding: 6px 0; }
  .home-news__popular .home-popular__rank { font-size: 15px; }
  .home-news__popular .home-popular__media { aspect-ratio: 16 / 10; }
  .home-popular__body small { margin-bottom: 1px; font-size: 12px; }
  .home-news__popular .home-popular__body strong { font-size: 12px; line-height: 1.4; -webkit-line-clamp: 2; }

  /* Small utility panels on the home page. */
  .election-clock__inner { padding-block: 12px; }
  .election-clock h2 { margin-bottom: 6px; font-size: 12px; }
  .election-clock__list { gap: 5px; }
  .election-clock__list li { grid-template-columns: 62px 62px minmax(0, 1fr); gap: 2px 6px; padding: 7px 9px; }
  .election-clock__name,
  .election-clock__count { font-size: 12px; }
  .election-clock__count strong { font-size: 18px; }
  .election-clock__when { font-size: 12px; }
  .election-clock__last { display: none; }
  .election-clock__note { margin-top: 6px; font-size: 12px; line-height: 1.45; }
  .election-clock__link { margin-top: 5px; }
  .election-clock__link a { font-size: 12px; }
  .quiz-promo__inner { grid-template-columns: 42px minmax(0, 1fr); gap: 5px 10px; padding-block: 13px; }
  .quiz-promo__mark { width: 42px; }
  .quiz-promo__mark span { font-size: 25px; }
  .quiz-promo .eyebrow { font-size: 12px; }
  .quiz-promo h2 { font-size: 16px; line-height: 1.3; }
  .quiz-promo__copy > p:not(.eyebrow) { display: none; }
  .quiz-promo .button { grid-column: 2; justify-self: start; width: auto; min-height: 36px; padding: 5px 12px; font-size: 12px; }

  /* Six topic cards fit in three short rows. */
  .home-themes + .home-themes { margin-top: -3px; }
  .topic-card-grid,
  .topic-card-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .topic-card,
  .topic-card-grid--compact .topic-card { min-height: 78px; padding: 9px 10px; }
  .topic-card > span { font-size: 12px; }
  .topic-card > strong { margin-top: 1px; font-size: 14px; line-height: 1.3; }
  .topic-card > p,
  .topic-card > small { display: none; }
  .topic-card > em { margin-top: 4px; font-size: 12px; }

  .civic-entry__grid { gap: 6px; }
  .civic-entry__mayor,
  .civic-entry__council { grid-template-columns: 74px minmax(0, 1fr); min-height: 84px; }
  .civic-entry__mayor > img { width: 74px; }
  .civic-entry__mayor > span,
  .civic-entry__council > span:last-child { padding: 8px 10px; }
  .civic-entry__grid small { font-size: 12px; }
  .civic-entry__grid strong { font-size: 14px; }
  .civic-entry__grid em { margin-top: 2px; font-size: 12px; }
  .council-faces { grid-template-columns: repeat(3, 1fr); padding: 5px; }
  .council-faces img { height: 35px; }

  /* The three data facts share one row instead of three oversized panels. */
  .issues-section .report-spotlight { margin-top: 14px; }
  .report-spotlight__intro { padding: 14px; }
  .issues-section .report-spotlight h3 { font-size: 18px; line-height: 1.3; }
  .report-spotlight__intro p { display: -webkit-box; margin: 5px 0 7px; overflow: hidden; font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .report-spotlight__intro > span { font-size: 12px; }
  .report-spotlight__numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-spotlight__numbers div { padding: 9px 8px; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 0; }
  .report-spotlight__numbers div:last-child { border-right: 0; }
  .report-spotlight__numbers dt { min-height: 25px; font-size: 12px; }
  .report-spotlight__numbers dd { margin-top: 3px; }
  .report-spotlight__numbers dd > strong { font-size: clamp(17px, 5vw, 23px); }
  .report-spotlight__numbers small { font-size: 12px; }
  .report-spotlight__numbers dd > span { margin-top: 4px; font-size: 12px; line-height: 1.35; }

  /* News archive: more headlines per screen while retaining full-row links. */
  .archive-heading { margin-bottom: 16px; }
  .archive-heading h1,
  .page-single__header h1,
  .error-page h1 { margin-bottom: 7px; font-size: 22px; line-height: 1.35; }
  .archive-heading > p:not(.eyebrow) { font-size: 12px; line-height: 1.6; }
  .archive-category-tabs { margin: -3px 0 14px; }
  .archive-category-tabs__heading { margin-bottom: 5px; padding-top: 6px; border-top-width: 2px; }
  .archive-category-tabs__heading strong { font-size: 12px; }
  .archive-category-tabs__heading span { font-size: 12px; }
  .archive-category-tabs__scroller { gap: 5px; padding-bottom: 4px; }
  .archive-category-tabs__scroller a { min-height: 34px; gap: 5px; padding: 5px 9px; font-size: 12px; }
  .archive-results { margin-top: 13px; }
  .archive-results__head { gap: 8px; padding: 10px 0 8px; border-top-width: 3px; }
  .archive-results__head h2 { font-size: 18px; }
  .archive-results__head > div:first-child > p:last-child { margin-top: 2px; font-size: 12px; }
  .archive-controls { gap: 5px; }
  .archive-control > span { font-size: 12px; }
  .archive-control a { min-height: 34px; padding: 5px; font-size: 12px; }
  .news-list-item { grid-template-columns: 88px minmax(0, 1fr); gap: 9px; padding: 9px 0; }
  .news-list-item__meta { gap: 2px 6px; margin-bottom: 2px; font-size: 12px; }
  .news-list-item__meta a { display: none; }
  .news-list-item h2 { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

  /* The people directory previously spent several screens before its index. */
  .people-page { padding-bottom: 36px; }
  .people-hero__inner { grid-template-columns: minmax(0, 1fr) 78px; min-height: 0; gap: 10px; padding-block: 21px 25px; }
  .people-hero::before { right: -48px; bottom: -64px; width: 135px; }
  .people-hero .eyebrow { margin-bottom: 4px; font-size: 12px; }
  .people-hero h1 { font-size: 31px; line-height: 1.05; }
  .people-hero header > p:last-child { display: -webkit-box; margin-top: 8px; overflow: hidden; font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .people-hero__visual { width: 78px; }
  .people-page .person-directory-guide { margin: -10px 0 25px; }
  .people-page .person-directory-guide__intro { padding: 12px 14px; border-width: 2px; border-radius: 8px 3px 8px 3px; box-shadow: 3px 3px 0 var(--people-ink); }
  .people-page .person-directory-guide__intro h2 { font-size: 18px; }
  .people-page .person-directory-guide__intro > p:last-child { margin-top: 4px; font-size: 12px; line-height: 1.5; }
  .person-guide-cards { gap: 5px; margin-top: 11px; }
  .person-guide-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 46px; padding: 6px 9px; border-width: 2px; border-radius: 6px 2px 6px 2px; box-shadow: 2px 2px 0 var(--people-ink); transform: none; }
  .person-guide-card > span { grid-row: 1 / span 2; width: 31px; border-width: 2px; }
  .person-guide-card svg { width: 20px; height: 20px; stroke-width: 4; }
  .person-guide-card h3 { margin: 0; font-size: 14px; }
  .person-guide-card p { display: none; }
  .people-page .person-directory-guide__links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
  .people-page .person-directory-guide__links a { min-height: 40px; padding: 5px 7px; font-size: 12px; }
  .people-page .person-directory-guide__links a span { font-size: 12px; }
  .people-page .person-directory-guide__links a::after { display: none; }
  .people-page .person-group + .person-group { margin-top: 28px; padding-top: 25px; border-top-width: 3px; }
  .people-page .person-group__heading { gap: 8px; margin-bottom: 11px; }
  .people-page .person-group__heading > span { width: 34px; }
  .people-page .person-group__heading > span svg { width: 21px; height: 21px; }
  .people-page .person-group__heading h2 { font-size: 21px; }
  .people-page .person-group__heading p { margin-top: 2px; font-size: 12px; }
  .people-page .person-grid { gap: 8px; }
  .people-page .person-card,
  .people-page .person-grid--archive:not(.person-grid--mayor) .person-card { grid-template-columns: 82px minmax(0, 1fr); grid-template-rows: none; min-height: 132px; border-width: 1px; border-radius: 5px; box-shadow: 2px 2px 0 var(--people-ink); }
  .people-page .person-group--mayor .person-card { box-shadow: 3px 3px 0 var(--people-yellow), 5px 5px 0 var(--people-ink); }
  .people-page .person-card__photo,
  .people-page .person-grid--archive:not(.person-grid--mayor) .person-card__photo { min-height: 100%; aspect-ratio: auto; border-right: 1px solid var(--people-ink); border-bottom: 0; }
  .people-page .person-card__body { padding: 8px; }
  .people-page .person-card__body .eyebrow { margin-bottom: 1px; font-size: 12px; }
  .people-page .person-card h2 { font-size: 16px; }
  .people-page .person-card__kana { font-size: 12px; }
  .people-page .person-card__affiliation { margin: 1px 0 5px; font-size: 12px; }
  .people-page .person-card__facts { gap: 2px; margin-bottom: 4px; }
  .people-page .person-card__facts div { padding: 4px; }
  .people-page .person-card__facts dt { font-size: 12px; }
  .people-page .person-card__facts dd { font-size: 12px; }
  .people-page .person-card__activity,
  .people-page .person-card__credit { display: none; }
  .people-page .person-card__detail { min-height: 34px; margin-top: auto; padding: 4px 7px; font-size: 12px; }
}

@media (max-width: 390px) {
  .article-grid--featured-first .article-card:first-child,
  .home-news__lead-grid .article-card:first-child { grid-template-columns: 108px minmax(0, 1fr); }
  .home-news__popular .home-popular__list a { grid-template-columns: 17px 62px minmax(0, 1fr); }
  .topic-card,
  .topic-card-grid--compact .topic-card { min-height: 73px; padding-inline: 8px; }
  .report-spotlight__numbers dd > span { display: none; }
}

/* Mobile article density ---------------------------------------------------
   Article pages need the same compact rhythm as their indexes. Tables expose
   their key columns immediately; only genuinely wide comparisons scroll. */
@media (max-width: 720px) {
  .article-single .breadcrumbs { margin-bottom: 8px; font-size: 12px; line-height: 1.5; }
  .article-single__header .eyebrow { margin-bottom: 3px; font-size: 12px; }
  .article-single__header h1 { margin: 3px 0 7px; font-size: 21px; line-height: 1.42; }
  .article-single__meta { font-size: 12px; line-height: 1.55; }
  .article-single__hero { width: calc(100% + 24px); margin: 15px 0 13px -12px; }
  .article-single__hero-image { aspect-ratio: 16 / 8.6; }
  .article-image-note { margin: 5px 12px 0; font-size: 12px; line-height: 1.4; }

  .entry-content { font-size: 15px; line-height: 1.78; }
  .entry-content p { margin-block: .78em; }
  .entry-content h2 { margin: 1.45em 0 .55em; padding-bottom: 4px; font-size: 18px; line-height: 1.42; }
  .entry-content h3 { margin: 1.3em 0 .45em; font-size: 16px; line-height: 1.45; }
  .entry-content ul,
  .entry-content ol { margin-block: .75em; padding-left: 1.25em; }
  .entry-content li + li { margin-top: .35em; }
  .entry-content blockquote { margin: 1em 0; padding: 10px 12px; border-left-width: 3px; }
  .notice-box,
  .metric-caution,
  .article-sources { padding: 10px 11px; border-left-width: 3px; border-radius: 3px; font-size: 12px; line-height: 1.55; }

  /* Compact, readable data tables. */
  .scroll-hint { margin-bottom: 4px; font-size: 12px; }
  .table-scroll { border-radius: 3px; scrollbar-width: thin; }
  .data-table { min-width: 100%; width: 100%; table-layout: auto; white-space: normal; }
  .data-table:has(thead th:nth-child(3)) { min-width: 440px; }
  .data-table:has(thead th:nth-child(4)) { min-width: 520px; }
  .data-table th,
  .data-table td { padding: 7px 8px; overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; vertical-align: top; }
  .data-table thead th { font-size: 12px; line-height: 1.35; }
  .data-table tbody th { font-size: 12px; }
  .position { padding: 2px 6px; font-size: 12px; }
  .table-scroll--comparison { overflow: visible; }
  .comparison-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 9px; margin-bottom: 7px; padding: 9px 10px; border-radius: 3px; }
  .comparison-table th,
  .comparison-table td { padding: 5px 0; }
  .comparison-table tbody th { font-size: 14px; }
  .comparison-table td { font-size: 12px; }
  .comparison-table td::before { font-size: 12px; }

  /* Figures and in-article data cards. */
  .data-figure { margin-bottom: 9px; padding: 9px; border-top-width: 3px; border-radius: 3px; }
  .data-figure__header { gap: 7px; margin-bottom: 7px; }
  .data-figure__header h2,
  .data-figure__header h3 { margin-top: 2px; font-size: 14px; line-height: 1.35; }
  .data-figure__header > strong { font-size: 12px; }
  .data-figure figcaption { margin-top: 7px; font-size: 12px; line-height: 1.4; }
  .hero-figure { gap: 8px; }
  .hero-figure__number { gap: 3px 8px; }
  .hero-figure__number strong { font-size: clamp(39px, 12vw, 50px); }
  .hero-figure__number span { font-size: 12px; }
  .count-bars { gap: 7px; }
  .count-bars li,
  .count-bars--congestion li { grid-template-columns: minmax(66px, 1.05fr) minmax(72px, 1.65fr) minmax(42px, auto); gap: 5px; }
  .count-bars__label,
  .count-bars--congestion .count-bars__label,
  .tfr-bars .count-bars__label { font-size: 12px; line-height: 1.3; }
  .count-bars__label small { font-size: 12px; }
  .count-bars__track { height: 12px; }
  .count-bars__value { font-size: 12px; }
  .count-bars__value small { font-size: 12px; }
  .split-bar { margin-bottom: 7px; }
  .split-bar__total { margin-bottom: 5px; }
  .split-bar__total strong { font-size: 22px; }
  .split-bar__total span { font-size: 12px; }
  .split-bar__track { height: 34px; }
  .split-bar__track b { font-size: 12px; }
  .split-bar__track em { font-size: 12px; }
  .split-bar__note { margin-top: 5px; font-size: 12px; line-height: 1.55; }
  .stack-bar { height: 32px; margin-bottom: 9px; }
  .stack-bar__seg { font-size: 12px; }
  .seat-bars { gap: 6px; }
  .seat-bars li { grid-template-columns: 65px 1fr 39px; gap: 5px; }
  .seat-bars__label { font-size: 12px; }
  .seat-bars__label small { font-size: 12px; }
  .seat-bars__track { height: 21px; }
  .seat-bars__track i { font-size: 12px; }
  .seat-bars__value { font-size: 12px; }
  .seat-bars__value small { font-size: 12px; }
  .seat-bars__legend { margin-bottom: 6px; }
  .seat-bars__key { font-size: 12px; }
  .seat-bars__key::before { width: 9px; height: 9px; margin-right: 4px; }
  .measure-grid { gap: 7px; margin: 10px 0; }
  .measure-card { padding: 10px; }
  .measure-card__tag { margin-bottom: 3px; font-size: 12px; }
  .measure-card h3 { margin-bottom: 5px; font-size: 14px; }
  .measure-card__num { margin-bottom: 6px !important; font-size: 22px; }
  .measure-card p { margin-bottom: 5px; font-size: 12px; line-height: 1.55; }
  .measure-card__note { margin-top: 6px !important; padding-top: 5px; font-size: 12px !important; }
  .age-gantt__scale { margin-left: 90px; font-size: 12px; }
  .age-gantt__row { grid-template-columns: 82px minmax(0, 1fr); gap: 7px; margin-bottom: 5px; }
  .age-gantt__label { font-size: 12px; }
  .age-gantt__label small { font-size: 12px; }
  .age-gantt__track { height: 20px; }
  .age-gantt__bar { padding-inline: 3px; font-size: 12px; }
  .topic-fact-grid { gap: 5px; }
  .topic-fact { padding: 8px; border-radius: 3px; }
  .topic-fact > strong { font-size: 15px; }
  .topic-fact > p { margin-top: 4px; font-size: 12px; }
  .topic-fact > a { min-height: 30px; font-size: 12px; }
  .waste-key { gap: 7px; }
  .waste-key__group { padding: 9px; }
  .waste-key__title { margin-bottom: 5px; font-size: 12px; }
  .waste-key ul { gap: 4px; }
  .waste-key li { gap: 6px; font-size: 12px; }
  .waste-chip { width: 15px; height: 15px; }
  .dept-chips { gap: 4px; }
  .dept-chip { padding: 4px 8px; font-size: 12px; }
  .exception-list { margin-top: 10px; padding: 10px 11px; }
  .exception-list h3 { margin-bottom: 5px; font-size: 13px; }
  .exception-list ol { gap: 5px; }
  .exception-list small { font-size: 12px; }

  /* Context and onward-navigation should not double the article length. */
  .article-single .tomiya-popular { margin: 17px 0; padding: 10px 11px; border-radius: 3px; }
  .article-single .tomiya-popular__heading { margin-bottom: 5px; font-size: 12px; }
  .article-single .tomiya-popular__item a { grid-template-columns: 20px minmax(0, 1fr); gap: 7px; padding: 5px 0; }
  .article-single .tomiya-popular__rank { font-size: 14px; }
  .article-single .tomiya-popular__body small { margin-bottom: 0; font-size: 12px; }
  .article-single .tomiya-popular__body strong { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .article-single .tomiya-popular__note { margin-top: 5px; font-size: 12px; line-height: 1.4; }
  .article-share { margin-top: 18px; padding-top: 11px; }
  .article-share__label { margin-bottom: 5px; font-size: 12px; }
  .article-share__list { gap: 5px; }
  .article-share__button { min-height: 34px; gap: 4px; padding: 5px 9px; font-size: 12px; }
  .article-relations { margin-top: 18px; padding: 10px; }
  .article-relations h2 { font-size: 16px; }
  .article-relations__grid { gap: 6px; margin-top: 7px; }
  .article-relations__grid section { padding: 8px; border-radius: 3px; }
  .article-relations__grid h3 { margin-bottom: 3px; font-size: 12px; }
  .article-relations__grid a { padding: 2px 0; font-size: 12px; line-height: 1.4; }
  .topic-explorer { margin-top: 18px; padding: 10px; }
  .topic-explorer > h2 { margin-bottom: 6px; font-size: 16px; }
  .topic-explorer__grid { gap: 5px; }
  .topic-explorer__card { padding: 9px; border-radius: 3px; }
  .topic-explorer__card > span,
  .topic-explorer__card > small { font-size: 12px; }
  .topic-explorer__card > strong { font-size: 14px; }
  .topic-explorer__card > p { display: -webkit-box; margin-top: 3px; overflow: hidden; font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .topic-explorer__card > em { margin-top: 3px; font-size: 12px; }
  .article-when { margin: 17px 0; padding: 10px 11px; border-radius: 3px; }
  .article-when__eyebrow { margin-bottom: 7px; font-size: 12px; }
  .article-when__item { padding: 0 0 8px 21px; }
  .article-when__when { font-size: 12px; }
  .article-when__title { font-size: 12px; line-height: 1.45; }
  .article-when__link { font-size: 12px; }
  .article-chronology { margin: 19px 0; padding-top: 13px; }
  .article-chronology h2 { margin-bottom: 7px; font-size: 14px; }
  .article-chronology__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .article-chronology__item { gap: 3px; min-height: 86px; padding: 8px; border-radius: 3px; }
  .article-chronology__item > span { font-size: 12px; }
  .article-chronology__item strong { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .article-chronology__item time { font-size: 12px; }
  .related-posts { margin-top: 19px; }
  .related-posts__heading { margin-bottom: 7px; }
  .related-posts__heading h2 { font-size: 14px; }
  .related-posts__grid { gap: 0; }
  .related-post { grid-template-columns: 76px minmax(0, 1fr); border-width: 0 0 1px; border-radius: 0; }
  .related-post__body { padding: 7px 0 7px 9px; }
  .related-post__body small { font-size: 12px; }
  .related-post__body strong { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .related-post__body time { margin-top: 2px; font-size: 12px; }
  .source-list { gap: 5px; }
  .source-item__link { grid-template-columns: 34px minmax(0, 1fr) 10px; gap: 7px; min-height: 68px; padding: 7px 8px; }
  .source-item__type { width: 34px; height: 34px; font-size: 12px; }
  .source-item__body strong { font-size: 12px; }
  .source-item__body small { font-size: 12px; }
  .source-item__body em { margin-top: 1px; font-size: 12px; -webkit-line-clamp: 1; }
  .line-chart { min-width: 360px; }
  .chart-legend,
  .chart-legend--keys { gap: 4px 9px; margin-top: 5px; margin-bottom: 7px; font-size: 12px; }
  .key-swatch { width: 10px; height: 10px; font-size: 7px; }
  .report-timeline { margin-bottom: 10px; }
  .report-timeline li { grid-template-columns: 47px minmax(0, 1fr); gap: 7px; padding-bottom: 9px; }
  .report-timeline time { font-size: 12px; }
  .report-timeline time::after { bottom: -12px; }
  .report-timeline div { padding-bottom: 8px; }
  .report-timeline strong { font-size: 12px; }
  .report-timeline p { margin-top: 1px; font-size: 12px; line-height: 1.45; }
  .step-flow { margin-bottom: 7px; }
  .step-flow li { grid-template-columns: 22px minmax(0, 1fr); gap: 7px; padding: 7px 0; }
  .step-flow__no { width: 21px; height: 21px; font-size: 12px; }
  .step-flow strong { font-size: 12px; }
  .step-flow p { margin-top: 1px; font-size: 12px; line-height: 1.5; }
  .article-place { grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 9px; margin: 17px 0; padding: 9px; border-radius: 3px; }
  .article-place__map { padding: 3px; border-radius: 3px; }
  .article-place__svg { max-width: 68px; }
  .article-place__eyebrow { margin-bottom: 1px; font-size: 12px; }
  .article-place h2 { margin-bottom: 2px; font-size: 13px; }
  .article-place__addr { font-size: 12px; }
  .article-place__note { display: -webkit-box; margin: 3px 0 4px; overflow: hidden; font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .article-place__link { font-size: 12px; }
}

/* ハザード特集。数字と表が主役なので、色は危険度の伝達だけに使う。 */
.hazard-hero { padding: 44px 0 40px; color: #fff; background: linear-gradient(160deg, #1d2b3a 0%, #2f4a5e 100%); }
.hazard-hero__inner { display: grid; gap: 14px; }
.hazard-hero h1 { margin: 6px 0 0; font-size: 34px; line-height: 1.28; letter-spacing: .01em; }
.hazard-hero__description { max-width: 62ch; margin: 0; color: #dbe6ee; font-size: 16px; line-height: 1.9; }
.hazard-hero__description strong { color: #fff; }
.hazard-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #a9c0cf; font-size: 12px; }

.hazard-numbers { padding: 0; background: var(--paper); }
.hazard-number-grid { display: grid; gap: 12px; margin: -26px 0 0; padding: 0; list-style: none; }
.hazard-number-grid li { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.hazard-number-grid span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.hazard-number-grid strong { display: block; margin: 4px 0 6px; color: var(--news-blue-dark); font-size: 40px; line-height: 1.1; }
.hazard-number-grid strong small { margin-left: 4px; font-size: 16px; }
.hazard-number-grid p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }

.hazard-cta { display: grid; gap: 10px; margin: 18px 0 12px; }
.hazard-cta__btn { display: flex; flex-direction: column; gap: 3px; min-height: 64px; padding: 14px 18px; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 14px; font-size: 16px; font-weight: 800; text-decoration: none; }
.hazard-cta__btn small { color: var(--muted); font-size: 12px; font-weight: 600; }
.hazard-cta__btn:hover { background: var(--surface-hover); }
.hazard-cta__btn--primary { color: #fff; background: var(--news-blue-dark); border-color: var(--news-blue-dark); }
.hazard-cta__btn--primary small { color: #cfe0ea; }

.hazard-depth { display: grid; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; }
.hazard-depth li { display: grid; grid-template-columns: 1fr; gap: 4px; }
.hazard-depth__label { font-size: 13px; font-weight: 800; }
.hazard-depth__bar { display: block; height: 22px; overflow: hidden; background: var(--chip-bg); border-radius: 6px; }
.hazard-depth__fill { display: block; height: 100%; border-radius: 6px; }
.hazard-depth__fill--6 { background: #5b2f6e; }
.hazard-depth__fill--5 { background: #8e3f7e; }
.hazard-depth__fill--4 { background: #c8593f; }
.hazard-depth__fill--3 { background: #e08a4e; }
.hazard-depth__fill--2 { background: #f0be7c; }
.hazard-depth__fill--1 { background: #f7e3ae; }
.hazard-depth__note { color: var(--muted); font-size: 12px; }

.hazard-callout { margin: 18px 0 0; padding: 18px 20px; background: var(--note-bg); border-left: 5px solid var(--news-blue-dark); border-radius: 0 12px 12px 0; }
.hazard-callout p { margin: 0; font-size: 15px; line-height: 1.95; }
.hazard-callout p + p { margin-top: 12px; }
.hazard-callout--strong { background: #fdefec; border-left-color: var(--news-red); }

.hazard-finding-grid { display: grid; gap: 12px; margin: 18px 0; }
.hazard-finding { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.hazard-finding span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.hazard-finding strong { display: block; margin: 4px 0 8px; font-size: 20px; line-height: 1.4; }
.hazard-finding p { margin: 0; font-size: 14px; line-height: 1.9; }
.hazard-finding--alert { background: #fdefec; border-color: var(--news-red); }
.hazard-finding--alert strong { color: #7d1f1f; }

.hazard-split { display: grid; gap: 16px; }

.hazard-rivers { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; padding: 0; list-style: none; }
.hazard-rivers li { padding: 7px 14px; background: var(--chip-bg); border-radius: 999px; font-size: 14px; font-weight: 700; }

.hazard-gap-grid { display: grid; gap: 12px; margin: 16px 0 0; }
.hazard-gap { position: relative; padding: 18px 20px 18px 62px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.hazard-gap span { position: absolute; top: 18px; left: 18px; display: grid; width: 30px; height: 30px; place-items: center; color: #fff; background: var(--news-blue-dark); border-radius: 999px; font-size: 15px; font-weight: 800; }
.hazard-gap strong { display: block; margin-bottom: 5px; font-size: 17px; }
.hazard-gap p { margin: 0; font-size: 14px; line-height: 1.85; }

.hazard-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.hazard-areas__chip { padding: 8px 15px; color: var(--ink); background: var(--chip-bg); border: 1px solid transparent; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.hazard-areas__chip:hover { border-color: var(--line-strong); }
.hazard-areas__chip.is-active { color: #fff; background: var(--news-blue-dark); }

.hazard-faq { display: grid; gap: 10px; margin: 6px 0 14px; }
.hazard-faq__item { padding: 0 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.hazard-faq__item summary { padding: 16px 0; font-size: 16px; font-weight: 800; line-height: 1.6; cursor: pointer; }
.hazard-faq__item summary::marker { color: var(--muted); }
.hazard-faq__item p { margin: 0 0 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.95; }


/* 一次資料から、それを読み解いた特設ページへ渡す箱。資料名で検索して来た人の出口。 */
.source-feature-links { margin: 18px 0; }
.source-feature-links__lead { margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.source-feature-link { display: flex; flex-direction: column; gap: 4px; padding: 15px 18px; color: var(--ink); background: var(--surface); border: 2px solid var(--news-blue-dark); border-radius: 14px; text-decoration: none; }
.source-feature-link + .source-feature-link { margin-top: 10px; }
.source-feature-link:hover { background: var(--surface-hover); }
.source-feature-link strong { font-size: 16px; line-height: 1.5; }
.source-feature-link small { color: var(--muted); font-size: 12px; line-height: 1.7; }

/* ハザード特設。追従目次と3ステップで、長いページを最後まで辿れるようにする。 */
.hazard-toc { position: sticky; top: 0; z-index: 9; overflow-x: auto; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); scrollbar-width: none; }
.hazard-toc::-webkit-scrollbar { display: none; }
.hazard-toc .container { display: flex; width: max-content; min-width: 100%; padding-block: 0; }
.hazard-toc a { display: inline-flex; min-height: 48px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 14px; color: var(--ink); border-right: 1px solid var(--line); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.hazard-toc a span { color: var(--news-blue-dark); font-size: 12px; letter-spacing: .06em; }
.hazard-toc a:hover { background: var(--surface-hover); }

.hazard-steps { padding-block: 30px 4px; background: var(--paper); }
.hazard-steps__heading { margin: 0 0 16px; font-size: clamp(22px, 5.6vw, 30px); line-height: 1.3; }
.hazard-steps__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hazard-steps__list li { position: relative; padding: 20px 20px 18px 62px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--news-blue-dark); border-radius: 0 14px 14px 0; }
.hazard-steps__no { position: absolute; top: 20px; left: 16px; display: grid; width: 32px; height: 32px; place-items: center; color: #fff; background: var(--news-blue-dark); border-radius: 999px; font-size: 16px; font-weight: 800; }
.hazard-steps__list strong { display: block; margin-bottom: 6px; font-size: 18px; line-height: 1.45; }
.hazard-steps__list p { margin: 0 0 10px; font-size: 14px; line-height: 1.9; }
.hazard-steps__link { font-size: 13px; font-weight: 800; }
.hazard-steps__note { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

/* 節の頭が目次に隠れないようにする。 */
#ch-check, #ch-depth, #ch-shelter, #ch-dosha, #ch-map, #ch-rivers,
#ch-gap, #ch-level, #ch-age, #ch-faq, #ch-sources { scroll-margin-top: 58px; }

@media (min-width: 760px) {
  .hazard-steps { padding-block: 40px 6px; }
  .hazard-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ハザードの地図。ニュースマップと同じ投影なので、見比べても位置がずれない。 */
.hazard-map-figure { padding-bottom: 6px; }
.hazard-map { display: block; width: 100%; height: auto; max-height: 78vh; margin: 0 auto; }
.hazard-map__outline { fill: var(--chip-bg); stroke: var(--line-strong); stroke-width: 2; }
.hazard-map__road { fill: none; stroke: var(--line-strong); stroke-width: 1.6; opacity: .55; }
.hazard-map__road--motorway { stroke-width: 2.6; opacity: .4; }
.hazard-map__spot circle { fill: rgba(201, 93, 75, .34); stroke: #c95d4b; stroke-width: 2; }
.hazard-map__count { fill: #7d1f1f; font-size: 20px; font-weight: 800; }
.hazard-map__name { fill: var(--ink); font-size: 15px; font-weight: 700; }
.hazard-map__school circle { fill: #2f7d5a; stroke: #fffdf8; stroke-width: 2.5; }
.hazard-map__school text { fill: var(--ink); font-size: 15px; font-weight: 700; }
.hazard-map__school.is-partial circle { fill: var(--news-red); }
.hazard-map__school.is-partial text { fill: #7d1f1f; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hazard-map__count { fill: #f0a49a; }
  :root:not([data-theme="light"]) .hazard-map__school.is-partial text { fill: #f0a49a; }
}
:root[data-theme="dark"] .hazard-map__count { fill: #f0a49a; }
:root[data-theme="dark"] .hazard-map__school.is-partial text { fill: #f0a49a; }

.hazard-lead-link { margin: 16px 0; }
.hazard-lead-link a { display: flex; flex-direction: column; gap: 3px; padding: 15px 18px; color: var(--ink); background: var(--surface); border: 2px solid var(--news-blue-dark); border-radius: 14px; font-size: 16px; text-decoration: none; }
.hazard-lead-link a:hover { background: var(--surface-hover); }
.hazard-lead-link small { color: var(--muted); font-size: 12px; font-weight: 600; }

/* 避難所一覧。地区 → 施設 → そのとき使えるか、の順で読めるようにする。 */
.shelter-controls { display: grid; gap: 12px; margin: 6px 0 14px; }

.shelter-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.shelter-jump a { padding: 7px 14px; color: var(--ink); background: var(--chip-bg); border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; }
.shelter-jump a:hover { background: var(--surface-hover); outline: 1px solid var(--line-strong); }

.shelter-area + .shelter-area { margin-top: 30px; }
.shelter-area__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line-strong); font-size: 19px; scroll-margin-top: 20px; }
.shelter-area__name span { color: var(--muted); font-size: 12px; font-weight: 700; }

.shelter-cards { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.shelter-card { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.shelter-card--ng { background: #fdefec; border-color: var(--news-red); }
.shelter-card__name { margin: 0 0 3px; font-size: 18px; line-height: 1.45; }
.shelter-card__address { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.shelter-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.shelter-card__tags li { padding: 4px 10px; color: var(--news-blue-dark); background: var(--chip-bg); border-radius: 999px; font-size: 12px; font-weight: 700; }
.shelter-card__tags li.is-off { color: var(--muted); }

.shelter-card__use { display: grid; gap: 8px; margin: 0 0 12px; }
.shelter-use { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-left-width: 5px; border-radius: 4px 10px 10px 4px; }
.shelter-use dt { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.shelter-use dd { margin: 0; font-size: 14px; font-weight: 800; text-align: right; }
.shelter-use--ok { border-left-color: #2f7d5a; }
.shelter-use--ok dd { color: #2f7d5a; }
.shelter-use--partial { border-left-color: #c07d1f; }
.shelter-use--partial dd { color: #a2660f; }
.shelter-use--ng { border-left-color: var(--news-red); background: #fdefec; }
.shelter-use--ng dd { color: #7d1f1f; }

.shelter-card__links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; font-size: 14px; font-weight: 700; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shelter-card--ng,
  :root:not([data-theme="light"]) .shelter-use--ng { background: #2a1a18; }
  :root:not([data-theme="light"]) .shelter-use--ok dd { color: #6fbf96; }
  :root:not([data-theme="light"]) .shelter-use--partial dd { color: #e0ad5d; }
  :root:not([data-theme="light"]) .shelter-use--ng dd { color: #f0a49a; }
}
:root[data-theme="dark"] .shelter-card--ng,
:root[data-theme="dark"] .shelter-use--ng { background: #2a1a18; }
:root[data-theme="dark"] .shelter-use--ok dd { color: #6fbf96; }
:root[data-theme="dark"] .shelter-use--partial dd { color: #e0ad5d; }
:root[data-theme="dark"] .shelter-use--ng dd { color: #f0a49a; }

.data-table tr.is-highlight td { background: #fff6e2; font-weight: 700; }

@media (min-width: 760px) {
  .hazard-hero { padding: 62px 0 56px; }
  .hazard-hero h1 { font-size: 52px; }
  .hazard-number-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hazard-cta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hazard-depth li { grid-template-columns: 190px 1fr 170px; align-items: center; gap: 14px; }
  .hazard-finding-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hazard-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hazard-gap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shelter-controls { grid-template-columns: minmax(0, 320px) 1fr; align-items: end; }
  .shelter-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelter-card__use { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hazard-figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
.hazard-figure { padding-bottom: 4px; }

/* 財政特集。良い数字と気になる数字を色で分けて、判断の材料が見えるようにする。 */
.finance-hero { padding: 44px 0 40px; color: #fff; background: linear-gradient(160deg, #23303c 0%, #3d5a4a 100%); }
.finance-hero__inner { display: grid; gap: 14px; }
.finance-hero h1 { margin: 6px 0 0; font-size: 34px; line-height: 1.28; }
.finance-hero__description { max-width: 62ch; margin: 0; color: #dce7de; font-size: 16px; line-height: 1.9; }
.finance-hero__description strong { color: #fff; }
.finance-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #adc4b4; font-size: 12px; }

.finance-number-grid { display: grid; gap: 12px; margin: -26px 0 0; padding: 0; list-style: none; }
.finance-number-grid li { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); }
.finance-number-grid li.is-good { border-top-color: var(--green-dark); }
.finance-number-grid li.is-bad { border-top-color: var(--news-red); }
.finance-number-grid span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.finance-number-grid strong { display: block; margin: 4px 0 6px; font-size: 40px; line-height: 1.1; }
.finance-number-grid li.is-good strong { color: var(--green-dark); }
.finance-number-grid li.is-bad strong { color: var(--news-red); }
.finance-number-grid strong small { margin-left: 3px; font-size: 17px; }
.finance-number-grid p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }

.finance-split { display: grid; gap: 14px; margin: 18px 0 0; }
.finance-card { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.finance-card--good { background: #f2f8f2; border-color: var(--green-dark); }
.finance-card--bad { background: #fdf4ee; border-color: var(--news-red); }
.finance-card > span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 12px; font-weight: 800; }
.finance-card ul { margin: 0 0 12px; padding: 0; list-style: none; }
.finance-card li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.finance-card li b { font-weight: 700; }
.finance-card li i { font-style: normal; font-weight: 800; }
.finance-card p { margin: 0; font-size: 13px; line-height: 1.85; }

.finance-fact { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.finance-fact span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.finance-fact strong { display: block; margin: 4px 0 5px; font-size: 34px; line-height: 1.1; }
.finance-fact strong small { margin-left: 3px; font-size: 15px; }
.finance-fact p { margin: 0; color: var(--ink-soft); font-size: 13px; }

.finance-bars { display: grid; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; }
.finance-bars li { display: grid; grid-template-columns: 1fr; gap: 3px; }
.finance-bars__label { font-size: 13px; font-weight: 700; }
.finance-bars__track { display: block; height: 22px; overflow: hidden; background: var(--chip-bg); border-radius: 6px; }
.finance-bars__track i { display: block; height: 100%; background: var(--news-blue); border-radius: 6px; }
.finance-bars__track i.is-high { background: var(--news-red); }
.finance-bars__value { font-size: 14px; font-weight: 800; }

.finance-callout { margin: 18px 0 0; padding: 18px 20px; background: var(--note-bg); border-left: 5px solid var(--green-dark); border-radius: 0 12px 12px 0; }
.finance-callout p { margin: 0; font-size: 15px; line-height: 1.95; }
.finance-callout p + p { margin-top: 12px; }

.data-table td.is-good-cell { color: var(--green-dark); background: var(--green-soft); font-weight: 800; }

@media (min-width: 760px) {
  .finance-hero { padding: 62px 0 56px; }
  .finance-hero h1 { font-size: 52px; }
  .finance-number-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .finance-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-bars li { grid-template-columns: 130px 1fr 90px; align-items: center; gap: 14px; }
  .finance-bars li > span { margin: 0; }
}

/* 富谷の子どもの数（/kodomo/） */
.kodomo-hero { padding: 44px 0 40px; color: #fff; background: linear-gradient(160deg, #2a2f42 0%, #4a4260 100%); }
.kodomo-hero__inner { display: grid; gap: 14px; }
.kodomo-hero h1 { margin: 6px 0 0; font-size: 34px; line-height: 1.28; }
.kodomo-hero__description { max-width: 62ch; margin: 0; color: #ddd9e8; font-size: 16px; line-height: 1.9; }
.kodomo-hero__description strong { color: #fff; }
.kodomo-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #b3adc6; font-size: 12px; }

.kodomo-numbers { padding: 0; background: var(--paper); }
.kodomo-number-grid { display: grid; gap: 12px; margin: -26px 0 0; padding: 0; list-style: none; }
.kodomo-number-grid li { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); }
.kodomo-number-grid li.is-down { border-top-color: var(--news-red); }
.kodomo-number-grid li.is-up { border-top-color: var(--green-dark); }
.kodomo-number-grid span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.kodomo-number-grid strong { display: block; margin: 4px 0 6px; font-size: 40px; line-height: 1.1; }
.kodomo-number-grid li.is-down strong { color: var(--news-red); }
.kodomo-number-grid li.is-up strong { color: var(--green-dark); }
.kodomo-number-grid strong small { margin-left: 3px; font-size: 17px; }
.kodomo-number-grid p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }

.kodomo-callout { margin: 18px 0 0; padding: 18px 20px; background: var(--note-bg); border-left: 5px solid var(--news-blue-dark); border-radius: 0 12px 12px 0; }
.kodomo-callout p { margin: 0; font-size: 15px; line-height: 1.95; }
.kodomo-callout p + p { margin-top: 12px; }

.kodomo-page .data-figure img { display: block; width: 100%; height: auto; border-radius: 8px; }

@media (min-width: 760px) {
  .kodomo-hero { padding: 62px 0 56px; }
  .kodomo-hero h1 { font-size: 52px; }
  .kodomo-number-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 富谷の高齢化と介護（/kaigo/） */
.kaigo-hero { padding: 44px 0 40px; color: #fff; background: linear-gradient(160deg, #3a2f2a 0%, #5e4740 100%); }
.kaigo-hero__inner { display: grid; gap: 14px; }
.kaigo-hero h1 { margin: 6px 0 0; font-size: 34px; line-height: 1.28; }
.kaigo-hero__description { max-width: 62ch; margin: 0; color: #e8ddd6; font-size: 16px; line-height: 1.9; }
.kaigo-hero__description strong { color: #fff; }
.kaigo-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #c5b0a5; font-size: 12px; }

.kaigo-numbers { padding: 0; background: var(--paper); }
.kaigo-number-grid { display: grid; gap: 12px; margin: -26px 0 0; padding: 0; list-style: none; }
.kaigo-number-grid li { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); }
.kaigo-number-grid li.is-up { border-top-color: var(--news-red); }
.kaigo-number-grid span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.kaigo-number-grid strong { display: block; margin: 4px 0 6px; font-size: 40px; line-height: 1.1; }
.kaigo-number-grid li.is-up strong { color: var(--news-red); }
.kaigo-number-grid strong small { margin-left: 3px; font-size: 17px; }
.kaigo-number-grid p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }

.kaigo-callout { margin: 18px 0 0; padding: 18px 20px; background: var(--note-bg); border-left: 5px solid var(--news-red); border-radius: 0 12px 12px 0; }
.kaigo-callout p { margin: 0; font-size: 15px; line-height: 1.95; }
.kaigo-callout p + p { margin-top: 12px; }

.kaigo-page .data-figure img { display: block; width: 100%; height: auto; border-radius: 8px; }

@media (min-width: 760px) {
  .kaigo-hero { padding: 62px 0 56px; }
  .kaigo-hero h1 { font-size: 52px; }
  .kaigo-number-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 市長選特設。ハザード特設の骨組みを使い、色だけ選挙の赤に寄せる。 */
.senkyo-hero { background: linear-gradient(160deg, #3a1f24 0%, #6b2a2f 100%); }
.senkyo-hero__clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 4px 0 0; }
.senkyo-hero__clock strong { color: #fff; font-size: 44px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.senkyo-hero__clock strong small { margin-left: 3px; font-size: 16px; font-weight: 700; }
.senkyo-hero__clock span { color: #f1d9d6; font-size: 13px; line-height: 1.6; }
.senkyo-page .hazard-number-grid strong { color: #8f2b2b; }
.senkyo-page .hazard-toc a span { color: #8f2b2b; }
.senkyo-page .hazard-steps__no { background: #8f2b2b; }
.senkyo-issues { display: grid; gap: 12px; margin: 16px 0; padding: 0; list-style: none; }
.senkyo-issue { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px 18px 18px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.senkyo-issue__no { display: grid; width: 32px; height: 32px; place-items: center; color: #fff; background: #8f2b2b; border-radius: 999px; font-size: 15px; font-weight: 900; }
.senkyo-issue h3 { margin: 4px 0 8px; font-size: 18px; line-height: 1.45; }
.senkyo-issue__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin: 0 0 8px; }
.senkyo-issue__num strong { color: #8f2b2b; font-size: 30px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.senkyo-issue__num span { color: #8f2b2b; font-size: 14px; font-weight: 800; }
.senkyo-issue__num small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.senkyo-issue__body > p:not(.senkyo-issue__num) { margin: 0 0 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.9; }
.senkyo-issue__body > a { font-size: 13px; font-weight: 800; }
.senkyo-chart { display: block; width: 100%; max-width: 560px; height: auto; }
.senkyo-chart__bar { fill: var(--chart-1); }
.senkyo-chart__bar.is-last { fill: #8f2b2b; }
.senkyo-chart__none { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 5; }
.senkyo-chart__val { fill: var(--text); font-size: 15px; font-weight: 800; }
.senkyo-chart__val--none { fill: var(--muted); font-size: 13px; }
.senkyo-chart__year { fill: var(--muted); font-size: 13px; font-weight: 700; }
.senkyo-chart__axis { stroke: var(--line-strong); stroke-width: 1.5; }
.senkyo-people .hazard-finding p a, .senkyo-cost + p a { font-weight: 800; }
@media (min-width: 760px) {
  .senkyo-hero__clock strong { font-size: 56px; }
  .senkyo-issues { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .senkyo-people, .senkyo-cost { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* 2026-10: article discovery and usable reading controls. */
[hidden]:not([hidden="until-found"]) { display: none !important; }
.article-card.article-card--text,
.article-grid--featured-first .article-card.article-card--text:first-child,
.home-news__lead-grid .article-card.article-card--text:first-child,
.news-list-item.news-list-item--text,
.related-post.related-post--text { grid-template-columns: minmax(0, 1fr); }
.article-card--text .article-card__body { padding: 16px; }
.home-news__lead-grid .article-card.article-card--text .article-card__body { padding: 18px; border-top: 3px solid var(--news-blue); }
.related-post--text .related-post__body { padding: 14px; }
.article-card .eyebrow a,
.search-result-item h2 a,
.hazard-steps__link { display: inline-block; min-height: 24px; }
.article-card__title a { display: inline-block; }
.search-recovery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.article-toc { margin-top: 20px; padding: 0; }
.article-toc > summary { min-height: 48px; padding: 12px 18px; cursor: pointer; font-size: 15px; font-weight: 800; }
.article-toc nav { padding: 4px 18px 18px; }
.article-toc a { min-height: 32px; padding-block: 6px; }
.article-single__content h2[id] { scroll-margin-top: 70px; }
.article-share__fallback { display: block; margin-top: 14px; color: var(--text); font-size: 14px; }
.article-share__fallback[hidden] { display: none; }
.article-share__fallback input { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 8px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); font-size: 16px; }

/* Text accents follow the scheme; filled controls keep a dark surface for white type. */
.site-header__search button,
.language-switch:hover,
.button--dark,
.button--dark:hover,
.quiz-promo,
.quiz-result,
.pagination .page-numbers.current,
.article-process span,
.back-to-top:hover,
.policy-proposal-bridge,
.council-filter__chips .chip.is-active,
.hazard-cta__btn--primary,
.hazard-areas__chip.is-active,
.hazard-gap span,
.hazard-steps__no { background: var(--action-blue-dark); }
.site-header__search button:hover { background: var(--action-blue); }
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-parent > a { color: var(--news-blue); background: var(--green-soft); }
.report-spotlight__intro p { color: #d9dde3; }
.hazard-cta__btn:not(.hazard-cta__btn--primary),
.hazard-areas__chip:not(.is-active),
.hazard-lead-link a,
.source-feature-link { color: var(--text); }
.hazard-finding--alert,
.hazard-callout--strong { background: var(--note-bg); }
.hazard-finding--alert strong { color: var(--note-ink); }
.shelter-jump a { color: var(--text); }
.grow-game-page { background: var(--game-paper); }
.route-hub-hero--know { --route-hero-accent: var(--map-accent); }
.route-hub-card { --route-fill: var(--action-blue-dark); }
.route-hub-card--proposal { --route-fill: #c7352d; }
.route-hub-card--map { --route-accent: var(--map-accent); --route-fill: #16745f; }
.route-hub-card--history { --route-accent: var(--history-accent); --route-fill: #9a641d; }
.route-hub-card__icon,
.route-hub-card__cta span { background: var(--route-fill); }
.hub-era__year small { color: #fff; background: var(--action-blue-dark); }
.hub-era__item.is-now .hub-era__year small { color: #fff; background: #16745f; }
.quiz-level-card { --quiz-card-accent: var(--quiz-green); --quiz-fill: #16805f; }
.quiz-level-card--intermediate { --quiz-card-accent: var(--quiz-blue); --quiz-fill: #1976bd; }
.quiz-level-card--advanced { --quiz-card-accent: var(--news-red); --quiz-fill: #c7352d; }
.quiz-level-card > span,
.quiz-level-card > b i { background: var(--quiz-fill); }
.quiz-game { --quiz-accent: var(--quiz-green); --quiz-fill: #16805f; }
.quiz-game[data-level="intermediate"] { --quiz-accent: var(--quiz-blue); --quiz-fill: #1976bd; }
.quiz-game[data-level="advanced"] { --quiz-accent: var(--news-red); --quiz-fill: #c7352d; }
.quiz-question__meta span,
.quiz-choices button.is-correct > span { background: var(--quiz-fill); }
.quiz-choices button.is-wrong > span { background: #c7352d; }

@media (min-width: 721px) {
  .home-news__lead-grid .article-card.article-card--text .article-card__title { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.4; }
  .home-news__lead-grid .article-card.article-card--text .article-card__body > p:not(.article-card__topics) { font-size: 16px; line-height: 1.8; }
}

@media (max-width: 720px) {
  .site-header__search input { font-size: 16px; }
  .language-switch, .theme-toggle { min-height: 44px; }
  .topic-toc { position: relative; overflow: visible; }
  .topic-toc .container { width: min(calc(100% - 24px), var(--container)); min-width: 0; flex-wrap: wrap; }
  .topic-toc a { flex: 1 0 auto; min-height: 44px; justify-content: center; padding-inline: 10px; border-bottom: 1px solid var(--line); }
  .article-card__title,
  .article-card__title a,
  .article-grid--featured-first .article-card:first-child .article-card__title,
  .home-news__lead-grid .article-card:first-child .article-card__title,
  .news-list-item h2 { display: block; overflow: visible; font-size: 15px; line-height: 1.5; -webkit-line-clamp: unset; }
  .home-news__lead-grid .article-card.article-card--text .article-card__title { font-size: 18px; }
  .article-card.article-card--text .article-card__body { padding: 10px 4px; }
  .home-news__lead-grid .article-card.article-card--text .article-card__body { padding: 12px 10px; }
  .home-news__lead-grid .article-card.article-card--text .article-card__body > p:not(.article-card__topics) { display: block; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
  .news-list-item--text .news-list-item__body > p { display: block; margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
  .home-news__popular .home-popular__body strong { font-size: 14px; line-height: 1.5; }
  .news-list-item--text { padding-block: 14px; }
}