/* Strategic Theaters. One stylesheet, hand written, scoped to .st-scope so it
   cannot restyle the site and the theme cannot reach into it. No build step. */

.st-scope{
  --bg:#D8D2C6; --panel:#F0EBDD; --dark:#202725; --tint:rgba(53,95,82,.14);
  --head:#11130f; --body:#1f221d; --data:#171a16; --cred:#514b40; --mark:#355F52;
  --allied:#1F4E43; --allied-fill:#4C766B; --axis:#663A31; --axis-fill:#A56855;
  --signal:#8A6D2F; --rule:#BBB3A5; --rule-2:#8C887F;
  --disp:Baskerville,"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
  --rail-h:158px;
  background:var(--bg); color:var(--body);
  font-family:var(--sans); font-size:16px; font-weight:400; line-height:1.68;
  overflow-x:clip;
}
.st-scope *,.st-scope *::before,.st-scope *::after{box-sizing:border-box}
.st-scope img{max-width:100%;display:block}
.st-scope p{max-width:70ch;color:var(--body)}
.st-scope h1,.st-scope h2,.st-scope h3,.st-scope h4{
  font-family:var(--disp);color:var(--head);font-weight:600;letter-spacing:-.01em;margin:0}
.st-scope figure{margin:0}
.st-scope figcaption{font-family:var(--mono);color:var(--cred);font-size:10.5px;
  line-height:1.7;letter-spacing:.04em;padding-top:9px}
.st-scope figcaption a{color:var(--cred)}
.st-scope figcaption b{color:var(--data);font-weight:400}
.st-scope .wrap{max-width:1320px;margin:0 auto;padding:0 26px}
.st-scope :focus-visible{outline:2px solid var(--mark);outline-offset:2px}

/* Break out of the theme container so the hero and console run edge to edge. */
.st-scope > .hero,.st-scope > .console{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ---------- hero ---------- */
.st-scope .hero{position:relative;height:clamp(500px,80vh,820px);overflow:hidden;background:var(--head)}
.st-scope .hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;filter:grayscale(.35) contrast(1.06)}
/* The lower half carries the text, so the scrim is weighted there rather than
   spread evenly. A grayscale photograph gives no colour separation at all, so
   the type needs the contrast from the overlay, not from the picture. */
.st-scope .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(28,21,16,.58) 0%,rgba(28,21,16,.20) 26%,rgba(28,21,16,.62) 58%,
  rgba(28,21,16,.86) 80%,rgba(28,21,16,.96) 100%)}
.st-scope .hero-inner{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:50px}
.st-scope .hero h1{font-size:clamp(34px,6.6vw,80px);line-height:1.02;color:#fff;
  margin:0 0 20px;max-width:14ch;text-shadow:0 2px 24px rgba(44,33,25,.55)}
.st-scope .hero .sub{font-family:var(--mono);font-size:clamp(10.5px,1.4vw,13px);
  letter-spacing:.16em;color:#D6C7B5;margin:0 0 20px;text-shadow:0 1px 10px rgba(44,33,25,.6)}
/* White, not the panel grey. These sit on a photograph, most of them
   desaturated, and #CBD2CE against a light patch of sky is unreadable. */
.st-scope .hero .lede{max-width:57ch;font-size:17px;color:rgba(255,255,255,.94);margin:0;
  font-weight:400;text-shadow:0 1px 14px rgba(44,33,25,.55)}
.st-scope .hero-credit{position:absolute;right:26px;bottom:12px;z-index:3;font-family:var(--mono);
  font-size:9px;letter-spacing:.08em;color:rgba(203,210,206,.56);text-align:right;
  max-width:46ch;line-height:1.6}
.st-scope .hero-credit a{color:rgba(203,210,206,.56)}

/* ---------- facts ---------- */
.st-scope .facts{display:grid;grid-template-columns:repeat(5,1fr);
  border-bottom:1px solid var(--rule-2);margin:0}
.st-scope .fact{padding:18px 22px 20px;border-right:1px solid var(--rule)}
.st-scope .fact:last-child{border-right:0}
.st-scope .fact dt{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--cred);margin:0 0 7px}
.st-scope .fact dd{margin:0;font-family:var(--disp);font-size:22px;line-height:1.1;
  font-weight:600;color:var(--head)}
.st-scope .fact dd small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--body);
  font-weight:400;margin-top:5px;line-height:1.6}

/* ---------- sections ---------- */
.st-scope .sec{padding:70px 0 0}
.st-scope .sechead{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--rule-2);
  padding-bottom:11px;margin-bottom:26px;flex-wrap:wrap}
.st-scope .sechead h2{font-size:23px}
.st-scope .sechead .note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--cred)}
.st-scope .twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  margin-bottom:34px}
.st-scope .twocol p{max-width:none}
.st-scope .lic{margin-top:30px;font-family:var(--mono);font-size:10px;line-height:2;
  letter-spacing:.02em;color:var(--cred);border-top:1px solid var(--rule-2);padding-top:20px;max-width:none}

/* ---------- console ---------- */
.st-scope .mapgroup{display:contents}
/* Sized so the map, the bar and the dates are all on screen together. The floor
   was 760px, which is taller than a 720px laptop viewport, so the rail was cut
   off on exactly the machines most likely to be reading this. */
.st-scope .console{position:relative;height:clamp(600px,92vh,1060px);min-height:540px;
  background:var(--bg);border-bottom:1px solid var(--rule-2);overflow:hidden}
.st-scope .st-map{position:absolute;inset:0 0 var(--rail-h) 0;min-height:320px}
.st-scope .leaflet-container{font-family:var(--mono);background:#C9C5BA}
.st-scope .leaflet-tile-pane{filter:grayscale(.68) sepia(.16) saturate(.58) contrast(.93) brightness(.98)}
.st-scope .leaflet-control-attribution{font-size:9px;background:rgba(220,224,221,.88);color:var(--cred)}
.st-scope .leaflet-control-attribution a{color:var(--cred)}
.st-scope .has-historical-map .leaflet-container{background:#D8D2C6}
.st-scope .leaflet-stHistoricalBase-pane img{image-rendering:auto}
.st-scope .st-basemap-status{max-width:190px;padding:6px 9px;border:1px solid var(--rule-2);
  background:rgba(220,224,221,.92);color:var(--data);font-family:var(--mono);font-size:8.5px;
  line-height:1.35;letter-spacing:.08em;text-transform:uppercase;text-align:right}
.st-scope .st-hist-label-icon{width:0!important;height:0!important;border:0!important;
  background:transparent!important;pointer-events:none!important}
.st-scope .st-hist-label{position:absolute;display:block;transform:translate(-50%,-50%);white-space:nowrap;
  color:var(--head);font-family:var(--mono);font-size:9px;line-height:1;padding:3px 5px;
  background:rgba(220,224,221,.72);border:1px solid rgba(146,165,163,.45);
  text-shadow:0 1px 0 rgba(220,224,221,.9);box-shadow:none}
.st-scope .st-hist-label.country{font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.st-scope .st-hist-label.region{font-size:8px;font-style:italic;letter-spacing:.04em;color:var(--data)}
.st-scope .st-hist-label.city{padding-left:12px;font-size:8.5px;background:rgba(220,224,221,.82)}
.st-scope .st-hist-label.city:before{content:"";position:absolute;left:4px;top:50%;width:4px;height:4px;
  margin-top:-2px;border-radius:50%;background:var(--head)}

.st-scope .timecode{position:absolute;top:20px;left:480px;z-index:600;background:var(--dark);
  color:#F3EEE2;padding:11px 17px 12px;pointer-events:none;font-family:var(--mono);
  letter-spacing:.08em;max-width:420px;transition:left .35s cubic-bezier(.4,0,.2,1)}
.st-scope .tc-d{display:block;font-size:16px;font-weight:600}
.st-scope .tc-t{display:block;font-size:11px;font-weight:600;color:#E0D3BB;margin-top:4px}
.st-scope .tc-f{display:block;font-size:9.5px;color:#D0A58F;margin-top:7px;line-height:1.6;
  border-top:1px solid rgba(146,165,163,.3);padding-top:7px}

.st-scope .mapctl{position:absolute;top:20px;right:20px;z-index:600;display:flex;
  flex-direction:column;gap:6px;align-items:flex-end}
.st-scope .st-layer-toggle{display:none}
.st-scope .mapctl button{background:var(--panel);border:1px solid var(--rule-2);padding:8px 13px;
  cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--data);font-weight:600}
.st-scope .mapctl button:hover{border-color:var(--head)}
.st-scope .mapctl button[aria-pressed="true"]{background:var(--dark);color:#F3EEE2;border-color:var(--dark)}
.st-scope .mapctl .swatch{display:inline-block;width:9px;height:9px;margin-right:7px;
  vertical-align:-1px;border:1px solid rgba(44,33,25,.35)}

.st-scope .dock{position:absolute;left:20px;top:20px;bottom:calc(var(--rail-h) + 20px);width:430px;
  z-index:600;background:var(--panel);border:1px solid var(--rule-2);display:flex;flex-direction:column;
  box-shadow:0 3px 22px rgba(44,33,25,.14);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.st-scope .dock-head{padding:18px 22px 15px;border-bottom:1px solid var(--rule)}
.st-scope .dock-head h3{font-size:24px;line-height:1.2;font-weight:600}
.st-scope .dock-scroll{overflow-y:auto;padding:18px 22px 22px;flex:1}
.st-scope .dock-scroll p{margin:0 0 16px;font-size:16px;font-weight:500;max-width:none;line-height:1.66;color:#1f221d}
.st-scope .dmeta{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:0 0 18px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;color:#514b40;text-transform:uppercase}
.st-scope .dmeta b{display:block;color:#171a16;font-family:var(--sans);font-weight:600;font-size:13.5px;
  line-height:1.35;letter-spacing:0;text-transform:none;margin-top:5px}
/* The wind arrow points the way the wind is going, not the way it comes from,
   which is the convention a reader expects on a map. */
.st-scope .dmeta .wxdir{display:inline-block;width:0;height:0;margin-right:5px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-bottom:6px solid var(--mark);vertical-align:baseline}
.st-scope .dmeta .wx em{display:block;font-style:normal;font-size:10px;font-weight:500;line-height:1.5;
  color:#514b40;margin-top:3px;letter-spacing:.01em}
.st-scope .pull{background:var(--tint);padding:15px 17px;margin:19px 0;font-family:var(--disp);
  font-size:15.5px;font-weight:600;font-style:normal;color:var(--head);line-height:1.58;max-width:none}
.st-scope sup.ref{font-family:var(--mono);font-size:9px}
.st-scope sup.ref a{text-decoration:none;color:var(--mark);border-bottom:1px solid var(--rule-2);padding:0 1px}
.st-scope .media{margin-top:18px;border-top:1px solid var(--rule);padding-top:16px}
.st-scope .media img{width:100%;filter:grayscale(.45) contrast(1.05)}
.st-scope .media video{width:100%;background:var(--head);display:block}
.st-scope .media .yt{position:relative;padding-bottom:56.25%;height:0;background:var(--head)}
.st-scope .media .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Sitting under the metadata rather than at the foot, so it needs its own
   spacing and it should read as the panel's primary action. */
.st-scope .opencta.is-open{display:block;margin:0 0 18px;text-align:center}
.st-scope .prep{display:block;margin:0 0 18px}
.st-scope .opencta{display:inline-block;margin-top:6px;background:var(--dark);color:#F3EEE2;
  text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:11px 16px}
.st-scope .opencta:hover{background:var(--mark)}
.st-scope .prep{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--cred);
  border:1px dashed var(--rule-2);padding:11px 14px;display:inline-block;margin-top:6px}
.st-scope .dock-collapse{position:absolute;top:-1px;right:-31px;width:30px;height:46px;
  background:var(--panel);border:1px solid var(--rule-2);border-left:0;cursor:pointer;
  color:var(--data);font-family:var(--mono);font-size:13px;line-height:46px;text-align:center;padding:0}
.st-scope.docked-off .dock,.st-scope .console.docked-off .dock{transform:translateX(calc(-100% - 22px))}
.st-scope.docked-off .timecode,.st-scope .console.docked-off .timecode{left:36px}

.st-scope .rail{position:absolute;left:0;right:0;bottom:0;height:var(--rail-h);z-index:650;
  background:var(--panel);border-top:1px solid var(--rule-2);display:flex;flex-direction:column}
/* The bar was 56px of mostly empty space above the dates. Forty is enough for
   a 30px control and it gives the height back to the chips. */
.st-scope .rail-bar{display:flex;align-items:center;gap:13px;padding:0 18px;height:40px;
  border-bottom:1px solid var(--rule);flex:0 0 auto}
.st-scope .tctrl{display:flex;align-items:center;gap:6px}
.st-scope .tctrl button{background:transparent;border:1px solid var(--rule-2);cursor:pointer;
  width:29px;height:29px;display:grid;place-items:center;color:var(--head);padding:0}
.st-scope .tctrl button:hover{border-color:var(--head);background:var(--bg)}
.st-scope .tctrl svg{width:13px;height:13px;fill:currentColor}
.st-scope .progress{flex:1;height:3px;background:var(--rule);position:relative}
.st-scope .progress i{position:absolute;left:0;top:0;bottom:0;background:var(--mark);transition:width .28s linear}
.st-scope .counter{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--cred);white-space:nowrap}
.st-scope .counter b{color:var(--data);font-size:15px;font-weight:600}
.st-scope .phaselabel{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--mark);white-space:nowrap}
/* Centred when the chips do not fill the rail, so a short operation does not
   sit in a lump on the left with empty space beside it. */
.st-scope .rail-scroll{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;
  justify-content:safe center;scrollbar-width:thin}
.st-scope .rail-scroll::-webkit-scrollbar{height:6px}
.st-scope .rail-scroll::-webkit-scrollbar-thumb{background:var(--rule-2)}

/* The chip sets the height of the scroll, and the scroll sets the height of the
   rail. A two-line title instead of three takes the whole console down by about
   fifty pixels, which is the difference between the map, the bar and the dates
   all being on screen at once and not. */
.st-scope .chip{flex:0 0 168px;border:0;border-right:1px solid var(--rule);background:transparent;
  cursor:pointer;text-align:left;padding:8px 12px 10px;display:flex;flex-direction:column;gap:4px;
  font-family:inherit;color:inherit;position:relative}
.st-scope .chip.dayfirst{border-left:2px solid var(--mark)}
.st-scope .chip:hover{background:var(--bg)}
.st-scope .chip .cday{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;color:var(--mark);
  font-weight:600;height:13px;overflow:hidden}
.st-scope .chip .ctm{font-family:var(--mono);font-size:12px;color:var(--data);font-weight:600}
.st-scope .chip .ctt{font-family:var(--disp);font-size:13.5px;font-weight:600;line-height:1.28;color:var(--head);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-scope .chip .ccat{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--cred);margin-top:auto}
.st-scope .chip .side{position:absolute;left:0;bottom:0;height:3px;width:100%}
.st-scope .chip[data-s="allied"] .side{background:var(--allied-fill)}
.st-scope .chip[data-s="axis"] .side{background:var(--axis-fill)}
.st-scope .chip[data-s="contested"] .side,.st-scope .chip[data-s="neutral"] .side,
.st-scope .chip[data-s="civil"] .side{background:var(--cred)}
.st-scope .chip[aria-current="true"]{background:var(--dark)}
.st-scope .chip[aria-current="true"] .ctt{color:#F3EEE2}
.st-scope .chip[aria-current="true"] .ctm{color:#D0A58F}
.st-scope .chip[aria-current="true"] .cday,.st-scope .chip[aria-current="true"] .ccat{color:#C8BEAD}

/* ---------- markers ----------
   A page has thirty to sixty entries in a small area. Drawing an icon for every
   one of them produces a jagged pile, so:

     every marker is a small dot in its side's colour
     markers inside the currently displayed snapshot show their icon
     the entry being read is the one at full strength

   Nothing scales, rotates or grows on selection. Those changes read as popping,
   and they were also carrying meaning that colour and position already carry.
   Colour states the side and only the side. */
.st-scope{
  --pin-allied:#355F52;   /* green,  L40 */
  --pin-axis:#663A31;     /* brown,  L22 */
  --pin-other:#625F56;    /* bronze, L43 */
}

/* plain markers, used by pages with no icons assigned */
.st-scope .pin{display:block;width:12px;height:12px;border:2px solid var(--panel);
  box-shadow:0 0 0 1px var(--head);cursor:pointer;position:relative;
  background:var(--pin-allied)}
.st-scope .pin.axis{background:var(--pin-axis);border-radius:50%}
.st-scope .pin.contested,.st-scope .pin.neutral,.st-scope .pin.civil{
  background:var(--pin-other);transform:rotate(45deg)}
.st-scope .pin.on{box-shadow:0 0 0 1px var(--head),0 0 0 3px var(--panel),0 0 0 4.5px var(--head)}

.st-scope .pin.has-media::after{content:"";position:absolute;top:-4px;right:-4px;
  width:6px;height:6px;background:var(--dark);border:1px solid var(--panel);border-radius:50%}

/* glyph markers */
.st-scope .pin.pin-glyph{position:relative;width:22px;height:22px;
  background:none;border:0;box-shadow:none;border-radius:0;transform:none;
  display:grid;place-items:center}

/* resting state: a dot, so a cluster of entries reads as a scatter of points
   rather than a heap of overlapping silhouettes */
.st-scope .pin.pin-glyph::before{content:"";position:absolute;width:7px;height:7px;
  border-radius:50%;background:var(--pin-allied);box-shadow:0 0 0 1.5px var(--panel)}
.st-scope .pin.pin-glyph.axis::before{background:var(--pin-axis)}
.st-scope .pin.pin-glyph.contested::before,
.st-scope .pin.pin-glyph.neutral::before,
.st-scope .pin.pin-glyph.civil::before{background:var(--pin-other)}
.st-scope .pin.pin-glyph svg{display:none;width:20px;height:20px;position:relative}
.st-scope .pin.pin-glyph svg path{fill:var(--pin-allied)}
.st-scope .pin.pin-glyph.axis svg path{fill:var(--pin-axis)}
.st-scope .pin.pin-glyph.contested svg path,
.st-scope .pin.pin-glyph.neutral svg path,
.st-scope .pin.pin-glyph.civil svg path{fill:var(--pin-other)}

/* shown as an icon: decided by the console, which drops any that would land on
   top of one already placed. The entry being read always keeps its icon. */
.st-scope .pin.pin-glyph.show-icon::before{display:none}
.st-scope .pin.pin-glyph.show-icon svg{display:block;opacity:.5;
  filter:drop-shadow(0 0 1.5px var(--panel))}

/* the entry being read: full strength, a soft glow with no hard edge, and a
   single expanding ring so the eye is told where to look without the map moving */
.st-scope .pin.pin-glyph.on{border-radius:50%;
  background:radial-gradient(circle,rgba(71,101,78,.30) 0%,rgba(71,101,78,.13) 46%,rgba(71,101,78,0) 72%)}
.st-scope .pin.pin-glyph.on svg{display:block;opacity:1;
  filter:drop-shadow(0 0 2px var(--panel)) drop-shadow(0 0 4px var(--panel))
         drop-shadow(0 0 1px rgba(44,33,25,.6))}
@keyframes st-locate{
  0%  {box-shadow:0 0 0 3px rgba(71,101,78,.55)}
  100%{box-shadow:0 0 0 19px rgba(71,101,78,0)}
}
.st-scope .pin.pin-glyph.locate{animation:st-locate .85s ease-out 1}
.st-scope .pin.on{animation:st-locate .85s ease-out 1}
@media(prefers-reduced-motion:reduce){
  .st-scope .pin.pin-glyph.locate,.st-scope .pin.on{animation:none}
}
.st-scope .pin.pin-glyph.has-media::after{content:"";position:absolute;top:0;right:0;
  width:6px;height:6px;background:var(--dark);border:1px solid var(--panel);
  border-radius:50%;z-index:2}

.st-scope .maplabel{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  background:rgba(220,224,221,.88);padding:2px 6px;white-space:nowrap}

/* Most themes reset svg to display:block, max-width:100%, height:auto. A Leaflet
   divIcon is a zero by zero box, so max-width:100% resolves to zero and any glyph
   inside a map label disappears. Text survives because it simply overflows.
   Sizes are forced here rather than left to the element's own attributes, which
   a height:auto rule would override. */
.st-scope .maplabel svg{
  display:inline-block!important;
  max-width:none!important;max-height:none!important;
  width:12px;height:12px;flex:0 0 auto;vertical-align:baseline}
.st-scope .maplabel svg path{fill:currentColor}
.st-scope .leaflet-popup-content{margin:11px 13px;font-family:var(--sans)}
.st-scope .pop-t{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--data);
  display:block;margin-bottom:4px}
.st-scope .pop-n{font-family:var(--disp);font-size:14px;font-weight:600;line-height:1.3;color:var(--head)}

/* ---------- grids ---------- */
.st-scope .people{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--rule-2);border-left:1px solid var(--rule-2)}
.st-scope .person{border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  padding:0 0 18px;display:flex;flex-direction:column}
.st-scope .person .ph{position:relative;border-bottom:1px solid var(--rule)}
.st-scope .person .ph img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;
  filter:grayscale(.6) contrast(1.06)}
.st-scope .person .ph .imgslot{aspect-ratio:4/5;min-height:0;border:0}
.st-scope .person .ph::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--allied-fill);z-index:1}
.st-scope .person[data-side="axis"] .ph::before{background:var(--axis-fill)}
.st-scope .person[data-side="neutral"] .ph::before,
.st-scope .person[data-side="civil"] .ph::before{background:var(--cred)}
.st-scope .person .body{padding:15px 17px 0;display:flex;flex-direction:column;gap:8px;flex:1}
.st-scope .person .rank{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--cred)}
.st-scope .person h4{font-size:15.5px;line-height:1.26}
.st-scope .person .role{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;
  line-height:1.62;color:var(--data)}
.st-scope .person .note{margin:auto 0 0;font-size:13.5px;border-top:1px solid var(--rule);
  padding-top:11px;line-height:1.64}
.st-scope .person figcaption{padding:9px 17px 0;font-size:9px}

.st-scope .kit{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule-2);border-left:1px solid var(--rule-2)}
.st-scope .item{border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  display:flex;flex-direction:column}
.st-scope .item .ph img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(.6) contrast(1.06)}
.st-scope .item .body{padding:16px 19px 20px}
.st-scope .item h4{font-size:16px;margin:0 0 9px;line-height:1.28}
.st-scope .item .spec{font-family:var(--mono);font-size:9.5px;color:var(--data);letter-spacing:.02em;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:9px 0;margin:0 0 12px;line-height:1.6}
.st-scope .item p{margin:0;font-size:13.5px;max-width:none;line-height:1.66}
.st-scope .item figcaption{padding:9px 19px 0;font-size:9px}

