/* Stage 1: shared reading, spacing, interaction and header foundations. */
:root{
  --motion:150ms;
  --band-space:var(--space-8);
  --header-brand-height:64px;
  --header-nav-height:80px;
  --header-compact-height:56px;
  --muted:#535F6D;
  --accent:#05555D;
  --action-fill:var(--accent);
}
:root[data-appearance="dark"]{
  --paper:#101F2D;
  --band:#1A2C3D;
  --surface:#24394D;
  --rule:#52677B;
  --ink:#F0F3F6;
  --muted:#B4C0CD;
  --accent:#78D6DB;
}
html{scroll-padding-top:calc(var(--header-compact-height) + var(--space-5))}
body{line-break:strict;text-wrap:pretty}
p{max-width:var(--measure)}
:is(h1,h2,h3,h4,h5,h6){text-wrap:balance;letter-spacing:-.01em;font-feature-settings:"palt"}
:is(h1,h2){font-family:var(--font-serif);font-weight:600}
@supports(word-break:auto-phrase){:is(h1,h2,h3,h4,h5,h6){word-break:auto-phrase}}
html h1,.page-heading h1,.article-heading h1{font-size:var(--text-title)}
html h2,.home-band>.wrap>.section-head h2,.home-band>.wrap>h2{font-size:var(--text-section)}
html h3{font-size:var(--text-item)}
.home-brief .brief-line h3,.document-covers .typeset-cover h3{font-size:var(--text-item)}
html[lang] .world-observation>.home-title{font-size:var(--home-title-size);line-height:var(--home-title-leading-ja)}
.home-title .home-title-ja{font-size:inherit;font-weight:700}
html[lang] .home-title>span{font-size:inherit}
html[lang] .home-title>.home-title-times{font-size:inherit}
.article-body,.research-article{font-family:var(--font-sans);font-size:var(--text-body);line-height:1.9;max-width:var(--article-width)}
.long-read,.article-body.long-read,.research-article.long-read{font-family:var(--font-sans)}
.article-body p,.research-article p{max-width:var(--measure)}
.article-body h3,.research-article h3{font-family:var(--font-sans)}
.article-body>section+section,.research-article>section+section{margin-top:var(--space-8)}
.article-body h2,.research-article h2{margin-top:var(--space-8);margin-bottom:var(--space-5)}
.article-body h3,.research-article h3{margin-top:var(--space-6);margin-bottom:var(--space-4)}
.article-body p+p,.research-article p+p{margin-top:var(--space-5)}
.article-body>section:first-child,.research-article>section:first-child{margin-top:0}
.article-body>section>h2:first-child,.research-article>section>h2:first-child{margin-top:0}
.page-main>.page-heading,.page-main>.article-heading,.page-main>.brief-edition-heading{padding-block:var(--space-8)}
.page-main>.section,.home-band{padding-block:var(--space-8)}
.section+.section{margin-top:0}
.home-band .section-head{margin-bottom:var(--space-6)}
.home-open-questions{margin-top:var(--space-8);padding-top:var(--space-6)}
.record-meta,.source-meta,.page-updated,.source-date,.record-footer,.nav-item-count,.search-result-meta,.search-suggestion-meta{font-size:var(--text-meta)}
/* Keep the update date distinct from freshness in home cards, including wrapped rows. */
.home-brief .record-footer>.updated{display:flex;align-items:baseline;gap:var(--space-1) var(--space-2);width:100%;margin-top:var(--space-2);font-size:var(--text-meta)}
.home-brief .updated>span:first-child,.home-brief .updated>time{white-space:nowrap}
.home-brief .updated>.recent{display:inline-block;padding:0 var(--space-2);border:1px solid var(--rule);border-radius:var(--space-1);background:var(--surface);font-size:inherit;line-height:1.6;white-space:nowrap}
:is(time,.numeric,.count,.nav-total,.nav-group-count,.nav-item-count,.results-meta,td,th){font-variant-numeric:tabular-nums}
.atlas-legend,.signal-legend,.figure-legend,.chart-legend,.atlas-legend button{font-size:var(--text-legend)}
a{ text-decoration-thickness:1px;text-underline-offset:.2em }
a:hover{ text-decoration-thickness:1px }
main :is(p,li,dd,td,figcaption) a,.text-link,.source-link{color:var(--accent);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
:is(h1,h2,h3,h4,h5,h6) a{color:inherit;text-decoration:none}
:is(h1,h2,h3,h4,h5,h6) a:is(:hover,:focus-visible){text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.observation-surface{--accent:var(--on-navy-accent)}
.observation-surface :is(p,li,dd,td,figcaption) a{color:var(--on-navy-accent)}
.masthead,.mobile-menu{--focus:var(--on-navy-accent)}
:where(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.masthead :focus-visible,.mobile-menu :focus-visible,.observation-surface :focus-visible{outline:2px solid var(--on-navy-accent);outline-offset:2px}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
summary:not(.nav-group>summary)::after{content:'›';display:inline-block;margin-left:var(--space-3);font-family:var(--font-ui);font-size:var(--text-item);line-height:1;transform:rotate(0);transition:transform var(--motion)}
details[open]>summary:not(.nav-group>summary)::after{content:'›';transform:rotate(90deg)}
.nav-group[open]>summary .nav-toggle{transform:rotate(90deg)}
.nav-group>summary::after{content:none}
.literature-topic>summary::before,.literature-topic[open]>summary::before{content:none}
.question-detail summary{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.question-detail summary>span{transform:none}
button,a,summary,input,select{transition-duration:var(--motion)}
.pathway-band{background:var(--band);color:var(--ink)}
.pathway-band .observatory-pathway a{color:var(--ink);text-decoration:none}
.pathway-band .observatory-pathway span{color:var(--muted)}
.pathway-band .observatory-pathway li+li{border-color:var(--rule)}
.pathway-band .observatory-pathway li+li::before{background:var(--band);color:var(--muted)}
/* One brand line, followed by one compact row of the existing four groups. */
.masthead{height:calc(var(--header-brand-height) + var(--header-nav-height));background:var(--night-0)}
.brand-row{height:var(--header-brand-height);min-height:0;padding-block:0;flex-wrap:nowrap;gap:var(--space-5)}
.brand{min-width:0;gap:var(--space-3)}
.brand strong{font-size:var(--text-body)!important;white-space:nowrap}
.brand small{font-size:var(--text-meta);line-height:1.3}
.brand .signal-logo{width:24px;height:24px}
.brand-right,.desktop-preferences{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--space-4)}
.brand-right{min-width:0}
.global-search{width:240px;flex:0 1 240px}
.global-search input{font-size:var(--text-ui);height:40px;min-height:40px}
.appearance-control{display:flex;gap:0;border:1px solid var(--on-navy-rule);padding:0}
.appearance-control button{position:relative;display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:0;background:transparent;color:var(--on-navy-muted)}
.appearance-control button[aria-pressed="true"]{background:var(--night-2);color:var(--on-navy-accent);box-shadow:inset 0 -2px var(--on-navy-accent)}
.control-tooltip{position:absolute;top:calc(100% + var(--space-2));left:50%;transform:translateX(-50%);font-size:var(--text-meta);line-height:1.5;padding:var(--space-1) var(--space-2);background:var(--night-2);border:1px solid var(--on-navy-rule);color:var(--on-navy);white-space:nowrap;pointer-events:none;visibility:hidden;z-index:110}
.appearance-control button:is(:hover,:focus-visible) .control-tooltip{visibility:visible}
.main-nav{height:var(--header-nav-height)}
.main-nav .nav-group>summary,.main-nav .nav-japan>a{height:var(--header-nav-height);min-height:0;gap:var(--space-2);padding:var(--space-3) var(--space-4);justify-content:center}
.nav-heading{gap:var(--space-2)}
.nav-heading strong{font-size:var(--text-base)}
.nav-heading .nav-translation{display:none}
.nav-heading .nav-toggle{font-size:var(--text-item)}
.nav-description{min-height:0;font-size:var(--text-meta);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-group-count{font-size:var(--text-meta);font-variant-numeric:tabular-nums;color:var(--on-navy-muted);white-space:nowrap}
.nav-total{display:none}
.nav-mobile-total{display:block;font-size:var(--text-meta);margin-top:var(--space-2)}
.main-nav .nav-dropdown{padding:var(--space-5);gap:var(--space-5)}
.main-nav .nav-items>a{padding:var(--space-4) 0}
.menu-toggle{display:none}
.mobile-menu{display:none}
.masthead.is-compact{position:fixed;top:0;left:0;width:100%;height:var(--header-compact-height);display:flex;align-items:center;padding-inline:max(var(--gutter),calc((100% - var(--max))/2));gap:var(--space-5);border-bottom:1px solid var(--on-navy-rule)}
.compact-header #app{padding-top:calc(var(--header-brand-height) + var(--header-nav-height))}
.masthead.is-compact .brand-row{width:auto;max-width:none;margin:0;padding:0;flex:1;height:var(--header-compact-height);gap:var(--space-5)}
.masthead.is-compact .brand small,.masthead.is-compact .desktop-preferences{display:none}
.masthead.is-compact .brand strong{font-size:var(--text-base)!important}
.masthead.is-compact .main-nav{width:auto;max-width:none;margin:0;padding:0;height:var(--header-compact-height);display:flex}
.masthead.is-compact .main-nav .nav-group>summary,.masthead.is-compact .main-nav .nav-japan>a{height:var(--header-compact-height);padding-inline:var(--space-3);border:0}
.masthead.is-compact .main-nav .nav-description,.masthead.is-compact .main-nav .nav-number,.masthead.is-compact .main-nav .nav-group-count,.masthead.is-compact .main-nav .nav-toggle{display:none}
.masthead.is-compact .main-nav .nav-dropdown{position:fixed;top:var(--header-compact-height);left:var(--gutter);right:var(--gutter)}
@media(min-width:761px) and (max-width:1100px){
  .header-policy{display:none}
  .brand-row{gap:var(--space-4)}
  .brand-right,.desktop-preferences{gap:var(--space-2)}
  .global-search{width:210px;flex-basis:210px}
  .nav-number{display:none}
  html:lang(en) .main-nav .nav-heading strong{font-size:var(--text-ui)}
  html:lang(en) .main-nav .nav-group>summary,html:lang(en) .main-nav .nav-japan>a{padding-inline:var(--space-3)}
  .masthead.is-compact{gap:var(--space-3)}
  .masthead.is-compact .brand .signal-logo{display:none}
  .masthead.is-compact .global-search{width:176px;flex-basis:176px}
  .masthead.is-compact .main-nav .nav-heading strong{font-size:var(--text-ui)}
}
@media(max-width:760px){
  :root{--gutter:var(--space-4)}
  .masthead{height:var(--header-brand-height)}
  .brand-row{height:var(--header-brand-height);padding-block:0;gap:var(--space-2);justify-content:space-between}
  .brand strong{font-size:var(--text-base)!important}
  .brand small{font-size:var(--text-meta)}
  .brand .signal-logo{width:20px;height:20px}
  .brand-right{gap:var(--space-1)}
  .desktop-preferences,.main-nav{display:none}
  .global-search{width:auto;flex:0 0 44px}
  .search-toggle,.menu-toggle,.menu-close{display:grid;place-items:center;min-width:44px;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--on-navy)}
  .global-search form{left:var(--space-4);right:var(--space-4);top:var(--header-brand-height);padding:var(--space-3);border:1px solid var(--on-navy-rule)}
  .global-search input{font-size:var(--text-base);min-height:44px}
  .global-search .search-suggestions{left:var(--space-3);right:var(--space-3);max-height:60dvh}
  .mobile-menu[open]{display:block;position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0 var(--space-4) var(--space-5);border:0;overflow:auto;background:var(--night-0);color:var(--on-navy)}
  .mobile-menu::backdrop{background:var(--night-0)}
  .menu-open{overflow:hidden}
  .mobile-menu-top{height:var(--header-brand-height);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--on-navy-rule)}
  .mobile-menu-top strong{font-size:var(--text-body)}
  .mobile-menu .mobile-nav{display:block;padding:var(--space-4) 0}
  .mobile-menu .nav-group>summary,.mobile-menu .nav-japan>a{padding:var(--space-4) 0;gap:var(--space-2)}
  .mobile-menu .nav-heading .nav-translation{display:inline;font-size:var(--text-meta)}
  .mobile-menu .nav-dropdown{padding:var(--space-4) 0 var(--space-5)}
  .mobile-menu .nav-context{padding-bottom:var(--space-4);margin-bottom:var(--space-4)}
  .mobile-menu .nav-items>a{padding:var(--space-4) 0}
  .mobile-preferences{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--on-navy-rule)}
  .mobile-preferences .appearance-control button{width:44px;height:44px;min-height:44px}
  .mobile-preferences>a{font-size:var(--text-ui);color:var(--on-navy)}
}
/* Static shells reserve the header, heading and first blocks before data arrives. */
.shell-skeleton{min-height:100vh;pointer-events:none}
.skeleton-header{height:calc(var(--header-brand-height) + var(--header-nav-height));background:var(--night-0);padding-inline:var(--gutter)}
.skeleton-brand{height:var(--header-brand-height);max-width:var(--max);margin:auto;display:flex;align-items:center;color:var(--on-navy);font-size:var(--text-body);font-weight:600}
.skeleton-nav{max-width:var(--max);height:var(--header-nav-height);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);align-items:center;color:var(--on-navy-muted);font-size:var(--text-base)}
.skeleton-main{min-height:640px}
.skeleton-heading{padding:var(--space-8) var(--gutter);background:var(--surface)}
.skeleton-heading>div,.skeleton-blocks{max-width:var(--max);margin:auto}
.skeleton-line{height:18px;width:65%;background:var(--rule);margin-top:var(--space-4);border-radius:2px}
.skeleton-line.title{height:60px;width:56%;margin:0}
.skeleton-line.short{width:36%}
.skeleton-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);padding:var(--space-6) var(--gutter)}
.skeleton-card{height:200px;border:1px solid var(--rule);padding:var(--space-5);background:var(--surface)}
.shell-skeleton[data-skeleton="home"] .skeleton-main{background:var(--night-0);--rule:var(--night-rule);--surface:var(--night-0)}
.shell-skeleton[data-skeleton="home"] .skeleton-heading{padding-block:var(--space-4)}
.shell-skeleton[data-skeleton="home"] .skeleton-blocks{grid-template-columns:2fr 1fr}
.shell-skeleton[data-skeleton="home"] .skeleton-card{height:400px}
.shell-skeleton[data-skeleton="about"] .skeleton-blocks,.shell-skeleton[data-skeleton="brief"] .skeleton-blocks{grid-template-columns:200px minmax(0,680px)}
@media(max-width:760px){
  .skeleton-header{height:var(--header-brand-height)}
  .skeleton-nav{display:none}
  .skeleton-heading{padding-block:var(--space-8)}
  .skeleton-line.title{width:90%;height:60px}
  .skeleton-blocks,.shell-skeleton[data-skeleton] .skeleton-blocks{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{
  :root,:root[data-appearance="dark"]{--paper:#fff;--surface:#fff;--band:#fff;--ink:#000;--muted:#222;--accent:#000;--rule:#aaa}
  .masthead,.mobile-menu,.shell-skeleton{display:none!important}
  .compact-header #app{padding-top:0}
  .page-main>.page-heading,.page-main>.article-heading,.page-main>.brief-edition-heading,.home-band{padding-block:var(--space-5)}
}

/* Publication audit: readable medium-width controls and book bibliography. */
@media(min-width:600px) and (max-width:760px){
 .observation-controls{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
 .observation-controls label,.observation-controls select{width:100%;min-width:0;max-width:none}
 .observation-filter-note{grid-column:1/-1}
}
.review-book{margin-block:var(--space-6);padding:var(--space-5);background:var(--band);border:1px solid var(--rule)}
.review-book.has-cover{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--space-5)}
.review-book h2{margin-top:0;font-size:var(--text-item)}
.review-book dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-4);font-size:var(--text-ui)}
.review-book dt{font-weight:600}.review-book dd{margin:0}.review-book figure{margin:0}.review-book img{width:100%;height:auto}
.review-book figcaption{font-size:var(--text-meta)}
.not-found-links{max-width:680px;margin:auto;padding:var(--space-6) var(--gutter)}
.not-found-links form>div{display:flex;gap:var(--space-3);margin-block:var(--space-3)}
.not-found-links input{min-width:0;flex:1}.not-found-links nav{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-block:var(--space-6)}
@media(max-width:480px){.review-book.has-cover{grid-template-columns:1fr}.review-book figure{max-width:160px}}

/* Essays need a reading column plus padding, not a 680px outer box.
   Keep the established prose measure; reserve a separate gutter for source notes
   on wide screens. Smaller screens retain their existing mobile layout. */
@media screen and (min-width:901px){
 body:is([data-page="cases"],[data-page="commentary"]) .research-article{
  max-width:calc(var(--article-width) + var(--space-7)*2);
  padding:var(--space-7);
 }
 body:is([data-page="cases"],[data-page="commentary"]) .research-article>*{
  max-width:var(--article-width);
 }
 body:is([data-page="cases"],[data-page="commentary"]) .research-article .annotated-block{
  display:block;width:auto;max-width:var(--article-width);
 }
 body:is([data-page="cases"],[data-page="commentary"]) .research-article .paragraph-sidenote{
  margin-top:var(--space-4);
 }
}
@media screen and (min-width:1200px){
 body:is([data-page="cases"],[data-page="commentary"]) .research-article{
  --essay-note-width:240px;
  max-width:calc(var(--article-width) + var(--essay-note-width) + var(--space-6) + var(--space-7)*2);
 }
 body:is([data-page="cases"],[data-page="commentary"]) .research-article .annotated-block{
  display:grid;grid-template-columns:minmax(0,var(--article-width)) var(--essay-note-width);
  gap:var(--space-6);
  width:calc(100% + var(--essay-note-width) + var(--space-6));
  max-width:calc(var(--article-width) + var(--essay-note-width) + var(--space-6));
 }
 body:is([data-page="cases"],[data-page="commentary"]) .research-article .paragraph-sidenote{
  margin-top:0;
 }
}

/* Book review: the source-note wrapper is a paragraph too. Give every adjacent
   prose block one line of separation, whether or not it has a source note. */
body[data-page="commentary"] .commentary-article{
 --review-paragraph-gap:calc(var(--text-body) * var(--leading-serif));
}
body[data-page="commentary"] .commentary-article>:is(p,.annotated-block),
body[data-page="commentary"] .commentary-article>.annotated-block>p{
 margin-block:0;
}
body[data-page="commentary"] .commentary-article>:is(p,.annotated-block)+:is(p,.annotated-block){
 margin-block-start:var(--review-paragraph-gap);
}
body[data-page="commentary"] .commentary-article>.annotated-block>.paragraph-sidenote{
 margin-block-end:0;
}
@media(max-width:760px){
 body[data-page="commentary"] .commentary-article{
  --review-paragraph-gap:calc(var(--text-base) * var(--leading-serif));
 }
}
@media print{
 body[data-page="commentary"] .commentary-article{
  --review-paragraph-gap:calc(var(--text-ui) * var(--leading-serif));
 }
}

/* Weekly essays: reserve space for prose before applying page padding. */
body[data-page="brief"] .digest.research-article{
 width:100%;max-width:960px;margin:var(--space-7) auto var(--space-9);
 padding:var(--space-7);font-size:var(--text-body);line-height:1.95;
}
body[data-page="brief"] .digest.research-article>header,
body[data-page="brief"] .digest.research-article>section{
 width:100%;max-width:760px;margin-inline:auto;
}
body[data-page="brief"] .digest.research-article p{max-width:none;line-height:1.95;margin-block:0 var(--space-5)}
body[data-page="brief"] .digest.research-article .record-meta{font-size:var(--text-meta);color:var(--muted);margin-bottom:var(--space-4)}
body[data-page="brief"] .digest.research-article header h2{font-size:var(--text-section);line-height:1.55;margin:0 0 var(--space-5);text-align:start}
body[data-page="brief"] .digest.research-article .weekly-lead{font-size:var(--text-body);padding-bottom:var(--space-5);border-bottom:1px solid var(--rule)}
body[data-page="brief"] .digest.research-article>section{margin-top:var(--space-7)}
body[data-page="brief"] .digest.research-article h3{font-size:var(--text-item);font-weight:600;line-height:1.55;margin:0 0 var(--space-5);text-wrap:balance}
body[data-page="brief"] .digest.research-article .weekly-claim strong{font-weight:600}
body[data-page="brief"] .digest.research-article li{margin-block:var(--space-3);line-height:1.85}
body[data-page="brief"] .digest.research-article .table-wrap{max-width:100%;overflow-x:auto}
body[data-page="brief"] .digest.research-article table{font-size:var(--text-ui)}
@media(max-width:760px){
 body[data-page="brief"] .digest.research-article{padding:var(--space-5) var(--space-4);margin-block:var(--space-5) var(--space-8);font-size:var(--text-base)}
 body[data-page="brief"] .digest.research-article header h2{font-size:var(--text-item)}
 body[data-page="brief"] .digest.research-article .weekly-lead{font-size:var(--text-base)}
 body[data-page="brief"] .digest.research-article h3{font-size:var(--text-body)}
 body[data-page="brief"] .digest.research-article>section{margin-top:var(--space-6)}
}
@media print{body[data-page="brief"] .digest.research-article{max-width:none;padding:0;margin:0 auto;break-before:page}}