/* Know News stylesheet.
   Light is the default on every device, so a smartboard never opens dark.
   Dark applies only after a visitor chooses it (html[data-theme="dark"]).
   To add an IB theme: add its colour below in both themes, add a [data-accent] line, add it to
   THEMES at the top of site.js, and add its filter button to index.html and stories/index.html. */

@font-face{font-family:"Schibsted Grotesk";src:url("/assets/fonts/schibsted-grotesk-normal.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/assets/fonts/schibsted-grotesk-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --bg:#F2F4F3; --surface:#FBFCFB; --ink:#0E1726; --ink-2:#4A5565; --ink-3:#5F6874; --rule:#D8DEE1;
  --ocean:#DCE5EA; --land:#FFFFFF; --land-edge:#B3C0C8; --grat:#C9D5DC; --equator:#A9B8C2;
  --t-population:#C2410C; --t-climate:#1D4ED8; --t-resources:#166534; --t-tourism:#A3288F; --t-none:#5F6874;
  --on-pin:#FFFFFF; --btn-bg:#0E1726; --btn-fg:#F4F6F5; --shadow-c:14 23 38;
  --f-ui:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-read:"Newsreader", Georgia, "Times New Roman", serif;
  --r:16px; --s:var(--ink);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0B111A; --surface:#121B27; --ink:#E8EDF2; --ink-2:#A9B4C0; --ink-3:#8A96A3; --rule:#233144;
  --ocean:#0E1824; --land:#1B2735; --land-edge:#30435A; --grat:#162436; --equator:#2B3D52;
  --t-population:#FF8A5C; --t-climate:#7AA7FF; --t-resources:#5CCB8A; --t-tourism:#E58BE0; --t-none:#8A96A3;
  --on-pin:#0B111A; --btn-bg:#E8EDF2; --btn-fg:#0B111A; --shadow-c:0 0 0;
  color-scheme:dark;
}
[data-accent="population"]{--s:var(--t-population)}
[data-accent="climate"]{--s:var(--t-climate)}
[data-accent="resources"]{--s:var(--t-resources)}
[data-accent="tourism"]{--s:var(--t-tourism)}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-optical-sizing:auto}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
img,svg{max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--t-climate);outline-offset:3px;border-radius:6px}
.board :focus-visible,.b-qs :focus-visible{outline-color:var(--bg)}
.ic{width:18px;height:18px;flex:none}
.wrap{max-width:1360px;margin:0 auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:768px){
  .wrap{padding-left:max(40px, env(safe-area-inset-left, 0px));padding-right:max(40px, env(safe-area-inset-right, 0px))}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:650}
.skip:focus{top:10px}
.noscript{padding:16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--rule);margin-block:16px}

/* Nav */
.nav{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;
  background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--rule)}
.nav-in{height:64px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:baseline;gap:12px;padding-block:6px;text-decoration:none}
.brand-word{font-weight:850;font-size:21px;letter-spacing:-.025em}
.brand-ed{font-size:13px;font-weight:500;color:var(--ink-3);padding-left:12px;border-left:1px solid var(--rule)}
.nav nav{display:flex;gap:4px;margin-left:auto}
.nav nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:550;text-decoration:none;color:var(--ink-2);padding:0 12px;border-radius:999px;transition:background .2s,color .2s}
.nav nav a:hover{color:var(--ink);background:color-mix(in srgb, var(--ink) 6%, transparent)}
.nav nav a[aria-current="page"]{color:var(--ink)}
.theme-btn{width:44px;height:44px;border-radius:999px;border:1px solid var(--rule);background:transparent;
  display:grid;place-items:center;cursor:pointer;transition:background .2s;flex:none}
.theme-btn:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.theme-btn .i-sun{display:none}
.theme-btn span{display:grid}
:root[data-theme="dark"] .theme-btn .i-sun{display:grid}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--s);transform-origin:0 50%;transform:scaleX(0);display:none}
@supports (animation-timeline: scroll()){
  .progress{display:block;animation:grow linear both;animation-timeline:scroll(root block)}
  @keyframes grow{to{transform:scaleX(1)}}
}

