/* Baghdad: the continuing city — 3D edition.
   An archive at night on the Tigris: ink-blue ground, ivory text, gilt and river accents that sit well with
   black-and-white photographs and survey prints. Formal naskh (Amiri) for headings, Plex Sans Arabic for text. */
:root{
  --ground:#0b1016; --ground-2:#111a23; --glass:rgba(15,23,32,.62); --glass-2:rgba(22,32,44,.74);
  --ink:#f2eee6; --ink-2:#c6ccd1; --ink-3:#8e99a3;
  --line:rgba(242,238,230,.12); --line-2:rgba(242,238,230,.24);
  --copper:#d6b878; --copper-2:#e6cf9c; --river:#7cc4be; --river-2:#b4e2dc; --gold:#d6b878; --rose:#e3a3a8;
  --gA:#97c98a; --gB:#7cc4be; --gC:#d9be7a; --gD:#e0a070; --gE:#e3a3a8;
  --c:#d6b878; /* act colour, set per slide */
  --display:'Amiri','Geeza Pro','Times New Roman',serif;
  --body:'IBM Plex Sans Arabic','Geeza Pro','Segoe UI',Tahoma,sans-serif;
  --naskh:'Amiri','Geeza Pro','Times New Roman',serif;
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.7),0 8px 24px -12px rgba(0,0,0,.5);
  --gut:clamp(16px,3.2vw,56px);
  --panel:min(52vw,880px);
  --foot:84px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:clamp(14px,.62vw + 8px,19px);line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit}
a{color:var(--river-2)}
:focus-visible{outline:2px solid var(--river);outline-offset:3px;border-radius:8px}

#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to left,rgba(11,16,22,.92) 0%,rgba(11,16,22,.78) calc(var(--panel) - 120px),rgba(11,16,22,0) calc(var(--panel) + 140px)),
    linear-gradient(to top,rgba(11,16,22,.9),rgba(11,16,22,0) 220px),
    radial-gradient(120% 90% at 30% 40%,transparent 55%,rgba(0,0,0,.55));
  transition:opacity .8s}
body.hero .scrim{background:
    linear-gradient(to top,rgba(11,16,22,.95) 0%,rgba(11,16,22,.55) 45%,rgba(11,16,22,.15) 75%),
    radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(0,0,0,.6))}

/* ---------- loader */
#loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--ground);transition:opacity 1s,visibility 1s}
#loader.done{opacity:0;visibility:hidden}
.ld-in{text-align:center}
.ld-kicker{margin:0;color:var(--ink-3);letter-spacing:.02em}
.ld-title{margin:.1em 0 .4em;font:700 clamp(48px,7vw,104px)/1.1 var(--display);color:var(--ink)}
.ld-title span{display:block;font-size:.42em;color:var(--copper-2);margin-top:.15em}
.ld-river{width:min(420px,70vw);height:44px;overflow:visible}
.ld-river path{fill:none;stroke:var(--river);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--p,1);filter:drop-shadow(0 0 8px rgba(124,196,190,.7));transition:stroke-dashoffset .4s}
.ld-pct{margin:.4em 0 0;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- top bar */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gut);pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:baseline;gap:.5em;text-decoration:none;color:var(--ink)}
.brand b{font:700 1.5rem/1 var(--display)}
.brand span{color:var(--ink-3);font-size:.9rem}
.tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-flex;align-items:center;gap:.4em;height:38px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(244,232,216,.08);color:var(--ink-2);font-size:.86rem;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s,transform .25s}
.pill:hover{background:rgba(244,232,216,.16);color:var(--ink);transform:translateY(-1px)}
.pill[aria-pressed="true"]{background:var(--ink);color:#0b1016;box-shadow:none}
.pill.icon{width:38px;padding:0;justify-content:center}
.pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}

/* ---------- slides (DOM layer) */
#deck{position:fixed;inset:0;z-index:5;pointer-events:none}
.slide{position:absolute;top:84px;bottom:calc(var(--foot) + 12px);right:var(--gut);width:calc(var(--panel) - var(--gut));
  display:flex;flex-direction:column;visibility:hidden;pointer-events:none}
