/* Readability and interaction refinements for the economic crises story. */
main section[id]{scroll-margin-top:80px}
header.nav .nav-links a{position:relative;transition:color .2s ease}
header.nav .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--boom);transform:scaleX(0);transition:transform .2s ease}
header.nav .nav-links a.is-active{color:var(--boom)}
header.nav .nav-links a.is-active::after{transform:scaleX(1)}
.d-fig:has(img[src$="george-soros-2011.jpg"]){flex-shrink:0;height:clamp(240px,36vh,320px)}
.d-fig img[src$="george-soros-2011.jpg"]{object-fit:contain;object-position:center}
dialog{opacity:0;transform:translateY(12px) scale(.985);transition:opacity .2s ease,transform .2s ease,display .2s allow-discrete,overlay .2s allow-discrete}
dialog[open]{opacity:1;transform:translateY(0) scale(1)}
dialog::backdrop{opacity:0;transition:opacity .2s ease,display .2s allow-discrete,overlay .2s allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:translateY(12px) scale(.985)}dialog[open]::backdrop{opacity:0}}
@media(prefers-reduced-motion:reduce){dialog,dialog::backdrop{transition:none}}
.kicker .mono{font-size:calc(.74rem + 3px);line-height:1.6}
.sec-head .lede{font-size:calc(1.15rem + 1px)}
.step{min-height:46vh;padding-block:32px}
.step .mono{font-size:calc(.74rem + 2px);color:var(--paper-2)}
.step::before{font-size:.85rem;width:32px;height:32px}
.step p{font-size:19px}.step p b{font-weight:700}
.mech p,.cmp p{font-size:17px}
.mech .eg{font-size:12px;color:var(--paper-2)}
.mech .eg a{color:var(--boom);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:3px}
.era-head .big{letter-spacing:.005em}
.d-body .blk .mono{font-size:calc(.74rem + 4px);letter-spacing:.07em}
.d-body p{font-size:calc(1.02rem + 1px)}
.theories p{font-size:17px}.theories .mono{font-size:13px}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;overflow:visible;scroll-snap-type:none}
.shot{margin:0;width:auto}.shot .ph{display:block;text-align:left;width:100%;color:var(--paper)}
.shot .ph:hover img{transform:scale(1.035)}
.shot .yr{font-size:clamp(1.6rem,3vw,2.6rem)}
.shot .yr{right:18px}
.shot .yr small{color:var(--paper);font-family:var(--display);font-size:20px;line-height:1.2;font-weight:700;font-variation-settings:"opsz" 32,"wdth" 100;letter-spacing:.01em;text-transform:none;margin-top:9px;text-shadow:0 2px 5px #000,0 0 8px #000}
.shot h3{font-size:15px;font-weight:500;line-height:1.4;color:var(--paper-2);letter-spacing:0}
.shot .cr span{color:var(--paper-2);font-weight:600}
.shot .ph::after{background:linear-gradient(180deg,transparent 35%,rgba(10,12,17,.95))}
.strip-nav{display:none}.shot .open{pointer-events:none}
.cmp label{display:block;font-family:var(--display);font-size:14px;color:var(--paper-2);margin-bottom:12px}
.cmp select{display:block;width:100%;margin-top:7px;background:var(--ink-3);color:var(--paper);border:1px solid var(--line-2);border-radius:8px;padding:10px;font:inherit}
.metric-na{font-family:var(--display);font-size:13px;color:var(--paper-2);grid-column:2 / -1}
.comparison-note{color:var(--paper-2);font-size:17px;margin-bottom:24px}
.recovery-table{width:100%;border-collapse:collapse;font-family:var(--display);font-size:15px;min-width:580px}
.recovery-table th{text-align:left;color:var(--paper);padding:14px 12px;font-weight:600}
.recovery-table td{padding:18px 12px;border-top:1px solid var(--line)}
.recovery-table th:first-child{width:25%}.recovery-table td:nth-child(2),.recovery-table td:nth-child(3){width:37.5%}
.recovery-table small{display:block;color:var(--paper-2);font-size:13px;margin-top:4px}
.recovery-table .track{height:7px;background:var(--ink-4);border-radius:5px;margin-top:9px}
.recovery-table .fill{height:100%;background:var(--bust);border-radius:5px}.recovery-table td:last-child .fill{background:var(--calm)}
.hero h1 .w:nth-child(n){transform:none;animation:headline-fade .8s ease both}
.hero h1 .w:nth-child(2){animation-delay:.2s}
.hero h1 .w:nth-child(3){animation-delay:.4s}
@keyframes headline-fade{from{opacity:0}to{opacity:1}}
/* A single sequence: inflate with the rising market, rupture, then collapse. */
.mark .ring{transform-box:view-box;transform-origin:50% 50%;stroke-dasharray:100 0;stroke-dashoffset:0;animation:bubble-inflate-burst 5s linear both}
.mark .up{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 2.7s .55s cubic-bezier(.35,0,.65,1) forwards}
.mark .down{stroke-dasharray:100;stroke-dashoffset:100;animation:draw .65s 3.3s cubic-bezier(.5,0,.9,.5) forwards}
.mark .dot{animation:pop .25s 3.95s ease forwards}
.mark .burst-rays{fill:none;stroke:var(--paper);stroke-width:1.4;stroke-linecap:round;opacity:0;transform-box:view-box;transform-origin:50% 50%;animation:bubble-rays 5s linear both}
.mark-cap{animation:headline-fade .6s 4s ease both}
@keyframes bubble-inflate-burst{
  0%{transform:scale(.18);opacity:.25;stroke-dasharray:100 0}
  15%{transform:scale(.35);opacity:.65}
  45%{transform:scale(.72);opacity:1;stroke-dasharray:100 0}
  65%{transform:scale(1.1);opacity:1;stroke-dasharray:100 0}
  66%{transform:scale(1.12);opacity:1;stroke-dasharray:100 0}
  67%{transform:scale(1.1);opacity:.95;stroke-dasharray:9 11}
  78%{transform:scale(.76);opacity:.5;stroke-dasharray:5 15}
  92%,100%{transform:scale(.18);opacity:0;stroke-dasharray:2 18}
}
@keyframes bubble-rays{
  0%,65%{opacity:0;transform:scale(.9)}
  67%{opacity:1;transform:scale(.94)}
  82%,100%{opacity:0;transform:scale(1.03)}
}
@media(prefers-reduced-motion:reduce){
  .mark .ring{animation:none;transform:none;opacity:1;stroke-dasharray:82 18;stroke-dashoffset:3.5}
  .mark .up,.mark .down{animation:none;stroke-dashoffset:0}
  .mark .dot,.mark-cap{animation:none;opacity:1;transform:none}
  .mark .burst-rays{animation:none;opacity:0}
}
@media(max-width:1000px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.strip{grid-template-columns:1fr}.step{min-height:0}.d-body .blk .mono{font-size:15px}}
@media(max-width:540px){header.nav .brand{flex-shrink:1;min-width:0}header.nav .brand svg{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.hero h1 .w:nth-child(n){animation:none;opacity:1;transform:none}.shot .ph:hover img{transform:none}}