/* Shared reading layout and navigation. */
:root { --paper: rgba(247,244,236,.94); }
html { scroll-padding-top: 1rem; }
body { overflow-wrap: break-word; }
body > header, .wrap > .top { width:min(1040px,92vw); margin:0 auto; padding:18px 0; height:auto; min-height:76px; gap:20px; color:#252724; text-shadow:none; }
.back { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; letter-spacing:.04em; border-color:rgba(37,39,36,.4); color:inherit; flex-shrink:0; }
main, .wrap { width:min(1040px,92vw); }
main { margin:0 auto 60px; padding:clamp(28px,6vw,80px); background:var(--paper); }
.wrap { padding-top:0; }
.wrap > .top { width:100%; margin-bottom:0; }
.wrap > .article { padding:clamp(28px,6vw,80px); }
article { max-width:790px; margin-inline:auto; }
.wrap > article { max-width:none; }
article > p, article > h2 { max-width:790px; }
article p { font-size:1rem; line-height:2.15; }
h1 { font-size:clamp(1.875rem,4.4vw,3.25rem); line-height:1.6; }
h2 { font-size:clamp(1.375rem,2.5vw,1.875rem); line-height:1.75; }
.meta, .eyebrow { font-size:.75rem; opacity:1; color:#53584f; line-height:1.8; letter-spacing:.12em; }
.reading-next { margin-top:64px; padding-top:32px; border-top:1px solid rgba(37,39,36,.22); }
.reading-next h2 { margin:0 0 22px; font-size:1.25rem; }
.reading-next-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.reading-card { display:flex; align-items:center; padding:22px; min-height:100px; border:1px solid rgba(37,39,36,.22); border-radius:8px; color:#252724; background:rgba(255,255,255,.4); text-decoration:none; font-family:"Noto Serif JP",serif; font-size:1rem; line-height:1.9; }
.reading-card:hover { background:rgba(255,255,255,.8); text-decoration:underline; text-underline-offset:4px; }
.reading-return { display:inline-flex; align-items:center; min-height:44px; margin-top:24px; color:#252724; font-size:.875rem; text-underline-offset:5px; }
a:focus-visible { outline:2px solid #303c35; outline-offset:5px; }
@media(max-width:760px) {
 main, .wrap { width:94vw; }
 main, .wrap > .article { padding:30px 22px; }
 body > header, .wrap > .top { width:90vw; min-height:68px; }
 .wrap > .top { width:100%; padding-inline:4px; }
 .reading-next-grid { grid-template-columns:1fr; }
 .reading-card { min-height:80px; padding:20px; }
 .reading-next { margin-top:48px; }
}

/* Reading aids */
.reading-time { font-family:Inter,sans-serif; font-size:.875rem; line-height:1.8; color:#53584f; margin:0 0 24px; }
.reading-toc { margin:0 0 36px; padding:8px 18px; border:1px solid rgba(37,39,36,.22); border-radius:8px; background:rgba(255,255,255,.35); }
.reading-toc summary { min-height:44px; padding:10px 0; cursor:pointer; font-size:1rem; line-height:1.5; }
.reading-toc ol { padding-left:1.4rem; margin:8px 0 16px; }
.reading-toc li { padding-left:4px; }
.reading-toc a { display:block; padding:10px 0; color:#303c35; font-family:"Noto Serif JP",serif; font-size:1rem; line-height:1.7; text-underline-offset:4px; }
h2[id] { scroll-margin-top:24px; }
.reading-toc summary:focus-visible { outline:2px solid #303c35; outline-offset:3px; }
img,svg { max-width:100%; }
@media(max-width:760px){
 .back { font-size:.875rem; }
 .meta,.eyebrow { letter-spacing:.04em; }
 article p { font-size:1rem; }
 .photo-block { margin-inline:0; }
 .photo-block figcaption { font-size:.75rem; opacity:1; color:#53584f; }
 .flow { flex-direction:column; }
 .flow .arrow { display:none; }
 .bar { grid-template-columns:minmax(0,105px) minmax(0,1fr) 42px; }
}

/* Copy an article link at the beginning or end of a reading session. */
.article-share { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:24px 0; }
.copy-link { appearance:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:1px solid #69756b; border-radius:999px; color:#303c35; background:rgba(255,255,255,.6); font:inherit; font-size:.875rem; cursor:pointer; }
.copy-link:hover { background:#fff; }
.copy-link:focus-visible { outline:2px solid #303c35; outline-offset:4px; }
.copy-link:disabled { opacity:.65; cursor:wait; }
.copy-status { font-size:.875rem; color:#303c35; line-height:1.8; }
.copy-fallback { flex-basis:100%; min-width:0; font-size:.875rem; line-height:1.8; }
.copy-fallback[hidden] { display:none; }
.copy-url { display:block; width:100%; min-height:44px; margin-top:8px; padding:10px; border:1px solid #69756b; border-radius:6px; background:#fff; color:#252724; font-size:1rem; }

/* Reading progress */
.reading-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:100; pointer-events:none; background:transparent; }
.reading-progress span { display:block; height:100%; width:100%; background:#303c35; transform:scaleX(0); transform-origin:left center; }

/* Back to top */
.to-top { position:fixed; right:max(16px,env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:90; width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #69756b; border-radius:50%; background:rgba(247,244,236,.92); color:#303c35; font-size:1.125rem; cursor:pointer; box-shadow:0 8px 24px rgba(25,31,28,.16); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .25s ease,transform .25s ease; }
.to-top.visible { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { background:#fff; }
.to-top:focus-visible { outline:2px solid #303c35; outline-offset:4px; }
@media(prefers-reduced-motion:reduce){ .to-top { transition:none; } }

/* Print: just the text */
@media print {
 body { background:#fff !important; color:#000; }
 body:before, body:after, header, .wrap > .top, .back, .article-share, .reading-toc, .reading-next, .reading-return, .reading-progress, .to-top, .footer { display:none !important; }
 main, .wrap, .wrap > .article { width:auto; margin:0; padding:0; background:none !important; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
 article p { line-height:1.9; }
 h2 { break-after:avoid; }
 a[href^="http"]:after { content:" (" attr(href) ")"; font-size:.75em; word-break:break-all; }
}
h1[tabindex="-1"]:focus { outline:none; }

/* ---------- Redesign: cover image + paper sheet ---------- */
body.article-page { background:var(--paper,#f8f5ee) !important; color:#1b1c19; }
body.article-page::before, body.article-page::after { display:none !important; }
.cover { position:relative; height:clamp(380px,68vh,700px); background:var(--img,none) center/cover no-repeat, var(--ph); overflow:hidden; isolation:isolate; }
.cover::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,14,30,.36) 0%,rgba(8,14,30,0) 34%,rgba(8,14,30,0) 70%,rgba(8,14,30,.18) 100%); pointer-events:none; }
.cover.is-placeholder::after { z-index:1; }
.cover-back { position:absolute; z-index:2; left:var(--gutter,24px); top:calc(var(--nav-h,72px) + 12px); display:inline-flex; align-items:center; gap:10px; min-height:44px; color:#fff; text-decoration:none; font-size:.875rem; letter-spacing:.06em; text-shadow:0 1px 16px rgba(5,10,25,.3); }
.cover-back span { transition:transform .35s ease; }
.cover-back:hover span { transform:translateX(-4px); }
.cover-back:focus-visible { outline:2px solid #fff; outline-offset:4px; }
body.article-page > main, body.article-page > .wrap { position:relative; z-index:2; margin:calc(-1 * clamp(150px,24vh,260px)) auto 0 !important; width:min(1040px,100%); }
body.article-page > main, body.article-page > .wrap > .article { background:var(--paper,#f8f5ee) !important; border:0 !important; border-radius:2px 2px 0 0 !important; box-shadow:0 -40px 90px rgba(10,20,60,.14) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
body.article-page > .wrap { padding:0 0 72px; }
body.article-page > main { padding-bottom:clamp(56px,8vw,96px) !important; margin-bottom:0 !important; }
body.article-page h1 { font-weight:200; letter-spacing:.03em; }
body.article-page h2 { font-weight:300; }
body.article-page .meta, body.article-page .eyebrow { letter-spacing:.14em; color:#5b5d56; }
body.article-page article a:not(.reading-card):not(.reading-return):not(.copy-link):not(.book-buy) { color:#1442c4; text-underline-offset:4px; }
body.article-page .reading-card { background:#fff; border-color:rgba(27,28,25,.12); border-radius:2px; transition:border-color .3s, transform .5s cubic-bezier(.2,.7,.2,1); }
body.article-page .reading-card:hover { background:#fff; border-color:#1442c4; transform:translateY(-3px); text-decoration:none; color:#1442c4; }
body.article-page .copy-link { border-color:rgba(27,28,25,.3); color:#1b1c19; background:transparent; }
body.article-page .copy-link:hover { background:#1b1c19; color:#f8f5ee; }
body.article-page .reading-toc { background:#fff; border-color:rgba(27,28,25,.12); border-radius:2px; }
body.article-page .reading-toc a { color:#1b1c19; }
body.article-page .reading-toc a:hover { color:#1442c4; }
body.article-page .footer { text-align:center; padding:40px 20px calc(48px + env(safe-area-inset-bottom,0px)); font-size:.75rem; letter-spacing:.16em; color:#5b5d56; }
.reading-progress { z-index:130; }
.reading-progress span { background:#1442c4; }
.to-top { border-color:rgba(27,28,25,.25); background:rgba(248,245,238,.92); color:#1b1c19; }
@media(max-width:760px){
 .cover { height:clamp(300px,56vh,520px); }
 body.article-page > main, body.article-page > .wrap { width:100%; margin-top:calc(-1 * clamp(90px,16vh,160px)) !important; }
 body.article-page > .wrap { padding-bottom:48px; }
}
@media print { .cover, .site-nav { display:none !important; } body.article-page > main, body.article-page > .wrap { margin:0 !important; box-shadow:none !important; } }

/* Citations jump to the reference; the reference is highlighted when targeted. */
article a[href^="#ref-"] { text-decoration:none; font-size:.85em; white-space:nowrap; }
[id^="ref-"]:target { background:#fff6d9; outline:6px solid #fff6d9; border-radius:2px; }
[id^="ref-"] { scroll-margin-top:96px; }
.share-x,.share-native{text-decoration:none}
body.article-page article a.copy-link { color:#1b1c19; }
body.article-page article a.copy-link:hover { color:#f8f5ee; }
.cover[data-nav="light"] .cover-back { color:#1b1c19; text-shadow:none; }
/* Link to the same article in the other language, opposite the back link. */
.cover-lang { position:absolute; z-index:2; right:var(--gutter,24px); top:calc(var(--nav-h,72px) + 12px); display:inline-flex; align-items:center; min-height:44px; padding:0 4px; color:#fff; font-size:.875rem; letter-spacing:.06em; text-underline-offset:4px; text-shadow:0 1px 16px rgba(5,10,25,.3); }
.cover-lang:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.cover[data-nav="light"] .cover-lang { color:#1b1c19; text-shadow:none; }
.cover[data-nav="light"]::before { background:linear-gradient(180deg,rgba(248,245,238,.4),rgba(248,245,238,0) 40%); }

/* Table of contents beside the article on wide screens. */
.toc-side { display:none; }
@media (min-width:1400px) {
 .toc-side { display:block; position:fixed; top:calc(var(--nav-h,72px) + 32px); left:calc(50% + 520px + 28px); width:min(240px, calc(50vw - 520px - 56px)); max-height:calc(100vh - var(--nav-h,72px) - 64px); overflow:auto; z-index:5; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s; font-family:"Noto Serif JP",serif; }
 .toc-side.visible { opacity:1; visibility:visible; transform:none; transition:opacity .35s ease, transform .35s ease; }
 .toc-side-label { margin:0 0 10px; font-family:Inter,sans-serif; font-size:.75rem; letter-spacing:.16em; color:#5b5d56; }
 .toc-side ol { list-style:none; margin:0; padding:0; border-left:1px solid rgba(27,28,25,.14); }
 .toc-side a { display:block; padding:7px 0 7px 16px; margin-left:-1px; border-left:2px solid transparent; color:#5b5d56; font-size:.8125rem; line-height:1.7; text-decoration:none; }
 .toc-side a:hover { color:#1b1c19; }
 .toc-side a[aria-current="true"] { color:#1442c4; border-left-color:#1442c4; }
 .toc-side a:focus-visible { outline:2px solid #1442c4; outline-offset:2px; }
}
@media (prefers-reduced-motion:reduce) { .toc-side { transition:none !important; } }
@media print { .toc-side { display:none !important; } }

/* Legacy labels and notes were as small as 8px; keep every bit of text at 12px or more. */
body.article-page :is(main, .wrap) :is(small, .note, .label, .value, .axis-label, .pendulum-left, .pendulum-right, .timeline-no) { font-size:max(.75rem, 1em) !important; }
body.article-page :is(main, .wrap) small, body.article-page :is(main, .wrap) .timeline-no, body.article-page :is(main, .wrap) .axis-label, body.article-page :is(main, .wrap) [class^="pendulum-"] { font-size:.75rem !important; letter-spacing:.08em; }
article a[href^="#ref-"] { font-size:max(.75rem, .85em); }
body.article-page :is(.stat, .metric) span { font-size:.75rem !important; opacity:1 !important; color:#5b5d56; }

/* Muted captions and labels from the older designs, darkened to readable contrast. */
body.article-page :is(figcaption, figcaption a, .axis-label, .timeline-no) { color:#5b5d56 !important; opacity:1 !important; }
body.article-page .book-buy { background:#1b1c19 !important; color:#f8f5ee !important; }
body.article-page .book-buy:hover { background:#1442c4 !important; }
.table-wrap:focus-visible{outline:2px solid #1442c4;outline-offset:4px}