/* The State of the Ummah 2026. The page moves from night to daylight:
   the condition is told in the dark, the answer in stone and sun. */
:root{
  --night:#081312;--ink:#0c1918;--ink-2:#12201f;--line-d:rgba(54,194,180,.16);
  --gold:#36c2b4;--gold-hi:#e6d3ad;--gold-lo:#1f7f76;--ember:#ff6a55;
  --bone:#f3f1ec;--bone-dim:rgba(243,241,236,.68);--bone-faint:rgba(243,241,236,.42);
  --stone:#f3eee4;--stone-2:#e9e1d1;--sand:#d9ccb3;--teal:#2c7d78;--teal-d:#1d5a56;--text:#1b1d1f;--text-dim:#55534e;
  --serif:Jost,"Helvetica Neue",Arial,sans-serif;--sans:Jost,"Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;--gut:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--bone);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--gold);color:var(--night);padding:10px 14px}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
sup{font-size:.55em;line-height:0;margin-left:2px}
sup a{text-decoration:none;color:var(--gold);font-family:var(--sans);font-weight:700}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* Header */
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:20px;padding:14px var(--gut);transition:background .4s,border-color .4s,transform .4s;border-bottom:1px solid transparent}
.bar.solid{background:rgba(7,8,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line-d)}
.bar.light{background:rgba(243,238,228,.86);color:var(--text);border-color:rgba(27,29,31,.1)}
.bar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.bar-brand img{width:28px;height:28px;border-radius:50%}
.bar-title{flex:1;text-align:center;font:400 15px var(--serif);letter-spacing:.02em;opacity:0;transition:opacity .4s}
.bar.solid .bar-title{opacity:.9}
.bar-title b{font-weight:500;color:var(--gold)}
.bar.light .bar-title b{color:var(--teal)}
.bar-cta{margin-left:auto;font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid currentColor;padding:11px 16px;border-radius:999px}
.bar-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--night)}
@media (max-width:720px){.bar-title,.bar-brand span{display:none}}

/* Type */
.kicker,.num{font:700 11.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 22px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0}
h2{font-size:clamp(40px,6.2vw,88px);line-height:1.02;margin-bottom:clamp(32px,5vw,64px)}
h2 em,h1 em{font-style:italic;color:var(--gold-hi)}
.lede{font:400 clamp(20px,2.2vw,26px)/1.45 var(--serif);color:var(--bone-dim);max-width:760px}
.prose{color:var(--bone-dim);max-width:520px}
.pull{font:400 italic clamp(24px,3vw,36px)/1.3 var(--serif);margin:28px 0 0;color:var(--bone);border-left:1px solid var(--gold);padding-left:24px}
.pull.wide{max-width:880px;margin-top:clamp(48px,7vw,96px)}
.finding{font:400 clamp(19px,1.9vw,23px)/1.5 var(--serif);max-width:820px;margin:clamp(40px,6vw,72px) 0 0;color:var(--bone-dim)}
.finding b{color:var(--bone);font-weight:500}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .2s,background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn.gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#03201d;box-shadow:0 10px 40px -12px rgba(54,194,180,.7)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:currentColor}
.btn.ghost:hover{color:var(--night)}
.btn[disabled]{opacity:.6;cursor:wait}

/* I. Cover: the owner's emblem art. The outer field drifts outward, the
   Kaaba and its rings stay still, and a light stream leaves the ring. */
