/* Data story: the layout of the introduction and the region pages (loaded last).
   A dashboard opens each chapter; each Part opens with a numbered band; text keeps one readable
   column; maps and charts sit side by side; photos run as wide strips. */

#chapter.story{--s-wrap:1240px;--s-read:720px;--s-pad:max(var(--gutter,24px),calc((100vw - var(--s-wrap)) / 2));background:var(--bg-canvas)}

/* every section: no full-screen minimum, one content width, calm vertical rhythm */
#chapter.story .s-sec{min-height:0;padding:clamp(56px,6vw,96px) 0;overflow:visible;background:none}
#chapter.story .s-sec + .s-sec{border-top:1px solid color-mix(in srgb,var(--border-soft) 70%,transparent)}
#chapter.story .s-wrap{width:100%;max-width:calc(var(--s-wrap) + 2 * var(--gutter,24px));margin:0 auto;padding:0 var(--gutter,24px);box-sizing:border-box}

/* heading and text: one readable column, left-aligned on the content edge */
#chapter.story .s-head{max-width:var(--s-read);margin:0 auto 22px}
#chapter.story .s-head .eyebrow{margin:0 0 12px;color:var(--accent-coral);letter-spacing:2px}
#chapter.story .s-head .h-2{font:400 clamp(30px,3.2vw,48px)/1.08 var(--font-display);color:var(--ink-strong);margin:0;max-width:none;letter-spacing:-.01em}
#chapter.story .s-head .lead{margin:14px 0 0;max-width:var(--s-read)}
#chapter.story .s-text{max-width:var(--s-read);margin-left:auto;margin-right:auto;columns:1!important}
#chapter.story .s-text p{font-size:17.5px;line-height:1.75;color:var(--ink-body);max-width:none;margin:0 0 1.1em}
#chapter.story .s-text .first{font:400 clamp(20px,1.7vw,25px)/1.5 var(--font-display)!important;color:var(--ink-strong)!important;padding-left:20px;border-left:3px solid var(--accent-coral-soft);margin:0 0 22px!important;max-width:none}

