/* 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:#CBD2CE; --panel:#DCE0DD; --dark:#263038; --tint:rgba(146,165,163,.30);
  --head:#2C2119; --body:#2F4443; --data:#45302A; --cred:#7D5F52; --mark:#47654E;
  --allied:#2F4443; --allied-fill:#5E8570; --axis:#45302A; --axis-fill:#A08A82;
  --rule:#B0B9B5; --rule-2:#92A5A3;
  --disp:"Libre Baskerville",Georgia,serif;
  --sans:"Roboto",system-ui,sans-serif;
  --mono:"Roboto Mono",ui-monospace,monospace;
  --rail-h:158px;
  background:var(--bg); color:var(--body);
  font-family:var(--sans); font-size:16px; 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:700;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:500}
.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:#C6ADA3;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:700;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:#BFC8C4}
.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 .timecode{position:absolute;top:20px;left:480px;z-index:600;background:var(--dark);
  color:#CBD2CE;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:15px;font-weight:500}
.st-scope .tc-t{display:block;font-size:10px;color:#92A5A3;margin-top:4px}
.st-scope .tc-f{display:block;font-size:9.5px;color:#A08A82;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 .mapctl button{background:var(--panel);border:1px solid var(--rule-2);padding:8px 13px;
  cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--data);font-weight:500}
.st-scope .mapctl button:hover{border-color:var(--head)}
.st-scope .mapctl button[aria-pressed="true"]{background:var(--dark);color:#CBD2CE;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:22px;line-height:1.24}
.st-scope .dock-scroll{overflow-y:auto;padding:18px 22px 22px;flex:1}
.st-scope .dock-scroll p{margin:0 0 14px;font-size:14.5px;max-width:none;line-height:1.72}
.st-scope .dmeta{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:0 0 18px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--cred)}
.st-scope .dmeta b{display:block;color:var(--data);font-weight:500;font-size:11px;
  letter-spacing:.02em;margin-top:4px}
/* 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:9px;line-height:1.5;
  color:var(--cred);margin-top:3px;letter-spacing:.02em}
.st-scope .pull{background:var(--tint);padding:14px 16px;margin:18px 0;font-family:var(--disp);
  font-size:14px;font-style:italic;color:var(--head);line-height:1.62;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:#CBD2CE;
  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:7px}
.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 button.play{width:40px;background:var(--dark);border-color:var(--dark);color:#CBD2CE}
.st-scope .tctrl svg{width:13px;height:13px;fill:currentColor}
.st-scope .speed{display:flex;border:1px solid var(--rule-2);margin-left:4px}
.st-scope .speed button{width:auto;padding:0 9px;height:29px;border:0;border-right:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;color:var(--data);background:transparent;cursor:pointer}
.st-scope .speed button:last-child{border-right:0}
.st-scope .speed button[aria-pressed="true"]{background:var(--mark);color:#CBD2CE}
.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:9.5px;letter-spacing:.08em;color:var(--cred);white-space:nowrap}
.st-scope .counter b{color:var(--data);font-size:14px;font-weight:500}
.st-scope .phaselabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;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:8.5px;letter-spacing:.1em;color:var(--mark);
  font-weight:500;height:11px;overflow:hidden}
.st-scope .chip .ctm{font-family:var(--mono);font-size:11px;color:var(--data);font-weight:500}
.st-scope .chip .ctt{font-family:var(--disp);font-size:12px;line-height:1.3;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:8px;letter-spacing:.08em;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:#CBD2CE}
.st-scope .chip[aria-current="true"] .ctm{color:#A08A82}
.st-scope .chip[aria-current="true"] .cday,.st-scope .chip[aria-current="true"] .ccat{color:#92A5A3}

/* ---------- 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:#47654E;   /* green,  L40 */
  --pin-axis:#45302A;     /* brown,  L22 */
  --pin-other:#7D5F52;    /* 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:700;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:700;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:500}
.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:500;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 .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:#CBD2CE}

  /* 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:500;
    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}
  }
}
@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 #DCE0DD) 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:#92A5A3;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:#CBD2CE;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:500;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}


/* ---------- 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:#DCE0DD}
.st-scope .tb.is-here .tb-tag{color:#92A5A3}
.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}