.slide.on{visibility:visible;pointer-events:auto}
.sl-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 4px 28px 18px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent)}
.sl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.act{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px 0 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 22%,transparent);color:color-mix(in srgb,var(--c) 60%,#fff);font-size:.8rem;font-weight:600}
.act i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.kicker{color:var(--ink-3);font-size:.86rem}
.star{color:var(--gold);font-size:.85rem}
h2.title{margin:0 0 .2em;font:700 clamp(32px,2.7vw + 10px,68px)/1.35 var(--display);letter-spacing:0;text-wrap:balance}
h2.title .w{display:inline-block;white-space:pre}
h2.title::after{content:"";display:block;width:56px;height:2px;margin:.35em 0 0;border-radius:2px;background:var(--c);opacity:.8}
.message{margin:0 0 1.1em;padding:0;font:400 clamp(18px,.8vw + 12px,27px)/1.7 var(--naskh);color:var(--ink);text-wrap:pretty}
.interp{display:inline-block;margin-inline-start:.3em;padding:0 .55em;border-radius:999px;background:rgba(240,143,166,.14);color:var(--rose);font:500 .62em/1.8 var(--body);vertical-align:.2em}

.tabs{display:inline-flex;gap:4px;padding:4px;margin:0 0 14px;border-radius:999px;background:rgba(244,232,216,.07);box-shadow:inset 0 0 0 1px var(--line)}
.tabs button{border:0;background:transparent;height:34px;padding:0 16px;border-radius:999px;cursor:pointer;color:var(--ink-3);font-size:.84rem;transition:background .3s,color .3s}
.tabs button[aria-selected="true"]{background:var(--ink);color:#0b1016}
.pane[hidden]{display:none}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 1.2em}
.stat{position:relative;padding:16px 18px 14px;border-radius:var(--r-md);background:rgba(16,25,35,.78);-webkit-
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);overflow:hidden}
.stat::before{content:"";position:absolute;inset:0 0 auto auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(var(--c),transparent 70%);opacity:.16;transform:translate(30%,-40%)}
.stat b{display:block;font:700 clamp(28px,1.6vw + 14px,46px)/1.15 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat>span{display:block;margin-top:4px;color:var(--ink-2);font-size:.86rem;line-height:1.55}
.stat .ev{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.72rem;color:var(--ink-3)}

.pts{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:10px}
.pts li{position:relative;padding:12px 44px 12px 16px;border-radius:var(--r-sm);background:rgba(244,232,216,.045);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);text-wrap:pretty;transition:background .3s,color .3s}
.pts li::before{content:"";position:absolute;right:18px;top:1.25em;width:10px;height:10px;border-radius:50%;border:2px solid var(--c)}
.pts li.link{cursor:pointer}
.pts li.link:hover,.pts li.cur{background:rgba(244,232,216,.09);color:var(--ink)}
.pts li.cur::before{background:var(--c);box-shadow:0 0 10px var(--c)}