/* Shared pieces */
.tchip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:650;color:var(--c)}
.tchip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.status{font-size:12.5px;font-weight:600;line-height:1;padding:5px 9px;border-radius:999px;border:1px solid var(--rule);color:var(--ink-2);white-space:nowrap}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;border:0;
  background:var(--btn-bg);color:var(--btn-fg);font-weight:650;font-size:15.5px;text-decoration:none;cursor:pointer;
  transition:transform .15s;white-space:nowrap}
.btn .ic{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn:hover .ic.mv{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn-ghost:hover{border-color:color-mix(in srgb, var(--ink) 35%, var(--rule))}
.num{width:32px;height:32px;border-radius:50%;background:var(--c);color:var(--on-pin);display:grid;place-items:center;
  font-weight:750;font-size:14px;font-variant-numeric:tabular-nums;flex:none;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.link{display:inline-flex;align-items:center;min-height:44px;gap:8px;font-weight:650;font-size:15.5px;text-decoration:none;
  border-bottom:2px solid var(--rule);transition:border-color .2s}
.link:hover{border-color:var(--ink)}

/* Theme filters */
.filter{display:flex;flex-wrap:wrap;gap:8px}
.filter button{height:44px;display:inline-flex;align-items:center;gap:9px;padding:0 15px 0 12px;border-radius:999px;
  border:1px solid var(--rule);background:transparent;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--ink-2);
  transition:background .2s,color .2s,border-color .2s,transform .15s}
.filter button:hover{border-color:color-mix(in srgb, var(--ink) 30%, var(--rule));color:var(--ink)}
.filter button:active{transform:scale(.97)}
.filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sw{width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent)}
.sw-all{background:conic-gradient(var(--t-population) 0 25%, var(--t-climate) 0 50%, var(--t-resources) 0 75%, var(--t-tourism) 0)}
.fc{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}

/* Homepage hero */
.hero-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:20px 48px;padding-block:40px 24px}
.hero-head .filter{grid-column:1 / -1}
.hero h1{font-size:clamp(48px, 6.4vw, 92px);font-weight:820;letter-spacing:-.035em;word-spacing:.04em;line-height:.95;white-space:nowrap}
.lede{font-family:var(--f-read);font-size:clamp(18px, 1.5vw, 21px);line-height:1.45;color:var(--ink-2);max-width:44ch;padding-bottom:4px;text-wrap:pretty}

/* Atlas */
.atlas{background:var(--ocean);position:relative;border-block:1px solid var(--rule)}
.atlas-in{position:relative;width:100%;max-width:1600px;margin:0 auto;aspect-ratio:1600/690}
.map{position:absolute;inset:0;width:100%;height:100%;display:block}
.grat path{fill:none;stroke:var(--grat);stroke-width:1;vector-effect:non-scaling-stroke}
.grat .equator{stroke:var(--equator);stroke-dasharray:5 6}
.land path{fill:var(--land);stroke:var(--land-edge);stroke-width:.7;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.leaders line{stroke:var(--ink-3);stroke-width:1.4;vector-effect:non-scaling-stroke}
.leaders circle{fill:var(--ink)}
.leaders g{transition:opacity .3s}
.leaders g.dim{opacity:.15}
.pins{position:absolute;inset:0}
.pin{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;padding:0;border-radius:50%;
  background:var(--c);color:var(--on-pin);border:2px solid var(--land);cursor:pointer;
  font:750 14px/1 var(--f-ui);font-variant-numeric:tabular-nums;display:grid;place-items:center;
  box-shadow:0 1px 2px rgb(var(--shadow-c) / .25), 0 8px 18px -8px color-mix(in srgb, var(--c) 80%, transparent);
  transition:transform .22s cubic-bezier(.16,1,.3,1), opacity .3s;
  animation:drop .7s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i) * 70ms + 200ms)}
.pin::before{content:"";position:absolute;inset:-8px;border-radius:50%}
.pin.on,.pin:active{transform:scale(1.16);z-index:500 !important}
@media (hover:hover){.pin:hover{transform:scale(1.16);z-index:500 !important}}
.pin.dim{opacity:.16;transform:scale(.78);pointer-events:none}
.pin.is-new{width:38px;height:38px;margin:-19px 0 0 -19px;font-size:16px}
.pin.is-new::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--c);
  animation:ring 2.6s cubic-bezier(.2,.6,.3,1) 1.4s infinite}
