/* The Northline design system (decision E36). Loaded after the legacy base and national sheets, so every existing page takes the new tokens, type and components without being rewritten.
   Identity: paper and ink, one signal colour, one line. The line is the brand, the navigation thread and the chart, and it is used with restraint. See docs/DESIGN_SYSTEM.md. */

/* ---------- tokens ---------- */
:root,:root[data-theme]{
  color-scheme:light;
  --paper:#f6f2e9;--paper-2:#ece6d8;--sheet:#fffdf7;--ink:#14171b;--ink-2:#3b4046;--muted:#5c6066;--hair:#dcd6c8;--hair-2:#c6bfae;--signal:#d1341b;--signal-ink:#a8260f;--mark:#f4dfb2;--night:#14171b;
  --bg:var(--paper);--surface:var(--sheet);--line:var(--hair);--grid:rgba(20,23,27,.09);--band:rgba(20,23,27,.055);
  --accent:var(--signal-ink);--accent-ink:var(--signal-ink);--accent-soft:#f1e6cf;--ochre:#a06c00;--red:#b4260f;--green:#0e7a5c;
  --c1:#D1341B;--c2:#1A67B0;--c3:#A06C00;--c4:#008F70;--c5:#8045A8;--c6:#4F7A1F;--c7:#B0406F;--c8:#3F6FD9;
  --ind1:#14171b;--ind2:#5c6066;--ind3:#8a8c88;--ind4:#c6bfae;--ind5:#3b4046;--ind6:#d1341b;--ind8:#a06c00;
  --serif:"Fraunces","Fraunces Text Fallback",Georgia,"Times New Roman",serif;--serif-hero:"Fraunces","Fraunces Hero Fallback",Georgia,serif;--serif-head:"Fraunces","Fraunces Head Fallback",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:var(--serif-head);--body:var(--sans);--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gut:clamp(20px,5.6vw,88px);--col-gap:clamp(16px,2vw,32px);--maxw:1180px;--max:1560px;--prose:68ch;--head-h:64px;--mast:65px;--s1:#1a67b0;--s2:#a06c00;--s3:#008f70;--s4:#8045a8;
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* A dark environment for one section only, where it improves the experience (immersive 3D, the instrument). Nothing else changes. */
.night{--paper:#14171b;--paper-2:#1d2127;--sheet:#1a1e24;--ink:#f6f2e9;--ink-2:#d6d1c6;--muted:#a7a79f;--hair:#31363e;--hair-2:#454b54;--signal:#ff6a4d;--signal-ink:#ff8a71;--bg:var(--paper);--surface:var(--sheet);--line:var(--hair);--grid:rgba(246,242,233,.1);--band:rgba(246,242,233,.07);--accent:var(--signal-ink);--accent-ink:var(--signal-ink);--accent-soft:#2a2f37;color-scheme:dark;background:var(--paper);color:var(--ink)}

/* ---------- base ---------- */
html{overflow-x:clip;background:var(--paper);scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);font-variant-numeric:normal;font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3{font-family:var(--serif-head);font-optical-sizing:auto;text-wrap:balance}
h1{font-weight:340;letter-spacing:-.024em;font-variation-settings:"opsz" 120}
h2{font-weight:380;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.06;letter-spacing:-.018em;font-variation-settings:"opsz" 72}
h3{font-family:var(--serif);font-weight:440;font-size:1.32rem;line-height:1.2;letter-spacing:-.006em;font-variation-settings:"opsz" 30}
h4{font-family:var(--sans);font-weight:600;font-size:1.02rem}
a{color:inherit;text-decoration-color:var(--signal);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--ink);text-decoration-thickness:2px}
strong,b{font-weight:600}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
hr{border-top-color:var(--line)}
::selection{background:var(--mark)}
.num,table,.tbl,.tile{font-variant-numeric:tabular-nums}
.page{max-width:var(--maxw);padding-inline:clamp(20px,4vw,40px)}
.wide{max-width:none;margin:0;padding:0}
.prose{font-size:1.06rem;line-height:1.62}
.muted{color:var(--muted)}
.lede{font:400 clamp(1.2rem,1.6vw,1.45rem)/1.42 var(--serif);font-variation-settings:"opsz" 28;color:var(--ink-2);max-width:36em}
.kicker,.eyebrow{font:600 .86rem/1.3 var(--sans);letter-spacing:.005em;text-transform:none;color:var(--ink-2)}
.fine{font-size:.84rem;line-height:1.5;color:var(--muted);max-width:60em}
.sr-only,.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;padding:0}

