/* Atlas Wire overview of /gps/risks/ (WS-868 (D1, D6), WS-876 (1), WS-878 (1), (3), (5), (6), WS-888;
   sitebuild/worldrisks/overview.py). On world-risks-base.css (tokens --aw-*, shared classes). Desktop: the map, then
   the five columns side by side; phone (W-115): the five as a list first, the map under it with its numbers only,
   nothing wider than the screen. Classes and presentation attributes only: no inline style (CSP). */

.aw-ovhead{max-width:860px;margin:0 0 16px}
.aw-ovbody{display:flex;flex-direction:column}
.aw-ovbody>*{min-width:0}

/* ---------- the five columns */
.aw-tocwrap{margin:0 0 8px}
.aw-toclist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.aw-toc{border-top:3px solid var(--aw-ink);padding:8px 0 14px;min-width:0}
.aw-toc.is-acute{border-top-color:var(--aw-crim)}
.aw-toch{display:flex;align-items:baseline;gap:6px}
.aw-tocn{font:400 34px/1 var(--aw-serif);font-variant-numeric:oldstyle-nums;color:var(--aw-ink)}
.is-acute .aw-tocn{color:var(--aw-crim)}
.aw-toc h3{font:600 20px/1.2 var(--aw-serif);margin:6px 0 4px;letter-spacing:-.005em;overflow-wrap:break-word}
.aw-toc h3 a{text-decoration:none}
.aw-toc h3 a:hover{text-decoration:underline}
.aw-tocmeta{font:400 13px/1.4 var(--aw-sans);color:var(--aw-ink2);margin:0 0 8px}
.aw-lensw{font:italic 400 14px/1 var(--aw-serif)}
.aw-tocwhy{font:400 15px/1.5 var(--aw-serif);margin:0 0 10px;color:var(--aw-ink)}
.aw-tocwhy > span{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.aw-tocwhy > span + span{margin-top:4px;color:var(--aw-ink2);-webkit-line-clamp:2}
.aw-next{font-family:var(--aw-sans);font-size:13.5px}
.aw-tocstrong{border-top:1px solid var(--aw-rule);padding-top:8px}
.aw-tocstrong a,.aw-tocstrong b{display:block;font:500 italic 15.5px/1.35 var(--aw-serif);overflow-wrap:break-word}

/* ---------- the map: labels outside it, in two side columns at their leaders' heights */
.aw-ovmap{margin:8px 0 0;position:relative}
.aw-ovgrid{display:grid;grid-template-columns:minmax(0,1fr)}
.aw-ovlabs{display:none;list-style:none;margin:0;padding:0;position:relative}
.aw-ovsvg{min-width:0}
svg.aw-world{display:block;width:100%;height:auto}
.aw-sea{fill:var(--aw-sea);stroke:var(--aw-seaedge);stroke-width:.8}
.aw-grat{fill:none;stroke:var(--aw-grat);stroke-width:.4}
.aw-land path{stroke:var(--aw-paper);stroke-width:.4;stroke-linejoin:round}
.aw-land path:not(.hs):not(.ha){fill:var(--aw-land)}  /* hatched paths keep their fill="url(#...)" attribute */
.aw-hsbg{fill:var(--aw-hotbg)} .aw-hsln{stroke:var(--aw-hot);stroke-width:.7;opacity:.5}
.aw-habg{fill:var(--aw-crimbg)} .aw-haln{stroke:var(--aw-crim);stroke-width:.75;opacity:.75}
.aw-lensbg{fill:var(--aw-sea)}
.aw-lenshalo{fill:none;stroke:var(--aw-paper);stroke-width:3;opacity:.9}
.aw-lensring{fill:none;stroke:var(--aw-ink);stroke-width:1.5}
.aw-lensring.acute{stroke:var(--aw-crim);stroke-width:1.8}
.aw-lensin{fill:none;stroke:var(--aw-paper);stroke-width:.6;opacity:.9}
.aw-tring{fill:none;stroke:var(--aw-ink);stroke-width:1.1;stroke-dasharray:2 1.6}
.aw-lead{fill:none;stroke:var(--aw-ink);stroke-width:.6;opacity:.8}
.aw-lead.acute{stroke:var(--aw-crim)}
.aw-lead.dot{stroke-dasharray:.8 2;stroke-linecap:round;stroke-width:.9}
.aw-badge{fill:var(--aw-ink);stroke:var(--aw-paper);stroke-width:1.4}
.aw-badge.acute{fill:var(--aw-crim)}
.aw-badgen{fill:#fff;font:700 10px/1 var(--aw-sans)}
.aw-bdg{transform-box:fill-box;transform-origin:center}
a.aw-hot:focus-visible{outline:none}
a.aw-hot:focus-visible .aw-lensring,a.aw-hot:hover .aw-lensring{stroke-width:2.6}
a.aw-hot:focus-visible .aw-badge{stroke:var(--aw-ink);stroke-width:2.4}

.aw-ovlab{position:absolute;left:0;right:0;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}
.aw-ovlabs.l .aw-ovlab{align-items:flex-end;text-align:right;padding-right:8px}
.aw-ovlabs.r .aw-ovlab{align-items:flex-start;padding-left:8px}
.aw-ovn{font:700 11px/1 var(--aw-sans);color:var(--aw-paper);background:var(--aw-ink);border-radius:50%;width:18px;
 height:18px;display:inline-flex;align-items:center;justify-content:center}
.aw-ovlab.acute .aw-ovn{background:var(--aw-crim)}
.aw-ovname{font:600 11px/1.25 var(--aw-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--aw-ink)}
.aw-ovlab.acute .aw-ovname{color:var(--aw-crim)}
.aw-ovsub{font:italic 400 11.5px/1.3 var(--aw-sans);color:var(--aw-ink2)}
.aw-y0{top:0}.aw-y1{top:5%}.aw-y2{top:10%}.aw-y3{top:15%}.aw-y4{top:20%}.aw-y5{top:25%}.aw-y6{top:30%}
.aw-y7{top:35%}.aw-y8{top:40%}.aw-y9{top:45%}.aw-y10{top:50%}.aw-y11{top:55%}.aw-y12{top:60%}.aw-y13{top:65%}
.aw-y14{top:70%}.aw-y15{top:75%}.aw-y16{top:80%}.aw-y17{top:85%}.aw-y18{top:90%}.aw-y19{top:95%}.aw-y20{top:100%}

.aw-key{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;font:400 12.5px/1.3 var(--aw-sans);
 color:var(--aw-ink2);padding:8px 0 0}
.aw-key i{display:inline-block;width:14px;height:14px;margin-right:5px;vertical-align:-2px}
.aw-kl{border:1.5px solid var(--aw-ink);border-radius:50%;background:var(--aw-sea)}
.aw-kl.acute{border-color:var(--aw-crim)}
.aw-kh{background:repeating-linear-gradient(135deg,var(--aw-hotbg) 0 2px,var(--aw-hot) 2px 3px);opacity:.75}
.aw-kt{border:1.2px dashed var(--aw-ink);border-radius:50%}
.aw-hint{margin-left:auto;font:italic 400 14px/1.3 var(--aw-serif)}

/* ---------- what changed, also watching */
.aw-ovlow{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:30px}
.aw-rail ol{list-style:none;margin:0;padding:0;position:relative}
.aw-rail ol:before{content:"";position:absolute;left:70px;top:4px;bottom:4px;border-left:1px solid var(--aw-rule)}
.aw-rail li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:30px;padding:0 0 16px;position:relative}
.aw-rail li:before{content:"";position:absolute;left:66px;top:5px;width:9px;height:9px;border-radius:50%;
 background:var(--aw-paper);border:1.5px solid var(--aw-ink)}
.aw-ra{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.aw-ra time{font:600 12px/1.3 var(--aw-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--aw-ink)}
.aw-ra span{font:500 10px/1.2 var(--aw-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--aw-mute);
 text-align:right}
.aw-rb{display:flex;flex-direction:column;gap:3px;min-width:0}
.aw-rpl{display:flex;align-items:center;gap:6px;font:600 10.5px/1.2 var(--aw-sans);letter-spacing:.14em;
 text-transform:uppercase;color:var(--aw-mute)}
.aw-pin{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--aw-crim)}
.aw-rt{font:500 17px/1.3 var(--aw-serif);overflow-wrap:break-word}
a.aw-rt{text-decoration:none}
a.aw-rt:hover{text-decoration:underline}
.aw-rmove{font-size:12.5px;white-space:normal}
.aw-rfact{font:400 14px/1.45 var(--aw-serif);color:var(--aw-ink2)}
.aw-rhist{font:400 12px/1.4 var(--aw-sans);color:var(--aw-mute)}
.aw-also ul{list-style:none;margin:0;padding:0}
.aw-also li{display:flex;align-items:baseline;gap:6px;padding:9px 0;border-bottom:1px solid var(--aw-hair)}
.aw-an{font:500 17px/1.25 var(--aw-serif);min-width:0;overflow-wrap:break-word}
.aw-an a{text-decoration:none}
.aw-an a:hover{text-decoration:underline}
.aw-ac{font:italic 400 14px/1 var(--aw-serif);color:var(--aw-ink2);white-space:nowrap}
.aw-allrisks{font:400 14px/1.3 var(--aw-sans);margin:14px 0 0}

/* ---------- the event strip: C's alternating layout round today, in A's type */
.aw-events{margin-top:30px}
.aw-evs{list-style:none;margin:0;padding:0 0 0 18px;position:relative}
.aw-evs:before{content:"";position:absolute;left:4px;top:4px;bottom:4px;border-left:1px solid var(--aw-ink)}
.aw-ev{position:relative;padding:0 0 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.aw-ev:before{content:"";position:absolute;left:-18px;top:4px;width:9px;height:9px;border-radius:50%;
 background:var(--aw-paper);border:1.5px solid var(--aw-ink)}
.aw-ev.acute:before{border-color:var(--aw-crim);background:var(--aw-crim)}
.aw-ev.today:before{background:var(--aw-ink)}
.aw-ev time{font:600 12px/1.3 var(--aw-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--aw-ink)}
.aw-ev.today time{color:var(--aw-crim)}
.aw-evt{font:400 14.5px/1.4 var(--aw-serif);overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;
 -webkit-line-clamp:4;overflow:hidden}
.aw-evh{font:400 12px/1.3 var(--aw-sans);color:var(--aw-mute)}
.aw-evh em{font-style:normal;color:var(--aw-ink2)}
.aw-axis{display:none}

/* ---------- how we choose the five */
.aw-howto{margin-top:26px;font:400 15px/1.5 var(--aw-serif);color:var(--aw-ink2);max-width:760px}
.aw-howto summary{cursor:pointer;font:400 14px/1.4 var(--aw-sans);text-decoration:underline;text-underline-offset:3px;
 color:var(--aw-ink);min-height:44px;display:flex;align-items:center}
.aw-howto ol{margin:6px 0 4px;padding-left:20px}
.aw-howto li{margin:0 0 4px}

/* the full list under the overview: a quiet heading in the base type */
.aw-all h2{font:600 17px/1.2 var(--aw-serif);font-variant-caps:all-small-caps;letter-spacing:.13em;
 padding-bottom:8px;border-bottom:1px solid var(--aw-ink)}

/* ---------- wider screens */
@media (min-width:700px){
 .aw-toclist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}
 .aw-ovlow{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px}
}
@media (min-width:900px){
 .aw-ovmap{order:1;margin:0 0 26px}
 .aw-tocwrap{order:2}
 .aw-ovgrid{grid-template-columns:150px minmax(0,1fr) 150px}
 .aw-ovlabs{display:block}
 .aw-toclist{grid-template-columns:repeat(3,minmax(0,1fr))}
 .aw-tocn{font-size:44px}
 .aw h1{font-size:46px}
 .aw-thesis{font-size:21px}
 /* the strip: one row above the axis, one below, each event two columns wide from its own column */
 .aw-evs{display:grid;grid-template-rows:auto 16px auto;padding:0;column-gap:10px}
 .aw-evs:before{display:none}
 .aw-axis{display:block;grid-row:2;grid-column:1 / -1;border-top:1px solid var(--aw-ink);margin-top:7px}
 .aw-ev{padding:0 0 0 10px;border-left:1px solid var(--aw-rule)}
 .aw-ev:before{left:-5px}
 .aw-ev.top{grid-row:1;align-self:end;padding-bottom:6px}
 .aw-ev.top:before{top:auto;bottom:-14px}
 .aw-ev.bot{grid-row:3;padding-top:6px}
 .aw-ev.bot:before{top:-14px}
 .aw-n2{grid-template-columns:repeat(3,minmax(0,1fr))} .aw-n3{grid-template-columns:repeat(4,minmax(0,1fr))}
 .aw-n4{grid-template-columns:repeat(5,minmax(0,1fr))} .aw-n5{grid-template-columns:repeat(6,minmax(0,1fr))}
 .aw-n6{grid-template-columns:repeat(7,minmax(0,1fr))} .aw-n7{grid-template-columns:repeat(8,minmax(0,1fr))}
 .aw-n8{grid-template-columns:repeat(9,minmax(0,1fr))} .aw-n9{grid-template-columns:repeat(10,minmax(0,1fr))}
 .aw-c1{grid-column:1 / span 2} .aw-c2{grid-column:2 / span 2} .aw-c3{grid-column:3 / span 2}
 .aw-c4{grid-column:4 / span 2} .aw-c5{grid-column:5 / span 2} .aw-c6{grid-column:6 / span 2}
 .aw-c7{grid-column:7 / span 2} .aw-c8{grid-column:8 / span 2} .aw-c9{grid-column:9 / span 2}
}
@media (min-width:1100px){
 .aw-toclist{grid-template-columns:repeat(5,minmax(0,1fr))}
 .aw-toclist.aw-k4{grid-template-columns:repeat(4,minmax(0,1fr))}
 .aw-toclist.aw-k3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* phones and narrow tablets: no side labels or leaders, bigger numbers on the map (the list above is its key) */
@media (max-width:899px){
 .aw-lead{display:none}
 .aw-bdg{transform:scale(2.2)}
 .aw-hint{margin-left:0}
}
@media (max-width:599px){
 .aw-tocn{font-size:26px}
 .aw-toc{padding:6px 0 12px}
 .aw-toc h3{font-size:18px;margin-top:2px}
 .aw-tocwhy{font-size:14.5px}
 .aw-rail ol:before{left:58px}
 .aw-rail li{grid-template-columns:46px minmax(0,1fr);gap:26px}
 .aw-rail li:before{left:54px}
}