/* ---------- opening dashboard ---------- */
#chapter.story .st-cover{padding:0 0 clamp(48px,5vw,80px);border:0}
.s-cover-photo{position:relative;height:min(78svh,760px);min-height:440px;overflow:hidden;background:var(--bg-dark)}
.s-cover-photo .photo{position:absolute;inset:0;border-radius:0;margin:0}
.s-cover-photo .photo img{width:100%;height:100%;object-fit:cover}
.s-cover-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#071f13f0 0%,#071f1399 32%,transparent 64%),linear-gradient(90deg,#071f1366,transparent 60%);pointer-events:none}
.s-cover-title{position:absolute;z-index:2;left:var(--s-pad);right:var(--s-pad);bottom:clamp(36px,5vw,64px);color:var(--ink-inverse)}
.s-cover-title .eyebrow{color:var(--accent-coral-soft);margin:0 0 12px;letter-spacing:2.4px}
.s-cover-title h1{font:400 clamp(44px,7vw,112px)/.95 var(--font-display);margin:0;letter-spacing:-.02em;color:var(--ink-inverse)}
.s-cover-title .s-pre{font:italic 400 clamp(20px,2vw,30px)/1.2 var(--font-display);margin:0 0 6px;color:#f3ecdcdd}
.s-cover-title .s-lead{font:400 clamp(17px,1.4vw,21px)/1.4 var(--font-body);margin:14px 0 0;color:#f3ecdccc;max-width:56ch}

.s-dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;margin:-44px 0 36px;position:relative;z-index:3;background:var(--bg-surface);border-radius:var(--radius-l);box-shadow:var(--shadow-2);overflow:hidden}
.s-kpi{padding:24px 26px;border-left:1px solid var(--border-soft)}
.s-kpi:first-child{border-left:0}
.s-kpi strong{display:block;font:500 clamp(28px,2.6vw,40px)/1 var(--font-display);color:var(--ink-strong);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.s-kpi span{display:block;margin-top:8px;font:600 12.5px/1.35 var(--font-body);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-muted)}
.s-kpi:first-child strong{color:var(--accent-tide)}
#chapter.story .st-cover .s-text{margin-top:8px}

/* the chapter's parts as a numbered index */
.s-index ol{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.s-index a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;height:100%;box-sizing:border-box;padding:16px 18px;border-radius:var(--radius);background:var(--bg-surface);border:1px solid var(--border-soft);color:var(--ink-strong);text-decoration:none;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.s-index a span{font:400 34px/1 var(--font-display);color:var(--accent-coral)}
.s-index a b{font:650 14.5px/1.3 var(--font-body)}
.s-index a .ic{width:18px;height:18px;color:var(--ink-muted)}
.s-index a:hover{border-color:var(--accent-tide);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.s-index a:focus-visible,.s-regions a:focus-visible,.s-partbar a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* the introduction's doors to each region */
.s-regions ul{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.s-regions a{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--radius-l);overflow:hidden;color:var(--ink-inverse);text-decoration:none;isolation:isolate;box-shadow:var(--shadow-1)}
.s-regions img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.s-regions a::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#071f13f0 0%,#071f1366 45%,transparent 75%)}
.s-regions span{position:absolute;left:16px;right:16px;bottom:16px;display:grid;gap:3px}
.s-regions small{font:700 11px var(--font-body);letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-coral-soft)}
.s-regions b{font:400 26px/1.05 var(--font-display)}
.s-regions em{font:600 13.5px var(--font-body);font-style:normal;color:#f3ecdccc;font-variant-numeric:lining-nums}
.s-regions a:hover img{transform:scale(1.05)}

/* ---------- sticky row of parts ---------- */
.s-partbar{position:sticky;top:0;z-index:15;background:color-mix(in srgb,var(--bg-canvas) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-soft);opacity:0;pointer-events:none;transition:opacity .3s}
.s-partbar.shown{opacity:1;pointer-events:auto}
.s-partbar ol{list-style:none;margin:0 auto;padding:0 var(--gutter,24px);max-width:calc(var(--s-wrap) + 2 * var(--gutter,24px));box-sizing:border-box;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.s-partbar a{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:3px solid transparent;color:var(--ink-muted);text-decoration:none;white-space:nowrap;font:600 13.5px var(--font-body);transition:color .25s,border-color .25s}
.s-partbar a span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid currentColor;font:700 12px var(--font-body)}
.s-partbar a b{font-weight:600;max-width:26ch;overflow:hidden;text-overflow:ellipsis}
.s-partbar a:hover{color:var(--ink-strong)}
.s-partbar a.on{color:var(--ink-strong);border-bottom-color:var(--accent-coral)}
.s-partbar a.on span{background:var(--accent-coral);border-color:var(--accent-coral);color:#fff}

/* ---------- part opener band ---------- */
#chapter.story .s-sec:has(> .s-part){padding-top:0}
.s-part{display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding:clamp(40px,5vw,72px) var(--s-pad);margin:0 0 clamp(40px,5vw,72px);background:var(--bg-dark);color:var(--ink-inverse)}
.s-part-no{font:300 clamp(80px,11vw,170px)/.8 var(--font-display);color:transparent;-webkit-text-stroke:1.5px var(--accent-coral-soft)}
.s-part .eyebrow{margin:0 0 10px;color:var(--accent-coral-soft);letter-spacing:2.4px}
.s-part-title{font:400 clamp(32px,4.2vw,64px)/1.02 var(--font-display);margin:0;color:var(--ink-inverse);letter-spacing:-.01em;max-width:22ch}

/* ---------- media: map and chart side by side ---------- */
.s-media{display:grid;gap:20px;margin:34px 0 0;align-items:start}
@media (min-width:1000px){
  .s-media.n2{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .s-media.n3{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  .s-media.n3 > .s-m:last-child{grid-column:1/-1}
}
.s-m{min-width:0}
.s-m .r-charts{margin:0;grid-template-columns:1fr}
.s-m .r-chart{max-width:none!important}
.s-fig{display:grid;gap:14px}
.s-maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:20px;margin-top:34px}
#chapter.story .r-charts{margin-top:28px}
#chapter.story .r-charts > .r-chart:only-child{max-width:none}
#chapter.story .st-grid{margin-top:28px}
#chapter.story .items-title{margin:40px auto 0;max-width:var(--s-read)}

/* ---------- photos ---------- */
.s-photos{display:grid;gap:14px;margin-top:34px}
.s-photos.n2{grid-template-columns:1fr 1fr}
.s-photos.n3{grid-template-columns:1.3fr 1fr 1fr}
.s-photos.n4{grid-template-columns:repeat(4,1fr)}
.s-photos .photo{margin:0;aspect-ratio:4/3;border-radius:var(--radius)}
.s-photos .photo img{width:100%;height:100%;object-fit:cover}
.s-photos.n1 .photo{aspect-ratio:21/9}
@media (max-width:700px){.s-photos.n3,.s-photos.n4{grid-template-columns:1fr 1fr}.s-photos.n3 .photo:first-child{grid-column:1/-1}}

/* a photograph that runs the full width of the screen */
.s-strip{position:relative;height:clamp(300px,52vw,620px);margin:clamp(40px,5vw,64px) 0 0;overflow:hidden}
.s-strip.tall{height:clamp(340px,62vw,760px);margin-top:0}
.s-strip .photo{position:absolute;inset:-8% 0;border-radius:0;margin:0}
.s-strip .photo img{width:100%;height:100%;object-fit:cover}
.s-strip .fixed-cap{position:absolute;left:var(--s-pad);bottom:18px;top:auto;right:auto;z-index:2}
#chapter.story .st-band,#chapter.story .st-hero{padding-bottom:0}
#chapter.story .st-hero .s-wrap:last-child{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(56px,6vw,96px)}
#chapter.story .st-band .s-wrap:last-child:not(:empty){padding-bottom:clamp(56px,6vw,96px)}
#chapter.story .st-hero > .s-wrap:first-of-type:empty{display:none}

/* text beside a photograph */
.s-split{display:grid;gap:clamp(28px,4vw,64px);align-items:start}
@media (min-width:1000px){.s-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.s-split-photo{position:sticky;top:90px}}
.s-split > .s-text{margin:0;max-width:none}
.s-split-photo .photo{margin:0;border-radius:var(--radius-l);aspect-ratio:4/5}
.s-split-photo .photo img{width:100%;height:100%;object-fit:cover}

/* ---------- closing synthesis: dark band, numbered take-aways ---------- */
#chapter.story .st-closing{background:var(--bg-dark);color:var(--ink-inverse);padding-top:0;border:0}
#chapter.story .st-closing > .s-wrap{padding-top:clamp(48px,5vw,80px)}
#chapter.story .st-closing .s-strip{margin-top:0}
#chapter.story .st-closing .h-2,#chapter.story .st-closing .s-text .first{color:var(--ink-inverse)!important}
#chapter.story .st-closing .s-text p{color:#e9e2d2}
#chapter.story .st-closing .eyebrow{color:var(--accent-coral-soft)}
.s-takeaways{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.s-takeaways li{padding:20px 22px;border-radius:var(--radius);background:var(--bg-dark-raised);border:1px solid #f7f3e81f}
.s-takeaways span{font:400 30px/1 var(--font-display);color:var(--accent-coral-soft)}
.s-takeaways b{display:block;margin:10px 0 6px;font:650 16px/1.3 var(--font-body);color:var(--ink-inverse)}
.s-takeaways p{margin:0;font-size:15px;line-height:1.6;color:#e9e2d2cc}

/* the old "up next" landmarks and stray full-height rules do not apply here */
#chapter.story .up-next{display:none}


@media (max-width:700px){
  .s-dash{margin-top:-28px;grid-template-columns:1fr 1fr}
  .s-kpi{padding:18px;border-left:0;border-top:1px solid var(--border-soft)}
  .s-kpi:nth-child(-n+2){border-top:0}
  .s-kpi:nth-child(even){border-left:1px solid var(--border-soft)}
  .s-part{flex-direction:column;align-items:flex-start;gap:10px}
  #chapter.story .s-text p{font-size:16.5px}
}
@media print{.s-partbar,.s-index{display:none!important}.s-sec{break-inside:auto}}

/* partner logos sit on the dark photo of the opening (they are light artwork) */
.s-cover-logos{position:absolute;z-index:2;right:var(--s-pad);top:calc(var(--bar-h,64px) + 24px)}
.s-cover-logos .partner-logos{display:flex;gap:22px;align-items:center;margin:0!important;padding:0;border:0}
.s-cover-logos .partner-logos img{height:58px;width:auto}
@media (max-width:700px){.s-cover-logos{display:none}}
/* text beside a photo: heading starts on the same edge as its text */
#chapter.story :is(.st-split,.st-hero) .s-head{margin-left:0;max-width:none}

/* ---------- key-figure cards ---------- */
.sc-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px}
.sc-card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:20px 22px 20px;border-radius:var(--radius-l);background:var(--bg-surface);border:1px solid var(--border-soft);box-shadow:0 1px 0 #0000000a}
.sc-label{font:700 12px/1.35 var(--font-body);letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-muted)}
.sc-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font:500 clamp(30px,2.6vw,40px)/1 var(--font-display);color:var(--ink-strong);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.sc-v small{font:600 15px/1 var(--font-body);color:var(--ink-muted);letter-spacing:0}
.sc-v em{flex-basis:100%;font:600 14px/1.3 var(--font-body);font-style:normal;color:var(--accent-tide)}
.sc-v-word{font-size:clamp(22px,1.9vw,28px);line-height:1.15}
.sc-card p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-muted)}
.sc-bar{display:block;height:6px;border-radius:6px;background:color-mix(in srgb,var(--accent-tide) 14%,transparent);overflow:hidden}
.sc-bar i{display:block;height:100%;min-width:4px;border-radius:inherit;background:var(--accent-tide);transform-origin:left;animation:sc-grow 1.2s var(--ease) both .2s}
@keyframes sc-grow{from{transform:scaleX(0)}}
.sc-text .sc-title{font:650 16px/1.35 var(--font-body);color:var(--ink-strong)}
/* the total the other cards add up to */
.sc-lead{background:var(--bg-dark);border-color:transparent;color:var(--ink-inverse)}
.sc-lead .sc-label{color:var(--accent-coral-soft)}
.sc-lead .sc-v{color:var(--ink-inverse)}
.sc-lead .sc-v small,.sc-lead p{color:var(--ink-inverse-muted)}
/* on dark sections */
#chapter.story .st-closing .sc-card{background:var(--bg-dark-raised);border-color:#f7f3e81f}
#chapter.story .st-closing .sc-v{color:var(--ink-inverse)}
#chapter.story .st-closing .sc-label,#chapter.story .st-closing .sc-card p,#chapter.story .st-closing .sc-v small{color:var(--ink-inverse-muted)}
#chapter.story .items-lead,#chapter.story .items-note{max-width:var(--s-read);margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){.sc-bar i{animation:none}}

/* the way into the chapter, right under the hero */
#chapter.story .st-doors{padding:clamp(36px,4vw,56px) 0}
#chapter.story .st-doors .s-index ol,#chapter.story .st-doors .s-regions ul{margin-top:0}
#chapter.story .st-doors .s-dash{margin:0 0 20px}
#chapter .t-rcover:has(.partner-logos){padding-bottom:190px}