/* Overview map: a 24px target around a 14px dot. The invisible ::before takes it to 44px. */
.pin.dot,.pin.dot.is-new{width:24px;height:24px;margin:-12px 0 0 -12px;border:0;background:transparent;box-shadow:none;animation:none}
.pin.dot::before{inset:-10px}
.pin.dot::after,.pin.dot.is-new::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--c);border:1.5px solid var(--land);
  transform:none;opacity:1;animation:none}
.pin.dot.gone{display:none}
@keyframes drop{from{opacity:0;transform:translateY(-16px) scale(.55)}}
@keyframes ring{0%{transform:scale(1);opacity:.75}80%,100%{transform:scale(2.3);opacity:0}}

.pop{position:absolute;z-index:600;width:min(340px, calc(100% - 24px));background:var(--surface);border-radius:var(--r);
  padding:18px 18px 16px;border:1px solid color-mix(in srgb, var(--rule) 80%, transparent);
  box-shadow:0 1px 2px rgb(var(--shadow-c) / .08), 0 22px 50px -18px rgb(var(--shadow-c) / .38);
  animation:popIn .24s cubic-bezier(.16,1,.3,1) backwards}
@keyframes popIn{from{opacity:0;transform:translateY(6px) scale(.97)}}
.pop-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-right:36px}
.pop h3{margin-top:10px;font-size:19px;line-height:1.22;font-weight:750;letter-spacing:-.015em}
.pop-place{margin-top:8px;font-size:14px;color:var(--ink-3)}
.pop .btn{margin-top:14px;height:44px;font-size:14.5px;padding:0 18px}
.pop-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:999px;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-3)}
.pop-x:hover{background:color-mix(in srgb, var(--ink) 7%, transparent);color:var(--ink)}

/* This week */
.week{position:relative;z-index:4;margin-top:-64px;display:grid;grid-template-columns:minmax(0,1fr) 260px;min-height:300px;
  background:var(--surface);border-radius:var(--r);border:1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  box-shadow:0 1px 2px rgb(var(--shadow-c) / .06), 0 30px 60px -30px rgb(var(--shadow-c) / .35);overflow:hidden;max-width:1080px}
.week-main{padding:32px 36px 34px;min-width:0}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.kicker b{color:var(--ink)}
.week h2{margin-top:12px;font-size:clamp(26px, 2.6vw, 36px);line-height:1.07;font-weight:800;letter-spacing:-.03em}
.week h2 a{text-decoration:none}
.week h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.week-dek{margin-top:14px;font-family:var(--f-read);font-size:19px;line-height:1.5;color:var(--ink-2);max-width:60ch}
.week-row{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.week-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rt{font-size:13.5px;color:var(--ink-3)}
.week-facts{margin:0;padding:30px;display:grid;align-content:center;gap:22px;border-left:1px solid var(--rule);
  background:color-mix(in srgb, var(--ocean) 45%, var(--surface))}
.week-facts dd{margin:0;font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.week-facts dd small{font-size:18px;font-weight:700;letter-spacing:0;margin-left:3px}
.week-facts dt{margin-top:6px;font-size:14px;color:var(--ink-3)}
.week-facts div{display:flex;flex-direction:column-reverse}

/* Story index */
.section{padding-block:96px 24px}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.sec-head h2{font-size:clamp(32px, 4vw, 52px);font-weight:820;letter-spacing:-.032em;word-spacing:.03em;line-height:1}
/* Holds the space while the list loads, so content below it never jumps */
#index:empty{min-height:120vh}
.month{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding-block:26px;border-top:1px solid var(--rule)}
.mh{font-size:16px;font-weight:650;color:var(--ink-2);padding-top:12px}
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px}
.items a{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;padding:12px 14px;margin-inline:-14px;border-radius:var(--r);
  text-decoration:none;transition:background .2s}
.items a:active{background:var(--surface)}
@media (hover:hover){.items a:hover{background:var(--surface)}.items a:hover .num{transform:scale(1.1)}}
.ttl{display:block;font-size:18px;line-height:1.3;font-weight:650;letter-spacing:-.012em;text-wrap:pretty}
.meta{margin-top:7px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px;color:var(--ink-3)}

/* Homepage bento */
.bento{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto;gap:16px}
.b{border-radius:var(--r);padding:30px;min-width:0}
.b h3{font-size:24px;font-weight:780;letter-spacing:-.025em}
.b > p{margin-top:8px;font-size:16px;color:var(--ink-2);max-width:48ch}
.b-read{grid-row:span 2;background:var(--surface);border:1px solid color-mix(in srgb, var(--rule) 70%, transparent)}
.b-ex{margin-top:24px;font-size:14px;color:var(--ink-3)}
.b .tbl-wrap{margin-top:14px}
.b .tbl{min-width:440px;font-size:15px}
.b-qs{background:var(--ink);color:var(--bg)}
.b-qs > p{color:color-mix(in srgb, var(--bg) 72%, var(--ink))}
.q{margin:22px 0 0;font-family:var(--f-read);font-size:21px;line-height:1.42;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px}
.qn{font-family:var(--f-ui);font-weight:800;font-size:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);color:var(--ink);margin-top:2px}
.btn-board{margin-top:24px;background:var(--bg);color:var(--ink)}
.b-kit{background:var(--surface);border:1px solid color-mix(in srgb, var(--rule) 70%, transparent)}
.lesson{margin-top:24px}
.lesson-bar{display:flex;gap:3px;height:44px}
.seg{flex-grow:var(--m);flex-basis:0;border-radius:6px;background:color-mix(in srgb, var(--ink) var(--k), var(--surface));
  display:flex;align-items:center;padding-left:8px;font-size:12.5px;font-weight:650;color:var(--surface);min-width:0;overflow:hidden;white-space:nowrap}