.st-scope .cost{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule-2);border-left:1px solid var(--rule-2)}
.st-scope .ccard{border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);padding:20px 22px 22px}
.st-scope .ccard .cnum{font-family:var(--disp);font-size:26px;font-weight:600;color:var(--head);
  line-height:1.05;margin:0 0 8px}
.st-scope .ccard h4{font-size:14px;margin:0 0 10px;line-height:1.35}
.st-scope .ccard p{margin:0;font-size:13px;line-height:1.64;max-width:none}
.st-scope .ccard .attr{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--cred);line-height:1.7}

.st-scope .imgslot{border:1px dashed var(--rule-2);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;min-height:180px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;color:var(--cred);line-height:1.9}

/* ---------- sources ---------- */
.st-scope .sources{border-top:1px solid var(--rule-2)}
.st-scope .sources ol{list-style:none;counter-reset:s;padding:0;margin:0}
.st-scope .sources li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.st-scope .sources li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:10px;color:var(--mark);margin-right:14px;font-weight:400}
.st-scope .sources .pub{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  color:var(--cred);display:block;margin:6px 0 0 38px}
.st-scope .sources a{color:var(--data);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.st-scope .sources a:hover{color:var(--mark)}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .st-scope .dock{width:360px}
  .st-scope .timecode{left:396px;max-width:300px}
}
@media(max-width:1160px){
  .st-scope .people{grid-template-columns:repeat(2,1fr)}
  .st-scope .kit{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  /* Five facts at 22px each ran to most of a phone screen before the reader
     reached a sentence. Two compact columns, smaller figures, and the note
     clamped to two lines: the whole block now fits in about a third of the
     space and still says the same things. */
  .st-scope .facts{grid-template-columns:repeat(2,1fr)}
  .st-scope .fact{padding:11px 14px 12px;border-bottom:1px solid var(--rule)}
  .st-scope .fact:nth-child(2n){border-right:0}
  .st-scope .fact dt{font-size:8px;letter-spacing:.12em;margin:0 0 4px}
  .st-scope .fact dd{font-size:clamp(15px,4.6vw,18px);line-height:1.12}
  .st-scope .fact dd small{font-size:11.5px;line-height:1.5;margin-top:3px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .st-scope .cost{grid-template-columns:repeat(2,1fr)}

  /* ---------- the console on a narrow screen ----------

     Three rules, in order of importance.

     Nothing follows the scroll. The timecode used to be sticky and it rode down
     over the text it was supposed to caption. It is now a header strip across
     the top of the map, inside it, where a readout belongs.

     The map, its readout and its controls are one object. They were being
     stacked as three separate rows with the controls a screen away from the
     thing they control.

     The rail sits directly under that group, because it is what drives the map,
     and the dock follows it. The rail is compressed hard so all of that fits
     above the fold: the chips lead with the day and everything else is dropped,
     which takes the rail from about 150px to about 96px. */
  .st-scope .console{height:auto;min-height:0;overflow:visible;
    display:flex;flex-direction:column}
  .st-scope .mapgroup{display:flex;flex-direction:column;order:1}

  .st-scope .st-map{position:relative;inset:auto;height:38vh;min-height:260px}

  /* A mini header over the map, not a floating panel that follows you.

     It is two stacked lines, not three columns. The previous version was a
     single flex row with no wrap, so the third item ran off the side of the
     viewport and the whole thing was unreadable. The snapshot label is dropped
     here entirely: it is a sentence, it belongs in the panel below, and the
     header is a readout rather than a place to read. */
  .st-scope .timecode{position:absolute;top:0;left:0;right:0;max-width:none;
    z-index:600;border-radius:0;display:block;
    padding:7px 13px 8px 60px;line-height:1.3;
    background:rgba(38,48,56,.92);backdrop-filter:blur(2px)}
  /* One line, date then time and place, so the header costs a single row. */
  .st-scope .timecode{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
  .st-scope .timecode .tc-d{font-size:11.5px;font-weight:400;flex:0 0 auto}
  .st-scope .timecode .tc-t{font-size:9.5px;letter-spacing:.04em;opacity:.72;
    overflow:hidden;text-overflow:ellipsis;min-width:0}
  .st-scope .timecode .tc-f{display:none}

  .st-scope .mapctl{position:relative;top:auto;right:auto;flex-direction:row;flex-wrap:wrap;
    padding:9px 12px;gap:6px;border-top:1px solid var(--rule);border-bottom:0}
  .st-scope .mapctl button{padding:6px 10px;font-size:9px}
  .st-scope .st-basemap-status{flex:1 1 100%;max-width:none;text-align:left;padding:5px 8px}

  .st-scope .rail{position:relative;height:auto;order:2;border-top:1px solid var(--rule-2)}
  .st-scope .rail-bar{flex-wrap:wrap;height:auto;padding:6px 12px 7px;gap:7px}
  .st-scope .progress{flex:1 1 100%;order:9}

  .st-scope .dock{position:relative;left:auto;top:auto;bottom:auto;width:auto;order:3;
    box-shadow:none;border-left:0;border-right:0;transform:none;
    scroll-margin-top:12px}
  .st-scope .dock-collapse{display:none}
  .st-scope .dock-scroll{overflow:visible}
  /* The one text grid that was still two columns at every width. A date like
     "Friday 16 February 1940" in half a phone screen wraps to four lines. */
  /* Two columns. One made the block six rows deep and pushed the text far
     enough down that a reader had to scroll after every rail tap to see the
     entry change at all. */
  .st-scope .dmeta{grid-template-columns:1fr 1fr;gap:8px 14px;font-size:8px}
  .st-scope .dmeta b{font-size:10.5px}
  .st-scope .dmeta .wx{grid-column:1 / -1}

  /* The chips lead with the day and drop everything else, so the rail is a
     narrow strip of dates rather than a third of the screen. */
  .st-scope .rail-scroll{padding-bottom:2px}
  .st-scope .chip{flex:0 0 76px;padding:7px 9px 9px;gap:2px}
  .st-scope .chip.dayfirst{flex:0 0 100px}
  .st-scope .chip .cday{font-size:9px;letter-spacing:.06em;min-height:0;margin:0}
  .st-scope .chip.dayfirst .cday{color:var(--mark)}
  .st-scope .chip .ctm{font-size:11px}
  .st-scope .chip .ctt,.st-scope .chip .ccat{display:none}
  .st-scope .chip[aria-current="true"] .ctm{color:#F3EEE2}

  /* Five facts in two columns leaves a stray on its own row. Four is the
     number that balances, and the fifth is on the page it summarises. */
  .st-scope .fact:nth-child(n+5){display:none}
  .st-scope .fact:nth-child(4){border-right:0}

  /* The lede sits on a photograph on a small screen with the scrim doing all
     the work. Larger and heavier, or it disappears into the picture. */
  .st-scope .hero .lede{font-size:16.5px;line-height:1.55;font-weight:400;
    color:#fff;text-shadow:0 1px 12px rgba(28,21,16,.7)}
  .st-scope .hero::after{background:linear-gradient(180deg,
    rgba(28,21,16,.52) 0%,rgba(28,21,16,.28) 22%,rgba(28,21,16,.72) 52%,
    rgba(28,21,16,.92) 78%,rgba(28,21,16,.97) 100%)}

  /* The dock reacts visibly when the rail or a marker changes the entry. */
  .st-scope .dock.is-updated .dock-head{animation:st-dockflash .9s ease-out 1}
  @keyframes st-dockflash{
    0%  {background:rgba(94,133,112,.34)}
    100%{background:transparent}
  }
}
/* Mobile field-console layout. The map remains the stage; chronology and
   report are overlays with measured camera insets rather than stacked pages. */
@media(max-width:1000px){
  .st-scope .console{
    --st-sheet-h:42svh;
    position:relative;height:100svh;min-height:620px;max-height:920px;
    display:block;overflow:hidden;background:var(--dark);isolation:isolate
  }
  .st-scope .mapgroup{display:contents}
  .st-scope .st-map{position:absolute;inset:0;height:auto;min-height:0;z-index:1}

  /* Readout stays on the map, clear of the chronology and the layer control. */
  .st-scope .timecode{position:absolute;top:10px;left:104px;right:82px;z-index:720;
    max-width:none;display:flex;align-items:baseline;gap:7px;white-space:nowrap;
    padding:8px 11px;background:rgba(32,39,37,.94);border:1px solid rgba(240,235,221,.22);
    box-shadow:0 4px 18px rgba(23,26,24,.18);backdrop-filter:blur(5px)}
  .st-scope .timecode .tc-d{font-size:11.5px;color:#F3EEE2}
  .st-scope .timecode .tc-t{font-size:9px;color:#C8BEAD;opacity:1;overflow:hidden;text-overflow:ellipsis}
  .st-scope .timecode .tc-f{display:none}

  /* Map layers collapse into one control. They remain available without
     permanently occupying the map on a phone. */
  .st-scope .mapctl{position:absolute;top:10px;right:10px;z-index:740;display:flex;
    flex-direction:column;align-items:flex-end;gap:5px;padding:0;border:0;background:transparent}
  .st-scope .st-layer-toggle{display:block!important;background:rgba(32,39,37,.96)!important;
    color:#F3EEE2!important;border:1px solid rgba(240,235,221,.3)!important;
    padding:8px 10px!important;font-size:8.5px!important;letter-spacing:.08em}
  .st-scope .mapctl>button:not(.st-layer-toggle),
  .st-scope .mapctl .st-basemap-status:not([hidden]){display:none}
  .st-scope.layers-open .mapctl{padding:6px;background:rgba(240,235,221,.96);
    border:1px solid var(--rule-2);box-shadow:0 8px 24px rgba(23,26,24,.2)}
  .st-scope.layers-open .mapctl>button:not(.st-layer-toggle){display:block;background:var(--panel);
    color:var(--data);border-color:var(--rule-2);font-size:8.5px;padding:6px 9px}
  .st-scope.layers-open .mapctl .st-basemap-status:not([hidden]){display:block;max-width:170px;
    background:transparent;text-align:right;font-size:8px;padding:4px}
  .st-scope.layers-open .st-layer-toggle{background:var(--dark)!important}

  /* Leaflet's own zoom buttons move away from the left chronology rail. */
  .st-scope .leaflet-top.leaflet-left{left:auto;right:10px;top:48px}
  .st-scope .leaflet-bottom.leaflet-right{bottom:calc(var(--st-sheet-h) + 4px)}
  .st-scope .leaflet-control-zoom{border:0;box-shadow:0 4px 18px rgba(23,26,24,.16)}
  .st-scope .leaflet-control-zoom a{background:rgba(240,235,221,.94);color:var(--head);border-color:var(--rule)}

  /* Chat-style chronology: dates live in a vertical rail, not a wide strip
     that steals height from the map. */
  .st-scope .rail{position:absolute;left:9px;top:58px;bottom:calc(var(--st-sheet-h) + 10px);
    right:auto;width:84px;height:auto;z-index:710;display:flex;flex-direction:column;
    background:rgba(32,39,37,.94);border:1px solid rgba(240,235,221,.22);
    border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(23,26,24,.22);
    backdrop-filter:blur(5px)}
  .st-scope .rail-bar{height:38px;min-height:38px;display:flex;flex-wrap:nowrap;align-items:center;
    justify-content:center;padding:4px 5px;gap:4px;border-bottom:1px solid rgba(240,235,221,.16)}
  .st-scope .rail-hint,.st-scope .rail .phaselabel,.st-scope .rail .progress,.st-scope .rail .counter{display:none}
  .st-scope .rail .tctrl{gap:4px}
  .st-scope .rail .tctrl button{width:30px;height:28px;border-color:rgba(240,235,221,.25);color:#F3EEE2}
  .st-scope .rail .tctrl button:hover{background:rgba(240,235,221,.1);border-color:#F3EEE2}
  .st-scope .rail-scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;display:flex;
    flex-direction:column;justify-content:flex-start;padding:0 0 5px;scrollbar-width:none;overscroll-behavior:contain}
  .st-scope .rail-scroll::-webkit-scrollbar{display:none}
  .st-scope .chip,.st-scope .chip.dayfirst{flex:0 0 auto;width:100%;min-height:42px;padding:7px 8px 8px;
    gap:1px;border:0;border-bottom:1px solid rgba(240,235,221,.12);background:transparent;color:#F3EEE2}
  .st-scope .chip.dayfirst{min-height:56px;border-left:0;border-top:1px solid rgba(240,235,221,.18)}
  .st-scope .chip:not(.dayfirst) .cday{display:none}
  .st-scope .chip .cday{height:auto;min-height:0;font-size:8px;line-height:1.3;letter-spacing:.03em;
    color:#C8BEAD;white-space:normal}
  .st-scope .chip .ctm{font-size:10px;line-height:1.25;color:#F3EEE2}
  .st-scope .chip .ctt,.st-scope .chip .ccat{display:none}
  .st-scope .chip .side{left:0;top:0;bottom:0;width:3px;height:auto}
  .st-scope .chip:hover{background:rgba(240,235,221,.08)}
  .st-scope .chip[aria-current="true"]{background:#F0EBDD;color:var(--head);box-shadow:inset 3px 0 0 var(--signal)}
  .st-scope .chip[aria-current="true"] .cday{color:var(--cred)}
  .st-scope .chip[aria-current="true"] .ctm{color:var(--head);font-weight:500}

  /* The report is a bounded bottom sheet. Text, citations and image/video scroll
     inside it, so changing an event never pushes the map out of sight. */
  .st-scope .dock{position:absolute;left:0;right:0;top:auto;bottom:0;width:auto;height:var(--st-sheet-h);
    z-index:730;display:flex;flex-direction:column;transform:none;background:var(--panel);
    border:0;border-top:1px solid var(--rule-2);box-shadow:0 -10px 34px rgba(23,26,24,.22)}
  .st-scope .dock::before{content:"";display:block;position:absolute;top:7px;left:50%;width:44px;height:3px;
    transform:translateX(-50%);border-radius:99px;background:var(--rule-2);opacity:.7}
  .st-scope .dock-head{flex:0 0 auto;padding:19px 16px 10px;border-bottom:1px solid var(--rule);background:var(--panel)}
  .st-scope .dock-head h3{font-size:20px;line-height:1.15;letter-spacing:0;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .st-scope .dock-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;
    padding:11px 16px 26px;scrollbar-width:thin}
  .st-scope .dock-scroll p{font-size:14.5px;line-height:1.58;margin:0 0 13px;color:var(--body)}
  .st-scope .dock-collapse{display:none}
  .st-scope .dmeta{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;margin-bottom:12px;
    color:var(--cred);font-size:7.5px}
  .st-scope .dmeta b{font-size:10px;color:var(--data);line-height:1.35}
  .st-scope .pull{margin:14px 0;padding:12px 13px;font-size:14px;background:rgba(53,95,82,.1)}
  .st-scope .media{margin-top:14px;padding-top:13px}
  .st-scope .media img{width:100%;max-height:34svh;object-fit:contain;background:#202725;filter:none}
  .st-scope .media video{max-height:34svh}
  .st-scope .media .yt{height:auto;padding-bottom:0;aspect-ratio:16/9;max-height:none}
  .st-scope .opencta{font-size:9px;padding:10px 13px}

  /* The old update flash was useful when the panel sat below the map. Here the
     active chronology item already provides the state change. */
  .st-scope .dock.is-updated .dock-head{animation:none}
}

@media(max-width:1000px) and (prefers-reduced-motion:reduce){
  .st-scope .dock.is-updated .dock-head{animation:none}
}
@media(max-width:760px){
  .st-scope .hero{height:auto;min-height:460px}
  .st-scope .hero-inner{position:relative;padding:120px 0 40px}
}
@media(max-width:620px){.st-scope .kit{grid-template-columns:1fr}}
@media(max-width:560px){.st-scope .people{grid-template-columns:1fr}}
/* Facts stay two across even on the narrowest screens: one column made five
   full-width rows and put the first paragraph of the page below the fold. */
@media(max-width:520px){.st-scope .cost{grid-template-columns:1fr}}
@media(max-width:520px){
  .st-scope .fact dd{font-size:clamp(14px,4.4vw,17px)}
  .st-scope .fact dd small{-webkit-line-clamp:3}
}
@media(prefers-reduced-motion:reduce){
  .st-scope .dock,.st-scope .timecode,.st-scope .progress i{transition:none}
}

/* A route that failed reads as struck through rather than merely broken. */
.st-scope .maplabel.is-failed{text-decoration:line-through;opacity:.85}

/* ---------- index grid ----------
   Cards linking onward: theatres on the home page, operations on a theatre
   page. Unbuilt entries are dimmed and say so rather than pretending. */
.st-scope .ops{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule-2);border-left:1px solid var(--rule-2)}
.st-scope .opcard{border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;background:transparent}
.st-scope a.opcard:hover{background:var(--panel)}
.st-scope .opcard .ph{position:relative;border-bottom:1px solid var(--rule)}
.st-scope .opcard .ph img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.55) contrast(1.06)}
.st-scope .opcard .ph .imgslot{aspect-ratio:16/9;min-height:0}
.st-scope .opcard .body{padding:17px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.st-scope .opcard .num{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  color:var(--mark);line-height:1.55}
.st-scope .opcard h4{font-size:18px;line-height:1.28;margin:0}
.st-scope .opcard .dates{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--data)}
.st-scope .opcard p{margin:0;font-size:13.5px;max-width:none;line-height:1.66}
.st-scope .opcard .status{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--cred)}
.st-scope a.opcard .status{color:var(--mark)}
.st-scope .opcard.soon{opacity:.72}
@media(max-width:1000px){.st-scope .ops{grid-template-columns:1fr}}

/* ---------- glyph markers ----------
   An entry with an icon gets the thing it is about instead of a coloured
   square. Colour still carries the side, so shape and tone say different
   things and neither is redundant. */
.st-scope .pin.pin-glyph{position:relative;width:26px;height:26px;
  background:none;border:0;box-shadow:none;border-radius:0;transform:none;
  display:grid;place-items:center}
.st-scope .pin.pin-glyph svg{display:block!important;max-width:none!important;
  width:21px;height:21px;
  filter:drop-shadow(0 0 1.5px #F0EBDD) drop-shadow(0 0 3px rgba(220,224,221,.95))}
.st-scope .pin.pin-glyph svg path{fill:var(--allied)}
.st-scope .pin.pin-glyph.axis svg path{fill:var(--axis)}
.st-scope .pin.pin-glyph.contested svg path,
.st-scope .pin.pin-glyph.neutral svg path,
.st-scope .pin.pin-glyph.civil svg path{fill:var(--cred)}
.st-scope .pin.pin-glyph.on::before{content:"";position:absolute;inset:-3px;
  border-radius:50%;background:rgba(71,101,78,.30)}
.st-scope .pin.pin-glyph.on.axis::before{background:rgba(69,48,42,.30)}
.st-scope .pin.pin-glyph.on.contested::before,
.st-scope .pin.pin-glyph.on.neutral::before,
.st-scope .pin.pin-glyph.on.civil::before{background:rgba(125,95,82,.30)}

/* ---------- the selected marker ----------
   Selection adds emphasis without changing allegiance. Axis events remain
   brown, Allied events remain green, and neutral/civil events retain bronze. */
.st-scope .pin.pin-glyph.on svg{position:relative}
.st-scope .pin.pin-glyph.on svg path{fill:var(--allied)}
.st-scope .pin.pin-glyph.on.axis svg path{fill:var(--axis)}
.st-scope .pin.pin-glyph.on.contested svg path,
.st-scope .pin.pin-glyph.on.neutral svg path,
.st-scope .pin.pin-glyph.on.civil svg path{fill:var(--cred)}
/* The plain dot, for entries with no icon. */
.st-scope .pin.on{background:var(--pin-allied)}
.st-scope .pin.on.axis{background:var(--pin-axis)}
.st-scope .pin.on.contested,
.st-scope .pin.on.neutral,
.st-scope .pin.on.civil{background:var(--pin-other)}
.st-scope .pin.pin-glyph.on,
.st-scope .pin.pin-glyph.on.axis,
.st-scope .pin.pin-glyph.on.contested,
.st-scope .pin.pin-glyph.on.neutral,
.st-scope .pin.pin-glyph.on.civil{background:none}

/* Match the locate ring to the event side as well. */
@keyframes st-locate-axis{
  0%  {box-shadow:0 0 0 3px rgba(69,48,42,.55)}
  100%{box-shadow:0 0 0 19px rgba(69,48,42,0)}
}
@keyframes st-locate-other{
  0%  {box-shadow:0 0 0 3px rgba(125,95,82,.55)}
  100%{box-shadow:0 0 0 19px rgba(125,95,82,0)}
}
.st-scope .pin.locate.axis,
.st-scope .pin.on.axis{animation-name:st-locate-axis}
.st-scope .pin.locate.contested,
.st-scope .pin.locate.neutral,
.st-scope .pin.locate.civil,
.st-scope .pin.on.contested,
.st-scope .pin.on.neutral,
.st-scope .pin.on.civil{animation-name:st-locate-other}
.st-scope .pin.pin-glyph.has-media::after{top:-2px;right:-2px}

/* ---------- shop strip ----------
   Commercial, and dressed in the same clothes as everything else so it reads as
   part of the page rather than as an advertisement dropped into it. Rendered
   only when there is something to show. */
.st-scope .st-shop .shopgrid{display:grid;
  border-top:1px solid var(--rule-2);border-left:1px solid var(--rule-2)}
.st-scope .shopcard{border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;background:transparent}
.st-scope .shopcard:hover{background:var(--panel)}
.st-scope .shopcard .ph{border-bottom:1px solid var(--rule);background:var(--panel)}
.st-scope .shopcard .ph img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:14px}
.st-scope .shopcard .ph .imgslot{aspect-ratio:4/3;min-height:0;border:0}
.st-scope .shopcard .body{padding:15px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.st-scope .shopcard .merchant{font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  color:var(--cred);text-transform:uppercase}
.st-scope .shopcard h4{font-size:15px;line-height:1.3;margin:0}
.st-scope .shopcard p{margin:0;font-size:13px;line-height:1.6;color:var(--body);max-width:none}
.st-scope .shopcard .go{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mark)}
.st-scope .shopcard:hover .go{color:var(--head)}
.st-scope .shopnote{margin:14px 0 0;font-family:var(--mono);font-size:9.5px;line-height:1.9;
  letter-spacing:.02em;color:var(--cred);max-width:none}
@media(max-width:900px){.st-scope .st-shop .shopgrid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:520px){.st-scope .st-shop .shopgrid{grid-template-columns:1fr!important}}

/* ---------- onward navigation ----------
   A marker that leads to a page of its own carries a small chevron. The panel
   button is the obvious route; the badge is what tells you the route exists. */
.st-scope .pin .pin-onward{position:absolute;bottom:-3px;right:-3px;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:8px solid var(--mark);transform:rotate(90deg);
  filter:drop-shadow(0 0 1.5px var(--panel)) drop-shadow(0 0 2px var(--panel));z-index:3}
.st-scope .pin.contested .pin-onward,.st-scope .pin.neutral .pin-onward,
.st-scope .pin.civil .pin-onward{transform:rotate(45deg)}
.st-scope .pin.has-page.on .pin-onward{border-bottom-color:var(--head)}

.st-scope .opencta em{display:block;font-style:normal;font-size:8.5px;letter-spacing:.16em;
  color:#C8BEAD;margin-bottom:3px}
.st-scope .opencta.is-return{background:var(--cred)}
.st-scope .opencta.is-return:hover{background:var(--head)}
.st-scope .opencta.is-next{background:var(--mark)}
.st-scope .opencta.is-next:hover{background:var(--head)}

/* Previous, up, next at the foot of a page. */
.st-scope .st-pagenav{border-top:1px solid var(--rule-2);margin-top:64px;background:var(--panel)}
.st-scope .pn-grid{display:grid;grid-template-columns:1fr 1fr 1fr;
  border-left:1px solid var(--rule-2)}
.st-scope .pn{border-right:1px solid var(--rule-2);padding:22px 24px 26px;
  display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;min-height:96px}
.st-scope a.pn:hover{background:var(--bg)}
.st-scope .pn-label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  color:var(--mark);text-transform:uppercase}
.st-scope .pn-title{font-family:var(--disp);font-size:16px;line-height:1.28;color:var(--head)}
.st-scope .pn-dates{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--cred)}
.st-scope .pn-next{text-align:right;align-items:flex-end}
.st-scope .pn-up{text-align:center;align-items:center;background:rgba(146,165,163,.16)}
.st-scope .pn-empty{border-right:1px solid var(--rule-2)}
@media(max-width:820px){
  .st-scope .pn-grid{grid-template-columns:1fr}
  .st-scope .pn-next{text-align:left;align-items:flex-start}
  .st-scope .pn-up{text-align:left;align-items:flex-start}
  .st-scope .pn-empty{display:none}
}

/* The bar under the hero on a page that sits inside a larger operation. */
.st-scope .parentbar{background:var(--panel);border-bottom:1px solid var(--rule-2)}
.st-scope .parentbar .wrap{display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;align-items:center;padding-top:16px;padding-bottom:16px}
.st-scope .parentbar .pl{font-size:14.5px;color:var(--body);max-width:none;margin:0}
.st-scope .parentbar .pl b{font-family:var(--disp);color:var(--head)}
.st-scope .parentbar a.up{background:var(--dark);color:#F3EEE2;text-decoration:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:11px 16px;white-space:nowrap}
.st-scope .parentbar a.up:hover{background:var(--mark)}

/* ---------- data blocks ----------
   Bars for proportions, tallies for absolute loss. A tally is one mark per
   hundred thousand people, because on a bar chart a country that lost 419,000
   and one that lost 27 million cannot both be visible. */
.st-scope .stbars{margin:26px 0 8px}
.st-scope .stbar{padding:16px 0;border-top:1px solid var(--rule)}
.st-scope .stbar:first-child{border-top:1px solid var(--rule-2)}
.st-scope .stbar-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;margin-bottom:9px}
.st-scope .stbar-head .n{font-family:var(--disp);font-size:15px;color:var(--head)}
.st-scope .stbar-head .v{font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--data);white-space:nowrap}
.st-scope .stbar-track{height:9px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--rule)}
.st-scope .stbar-track i{display:block;height:100%;background:var(--cred)}
.st-scope .stbar-t{margin:9px 0 0;font-size:13.5px;line-height:1.7;max-width:78ch}
.st-scope .stbar-a{margin:5px 0 0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.03em;color:var(--cred)}

.st-scope .sttally{margin:26px 0 8px}
.st-scope .sttally-key{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  color:var(--cred);margin:0 0 14px;max-width:none;display:flex;align-items:center;gap:4px;
  flex-wrap:wrap}
.st-scope .sttally-key .mk{width:8px;height:8px;display:inline-block}
.st-scope .sttally-key .mk.mil{background:var(--data)}
.st-scope .sttally-key .mk.civ{background:var(--cred)}
.st-scope .sttally-row{padding:16px 0;border-top:1px solid var(--rule)}
.st-scope .sttally-row:first-of-type{border-top:1px solid var(--rule-2)}
.st-scope .sttally-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;margin-bottom:9px}
.st-scope .sttally-head .n{font-family:var(--disp);font-size:15px;color:var(--head)}
.st-scope .sttally-head .v{font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--data);white-space:nowrap}
.st-scope .sttally-marks{display:flex;flex-wrap:wrap;gap:2px;max-width:none}
.st-scope .sttally-marks i{width:6px;height:6px;display:block}
.st-scope .sttally-marks i.mil{background:var(--data)}
.st-scope .sttally-marks i.civ{background:var(--cred)}
.st-scope .sttally-pop{margin:9px 0 0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.03em;color:var(--cred)}
.st-scope .sttally-ests{list-style:none;margin:10px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 20px}
.st-scope .sttally-ests li{border-left:2px solid var(--rule-2);padding-left:11px}
.st-scope .sttally-ests b{display:block;font-family:var(--mono);font-size:11px;
  font-weight:400;color:var(--head)}
.st-scope .sttally-ests span{display:block;font-family:var(--mono);font-size:9px;
  line-height:1.7;color:var(--cred);margin-top:2px}

/* ---------- population movement units ----------
   A separate visual grammar for displacement and evacuation. Absolute movement
   is shown as repeated population units rather than as percentage bars. Solid
   marks reach the lower/single estimate; outlined marks carry a range upward. */
.st-scope .stunits{margin:26px 0 8px}
.st-scope .stunits-key{margin:0 0 12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  max-width:none;font-family:var(--mono);font-size:9.5px;line-height:1.55;letter-spacing:.04em;color:var(--cred)}
.st-scope .stunits-key .mk{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:8px}
.st-scope .stunits-key .mk:first-child{margin-left:0}
.st-scope .stunits-key .mk.base{background:var(--cred);border:1px solid var(--cred)}
.st-scope .stunits-key .mk.range{background:transparent;border:1px solid var(--cred);opacity:.45}
.st-scope .stunits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule-2);border-left:1px solid var(--rule-2)}
.st-scope .stunit{min-width:0;padding:18px 18px 16px;border-right:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);background:rgba(240,235,221,.16)}
.st-scope .stunit-head{display:flex;flex-direction:column;gap:8px;margin:0 0 13px}
.st-scope .stunit-head h3{margin:0;font-family:var(--disp);font-size:16px;font-weight:600;
  line-height:1.28;color:var(--head)}
.st-scope .stunit-head strong{display:block;font-family:var(--disp);font-size:27px;font-weight:400;
  line-height:1.05;letter-spacing:-.015em;color:var(--data)}
.st-scope .stunit-marks{min-height:35px;margin:0 0 14px}
.st-scope .stunit-marks>span{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;max-width:100%}
.st-scope .stunit-marks i{display:block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;box-sizing:border-box}
.st-scope .stunit-marks i.base{background:var(--cred);border:1px solid var(--cred)}
.st-scope .stunit-marks i.range{background:transparent;border:1px solid var(--cred);opacity:.38}
.st-scope .stunit-marks i.base.partial{background:conic-gradient(var(--cred) 0 var(--st-fill),var(--panel) var(--st-fill) 100%)}
.st-scope .stunit-marks i.range.partial{background:conic-gradient(rgba(81,75,64,.34) 0 var(--st-fill),transparent var(--st-fill) 100%)}
.st-scope .stunit-t{margin:0;font-size:13px;line-height:1.62;max-width:none}
.st-scope .stunit-a{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:9px;line-height:1.55;letter-spacing:.025em;color:var(--cred)}

@media(max-width:980px){
  .st-scope .stunits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .st-scope .stunits-grid{grid-template-columns:1fr}
  .st-scope .stunit{padding:16px 14px 15px}
  .st-scope .stunit-head strong{font-size:24px}
  .st-scope .stunit-marks{min-height:0}
}


/* ---------- theatre bar ----------
   Every theatre, on every page, so a reader who has finished one can go
   straight to another instead of walking back to the home page. Unbuilt ones
   are shown and dimmed, so the shape of the whole site is visible from
   anywhere rather than only from the top. */
.st-scope .st-theatrebar{border-top:1px solid var(--rule-2);margin-top:56px;
  background:var(--panel);padding:22px 0 24px}
.st-scope .st-theatrebar .tb-label{display:block;font-family:var(--mono);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cred);margin-bottom:13px}
.st-scope .st-theatrebar ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule-2);
  border-left:1px solid var(--rule-2)}