.cover{--art-w:min(max(100vw,148svh),190svh);--cy:50%;position:relative;height:100svh;min-height:640px;overflow:hidden;background:#000}
.cover-art{position:absolute;left:50%;top:var(--cy);width:var(--art-w);aspect-ratio:2000/1118;transform:translate(-49.75%,-50.3%);-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cover-art img,.cover-art canvas{position:absolute;inset:0;width:100%;height:100%}
.art-field{transform-origin:49.75% 50.3%;animation:outward 26s ease-in-out infinite alternate;opacity:.92}
.art-core{-webkit-mask:radial-gradient(ellipse 17.5% 31.3% at 49.75% 50.3%,#000 78%,transparent 100%);mask:radial-gradient(ellipse 17.5% 31.3% at 49.75% 50.3%,#000 78%,transparent 100%)}
@keyframes outward{from{transform:scale(1)}to{transform:scale(1.085)}}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 70%,rgba(0,0,0,.82) 92%,var(--night) 100%)}
.cover-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:84px var(--gut) 72px}
.cover h1{font-size:clamp(46px,7vw,108px);line-height:.95;font-weight:500;text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 30px #000}
.cover h1 span{display:block;font-size:.38em;font-weight:600;letter-spacing:.32em;color:#f3f1ec;margin-bottom:.22em}
.cover h1 em{font-style:normal;background:linear-gradient(180deg,var(--gold-hi) 10%,var(--gold) 55%,var(--gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent}
.cover .kicker{margin-bottom:16px}
.cover-sub{font:400 italic clamp(16px,1.6vw,20px)/1.4 var(--serif);color:var(--bone-dim);max-width:520px;margin:10px auto 0;text-shadow:0 2px 20px #000}
.handles{margin:0}
.handles-box{display:inline-block;padding:8px 12px 8px 16px;border:1px solid rgba(255,106,85,.85);border-radius:6px;background:rgba(0,0,0,.78);font:800 clamp(11px,1.2vw,14px)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.handles-box span{color:#ff6a55}
.cover-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.scroll-cue{position:absolute;z-index:2;bottom:14px;left:50%;width:1px;height:40px;background:linear-gradient(var(--gold),transparent);transform:translateX(-50%)}
.scroll-cue span{position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--gold-hi);animation:drip 2.4s ease-in infinite}
@keyframes drip{to{transform:translateY(36px);opacity:0}}
@media (max-width:720px){.cover{--art-w:max(100vw,126svh);--cy:50%}.cover-art{-webkit-mask:none;mask:none}.cover-inner{padding:76px var(--gut) 44px}.cover-actions .btn{min-height:46px;padding:0 20px}.cover-sub{display:none}}
@media (max-height:700px) and (min-width:721px){.cover-sub{display:none}}

/* Chapters */
.chapter{padding:clamp(96px,14vw,180px) 0;position:relative}
.chapter.dark{background:var(--night)}
.chapter.ink{background:var(--ink);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}

/* II. Humanity */
.humanity{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.grid100{max-width:460px;width:100%;display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(6px,1vw,12px)}
.grid100 i{aspect-ratio:1/2.1;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 21'%3E%3Ccircle cx='5' cy='3.2' r='3'/%3E%3Cpath d='M1 21V11a4 4 0 0 1 8 0v10z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 21'%3E%3Ccircle cx='5' cy='3.2' r='3'/%3E%3Cpath d='M1 21V11a4 4 0 0 1 8 0v10z'/%3E%3C/svg%3E") center/contain no-repeat;background:rgba(243,241,236,.14);transition:background .5s,transform .5s}
.grid100 i.on{background:var(--gold);transform:translateY(-3px)}
.big-stat{font:400 clamp(96px,15vw,200px)/1.08 var(--serif);margin:0;padding:.06em 0 0;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em}
.stat-label{font:600 13px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);margin:18px 0 24px;max-width:360px}
@media (max-width:820px){.humanity{grid-template-columns:1fr}.grid100{max-width:360px}}

/* III. The dark atlas */
.atlas{position:relative;height:360vh;background:var(--night)}
.atlas-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.atlas-canvas{position:absolute;inset:0;width:100%;height:100%}
.atlas-hud{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;padding:90px var(--gut) 40px;max-width:var(--wrap);margin:0 auto;pointer-events:none}
.atlas-hud h2{margin-bottom:28px;text-shadow:0 2px 30px #000}
.atlas-steps{position:relative;min-height:5.4em;max-width:520px}
.atlas-step{position:absolute;inset:0 auto auto 0;margin:0;font:400 clamp(20px,2.3vw,28px)/1.35 var(--serif);color:var(--bone);opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s;text-shadow:0 2px 24px #000}
.atlas-step.on{opacity:1;transform:none}
.atlas-step b{font-weight:500;color:var(--gold-hi)}
.atlas-meter{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0;padding:0}
.atlas-meter div{border:1px solid var(--line-d);background:rgba(7,8,10,.72);backdrop-filter:blur(6px);padding:12px 16px;min-width:150px}
.atlas-meter dt{font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.atlas-meter dd{margin:8px 0 0;font:400 24px/1 var(--serif);color:var(--bone)}
.atlas-meter dd.warn{color:var(--ember)}
.atlas-step sup a{pointer-events:auto}

/* IV. Ledger */
.ledger{list-style:none;padding:0;margin:clamp(48px,7vw,80px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-d)}
.ledger li{padding:28px 24px 8px 0;border-right:1px solid var(--line-d);margin-right:24px}
.ledger li:last-child{border-right:0}
.ledger-n{display:block;font:400 clamp(54px,6.4vw,92px)/1 var(--serif);color:var(--gold-hi);letter-spacing:-.03em}
.ledger-l{display:block;margin-top:12px;font:600 12px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
@media (max-width:820px){.ledger{grid-template-columns:1fr 1fr}.ledger li:nth-child(2n){border-right:0}}

/* V. Migration */
.migration{list-style:none;padding:0;margin:0 0 clamp(48px,6vw,72px);display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.migration::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line-d)}
.migration::after{content:"";position:absolute;left:0;top:9px;height:1px;width:var(--p,0%);background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.migration li{position:relative;padding-top:38px;font:400 clamp(16px,1.8vw,22px)/1.2 var(--serif);color:var(--bone-faint);transition:color .6s}
.migration li::before{content:"";position:absolute;top:4px;left:0;width:11px;height:11px;border-radius:50%;border:1px solid var(--gold-lo);background:var(--night);transition:background .6s,box-shadow .6s}
.migration li.lit{color:var(--bone)}
.migration li.lit::before{background:var(--gold)}
.migration li.now.lit{color:var(--ember)}
.migration li.now.lit::before{background:var(--ember);box-shadow:0 0 0 6px rgba(255,106,85,.18)}
@media (max-width:720px){.migration{grid-template-columns:1fr;gap:0}.migration::before,.migration::after{display:none}.migration li{padding:10px 0 10px 28px}.migration li::before{top:16px}}

/* VI. Efforts */
.efforts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.efforts li{background:var(--ink);padding:28px 26px 30px;min-height:170px}
.efforts b{display:block;font:400 26px/1 var(--serif);color:var(--bone);margin-bottom:14px}
.efforts span{color:var(--bone-dim);font-size:15.5px}
@media (max-width:820px){.efforts{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.efforts{grid-template-columns:1fr}.efforts li{min-height:0}}

/* VII. The drain */
.drain-section{background:linear-gradient(180deg,var(--night),#08100f 70%,var(--night))}
.drain{display:grid;gap:clamp(24px,4vw,48px)}
.drain-figures{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px)}
.drain-svg{width:100%;height:auto;overflow:visible}
.drain-svg .chan{fill:none;stroke-width:9;stroke-linecap:round;opacity:.9}
.drain-svg .flow{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 22;animation:flow 1.6s linear infinite}
.drain-svg .pill text{font:700 11.5px var(--sans);letter-spacing:.07em;text-transform:uppercase;fill:#f3f1ec}
.drain-svg .pill rect{fill:#0f1d1c;stroke:var(--c);stroke-width:1.4}
.drain-svg .tether{stroke-width:1;stroke-dasharray:2 5;opacity:.55}
.drain-pills{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.drain-pills li{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--c);border-radius:999px;background:#0f1d1c;font:700 10px/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#f3f1ec}
.drain-pills li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.drain-svg .crowd{fill:rgba(243,241,236,.75)}
.drain-legend{margin:14px 0 0;text-align:center;font:600 11px/1.8 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-faint)}
@keyframes flow{to{stroke-dashoffset:-24}}
.fig{border-top:1px solid var(--line-d);padding:22px 0 26px}
.fig-k{font:700 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);margin:0}
.fig-n{font:400 clamp(40px,4.8vw,66px)/1.05 var(--serif);color:var(--gold-hi);margin:12px 0 10px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fig-n span{color:var(--gold-lo);margin:0 .08em}
.fig-n.small{font-size:clamp(34px,3.6vw,48px);color:var(--bone)}
.fig-s{margin:0;color:var(--bone-dim);font-size:15.5px}
.ticker{color:var(--ember)}
@media (max-width:720px){.drain-figures{grid-template-columns:1fr}}
.model{margin-top:clamp(64px,9vw,120px)}
.model h3{font-size:clamp(28px,3vw,40px)}
.model-s{color:var(--bone-dim);max-width:720px;margin:10px 0 28px}
.model-bar{display:flex;height:132px;gap:3px}
.model-bar span{flex:0 0 calc(var(--w)*1%);transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1);background:linear-gradient(180deg,rgba(54,194,180,.9),rgba(138,106,44,.9));position:relative;padding:14px;display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden}
.model-bar span:nth-child(2){background:rgba(54,194,180,.6)}
.model-bar span:nth-child(3){background:rgba(54,194,180,.42)}
.model-bar span:nth-child(4){background:rgba(54,194,180,.28)}
.model-bar.on span{transform:none}
.model-bar span:nth-child(2){transition-delay:.15s}.model-bar span:nth-child(3){transition-delay:.3s}.model-bar span:nth-child(4){transition-delay:.45s}
.model-bar b{font:700 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#03201d}
.model-bar i{font:400 normal 24px/1 var(--serif);color:#03201d}
.model-bar span:nth-child(n+3) b,.model-bar span:nth-child(n+3) i{color:var(--bone)}
@media (max-width:720px){.model-bar{flex-direction:column;height:auto}.model-bar span{flex:none;height:auto;min-height:64px;width:calc(30% + var(--w)*.7%);transform-origin:top left}}
.benchmark{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-top:40px;padding:24px 28px;border:1px dashed var(--line-d)}
.benchmark p{margin:0;color:var(--bone-dim)}
@media (max-width:720px){.benchmark{grid-template-columns:1fr;gap:8px}}

/* VIII. Dawn */
.chapter.dawn{background:linear-gradient(180deg,var(--night) 0%,#10201e 22%,#2c5c57 58%,#cbbd9c 84%,var(--stone) 100%);color:var(--bone)}
.timeline{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px)}
.timeline li{border-top:1px solid rgba(243,241,236,.3);padding-top:22px}
.t-when{display:block;font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:16px}
.timeline b{display:block;font:400 28px/1.1 var(--serif);margin-bottom:12px}
.timeline p{margin:0;color:rgba(243,241,236,.82);font-size:15.5px}
.timeline li.now{border-top:2px solid var(--gold-hi)}
.dawn .pull{color:#0d2b28;border-color:#0d2b28}
@media (max-width:900px){.timeline{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.timeline{grid-template-columns:1fr}}

/* IX. Stone: the stack */
.chapter.stone{background:var(--stone);color:var(--text)}
.stone .num{color:var(--teal)}
.stone h2 em{color:var(--teal)}
.stone .lede{color:var(--text-dim)}
.stack-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.metcalfe{font:400 italic 22px/1.45 var(--serif);color:var(--text);border-left:1px solid var(--teal);padding-left:22px;margin-top:36px}
.stack{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.stack li{--i:0;display:flex;align-items:center;gap:16px;padding:0 20px;height:clamp(44px,5.4vw,58px);background:var(--teal-d);color:#eaf2ef;font:500 15px var(--sans);letter-spacing:.02em;margin:0 calc(var(--n) * 1.8%);opacity:0;transform:translateY(-26px);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--n) * 90ms)}
.stack li b{font:400 20px/1 var(--serif);color:rgba(234,242,239,.6);width:28px}
.stack li:first-child{background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-lo));color:#03201d}
.stack li:first-child b{color:rgba(20,15,5,.55)}
.stack li:last-child{background:#163f3c}
.stack.on li{opacity:1;transform:none}
.stack::after{content:"Foundation";display:block;margin-top:6px;padding:10px 20px;background:var(--stone-2);color:var(--text-dim);font:700 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;text-align:center}
@media (max-width:900px){.stack-wrap{grid-template-columns:1fr}}

/* X. Possible */
.possible{background:var(--stone);color:var(--text);padding-bottom:clamp(96px,12vw,160px)}
.possible-img{margin:0;position:relative}
.possible-img img{width:100%;height:clamp(320px,62vw,760px);object-fit:cover;object-position:50% 48%}
.possible-img::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,var(--stone))}
.possible-copy{margin-top:clamp(-120px,-8vw,-40px);position:relative}
.possible .num{color:var(--teal)}
.possible h2 em{color:var(--teal)}
.outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.outcomes article{background:#fbf8f2;border:1px solid rgba(27,29,31,.08);padding:26px 22px 28px}
.outcomes h3{font-size:28px;color:var(--teal-d);margin-bottom:14px}
.outcomes p{margin:0;color:var(--text-dim);font-size:15.5px}
.outcomes .pull-s{margin-top:14px;font:italic 400 17px/1.4 var(--serif);color:var(--text)}
.possible .finding,.journey .finding{color:var(--text-dim)}
.possible .finding b{color:var(--text)}
.possible sup a,.stone sup a{color:var(--teal)}
@media (max-width:980px){.outcomes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.outcomes{grid-template-columns:1fr}}

/* XI. Journey */
.journey{border-top:1px solid rgba(27,29,31,.1)}
.parts{list-style:none;padding:0;margin:0;columns:2;column-gap:clamp(32px,5vw,72px)}
.parts li{break-inside:avoid;display:grid;grid-template-columns:52px 1fr;padding:18px 0;border-bottom:1px solid rgba(27,29,31,.12)}
.parts b{font:400 20px/1.2 var(--serif);color:var(--teal);grid-row:span 2}
.parts span{font:400 22px/1.25 var(--serif)}
.parts i{color:var(--text-dim);font-size:15px}
.journey-meta{margin:32px 0 0;font:700 11.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
@media (max-width:760px){.parts{columns:1}}

/* XII. Report */
.report{background:var(--night);padding:clamp(96px,13vw,170px) 0 clamp(64px,8vw,100px);position:relative;overflow:hidden}
.report::before{content:"";position:absolute;inset:-20% -10% auto;height:70%;background:radial-gradient(ellipse at 30% 30%,rgba(54,194,180,.16),transparent 60%)}
.report-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.report-cover{margin:0;transform:perspective(1600px) rotateY(9deg) rotateX(2deg);box-shadow:-30px 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px var(--line-d)}
.report h2{font-size:clamp(40px,5vw,72px)}
.request{display:grid;gap:14px;margin-top:28px}
.request label{display:grid;gap:7px;font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}
.request input{font:400 17px var(--sans);color:var(--bone);background:rgba(243,241,236,.05);border:1px solid rgba(243,241,236,.2);border-radius:2px;padding:14px 14px;min-height:50px;width:100%}
.request input:focus{border-color:var(--gold);outline:0;background:rgba(243,241,236,.08)}
.request .btn{margin-top:8px;justify-self:start}
.request .trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.fine{font-size:13.5px;color:var(--bone-faint);margin:2px 0 0}
.request-status{min-height:1.4em;margin:0;color:var(--gold-hi)}
.ready{margin-top:28px;display:grid;gap:14px;justify-items:start}
.ready-k{font:400 italic 26px/1.3 var(--serif);margin:0;color:var(--gold-hi)}
@media (max-width:900px){.report-grid{grid-template-columns:1fr}.report-cover{transform:none}}
.listen{display:grid;grid-template-columns:1fr minmax(260px,420px);gap:28px;align-items:center;margin-top:clamp(64px,8vw,104px);padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.listen h3{font-size:30px}
.listen p{margin:6px 0 0;color:var(--bone-dim)}
.listen .num{margin-bottom:10px}
.listen audio{width:100%}
@media (max-width:720px){.listen{grid-template-columns:1fr}}
.pass-on{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);margin-top:clamp(40px,6vw,64px)}
.pass-on article{border:1px solid var(--line-d);padding:30px 28px}
.pass-on b{font:400 18px var(--serif);color:var(--gold)}
.pass-on h3{font-size:30px;margin:10px 0 8px}
.pass-on p{color:var(--bone-dim);margin:0 0 22px}
.share-status{min-height:1.2em;margin:12px 0 0!important;font-size:14px}
@media (max-width:720px){.pass-on{grid-template-columns:1fr}}

/* Closing */
.closing{background:var(--night);text-align:center;padding:clamp(80px,12vw,150px) var(--gut);border-top:1px solid var(--line-d)}
.ayah{font:400 clamp(30px,4.4vw,56px)/1.7 Amiri,serif;color:var(--gold-hi);margin:0 auto;max-width:980px}
.ayah-en{font:400 italic clamp(18px,1.9vw,23px)/1.5 var(--serif);color:var(--bone-dim);max-width:720px;margin:18px auto 0}
.ayah-en span{display:block;margin-top:10px;font:700 11px/1 var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.closing-line{margin:clamp(48px,7vw,80px) 0 0;font:400 clamp(24px,3vw,38px)/1.3 var(--serif)}
.closing-line em{color:var(--gold-hi)}

/* Footer */
.foot{background:#050d0c;color:var(--bone-faint);padding:56px 0 64px;font-size:13.5px;border-top:1px solid var(--line-d)}
.foot-credit{color:var(--bone-dim);font-size:15px;margin:0 0 24px}
.notes{padding-left:20px;margin:0;display:grid;gap:6px;max-width:900px}
.notes li:target{color:var(--gold-hi)}
.foot-links{display:flex;gap:28px;margin:32px 0 0}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  /* Toned down, not switched off: no zoom, no sliding; fades and the
     infographic animations still play. */
  html{scroll-behavior:auto}
  .art-field,.cube{animation:none!important}
  .reveal{transform:none}
}

/* AI tag on the audio briefing */
.ai-tag{display:inline-block;margin:10px 0 0!important;padding:5px 10px;border:1px solid var(--line-d);border-radius:999px;font:700 10.5px/1 var(--sans)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)!important}

/* VII-B. The full bill */
.bill{background:radial-gradient(ellipse at 15% 0%,#0e1f1d 0%,var(--night) 55%)}
.bill-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:center}
.vessel{margin:0;-webkit-mask:radial-gradient(ellipse 70% 70% at 50% 45%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 70% 70% at 50% 45%,#000 55%,transparent 100%)}
.vessel img{width:100%}
.bill-hero{border:1px solid var(--line-d);border-radius:14px;padding:clamp(22px,3vw,36px);background:rgba(255,255,255,.02);position:relative}
.bill-n{font:400 clamp(56px,8vw,112px)/1.05 var(--serif);margin:10px 0 0;color:var(--gold-hi);letter-spacing:-.03em}
.bill-n span{color:var(--gold)}
.bill-to{font:700 clamp(15px,1.6vw,19px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:6px 0 22px}
.bill-nots{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.bill-nots li{padding:8px 14px;border:1px solid var(--line-d);border-radius:999px;font:600 13px/1 var(--sans);letter-spacing:.06em;color:var(--bone-dim)}
.bill-nots li.fix{border-color:var(--gold);color:var(--gold-hi)}
.bill-stats{list-style:none;padding:0;margin:clamp(40px,6vw,72px) 0 0;display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line-d);border-radius:14px;overflow:hidden}
.bill-stats li{padding:24px 18px 26px;border-right:1px solid var(--line-d);position:relative}
.bill-stats li:last-child{border-right:0}
.bill-stats b{display:block;font:400 clamp(34px,3.6vw,48px)/1.1 var(--serif);color:var(--gold-hi);letter-spacing:-.02em}
.bill-stats b i{font-style:normal;font-size:.45em;color:var(--gold)}
.bill-stats span{display:block;margin-top:8px;font:700 11.5px/1.45 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
@media (max-width:980px){.bill-stats{grid-template-columns:1fr 1fr}.bill-stats li{border-bottom:1px solid var(--line-d)}.bill-stats li:nth-child(2n){border-right:0}.bill-stats li:last-child{grid-column:1/-1;border-bottom:0}}
@media (max-width:760px){.bill-head{grid-template-columns:1fr}.vessel{max-width:260px;margin:0 auto -20px}}
.bill-sub{font-size:clamp(26px,3vw,40px);margin:clamp(56px,8vw,96px) 0 24px}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.ways article{border:1px solid var(--line-d);border-radius:14px;padding:26px 24px 24px;background:rgba(255,255,255,.02);position:relative}
.way-n{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;margin:0 0 14px;font:400 18px var(--serif);color:var(--gold-hi)}
.ways h4{font:400 26px/1.15 var(--serif);margin:0 0 10px;color:var(--bone)}
.ways article>p{color:var(--bone-dim);font-size:15.5px;margin:0}
.ways .way-fig{font:400 clamp(46px,5vw,62px)/1 var(--serif);color:var(--gold-hi);margin:22px 0 4px;letter-spacing:-.02em}
.ways .way-fig span{color:var(--gold)}
.ways .way-per{font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:18px}
.ways ul{list-style:none;padding:14px 0 0;margin:0;border-top:1px solid var(--line-d);display:grid;gap:8px}
.ways li{color:var(--bone-dim);font-size:15px;padding-left:18px;position:relative}
.ways li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold-lo)}
@media (max-width:900px){.ways{grid-template-columns:1fr}}
.multipliers{margin-top:24px;border:1px solid var(--line-d);border-radius:14px;padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.multipliers .fig-k{margin:0 8px 0 0}
.multipliers ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.multipliers li{padding:8px 14px;border-radius:999px;background:rgba(243,241,236,.07);font:600 13.5px/1 var(--sans);color:var(--bone)}
.bill-total{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;border:1.5px solid var(--gold);border-radius:14px;padding:26px clamp(20px,3vw,36px);background:linear-gradient(90deg,rgba(54,194,180,.12),transparent);position:relative}
.bill-total .fig-k{color:var(--gold-hi);font-size:13px}
.fine-d{margin:6px 0 0;color:var(--bone-faint);font-size:13.5px}
.bill-total-n{margin:0;font:400 clamp(34px,5.4vw,72px)/1 var(--serif);color:var(--gold-hi);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bill-total-n span{color:var(--gold)}
.market{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px)}
.market li{border:1px solid var(--line-d);border-radius:14px;padding:22px 20px;background:rgba(255,255,255,.02);position:relative}
.market b{display:block;font:400 clamp(36px,3.6vw,48px)/1.05 var(--serif);color:var(--gold-hi);letter-spacing:-.02em}
.market b small{font-size:.5em;color:var(--bone-faint)}
.market span{display:block;margin-top:8px;font:700 11.5px/1.45 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--bone)}
.market i{display:block;margin-top:10px;font-style:normal;color:var(--bone-dim);font-size:14.5px}
@media (max-width:980px){.market{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.market{grid-template-columns:1fr}}
.nyt{margin:20px 0 0;color:var(--bone-dim);font-size:15px}
.nyt b{color:var(--gold-hi)}
.bill-close{text-align:center;margin:clamp(56px,8vw,96px) auto 0;max-width:820px;font:600 13px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);position:relative}
.bill-close b{display:block;margin-top:10px;font:400 clamp(26px,3.4vw,44px)/1.25 var(--serif);letter-spacing:0;text-transform:none;color:var(--bone)}
.bill-close em{color:var(--gold-hi)}
.poster-share{text-align:center;margin-top:28px}

/* Share chips and the share sheet */
[data-share-card]{position:relative}
.share-chip{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(243,241,236,.28);background:rgba(7,8,10,.72);color:var(--bone);cursor:pointer;opacity:.75;transition:opacity .2s,transform .2s,background .2s}
.share-chip:hover,.share-chip:focus-visible{opacity:1;background:var(--gold);color:#03201d;transform:scale(1.06)}
.share-chip svg{width:16px;height:16px}
.stone .share-chip,.possible .share-chip{background:rgba(255,255,255,.85);color:var(--teal-d);border-color:rgba(27,29,31,.15)}
blockquote[data-share-card]{padding-right:52px}
.atlas-meter .share-chip{pointer-events:auto;top:-46px;right:0}
.atlas-meter{position:relative;pointer-events:auto}
@media (hover:hover){.share-chip{opacity:.45}[data-share-card]:hover>.share-chip{opacity:1}}
.sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.78);backdrop-filter:blur(6px)}
.sheet[hidden]{display:none}
.sheet-box{width:min(440px,100%);max-height:calc(100svh - 32px);overflow:auto;background:#0c1918;border:1px solid var(--line-d);border-radius:16px;padding:18px}
.sheet-box img{width:100%;border-radius:8px;border:1px solid var(--line-d)}
.sheet-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sheet-acts .btn{min-height:46px;padding:0 14px;font-size:11.5px}
.sheet-acts .wide{grid-column:1/-1}
.sheet-close{float:right;background:none;border:0;color:var(--bone);font-size:26px;line-height:1;cursor:pointer;margin:-4px 0 6px}
.sheet-msg{min-height:1.2em;margin:10px 0 0;font-size:13.5px;color:var(--gold-hi);text-align:center}
.fig[data-share-card],.bill-hero,.ways article,.market li,.bill-stats li{padding-right:52px}
.bill-stats li{padding-right:44px}

.bridge{color:var(--bone-dim);max-width:560px;margin:-28px 0 28px;font-size:15.5px;border-left:1px solid var(--gold-lo);padding-left:14px}
.gallery{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(14px,2vw,24px);align-items:start}
.gallery figure{margin:0;position:relative;border:1px solid var(--line-d);border-radius:14px;overflow:hidden;background:#000}
.gallery img{width:100%}
.gallery figcaption{padding:12px 16px;font:700 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);border-top:1px solid var(--line-d)}
@media (max-width:760px){.gallery{grid-template-columns:1fr}}

/* Icons on the infographic blocks */
.ic{width:26px;height:26px;color:var(--gold);display:block;margin-bottom:12px}
.ways .ic{position:absolute;top:28px;right:60px;width:30px;height:30px}
.multipliers li{display:inline-flex;align-items:center;gap:8px}
.multipliers .ic{width:16px;height:16px;margin:0}
.gallery img{background:#0a1514;aspect-ratio:auto}

/* Teal + Sand, in Jost (24 Oct 2026) */
h2 em,h1 em{font-style:normal;font-weight:500;color:var(--gold)}
.cover h1 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#f3e6cb}
.cover h1{font-weight:600;letter-spacing:.06em}
.btn.gold{background:var(--gold);color:#03201d;box-shadow:0 10px 36px -14px rgba(54,194,180,.8)}
.big-stat{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold-hi)}
.cover-art img,.vessel img{filter:saturate(.55)}
.pull,.metcalfe,.cover-sub,.ayah-en,.ready-k,.outcomes .pull-s{font-style:normal}
.dawn .pull{color:#0d2b28}

/* Signal red marks every loss; teal stays for action and the fixable. */
:root{--signal:#ff5a4a;--signal-dk:#d23a2b}
/* 1. Less dead space after the humanity section */
#condition{padding-bottom:clamp(40px,6vw,72px)}
.humanity{align-items:start}
/* 3. The $225.4M breakdown: one row per cost, readable at any width */
.model{border:1.5px solid var(--signal);border-radius:16px;padding:clamp(20px,3vw,36px);background:linear-gradient(180deg,rgba(255,90,74,.06),transparent 60%)}
.model-rows{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.model-rows li{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:baseline}
.mr-l{font:600 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bone)}
.mr-v{font:400 clamp(22px,2.4vw,30px)/1 var(--serif);color:var(--signal);font-variant-numeric:tabular-nums}
.model-rows i{grid-column:1/-1;height:12px;border-radius:6px;background:rgba(243,241,236,.07);overflow:hidden;position:relative}
.model-rows i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--w)*1%);border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--signal));transform-origin:left;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.model-rows.on i::after{transform:none}
.model-rows li:nth-child(2) i::after{transition-delay:.12s}.model-rows li:nth-child(3) i::after{transition-delay:.24s}.model-rows li:nth-child(4) i::after{transition-delay:.36s}
.mr-total{border-top:1px solid rgba(255,90,74,.4);padding-top:14px;margin-top:4px}
.mr-total .mr-l{color:var(--signal)}
.mr-total .mr-v{font-size:clamp(28px,3.2vw,40px)}
.benchmark{border-color:rgba(243,241,236,.18)}
/* 4-6. Losses in red */
.bill-n,.bill-n span{color:var(--signal)}
.bill-hero{border-color:rgba(255,90,74,.45)}
.bill-nots li.loss{border-color:rgba(255,90,74,.6);color:#ffb3a9}
.bill-nots li.fix{border-color:var(--gold);color:var(--gold);background:rgba(54,194,180,.08)}
.bill-stats li.loss b,.bill-stats li.loss b i{color:var(--signal)}
.ways .way-fig,.ways .way-fig span{color:var(--signal)}
.ways li::before{background:var(--signal)}
.bill-total{border-color:var(--signal);background:linear-gradient(90deg,rgba(255,90,74,.14),transparent)}
.bill-total .fig-k{color:var(--signal)}
.bill-total-n,.bill-total-n span{color:var(--signal)}
.fig-n:not(.ticker){color:var(--gold-hi)}
#direct-cost .fig-n,#direct-cost .fig-n span{color:var(--signal)}
.ticker{color:var(--signal)}
.migration li.now.lit,.migration li.now.lit::before{color:var(--signal)}
.migration li.now.lit::before{background:var(--signal);box-shadow:0 0 0 6px rgba(255,90,74,.18)}
/* 2. Pills: red leak dot */
.drain-svg .pill .dot{fill:var(--signal)}
.drain-pills li::before{background:var(--signal)!important}
/* 8. Fieldwork in daylight */
.fieldwork{background:var(--stone);color:var(--text);border:0}
.fieldwork .lede,.fieldwork .finding{color:var(--text-dim)}
.fieldwork .finding b{color:var(--text)}
.fieldwork .ledger{border-color:rgba(27,29,31,.14)}
.fieldwork .ledger li{border-color:rgba(27,29,31,.14)}
.fieldwork .ledger-n{color:var(--teal-d)}
.fieldwork .ledger-l{color:var(--text-dim)}
.fieldwork sup a{color:var(--teal)}
.atlas-hud{justify-content:flex-start;padding-top:clamp(96px,13vh,140px)}
.fieldwork .ledger li:last-child{border-right:0}

/* Anything marked hidden stays hidden, whatever its display style */
[hidden]{display:none!important}

/* Phone fit (24 Oct 2026): nothing may be wider than the screen */
.sr-only{margin:-1px;padding:0;border:0;clip-path:inset(50%)}
table.sr-only{display:block;max-width:1px}
body{overflow-x:clip}
@media (max-width:980px){.bill-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.bill-stats{grid-template-columns:minmax(0,1fr)}.bill-stats li{border-right:0}}
.market,.ways,.outcomes,.gallery,.drain-figures,.timeline,.efforts,.pass-on,.ledger{min-width:0}
.market li,.ways article,.outcomes article,.efforts li,.timeline li,.bill-stats li{min-width:0;overflow-wrap:anywhere}
.bill-total-n{font-size:clamp(28px,7.4vw,72px)}
.bill-close .share-chip{position:static;margin:16px auto 0;display:grid}
.drain-pills li{font-size:10.5px}
@media (max-width:820px){.ledger{grid-template-columns:repeat(2,minmax(0,1fr))}.ledger li{margin-right:0;padding:22px 14px 8px 0}.ledger li:nth-child(2n){padding-left:14px}.ledger-n{font-size:clamp(40px,12vw,64px)}}