.seg.lite{color:var(--ink)}
.lesson-scale{display:flex;gap:3px;margin-top:8px}
.lesson-scale span{flex-grow:var(--m);flex-basis:0;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:0}
.kit-note{margin-top:20px !important;display:flex;align-items:center;gap:10px;font-size:14.5px !important;color:var(--ink-2)}

/* All Stories */
.arch-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:40px;align-items:end;padding-block:44px 28px}
.arch-head h1{font-size:clamp(44px, 6vw, 80px);font-weight:820;letter-spacing:-.035em;word-spacing:.04em;line-height:.95}
.search{margin-top:24px;max-width:520px}
.search label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.search-box{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border-radius:999px;background:var(--surface);border:1px solid var(--rule)}
.search-box:focus-within{outline:3px solid var(--t-climate);outline-offset:2px}
.search-box input{flex:1;min-width:0;border:0;background:transparent;font-size:17px;outline:none}
.search-box input::placeholder{color:var(--ink-3);opacity:1}
.search-box .ic{color:var(--ink-3)}
.mini{background:var(--ocean);border-radius:var(--r);border:1px solid var(--rule);position:relative}
.mini .atlas-in{border-radius:var(--r)}
.arch-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-bottom:20px}
.arch-count{font-size:15px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.empty{padding:48px 24px;text-align:center;border-top:1px solid var(--rule)}
.empty h2{font-size:24px;font-weight:760;letter-spacing:-.02em}
.empty p{margin:8px auto 18px;color:var(--ink-2);max-width:46ch}
.kit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.kit-grid h3{font-size:15px;font-weight:650;color:var(--ink-3);padding-bottom:10px;border-bottom:1px solid var(--rule)}
.kit-grid dl{margin:0;padding-top:16px;display:grid;gap:18px}
.kit-grid dt{font-size:19px;font-weight:720;letter-spacing:-.015em}
.kit-grid dd{margin:4px 0 0;color:var(--ink-2);max-width:48ch}
.sec-sub{font-family:var(--f-read);font-size:20px;color:var(--ink-2);margin-top:-14px;margin-bottom:28px}

/* Story header */
.s-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:end;padding-block:40px 48px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:14px;color:var(--ink-3);margin-block:-12px}
.crumb a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:550;color:var(--ink-2)}
.crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.s-meta{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:14px;color:var(--ink-3)}
.s-head h1{margin-top:16px;font-size:clamp(36px, 4.3vw, 60px);line-height:1.02;font-weight:820;letter-spacing:-.034em;word-spacing:.03em;max-width:20ch}
.dek{margin-top:20px;font-family:var(--f-read);font-size:clamp(19px, 1.6vw, 22px);line-height:1.5;color:var(--ink-2);max-width:58ch}
.loc{margin:0;background:var(--ocean);border-radius:var(--r);border:1px solid var(--rule);overflow:hidden}
.loc-map{position:relative;width:100%;aspect-ratio:3/2}
.loc-map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mk{position:absolute;display:flex;align-items:center;gap:7px;transform:translate(-5px,-50%);white-space:nowrap;
  font-size:12.5px;font-weight:650;color:var(--ink)}