.code{display:inline-block;padding:0 .45em;margin:0 .1em;border-radius:6px;background:rgba(244,232,216,.08);color:var(--ink-2);font:500 .78em/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr;unicode-bidi:isolate;cursor:help}
.g{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;font:700 .72rem/1 var(--body);font-style:normal;color:#0b1016;direction:ltr}
.gA{background:var(--gA)}.gB{background:var(--gB)}.gC{background:var(--gC)}.gD{background:var(--gD)}.gE{background:var(--gE)}

/* ---------- charts */
.chart{margin:0 0 1em;padding:18px 20px 16px;border-radius:var(--r-lg);background:rgba(16,25,35,.78);-webkit-box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.chart h3{margin:0 0 12px;font:700 1.1rem/1.5 var(--display);color:var(--ink)}
.chart .note{margin:12px 0 0;color:var(--ink-3);font-size:.78rem;line-height:1.7}
.bars{display:grid;gap:10px}
.bar{display:grid;grid-template-columns:minmax(120px,34%) 1fr auto;align-items:center;gap:12px}
.bar .bl{color:var(--ink-2);font-size:.86rem;line-height:1.45}
.bar .tr{height:16px;border-radius:999px;background:rgba(244,232,216,.07);overflow:hidden}
.bar .fl{display:block;height:100%;width:var(--w);border-radius:999px;background:linear-gradient(to left,var(--bc,var(--river)),color-mix(in srgb,var(--bc,var(--river)) 55%,transparent));box-shadow:0 0 18px color-mix(in srgb,var(--bc,var(--river)) 40%,transparent);transform-origin:right}
.bar .v{font:700 1rem/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink);min-width:3.2em;text-align:left}
.rng{position:relative;height:18px;border-radius:999px;background:rgba(244,232,216,.07)}
.rng .fl{position:absolute;top:0;bottom:0;right:var(--a);width:var(--w);border-radius:999px;background:linear-gradient(to left,var(--bc),color-mix(in srgb,var(--bc) 60%,#fff))}
.axis{display:flex;justify-content:space-between;color:var(--ink-3);font-size:.72rem;margin:6px 0 0;padding-inline-start:calc(34% + 12px)}

.tl{position:relative;list-style:none;margin:0;padding:0 26px 0 0}
.tl::before{content:"";position:absolute;right:7px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(var(--river),color-mix(in srgb,var(--river) 20%,transparent));box-shadow:0 0 10px rgba(124,196,190,.5)}
.tl.loose::before{display:none}
.tl li{position:relative;padding:6px 0 12px}
.tl li::before{content:"";position:absolute;right:-25px;top:.85em;width:14px;height:14px;border-radius:50%;background:var(--ground);border:2px solid var(--river)}
.tl li.fixed::before{background:var(--river)}
.tl li.big::before{width:18px;height:18px;right:-27px}
.tl .d{display:inline-block;min-width:6.5em;font:700 1rem/1.4 var(--display);color:var(--copper-2)}
.tl .t{color:var(--ink-2)}
.tl .m{display:inline-flex;gap:6px;align-items:center;margin-inline-start:8px;font-size:.72rem;color:var(--ink-3)}
.tl.loose li{margin-bottom:10px;padding:12px 16px;border-radius:var(--r-sm);background:rgba(244,232,216,.05);box-shadow:inset 0 0 0 1px var(--line)}
.tl.loose li::before{display:none}

.tbl-wrap{overflow-x:auto;margin:0 -6px;padding:0 6px}
table.tbl{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:.84rem;line-height:1.6}
.tbl th{padding:4px 12px;text-align:right;color:var(--ink-3);font-weight:500;font-size:.76rem;white-space:nowrap}
.tbl td{padding:10px 12px;background:rgba(244,232,216,.05);color:var(--ink-2);vertical-align:top}
.tbl td:first-child{border-radius:0 12px 12px 0;color:var(--ink);font-weight:500}
.tbl td:last-child{border-radius:12px 0 0 12px}
.tbl td.h-good{background:rgba(134,196,123,.16);color:#cfe8c7}
.tbl td.h-part{background:rgba(230,182,92,.15);color:#f1dcb0}
.tbl td.h-bad{background:rgba(240,143,166,.15);color:#f8cdd7}
.tbl td.h-unk{background:rgba(244,232,216,.04);color:var(--ink-3)}

.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cardx{padding:16px 18px;border-radius:var(--r-md);background:rgba(244,232,216,.05);box-shadow:inset 0 0 0 1px var(--line)}
.cardx h4{margin:0 0 6px;font:700 1.05rem/1.4 var(--display);color:var(--ink)}
.cardx .era{display:inline-block;margin-bottom:6px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--c) 22%,transparent);color:color-mix(in srgb,var(--c) 55%,#fff);font-size:.74rem}
.cardx p{margin:0 0 6px;color:var(--ink-2);font-size:.86rem}
.cardx small{color:var(--ink-3);font-size:.74rem}

.sq{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.sq .big{position:relative;width:min(260px,52vw);aspect-ratio:1;border-radius:16px;background:rgba(244,232,216,.06);box-shadow:inset 0 0 0 1px var(--line-2)}
.sq .small{position:absolute;right:46%;bottom:38%;width:var(--s);aspect-ratio:1;background:var(--copper);border-radius:2px;box-shadow:0 0 0 6px rgba(214,184,120,.18),0 0 24px var(--copper)}
.sq dl{margin:0;display:grid;gap:10px;flex:1;min-width:200px}
.sq dt{color:var(--ink);font-weight:500}
.sq dd{margin:0;color:var(--ink-2);font-size:.86rem}

details.mx{margin:0 0 8px;border-radius:var(--r-sm);background:rgba(244,232,216,.05);box-shadow:inset 0 0 0 1px var(--line)}
details.mx summary{cursor:pointer;list-style:none;padding:12px 16px;display:flex;align-items:center;gap:10px;font:700 1rem/1.4 var(--display)}
details.mx summary::-webkit-details-marker{display:none}
details.mx summary::before{content:"+";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(244,232,216,.1);font:500 1rem/1 var(--body);transition:transform .3s}
details.mx[open] summary::before{content:"−"}
.mx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 14px}
.mx-grid div{padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.18);font-size:.84rem;color:var(--ink-2)}
.mx-grid b{display:block;margin-bottom:4px;color:var(--ink-3);font-size:.72rem;font-weight:500}

.dirs{display:grid;gap:8px}
.dir{border-radius:var(--r-sm);background:rgba(244,232,216,.05);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s}
.dir>button{width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px;border:0;background:none;cursor:pointer;text-align:right;font:700 .98rem/1.45 var(--display)}
.dir .no{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pc);color:#0b1016;font:700 .86rem/1 var(--body)}
.dir .st{margin-inline-start:auto;flex:none;font:400 .72rem/1 var(--body);color:var(--ink-3)}
.dir.open{background:rgba(244,232,216,.09)}
.dir .more{display:none;padding:0 14px 14px 14px;font-size:.86rem;color:var(--ink-2)}
.dir.open .more{display:block}
.more h5{margin:10px 0 4px;color:var(--ink-3);font-size:.74rem;font-weight:500}
.more p{margin:0}

.pol{display:grid;gap:12px}
.pol article{padding:16px 18px;border-radius:var(--r-md);background:rgba(244,232,216,.05);box-shadow:inset 0 0 0 1px var(--line)}
.pol h4{margin:0 0 6px;font:700 1.1rem/1.4 var(--display)}
.pol p{margin:0;color:var(--ink-2);font-size:.9rem}
.pol .why{margin-top:8px;color:var(--ink-3);font-size:.78rem}
ins{text-decoration:none;background:rgba(124,196,190,.2);color:var(--river-2);border-radius:4px;padding:0 .15em;box-shadow:0 0 0 1px rgba(124,196,190,.35)}
body:not(.policy) .prop-only{display:none}
body.policy .off-only{display:none}
.pol-flag{display:inline-block;margin-bottom:10px;padding:2px 12px;border-radius:999px;font-size:.76rem;background:rgba(244,232,216,.08);color:var(--ink-3)}
body.policy .pol-flag{background:rgba(124,196,190,.18);color:var(--river-2)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.steps div{padding:14px 16px;border-radius:var(--r-md);background:rgba(244,232,216,.05);box-shadow:inset 0 0 0 1px var(--line)}
.steps h4::before{content:"";display:inline-block;width:9px;height:9px;margin-inline-end:8px;border-radius:50%;background:var(--pc);box-shadow:0 0 10px var(--pc);vertical-align:.12em}
.steps h4{margin:0 0 4px;font:700 1.05rem/1.4 var(--display)}
.steps .dn{color:var(--ink-3);font-size:.76rem}
.steps p{margin:6px 0 0;color:var(--ink-2);font-size:.84rem}

.limits{margin:4px 0 0;padding:12px 16px;border-radius:var(--r-sm);background:rgba(214,184,120,.08);box-shadow:inset 0 0 0 1px rgba(214,184,120,.2);color:var(--ink-2);font-size:.82rem}
.limits b{color:var(--copper-2);font-weight:500}

.principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;counter-reset:p}
.principles li{position:relative;padding:18px 18px 16px 18px;border-radius:var(--r-md);background:rgba(16,25,35,.78);-webkit-box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:.9rem}
.principles li b{display:block;margin-bottom:4px;font:700 1.1rem/1.4 var(--display);color:var(--ink)}
.principles li .n{position:absolute;left:16px;top:10px;font:700 2.6rem/1 var(--display);color:color-mix(in srgb,var(--c) 45%,transparent)}

/* hero slides: centred, the document is the backdrop */
.slide.hero{left:var(--gut);right:var(--gut);width:auto;justify-content:flex-end;text-align:center;align-items:center}
.slide.hero .sl-body{flex:none;overflow:visible;-webkit-mask-image:none;mask-image:none;padding:0;max-width:1100px}
.hero h1{margin:0;font:700 clamp(76px,9.5vw,176px)/1.15 var(--display);letter-spacing:0;color:var(--ink);text-shadow:0 8px 60px rgba(0,0,0,.6)}
.hero h1 .sub{display:block;margin-top:.12em;font-size:.4em;color:var(--copper-2)}
.slide.hero .kicker{color:var(--copper-2);font-size:1rem;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.hero .line{margin:.6em auto .2em;font:400 clamp(22px,1.4vw + 12px,38px)/1.6 var(--naskh);color:var(--ink)}
.hero .hp{margin:.2em auto 0;max-width:46em;color:var(--ink-2)}
.hero .settled{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.2em auto 0;max-width:980px;text-align:right}
.hero .settled div{padding:14px 18px;border-radius:var(--r-md);background:rgba(16,25,35,.78);-webkit-box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:.88rem}
.hero .settled b{display:block;color:var(--ink);font:700 1.05rem/1.5 var(--display)}
.hero .cta{margin-top:1.4em;display:inline-flex;gap:10px}
.cta .pill{height:46px;padding:0 24px;font-size:.95rem}
.cta .pill.solid{background:var(--ink);color:#0b1016}
.strip{display:flex;gap:10px;justify-content:center;margin:1.2em 0 0}
.strip button{width:86px;height:62px;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 0 0 1px var(--line-2),var(--shadow);transition:transform .3s}
.strip button:hover{transform:translateY(-4px)}
.strip img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- caption of the front document */
.cap{position:fixed;z-index:6;left:var(--gut);bottom:calc(var(--foot) + 14px);width:calc(100vw - var(--panel) - var(--gut) * 2 - 24px);max-width:720px;
  display:flex;flex-direction:column;gap:10px;pointer-events:auto;transition:opacity .5s}
.cap[hidden]{display:none}
body.hero .cap{width:min(470px,calc(50vw - 380px))}
body.hero .cap .nt{-webkit-line-clamp:2}
.cap .row{display:flex;gap:14px;align-items:flex-start}
.cap .thumbs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 4px;scrollbar-width:none}
.cap .thumbs::-webkit-scrollbar{display:none}
.cap .thumbs button{flex:none}
.cap .thumbs button{position:relative;width:62px;height:44px;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:#000;
  box-shadow:0 0 0 1px var(--line-2);opacity:.55;transition:opacity .3s,transform .3s,box-shadow .3s}
.cap .thumbs button:hover{opacity:.9;transform:translateY(-2px)}
.cap .thumbs button[aria-selected="true"]{opacity:1;box-shadow:0 0 0 2px var(--gold),0 6px 18px rgba(0,0,0,.5);transform:translateY(-2px)}
.cap .thumbs img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.2)}
.cap .thumbs span{position:absolute;inset:auto auto 3px 4px;padding:0 5px;border-radius:6px;background:rgba(11,16,22,.78);color:var(--ink);font-size:.62rem;line-height:1.5}
.pts li.link::after{content:"⤺";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:.8rem;opacity:0;transition:opacity .3s}
.pts li.link:hover::after,.pts li.cur::after{opacity:1}
.pts li.cur{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent)}
.cap .cnt{flex:none;display:grid;place-items:center;min-width:54px;height:30px;padding:0 10px;border-radius:999px;background:rgba(244,232,216,.1);font-size:.78rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cap .tx{min-width:0;padding:12px 16px 12px;border-radius:var(--r-md);background:rgba(11,16,22,.72);box-shadow:inset 0 0 0 1px var(--line)}
.cap .kd{color:var(--gold);font-size:.74rem;margin-bottom:2px}
.cap .tt{font:700 1.08rem/1.5 var(--display);color:var(--ink)}
.cap .nt{margin:4px 0 0;color:var(--ink-2);font-size:.84rem;line-height:1.75;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.cap .nav{flex:none;display:flex;gap:6px;margin-inline-start:auto}
.cap .nav .pill{height:32px;width:32px}

/* ---------- footer: the Tigris thread */
.foot{position:fixed;inset:auto 0 0 0;z-index:20;height:var(--foot);padding:0 var(--gut) 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;pointer-events:none}
.foot>*{pointer-events:auto}
.thread{position:relative;height:34px}
.thread svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.thread .base{fill:none;stroke:rgba(244,232,216,.14);stroke-width:2}
.thread .prog{fill:none;stroke:var(--river);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(124,196,190,.8))}
.thread button{position:absolute;top:50%;width:22px;height:22px;margin:-11px -11px 0 0;border:0;padding:0;background:none;cursor:pointer}
.thread button i{position:absolute;inset:6px;border-radius:50%;background:var(--ground);box-shadow:0 0 0 2px var(--dc);transition:transform .3s,background .3s}
.thread button.seen i{background:var(--dc)}
.thread button.cur i{transform:scale(1.7);background:var(--ink);box-shadow:0 0 0 2px var(--dc),0 0 16px var(--dc)}
.thread button.dim{opacity:.25}
.thread button:hover i{transform:scale(1.5)}
.thread .tip{position:absolute;bottom:30px;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;border-radius:999px;background:#000;color:var(--ink);font-size:.76rem;pointer-events:none;opacity:0;transition:opacity .2s}
.thread .tip.on{opacity:1}
.foot-row{display:flex;align-items:center;gap:14px;min-height:28px;font-size:.76rem;color:var(--ink-3)}
.src{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src b{color:var(--ink-2);font-weight:500}
.legend-btn{border:0;background:none;cursor:pointer;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px;font-size:.76rem}
.legend-btn .gs{display:inline-flex;gap:3px}
.legend-btn .g{width:18px;height:18px;font-size:.62rem}
.count{font:700 .9rem/1 var(--display);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- popovers, notes, lightbox */
.pop{position:fixed;z-index:30;padding:18px 20px;border-radius:var(--r-md);background:rgba(13,20,28,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow);font-size:.86rem}
.legend{bottom:calc(var(--foot) + 10px);left:var(--gut);max-width:420px}
.legend p{margin:6px 0;display:flex;gap:10px;align-items:center;color:var(--ink-2)}
.help{top:70px;left:var(--gut)}
.help dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:10px 0 0}
.help dt{font-family:ui-monospace,Menlo,monospace;color:var(--ink);direction:ltr;text-align:right}
.help dd{margin:0;color:var(--ink-2)}
.sheet{position:fixed;z-index:25;left:var(--gut);right:var(--gut);bottom:calc(var(--foot) + 8px);max-height:38vh;overflow:auto;padding:20px 24px;border-radius:var(--r-lg);
  background:rgba(13,20,28,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow)}
.sheet h4{margin:0 0 6px;font:700 1rem/1.4 var(--display);color:var(--copper-2)}
.sheet p{margin:0 0 12px;color:var(--ink-2);font:400 1.08rem/1.9 var(--naskh)}
.sheet .vis{font:400 .82rem/1.7 var(--body);color:var(--ink-3)}

.lb{position:fixed;inset:0;z-index:40;background:rgba(6,9,13,.96);display:grid;grid-template-rows:1fr auto}
.lb[hidden]{display:none}
.lb-stage{position:relative;overflow:hidden;cursor:grab;touch-action:none}
.lb-stage:active{cursor:grabbing}
.lb-stage img{position:absolute;left:50%;top:50%;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-cap{padding:14px var(--gut) 18px;display:grid;gap:8px;border-top:1px solid var(--line)}
.lb-t b{font:700 1.2rem/1.5 var(--display)}
.lb-t p{margin:2px 0 0;max-width:110ch;color:var(--ink-2);font-size:.92rem;line-height:1.8}
.lb-m{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;color:var(--ink-3);font-size:.76rem}
.lb-x{position:absolute;top:16px;left:var(--gut)}
.lb-hint{position:absolute;top:18px;right:var(--gut);margin:0;color:var(--ink-3);font-size:.76rem}

/* WebGL-less fallback: documents in the DOM */
.figs{display:none}
body.no3d .figs{display:grid;position:fixed;z-index:4;left:var(--gut);top:90px;bottom:calc(var(--foot) + 20px);width:calc(100vw - var(--panel) - var(--gut) * 2 - 24px);
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-content:start;overflow:auto}
.figs button{border:0;padding:0;border-radius:12px;overflow:hidden;background:#000;cursor:zoom-in}
.figs img{width:100%;height:160px;object-fit:cover;display:block}

/* ---------- small screens: documents above, text in a bottom sheet */
@media (max-width:900px),(max-aspect-ratio:1/1){
  :root{--panel:100vw;--foot:70px}
  .scrim{background:linear-gradient(to top,rgba(11,16,22,.97) 0%,rgba(11,16,22,.92) 52%,rgba(11,16,22,0) 70%)}
  .slide{top:46vh;left:var(--gut);right:var(--gut);width:auto}
  .slide.hero{top:auto}
  .cap{top:auto;bottom:calc(54vh + 6px);left:var(--gut);width:calc(100vw - 2*var(--gut))}
  .cap .nt{-webkit-line-clamp:2;font-size:.78rem}
  .cap .kd{display:none}
  .cap .thumbs button{width:44px;height:32px}
  .cap .tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cap .tt .code{display:none}
  body.hero .cap{display:none}
  .thread button i{inset:8px}
  .thread button.cur i{transform:scale(2)}
  body.no3d .figs{top:70px;bottom:56vh;width:calc(100vw - 2*var(--gut))}
  .tools .pill:not(.icon){display:none}
  .brand span{display:none}
  .hero .settled{grid-template-columns:1fr}
  .mx-grid{grid-template-columns:1fr}
  .src,.legend-btn{display:none}
  .bar{grid-template-columns:minmax(90px,38%) 1fr auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}