/* ---------- masthead: the shared header of the static site and the application ---------- */
.sh{background:var(--paper);border-bottom:1px solid var(--hair)}
.sh-in{max-width:none;padding-inline:var(--gut);gap:clamp(16px,2.4vw,36px)}
.wordmark{display:inline-flex;align-items:center;gap:10px;font:500 1.5rem/1 var(--serif);letter-spacing:-.018em;font-variation-settings:"opsz" 40;color:var(--ink);text-decoration:none}
.wordmark span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wordmark .mark{flex:none;overflow:visible}.mark path{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.mark circle{fill:var(--signal)}
.sh .wordmark{font-size:clamp(1.05rem,4.4vw,1.5rem);display:inline-flex;min-height:44px;padding:0}
.sh .edition{font:500 .68rem/1.1 var(--sans);letter-spacing:.005em;text-transform:none;color:var(--muted)}
.sh-d>summary,.sh-l{font:500 .98rem/1.2 var(--sans);color:var(--ink-2);padding:10px 12px;border-radius:0;min-height:44px}
.sh-d>summary:hover,.sh-l:hover,.sh-d[open]>summary{background:none;color:var(--ink)}
.sh-d[data-current]>summary,.sh-l[aria-current=page],.sh-link[aria-current=page]{color:var(--ink);background:none;box-shadow:inset 0 -2px 0 var(--signal);border-radius:0}
.sh-d>summary:focus-visible,.sh-l:focus-visible,.sh-burger:focus-visible,.sh-panel a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sh-panel,.citymenu,.sh .sh-city>.citymenu{background:var(--sheet);border:1px solid var(--hair);border-radius:2px;box-shadow:0 18px 44px rgba(20,23,27,.12)}
.sh-panel a,.citymenu a{border-radius:0}
.sh-panel a b{font:600 .98rem/1.25 var(--sans)}
.sh-panel a span{color:var(--muted);font-size:.84rem}
.sh-panel a:hover,.sh-panel a[aria-current=page],.citymenu a:hover,.citymenu a:focus-visible{background:var(--paper)}
.citymenu a small,.cm-h{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:.78rem}
.sh-burger{border-radius:0;background:none;border-color:var(--hair-2)}
.sh-badge{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:.72rem}
@media (max-width:1219px){.sh-nav{background:var(--paper);padding-inline:var(--gut)}.sh-d>summary,.sh-l{border-bottom-color:var(--hair);padding:14px 2px;box-shadow:none}.sh-d[data-current]>summary,.sh-l[aria-current=page]{box-shadow:none;color:var(--ink);font-weight:600}.sh-panel,.sh .sh-city>.citymenu{box-shadow:none;border:0;background:none}}

/* ---------- colophon ---------- */
footer.colophon{margin-top:clamp(64px,9vw,128px);padding:0 0 40px;border-top:2px solid var(--ink);background:var(--paper);color:var(--ink-2);font-size:.95rem}
footer.colophon .page{max-width:none;padding-inline:var(--gut)}
footer.colophon hr{display:none}
footer.colophon .links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0 18px}
footer.colophon .links a{text-decoration:none;font-weight:500;color:var(--ink);min-height:30px;display:inline-flex;align-items:center}
footer.colophon .links a:hover{text-decoration:underline;text-decoration-color:var(--signal)}