.mk::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink);border:2px solid var(--land);flex:none}
.mk.l{flex-direction:row-reverse;transform:translate(calc(-100% + 5px),-50%)}
.mk span{background:color-mix(in srgb, var(--land) 82%, transparent);padding:1px 5px;border-radius:5px;transform:translateY(var(--dy, 0))}
.mk.quiet span{display:none}
.mk.main{font-size:14px;font-weight:750;transform:translate(-16px,-50%);z-index:2}
.mk.main.l{transform:translate(calc(-100% + 16px),-50%)}
.mk.main::before{content:attr(data-n);width:32px;height:32px;display:grid;place-items:center;background:var(--s);color:var(--on-pin);
  font-size:14px;font-weight:750;box-shadow:0 0 0 4px color-mix(in srgb, var(--s) 25%, transparent)}
.loc-cap{padding:14px 18px 16px;border-top:1px solid var(--rule);background:var(--surface);font-size:14px;color:var(--ink-2)}
.loc-cap b{color:var(--ink);font-weight:650}
.loc-cap span{white-space:nowrap}

/* Reading layout */
.read{display:grid;grid-template-columns:180px minmax(0,680px) minmax(292px,1fr);column-gap:48px;align-items:start}
.toc{position:sticky;top:88px;max-height:calc(100dvh - 104px);overflow-y:auto;scrollbar-width:none;font-size:14px;padding-top:6px}
.toc p{font-weight:650;color:var(--ink-3);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;display:grid}
.toc a{display:flex;align-items:center;min-height:44px;padding:6px 0 6px 14px;text-decoration:none;color:var(--ink-3);line-height:1.35;position:relative;transition:color .2s}
.toc a::before{content:"";position:absolute;left:0;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--rule);transition:background .2s,transform .2s}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:600}
.toc a[aria-current="true"]::before{background:var(--s);transform:scale(1.4)}
.toc .kit-l{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}

/* Story text */
.story{min-width:0;font-family:var(--f-read);font-size:21px;line-height:1.66}
.story > * + *{margin-top:1.05em}
.story a{text-decoration-thickness:1px;text-underline-offset:3px}
.story h2{font-family:var(--f-ui);font-size:28px;line-height:1.15;font-weight:780;letter-spacing:-.025em;margin-top:2.1em}
.story h2 + *{margin-top:.6em}
.story q{quotes:"\201C" "\201D" "\2018" "\2019"}
.lead{font-size:23px;line-height:1.5;color:var(--ink)}
.orig{font-family:var(--f-ui);display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:20px 22px;border-radius:var(--r);
  background:color-mix(in srgb, var(--s) 8%, var(--surface));border:1px solid color-mix(in srgb, var(--s) 22%, var(--rule))}
.orig .ic{width:24px;height:24px;color:var(--s);margin-top:2px}
.orig b{display:block;font-size:13.5px;font-weight:700;color:var(--s);letter-spacing:.01em}
.orig a{display:block;margin-top:4px;font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.3;text-decoration:none}
.orig a:hover{text-decoration:underline;text-underline-offset:4px}
.orig p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.stamp{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--ink-3)}

/* A note sits beside the block it follows on wide screens, and stacks below it on narrow ones.
   The negative bottom margin stops a tall note from stretching the row. */
.with-note{--note:calc(min(100vw, 1360px) - 1036px);display:grid;grid-template-columns:680px var(--note);column-gap:48px;width:calc(728px + var(--note));align-items:start}
.with-note > :first-child{min-width:0}
.note{font-family:var(--f-ui);font-size:15.5px;line-height:1.55;padding:16px 18px 18px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--rule);margin-bottom:-999px}
.note .lbl{display:flex;align-items:flex-start;gap:8px;font-weight:700;font-size:13.5px;line-height:1.35;color:var(--s);margin-bottom:6px}
.note.warn .lbl{color:var(--t-population)}
.note p{color:var(--ink-2)}
.note p + p{margin-top:.6em}

