/* The pop-up (js/popup.js): a clicked time period's card, laid over the diagram at the right of the page, about a
   quarter of it, or along the bottom, above Pause and Replay, on narrow pages. Square corners throughout, like the crop
   marks it opens with. Uses radial.css's tokens. */

.pp-box{--side:right;position:fixed;z-index:5;top:50%;right:clamp(16px,2.4vw,40px);width:clamp(500px,42vw,660px);max-height:calc(100vh - 32px);overflow-y:auto;scrollbar-width:none;translate:0 -50%;pointer-events:none;display:flex;flex-direction:column;gap:30px;transition:width .45s cubic-bezier(.2,.7,.2,1)}   /* two compared periods: two cards, stacked, each as tall as its content */
.pp-box:not(.on){visibility:hidden}
.pp-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}

.pp{position:relative;pointer-events:auto;padding:18px 20px 18px;color:var(--ink);font-family:var(--serif)}
.pp.out{position:absolute;left:0;right:0;pointer-events:none}   /* the one going, where it was (top set as it goes), over the one coming */
.pp-sur{position:absolute;inset:0;border:1px solid rgba(26,26,24,.16);transition:border-color .3s ease;background:rgba(243,242,238,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px -18px rgba(60,55,45,.35);clip-path:inset(50% 0 50% 0)}
.pp-body{position:relative}

/* the corners: small marks just outside them (the card's faint outline, on its paper, replaces the corner brackets) */
.pp-br{display:none}
.pp-br.tl{top:0;left:0;border-width:1.5px 0 0 1.5px;--bx:-10px;--by:-10px}
.pp-br.tr{top:0;right:0;border-width:1.5px 1.5px 0 0;--bx:10px;--by:-10px}
.pp-br.bl{bottom:0;left:0;border-width:0 0 1.5px 1.5px;--bx:-10px;--by:10px}
.pp-br.br{bottom:0;right:0;border-width:0 1.5px 1.5px 0;--bx:10px;--by:10px}
.pp-tk{position:absolute;width:7px;height:7px;background:var(--ink-3);opacity:0}
.pp-tk.tl{top:-12px;left:-12px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.pp-tk.tr{top:-12px;right:-12px;clip-path:polygon(0 0,100% 100%,0 100%)}
.pp-tk.bl{bottom:-12px;left:-12px;clip-path:polygon(0 0,100% 0,100% 100%)}
.pp-tk.br{bottom:-12px;right:-12px;clip-path:polygon(0 0,100% 0,0 100%)}

/* the text */
.pp-when{margin:0 36px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:12px;line-height:1.4}
.pp-rec{color:var(--c);font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.pp-x{position:absolute;z-index:1;top:1px;right:3px;border:0;background:none;padding:2px 7px;font-family:var(--serif);font-size:32px;font-weight:400;line-height:1;color:var(--ink-2);cursor:pointer}
.pp-x:hover{color:var(--ink)}
.pp-x:focus-visible{outline:1.5px solid var(--ink);outline-offset:-1px}
.pp-x:active{translate:0 1px}
.pp-lead{margin:8px 0 14px;font-size:clamp(15px,1.1vw,17px);line-height:1.38;text-wrap:pretty}

/* the placeholders: a picture and two figures, three notes, the source */
.pp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,clamp(46px,4.2vw,64px)) clamp(40px,3.4vw,52px);gap:8px}
.pp-slot{position:relative;background:#cbc9c2}
.pp-slot.img{grid-column:span 2;grid-row:span 2}
.pp-slot span{position:absolute;left:8px;bottom:6px;font-size:9.5px;font-style:italic;color:var(--ink-2)}
.pp-src{margin:10px 0 0;font-size:10px;font-style:italic;color:var(--ink-3)}

/* the crop marks: hairlines across the page along the pop-up's edges, drawn as it opens, then faded */
.pp-guides{position:fixed;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.pp-g{position:absolute;display:block;background:var(--ink)}
.pp-g.h{left:0;right:0;height:1px;animation:ppGrow .5s cubic-bezier(.2,.7,.2,1) both,ppPart .5s .26s cubic-bezier(.65,0,.25,1) both,ppGuide 1.8s linear both}
.pp-g.v{top:0;bottom:0;width:1px;animation:ppGrowV .55s .5s cubic-bezier(.2,.7,.2,1) both,ppGuide 1.8s linear both}
@keyframes ppGrow{from{scale:0 1}to{scale:1 1}}
@keyframes ppGrowV{from{scale:1 0}to{scale:1 1}}
@keyframes ppPart{from{translate:0 0}to{translate:0 var(--dy)}}
@keyframes ppGuide{0%{opacity:0}8%{opacity:.42}62%{opacity:.3}100%{opacity:0}}

/* opening: the paper opens between the parting hairlines, the corners close in, then the text resolves line by line */
.pp.go .pp-sur{animation:ppOpen .5s .26s cubic-bezier(.65,0,.25,1) both}
.pp.go .pp-br{animation:ppBr .5s .56s cubic-bezier(.2,.7,.2,1) both}
.pp.go .pp-tk{animation:ppTk .4s .72s ease both}
.pp-in{opacity:0}
.pp.go .pp-in{animation:ppIn .75s calc(.62s + var(--i) * 70ms) cubic-bezier(.2,.7,.2,1) both}
@keyframes ppOpen{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0)}}
@keyframes ppBr{from{opacity:0;translate:var(--bx) var(--by)}to{opacity:1;translate:0 0}}
@keyframes ppTk{from{opacity:0;scale:.3}to{opacity:.9;scale:1}}
@keyframes ppIn{from{opacity:0;filter:blur(7px);translate:0 5px}to{opacity:1;filter:blur(0);translate:0 0}}

/* closing: the text blurs away, the paper shuts to a line, the corners go */
.pp.out .pp-in{animation:ppOut .22s ease both}
.pp.out .pp-sur{animation:ppShut .32s .1s cubic-bezier(.65,0,.25,1) both}
.pp.out .pp-br,.pp.out .pp-tk{animation:ppGone .2s ease both}
@keyframes ppOut{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(4px)}}
@keyframes ppShut{from{clip-path:inset(0)}to{clip-path:inset(50% 0 50% 0)}}
@keyframes ppGone{from{opacity:1}to{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .pp-box{transition:none}
  .pp-sur{clip-path:none}
  .pp.go .pp-in,.pp.go .pp-sur,.pp.go .pp-br,.pp.go .pp-tk{animation:ppFade .2s ease both}
}
@keyframes ppFade{from{opacity:0}to{opacity:1}}

/* narrow pages: along the bottom, above Pause and Replay */
@media (max-width:899px){
  .pp-box{--side:bottom;top:auto;bottom:100px;left:16px;right:16px;width:auto;translate:none}
  .pp{display:flex;flex-direction:column;max-height:38vh}   /* the header and the body (which scrolls) within the card's height */
  .pp-body{flex:1 1 auto;min-height:0;overflow:hidden auto;scrollbar-width:thin}
  .pp-grid{grid-template-rows:40px 40px 34px}
}

/* of two compared periods, the card for the one the molar shows now: its outline a little stronger */
.pp.now .pp-sur{border-color:rgba(26,26,24,.42)}
/* narrow pages, two cards: each shorter, so both fit above the buttons */
@media (max-width:899px){
  .pp-box{gap:22px}
  .pp-box.two .pp{max-height:calc(19vh + 6px)}
}

/* the gallery: a lead tile (picture or chart), a side chart, then KPIs; every tile opens to the card's full size */
.pp-gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(72px,10vh,92px);gap:8px}
.pp-gal[hidden]{display:none}
.pp-t{position:relative;grid-column:span 2;overflow:hidden;border:0;margin:0;padding:10px 11px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(26,26,24,.08);text-align:left;cursor:zoom-in;font:inherit;color:inherit;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;transition:box-shadow .25s ease,background-color .25s ease}
.pp-t:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--c),0 10px 22px -16px rgba(60,55,45,.6)}
.pp-t:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}
.pp-t.img{padding:0;background:#d8d4cb}
.pp-t.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pp-t.img:hover img{transform:scale(1.045)}
.pp-cap{position:relative;padding:22px 10px 7px;font-size:11px;font-style:italic;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgba(20,18,14,.7))}
.pp-t.chart{justify-content:flex-start}
.pp-tt{font-size:11.5px;line-height:1.25;color:var(--ink-2)}
.pp-t .pp-ch{flex:1;min-height:0;width:100%;height:100%}
.pp-num{font-size:clamp(22px,1.9vw,30px);font-weight:500;line-height:1;color:var(--c);font-variant-numeric:tabular-nums}
.pp-kl{font-size:11.5px;line-height:1.3;color:var(--ink-2);text-wrap:pretty}
.pp-pic{display:block;width:100%;height:auto;margin-bottom:auto}
.pp-ch{display:block;overflow:visible}
.pp-ch text{font-family:var(--serif);font-size:11px;fill:var(--ink-3)}
.pp-ch text.on{fill:var(--ink);font-weight:600}
.pp-ax{stroke:var(--ink-3);stroke-width:.8}
.pp-gr{stroke:rgba(26,26,24,.09)}
.pp-bar{transform-box:fill-box;transform-origin:50% 100%;animation:ppUp .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.35s + var(--d) * 45ms)}
.pp-barx{transform-box:fill-box;transform-origin:0 50%;animation:ppRight .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.35s + var(--d) * 60ms)}
.pp-draw{stroke-dasharray:1;animation:ppDraw 1.3s .3s cubic-bezier(.4,0,.2,1) both}
.pp-tooth{animation:ppFade .4s both;animation-delay:calc(.45s + var(--d) * 55ms)}
@keyframes ppUp{from{transform:scaleY(0)}}
@keyframes ppRight{from{transform:scaleX(0)}}
@keyframes ppDraw{from{stroke-dashoffset:1}}
@keyframes ppFade{from{opacity:0}}