/* ---------- page furniture ---------- */
.crumbs,.ladder,.viewing,.chip,.banner b,.fig-foot,.cm-empty,.toc a,.toc-btn,.sec-head .num,.rsec .sec-head .num,.tile .lab,.tile-fresh,.hero .meta{font-family:var(--sans);letter-spacing:0;text-transform:none}
/* Labels are sentence case in the text face; only code is set in mono. The legacy sheets set these as small uppercase mono, so their size rises with the change. */
.mast .edition,.tile-k,.ctl-label,.tbl th,.ye-table th,.ye-ptitle,.depth b,.finding b,.means b,.why b,.out .k,.scen .tag,.watch .row.h,.watch .row>div:nth-child(2)::before,.watch .row>div:nth-child(3)::before,.watch .d::before,#change-table td::before,.fresh,.cal-day h4,.mx-unit,.prose .claim-tag,.xp-panel dl.edl dt,.pc-flag,.art-toc b,.prog-ends,.slider .ticks,.pillar .more,.mapx-alt summary{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:.82rem}
.xp-layer,.dlabel,.yc-t,.watch .d,.ne-chart .val,.ye-svg svg text{font-family:var(--sans);letter-spacing:0;text-transform:none}
.crumbs{font-size:.86rem;color:var(--muted)}.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--ink)}
.ladder{font-size:.9rem;font-weight:500;gap:2px 0}.ladder .here{border-bottom-color:var(--signal)}
.hero{padding-block:clamp(36px,6vw,84px) clamp(24px,3vw,40px);border-bottom:0}
.hero h1{font:340 clamp(2.5rem,6.2vw,5.4rem)/1.0 var(--serif-hero);letter-spacing:-.028em;font-variation-settings:"opsz" 144;max-width:20ch}
.hero .dek{font:400 clamp(1.2rem,1.7vw,1.5rem)/1.4 var(--serif);font-variation-settings:"opsz" 28;color:var(--ink-2);max-width:40em}
section.sec{padding-block:0 clamp(16px,2vw,28px);border-bottom:0}
.sec-head{border-top:2px solid var(--ink);padding-top:14px;margin-top:clamp(48px,6vw,88px);margin-bottom:clamp(18px,2.4vw,30px);display:block}
.sec-head .num{display:block;font-size:.86rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.sec-head h2{margin:0}.sec-head .stand{font:400 1.14rem/1.45 var(--serif);font-variation-settings:"opsz" 24;color:var(--ink-2);max-width:40em;margin:12px 0 0}
.chip{font-size:.76rem;font-weight:600;border-radius:0;padding:2px 7px;background:none}
.chip.warn{border-color:var(--ochre);color:var(--ink)}
.banner{border-left:2px solid var(--signal);background:none;padding:4px 0 4px 16px}.banner b{font-size:.86rem;font-weight:600;color:var(--ink)}
.banner.info{border-left-color:var(--ink)}.banner.info b{color:var(--ink)}
.toc{background:var(--paper);border-bottom:1px solid var(--hair)}.toc a{font-size:.9rem;font-weight:500;color:var(--ink-2)}.toc a:hover,.toc a.on,.toc a[aria-current]{color:var(--ink);border-color:var(--signal)}
/* The section list fades under its arrows, so no sliver of a label shows beside them, and focus stops clear of the fade. */
.toc .page{scroll-padding-inline:56px}
.toc:has(.toc-btn.next:not([hidden])) .page{mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent calc(100% - 8px))}
.toc:has(.toc-btn.prev:not([hidden])) .page{mask-image:linear-gradient(90deg,transparent 8px,#000 56px)}
.toc:has(.toc-btn.prev:not([hidden])):has(.toc-btn.next:not([hidden])) .page{mask-image:linear-gradient(90deg,transparent 8px,#000 56px,#000 calc(100% - 56px),transparent calc(100% - 8px))}
table,.tbl{font-size:.94rem}.tbl th,.tbl td,.prose table th,.prose table td{border-color:var(--hair)}thead th{font-weight:600;color:var(--ink-2)}
.btn,.studio-cta,.btn-primary,.btn-secondary,a.btn-primary,a.btn-secondary{border-radius:0;font-weight:600}
.btn{background:var(--ink);color:var(--paper);border:1px solid var(--ink);min-height:44px;padding:10px 18px;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer}.btn:hover{background:#000;color:var(--paper)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--hair-2)}.btn.ghost:hover{border-color:var(--ink);background:none;color:var(--ink)}
/* ---------- forms served by the application into static pages (the Brief sign-up) ---------- */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:8px 0;line-height:1.4}label.check input{margin-top:3px;flex:none;width:18px;height:18px}
.nl-msg{margin:8px 0 0;font-weight:600}
/* ---------- compact Brief sign-up and contextual service suggestions: one quiet band each, after the editorial content ---------- */
.brief-signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px 44px;align-items:start;margin:56px 0 12px;padding:22px 0 24px;border-top:2px solid var(--ink);border-bottom:1px solid var(--hair)}
.brief-signup h2,.svc-suggest h2{font:600 clamp(1.3rem,2.2vw,1.6rem)/1.15 var(--serif-head);margin:4px 0 8px;letter-spacing:-.01em}
.brief-signup .bs-copy p:not(.kicker){margin:0;color:var(--ink-2);max-width:42ch}
.brief-signup form{display:grid;gap:6px;margin:0;max-width:34rem}.brief-signup form>label:first-of-type{font-weight:600}
.brief-signup input[type=email]{min-height:44px;padding:8px 10px;width:100%;box-sizing:border-box}.brief-signup .small{margin:4px 0}
.brief-signup button{justify-self:start}
.svc-suggest{margin:48px 0 12px;padding:20px 0 22px;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair)}
.svc-suggest ul{list-style:none;margin:12px 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 28px}
.svc-suggest li{display:grid;gap:4px}.svc-suggest li a{font-weight:600;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--signal);justify-self:start}.svc-suggest li span{color:var(--ink-2)}
.svc-suggest .svc-note{margin:6px 0 0}
.ft-brief{margin:16px 0}
@media (max-width:760px){.brief-signup{grid-template-columns:1fr}}
main.wide>.brief-signup,main.wide>.svc-suggest{margin-left:var(--gut);margin-right:var(--gut)}
/* ---------- analytics choice: a quiet bar, never a wall (ne-analytics.js) ---------- */
.ne-consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;max-width:46rem;margin:0 auto;background:var(--sheet);color:var(--ink);border:1px solid var(--ink);box-shadow:0 10px 30px rgba(20,23,27,.16);padding:14px 16px;font:15px/1.45 var(--sans)}
.ne-consent p{margin:0 0 10px;max-width:none}.ne-consent-act{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.ne-consent button{min-height:44px;padding:10px 18px;font:600 15px/1 var(--sans);cursor:pointer;border:1px solid var(--ink)}
.ne-consent-yes{background:var(--ink);color:var(--paper)}.ne-consent-yes:hover{background:#000}.ne-consent-no{background:none;color:var(--ink);border-color:var(--hair-2)!important}.ne-consent-no:hover{border-color:var(--ink)!important}
.ne-consent a{color:var(--ink)}.ne-consent button:focus-visible,.ne-consent a:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.depth a.studio-cta{color:var(--ink)}
.studio-cta{background:none;color:var(--ink);border:0;border-bottom:2px solid var(--signal);padding:.2em 0;min-height:44px;display:inline-flex;align-items:center;gap:.6em;text-decoration:none}.studio-cta:hover{background:none;color:var(--ink)}
input,select,textarea{font:inherit}
input[type=email],input[type=text],input[type=search],input[type=number],input[type=password],select,textarea{background:var(--sheet);color:var(--ink);border:1px solid var(--hair-2);border-radius:0}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* ---------- the line: links with intent, evidence samples ---------- */
.go{display:inline-flex;align-items:center;gap:.7em;min-height:48px;padding:.1em 0;font:600 1.06rem/1.2 var(--sans);text-decoration:none;color:var(--ink);border-bottom:2px solid var(--signal)}
.go::after{content:"";width:26px;height:9px;background:currentColor;clip-path:polygon(0 42%,86% 42%,70% 0,74% 0,100% 50%,74% 100%,70% 100%,86% 58%,0 58%);transition:transform .2s var(--ease)}
.go:hover::after{transform:translateX(5px)}
.go-row{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center}

/* ---------- print: light, quiet, every source kept ---------- */
@media print{
  :root,:root[data-theme]{color-scheme:light;--paper:#fff;--bg:#fff;--sheet:#fff}
  html,body{background:#fff!important;color:#14171b}
  .sh,.toc,footer.colophon .links,.consentbar,.ne-consent,.studio-action,.fig-ctl,.skip,[data-no-print]{display:none!important}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{break-after:avoid}figure,table,.tile{break-inside:avoid}
}

/* A wide template inside a reading-column page: it breaks out to the full width and the page column continues below it. */
main.page>.wide{position:relative;width:100vw;left:50%;margin-left:-50vw}
h2.dash-h{font:360 clamp(32px,4vw,52px)/1.06 var(--serif-head);letter-spacing:-.02em;margin:8px 0 12px}
@media print{main.page>.wide{width:auto;left:0;margin-left:0}.thread,.fld-stage,.fld-ctl,.fld-row,.fld-toggle{display:none!important}}

/* Infographics, wherever they appear. On a narrow screen a graphic keeps a readable size and scrolls sideways in its box, and the relationship diagram does the same at every width. */
.nl-fig{margin:2em 0;max-width:900px}.nl-art svg,.nl-art img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 1px 0 var(--line),0 12px 30px -18px rgba(5,15,25,.5)}
.nl-cap{margin:8px 2px 0;font-size:.88rem;color:var(--muted)}.nl-dl{margin:6px 0 0}.nl-data{margin:8px 0 2px;font-size:.92rem}.nl-data summary{cursor:pointer}
.nl-toggle{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}.nl-tbtn{font:inherit;font-size:.9rem;padding:.35rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}.nl-tbtn[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}
.nl-swipe{display:none;margin:4px 2px 0;font-size:.8rem;color:var(--muted)}
[data-mapview] svg{min-width:980px}
@media screen and (max-width:720px){.nl-art{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}.nl-art svg,.nl-art img{min-width:780px;max-width:none;box-shadow:none}.nl-swipe{display:block}}
@media print{.nl-toggle{display:none}}

/* Touch: controls and link lists are at least 44px tall on phones and any touch screen, above the 24px WCAG floor in national.css. Studio's dense workspace keeps its own sizes. Screen only: a paper page is narrower than 760px too. */
@media screen and (pointer:coarse),screen and (max-width:760px){
  body:not(.studio) :is(select,textarea,input:not([type=checkbox],[type=radio],[type=hidden]),.linkbtn,.btn),body:not(.studio) main button{min-height:44px}
  body:not(.studio) main button{min-width:44px}
  body:not(.studio) main summary,body:not(.studio) main nav a,.colophon .links a,.links a,a.more{min-height:44px;padding-block:calc((44px - 1lh)/2)}
  body:not(.studio) main nav a{display:inline-block}
  .crumbs a,.ladder a{padding-block:12px;margin-block:-12px}
  .toc .page{padding-block:2px}.toc a{padding-block:calc((44px - 1lh)/2)}.toc button{min-height:44px}.toc-btn{width:44px;height:44px}
  .mx-time input[type=range]{flex-basis:120px}
  .fig-ctl>div:has(>.seg){flex:1 1 100%}.seg:has(> button:nth-child(3)){flex-direction:row}
  .seg:has(> button:nth-child(3)) button{flex:1 1 auto;border-bottom:0;border-right:1px solid var(--line);text-align:center}.seg:has(> button:nth-child(3)) button:last-child{border-right:0}
}