.tbl-wrap{overflow-x:auto;font-family:var(--f-ui)}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;min-width:520px}
.tbl th{text-align:left;font-size:13px;font-weight:650;color:var(--ink-3);padding:0 14px 10px 0;border-bottom:1.5px solid var(--ink);vertical-align:bottom}
.tbl td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.tbl td:first-child{font-weight:650;color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.cause{display:inline-block;font-size:13px;font-weight:650;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb, var(--ink) 8%, transparent);color:var(--ink)}
.cause.c{background:color-mix(in srgb, var(--t-climate) 13%, transparent);color:var(--t-climate)}

.rows{list-style:none;margin:0;padding:6px 22px;font-family:var(--f-ui);border-radius:var(--r);background:var(--surface);border:1px solid var(--rule)}
.rows li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:18px;padding-block:16px}
.rows li + li{border-top:1px solid color-mix(in srgb, var(--rule) 60%, transparent)}
.rows-k{font-size:14px;font-weight:700;color:var(--s);line-height:1.35;padding-top:2px}
.rows-t{font-size:17px;font-weight:700;letter-spacing:-.012em;line-height:1.3}
.rows-d{margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

.runin{display:grid;gap:14px}
.runin p b:first-child{font-family:var(--f-ui);font-weight:750;font-size:.86em;letter-spacing:-.005em;margin-right:6px}
.cards{font-family:var(--f-ui);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cardx{padding:18px 20px 20px;border-radius:var(--r);background:var(--surface);border:1px solid var(--rule)}
.cardx-k{display:block;font-size:13.5px;font-weight:700;color:var(--s)}
.cardx h3{margin-top:6px;font-size:18px;font-weight:720;letter-spacing:-.015em;line-height:1.25}
.cardx p{margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

.connects{font-family:var(--f-ui);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.connects.one{grid-template-columns:1fr}
.connects h3{font-size:14px;font-weight:650;color:var(--ink-3);padding-bottom:10px;border-bottom:1px solid var(--rule)}
.connects dl{margin:0;display:grid;gap:16px;padding-top:14px}
.connects dt{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
.connects dt::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c, var(--t-none));flex:none}
.connects dd{margin:4px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

.qs{font-family:var(--f-ui);margin-top:2.4em !important;padding:30px 32px 34px;border-radius:var(--r);background:var(--surface);border:1px solid var(--rule)}
.qs-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.qs h2{margin:0}
.qs ol{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:22px}
.qs li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;font-family:var(--f-read);font-size:20px;line-height:1.55}
.qs li .num{--c:var(--s);margin-top:2px;font-family:var(--f-ui)}

.sources{font-family:var(--f-ui);list-style:none;margin:0;padding:0;display:grid;gap:16px;font-size:15.5px;line-height:1.5}
.sources li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px}
.pub{font-weight:650;color:var(--ink-3);font-size:13.5px;padding-top:2px}
.sources a{font-weight:650}
.sources .d{color:var(--ink-2)}
.asof{font-family:var(--f-ui);font-size:14px;color:var(--ink-3);line-height:1.5}
.tags{font-family:var(--f-ui);display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
.tag{font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--rule);color:var(--ink-2)}

/* Teacher kit */
.kit{margin-top:72px;border-radius:var(--r);border:1px solid var(--rule);background:color-mix(in srgb, var(--ocean) 40%, var(--surface));overflow:hidden}
.kit-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:30px 34px}
.kit-k{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.kit-head h2{margin-top:8px;font-size:30px;font-weight:800;letter-spacing:-.03em}
.kit-head .sub{margin-top:6px;color:var(--ink-2);max-width:56ch}
.kit-body{padding:4px 34px 38px;border-top:1px solid var(--rule);background:var(--surface);animation:kitIn .35s cubic-bezier(.16,1,.3,1) backwards}
@keyframes kitIn{from{opacity:0;transform:translateY(-6px)}}
.kit-nav{display:flex;flex-wrap:wrap;gap:8px;padding-block:22px 6px}
.kit-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;text-decoration:none;padding:0 14px;border-radius:999px;border:1px solid var(--rule);color:var(--ink-2)}
.kit-nav a:hover{color:var(--ink);border-color:color-mix(in srgb, var(--ink) 30%, var(--rule))}
.kit-body h3{margin-top:34px;font-size:21px;font-weight:760;letter-spacing:-.02em}
.kit-body > p,.ans p{font-family:var(--f-read);font-size:18.5px;line-height:1.6;max-width:68ch}
.kit-body > p{margin-top:10px}
.kit-body .lesson-bar{margin-top:16px;height:46px}
.steps{list-style:none;margin:16px 0 0;padding:0}
.steps li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;padding-block:12px;border-bottom:1px solid var(--rule)}
.steps li:last-child{border-bottom:0}
.steps .t{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink-3);padding-top:1px}
.steps span:last-child{font-size:16.5px;line-height:1.5}
.ans{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:22px}
.ans li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px}
.ans .num{--c:var(--ink)}
.ans .q-t{font-weight:650;font-size:16.5px;line-height:1.45;display:block}
.ans p{margin-top:8px;color:var(--ink-2);font-size:17.5px}
.mis{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.mis li{padding:14px 16px;border-radius:var(--r);background:color-mix(in srgb, var(--t-population) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--t-population) 18%, var(--rule));font-size:16.5px;line-height:1.5}
.essay{margin-top:14px !important;padding:22px 24px;border-radius:var(--r);background:var(--ink);color:var(--bg);font-size:20px !important;line-height:1.5 !important;max-width:none !important}