.st-scope .st-theatrebar li{border-right:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2)}
.st-scope .tb{display:flex;flex-direction:column;gap:5px;padding:13px 15px 15px;
  height:100%;text-decoration:none;color:inherit}
.st-scope a.tb:hover{background:var(--bg)}
.st-scope .tb-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--mark)}
.st-scope .tb-t{font-family:var(--disp);font-size:13px;line-height:1.3;color:var(--head)}
.st-scope .tb.is-here{background:var(--dark)}
.st-scope .tb.is-here .tb-t{color:#F0EBDD}
.st-scope .tb.is-here .tb-tag{color:#C8BEAD}
.st-scope .tb.is-soon{opacity:.5;cursor:default}
.st-scope .tb.is-soon .tb-tag::after{content:" \00b7 soon"}
@media(max-width:1000px){.st-scope .st-theatrebar ul{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.st-scope .st-theatrebar ul{grid-template-columns:1fr}}
.st-scope .st-err{background:var(--panel);border-left:3px solid #B3261E;padding:10px 14px;
  font-size:13px;color:var(--data);max-width:none}
/* Written but not yet published as a page: distinguishable from unwritten. */
.st-scope .opcard.ready{opacity:.85}
.st-scope .opcard.ready .status{color:var(--data)}

/* The frame of a card with no photograph yet. A numbered plate in the site's
   own colours: the reference and the dates set as the card's own material,
   so an index reads the same whether it is illustrated or not. */
.st-scope .opcard .phblank{aspect-ratio:16/9;display:flex;flex-direction:column;
  justify-content:center;gap:7px;padding:0 20px;
  background:
    linear-gradient(180deg,rgba(44,33,25,.05),rgba(44,33,25,0)),
    repeating-linear-gradient(90deg,rgba(125,95,82,.16) 0 1px,transparent 1px 7px),
    var(--panel);
  border-bottom:1px solid var(--rule)}
.st-scope .opcard .phblank .pb-n{font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  color:var(--mark);text-transform:uppercase}
.st-scope .opcard .phblank .pb-d{font-family:var(--disp);font-size:13.5px;line-height:1.35;
  color:var(--cred)}
.st-scope a.opcard:hover .phblank{background:
  linear-gradient(180deg,rgba(44,33,25,.05),rgba(44,33,25,0)),
  repeating-linear-gradient(90deg,rgba(125,95,82,.22) 0 1px,transparent 1px 7px),
  var(--bg)}
/* An image that fails to load reveals the card's own plate underneath it. */
.st-scope .opcard .ph .phblank{display:none}
.st-scope .opcard .ph.is-blank img{display:none}
.st-scope .opcard .ph.is-blank .phblank{display:flex}
/* The rail is a fixed control bar on a narrow screen, so it says what it does.
   Hidden on desktop, where the dock is permanently beside the map anyway. */
.st-scope .rail-hint{display:none}
@media(max-width:1000px){
  .st-scope .rail-hint{display:block;flex:1 1 100%;order:-1;
    font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--cred)}
}
/* The snapshot label, shown under the map controls on a narrow screen where the
   header has no room for a sentence. Hidden on desktop, where the header does. */
.st-scope .mapnote{display:none}
@media(max-width:1000px){
  .st-scope .mapnote{display:block;margin:0;padding:9px 13px 11px;
    border-top:1px solid var(--rule);background:var(--panel);
    font-size:12.5px;line-height:1.55;color:var(--body);max-width:none}
  .st-scope .mapnote:empty{display:none}
}

/* ---------- foot navigation ----------
   The onward links and the theatre list are one block, not two stacked bars.
   Previous and next come first because they are what most readers want; the
   full list of theatres sits under them as the wider way out. */
.st-scope .st-foot-nav{margin-top:56px;border-top:1px solid var(--rule-2);background:var(--panel)}
.st-scope .st-foot-nav .st-pagenav{margin-top:0;border-top:0;background:transparent}
.st-scope .st-foot-nav .st-theatrebar{margin-top:0;border-top:1px solid var(--rule);
  background:transparent;padding-top:24px}

@media(max-width:1000px){
  /* The snapshot label repeats what the entry below already says, and it cost a
     block of height on the smallest screens. */
  .st-scope .mapnote{display:none}

  /* The dock metadata, tightened. Six labelled fields above the text was more
     than a phone can spare; the labels sit inline with their values and the
     block is about a third of the height it was. */
  .st-scope .dmeta{grid-template-columns:1fr 1fr;gap:5px 12px;
    margin:0 0 14px;padding-bottom:11px}
  .st-scope .dmeta span{display:block;font-size:8px;letter-spacing:.1em;line-height:1.35}
  .st-scope .dmeta b{display:block;font-size:10.5px;letter-spacing:0;line-height:1.35;margin-top:1px}
  .st-scope .dmeta .wx{grid-column:1 / -1}
  .st-scope .dmeta .wx em{font-size:8.5px;line-height:1.45;margin-top:2px}
}

/* The transport controls belong to a chronology you play through. A theatre
   page is an index, so its rail is a list of operations to pick from and the
   play, pause and speed controls have nothing to run. */
.st-scope .console.is-index .rail-bar{display:none}
.st-scope .console.is-index .rail-scroll{border-top:0}

/* Server-rendered chronology: closed by default beneath the source list. */
.st-scope .st-chronology{margin-top:30px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.st-scope .st-chronology-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;cursor:pointer;list-style:none;color:var(--head)}
.st-scope .st-chronology-disclosure>summary::-webkit-details-marker{display:none}
.st-scope .st-chronology-disclosure>summary span{font-family:var(--disp);font-size:18px}
.st-scope .st-chronology-disclosure>summary small{font-size:12px;color:var(--cred);font-weight:400;text-align:right}
.st-scope .st-chronology-disclosure>summary:after{content:"+";flex:0 0 auto;font-size:22px;line-height:1;color:var(--mark)}
.st-scope .st-chronology-disclosure[open]>summary:after{content:"−"}
.st-scope .st-chronology-table-wrap{overflow-x:auto;padding:0 0 22px}
.st-scope .st-chronology-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.st-scope .st-chronology-table th{padding:11px 12px;text-align:left;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cred)}
.st-scope .st-chronology-table td{padding:14px 12px;vertical-align:top;border-bottom:1px solid var(--rule);color:var(--body)}
.st-scope .st-chronology-table th:nth-child(1),.st-scope .st-chronology-table td:nth-child(1){width:18%}
.st-scope .st-chronology-table th:nth-child(2),.st-scope .st-chronology-table td:nth-child(2){width:21%}
.st-scope .st-chronology-table th:nth-child(3),.st-scope .st-chronology-table td:nth-child(3){width:18%}
.st-scope .st-chronology-table th:nth-child(4),.st-scope .st-chronology-table td:nth-child(4){width:43%}
.st-scope .st-chronology-table strong{font-family:var(--disp);font-size:15px;color:var(--head)}
.st-scope .st-chronology-table p{margin:0 0 7px;line-height:1.55}
.st-scope .st-chronology-date{color:var(--cred);font-variant-numeric:tabular-nums}
.st-scope .st-chronology-sources{display:block;font-size:11px;color:var(--cred)}
@media(max-width:720px){
  .st-scope .st-chronology{margin-top:24px}
  .st-scope .st-chronology-disclosure>summary{align-items:flex-start;gap:12px;padding:15px 0}
  .st-scope .st-chronology-disclosure>summary small{display:none}
  .st-scope .st-chronology-table-wrap{overflow:visible;padding:0 0 16px}
  .st-scope table.st-chronology-table{display:block;width:100%;table-layout:auto;border:0}
  .st-scope .st-chronology-table thead{display:none}
  .st-scope .st-chronology-table tbody{display:grid;width:100%;gap:12px}
  .st-scope .st-chronology-table tr{display:grid;width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:15px;box-sizing:border-box;border:1px solid var(--rule);background:var(--panel)}
  .st-scope .st-chronology-table td,
  .st-scope .st-chronology-table td:nth-child(1),
  .st-scope .st-chronology-table td:nth-child(2),
  .st-scope .st-chronology-table td:nth-child(3),
  .st-scope .st-chronology-table td:nth-child(4){display:block;width:auto;min-width:0;padding:0;border:0}
  .st-scope .st-chronology-table td:before{content:attr(data-label);display:block;margin:0 0 4px;font-size:9px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--cred)}
  .st-scope .st-chronology-table td:nth-child(2){grid-column:1 / -1;order:1;margin-bottom:13px}
  .st-scope .st-chronology-table td:nth-child(2):before{display:none}
  .st-scope .st-chronology-table td:nth-child(1){order:2;padding-right:12px;border-right:1px solid var(--rule)}
  .st-scope .st-chronology-table td:nth-child(3){order:3;padding-left:12px}
  .st-scope .st-chronology-table td:nth-child(4){grid-column:1 / -1;order:4;margin-top:13px;padding-top:13px;border-top:1px solid var(--rule)}
  .st-scope .st-chronology-table strong{display:block;font-size:17px;line-height:1.3}
  .st-scope .st-chronology-table p{margin:0 0 8px;line-height:1.58}
  .st-scope .st-chronology-date{display:block;line-height:1.45}
  .st-scope .st-chronology-sources{margin-top:7px;line-height:1.4}
}
@media(max-width:420px){
  .st-scope .st-chronology-table tr{grid-template-columns:1fr}
  .st-scope .st-chronology-table td:nth-child(1),
  .st-scope .st-chronology-table td:nth-child(2),
  .st-scope .st-chronology-table td:nth-child(3),
  .st-scope .st-chronology-table td:nth-child(4){grid-column:1}
  .st-scope .st-chronology-table td:nth-child(1){padding:0 0 9px;border-right:0;border-bottom:1px solid var(--rule)}
  .st-scope .st-chronology-table td:nth-child(3){padding:9px 0 0}
}


