/* Ordinary Departures — site styles. Black ground, white ink, small type, a wide screen. */
:root{--ink:#fff;--soft:#c3c6cd;--mute:#9a9ea7;--grey:#8a8e97;--rule:#2a2c32;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-meta:11px;--fs-dense:12px;--fs-body:13px;--fs-lead:15px}
*{box-sizing:border-box}
html{background:#000;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
body{margin:0;background:#000;overflow-x:hidden}
a{color:inherit}
#scroll{position:relative;width:100%;height:4200vh}
#stage{position:fixed;inset:0;overflow:hidden;background:#000}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- labels projected from the scene */
#labels{position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.lb{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:auto;cursor:pointer;line-height:1;transform-origin:0 0;display:none;user-select:none;-webkit-user-select:none}
.lb.on{display:block;will-change:transform,opacity}
.lb.t{font-family:var(--sans)}
.lb.t:hover,.lb.ev:hover,.lb.ec:hover{color:#fff!important;text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
.lb.ev{color:#aeb2ba}
.lb.ec{color:#9a9ea7}
.lb.era{font-weight:500;color:#fff;pointer-events:none;line-height:1.12}
.lb.era small{display:block;font-family:var(--mono);font-weight:400;font-size:.42em;color:var(--mute);margin-top:.3em}
.lb.row{font-weight:500;color:#fff;pointer-events:none;line-height:1.05}
.lb.row small{display:block;font-family:var(--sans);font-weight:400;font-size:.38em;color:var(--mute);margin-top:.4em}
.lb.ic{color:#e6e8ec;line-height:1.2}
.lb.ic small{display:block;font-family:var(--mono);font-size:.83em;color:#a3a7b0;margin-top:.3em}
.lb.cl{font-family:var(--mono);color:#b4b8c0;border:1px solid #6b6f78;border-radius:50%;width:1.9em;height:1.9em;align-items:center;justify-content:center;background:#000}
.lb.cl.on{display:flex}
.lb.cl:hover{border-color:#fff;color:#fff}
.lb.evh,.lb.ft,.lb.arg{color:#fff;pointer-events:none}
.lb.ft{font-weight:500}
.lb.mono{font-family:var(--mono);color:var(--mute);pointer-events:none}
.lb.stp small{display:block;font-family:var(--mono);font-size:.5em;color:var(--mute);font-weight:400;margin-top:.32em;letter-spacing:.02em}
.lb.endm{font-weight:500;color:#fff;pointer-events:none;line-height:1.1}
.lb.endm i{display:inline-block;width:.6em;height:.6em;background:#f0a24b;margin-right:.5em;vertical-align:.02em}
.lb.endm small{display:block;font-weight:400;font-size:.5em;color:var(--mute);margin-top:.4em;padding-left:1.2em;white-space:normal;width:16em;line-height:1.35}
.lb.bx{color:var(--soft);background:rgba(10,10,12,.9);padding:.32em .6em;border-radius:.4em;font-size:inherit;transition:opacity .15s}
.lb.bx b{font-weight:500;color:#fff;margin-right:.5em}
.lb.bx:hover{color:#fff}
.lb.bx.mono2{font-family:var(--mono);color:var(--mute)}
.lb.mk{width:1em;height:1em;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 0 0 .25em rgba(0,0,0,.6)}
.lb.mk.on{display:block}
.lb.mk.hollow{background:#000;border:.16em solid #c3c6cd}
.lb.mk:hover{background:#f0b95e;border-color:#f0b95e}
.lb.qm{font-weight:500;color:#fff;text-align:center;pointer-events:none;line-height:1;flex-direction:column;align-items:center}
.lb.qm.on{display:flex}
.lb.qt{color:var(--soft);white-space:normal;width:12em;line-height:1.35;pointer-events:none;background:rgba(10,10,12,.9);padding:.35em .55em;border-radius:.4em}
.lb.dot{width:1em;height:1em;background:#fff;border-radius:50%;pointer-events:none}
/* a case card beside its step: clean, rounded, opens in place */
.lb.ccard{width:300px;padding:16px 18px 18px;background:rgba(10,10,12,.92);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.55);white-space:normal;line-height:1.4;transition:width .35s ease,box-shadow .3s}
.lb.ccard:hover{box-shadow:0 14px 48px rgba(0,0,0,.7)}
.lb.ccard .n{font-size:13px;color:#fff;font-weight:500}
.lb.ccard .m{font-family:var(--mono);font-size:10px;color:var(--mute);margin-top:5px;line-height:1.45}
.lb.ccard .ims{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.lb.ccard .ims img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;height:auto;background:#111;border-radius:6px}
.lb.ccard .t{font-size:12px;color:var(--soft);margin-top:12px;line-height:1.55}
.lb.ccard .more{display:none}
.lb.ccard.open{width:520px}
.lb.ccard.open .more{display:block;margin-top:14px}
.lb.ccard .more .dg{margin:0 0 14px}
.lb.ccard .more .dg svg{display:block;width:100%;height:auto}
.lb.ccard .more .ctx{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lb.ccard .more .lab{font-family:var(--mono);font-size:10px;color:var(--mute);margin:0 0 3px}
.lb.ccard .more p{font-size:11.5px;line-height:1.55;color:var(--soft);margin:0 0 10px}
.lb.ccard .more p.src{font-family:var(--mono);font-size:10px;color:var(--mute)}

/* ---- header: dashes, and the title of the current step */
#hd{position:absolute;left:0;right:0;top:0;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;opacity:0;visibility:hidden;z-index:5}
#hd .dashes{display:flex;gap:14px;align-items:flex-end;height:18px}
#hd .dash{width:14px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}
#hd .dash i{display:block;width:1px;height:10px;background:#4a4d55;transition:background .2s,height .2s}
#hd .dash:hover i{background:#c3c6cd;height:14px}
#hd .dash.on i{background:#fff;height:16px}
#hd .cur{font-family:var(--mono);font-size:var(--fs-meta);color:var(--mute);letter-spacing:.06em;height:14px;line-height:14px}
#hd .cur.hover{color:var(--soft)}

/* ---- the arrows */
#arrows{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:22px;opacity:0;visibility:hidden;z-index:5}
#arrows button{background:none;border:0;color:#4a4d55;font-family:var(--mono);font-size:15px;cursor:pointer;padding:6px 10px;transition:color .2s;line-height:1}
#arrows button:hover{color:#fff}

/* ---- landing */
#landing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;pointer-events:none}
#landing .eb{font-family:var(--mono);font-size:var(--fs-meta);color:var(--mute);letter-spacing:.08em;margin-bottom:34px}
#landing h1{font-weight:300;font-size:clamp(40px,6.4vw,92px);letter-spacing:-.035em;line-height:1;margin:0 0 20px;font-variation-settings:"opsz" 32}
#landing .st{font-weight:300;font-size:clamp(14px,1.25vw,18px);color:var(--soft);max-width:34em;margin:0;line-height:1.4}

/* ---- the text screens */
#premise,#screens{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.pr{position:absolute;width:min(86vw,46ch);font-weight:300;font-size:var(--fs-lead);line-height:1.65;color:var(--soft);opacity:0;visibility:hidden}
.pr .eb{font-family:var(--mono);font-size:var(--fs-meta);color:var(--mute);letter-spacing:.08em;margin-bottom:18px;font-variation-settings:normal}
.pr.q{width:min(88vw,34ch);font-size:clamp(20px,2vw,28px);line-height:1.3;letter-spacing:-.01em;color:#fff;font-variation-settings:"opsz" 32}
#screens .pr{font-size:clamp(15px,1.4vw,19px);line-height:1.5;color:#e6e8ec;width:min(86vw,44ch)}
#screens .pr.q{font-size:clamp(20px,2vw,28px);width:min(88vw,30ch);color:#fff}
#tbc{font-family:var(--mono);font-size:var(--fs-body)!important;color:var(--mute)!important;letter-spacing:.08em;text-align:center;width:max-content!important}
#tbc .links{display:flex;gap:12px;justify-content:center;margin-top:30px;pointer-events:auto}
#tbc .links button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--soft);background:none;border:1px solid #3a3d45;border-radius:999px;padding:8px 16px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
#tbc .links button:hover{color:#fff;border-color:#c3c6cd}
#qcards{position:absolute;inset:0;pointer-events:none}
#qcards .qcard{position:absolute;left:4vw;bottom:52px;width:min(80vw,42ch);opacity:0;visibility:hidden;padding:24px 28px 26px;border-radius:16px;background:rgba(0,0,0,.86);box-shadow:0 0 70px 46px rgba(0,0,0,.86)}
.qcard .eb{font-family:var(--mono);font-size:var(--fs-meta);color:var(--mute);letter-spacing:.08em;margin-bottom:12px}
.qcard p{margin:0;font-size:clamp(14px,1.15vw,16.5px);line-height:1.55;color:#fff;font-weight:300}
/* the six questions, listed over the dimmed map */
#qlist{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden}
#qlist .in{width:min(92vw,106ch);padding:28px 34px 30px;border-radius:16px;background:rgba(0,0,0,.86);box-shadow:0 0 70px 46px rgba(0,0,0,.86);pointer-events:auto}
#qlist .eb{font-family:var(--mono);font-size:var(--fs-meta);color:var(--mute);letter-spacing:.08em;margin-bottom:20px}
#qlist ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:56px;row-gap:20px}
#qlist li{display:grid;grid-template-columns:2.5ch 1fr;gap:14px;cursor:pointer;color:var(--soft);transition:color .2s}
#qlist li:hover{color:#fff}
#qlist li .k{font-family:var(--mono);font-size:var(--fs-meta);color:var(--mute);padding-top:.4em;letter-spacing:.04em}
#qlist li p{margin:0;font-size:14px;line-height:1.55;font-weight:300}
/* the framework, explained in the band under the map: title, text, legend */
#fwtext{position:absolute;left:0;right:0;bottom:54px;pointer-events:none}
#fwtext .fwp{position:absolute;left:4vw;right:4vw;bottom:0;display:grid;grid-template-columns:minmax(0,30ch) minmax(0,54ch) auto;column-gap:56px;align-items:start;opacity:0;visibility:hidden}
#fwtext .eb{font-family:var(--mono);font-size:var(--fs-meta);color:var(--mute);letter-spacing:.08em;margin-bottom:8px}
#fwtext h3{margin:0;font-weight:400;font-size:clamp(15px,1.25vw,18px);line-height:1.3;letter-spacing:-.01em;color:#fff;font-variation-settings:"opsz" 32}
#fwtext p{margin:0;font-size:12.5px;line-height:1.6;color:var(--soft);font-weight:300;padding-top:2px}
#fwtext .lg{display:grid;grid-template-columns:26px auto 26px auto;gap:8px 10px;align-items:center;font-family:var(--mono);font-size:10px;line-height:1.3;color:var(--mute);padding-top:4px}
#fwtext .lg i{display:block;width:26px;height:10px;position:relative}
#fwtext .lg i.dot::before{content:"";position:absolute;left:8px;top:0;width:10px;height:10px;border-radius:50%;background:#fff}
#fwtext .lg i.dot.hollow::before{background:#000;border:1.5px solid #c3c6cd;box-sizing:border-box}
#fwtext .lg i.pr{background:linear-gradient(#4a9c92,#4a9c92) center/100% 2px no-repeat}
#fwtext .lg i.dsh{background:repeating-linear-gradient(90deg,#fff 0 4px,transparent 4px 8px) center/100% 1.5px no-repeat}
#fwtext .lg i.dsh.grey{background:repeating-linear-gradient(90deg,#9a9ea7 0 6px,transparent 6px 9px) center/100% 1.5px no-repeat}
#fwtext .lg i.ring::before{content:"";position:absolute;left:7px;top:-1px;width:12px;height:12px;border-radius:50%;border:1px dashed #fff;box-sizing:border-box}
#disc{position:absolute;top:64px;left:0;right:0;bottom:0;opacity:0;visibility:hidden;z-index:4}
#disc section{transition:none!important}

/* ---- hover reveal on an image, and the definition tip */
#tileHover{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .15s;text-align:center;transform:translate(-50%,-50%);font-size:12px;color:#fff;line-height:1.35;width:max-content;max-width:170px;white-space:normal;z-index:3}
#tileHover small{display:block;font-family:var(--mono);font-size:10px;color:var(--soft);margin-top:4px}
#tileHover.on{opacity:1}
#tip{position:absolute;left:0;top:0;pointer-events:none;font-size:var(--fs-dense);line-height:1.5;color:var(--soft);width:max-content;max-width:34ch;white-space:normal;background:rgba(10,10,12,.92);padding:9px 12px;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.5);opacity:0;transition:opacity .12s;z-index:6}
#tip.on{opacity:1}

/* ---- the card that opens in place */
#card{position:fixed;left:0;top:0;width:340px;background:rgba(10,10,12,.94);border-radius:12px;box-shadow:0 14px 48px rgba(0,0,0,.6);padding:16px 18px 18px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:8;cursor:default}
#card.on{opacity:1;visibility:visible}
#card.wide{width:420px}
#card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin-bottom:12px;background:#111}
#card .eb{font-family:var(--mono);font-size:10px;color:var(--mute);letter-spacing:.06em;margin-bottom:8px}
#card h2{font-weight:500;font-size:14px;letter-spacing:-.01em;line-height:1.25;margin:0 0 8px;color:#fff}
#card .meta{font-family:var(--mono);font-size:10px;color:var(--mute);margin:-2px 0 10px;line-height:1.45}
#card p{font-size:var(--fs-dense);line-height:1.55;color:var(--soft);margin:0 0 8px}
#card .src{font-family:var(--mono);font-size:10px;color:var(--mute);line-height:1.5}
/* the two paragraphs, side by side */
.pr.two{width:min(90vw,84ch);display:grid;grid-template-columns:1fr 1fr;gap:48px;font-size:14px;line-height:1.65}