/* Older and newer */
.pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:64px}
.pn a{display:block;padding:24px 26px;border-radius:var(--r);border:1px solid var(--rule);background:var(--surface);text-decoration:none;transition:border-color .2s,transform .2s}
.pn a:active{border-color:color-mix(in srgb, var(--ink) 30%, var(--rule))}
@media (hover:hover){.pn a:hover{border-color:color-mix(in srgb, var(--ink) 30%, var(--rule));transform:translateY(-2px)}}
.pn-k{display:block;font-size:14px;font-weight:600;color:var(--ink-3)}
.pn-t{margin-top:10px;display:flex;gap:14px;align-items:flex-start;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.015em}

/* Footer */
.foot{margin-top:96px;border-top:1px solid var(--rule);padding-block:48px 56px}
.foot-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px 48px}
.foot p{margin-top:12px;font-size:15.5px;color:var(--ink-2);max-width:56ch}
.foot h2{font-size:14px;font-weight:650;color:var(--ink-3)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:4px;font-size:15.5px;font-weight:550}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.foot-links a:hover{text-decoration:underline;text-underline-offset:4px}
.mail{font-weight:650;color:var(--ink) !important;user-select:all}
.legal{grid-column:1 / -1;font-size:13.5px !important;color:var(--ink-3) !important;margin-top:0 !important;max-width:80ch !important}

/* 404 */
.lost{padding-block:96px}
.lost h1{font-size:clamp(40px, 6vw, 72px);font-weight:820;letter-spacing:-.04em;line-height:1}
.lost p{margin:16px 0 28px;font-family:var(--f-read);font-size:21px;color:var(--ink-2)}