/* a tile opened: Back, where it sits among the tiles, and arrows to the previous and next */
.pp-det{display:flex;flex-direction:column}
.pp-det[hidden]{display:none}
.pp-dbar{display:flex;align-items:center;gap:6px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid rgba(26,26,24,.12)}
.pp-back,.pp-step{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(26,26,24,.22);background:none;margin:0;padding:5px 9px;font:inherit;font-size:12px;color:var(--ink);cursor:pointer;transition:background-color .2s}
.pp-back:hover,.pp-step:hover{background:rgba(26,26,24,.06)}
.pp-step.nx svg{transform:scaleX(-1)}
.pp-cnt{flex:1;min-width:0;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.pp-dv.in{animation:ppDvIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes ppDvIn{from{opacity:0;transform:translateY(10px) scale(.98);filter:blur(4px)}}
.pp-fig{margin:0}
.pp-fig img{display:block;width:100%;max-height:min(52vh,460px);object-fit:contain;background:#e4e0d8}
.pp-fig figcaption{margin-top:7px;font-size:11.5px;font-style:italic;color:var(--ink-2)}
.pp-dh{margin:0 0 10px;font-size:15px;font-weight:500}
.pp-dp{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.pp-num.big{font-size:clamp(44px,4vw,64px)}
.pp-kl.big{margin:6px 0 16px;font-size:15px;color:var(--ink)}
.pp-dv .pp-pic{max-width:460px;margin:4px 0 6px}
@media (prefers-reduced-motion:reduce){.pp-bar,.pp-barx,.pp-draw,.pp-tooth,.pp-dv.in{animation:none}}


/* the primary charts (popup-content.js: stackEras, helix, ridge, radar, orbs) */
.pp-t .pp-c2{flex:1;min-height:0;width:100%;height:100%}
.pp-c2{display:block;width:100%;height:auto;overflow:visible}
.pp-dv .pp-c2{max-height:min(62vh,560px)}
.pp-c2 text{font-family:var(--serif);fill:#6b6862}
.pp-t.lead.chart{padding:10px 12px 8px}
.pp-dt{animation:ppFade .35s both;animation-delay:calc(.3s + var(--d) * 22ms)}
.pp-rise{transform-box:fill-box;transform-origin:50% 100%;animation:ppUp .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.35s + var(--d) * 70ms)}
.pp-grow{animation:ppScale 1.1s .35s cubic-bezier(.2,.7,.2,1) both}
.pp-orb{animation:ppScale .7s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.35s + var(--d) * 110ms)}
@keyframes ppScale{from{transform:scale(0);opacity:0}}
.pp-num.ink{color:var(--ink)}
.pp-num.red{color:#c0392b}
.pp-num small{font-size:.42em;margin-left:3px;font-weight:400}
@media (prefers-reduced-motion:reduce){.pp-dt,.pp-rise,.pp-grow,.pp-orb{animation:none}}


/* keep the card above the page controls; its body scrolls if it is taller */
@media (min-width:900px){.pp-box{top:16px;bottom:76px;height:auto;translate:none;justify-content:center;overflow:visible}.pp-box .pp{flex:0 1 auto;min-height:0;max-height:100%;display:flex;flex-direction:column;overflow:visible}.pp-box.two{gap:22px}.pp-box .pp-body{min-height:0;overflow:hidden auto;scrollbar-width:thin}}

/* tiles sized per pop-up (popup-content.js S()) */
.pp-t.chart{padding:10px 12px 8px}
.pp-t.tiny.chart svg text{display:none}
.pp-t.r1 .pp-pic{display:none}
.pp-t.r1.kpi{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px}
.pp-t.r1.kpi .pp-num{font-size:clamp(20px,1.6vw,26px)}
.pp-seg{transform-box:view-box;animation:ppFade .5s both;animation-delay:calc(.4s + var(--d) * 90ms)}
.pp-fadein{animation:ppFade .8s .6s both}
@media (prefers-reduced-motion:reduce){.pp-seg,.pp-fadein{animation:none}}

/* KPI boxes: plain, compact, text centred top to bottom */
.pp-t.kpi{cursor:default;justify-content:center}
.pp-t.kpi:hover{background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(26,26,24,.08)}
.pp-t.r1.kpi{flex-wrap:wrap;align-items:center;align-content:center;gap:2px 10px;padding:8px 12px}
.pp-t.r1.kpi .pp-kl{flex:1 1 9ch;min-width:0}
.pp-t.r1.kpi .pp-kl{font-size:11.5px;line-height:1.25}
.pp-t.tiny.kpi{flex-direction:column;align-items:flex-start;gap:2px}
.pp-t.tiny.kpi .pp-kl{flex:none}

/* every KPI box: number above its label, left-aligned, centred top to bottom */
.pp-gal > .pp-t.kpi{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;align-content:flex-start;justify-content:center;text-align:left;gap:3px;padding:10px 14px}
.pp-gal > .pp-t.kpi .pp-kl{flex:none;font-size:12.5px;line-height:1.3}
.pp-gal > .pp-t.kpi .pp-num{font-size:clamp(22px,1.7vw,28px)}

/* plate style: chart tiles on warm paper; motion for the new charts */
.pp-t.chart{background:#f6f1e4}
.pp-t.chart:hover{background:#f8f4e9}
.pp-dv.chart{background:#f6f1e4;padding:12px;margin:0 -4px}
.pp-circ{transform-box:fill-box;transform-origin:center;animation:ppScale .7s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(.35s + var(--d) * 50ms)}
.pp-sweep{animation:ppSweep 1.3s .3s cubic-bezier(.4,0,.2,1) both}
@keyframes ppSweep{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.pp-circ,.pp-sweep{animation:none}}
/* the template (popup.js SLIDES): three slides, one at a time in the same place, stepped with the arrows or the dots;
   grey placeholder boxes for the charts, the picture and its caption */
/* the card's margins are the same both sides (its own 20px); a slide leaves a lane, 36px, only on the side that has an
   arrow, so the arrows stay clear of the charts and a slide with no arrow on its left lines up with the text above */
.pp-stage.pv .pp-view{padding-left:36px}   /* the lane is inside the slide, so the arrows sit above the slides (.pp-arw z-index) to stay clickable */
.pp-stage.nx .pp-view{padding-right:36px}
/* the events slide leaves no lane: its pictures run out to the card's left margin, in line with the text above, and
   its arrow sits in the card's margin beside them (the events are always the last slide, so it has no next arrow) */
.pp-stage .pp-view:has(.pp-evs){padding-left:0;padding-right:0}
.pp-stage:has(.pp-view.on .pp-evs) .pp-arw.prev{left:-20px}
/* the slide on show takes its place in the card (which fits it); the others lie over it, unseen */
.pp-leads,.pp-views{position:relative;overflow:hidden}   /* the unseen slides add nothing to the card's height or scroll */
.pp-leads>*,.pp-views>*{position:absolute;left:0;right:0;top:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.pp-leads>.on,.pp-views>.on{position:relative;opacity:1;visibility:visible;transition:opacity .35s ease .05s,visibility 0s}
.pp-lead b{font-weight:600}
.pp-stage{position:relative}
.pp-view{display:flex;gap:6px;aspect-ratio:2.25}
.pp-ph{position:relative;flex:1;min-width:0;background:#adaca7}
.pp-ph.pp-cap{flex:0 0 30%;background:#d8d7d2}
.pp-ph span{position:absolute;left:10px;top:9px;font-size:10px;font-style:italic;color:var(--ink-2)}
.pp-arw{position:absolute;z-index:1;top:50%;translate:0 -50%;border:0;background:none;margin:0;padding:6px 4px;cursor:pointer;color:var(--ink-2);display:grid;place-items:center;transition:color .2s}
.pp-arw.prev{left:-4px}
.pp-arw.next{right:-4px}
.pp-arw:hover{color:var(--ink)}
.pp-arw:focus-visible,.pp-dot:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}
.pp-arw[disabled]{visibility:hidden}
.pp-arw svg{width:12px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.pp-dots{display:flex;justify-content:center;gap:9px;margin-top:12px}
.pp-dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--ink-2);background:none;margin:0;padding:0;cursor:pointer}
.pp-dot.on{background:var(--ink);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.pp-leads>*,.pp-views>*{transition:none}}
/* narrow pages (the pop-up along the bottom): lower boxes, so the dots and the source stay in view */
@media (max-width:899px){.pp-view{aspect-ratio:auto;height:clamp(84px,15vh,140px)}.pp-box.two .pp-view{height:clamp(60px,8vh,90px)}.pp-lead{margin-bottom:10px}}
/* a chart in a slide (js/popup-content.js): as tall as its drawing, in the page's type */
.pp-view:has(.pp-chart){aspect-ratio:auto;height:auto;align-items:flex-start}
.pp-chart{flex:1;min-width:0;display:flex;align-items:center}
.pp-src{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-svg{display:block;width:100%;height:auto;overflow:visible}
.pp-svg text{font-family:var(--serif);font-variant-numeric:tabular-nums}
/* two periods compared, in the header: both in the heavier weight, held still */
.pp-tm,.pp-tm.now{font-weight:600}
/* two compared: "Selected Times:" on its own line, then both periods and the record's name on the next */
.pp-when.pair{margin-right:0}   /* the second line runs below the close button, so it may take the card's full width */
.pp-when.pair .pp-pl{flex-basis:100%}   /* the record's name and "Selected Times:" first, the periods on a line of their own */
/* pathogens: the strand (js/popup-content.js, strandChart): its column heads, the strand (scrolling where two compared
   centuries lie far apart), and the line under it naming the organism pulled out */
.pd{width:100%}
.pd-sc.sc{overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
.pd-head .pd-ticks{display:none}
.pd-head.pulled .pd-ticks{display:inline}
.pd-head.pulled .pd-lh{display:none}
.pd-leads{transition:opacity .25s ease}
.pd-hit path{cursor:pointer}
.pd-row{cursor:pointer}
.pd-pull .pd-in{animation:pdIn .3s ease both}
@keyframes pdIn{from{opacity:0}to{opacity:1}}
.pd-hint{margin:8px 0 0;min-height:2.9em;font-size:12px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.pd-hint b{font-weight:600;color:var(--ink)}
.pd-back{border:0;background:none;padding:0;margin-left:4px;font:inherit;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:3px;cursor:pointer}
.pd-back:hover{color:var(--ink)}
.pd-strand{cursor:pointer}   /* the emptied strand while the dots are out: a click sends them home */
/* the hover note on a chart: dark, beside the pointer */
.pp-tip{position:fixed;z-index:20;pointer-events:none;max-width:280px;padding:7px 10px;background:var(--ink);color:#f3f2ee;font-family:var(--serif);font-size:12px;line-height:1.4}
.pp-tip[hidden]{display:none}
.pp-tip b{font-weight:600}
.pp-tip .m{font-size:11px;color:#bdbcb6}
/* the human events (pathogens): a picture on the left, its caption on the right; more than one, one under the other,
   scrolling */
.pp-view:has(.pp-evs){aspect-ratio:auto;height:auto}
.pp-evs{width:100%;display:flex;flex-direction:column;gap:16px}
.pp-evs.sc{max-height:236px;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain;padding-right:10px}
/* the picture takes the lane's 36px on top of its 40%, so the caption keeps its place and width, and the gap between
   them stays 14px: 40% of the slide 36px narrower, plus 36px, is 40% plus 21.6px */
.pp-ev{margin:0;display:grid;grid-template-columns:minmax(0,calc(40% + 21.6px)) minmax(0,1fr);gap:14px;align-items:start}
.pp-ev .pp-ph{flex:none;aspect-ratio:4/3}
.pp-evp{display:flex;flex-direction:column;gap:6px}
.pp-ref{display:block;margin-top:4px;font-size:10px;font-style:italic;line-height:1.35;color:var(--ink-3)}   /* a picture's line of reference */
.pp-ev img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#d8d7d2}   /* an event's picture, cropped to the placeholder's shape */
.pp-ev figcaption{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.pp-ev figcaption>b{display:block;font-size:15px;font-weight:600;line-height:1.25;color:var(--ink)}
.pp-ev figcaption p{margin:0}
.pp-ev figcaption p+p{margin-top:6px}
.pp-evr{font-size:10.5px;font-style:italic;color:var(--ink-3)}   /* an event's figure's source */
/* how the record bears an event out (every record's events): a rule at the left, and its first words, in the record's
   colour where it agrees, that colour desaturated where it partly agrees (mixed with a mid grey in Oklab, so its hue
   holds and its chroma falls; the Wear and LEH line's ink becomes a dark grey), and grey where it contradicts the
   historical record */
.pp-evv{--vc:#8a8983;padding-left:9px;border-left:2px solid var(--vc)}
.pp-evv.yes{--vc:var(--c,#1a1a18)}
.pp-evv.part{--vc:color-mix(in oklab,var(--c,#1a1a18) 45%,#7f7e79)}
.pp-ev figcaption .pp-evv>b:first-child{color:var(--vc)}
.pp-ev figcaption p b{font-weight:600;color:var(--ink)}
.pp-evk{display:block;margin-bottom:3px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pp-evk i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.pp-evd{display:block;margin:1px 0 6px;font-size:12px;color:var(--ink-3)}
@media (prefers-reduced-motion: reduce){.pd-leads{transition:none}.pd-pull .pd-in{animation:none}}
/* metals: the radial chart's petal (js/popup-content.js, bloomChart) and the line graph (lineChart), whose hovered
   metal stands out (zinc, barium, strontium and magnesium together), its line heavier and its 20th-century range shown */
.mb-p{mix-blend-mode:multiply}
.mb-v{cursor:default}
.mt-svg .mt-g{transition:opacity .25s}
.mt-svg.hov .mt-g:not(.on){opacity:.12}
.mt-ln{fill:none;stroke-width:1.8;stroke-linecap:round;transition:stroke-width .25s}
.mt-g.on .mt-ln{stroke-width:3}
.mt-hit{fill:none;stroke:transparent;stroke-width:16}
.mt-tail.m{opacity:0;transition:opacity .3s}
.mt-g.on .mt-tail.m{opacity:1}
@media (prefers-reduced-motion: reduce){.mt-svg .mt-g,.mt-ln,.mt-tail.m{transition:none}}
/* two cards stacked (the Wear and LEH line): one folds to its header where both would not fit (popup.js, folds()) */
.pp-fold{position:absolute;z-index:1;top:9px;right:44px;border:0;background:none;padding:6px 7px;color:var(--ink-2);cursor:pointer;line-height:0}
.pp-fold svg{width:13px;height:9px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.pp-fold:hover{color:var(--ink)}
.pp-fold:focus-visible{outline:1.5px solid var(--ink);outline-offset:-1px}
.pp.min .pp-fold svg{transform:rotate(180deg)}
.pp.min .pp-car,.pp.min .pp-src{display:none}
.pp.min .pp-when{cursor:pointer}
.pp:has(.pp-fold) .pp-when{margin-right:72px;padding-bottom:4px}   /* clear of the fold button and the X, and the body (its scroll bar) starts below them */
.pp:has(.pp-fold) .pp-lead{margin-top:4px}
.pp:has(.pp-fold) .pp-when.pair{margin-right:0}
.pp:has(.pp-fold) .pp-when.pair>span:nth-child(2){margin-right:62px}
/* molar wear: the landscape (wearChart) and Smith's stages (smithHTML) */
.wp-peak.on{cursor:pointer}
.wp-peak:not(.on){pointer-events:none}   /* the other periods' peaks are context: not picked, and a click on them is a click on the card */
.wp-body{fill-opacity:.14;stroke:none;transition:fill-opacity .3s}
.wp-mesh{fill:none;stroke-opacity:.85;stroke-width:.55;stroke-linejoin:round;transition:stroke-opacity .3s,stroke-width .3s}
.wp-peak.on .wp-mesh{stroke-opacity:1;stroke-width:.8}
.wp-peak:hover .wp-body,.wp-peak.sel .wp-body{fill-opacity:.32}
.wp-peak:hover .wp-mesh{stroke-width:1}
.wp-peak.sel .wp-mesh{stroke:var(--ink);stroke-width:1.1}
.wp-v{paint-order:stroke;stroke:var(--card);stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.wp-v.sel{font-size:13px}
.wp-smith{margin-top:6px}
.wp-sm{margin:4px 0 8px}
.wp-words{margin:0 0 8px;padding:0;list-style:none;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.wp-words li{display:flex;gap:8px}
.wp-words b{flex:0 0 12px;color:var(--ink);font-weight:600}
.wp-smith p{margin:0 0 6px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.wp-smith p b{color:var(--ink);font-weight:600}
.wp-smith .wp-note{font-size:11.5px;font-style:italic;color:var(--ink-3)}
/* stress lines: by age (lehAge) and by severity (lehSev), each linked to its cemeteries */
.lc-hit{fill:none;stroke:transparent;stroke-width:14}
.lc-p{transition:opacity .25s}
.lc-p.dim{opacity:.25}
.lc-row{cursor:default}
.lc-row.on rect:first-child{fill:rgba(26,26,24,.05)}
.lc-b{margin-top:8px}
.lc .pd-hint,.wp .pd-hint,.iv .pd-hint,.ca .pd-hint{min-height:0}
.ca-hit{cursor:default}
.ls-row,.ls-col{transition:opacity .25s}
.ls-row.dim,.ls-col.dim{opacity:.25}
.ls-b{margin-top:14px}
@media (prefers-reduced-motion: reduce){.pp-fold svg,.wp-body,.wp-mesh,.lc-p,.ls-row,.ls-col{transition:none}}
/* every card (popup.js): the header stays put and the body, from the line of text to the source, scrolls under it with
   a thin scroll bar wherever the card is taller than the pop-up's room, so nothing (text, charts, the slide dots, the
   source) runs past the card's edge and the margins stay the same; where it all fits, there is no scroll bar. Two cards
   stacked (the Wear and LEH line) share the pop-up's height, each scrolling inside its own frame */
@media (min-width:900px){
  .pp-box .pp .pp-body{flex:1 1 auto;min-height:0;overflow:hidden auto;scrollbar-width:thin;overscroll-behavior:contain}
  .pp-box.two .pp{flex:0 1 auto;min-height:0;max-height:calc(50% - 11px)}   /* half the height each (the gap is 22px) */
  .pp-box.two .pp.min~.pp,.pp-box.two .pp:has(~.pp.min){max-height:100%}   /* the whole height while the other is folded */
  .pp-box.two .pp.min{flex-shrink:0}   /* a folded card keeps its header's height whole; the open one gives way, and scrolls */
}
.pp-box.two .pp-view:has(.pp-chart),.pp-box.two .pp-view:has(.pp-evs){height:auto}
/* the scroll bar out in the card's right margin, under the X, with a clear gap between it and the slides (their arrows,
   charts and labels) */
.pp .pp-body{margin-right:-16px;padding-right:14px;scrollbar-gutter:stable;margin-left:-20px;padding-left:20px}   /* and out into the left margin, where the events slide's arrow sits, so the scroll does not clip it; the text stays in place */
.pp .pp-when{padding-bottom:4px}
.pp .pp-lead{margin-top:4px}
.pp .pp-evs.sc{max-height:none;overflow:visible;padding-right:0}   /* the card scrolls, so its events list does not scroll inside it */