/* Selected historical-map place. The wording comes directly from the active
   chronology entry, so every rail selection remains geographically named even
   though the source artwork itself has no baked-in city labels. */
.st-scope .st-event-place-icon{width:0!important;height:0!important;border:0!important;
  background:transparent!important;pointer-events:none!important}
.st-scope .st-event-place-label{position:absolute;left:0;top:0;display:block;max-width:190px;
  transform:translate(-50%,calc(-100% - 15px));padding:5px 8px;white-space:normal;
  background:rgba(38,48,56,.94);border:1px solid rgba(240,235,221,.5);color:#F0EBDD;
  font-family:var(--mono);font-size:9px;line-height:1.25;letter-spacing:.04em;text-align:center;
  text-shadow:none;box-shadow:none}
.st-scope .st-event-place-label:after{content:"";position:absolute;left:50%;bottom:-6px;
  margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid rgba(38,48,56,.94)}
@media(max-width:1000px){
  .st-scope .st-event-place-label{max-width:145px;font-size:8.5px;padding:4px 6px;
    transform:translate(-50%,calc(-100% - 12px))}
}


/* Search deep links: a brief editorial highlight so the landing target is obvious. */
.st-scope .person,.st-scope .item,.st-chronology tr{scroll-margin-top:96px}
.st-scope .st-search-target,.st-chronology .st-search-target{animation:stSearchTarget 2.4s ease-out}
@keyframes stSearchTarget{0%,24%{outline:2px solid var(--mark,#355F52);outline-offset:4px;background-color:rgba(53,95,82,.10)}100%{outline-color:transparent;background-color:transparent}}
@media(prefers-reduced-motion:reduce){.st-scope .st-search-target,.st-chronology .st-search-target{animation:none;outline:2px solid var(--mark,#355F52);outline-offset:4px}}

/* ================================================================
   v1.18 mobile command ledger
   The map, chronology and briefing drawer are one connected instrument.
   No external font files: typography uses durable system faces.
   ================================================================ */
.st-scope{
  --bg:#CBD2CE;
  --panel:#DCE0DD;
  --dark:#26302D;
  --head:#2C2119;
  --body:#2F4443;
  --data:#45302A;
  --cred:#6E625A;
  --mark:#47654E;
  --signal:#5E756A;
  --rule:#B0B9B5;
  --rule-2:#92A5A3;
  --disp:Baskerville,"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
}
.st-scope .rail-toggle,.st-scope .dock-cap{display:none}
.st-scope .mdate,.st-scope .mcopy{display:none}
.st-scope .dmeta,.st-scope .counter,.st-scope .phaselabel,.st-scope .timecode,
.st-scope .mapctl button,.st-scope figcaption{font-family:var(--mono)}

@media(max-width:1000px){
  .st-scope .console{
    --st-dock-h:42svh;
    --st-rail-w:68px;
    height:100svh;
    min-height:620px;
    max-height:none;
    background:#26302D;
  }
  .st-scope .console.dock-map{--st-dock-h:86px}
  .st-scope .console.dock-full{--st-dock-h:78svh}
  .st-scope .console.rail-open{--st-rail-w:min(48vw,210px)}

  /* The former floating readout repeated information already present in the
     briefing drawer. Mobile has one information hierarchy now. */
  .st-scope .timecode{display:none!important}

  /* Map key: a real, self-contained popover rather than a button that merely
     changes a parent class and appears to do nothing. */
  .st-scope .mapctl{
    top:14px;right:14px;z-index:910;display:flex;align-items:stretch;
    min-width:0;max-width:220px;pointer-events:auto
  }
  .st-scope .st-layer-toggle{
    display:block!important;min-height:40px;padding:0 13px!important;
    background:rgba(28,33,31,.96)!important;color:#EDF1EE!important;
    border:1px solid rgba(242,234,216,.58)!important;border-radius:2px!important;
    font-family:var(--mono)!important;font-size:11px!important;font-weight:600!important;
    letter-spacing:.07em!important;text-transform:uppercase;box-shadow:0 5px 16px rgba(0,0,0,.22)
  }
  .st-scope .mapctl>button:not(.st-layer-toggle),
  .st-scope .mapctl .st-basemap-status:not([hidden]){display:none}
  .st-scope .mapctl.is-open,.st-scope.layers-open .mapctl{
    width:min(220px,calc(100vw - 28px));padding:8px;background:#D7DEDA;
    border:1px solid #7C8B84;box-shadow:0 10px 30px rgba(0,0,0,.30)
  }
  .st-scope .mapctl.is-open>button:not(.st-layer-toggle),
  .st-scope.layers-open .mapctl>button:not(.st-layer-toggle){
    display:block;min-height:38px;padding:8px 10px;background:#E8ECE9;color:#29322F;
    border:0;border-top:1px solid #B0B9B5;text-align:left;font-family:var(--sans);
    font-size:13px;font-weight:600;letter-spacing:0
  }
  .st-scope .mapctl.is-open>button:not(.st-layer-toggle)[aria-pressed],
  .st-scope.layers-open .mapctl>button:not(.st-layer-toggle)[aria-pressed]{
    display:flex;align-items:center;justify-content:space-between;gap:12px
  }

  .st-scope .mapctl.is-open>button:not(.st-layer-toggle)[aria-pressed="true"],
  .st-scope.layers-open .mapctl>button:not(.st-layer-toggle)[aria-pressed="true"]{
    background:#2E3834;color:#EDF1EE
  }

  .st-scope .mapctl.is-open .st-layer-toggle,.st-scope.layers-open .st-layer-toggle{
    width:100%;margin-bottom:2px;background:#26302D!important;text-align:left
  }
  .st-scope .mapctl.is-open .st-basemap-status:not([hidden]),
  .st-scope.layers-open .mapctl .st-basemap-status:not([hidden]){
    display:block;max-width:none;padding:8px 9px;background:#CCD5D1;color:#53635E;
    font-size:10px;font-weight:600;line-height:1.35;text-align:left;letter-spacing:.04em
  }

  /* Keep Leaflet controls clear of the command ledger. */
  .st-scope .leaflet-top.leaflet-left{left:auto;right:14px;top:58px}
  .st-scope .leaflet-bottom.leaflet-right{bottom:calc(var(--st-dock-h) + 4px)}
  .st-scope .leaflet-control-zoom a{
    width:38px;height:38px;line-height:38px;background:#EDF1EE;color:#26302D;
    border-color:#92A5A3;font-size:23px;font-weight:600
  }
  .st-scope .leaflet-control-attribution{
    max-width:calc(100vw - var(--st-rail-w) - 8px);padding:2px 5px!important;
    white-space:normal;font-family:var(--mono);font-size:9px!important;line-height:1.2
  }

  /* --------------------------------------------------------------
     CHRONOLOGY SPINE
     A continuous ledger rather than a column of unrelated cards. The compact
     state shows actual dates. Expansion reveals event titles without covering
     the full map. The bottom edge joins the briefing drawer to form one L-shaped
     instrument.
     -------------------------------------------------------------- */
  .st-scope .rail{
    left:0;top:0;bottom:calc(var(--st-dock-h) - 1px);right:auto;
    width:var(--st-rail-w);height:auto;z-index:850;display:flex;flex-direction:column;
    background:rgba(28,33,31,.97);border:0;border-right:1px solid rgba(226,211,182,.34);
    border-radius:0;overflow:hidden;box-shadow:6px 0 20px rgba(0,0,0,.16);
    backdrop-filter:blur(4px);transition:width .22s ease,bottom .24s ease
  }
  .st-scope .rail-toggle{
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px;flex:0 0 54px;
    min-height:54px;padding:8px 9px 8px 12px;background:#2B3531;color:#E4EAE6;
    border:0;border-bottom:1px solid rgba(226,211,182,.25);cursor:pointer;text-align:left
  }
  .st-scope .rail-toggle-label{
    display:none;font-family:var(--mono);font-size:10px;font-weight:600;
    line-height:1;text-transform:uppercase;letter-spacing:.08em;color:#AEBBB5
  }
  .st-scope .rail-toggle-date{
    grid-column:1;font-family:var(--mono);font-size:11.5px;font-weight:600;line-height:1.15;
    color:#EDF1EE;letter-spacing:.03em
  }
  .st-scope .rail-toggle svg{grid-column:2;grid-row:1/3;width:14px;height:14px;fill:none;stroke:#8FA69B;stroke-width:1.8;transition:transform .2s ease}
  .st-scope .rail-open .rail-toggle-label{display:block}
  .st-scope .rail-open .rail-toggle-date{font-size:12px}
  .st-scope .rail-open .rail-toggle svg{transform:rotate(180deg)}

  .st-scope .rail-bar{
    order:3;flex:0 0 44px;min-height:44px;height:44px;padding:5px 7px;display:flex;
    align-items:center;justify-content:center;background:#2B3531;
    border:0;border-top:1px solid rgba(226,211,182,.20)
  }
  .st-scope .rail-hint,.st-scope .rail .phaselabel,.st-scope .rail .progress,.st-scope .rail .counter{display:none}
  .st-scope .rail .tctrl{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:5px}
  .st-scope .rail .tctrl button{
    width:auto;height:32px;border:1px solid rgba(226,211,182,.34);background:transparent;
    color:#EDF1EE;border-radius:0
  }
  .st-scope .rail .tctrl button:hover{background:#3A4742;border-color:#B9C6C0}

  .st-scope .rail-scroll{
    order:2;position:relative;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;
    display:flex;flex-direction:column;justify-content:flex-start;padding:8px 0 8px;
    scrollbar-width:none;overscroll-behavior:contain
  }
  .st-scope .rail-scroll::before{
    content:"";position:absolute;left:13px;top:8px;bottom:8px;width:1px;
    background:rgba(205,187,151,.32);pointer-events:none
  }
  .st-scope .rail-scroll::-webkit-scrollbar{display:none}
  .st-scope .chip,.st-scope .chip.dayfirst{
    flex:0 0 auto;width:100%;min-height:54px;padding:9px 7px 9px 27px;gap:0;
    border:0;background:transparent;color:#DDE5E1;position:relative;text-align:left;
    display:grid;grid-template-columns:1fr;align-content:center;font-family:var(--sans)
  }
  .st-scope .chip::before{
    content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;border-radius:50%;
    transform:translateY(-50%);background:#2E3834;border:1px solid #7D9188;z-index:1
  }
  .st-scope .chip.dayfirst{border:0}
  .st-scope .chip.dayfirst::after{
    content:"";position:absolute;left:8px;top:0;width:11px;height:1px;background:#687A72
  }
  .st-scope .chip .cday,.st-scope .chip .ctm,.st-scope .chip .ctt,.st-scope .chip .ccat{display:none!important}
  .st-scope .chip .mdate{display:block;min-width:0;font-family:var(--mono);line-height:1.05}
  .st-scope .chip .mdate b{
    display:block;font-size:11.5px;font-weight:600;letter-spacing:.025em;color:#E5EBE8;white-space:nowrap
  }
  .st-scope .chip .mdate small{
    display:block;margin-top:3px;font-size:9.5px;font-weight:600;letter-spacing:.06em;color:#87958F
  }
  .st-scope .chip .mcopy{display:none}
  .st-scope .chip .side{display:none}
  .st-scope .chip:hover{background:rgba(244,234,216,.07)}
  .st-scope .chip[aria-current="true"]{
    background:#DCE3DF;color:#29322F;box-shadow:none
  }
  .st-scope .chip[aria-current="true"]::before{
    background:#47654E;border:2px solid #DCE3DF;box-shadow:0 0 0 1px #47654E
  }
  .st-scope .chip[aria-current="true"] .mdate b{color:#26302D}
  .st-scope .chip[aria-current="true"] .mdate small{color:#5D6C65}

  .st-scope .rail-open .chip{
    min-height:64px;grid-template-columns:58px minmax(0,1fr);column-gap:9px;padding-right:10px
  }
  .st-scope .rail-open .chip .mdate b{font-size:11px}
  .st-scope .rail-open .chip .mdate small{font-size:9px}
  .st-scope .rail-open .chip .mcopy{
    display:-webkit-box;min-width:0;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.22;color:#D4DEDA
  }
  .st-scope .rail-open .chip[aria-current="true"] .mcopy{color:#29322F}

  /* --------------------------------------------------------------
     BRIEFING DRAWER
     Dark command header connects directly to the chronology spine. The cream
     paper body is the report itself. Map / Brief / Full are real layout states,
     and the grip also responds to vertical swipes.
     -------------------------------------------------------------- */
  .st-scope .dock{
    left:0;right:0;bottom:0;top:auto;width:auto;height:var(--st-dock-h);z-index:860;
    display:flex;flex-direction:column;transform:none;background:#DCE0DD;border:0;
    box-shadow:0 -10px 28px rgba(0,0,0,.22);transition:height .24s ease
  }
  .st-scope .dock::before{display:none}
  .st-scope .dock-cap{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;
    flex:0 0 auto;min-height:86px;padding:14px 12px 12px calc(var(--st-rail-w) + 12px);
    background:#26302D;color:#E9EEEB;border-top:2px solid #47654E;
    transition:padding-left .22s ease
  }
  .st-scope .dock-grip{
    position:absolute;top:-11px;left:50%;width:56px;height:22px;transform:translateX(-50%);
    border:1px solid #6D8177;border-bottom:0;background:#26302D;cursor:ns-resize;border-radius:2px 2px 0 0
  }
  .st-scope .dock-grip span{display:block;width:28px;height:3px;margin:8px auto 0;background:#9FB0A8;border-radius:20px}
  .st-scope .dock-identity{min-width:0}
  .st-scope .dock-context{
    display:flex;gap:7px;align-items:center;min-width:0;margin-bottom:4px;font-family:var(--mono);
    font-size:10px;font-weight:600;line-height:1.25;letter-spacing:.035em;text-transform:uppercase;color:#AAB9B2
  }
  .st-scope .dock-context i{font-style:normal;color:#60736A}
  .st-scope .dock-place{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .st-scope .dock-current-title{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-family:var(--disp);font-size:19px;font-weight:600;line-height:1.08;letter-spacing:0;color:#F4F7F5
  }
  .st-scope .dock-modes{
    display:grid;grid-template-columns:repeat(3,auto);align-self:center;border:1px solid #6C7C75
  }
  .st-scope .dock-modes button{
    min-width:43px;height:34px;padding:0 8px;border:0;border-right:1px solid #6C7C75;
    background:transparent;color:#B3C0BA;font-family:var(--mono);font-size:9px;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;cursor:pointer
  }
  .st-scope .dock-modes button:last-child{border-right:0}
  .st-scope .dock-modes button[aria-pressed="true"]{background:#DCE3DF;color:#29322F}

  .st-scope .dock-head{display:none}
  .st-scope .dock-scroll{
    min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 32px;
    background:#DCE0DD;scrollbar-width:thin;scrollbar-color:#7D8E86 #D4DEDA
  }
  .st-scope .dock-scroll p{
    max-width:72ch;margin:0 0 15px;font-family:var(--sans);font-size:16.5px;font-weight:500;
    line-height:1.56;color:#2F4443
  }
  .st-scope .dmeta{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;
    margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid #B0B9B5;
    font-size:11px;font-weight:600;line-height:1.25;letter-spacing:.065em;color:#6E625A;text-transform:uppercase
  }
  .st-scope .dmeta b{
    display:block;margin-top:5px;font-family:var(--sans);font-size:14px;font-weight:600;
    line-height:1.3;letter-spacing:0;text-transform:none;color:#45302A
  }
  .st-scope .dmeta .meta-date,.st-scope .dmeta .meta-location{display:none}
  .st-scope .pull{
    margin:18px 0;padding:15px 16px;border-left:3px solid #5E756A;background:#D1DAD6;
    font-family:var(--disp);font-size:16px;font-weight:500;font-style:normal;line-height:1.48;color:#2E3733
  }
  .st-scope .media{margin-top:20px;padding-top:18px;border-top:1px solid #B0B9B5}
  .st-scope .media img,.st-scope .media video{max-height:48svh;background:#26302D}
  .st-scope figcaption{
    padding-top:10px;font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.01em;color:#5B6762
  }
  .st-scope .opencta{
    display:block;margin:0 0 18px;padding:12px 14px;font-family:var(--mono);font-size:11px;
    font-weight:600;letter-spacing:.05em
  }
  .st-scope .dock-collapse{display:none}

  .st-scope .console.dock-map .dock-cap{
    min-height:86px;height:86px;grid-template-columns:minmax(0,1fr) auto
  }
  .st-scope .console.dock-map .dock-scroll{display:none}
  .st-scope .console.dock-full{--st-rail-w:0px}
  .st-scope .console.dock-full .rail{display:none}
  .st-scope .console.dock-full .dock-cap{padding-left:14px}
  .st-scope .console.dock-full .dock-scroll{padding-bottom:44px}

  /* Full-reading mode removes the chronology spine entirely. Navigation moves
     beside the active headline so the same previous/next controls never appear
     twice in the same view. */
  .st-scope .dock-title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
  .st-scope .dock-nav{display:none;gap:6px;align-items:center}
  .st-scope .console.dock-full .dock-nav{display:flex}
  .st-scope .dock-nav button{
    width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #75887E;
    background:#2E3934;color:#E7ECE9;cursor:pointer
  }
  .st-scope .dock-nav button:hover{background:#3A4742;border-color:#A8B8B0}
  .st-scope .dock-nav svg{width:14px;height:14px;fill:currentColor}

  /* Selection is communicated by the chronology tab and title change; no flash. */
  .st-scope .dock.is-updated .dock-head{animation:none}
}

@media(max-width:560px){
  .st-scope .console{--st-rail-w:64px}
  .st-scope .console.rail-open{--st-rail-w:min(58vw,198px)}
  .st-scope .dock-cap{min-height:94px;padding-right:8px;gap:7px 8px}
  .st-scope .dock-current-title{font-size:18px}
  .st-scope .dock-nav button{width:34px;height:34px}
  .st-scope .dock-context{font-size:9px}
  .st-scope .dock-modes button{min-width:39px;padding:0 5px;font-size:8px}
  .st-scope .dock-scroll{padding:16px 15px 30px}
  .st-scope .dock-scroll p{font-size:16px;font-weight:500;line-height:1.54}
  .st-scope .dmeta{gap:10px 13px}
  .st-scope .dmeta b{font-size:13px}
  .st-scope .rail-toggle{padding-left:9px}
  .st-scope .chip,.st-scope .chip.dayfirst{padding-left:25px;padding-right:5px}
  .st-scope .rail-scroll::before{left:11px}
  .st-scope .chip::before{left:8px}
  .st-scope .rail-open .chip{grid-template-columns:52px minmax(0,1fr);column-gap:7px}
  .st-scope .rail-open .chip .mcopy{font-size:12px}
}

@media(max-width:390px){
  .st-scope .dock-cap{grid-template-columns:minmax(0,1fr);padding-top:11px;padding-bottom:9px}
  .st-scope .dock-modes{position:absolute;right:7px;top:7px}
  .st-scope .dock-identity{padding-right:120px}
  .st-scope .dock-context{padding-right:0}
  .st-scope .dock-current-title{font-size:17px}
}

@media(max-width:1000px) and (prefers-reduced-motion:reduce){
  .st-scope .rail,.st-scope .dock,.st-scope .dock-cap,.st-scope .rail-toggle svg{transition:none}
}

/* v1.18.1 interaction/readability corrections */
@media(max-width:1000px){
  .st-scope .console.dock-full{--st-rail-w:0px}
  .st-scope .dock-nav button:disabled{opacity:.34;cursor:default;background:#2A322F;border-color:#596861}
}

/* ================================================================
   v1.18.2 console refinement
   Chronology is a ruler, not a stack of date cards. Tablet/mobile console
   height is bounded, map controls stop competing with the story, and the map
   key explains the symbols as well as toggling layers.
   ================================================================ */
.st-scope .chip .mtime{display:none}
.st-scope .st-map-legend{display:none}

@media(max-width:1000px){
  /* A tall desktop/tablet browser should not turn an embedded console into an
     entire page of map. Phones still get the full-viewport instrument below. */
  .st-scope .console{
    --st-dock-h:300px;
    --st-rail-w:64px;
    height:min(840px,92svh);
    min-height:640px;
    max-height:840px;
  }
  .st-scope .console.dock-map{--st-dock-h:76px}
  .st-scope .console.dock-full{--st-dock-h:78%}
  .st-scope .console.rail-open{--st-rail-w:min(250px,34vw)}

  /* Compact controls leave the map to the map. */
  .st-scope .mapctl{top:12px;right:12px;max-width:208px}
  .st-scope .st-layer-toggle{
    min-height:34px!important;padding:0 10px!important;
    font-size:10px!important;letter-spacing:.055em!important;
    box-shadow:0 3px 12px rgba(0,0,0,.18)
  }
  .st-scope .st-layer-toggle span::before{
    content:"◇";margin-right:6px;color:#8FA69B;font-size:11px
  }
  .st-scope .mapctl.is-open,.st-scope.layers-open .mapctl{
    width:min(208px,calc(100vw - 24px));padding:7px
  }
  .st-scope .st-map-legend{
    width:100%;padding:8px 9px 7px;grid-template-columns:1fr 1fr;gap:6px 10px;
    background:#D4DDD9;border-bottom:1px solid #B0B9B5;color:#303B36;
    font-family:var(--mono);font-size:10px;font-weight:600;line-height:1.2
  }
  .st-scope .mapctl.is-open .st-map-legend,
  .st-scope.layers-open .mapctl .st-map-legend{display:grid}
  .st-scope .st-map-legend span{display:flex;align-items:center;gap:6px;white-space:nowrap}
  .st-scope .st-map-legend span:last-child{grid-column:1 / -1}
  .st-scope .st-key-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#625f56;box-shadow:0 0 0 1px #DCE0DD,0 0 0 2px #68766F}
  .st-scope .st-key-dot.allied{background:#355f52}
  .st-scope .st-key-dot.axis{background:#663a31}
  .st-scope .st-key-dot.other{background:#625f56;transform:rotate(45deg);border-radius:1px}

  .st-scope .leaflet-top.leaflet-left{right:12px;top:50px}
  .st-scope .leaflet-control-zoom{box-shadow:0 3px 12px rgba(0,0,0,.16)}
  .st-scope .leaflet-control-zoom a{
    width:32px;height:32px;line-height:32px;font-size:20px;font-weight:600
  }
  .st-scope .leaflet-control-attribution{
    max-width:calc(100vw - var(--st-rail-w) - 12px);font-size:8px!important;
    opacity:.82
  }

  /* Chronology ruler. The year belongs in the rail header; repeating it on every
     event consumed half of the useful width. Day boundaries get labels, entries
     on the same day get their time, and the selected entry always identifies
     itself even when it is not the first event of that day. */
  .st-scope .rail{
    background:rgba(27,32,30,.975);box-shadow:4px 0 14px rgba(0,0,0,.14);
    border-right-color:rgba(226,211,182,.28)
  }
  .st-scope .rail-toggle{
    flex-basis:48px;min-height:48px;padding:7px 7px 7px 10px;background:#2A3430
  }
  .st-scope .rail-toggle-date{font-size:10.5px;line-height:1.08;letter-spacing:.02em}
  .st-scope .rail-toggle svg{width:12px;height:12px}
  .st-scope .rail-scroll{padding:3px 0 4px}
  .st-scope .rail-scroll::before{left:14px;top:4px;bottom:4px;background:rgba(205,187,151,.38)}
  .st-scope .chip,.st-scope .chip.dayfirst{
    min-height:40px;padding:6px 5px 6px 25px;align-content:center
  }
  .st-scope .chip.dayfirst{min-height:50px}
  .st-scope .chip::before{left:11px;width:6px;height:6px}
  .st-scope .chip.dayfirst::after{left:7px;width:15px;background:#70867B}
  .st-scope .chip .mdate{display:none;line-height:1.02}
  .st-scope .chip.dayfirst .mdate,
  .st-scope .chip[aria-current="true"] .mdate{display:block}
  .st-scope .chip .mdate b{font-size:10.5px;letter-spacing:.02em}
  .st-scope .chip .mdate small{display:none}
  .st-scope .chip .mtime{
    display:block;margin-top:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-family:var(--mono);font-size:8.5px;font-weight:600;
    line-height:1;color:#8D9B94;letter-spacing:.025em
  }
  .st-scope .chip:not(.dayfirst):not([aria-current="true"]) .mtime{
    margin-top:0;font-size:9.5px;color:#C6D1CC
  }
  .st-scope .chip[aria-current="true"]{
    background:#DCE3DF;box-shadow:inset 3px 0 0 #5E756A
  }
  .st-scope .chip[aria-current="true"] .mtime{color:#5F6C66}
  .st-scope .rail-bar{flex-basis:40px;min-height:40px;height:40px;padding:4px 6px}
  .st-scope .rail .tctrl button{height:30px}

  /* Expanded chronology behaves like an archival index: date/time is the left
     column, dispatch headline is the right. */
  .st-scope .rail-open .rail-toggle{padding-left:12px}
  .st-scope .rail-open .rail-toggle-label{font-size:9px}
  .st-scope .rail-open .rail-toggle-date{font-size:11px}
  .st-scope .rail-open .chip,.st-scope .rail-open .chip.dayfirst{
    min-height:58px;grid-template-columns:64px minmax(0,1fr);column-gap:10px;
    padding:8px 10px 8px 27px
  }
  .st-scope .rail-open .chip .mdate{display:block}
  .st-scope .rail-open .chip .mdate b{font-size:10.5px}
  .st-scope .rail-open .chip .mdate small{display:block;margin-top:3px;font-size:8px}
  .st-scope .rail-open .chip .mtime{font-size:8.5px;margin-top:3px}
  .st-scope .rail-open .chip .mcopy{
    font-size:12.5px;line-height:1.24;font-weight:600;align-self:center
  }

  /* Briefing head reads as the lower edge of the same instrument. Less height,
     stronger hierarchy, no oversized segmented control. */
  .st-scope .dock-cap{
    min-height:76px;padding:11px 12px 10px calc(var(--st-rail-w) + 14px);
    grid-template-columns:minmax(0,1fr) auto;gap:7px 14px
  }
  .st-scope .dock-grip{top:-9px;width:48px;height:19px}
  .st-scope .dock-grip span{width:24px;height:3px;margin-top:7px}
  .st-scope .dock-context{margin-bottom:3px;font-size:9.5px;letter-spacing:.025em;color:#AEBBB5}
  .st-scope .dock-current-title{
    font-size:21px;line-height:1.08;letter-spacing:-.005em
  }
  .st-scope .dock-modes{border-color:#667870}
  .st-scope .dock-modes button{
    min-width:48px;height:32px;padding:0 8px;font-size:9px;letter-spacing:.035em
  }
  .st-scope .dock-scroll{padding:16px 20px 30px}
  .st-scope .dock-scroll p{font-size:16px;font-weight:500;line-height:1.58}
  .st-scope .dmeta{gap:10px 20px;margin-bottom:16px;padding-bottom:14px}
  .st-scope .dmeta b{font-size:14px;line-height:1.28}
  .st-scope .dmeta .meta-time b{font-variant-numeric:tabular-nums}

  /* In reading mode the sliver of remaining map is context, not a control
     surface. Removing buttons there keeps the headline/navigation as the only
     active interface. */
  .st-scope .console.dock-full .mapctl,
  .st-scope .console.dock-full .leaflet-control-zoom{display:none!important}
  .st-scope .console.dock-full .leaflet-control-attribution{opacity:.58}
  .st-scope .console.dock-full .dock-cap{min-height:78px;padding-left:16px}
  .st-scope .console.dock-full .dock-current-title{font-size:22px}
  .st-scope .console.dock-full .dock-scroll{padding-left:clamp(20px,5vw,52px);padding-right:clamp(20px,5vw,52px)}
  .st-scope .console.dock-full .dock-scroll p{max-width:76ch;font-size:17px;line-height:1.62}

  /* The selected map symbol stays legible after the locate pulse has finished. */
  .st-scope .pin.pin-glyph.on{
    box-shadow:0 0 0 2px rgba(242,234,216,.92),0 0 0 4px rgba(24,28,26,.62)
  }
  .st-scope .pin.pin-glyph.on svg{
    filter:drop-shadow(0 0 2px #DCE0DD) drop-shadow(0 0 4px #DCE0DD) drop-shadow(0 1px 1px rgba(0,0,0,.75))
  }
}

/* True phone layout: use the viewport, but make the compact ruler narrower and
   keep controls clear of the reading area. */
@media(max-width:700px){
  .st-scope .console{
    --st-dock-h:42svh;--st-rail-w:56px;
    height:100svh;min-height:600px;max-height:none
  }
  .st-scope .console.dock-map{--st-dock-h:72px}
  .st-scope .console.dock-full{--st-dock-h:78svh}
  .st-scope .console.rail-open{--st-rail-w:min(232px,68vw)}
  .st-scope .rail-toggle{padding-left:8px}
  .st-scope .rail-toggle-date{font-size:9.5px}
  .st-scope .rail-scroll::before{left:11px}
  .st-scope .chip,.st-scope .chip.dayfirst{padding-left:21px;padding-right:4px}
  .st-scope .chip::before{left:8px}
  .st-scope .chip.dayfirst::after{left:5px;width:12px}
  .st-scope .chip .mdate b{font-size:9.5px}
  .st-scope .chip .mtime{font-size:8px}
  .st-scope .rail-open .chip,.st-scope .rail-open .chip.dayfirst{
    grid-template-columns:58px minmax(0,1fr);padding-left:23px
  }
  .st-scope .dock-cap{min-height:82px;padding:10px 8px 9px calc(var(--st-rail-w) + 10px);gap:6px 8px}
  .st-scope .dock-current-title{font-size:18px}
  .st-scope .dock-context{font-size:8.5px}
  .st-scope .dock-modes button{min-width:40px;height:30px;padding:0 5px;font-size:8px}
  .st-scope .dock-scroll{padding:15px 15px 28px}
  .st-scope .dock-scroll p{font-size:16px;line-height:1.56}
  .st-scope .dmeta{gap:9px 13px}
  .st-scope .dmeta b{font-size:13px}
  .st-scope .mapctl{top:9px;right:9px}
  .st-scope .st-layer-toggle{min-height:32px!important}
  .st-scope .leaflet-top.leaflet-left{right:9px;top:46px}
  .st-scope .leaflet-control-zoom a{width:30px;height:30px;line-height:30px;font-size:19px}
}

@media(max-width:390px){
  .st-scope .dock-cap{grid-template-columns:minmax(0,1fr);min-height:90px}
  .st-scope .dock-modes{position:absolute;right:7px;top:7px}
  .st-scope .dock-identity{padding-right:116px}
  .st-scope .console.dock-full .dock-identity{padding-right:0}
  .st-scope .console.dock-full .dock-modes{display:none}
}

/* v1.18.2 phone header refinement: the three drawer states sit on the drawer
   edge instead of taking half of the headline width. */
@media(max-width:700px){
  .st-scope .dock-cap{grid-template-columns:minmax(0,1fr);padding-right:10px}
  .st-scope .dock-modes{
    position:absolute;right:8px;top:-31px;z-index:2;background:#26302D;
    border-color:#6C8177;box-shadow:0 -2px 8px rgba(0,0,0,.12)
  }
  .st-scope .dock-modes button{height:30px}
  .st-scope .dock-identity{padding-right:0}
  .st-scope .dock-current-title{-webkit-line-clamp:3}
}

@media(max-width:390px){
  .st-scope .dock-cap{min-height:94px;padding-top:10px;padding-bottom:9px}
  .st-scope .dock-modes{position:absolute;right:7px;top:-31px;display:grid}
  .st-scope .console.dock-full .dock-modes{display:grid}
  .st-scope .console.dock-full .dock-identity{padding-right:0}
  .st-scope .dock-current-title{font-size:17.5px;line-height:1.08}
}


/* ================================================================
   v1.18.3 typographic + instrument refinement
   One editorial serif, one neutral interface/body sans. The console no longer
   shouts with 700/800-weight labels; hierarchy comes from scale, spacing and
   contrast instead. Mobile has only Brief / Full reading states.
   ================================================================ */
.st-scope{
  --disp:Baskerville,"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
  font-family:var(--sans);font-weight:400;line-height:1.62
}
.st-scope h1,.st-scope h2,.st-scope h3,.st-scope h4{font-family:var(--disp);font-weight:600;letter-spacing:0}
.st-scope strong,.st-scope b{font-weight:600}
.st-scope p{font-weight:400}
.st-scope .hero .lede,.st-scope .fact dd small{font-weight:400}
.st-scope .dock-scroll p{font-family:var(--sans);font-weight:400;line-height:1.62}
.st-scope .dmeta{font-weight:600;letter-spacing:.055em}
.st-scope .dmeta b{font-family:var(--sans);font-weight:500}
.st-scope .dock-context,.st-scope .rail-toggle-label,.st-scope .mapctl button,
.st-scope .phaselabel,.st-scope .counter,.st-scope .chip .mdate,
.st-scope .chip .mtime,.st-scope figcaption{font-family:var(--sans)}
.st-scope .dock-current-title{font-family:var(--disp);font-weight:600}
.st-scope .pull{font-family:var(--disp);font-weight:400}
.st-scope .chip .mcopy{font-family:var(--sans);font-weight:500}

/* 1940s-style pilot lamps: pressed/enabled = green jewel, released/disabled =
   red jewel. The metal bezel and glass highlight communicate state without
   writing ON/OFF into the key. aria-pressed remains the accessible state. */
.st-scope .mapctl button[aria-pressed]::after{
  content:"";display:inline-block;flex:0 0 auto;width:12px;height:12px;margin-left:10px;
  border-radius:50%;border:2px solid #67645b;
  background:radial-gradient(circle at 35% 28%,#ffd6c6 0 9%,#c54d3d 16%,#8d2e24 48%,#4b1712 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.42),inset 0 1px 1px rgba(255,255,255,.4),
             0 0 0 1px #B0B9B5,0 1px 2px rgba(0,0,0,.35);
  vertical-align:-2px
}
.st-scope .mapctl button[aria-pressed="true"]::after{
  background:radial-gradient(circle at 35% 28%,#d8f3d5 0 9%,#6ca36c 17%,#386f48 50%,#173a28 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.42),inset 0 1px 1px rgba(255,255,255,.46),
             0 0 0 1px #B0B9B5,0 1px 2px rgba(0,0,0,.35),0 0 7px rgba(66,124,78,.28)
}

@media(min-width:1001px){
  .st-scope .mapctl button[aria-pressed]{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .st-scope .dock-head h3{font-weight:600}
  .st-scope .dock-scroll p{font-size:15.5px}
}

@media(max-width:1000px){
  /* Mobile reading modes are deliberately only Brief and Full. */
  .st-scope .dock-modes{grid-template-columns:repeat(2,auto)}
  .st-scope .dock-modes [data-dock-state="map"]{display:none!important}
  .st-scope .dock-modes button{font-weight:600;letter-spacing:.035em}

  .st-scope .mapctl.is-open>button:not(.st-layer-toggle)[aria-pressed],
  .st-scope.layers-open .mapctl>button:not(.st-layer-toggle)[aria-pressed]{
    display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:500
  }
  .st-scope .mapctl.is-open>button:not(.st-layer-toggle)[aria-pressed="true"],
  .st-scope.layers-open .mapctl>button:not(.st-layer-toggle)[aria-pressed="true"]{
    background:#E8ECE9;color:#29322F
  }
  .st-scope .mapctl.is-open>button:not(.st-layer-toggle)[aria-pressed]::after,
  .st-scope.layers-open .mapctl>button:not(.st-layer-toggle)[aria-pressed]::after{margin-left:auto}

  .st-scope .st-layer-toggle{font-weight:600!important}
  .st-scope .st-map-legend{font-weight:500}
  .st-scope .rail-toggle-date{font-weight:600}
  .st-scope .chip .mdate b{font-weight:600}
  .st-scope .chip .mdate small,.st-scope .chip .mtime{font-weight:500}
  .st-scope .rail-open .chip .mcopy{font-weight:500}
  .st-scope .dock-context{font-weight:500;letter-spacing:.025em}
  .st-scope .dock-current-title{font-weight:600}
  .st-scope .dock-scroll p{font-weight:400}
  .st-scope .dmeta{font-weight:600}
  .st-scope .dmeta b{font-weight:500}
  .st-scope figcaption{font-weight:400}
}


/* ================================================================
   v1.18.4 palette restoration
   Restore the original cool field-grey/green site foundation. Warm parchment
   is no longer used as a page or console background; brass/red are reserved
   for small instrument details and Axis/off-state signalling only.
   ================================================================ */
.st-scope{
  --bg:#CBD2CE;--panel:#DCE0DD;--dark:#263038;
  --head:#2C2119;--body:#2F4443;--data:#45302A;--cred:#7D5F52;
  --mark:#47654E;--signal:#5E756A;--rule:#B0B9B5;--rule-2:#92A5A3;
}


/* ================================================================
   v1.18.5 people-card spacing + rank legibility
   Keep the command portraits quiet and editorial: rank/position labels need
   enough contrast to read on the field-grey panel, and notes should follow the
   role naturally instead of being pushed to an arbitrary common baseline.
   ================================================================ */
.st-scope .person{padding-bottom:0}
.st-scope .person .body{
  padding:18px 19px 21px;
  gap:7px;
}
.st-scope .person .rank{
  color:var(--data);
  font-size:10px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:.075em;
}
.st-scope .person h4{
  margin-top:2px;
  font-size:16px;
}
.st-scope .person .role{
  margin-top:1px;
  color:var(--body);
  font-size:10px;
  line-height:1.55;
}
.st-scope .person .note{
  margin:11px 0 0;
  padding-top:13px;
  color:var(--body);
}
.st-scope .person figcaption{
  padding:0 19px 18px;
}

@media(max-width:1000px){
  .st-scope .person .body{padding:17px 17px 19px}
  .st-scope .person figcaption{padding:0 17px 17px}
}

/* ================================================================
   v1.18.6 console coherence pass
   One compact map-key rule at every viewport size, a cleaner chronology ruler,
   and a quieter type scale that lets the operation page remain the visual lead.
   ================================================================ */
.st-scope{
  --sans:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* Keep event/navigation typography in the same sans family. The serif is
   reserved for editorial headlines, not every piece of interface copy. */
.st-scope .chip .cday,
.st-scope .chip .ctm,
.st-scope .chip .ctt,
.st-scope .chip .ccat,
.st-scope .rail-bar,
.st-scope .rail-toggle,
.st-scope .mapctl,
.st-scope .dock-context,
.st-scope .dmeta{font-family:var(--sans)}
.st-scope .chip .cday{font-size:10px;font-weight:500;letter-spacing:.035em}
.st-scope .chip .ctm{font-size:11.5px;font-weight:500}
.st-scope .chip .ctt{font-family:var(--sans);font-size:13.5px;font-weight:500;line-height:1.3;letter-spacing:0}
.st-scope .chip .ccat{font-size:9.5px;font-weight:500;letter-spacing:.035em}
.st-scope .dock-scroll p{font-size:15px;font-weight:400;line-height:1.66}

/* --------------------------------------------------------------
   MAP KEY — one component, one rule, desktop through phone.
   Closed: one compact command button. Open: the same framed key everywhere.
   The jewel lamp is the state indicator; active rows no longer invert colour.
   -------------------------------------------------------------- */
.st-scope .mapctl{
  position:absolute;top:16px;right:16px;z-index:910;
  display:flex;flex-direction:column;align-items:flex-end;gap:0;
  width:auto;max-width:248px;padding:0;background:transparent;border:0;
}
.st-scope .st-layer-toggle{
  display:flex!important;align-items:center;justify-content:flex-start;
  min-height:38px;padding:0 14px!important;border:1px solid #788981!important;
  border-radius:2px!important;background:#263038!important;color:#F0F3F1!important;
  box-shadow:0 4px 14px rgba(20,28,25,.16);cursor:pointer;
  font-family:var(--sans)!important;font-size:11px!important;font-weight:600!important;
  line-height:1;letter-spacing:.055em!important;text-transform:uppercase;
}
.st-scope .st-layer-toggle span::before{
  content:"◇";display:inline-block;margin-right:8px;color:#8FA69B;font-size:11px;line-height:1
}
.st-scope .mapctl>button:not(.st-layer-toggle),
.st-scope .mapctl .st-basemap-status:not([hidden]),
.st-scope .st-map-legend{display:none}
.st-scope .mapctl.is-open,
.st-scope.layers-open .mapctl{
  align-items:stretch;width:min(244px,calc(100vw - 24px));max-width:244px;
  padding:7px;background:rgba(214,223,219,.97);border:1px solid #7C8B84;
  box-shadow:0 9px 28px rgba(20,28,25,.24);backdrop-filter:blur(5px)
}
.st-scope .mapctl.is-open .st-layer-toggle,
.st-scope.layers-open .mapctl .st-layer-toggle{
  width:100%;margin:0 0 7px!important;box-shadow:none;text-align:left
}
.st-scope .mapctl.is-open .st-map-legend,
.st-scope.layers-open .mapctl .st-map-legend{
  display:grid;width:100%;grid-template-columns:1fr 1fr;gap:6px 10px;
  padding:4px 5px 10px;margin:0 0 2px;border-bottom:1px solid #AAB6B0;
  background:transparent;color:#34423C;font-family:var(--sans);font-size:11px;
  font-weight:500;line-height:1.25;letter-spacing:0
}
.st-scope .st-map-legend span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.st-scope .st-map-legend span:last-child{grid-column:1 / -1}
.st-scope .mapctl.is-open>button:not(.st-layer-toggle),
.st-scope.layers-open .mapctl>button:not(.st-layer-toggle){
  display:flex!important;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:42px;padding:8px 10px!important;margin:0;
  border:0!important;border-top:1px solid #B5BFBA!important;border-radius:0!important;
  background:#E5EAE7!important;color:#2E3934!important;box-shadow:none!important;
  text-align:left;font-family:var(--sans)!important;font-size:12.5px!important;
  font-weight:500!important;line-height:1.25;letter-spacing:0!important;text-transform:none
}
.st-scope .mapctl.is-open>button:not(.st-layer-toggle):first-of-type,
.st-scope.layers-open .mapctl>button:not(.st-layer-toggle):first-of-type{border-top:0!important}
.st-scope .mapctl.is-open>button:not(.st-layer-toggle)[aria-pressed="true"],
.st-scope.layers-open .mapctl>button:not(.st-layer-toggle)[aria-pressed="true"]{
  background:#E5EAE7!important;color:#2E3934!important
}
.st-scope .mapctl.is-open>button:not(.st-layer-toggle):hover,
.st-scope.layers-open .mapctl>button:not(.st-layer-toggle):hover{background:#DCE3DF!important}
.st-scope .mapctl.is-open .st-basemap-status:not([hidden]),
.st-scope.layers-open .mapctl .st-basemap-status:not([hidden]){
  display:block;max-width:none;margin-top:2px;padding:7px 9px;background:#CCD5D1;
  color:#53635E;font-family:var(--sans);font-size:9.5px;font-weight:500;
  line-height:1.35;letter-spacing:.02em;text-align:left;text-transform:none
}
.st-scope .mapctl button[aria-pressed]::after{width:11px;height:11px;margin-left:auto}

@media(min-width:1001px){
  .st-scope .mapctl{top:18px;right:18px}
  .st-scope .st-layer-toggle{min-height:40px;font-size:11.5px!important}
}

/* --------------------------------------------------------------
   CHRONOLOGY — quieter type, deliberate month grouping and actual breathing
   room under the selected-date header. Month transitions now have a visible
   pause instead of reading as one undifferentiated column of numbers.
   -------------------------------------------------------------- */
@media(max-width:1000px){
  .st-scope .console{--st-rail-w:72px}
  .st-scope .console.rail-open{--st-rail-w:min(252px,38vw)}
  .st-scope .rail{border-right-color:rgba(151,171,162,.46);box-shadow:3px 0 12px rgba(0,0,0,.12)}
  .st-scope .rail-toggle{
    flex-basis:58px;min-height:58px;padding:9px 9px 12px 12px;
    background:#26312D;border-bottom:0
  }
  .st-scope .rail-toggle-date{
    font-size:11.5px;font-weight:500;line-height:1.12;letter-spacing:0;
    font-variant-numeric:tabular-nums
  }
  .st-scope .rail-toggle-label{font-size:9px;font-weight:500;letter-spacing:.065em}
  .st-scope .rail-scroll{padding:12px 0 6px}
  .st-scope .rail-scroll::before{left:15px;top:12px;bottom:6px;background:rgba(151,171,162,.5)}
  .st-scope .chip,.st-scope .chip.dayfirst{
    min-height:42px;padding:6px 6px 6px 28px;font-family:var(--sans)
  }
  .st-scope .chip.dayfirst{min-height:50px}
  .st-scope .chip.monthfirst:not(:first-child){margin-top:11px}
  .st-scope .chip.monthfirst:not(:first-child)::after{
    top:-6px;left:8px;width:16px;background:#62766D
  }
  .st-scope .chip::before{left:12px;width:6px;height:6px}
  .st-scope .chip.dayfirst::after{left:8px;width:16px}
  .st-scope .chip .mdate{font-family:var(--sans);font-variant-numeric:tabular-nums}
  .st-scope .chip .mdate b{
    font-size:11.5px;font-weight:500;line-height:1.05;letter-spacing:0
  }
  .st-scope .chip .mtime{
    margin-top:4px;font-family:var(--sans);font-size:9px;font-weight:400;
    line-height:1.05;letter-spacing:0;color:#94A39C
  }
  .st-scope .chip:not(.dayfirst):not([aria-current="true"]) .mtime{
    font-size:10.5px;font-weight:400;color:#C8D2CD
  }
  .st-scope .rail-open .chip,.st-scope .rail-open .chip.dayfirst{
    grid-template-columns:66px minmax(0,1fr);column-gap:10px;padding-left:29px
  }
  .st-scope .rail-open .chip .mcopy{
    font-size:12.5px;font-weight:500;line-height:1.28;letter-spacing:0
  }
  .st-scope .rail-bar{height:40px;min-height:40px;padding:4px 7px}
  .st-scope .rail .tctrl{gap:6px}
  .st-scope .rail .tctrl button{
    height:30px;border-color:#667970;background:transparent;color:#E3E9E6
  }

  /* The briefing headline follows the exact rail boundary. The continuation
     rule makes the map, chronology and report read as one instrument. */
  .st-scope .dock-cap{
    position:relative;min-height:74px;padding:11px 12px 10px calc(var(--st-rail-w) + 20px);
    text-align:left;align-items:center
  }
  .st-scope .dock-cap::after{
    content:"";position:absolute;left:var(--st-rail-w);top:0;bottom:0;width:1px;
    background:#60766B;opacity:.72;pointer-events:none
  }
  .st-scope .console.dock-full .dock-cap::after{display:none}
  .st-scope .dock-identity,.st-scope .dock-title-row{width:100%;min-width:0;text-align:left;justify-items:start}
  .st-scope .dock-context{
    justify-content:flex-start;margin:0 0 4px;font-size:9.5px;font-weight:500;
    letter-spacing:.015em;text-align:left
  }
  .st-scope .dock-current-title{
    width:100%;max-width:34ch;text-align:left!important;font-size:20px;font-weight:600;
    line-height:1.12;letter-spacing:0
  }
  .st-scope .dock-scroll{padding:15px 20px 28px}
  .st-scope .dock-scroll p{
    max-width:68ch;margin-bottom:14px;font-size:14.75px;font-weight:400;
    line-height:1.62;letter-spacing:0
  }
  .st-scope .dmeta{font-size:10px;font-weight:500;letter-spacing:.045em}
  .st-scope .dmeta b{font-size:13px;font-weight:500;line-height:1.3}
  .st-scope .pull{font-size:15px;font-weight:400;line-height:1.5}
  .st-scope .console.dock-full .dock-cap{padding-left:22px}
  .st-scope .console.dock-full .dock-current-title{max-width:38ch;font-size:21px}
  .st-scope .console.dock-full .dock-scroll p{max-width:70ch;font-size:15.25px;line-height:1.64}

  /* Leaflet controls stay under the same map-key geometry at every responsive
     size rather than shifting to a separate mobile-only spacing system. */
  .st-scope .leaflet-top.leaflet-left{right:16px;top:60px}
}

@media(max-width:560px){
  .st-scope .console{--st-rail-w:66px}
  .st-scope .console.rail-open{--st-rail-w:min(218px,64vw)}
  .st-scope .rail-toggle{padding-left:10px}
  .st-scope .rail-scroll::before{left:13px}
  .st-scope .chip,.st-scope .chip.dayfirst{padding-left:25px}
  .st-scope .chip::before{left:10px}
  .st-scope .dock-cap{padding-left:calc(var(--st-rail-w) + 16px);padding-right:10px}
  .st-scope .dock-current-title{font-size:18.5px;line-height:1.12}
  .st-scope .dock-scroll{padding:15px 16px 28px}
  .st-scope .dock-scroll p{font-size:15px;line-height:1.6}
  .st-scope .console.dock-full .dock-current-title{font-size:19px}
  .st-scope .console.dock-full .dock-scroll p{font-size:15px}
  .st-scope .mapctl{top:10px;right:10px;max-width:222px}
  .st-scope .mapctl.is-open,.st-scope.layers-open .mapctl{width:min(222px,calc(100vw - 20px));max-width:222px}
  .st-scope .mapctl.is-open>button:not(.st-layer-toggle),
  .st-scope.layers-open .mapctl>button:not(.st-layer-toggle){font-size:12px!important;min-height:40px}
  .st-scope .leaflet-top.leaflet-left{right:10px;top:55px}
}


/* ==============================================================
   v1.18.7 — MAP KEY INFORMATION ARCHITECTURE
   Affiliation is a legend, not a layer. Layer names stay global;
   operation-specific JSON labels are contextual subtitles only.
   ============================================================== */
.st-scope .st-layer-section-title{display:none}
.st-scope .mapctl.is-open .st-layer-section-title,
.st-scope.layers-open .mapctl .st-layer-section-title{
  display:block;padding:9px 8px 6px;margin:0;
  color:#596861;font-family:var(--sans);font-size:9px;font-weight:600;
  line-height:1;letter-spacing:.09em;text-transform:uppercase
}
.st-scope .mapctl.is-open .st-map-legend,
.st-scope.layers-open .mapctl .st-map-legend{
  display:grid!important;grid-template-columns:1fr 1fr;gap:7px 10px;
  padding:7px 8px 10px!important;margin:0!important;
  border-bottom:1px solid #AAB6B0!important;background:transparent!important;
  color:#34423C!important;font-family:var(--sans)!important;font-size:11px!important;
  font-weight:500!important;line-height:1.2!important;letter-spacing:0!important
}
.st-scope .st-map-legend-title{
  grid-column:1 / -1;display:block!important;margin:0 0 1px;
  color:#596861;font-size:9px;font-weight:600;letter-spacing:.09em;
  line-height:1;text-transform:uppercase;white-space:normal!important
}
.st-scope .st-map-legend .st-key-item{
  display:flex!important;align-items:center;gap:7px;min-width:0;white-space:nowrap
}
.st-scope .st-map-legend .st-key-item:last-child{grid-column:1 / -1}
.st-scope .st-key-dot{
  flex:0 0 auto;display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#625F56;box-shadow:0 0 0 1px #DCE0DD,0 0 0 2px #68766F
}
.st-scope .st-key-dot.allied{background:#355F52}
.st-scope .st-key-dot.axis{background:#663A31}
.st-scope .st-key-dot.other{background:#625F56;transform:rotate(45deg);border-radius:1px}

.st-scope .mapctl.is-open>button:not(.st-layer-toggle),
.st-scope.layers-open .mapctl>button:not(.st-layer-toggle){
  position:relative;justify-content:flex-start!important;gap:9px!important;
  min-height:46px!important;padding:8px 38px 8px 10px!important
}
.st-scope .st-layer-copy{
  display:flex;flex:1 1 auto;min-width:0;flex-direction:column;align-items:flex-start;
  gap:2px;text-align:left
}
.st-scope .st-layer-copy strong{
  color:#2E3934;font-family:var(--sans);font-size:12.25px;font-weight:600;
  line-height:1.2;letter-spacing:0
}
.st-scope .st-layer-copy small{
  display:block;color:#68766F;font-family:var(--sans);font-size:9.5px;font-weight:500;
  line-height:1.15;letter-spacing:.01em;text-transform:none
}
.st-scope .st-layer-copy small[hidden]{display:none!important}
.st-scope .st-layer-swatches{display:inline-flex;flex:0 0 auto;align-items:center;gap:5px}
.st-scope .st-layer-swatches .swatch{display:block;width:7px;height:11px;border:1px solid rgba(31,45,39,.45)}

/* The lamp belongs only to actionable map layers. Static affiliation entries
   deliberately have no lamp so they cannot be mistaken for toggles. */
.st-scope .mapctl button[aria-pressed]::after{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);margin:0!important
}

@media(max-width:560px){
  .st-scope .mapctl.is-open .st-map-legend,
  .st-scope.layers-open .mapctl .st-map-legend{grid-template-columns:1fr 1fr!important}
  .st-scope .st-layer-copy strong{font-size:11.75px}
  .st-scope .st-layer-copy small{font-size:9px}
}

/* ================================================================
   v1.18.9 — restore original editorial typography + card geometry

   The 1.18.8 pass misdiagnosed the card problem as outer card padding/gutters.
   Restore the original joined-grid cards and the original type families. The
   only card spacing change here is the vertical relationship BETWEEN text
   groups: role -> note on people cards, and credit -> title -> spec -> copy on
   equipment cards. Horizontal inset and card width stay at the original values.
   ================================================================ */
.st-scope{
  --disp:"Libre Baskerville",Georgia,serif;
  --sans:"Roboto",system-ui,sans-serif;
  --mono:"Roboto Mono",ui-monospace,monospace;
}
.st-scope h1,.st-scope h2,.st-scope h3,.st-scope h4{font-weight:700}

/* Restore the original continuous archive grid: no gutters, no narrowed cards,
   no independent framed-card treatment. */
.st-scope .people{
  gap:0;
  border-top:1px solid var(--rule-2);
  border-left:1px solid var(--rule-2);
  align-items:stretch;
}
.st-scope .kit{
  gap:0;
  border-top:1px solid var(--rule-2);
  border-left:1px solid var(--rule-2);
  align-items:stretch;
}
.st-scope .person{
  overflow:visible;
  background:transparent;
  border:0;
  border-right:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
  box-shadow:none;
  padding:0 0 18px;
}
.st-scope .item{
  overflow:visible;
  background:transparent;
  border:0;
  border-right:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
  box-shadow:none;
  padding:0;
}
.st-scope .person .ph,.st-scope .item .ph{border-bottom:1px solid var(--rule)}

/* Original card inset restored. The rhythm correction is between the internal
   text blocks, not around the card itself. */
.st-scope .person .body{
  padding:15px 17px 0;
  gap:7px;
  flex:1;
}
.st-scope .person .rank{
  margin:0;
  color:var(--data);
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:.075em;
}
.st-scope .person h4{
  margin:0;
  font-size:15.5px;
  line-height:1.26;
}
.st-scope .person .role{
  margin:0;
  color:var(--body);
  font-family:var(--mono);
  font-size:9.5px;
  line-height:1.55;
  letter-spacing:.02em;
}
.st-scope .person .note{
  /* This was the actual spacing fault: margin:auto created a variable void. */
  margin:8px 0 0;
  padding-top:10px;
  border-top:1px solid var(--rule);
  font-size:13.5px;
  line-height:1.64;
  color:var(--body);
}
.st-scope .person figcaption{
  margin:0;
  padding:9px 17px 0;
  border-top:0;
  font-size:9px;
  line-height:1.7;
  letter-spacing:.04em;
}

/* Equipment keeps the original four-column joined-grid design and credit under
   the image. Tighten only the gaps between the credit/title/spec/body blocks. */
.st-scope .item .body{
  padding:11px 19px 20px;
  display:block;
}
.st-scope .item h4{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.28;
}
.st-scope .item .spec{
  margin:0 0 10px;
  padding:8px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:9.5px;
  line-height:1.6;
  letter-spacing:.02em;
}
.st-scope .item .body > p:not(.spec){
  margin:0;
  font-size:13.5px;
  line-height:1.66;
}
.st-scope .item figcaption{
  margin:0;
  padding:8px 19px 0;
  border-top:0;
  font-family:var(--mono);
  font-size:9px;
  line-height:1.6;
  letter-spacing:.04em;
}

/* Put chronology back into the original typographic vocabulary: machine/date
   data is mono; event names remain editorial. */
.st-scope .chip .cday,
.st-scope .chip .ctm,
.st-scope .chip .ccat,
.st-scope .chip .mdate,
.st-scope .chip .mtime,
.st-scope .rail-toggle-date,
.st-scope .rail-toggle-label{font-family:var(--mono)}
.st-scope .chip .ctt,
.st-scope .rail-open .chip .mcopy{font-family:var(--disp)}

@media(max-width:1000px){
  .st-scope .person .body{padding:15px 17px 0}
  .st-scope .person figcaption{padding:9px 17px 0}
}
@media(max-width:620px){
  .st-scope .person .body{padding:15px 17px 0}
  .st-scope .person figcaption{padding:9px 17px 0}
  .st-scope .item .body{padding:11px 19px 20px}
  .st-scope .item figcaption{padding:8px 19px 0}
}

/* ================================================================
   v1.18.10 — information dividers, cartographic key swatches,
   fixed chronology rail and headline alignment
   ---------------------------------------------------------------
   The chronology no longer expands: the narrow rail is the rule.
   Information metadata gains a real stroke system so the eye can parse each
   field. Map affiliation is shown as area swatches, not point symbols.
   ================================================================ */

/* One divider system for the briefing metadata on desktop and mobile. The
   previous open grid read as one undifferentiated block of copy. */
.st-scope .dmeta{
  gap:0!important;
  margin:0 0 18px!important;
  padding:0!important;
  border-top:1px solid var(--rule)!important;
  border-bottom:1px solid var(--rule)!important;
}
.st-scope .dmeta > span{
  display:block;
  min-width:0;
  padding:12px 14px 12px 0;
  border-top:1px solid var(--rule);
}
.st-scope .dmeta > span:nth-child(-n+2){border-top:0}
.st-scope .dmeta > span:nth-child(odd){padding-right:16px}
.st-scope .dmeta > span:nth-child(even){padding-left:16px;border-left:1px solid var(--rule)}
.st-scope .dmeta > span b{margin-top:6px}
.st-scope .dmeta .wx{
  grid-column:1 / -1;
  padding-left:0!important;
  padding-right:0!important;
  border-left:0!important;
}
.st-scope .dmeta .wx em{margin-top:4px}

/* Map-key affiliation swatches represent areas. Dots/diamonds looked like map
   points, which sent readers looking for marker icons that did not exist. */
.st-scope .st-map-legend .st-key-item{gap:8px}
.st-scope .st-key-dot{
  flex:0 0 auto;
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:0!important;
  transform:none!important;
  background:#6D726D;
  border:1px solid #515A56;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.st-scope .st-key-dot.allied{background:#47654E}
.st-scope .st-key-dot.axis{background:#8B5A4B}
.st-scope .st-key-dot.other{
  background:linear-gradient(135deg,#6C756F 0 48%,#959D98 48% 100%);
}

@media(max-width:1000px){
  /* The rail stays compact. The expanded variant did not improve wayfinding and
     only created an awkward second layout. */
  .st-scope .console{--st-rail-w:78px}
  .st-scope .console.rail-open{--st-rail-w:78px}
  .st-scope .rail-toggle{
    cursor:default;
    pointer-events:none;
    padding:10px 10px 12px 12px;
  }
  .st-scope .rail-toggle svg{display:none}
  .st-scope .rail-toggle-label{display:block}
  .st-scope .rail-toggle-date{font-size:11px;line-height:1.08}
  .st-scope .rail-scroll{
    padding:18px 0 10px;
  }
  .st-scope .rail-scroll::before{top:18px;bottom:10px;left:17px}
  .st-scope .chip,
  .st-scope .chip.dayfirst,
  .st-scope .rail-open .chip,
  .st-scope .rail-open .chip.dayfirst{
    grid-template-columns:1fr!important;
    column-gap:0!important;
    min-height:46px;
    padding:8px 10px 8px 32px;
  }
  .st-scope .chip.dayfirst{min-height:54px}
  .st-scope .chip.monthfirst:not(:first-child){margin-top:14px}
  .st-scope .chip.monthfirst:not(:first-child)::after{top:-8px;left:8px;width:18px}
  .st-scope .chip::before{left:14px}
  .st-scope .chip.dayfirst::after{left:9px;width:18px}
  .st-scope .chip .mcopy,
  .st-scope .rail-open .chip .mcopy{display:none!important}
  .st-scope .chip .mdate,
  .st-scope .rail-open .chip .mdate{display:block;max-width:100%;padding-right:4px}
  .st-scope .chip .mdate b,
  .st-scope .rail-open .chip .mdate b{
    display:block;
    font-size:10.75px;
    line-height:1.1;
    letter-spacing:.01em;
  }
  .st-scope .chip .mdate small,
  .st-scope .rail-open .chip .mdate small{
    display:block;
    margin-top:3px;
    font-size:8px;
    line-height:1.1;
  }
  .st-scope .chip .mtime,
  .st-scope .rail-open .chip .mtime{
    display:block;
    margin-top:5px;
    padding-right:6px;
    font-size:9px;
    line-height:1.1;
  }

  /* Reclaim the empty header strip. The headline now begins much closer to the
     chronology edge instead of floating deep inside the drawer. */
  .st-scope .dock-cap{
    min-height:76px;
    padding:11px 12px 10px calc(var(--st-rail-w) + 8px);
  }
  .st-scope .dock-cap::after{left:calc(var(--st-rail-w) - 8px)}
  .st-scope .dock-context{margin:0 0 5px}
  .st-scope .dock-current-title{
    max-width:40ch;
    text-align:left!important;
    font-size:19px;
    line-height:1.1;
  }
  .st-scope .dock-scroll{padding:15px 18px 28px}
  .st-scope .dock-scroll p{font-size:14.25px;line-height:1.6}
  .st-scope .dmeta{margin-bottom:16px!important}
  .st-scope .dmeta > span{padding-top:11px;padding-bottom:11px}
}

@media(max-width:560px){
  .st-scope .console{--st-rail-w:72px}
  .st-scope .console.rail-open{--st-rail-w:72px}
  .st-scope .rail-toggle{padding-left:10px}
  .st-scope .rail-scroll::before{left:15px}
  .st-scope .chip,
  .st-scope .chip.dayfirst,
  .st-scope .rail-open .chip,
  .st-scope .rail-open .chip.dayfirst{padding-left:29px;padding-right:8px}
  .st-scope .chip::before{left:12px}
  .st-scope .dock-cap{padding-left:calc(var(--st-rail-w) + 6px);padding-right:10px}
  .st-scope .dock-cap::after{left:calc(var(--st-rail-w) - 6px)}
  .st-scope .dock-current-title{font-size:18.25px;max-width:28ch}
  .st-scope .dock-scroll{padding:14px 16px 26px}
  .st-scope .dock-scroll p{font-size:14px;line-height:1.58}
  .st-scope .dmeta > span{padding-top:10px;padding-bottom:10px}
}

/* ================================================================
   v1.18.11 — meta stroke repair + deeper headline alignment
   ================================================================ */

/* Restore the information block as a proper 2-column ruled panel. The last
   pass flattened the strokes too much and the eye lost the cell boundaries. */
.st-scope .dmeta{
  gap:0!important;
  margin:0 0 18px!important;
  padding:0!important;
  border:1px solid var(--rule)!important;
  background:rgba(255,255,255,.05);
}
.st-scope .dmeta > span{
  display:block;
  min-width:0;
  padding:15px 18px 14px;
  border-top:1px solid var(--rule);
}
.st-scope .dmeta > span:nth-child(-n+2){border-top:0}
.st-scope .dmeta > span:nth-child(even){border-left:1px solid var(--rule)}
.st-scope .dmeta > span b{margin-top:7px}
.st-scope .dmeta .wx{
  grid-column:1 / -1;
  border-left:0!important;
}

@media(max-width:1000px){
  /* Pull the headline into the dead strip beside the chronology so the header
     feels intentionally composed rather than padded away from the rail. */
  .st-scope .dock-cap{
    padding-left:calc(var(--st-rail-w) - 4px)!important;
    padding-right:12px!important;
  }
  .st-scope .dock-cap::after{left:calc(var(--st-rail-w) - 14px)!important}
  .st-scope .dock-identity,
  .st-scope .dock-title-row{margin-left:0}
  .st-scope .dock-context,
  .st-scope .dock-current-title{padding-left:12px}
}

@media(max-width:560px){
  .st-scope .dock-cap{padding-left:calc(var(--st-rail-w) - 6px)!important}
  .st-scope .dock-cap::after{left:calc(var(--st-rail-w) - 14px)!important}
  .st-scope .dock-context,
  .st-scope .dock-current-title{padding-left:10px}
  .st-scope .dmeta > span{padding:13px 14px 12px}
}

/* ================================================================
   v1.18.12 — global editorial rhythm
   ---------------------------------------------------------------
   Prose is no longer an auto-fit paragraph matrix. Every narrative section
   follows the same two-column editorial rule, with one reading direction per
   column and a header that uses the same tracks and gutter.
   ================================================================ */
.st-scope{
  --st-editorial-gap:clamp(34px,3.6vw,58px);
  --st-section-space:68px;
}
.st-scope .sec{padding-top:var(--st-section-space)}
.st-scope .sechead{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--st-editorial-gap);
  row-gap:8px;
  align-items:end;
  padding-bottom:12px;
  margin-bottom:28px;
  border-bottom:1px solid var(--rule-2);
}
.st-scope .sechead h2{
  grid-column:1;
  margin:0;
  font-size:23px;
  line-height:1.2;
}
.st-scope .sechead .note{
  grid-column:2;
  justify-self:start;
  max-width:62ch;
  margin:0;
  padding:0 0 2px;
  line-height:1.55;
}
.st-scope .twocol.st-prose-flow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--st-editorial-gap);
  align-items:start;
  margin:0 0 36px;
}
.st-scope .st-prose-column{min-width:0}
.st-scope .st-prose-column p{
  max-width:64ch;
  margin:0 0 20px;
  font-size:15.5px;
  line-height:1.72;
}
.st-scope .st-prose-column p:last-child{margin-bottom:0}
.st-scope .twocol.st-prose-flow.is-single .st-prose-column{
  grid-column:1 / -1;
  max-width:70ch;
}
.st-scope .twocol.st-prose-flow.is-single .st-prose-column p{max-width:70ch}

/* Attached archival grids remain full width, but they now enter at the same
   vertical beat after prose instead of looking like a separate section rule. */
.st-scope .sec + .people,
.st-scope .sec + .kit,
.st-scope .sec + .cost{margin-top:0}

@media(max-width:900px){
  .st-scope{
    --st-editorial-gap:28px;
    --st-section-space:54px;
  }
  .st-scope .sechead{margin-bottom:22px}
  .st-scope .st-prose-column p{font-size:15px;line-height:1.68}
}

@media(max-width:720px){
  .st-scope{
    --st-section-space:42px;
  }
  .st-scope .sechead{
    grid-template-columns:1fr;
    row-gap:7px;
    margin-bottom:20px;
    padding-bottom:10px;
  }
  .st-scope .sechead h2,
  .st-scope .sechead .note{grid-column:1}
  .st-scope .sechead .note{padding-bottom:0}
  .st-scope .twocol.st-prose-flow{
    grid-template-columns:1fr;
    row-gap:0;
    margin-bottom:30px;
  }
  .st-scope .st-prose-column{grid-column:1}
  .st-scope .st-prose-column + .st-prose-column{margin-top:20px}
  .st-scope .st-prose-column p{
    max-width:70ch;
    margin-bottom:18px;
    font-size:14.75px;
    line-height:1.68;
  }
}

/* ================================================================
   v1.18.13 — constrained metadata card
   ---------------------------------------------------------------
   The metadata block is no longer a full-width slab. It sits as a compact
   reference card with quieter brown rules and the original type voices.
   ================================================================ */
@media(min-width:701px){
  .st-scope .dock-scroll .dmeta{
    width:min(100%, 560px)!important;
    margin:0 0 22px!important;
    justify-self:start;
    align-self:start;
    border-color:#B7A79B!important;
    background:transparent;
  }
}

.st-scope .dock-scroll .dmeta{
  color:#7D5F52!important;
}
.st-scope .dock-scroll .dmeta > span{
  padding:12px 14px 11px!important;
  border-top:1px solid #B7A79B!important;
}
.st-scope .dock-scroll .dmeta > span:nth-child(even){
  border-left:1px solid #B7A79B!important;
}
.st-scope .dock-scroll .dmeta > span b{
  margin-top:6px!important;
  font-family:var(--sans)!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.34!important;
  letter-spacing:0!important;
  color:#2F4443!important;
}
.st-scope .dock-scroll .dmeta .meta-location b,
.st-scope .dock-scroll .dmeta .meta-phase b,
.st-scope .dock-scroll .dmeta .meta-category b{max-width:18ch}
.st-scope .dock-scroll .dmeta > span,
.st-scope .dock-scroll .dmeta .wx,
.st-scope .dock-scroll .dmeta .wx em{
  font-family:var(--mono)!important;
  font-size:9px!important;
  font-weight:500!important;
  letter-spacing:.08em!important;
  line-height:1.25!important;
  text-transform:uppercase;
}
.st-scope .dock-scroll .dmeta .wx{padding-top:11px!important}
.st-scope .dock-scroll .dmeta .wx b{
  font-family:var(--sans)!important;
  text-transform:none;
}

@media(max-width:700px){
  .st-scope .dock-scroll .dmeta{
    width:min(100%, 420px)!important;
    margin:0 0 18px!important;
    border-color:#B7A79B!important;
    background:transparent;
  }
  .st-scope .dock-scroll .dmeta > span{
    padding:11px 12px 10px!important;
  }
  .st-scope .dock-scroll .dmeta > span b{
    font-size:11.5px!important;
  }
}