/* Board mode */
.board{position:fixed;inset:0;z-index:50;background:var(--ink);color:var(--bg);display:grid;grid-template-rows:auto 1fr auto;
  padding:max(24px, env(safe-area-inset-top, 0px)) max(32px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(32px, env(safe-area-inset-left, 0px));
  animation:fadeIn .25s ease backwards}
@keyframes fadeIn{from{opacity:0}}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:20px;font-weight:600;color:color-mix(in srgb, var(--bg) 70%, var(--ink))}
.dots{display:flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb, var(--bg) 25%, transparent);transition:background .2s,transform .2s}
.dots i.on{background:var(--bg);transform:scale(1.3)}
.board-x{width:48px;height:48px;border-radius:999px;border:1px solid color-mix(in srgb, var(--bg) 25%, transparent);background:transparent;color:var(--bg);display:grid;place-items:center;cursor:pointer}
.board-q{align-self:center;max-width:32ch;font-family:var(--f-read);font-size:clamp(30px, 4.6vw, 96px);line-height:1.22;font-weight:450;letter-spacing:-.01em}
.board-q.in{animation:qIn .45s cubic-bezier(.16,1,.3,1) backwards}
@keyframes qIn{from{opacity:0;transform:translateX(24px)}}
.board-nav{display:flex;gap:12px;justify-content:flex-end}
.board-nav button{height:52px;padding:0 24px;border-radius:999px;font-weight:650;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.bp{background:transparent;color:var(--bg);border:1px solid color-mix(in srgb, var(--bg) 30%, transparent)}
.bn{background:var(--bg);color:var(--ink);border:0}

/* Responsive */
@media (max-width:1339px){
  .read{grid-template-columns:180px minmax(0,1fr);column-gap:48px}
  .read > .gutter{display:none}
  .story{max-width:720px}
  .with-note{display:block;width:auto}
  .note{margin:1.2em 0 0}
}
@media (max-width:1024px){
  .hero-head,.arch-head{grid-template-columns:1fr}
  .hero h1{white-space:normal}
  .s-head{grid-template-columns:1fr;gap:28px}
  .read{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .story{max-width:700px}
}
@media (max-width:860px){
  .week{grid-template-columns:1fr;min-height:0}
  .week-facts{border-left:0;border-top:1px solid var(--rule);grid-template-columns:repeat(3,minmax(0,1fr));padding:22px 28px}
  .week-facts dd{font-size:30px}
  .bento{grid-template-columns:1fr}
  .b-read{grid-row:auto}
}
@media (max-width:760px){
  .month{grid-template-columns:1fr;gap:4px}
  .mh{padding-top:0}
  .items{grid-template-columns:1fr}
  .foot-in,.pn,.kit-grid,.connects,.cards{grid-template-columns:1fr}
  .section{padding-block:64px 16px}
  .story{font-size:19px}
  .lead{font-size:20px}
  .qs{padding:22px 20px 26px}
  .qs li{font-size:18.5px;grid-template-columns:32px minmax(0,1fr);gap:12px}
  .sources li{grid-template-columns:1fr;gap:2px}
  .rows li{grid-template-columns:1fr;gap:4px}
  .rows{padding-inline:18px}
  .kit-head,.kit-body{padding-inline:20px}
  .steps li{grid-template-columns:1fr;gap:2px}
  .board-q{font-size:27px}
}
@media (max-width:699px){
  .nav nav a:nth-child(n+3){display:none}
  .nav-in{gap:12px}
  .brand-ed{display:none}
  .atlas{overflow-x:auto;scrollbar-width:none}
  .atlas::-webkit-scrollbar{display:none}
  .atlas .atlas-in{width:860px;max-width:none}
  .atlas .pin{width:26px;height:26px;margin:-13px 0 0 -13px;font-size:12px;border-width:1.5px}
  .atlas .pin.is-new{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:13px}
  .pop{position:fixed;left:max(12px, env(safe-area-inset-left, 0px));right:max(12px, env(safe-area-inset-right, 0px));
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));top:auto !important;width:auto}
  .week{margin-top:20px}
  .week-main{padding:24px 22px 26px}
  .week-facts{padding:18px 22px;gap:12px}
  .week-facts dd{font-size:24px}
  .b{padding:22px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .pin.is-new{box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 30%, transparent)}
  @supports (animation-timeline: scroll()){ .progress{animation:grow linear both !important;animation-timeline:scroll(root block) !important} }
}

/* Print: the reading, without menus */
@media print{
  :root{--bg:#fff;--surface:#fff;--ocean:#fff}
  .nav,.toc,.pn,.foot,.progress,.skip,#boardOpen,.kit-head .btn,.kit-nav,.loc,.gutter{display:none !important}
  .s-head,.read{display:block;padding:0}
  .s-head h1{font-size:24pt;max-width:none}
  .dek{font-size:13pt;max-width:none;margin-top:8pt}
  .lead{font-size:13pt}
  .story{max-width:none;font-size:12pt;line-height:1.5;margin-top:12pt}
  .with-note{display:block;width:auto}
  .note{margin:10pt 0}
  .kit:has(.kit-body[hidden]){display:none}
  .kit{border:0;margin-top:24pt}
  .tbl{min-width:0}
  .qs,.note,.rows li,.cardx{break-inside:avoid}
  a{text-decoration:none}
}