/* Research article template ("A: Research Institute report").
   Shared by research articles; start new articles from tools/article-template.html.
   Reading text in Noto Sans JP, titles in Libre Baskerville / Noto Serif JP,
   small labels in IBM Plex Mono, contents in a sticky sidebar.
   The footer lives in article-footer.css. */
:root {
  --serif-jp: '游明朝', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', 'Hiragino Mincho ProN', 'MS PMincho', serif;
  --serif-en: 'Libre Baskerville', 'Times New Roman', serif;
  --title: 'Libre Baskerville', 'Noto Serif JP', 'Yu Mincho', serif;
  --heading: 'Noto Serif JP', 'Yu Mincho', serif;
  --text: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  --label: 'IBM Plex Mono', 'Noto Sans JP', monospace;
  --paper: #f7f3ea;
  --surface: #fffdf8;
  --ink: #1a1a1a;
  --body: #262420;
  --muted: #5a554d;
  --rule: #c9c1b4;
  --rule-light: #e3dccf;
  --green: #2f3e2a;
  --red: #8b0000;
}

*, *::before, *::after { box-sizing: border-box; }
/* the language switch hides the other language with the hidden attribute; keep it hidden whatever display a rule sets */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--text); font-size: 16px; line-height: 2; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
a { color: var(--red); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ── Shared Research Institute header ── */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--green); color: #f3ebdb; border-bottom: 1px solid #1f2a1b; line-height: 1.9; font-feature-settings: "palt" 1; }
.site-header-inner { max-width: 1400px; margin: 0 auto; padding: 14px 56px; display: flex; align-items: center; justify-content: space-between; font-family: var(--serif-jp); font-size: 11px; letter-spacing: 2px; }
.site-header-left { display: flex; align-items: center; gap: 16px; }
.site-header-inner a { color: rgba(243,235,219,.78); text-decoration: none; transition: color .2s ease; }
.site-header-inner a:hover { color: #f3ebdb; }
.site-header-left > a:first-child { color: #f3ebdb; font-family: var(--serif-en); font-weight: 500; font-size: 18px; letter-spacing: 6px; position: relative; padding-right: 14px; }
.site-header-left > a:first-child::after { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 18px; background: rgba(243,235,219,.3); transform: translateY(-50%); }
.header-sep { display: none; }
.back-link { font-family: var(--serif-jp); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 500; }

/* ── Japanese / English switch (articles with both languages; behaviour in article.js) ── */
.language-toolbar { background: var(--surface); padding: 20px 40px 0; }
.language-switch { max-width: 1100px; margin: 0 auto; display: flex; justify-content: flex-end; }
.language-btn { appearance: none; margin: 0; min-width: 84px; padding: 9px 18px; border: 1px solid var(--rule); background: transparent; color: var(--muted); font-family: var(--label); font-size: 12px; letter-spacing: 1.5px; line-height: 1.6; cursor: pointer; }
.language-btn + .language-btn { border-left: 0; }
.language-btn:hover { color: var(--ink); }
.language-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.language-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.language-toolbar + main .article-head-inner { padding-top: 28px; }

/* Japanese titles and headings break between phrases, not inside words */
.article-title, .article-subtitle, .article-section > h2, .article-main h3, .article-main .short-line { word-break: auto-phrase; }

/* ── Article header ── */
.article-head { background: var(--surface); border-bottom: 1px solid var(--rule); }
.article-head-inner { max-width: 1180px; margin: 0 auto; padding: 56px 40px 40px; }
.article-category { margin: 0 0 16px; font-family: var(--label); font-size: 11px; letter-spacing: 2px; line-height: 1.6; color: var(--red); }
.article-category[data-tag]::before { content: attr(data-tag) ' — '; }
.article-title { margin: 0; font-family: var(--title); font-size: clamp(28px, 3.4vw, 42px); font-weight: 500; line-height: 1.45; letter-spacing: .005em; color: var(--ink); text-wrap: balance; }
.article-subtitle { margin: 14px 0 0; font-family: var(--heading); font-size: clamp(17px, 1.7vw, 21px); font-weight: 500; line-height: 1.7; color: #3b3832; }
.article-byline { margin: 22px 0 0; font-size: 13px; line-height: 1.8; color: var(--muted); }

/* ── Layout: sticky contents + reading column ── */
.article-layout { max-width: 1180px; margin: 0 auto; padding: 44px 40px 72px; display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 56px; }
.article-side { position: sticky; top: 84px; align-self: start; }
.article-toc-label { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-family: var(--label); font-size: 10px; letter-spacing: 2px; line-height: 1.6; color: var(--muted); }
.article-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.article-toc li { counter-increment: toc; border-bottom: 1px solid var(--rule-light); }
.article-toc a { display: grid; grid-template-columns: 26px 1fr; padding: 10px 0; font-size: 13px; line-height: 1.6; color: #3e3a33; text-decoration: none; }
.article-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--label); font-size: 10px; color: var(--red); padding-top: 2px; }
.article-toc a:hover, .article-toc a.active { color: var(--red); }

/* ── Abstract ── */
.article-abstract { margin: 0 0 48px; padding: 22px 26px; background: var(--surface); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.article-abstract-label { margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.article-abstract p:not(.article-abstract-label) { margin: 0; font-size: 15px; line-height: 1.95; }

/* ── Sections (numbered automatically) ── */
.article-main { counter-reset: section; }
.article-section { margin-top: 56px; }
.article-abstract + .article-section { margin-top: 0; }
.article-section > h2, .article-section > [data-lang-content] > h2 { counter-increment: section; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-family: var(--heading); font-size: clamp(22px, 2.2vw, 26px); font-weight: 600; line-height: 1.55; color: var(--ink); }
.article-section > h2::before, .article-section > [data-lang-content] > h2::before { content: counter(section, decimal-leading-zero); display: block; margin-bottom: 6px; font-family: var(--label); font-size: 11px; font-weight: 400; letter-spacing: 2px; line-height: 1.6; color: var(--red); }
.article-main h3 { margin: 36px 0 14px; font-family: var(--heading); font-size: 19px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.article-main p { margin: 0 0 1.3em; }
.article-main ul, .article-main ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.article-main li { margin: .3em 0; }
.article-main strong { color: var(--ink); font-weight: 700; }
/* Headings that carry their own numbers (I., II. …): put own-numbers on .article-layout */
.own-numbers .article-section > h2::before, .own-numbers .article-section > [data-lang-content] > h2::before { content: none; }
.own-numbers .article-toc a { grid-template-columns: 1fr; }
.own-numbers .article-toc a::before { content: none; }

/* ── Spoken lines and scenes: plain blockquote, .speaker, .short-line, .ending ── */
.article-main blockquote { margin: 6px 0 24px; padding: 2px 0 2px 20px; border-left: 2px solid var(--rule); }
.article-main blockquote p:last-child { margin-bottom: 0; }
.article-main .speaker { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.article-main .short-line { margin-top: 28px; font-family: var(--heading); font-size: 21px; font-weight: 600; line-height: 1.7; color: var(--ink); }
.article-main .ending { margin: 28px 0 0; font-family: var(--heading); font-size: 19px; color: var(--ink); }
/* Numbered points set off by rules (e.g. ① ② ③) */
.article-main .audit-points { margin: 28px 0 24px; border-top: 1px solid var(--ink); }
.article-main .audit-point { padding: 16px 0 16px 16px; border-bottom: 1px solid var(--rule-light); }
.article-main .audit-point p { margin: 0; }
/* Superscript-like note numbers that link to the references */
.article-main .footnote-ref { white-space: nowrap; font-size: .8em; font-weight: 700; text-decoration: none; }
/* A concluding section set in a box */
.article-main .article-section.conclusion { padding: 24px 28px 6px; background: var(--surface); border-top: 2px solid var(--red); border-bottom: 1px solid var(--rule); }
/* A titled block of detail inside a section (h3 + paragraphs) */
.article-main .investigation-detail { margin: 32px 0 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.article-main .investigation-detail h3 { margin-top: 0; }
.article-section > h2 + .investigation-detail { margin-top: 0; padding-top: 0; border-top: 0; }
/* A short checklist of facts */
.article-main .evidence-list { margin: 20px 0 24px; padding: 10px 20px; background: var(--surface); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.article-main .evidence-list .evidence-item { margin: 0; padding: 6px 0; }
/* Two procedures side by side, each a chain of steps */
.article-main .scheme-comparison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 28px 0 8px; }
.article-main .scheme-panel { padding: 20px 20px 18px; background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--ink); }
.article-main .scheme-panel.fictitious { background: #fff8f6; border-color: #dcc0bb; border-top-color: var(--red); }
.article-main .scheme-panel h4 { margin: 0 0 18px; font-family: var(--heading); font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.article-main .scheme-step { position: relative; padding: 11px 14px; background: #fff; border: 1px solid var(--rule-light); font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--ink); }
.article-main .scheme-step + .scheme-step { margin-top: 30px; }
.article-main .scheme-step + .scheme-step::before { content: '↓'; position: absolute; left: 50%; top: -26px; transform: translateX(-50%); font-size: 16px; line-height: 1; color: var(--muted); }
/* Notes placed right after the abstract */
.article-main .intro-context { font-size: 14px; line-height: 1.9; color: var(--muted); }
.article-main .editorial-notice { display: block; margin: 0 0 24px; padding: 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--ink); }
.article-main .translation-notice { display: flex; gap: 16px; align-items: baseline; margin: 0 0 36px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--ink); }
.article-main .translation-notice strong { flex: 0 0 auto; font-size: 15px; }
.article-main .translation-notice span { font-size: 14px; line-height: 1.8; }
/* A list set on a light panel */
.article-main ul.article-list { margin: 4px 0 24px; padding: 12px 20px 12px 40px; background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* Primary records (e-mails etc.): label + quoted text, and short record quotes */
.article-main .source-record, .article-main blockquote.record-quote { margin: 6px 0 26px; padding: 18px 22px 16px; background: var(--surface); border: 1px solid var(--rule-light); border-left: 3px solid var(--red); }
.article-main .source-record-label { margin: 0 0 10px; font-family: var(--label); font-size: 11px; letter-spacing: .5px; line-height: 1.6; color: var(--muted); }
.article-main .source-record blockquote { margin: 0; padding: 0; border: 0; }
.article-main .source-record blockquote, .article-main blockquote.record-quote { font-family: var(--serif-jp); font-size: 15px; line-height: 1.85; color: var(--ink); }
.article-main .source-record blockquote:lang(en), .article-main blockquote.record-quote:lang(en) { font-family: var(--serif-en); font-size: 14.5px; }
.article-main .source-record blockquote p, .article-main blockquote.record-quote p { margin: 0 0 12px; }
.article-main .source-record blockquote p:last-child, .article-main blockquote.record-quote p:last-child { margin-bottom: 0; }
/* Numbered chain of events */
.article-main ol.process-chain { margin: 12px 0 26px; padding: 0; list-style: none; counter-reset: process-step; border-top: 1px solid var(--ink); }
.article-main ol.process-chain li { position: relative; margin: 0; padding: 11px 12px 11px 44px; background: var(--surface); border-bottom: 1px solid var(--rule-light); }
.article-main ol.process-chain li::before { counter-increment: process-step; content: counter(process-step); position: absolute; left: 14px; top: 11px; font-family: var(--label); font-size: 12px; color: var(--red); }
/* A conversation shown as chat bubbles, with narration lines in between */
.article-main .conversation-log { display: flex; flex-direction: column; gap: 16px; margin: 28px 0 12px; }
.article-main .conversation-entry { display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; }
.article-main .conversation-entry--support { align-self: flex-start; }
.article-main .conversation-entry--author { align-self: flex-end; align-items: flex-end; }
.article-main .conversation-speaker { margin: 0 12px 4px; font-family: var(--label); font-size: 11px; letter-spacing: .5px; line-height: 1.6; color: var(--muted); }
.article-main .conversation-bubble { padding: 12px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; font-size: 15px; line-height: 1.8; color: var(--ink); }
.article-main .conversation-entry--support .conversation-bubble { border-bottom-left-radius: 4px; }
.article-main .conversation-entry--author .conversation-bubble { background: #eee8dc; border-color: #b3aa9c; border-bottom-right-radius: 4px; }
.article-main .conversation-bubble p { margin: 0 0 .7em; }
.article-main .conversation-bubble p:last-child { margin-bottom: 0; }
.article-main .conversation-note { align-self: center; max-width: 90%; margin: 0; font-size: 14px; line-height: 1.7; text-align: center; color: var(--muted); }
/* The note on primary records under the references */
.article-main .primary-record { margin-top: 20px; padding: 14px 18px; background: var(--surface); border-left: 3px solid var(--rule); }
/* A citation to copy, a flagged note, and label/value rows of links */
.article-main .citation { margin: 0 0 20px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--rule-light); border-left: 3px solid var(--ink); font-family: var(--serif-en); font-size: 15px; line-height: 1.8; color: var(--ink); overflow-wrap: anywhere; }
.article-main .case-note { padding: 12px 16px; background: #fff8f6; border-left: 3px solid var(--red); font-size: 15px; }
.article-main .row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule-light); }
.article-main .row > * { min-width: 0; overflow-wrap: anywhere; }
.article-main .row .label { padding-top: 3px; font-family: var(--label); font-size: 11px; letter-spacing: 1px; line-height: 1.6; text-transform: uppercase; color: var(--muted); }
/* Small print under a passage */
.article-main .source-note, .article-main .article-note { padding-top: 12px; border-top: 1px solid var(--rule-light); font-size: 13px; line-height: 1.7; color: var(--muted); }
/* A turning-point line inside a section */
.article-main .pivot-line { margin: 28px 0 24px; padding: 8px 0 8px 18px; border-left: 3px solid var(--red); font-family: var(--heading); font-size: 18px; font-weight: 600; line-height: 1.7; color: var(--ink); }

/* ── Evidence: quoted primary sources ── */
.evidence { margin: 6px 0 26px; padding: 18px 22px 16px; background: var(--surface); border: 1px solid var(--rule-light); border-left: 3px solid var(--red); }
.evidence blockquote { margin: 0; padding: 0; border: 0; white-space: pre-line; font-family: var(--serif-jp); font-size: 15px; line-height: 1.85; color: var(--ink); }
.evidence blockquote p { margin: 0; color: var(--ink); }
.evidence blockquote:lang(en) { font-family: var(--serif-en); font-style: italic; font-size: 17px; line-height: 1.75; color: var(--ink); }
.evidence figcaption { margin-top: 10px; font-family: var(--label); font-size: 11px; letter-spacing: .5px; line-height: 1.6; color: var(--muted); }

/* ── Tables, figures, notes ── */
.article-main table { width: 100%; margin: 8px 0 28px; border-collapse: collapse; font-size: 14px; line-height: 1.7; background: var(--surface); }
.article-main th, .article-main td { padding: 10px 12px; border: 1px solid var(--rule-light); text-align: left; vertical-align: top; }
.article-main thead th, .article-main th[scope="col"] { background: var(--ink); color: #fff; font-weight: 500; }
.article-main tbody th:not([scope]) { width: 22%; background: #eee8dc; color: var(--ink); font-weight: 600; }
.article-main .table-wrap { margin: 24px 0 8px; overflow-x: auto; }
.article-main .table-wrap table { margin: 0; }
.article-main figure.article-figure { margin: 8px 0 28px; }
.article-main figure.article-figure img { display: block; width: 100%; height: auto; }
.article-main figure.article-figure figcaption { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.article-notes { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.8; color: var(--muted); }
.article-notes h2 { margin: 0 0 12px; font-family: var(--label); font-size: 11px; font-weight: 400; letter-spacing: 2px; color: var(--muted); }
/* References whose entries carry their own numbers: citation + optional note */
.article-main .reference-list { list-style: none; padding-left: 0; }
.article-main .reference-list li { margin: 0 0 14px; }
.article-main .reference-citation { margin: 0; color: var(--body); }
.article-main .reference-note { margin: 2px 0 0; }
/* References written as paragraphs that start with [1], [2] … */
.article-main p.reference-entry { margin: 0 0 12px; padding-left: 1.8em; text-indent: -1.8em; }
.article-main div.reference-list { border-top: 1px solid var(--rule); }
.article-main div.reference-list p { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule-light); }

/* ── End of article ── */
.article-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 14px; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .language-toolbar { padding: 16px 22px 0; }
  .article-main .scheme-comparison { grid-template-columns: 1fr; }
  .article-head-inner { padding: 38px 22px 30px; }
  .article-layout { grid-template-columns: 1fr; gap: 0; padding: 32px 22px 64px; }
  .article-side { position: static; margin-bottom: 36px; }
}
@media (max-width: 820px) {
  .site-header-inner { padding: 12px 14px; display: block; }
  .site-header-left { flex-direction: column; align-items: flex-start; gap: 3px; }
  .site-header-left > a:first-child { padding-right: 0; white-space: nowrap; font-size: 15px; letter-spacing: 3px; }
  .site-header-left > a:first-child::after { display: none; }
  .back-link { white-space: nowrap; }
}
@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .article-abstract { padding: 18px 18px; }
  .evidence { padding: 16px 16px 14px; }
  .article-main .article-section.conclusion { padding: 20px 18px 4px; }
  .article-main .source-record, .article-main blockquote.record-quote { padding: 16px 16px 14px; }
  .article-main .translation-notice { display: block; padding: 14px 16px; }
  .article-main .row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .article-main .translation-notice strong { display: block; margin-bottom: 4px; }
  .article-main table { display: block; overflow-x: auto; }
  .article-main p.reference-entry { padding-left: 0; text-indent: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .site-header { position: static; }
  .article-side, .article-nav, .language-toolbar { display: none; }
  body, .article-head { background: #fff; }
  .article-layout { display: block; padding: 20px 0; }
  .article-section > h2 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
}