/* "The Weight of the Strait" exhibits (src/components/explainer/strait/). Same conventions as
   explainer.css: colours from tokens, focus states from data-focus on .xp-stage, transitions
   on persistent nodes, first-sight growth keyed on data-seen. */

.ex-tw text {
  font-size: 12px;
  fill: var(--ink-2);
}
.ex-tw .hd {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  fill: var(--muted);
}
.ex-tw .sub {
  font-size: 11px;
  fill: var(--muted);
}
.ex-tw .lab {
  font-size: 13px;
  fill: var(--heading);
}
.ex-tw .val {
  font-weight: 700;
  fill: var(--heading);
}
.ex-tw .track {
  fill: color-mix(in srgb, var(--rule) 55%, transparent);
}
.ex-tw * {
  transition:
    opacity var(--dur-3) var(--ease-out),
    fill var(--dur-3) var(--ease-out),
    stroke var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
}

/* Exhibit 1: the path */
.ex-path .grid line {
  stroke: var(--rule);
}
.ex-path .grid text,
.ex-path .yr {
  font-size: 11px;
  fill: var(--muted);
}
.ex-path .axis {
  stroke: var(--heading);
  stroke-width: 1.2;
}
.ex-path .band {
  fill: var(--accent);
  fill-opacity: 0.28;
}
.ex-path .mid {
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2;
}
.ex-path .mark line {
  stroke: var(--heading);
  stroke-opacity: 0.35;
  stroke-dasharray: 2 3;
}
.ex-path .mark text {
  font-size: 10.5px;
  fill: var(--muted);
}
.ex-path .mark circle {
  fill: var(--heading);
  fill-opacity: 0.5;
}
.ex-path .end line {
  stroke: var(--accent-ink);
  stroke-width: 3;
}
.ex-path .end text {
  font-size: 12.5px;
  font-weight: 700;
  fill: var(--accent-ink);
  opacity: 0;
}
.ex-path .near-zone {
  fill: var(--heading);
  opacity: 0;
}
.ex-path .near-lab {
  font-size: 11px;
  font-style: italic;
  fill: var(--heading);
  opacity: 0;
}
.xp-stage[data-focus="near"] .ex-path .near-zone {
  opacity: 0.06;
}
.xp-stage[data-focus="near"] .ex-path .near-lab {
  opacity: 0.8;
}
.xp-stage:is([data-focus="climb"], [data-focus="2030"]) .ex-path .end text {
  opacity: 1;
}
.xp-stage[data-focus="calendar"] .ex-path .mark line {
  stroke: var(--accent);
  stroke-opacity: 1;
  stroke-dasharray: none;
}
.xp-stage[data-focus="calendar"] .ex-path .mark text {
  fill: var(--heading);
  font-weight: 600;
}
@keyframes tw-draw {
  from {
    stroke-dashoffset: 1;
  }
}
.xp.live .xp-stage[data-seen~="path"] .ex-path .mid {
  stroke-dasharray: 1 1;
  animation: tw-draw 1.4s var(--ease-out) both;
}

/* Exhibit 2: factors */
.ex-factors .fill {
  fill: var(--heading);
  transform-box: fill-box;
  transform-origin: 0 50%;
}
.ex-factors .lab {
  font-size: 12.5px;
}
.xp-stage[data-focus="ai"] .ex-factors .k-ai .fill,
.xp-stage[data-focus="munitions"] .ex-factors .k-munitions .fill {
  fill: var(--accent);
}
.xp-stage[data-focus="ai"] .ex-factors .row:not(.k-ai),
.xp-stage[data-focus="munitions"] .ex-factors .row:not(.k-munitions) {
  opacity: 0.4;
}
.xp.live .xp-stage:not([data-seen~="factors"]) .ex-factors .fill {
  transform: scaleX(0);
}
.ex-factors .row[data-i="1"] .fill {
  transition-delay: 80ms;
}
.ex-factors .row[data-i="2"] .fill {
  transition-delay: 160ms;
}
.ex-factors .row[data-i="3"] .fill {
  transition-delay: 240ms;
}
.ex-factors .row[data-i="4"] .fill {
  transition-delay: 320ms;
}
.ex-factors .row[data-i="5"] .fill {
  transition-delay: 400ms;
}

/* Exhibit 3: the lens */
.ex-lens .grid line {
  stroke: var(--rule);
}
.ex-lens .grid text {
  font-size: 11px;
  fill: var(--muted);
}
.ex-lens .key text {
  font-size: 12px;
}
.ex-lens .link {
  stroke: var(--heading);
  stroke-opacity: 0.3;
  stroke-width: 3;
}
.ex-lens .d-time {
  fill: var(--bg);
  stroke: var(--heading);
  stroke-width: 2.4;
}
.ex-lens .d-window {
  fill: var(--accent);
  stroke: var(--accent-ink);
  stroke-width: 1.5;
}
.ex-lens .v {
  font-size: 13px;
  font-weight: 700;
}
.ex-lens .v-window {
  fill: var(--accent-ink);
}
.xp-stage[data-focus="read"] .ex-lens :is(.d-time, .v-time) {
  opacity: 0.35;
}
.xp-stage[data-focus="read"] .ex-lens .d-window {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.25);
}

/* Exhibit 4: the ladder */
.ex-ladder .lo {
  fill: var(--heading);
  transform-box: fill-box;
  transform-origin: 0 50%;
}
.ex-ladder .hi {
  fill: var(--heading);
  fill-opacity: 0.4;
}
.ex-ladder .val {
  font-size: 13px;
}
.ex-ladder .lab {
  font-size: 14px;
  font-weight: 600;
}
.xp-stage:is([data-focus="quarantine"], [data-focus="carriers"]) .ex-ladder .r-q :is(.lo, .hi) {
  fill: var(--accent);
}
.xp-stage:is([data-focus="quarantine"], [data-focus="carriers"]) .ex-ladder .row:not(.r-q) {
  opacity: 0.4;
}
.xp.live .xp-stage:not([data-seen~="ladder"]) .ex-ladder :is(.lo, .hi) {
  transform: scaleX(0);
}

/* Three theaters */
.ex-theatres .flow {
  stroke: var(--heading);
  stroke-opacity: 0.35;
  stroke-width: 2;
  stroke-dasharray: 3 5;
}
.ex-theatres .core circle {
  fill: var(--heading);
}
.ex-theatres .core .inner {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}
.ex-theatres .core text {
  fill: var(--bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.ex-theatres .core .sub {
  fill: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}
.ex-theatres .node circle {
  fill: var(--bg);
  stroke: var(--heading);
  stroke-width: 1.6;
}
.ex-theatres .node .pip {
  fill: var(--heading);
  stroke: none;
}
.ex-theatres .nm {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--heading);
}
.ex-theatres .n-pacific circle {
  stroke: var(--accent);
  stroke-width: 2.4;
}
.ex-theatres .n-pacific .pip {
  fill: var(--accent);
}
.ex-theatres .f-pacific {
  stroke: var(--accent);
  stroke-opacity: 0.9;
}
.xp-stage[data-focus="mideast"] .ex-theatres :is(.f-mideast, .n-mideast circle),
.xp-stage[data-focus="europe"] .ex-theatres :is(.f-europe, .n-europe circle) {
  stroke: var(--xp-rust);
  stroke-opacity: 1;
  stroke-width: 3;
}
.xp-stage[data-focus="mideast"] .ex-theatres .n-mideast .pip,
.xp-stage[data-focus="europe"] .ex-theatres .n-europe .pip {
  fill: var(--xp-rust);
}
.xp-stage[data-focus="mideast"] .ex-theatres .node:not(.n-mideast, .n-pacific),
.xp-stage[data-focus="europe"] .ex-theatres .node:not(.n-europe, .n-pacific) {
  opacity: 0.4;
}
@keyframes tw-flow {
  to {
    stroke-dashoffset: -16;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .xp-scene.is-on .ex-theatres .flow {
    animation: tw-flow 1.2s linear infinite;
  }
}

/* Chips and gas */
.ex-chips .chip rect {
  fill: none;
  stroke: var(--heading);
  stroke-width: 1.4;
}
.ex-chips .chip line {
  stroke: var(--heading);
  stroke-width: 1.2;
}
.ex-chips .chip.tw rect {
  fill: var(--accent);
  fill-opacity: 0.85;
  stroke: var(--accent-ink);
}
.ex-chips .big {
  font: var(--display-weight) 30px var(--font-display);
  fill: var(--heading);
}
.ex-chips .lab {
  font-size: 13px;
}
.ex-chips .day {
  fill: color-mix(in srgb, var(--rule) 55%, transparent);
}
.ex-chips .day.held {
  fill: var(--heading);
}
.ex-chips .note {
  font-size: 12.5px;
  font-style: italic;
  fill: var(--heading);
}
.ex-chips .n-gas {
  opacity: 0;
}
.xp-stage[data-focus="gas"] .ex-chips .g-chips {
  opacity: 0.35;
}
.xp-stage[data-focus="gas"] .ex-chips .day.held {
  fill: var(--accent);
}
.xp-stage[data-focus="gas"] .ex-chips .n-gas {
  opacity: 1;
}
.xp-stage[data-focus="fabs"] .ex-chips .g-gas {
  opacity: 0.35;
}

/* phones: the stage draws the 520-wide exhibits at about two-thirds size; raise the type */
@media (max-width: 40rem) {
  .ex-tw text {
    font-size: 14px;
  }
  .ex-tw .hd {
    font-size: 12px;
  }
  .ex-tw .lab {
    font-size: 15px;
  }
  .ex-tw .sub {
    font-size: 12.5px;
  }
  .ex-path .mark text {
    font-size: 12.5px;
  }
  .ex-path .end text {
    font-size: 15px;
  }
  .ex-factors .lab {
    font-size: 14px;
  }
}

/* ---- Version B, "Three Futures for the Strait" (src/components/explainer/strait-b/) ---- */

/* Exhibit 1: three futures */
.ex-futures .nm {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  fill: var(--heading);
}
.ex-futures .lab {
  font-size: 12.5px;
}
.ex-futures .cell.v-l {
  fill: var(--heading);
}
.ex-futures .cell.v-p {
  fill: var(--heading);
  fill-opacity: 0.35;
}
.ex-futures .cell.v-r {
  fill: color-mix(in srgb, var(--rule) 55%, transparent);
}
.ex-futures .key text {
  font-size: 11.5px;
}
.xp-stage:is([data-focus="good"], [data-focus="base"], [data-focus="bad"]) .ex-futures .col {
  opacity: 0.3;
}
.xp-stage[data-focus="good"] .ex-futures .c-good,
.xp-stage[data-focus="base"] .ex-futures .c-base,
.xp-stage[data-focus="bad"] .ex-futures .c-bad {
  opacity: 1;
}
.xp-stage[data-focus="good"] .ex-futures .c-good .cell.v-l,
.xp-stage[data-focus="base"] .ex-futures .c-base .cell.v-l,
.xp-stage[data-focus="bad"] .ex-futures .c-bad .cell.v-l {
  fill: var(--accent);
}
.xp-stage[data-focus="good"] .ex-futures .c-good .cell.v-p,
.xp-stage[data-focus="base"] .ex-futures .c-base .cell.v-p,
.xp-stage[data-focus="bad"] .ex-futures .c-bad .cell.v-p {
  fill: var(--accent);
}

/* Exhibit 2: what moves it */
.ex-movers .fill {
  fill: var(--heading);
  transform-box: fill-box;
  transform-origin: 0 50%;
}
.ex-movers .lab {
  font-size: 12.5px;
}
.xp-stage[data-focus="ai"] .ex-movers .k-ai .fill,
.xp-stage[data-focus="vote"] .ex-movers .k-vote .fill,
.xp-stage[data-focus="less"] .ex-movers .k-less .fill {
  fill: var(--accent);
}
.xp-stage[data-focus="ai"] .ex-movers .row:not(.k-ai),
.xp-stage[data-focus="vote"] .ex-movers .row:not(.k-vote),
.xp-stage[data-focus="less"] .ex-movers .row:not(.k-less) {
  opacity: 0.4;
}
.xp.live .xp-stage:not([data-seen~="movers"]) .ex-movers .fill {
  transform: scaleX(0);
}

/* Exhibit 3 and the read / vote scenes: positions against the central case */
.ex-shift .rail {
  stroke: var(--rule);
}
.ex-shift .central {
  stroke: var(--heading);
  stroke-opacity: 0.45;
  stroke-dasharray: 3 4;
}
.ex-shift .lab {
  font-size: 12.5px;
}
.ex-shift .dot {
  fill: var(--heading);
}
.ex-shift .row:first-of-type .dot,
.ex-shift .row[data-i="0"] .dot {
  fill: var(--bg);
  stroke: var(--heading);
  stroke-width: 2.2;
}
.ex-shift .row[data-i="3"] .dot {
  fill: var(--accent);
  stroke: var(--accent-ink);
  stroke-width: 1.5;
}
.ex-shift .pair-note path {
  stroke: var(--accent-ink);
  stroke-width: 1.4;
}
.ex-shift .note {
  font-size: 12px;
  font-style: italic;
  fill: var(--accent-ink);
}
.ex-shift .pair-note {
  opacity: 0;
}
.xp-scene.is-on .ex-shift .pair-note,
.xp-stage[data-focus="belief"] .ex-shift .pair-note {
  opacity: 1;
}
.xp-stage[data-focus="belief"] .ex-shift .row:not(.k-pair) {
  opacity: 0.4;
}
.xp-stage[data-focus="belief"] .ex-shift .k-pair .dot {
  fill: var(--accent);
}

/* Exhibit 4: signposts */
.ex-watch .band {
  fill: color-mix(in srgb, var(--rule) 22%, transparent);
}
.ex-watch .mid {
  stroke: var(--rule);
}
.ex-watch .nm {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--muted);
}
.ex-watch .calm,
.ex-watch .risk {
  font-size: 12.5px;
  fill: var(--heading);
}
.ex-watch .h-risk,
.ex-watch .risk {
  fill: var(--accent-ink);
}
.xp-stage:is([data-focus="ai"], [data-focus="read"], [data-focus="vote"], [data-focus="command"]) .ex-watch .row {
  opacity: 0.35;
}
.xp-stage[data-focus="ai"] .ex-watch .k-ai,
.xp-stage[data-focus="read"] .ex-watch .k-read,
.xp-stage[data-focus="vote"] .ex-watch .k-vote,
.xp-stage[data-focus="command"] .ex-watch .k-command {
  opacity: 1;
}
@media (max-width: 40rem) {
  .ex-futures .lab,
  .ex-movers .lab,
  .ex-shift .lab,
  .ex-watch :is(.calm, .risk) {
    font-size: 14px;
  }
}
/* "Imagined Independence" exhibits (src/components/explainer/assumptions/).
   Built on the .ex-tw conventions in explainer-strait.css: colours from tokens, focus from
   data-focus on .xp-stage. */

/* Exhibit 1: strategies x bottlenecks */
.ex-grid .colh {
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--heading);
}
.ex-grid .col,
.ex-grid .rail {
  stroke: var(--rule);
}
.ex-grid .lab {
  font-size: 12.5px;
}
.ex-grid .d2 {
  fill: var(--heading);
}
.ex-grid .d1 {
  fill: var(--bg);
  stroke: var(--heading);
  stroke-width: 1.8;
}
.ex-grid .key text {
  font-size: 11.5px;
}
.xp-stage:is([data-focus="china"], [data-focus="gulf"], [data-focus="ai"], [data-focus="tariff"]) .ex-grid .row {
  opacity: 0.3;
}
.xp-stage[data-focus="china"] .ex-grid .k-china,
.xp-stage[data-focus="gulf"] .ex-grid .k-gulf,
.xp-stage[data-focus="ai"] .ex-grid .k-ai,
.xp-stage[data-focus="tariff"] .ex-grid .k-tariff {
  opacity: 1;
}
.xp-stage:is([data-focus="china"], [data-focus="gulf"], [data-focus="ai"], [data-focus="tariff"]) .ex-grid .row .d2 {
  fill: var(--accent);
}

/* Exhibit 2: one island */
.ex-hub .spoke {
  stroke: var(--heading);
  stroke-opacity: 0.35;
  stroke-width: 1.6;
}
.ex-hub .core {
  fill: var(--accent);
  stroke: var(--accent-ink);
}
.ex-hub .core-t {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  fill: var(--heading);
}
.ex-hub .node circle {
  fill: var(--heading);
}
.ex-hub .lab {
  font-size: 13px;
}
.xp-stage:is([data-focus="energy"], [data-focus="chips"], [data-focus="beyond"]) .ex-hub .node {
  opacity: 0.3;
}
.xp-stage:is([data-focus="energy"], [data-focus="chips"], [data-focus="beyond"]) .ex-hub .spoke {
  stroke-opacity: 0.12;
}
.xp-stage[data-focus="energy"] .ex-hub .k-energy,
.xp-stage[data-focus="chips"] .ex-hub .k-chips,
.xp-stage[data-focus="beyond"] .ex-hub .k-beyond {
  opacity: 1;
}
.xp-stage[data-focus="energy"] .ex-hub .node.k-energy circle,
.xp-stage[data-focus="chips"] .ex-hub .node.k-chips circle,
.xp-stage[data-focus="beyond"] .ex-hub .node.k-beyond circle {
  fill: var(--accent);
}
.xp-stage[data-focus="energy"] .ex-hub .spoke.k-energy,
.xp-stage[data-focus="chips"] .ex-hub .spoke.k-chips,
.xp-stage[data-focus="beyond"] .ex-hub .spoke.k-beyond {
  stroke: var(--accent-ink);
  stroke-opacity: 0.8;
}

/* Open, closed, or open on terms */
.ex-states rect {
  fill: color-mix(in srgb, var(--rule) 22%, transparent);
  stroke: var(--rule);
}
.ex-states .bt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--heading);
}
.ex-states .bs {
  font-size: 12px;
  fill: var(--ink-2);
}
.ex-states .b-permission rect {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
  stroke: var(--accent-ink);
  stroke-width: 1.5;
}
.ex-states .bracket {
  stroke: var(--accent-ink);
  stroke-width: 1.2;
}
.ex-states .ex-l {
  font-size: 12.5px;
  fill: var(--heading);
}
.xp-stage[data-focus="closed"] .ex-states :is(.b-open, .b-permission, .exs) {
  opacity: 0.3;
}
.xp-stage[data-focus="closed"] .ex-states .b-closed rect {
  stroke: var(--heading);
  stroke-width: 1.5;
}
.xp-stage[data-focus="permission"] .ex-states :is(.b-open, .b-closed) {
  opacity: 0.3;
}

/* Exhibit 3: what risk factors mention */
.ex-warn .sq {
  fill: color-mix(in srgb, var(--rule) 55%, transparent);
}
.ex-warn .sq.on {
  fill: var(--heading);
}
.ex-warn .k-ins .lab {
  fill: var(--accent-ink);
  font-weight: 600;
}
.ex-warn .lab {
  font-size: 13.5px;
}

/* Dates that test the bets */
.ex-cal .axis {
  stroke: var(--heading);
  stroke-width: 1.2;
}
.ex-cal .mk circle {
  fill: var(--heading);
}
.ex-cal .drop {
  stroke: var(--heading);
  stroke-opacity: 0.3;
  stroke-dasharray: 2 3;
}
.ex-cal .d {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: var(--heading);
}
.ex-cal .t {
  font-size: 12.5px;
}
.ex-cal .k-now circle,
.xp-stage[data-focus="soon"] .ex-cal .k-soon circle {
  fill: var(--accent);
}
.xp-stage[data-focus="soon"] .ex-cal .k-later {
  opacity: 0.35;
}

@media (max-width: 40rem) {
  .ex-grid .lab,
  .ex-hub .lab,
  .ex-states .ex-l,
  .ex-cal .t {
    font-size: 14px;
  }
}
/* "Calm Waters Assumed" exhibits (src/components/explainer/calm/). Built on the .ex-tw
   conventions in explainer-strait.css: colours from tokens, focus from data-focus on .xp-stage. */

/* "Geopolitical" in risk factors */
.ex-lang .grid line {
  stroke: var(--rule);
}
.ex-lang .area {
  fill: color-mix(in srgb, var(--heading) 10%, transparent);
}
.ex-lang .ln {
  fill: none;
  stroke: var(--heading);
  stroke-width: 2.4;
}
.ex-lang .m08 {
  fill: var(--accent);
}
.ex-lang .mlast {
  fill: var(--xp-rust);
}
.ex-lang .val.end {
  fill: var(--xp-rust);
  font-size: 14px;
}

/* Exhibit 1: bets */
.ex-bets .band {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
}
.ex-bets .lab {
  font-size: 12px;
}
.ex-bets .row.five .lab {
  font-weight: 600;
}
.ex-bets .pip {
  fill: none;
  stroke: var(--rule);
}
.ex-bets .pip.on {
  fill: var(--heading);
  stroke: var(--heading);
}
.ex-bets .row.five .pip.on {
  fill: var(--xp-rust);
  stroke: var(--xp-rust);
}
.ex-bets .bar {
  fill: var(--heading);
}
.ex-bets .val {
  font-size: 11px;
}
.ex-bets .key text {
  font-size: 11px;
}
.ex-bets .c-specific {
  fill: var(--heading);
}
.ex-bets .c-channel_only {
  fill: var(--accent);
}
.ex-bets .c-place_only {
  fill: color-mix(in srgb, var(--accent) 40%, var(--bg));
}
.ex-bets .c-boilerplate {
  fill: color-mix(in srgb, var(--rule) 80%, var(--bg));
}
.xp-stage[data-focus="flows"] .ex-bets .row:not(.five) {
  opacity: 0.35;
}
.xp-stage[data-focus="disclosure"] .ex-bets :is(.pip, .bar, .val) {
  opacity: 0.25;
}

/* Exhibit 2: Taiwan as a node */
.ex-taiwan .tk line {
  stroke-width: 1;
  stroke-opacity: 0.5;
}
.ex-taiwan .tk text {
  font-size: 10.5px;
  font-weight: 600;
}
.ex-taiwan :is(.g-tech) :is(circle) {
  fill: var(--heading);
}
.ex-taiwan .g-tech line {
  stroke: var(--heading);
}
.ex-taiwan .g-ind circle {
  fill: var(--accent);
}
.ex-taiwan .g-ind line {
  stroke: var(--accent);
}
.ex-taiwan .g-oth circle {
  fill: var(--ink-2);
}
.ex-taiwan .g-oth line {
  stroke: var(--ink-2);
}
.ex-taiwan .core {
  fill: var(--heading);
}
.ex-taiwan .ring {
  fill: none;
  stroke: var(--accent);
  stroke-dasharray: 2 3;
}
.ex-taiwan .core-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  fill: var(--accent);
}
.ex-taiwan .core-n {
  font-size: 30px;
  font-weight: 600;
  fill: var(--bg);
}
.ex-taiwan .core-s {
  font-size: 11px;
  fill: var(--bg);
}
.ex-taiwan .ch line {
  stroke: var(--xp-rust);
  stroke-width: 2;
}
.ex-taiwan .lab {
  font-size: 12px;
}

/* Exhibit 3: say versus do */
.ex-shifts .grid line {
  stroke: var(--rule);
}
.ex-shifts .gh {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--accent-ink);
}
.ex-shifts .lab {
  font-size: 12px;
}
.ex-shifts .arr {
  stroke: var(--heading);
  stroke-width: 2;
}
.ex-shifts .up .arr {
  stroke: var(--xp-rust);
}
.ex-shifts .ah {
  fill: var(--heading);
}
.ex-shifts .ah-r {
  fill: var(--xp-rust);
}
.ex-shifts .o {
  fill: var(--bg);
  stroke: var(--ink-2);
  stroke-width: 1.4;
}
.ex-shifts .up .val {
  fill: var(--xp-rust);
}

/* Exhibit 4: tripwires */
.ex-trips .rule {
  stroke: var(--rule);
}
.ex-trips .n {
  font-weight: 700;
  fill: var(--accent-ink);
}
.ex-trips .lab {
  font-weight: 600;
  font-size: 13px;
}
.ex-trips .w {
  font-size: 12px;
}
.ex-shifts .yrs {
  font-size: 10px;
  fill: var(--muted);
}
.ex-shifts .lab {
  font-size: 11.5px;
}
.ex-shifts .head {
  fill: var(--heading);
}
.ex-shifts .up .head {
  fill: var(--xp-rust);
}
.ex-taiwan .k .lab,
.ex-taiwan .ch text {
  font-size: 11px;
}
/* Scrolling explainer (src/components/explainer/). The controller only sets data-scene and
   data-focus on .xp-stage and the "on" class on the active step; everything visible is here.
   Without JavaScript (.xp without .live) every exhibit shows in place, in reading order. */

.xp {
  --xp-rust: #a4532b;
  --ring-1: #f1ece3; /* onlookers */
  --ring-2: #ded5c3; /* neighbors */
  --ring-3: #44506a; /* counterparties */
  --ring-4: #14213d; /* owners */
  --ring-ink-1: #1b2433;
  --ring-ink-3: #ffffff;
  --ring-ink-4: #cfa265;
  --ring-sub-4: #dce1ea;
  display: grid;
  grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xp {
    --xp-rust: #e0956c;
    --ring-1: #24221f;
    --ring-2: #302d29;
    --ring-3: #2a3b63;
    --ring-ink-1: #efe9dc;
  }
}
:root[data-theme="dark"] .xp {
  --xp-rust: #e0956c;
  --ring-1: #24221f;
  --ring-2: #302d29;
  --ring-3: #2a3b63;
  --ring-ink-1: #efe9dc;
}

/* ---- prose -------------------------------------------------------------------------- */
.xp-ch {
  padding-block: var(--space-xl) var(--space-l);
}
.xp-num {
  font: 600 var(--step--1) / 1 var(--font-ui);
  letter-spacing: 0.14em;
  color: var(--accent-ink);
  margin: 0 0 var(--space-2xs);
}
.xp-ch h2 {
  font-size: var(--step-4);
  margin-bottom: var(--space-m);
}
.xp-text > * {
  position: relative;
}
.xp-text h3 {
  font-size: var(--step-2);
  margin: var(--space-l) 0 var(--space-xs);
}
/* the active paragraph: a gold rule in the gutter */
.xp.live .xp-step::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-m));
  top: 0.35em;
  bottom: 0.35em;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.xp.live .xp-step.on::before {
  opacity: 1;
}
.xp-ex {
  margin: var(--space-m) 0 var(--space-l);
  padding-top: var(--space-xs);
  border-top: 2px solid var(--heading);
}
.xp-ex figcaption {
  display: grid;
  gap: 0.3rem;
}
.xp-exn {
  font: 700 var(--step--2) / 1.2 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.xp-ext {
  font: var(--display-weight) var(--step-1) / 1.25 var(--font-display);
  color: var(--heading);
}
.xp-ex .xp-exs {
  margin: 0;
}
.xp-exs {
  font: 400 var(--step--1) / 1.45 var(--font-ui);
  color: var(--muted);
}

/* ---- stage -------------------------------------------------------------------------- */
.xp-stage {
  position: sticky;
  top: calc(4.5rem + var(--space-l));
  height: calc(100svh - 4.5rem - 2 * var(--space-l));
  min-height: 24rem;
  display: grid;
}
.xp-frame {
  position: relative;
  display: grid;
  align-items: center;
}
.xp-scene {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-4) var(--ease-out),
    visibility 0s linear var(--dur-4);
}
.xp-scene.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-4) var(--ease-out),
    visibility 0s;
}
/* The opening image is not switched like the exhibits: the controller sets --night from 1 to 0
   as the opening paragraph is read, and a soft-edged wipe withdraws the image upward with the
   reader's scroll, gone as the first exhibit arrives. Its edges feather into the page. (No
   transform: a fractional translate made Chrome bleed one pixel row past the mask.) */
.xp-scene[data-for="night"] {
  align-self: stretch;
  opacity: 1; /* the wipe below does the hiding */
  visibility: visible;
  pointer-events: none;
  transition: none;
  /* three masks, intersected: soft top and bottom, soft sides, and a soft-edged wipe that
     retracts upward as --night falls from 1 to 0, so the image withdraws into the page
     instead of greying out */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, transparent 2%, #000 18%, #000 76%, transparent 97%),
    linear-gradient(to right, transparent 0, transparent 2%, #000 16%, #000 84%, transparent 98%),
    linear-gradient(to bottom, #000 calc(var(--night, 1) * 120% - 20%), transparent calc(var(--night, 1) * 120%));
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, transparent 2%, #000 18%, #000 76%, transparent 97%),
    linear-gradient(to right, transparent 0, transparent 2%, #000 16%, #000 84%, transparent 98%),
    linear-gradient(to bottom, #000 calc(var(--night, 1) * 120% - 20%), transparent calc(var(--night, 1) * 120%));
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.xp-scene[data-for="night"] .hero-art,
.xp-scene[data-for="night"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%; /* the beam and the lit rings, not the empty left of the map */
  display: block;
}
.xp-cap {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  font: 700 var(--step--2) / 1 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.xp-cap span {
  display: none;
}
.xp-cap span.is-on {
  display: inline;
}

/* ---- exhibits: shared --------------------------------------------------------------- */
.ex {
  width: 100%;
  height: auto;
  max-height: calc(100svh - 10rem);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  overflow: visible;
}
.ex text {
  fill: var(--ink-2);
}
.ex-filings text,
.ex-funnel text {
  font-size: 11px;
}

/* Exhibit 1 */
.ex-filings .grid line {
  stroke: var(--rule);
  stroke-width: 1;
}
.ex-filings .axis {
  stroke: var(--heading);
  stroke-width: 1.2;
}
.ex-filings .bar rect {
  fill: var(--heading);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition:
    transform var(--dur-4) var(--ease-out),
    fill var(--dur-3) var(--ease-out),
    opacity var(--dur-3) var(--ease-out);
}
.ex-filings .val {
  font-weight: 700;
  fill: var(--heading);
}
.ex-filings .foot {
  font-size: 10px;
  font-style: italic;
  fill: var(--muted);
}
.ex-filings .note {
  opacity: 0;
  transition: opacity var(--dur-4) var(--ease-out);
}
.ex-filings .note path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
}
.ex-filings .note text {
  fill: var(--accent-ink);
  font-weight: 700;
  font-size: 12px;
}
.xp-stage[data-focus="rise"] .bar.late rect,
.xp-stage[data-focus="critical"] .bar.crit rect {
  fill: var(--accent);
}
.xp-stage[data-focus="critical"] .bar:not(.crit) rect {
  opacity: 0.35;
}
.xp-stage[data-focus="critical"] .note {
  opacity: 1;
}

/* Exhibit 2 */
.ex-funnel .hd {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: var(--muted);
}
.ex-funnel .lab {
  font-size: 13px;
  fill: var(--heading);
}
.ex-funnel .track {
  fill: color-mix(in srgb, var(--rule) 55%, transparent);
}
.ex-funnel .fill {
  fill: var(--heading);
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition:
    transform var(--dur-4) var(--ease-out),
    fill var(--dur-3) var(--ease-out);
}
.ex-funnel .val {
  font-weight: 700;
  font-size: 12.5px;
  fill: var(--heading);
}
.ex-funnel .pct {
  font-weight: 600;
  font-size: 12px;
}
.ex-funnel .rule {
  stroke: var(--rule);
}
.ex-funnel .gap .fill,
.ex-funnel .gap .val,
.ex-funnel .gap .pct {
  fill: var(--xp-rust);
}
.ex-funnel .gap .lab {
  font-weight: 600;
}
.xp-stage[data-focus="gap"] .row:not(.gap) {
  opacity: 0.45;
}
.ex-funnel .row {
  transition: opacity var(--dur-3) var(--ease-out);
}

/* Exhibit 3 */
.ex-bull {
  max-width: 34rem;
  justify-self: center;
}
.ex-bull .ring .fill {
  stroke: var(--bg);
  stroke-width: 2.4;
}
.ex-bull .r-onlookers .fill {
  fill: var(--ring-1);
}
.ex-bull .r-neighbors .fill {
  fill: var(--ring-2);
}
.ex-bull .r-counterparties .fill {
  fill: var(--ring-3);
}
.ex-bull .r-owners .fill {
  fill: var(--ring-4);
}
.ex-bull .edge {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.5;
  stroke-opacity: 0.7;
  transition:
    stroke-width var(--dur-3) var(--ease-out),
    stroke-opacity var(--dur-3) var(--ease-out);
}
.ex-bull .tick {
  stroke: var(--accent);
  stroke-width: 0.9;
}
.ex-bull .nm {
  font-size: 7.4px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--ring-ink-1);
}
.ex-bull .n-counterparties {
  fill: var(--ring-ink-3);
}
.ex-bull .n-owners {
  fill: var(--ring-ink-4);
  font-size: 8.4px;
}
.ex-bull .sub {
  font-size: 5.6px;
  fill: var(--ring-sub-4);
}
.ex-bull .lb {
  fill: var(--ring-ink-1);
}
.ex-bull .lb.l-counterparties {
  fill: var(--ring-ink-3);
}
.ex-bull .lb.it {
  font-style: italic;
  fill: var(--muted);
}
.ex-bull .ring,
.ex-bull .lb,
.ex-bull .nm,
.ex-bull .sub {
  transition: opacity var(--dur-3) var(--ease-out);
}
.ex-bull .web {
  opacity: 0;
  transition: opacity var(--dur-4) var(--ease-out);
}
.ex-bull .web line {
  stroke: var(--accent);
  stroke-width: 0.6;
  stroke-dasharray: 2 3;
}
.ex-bull .web circle {
  fill: var(--accent);
}
.xp-stage[data-scene="web"] .ex-bull .web {
  opacity: 0.9;
}
.xp-stage[data-scene="web"] .ex-bull .lb {
  opacity: 0.3;
}
/* one ring in focus: the others step back */
.xp-stage[data-focus="owners"] .ex-bull :is(.ring:not(.r-owners), .lb, .nm:not(.n-owners)),
.xp-stage[data-focus="counterparties"]
  .ex-bull
  :is(.ring:not(.r-counterparties, .r-owners), .lb:not(.l-counterparties), .nm:not(.n-counterparties), .sub),
.xp-stage[data-focus="neighbors"] .ex-bull :is(.ring.r-onlookers, .lb:not(.l-neighbors), .nm:not(.n-neighbors), .sub),
.xp-stage[data-focus="onlookers"] .ex-bull :is(.lb:not(.l-onlookers), .nm:not(.n-onlookers), .sub) {
  opacity: 0.28;
}
.xp-stage[data-focus="owners"] .r-owners .edge,
.xp-stage[data-focus="counterparties"] .r-counterparties .edge,
.xp-stage[data-focus="neighbors"] .r-neighbors .edge,
.xp-stage[data-focus="onlookers"] .r-onlookers .edge {
  stroke-width: 1.6;
  stroke-opacity: 1;
}
.xp-stage[data-focus="insurers"] .ex-bull .lb.k-insurers,
.xp-stage[data-focus="ballot"] .ex-bull .lb.k-ballot {
  opacity: 1;
  font-weight: 700;
}
.xp-stage[data-focus="insurers"] .r-counterparties .edge,
.xp-stage[data-focus="ballot"] .r-onlookers .edge {
  stroke-width: 1.6;
  stroke-opacity: 1;
}
.xp-stage[data-focus="all"] .ex-bull .lb {
  opacity: 1;
}

/* first sight: bars grow, rows fill */
.xp.live .xp-stage:not([data-seen~="filings"]) .ex-filings .bar rect {
  transform: scaleY(0);
}
.xp.live .xp-stage:not([data-seen~="funnel"]) .ex-funnel .fill {
  transform: scaleX(0);
}
.xp-stage .bar[data-i="0"] rect {
  transition-delay: 0ms;
}
.xp-stage .bar[data-i="1"] rect {
  transition-delay: 45ms;
}
.xp-stage .bar[data-i="2"] rect {
  transition-delay: 90ms;
}
.xp-stage .bar[data-i="3"] rect {
  transition-delay: 135ms;
}
.xp-stage .bar[data-i="4"] rect {
  transition-delay: 180ms;
}
.xp-stage .bar[data-i="5"] rect {
  transition-delay: 225ms;
}
.xp-stage .bar[data-i="6"] rect {
  transition-delay: 270ms;
}
.xp-stage .bar[data-i="7"] rect {
  transition-delay: 315ms;
}
.xp-stage .bar[data-i="8"] rect {
  transition-delay: 360ms;
}
.xp-stage .bar[data-i="9"] rect {
  transition-delay: 405ms;
}
.xp-stage .bar[data-i="10"] rect {
  transition-delay: 450ms;
}
.xp-stage .row[data-i="0"] .fill {
  transition-delay: 0ms;
}
.xp-stage .row[data-i="1"] .fill {
  transition-delay: 110ms;
}
.xp-stage .row[data-i="2"] .fill {
  transition-delay: 220ms;
}
.xp-stage .row[data-i="3"] .fill {
  transition-delay: 330ms;
}
.xp-stage .row[data-i="4"] .fill {
  transition-delay: 440ms;
}

/* ---- phones and narrow tablets: the stage sits on top, the text scrolls beneath ----- */
@media (max-width: 60rem) {
  .xp {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .xp-stage {
    order: -1;
    top: 5.4rem;
    height: 44svh;
    min-height: 15rem;
    z-index: 5;
    padding-block: var(--space-xs) var(--space-s);
    background: var(--bg) var(--surface-cloth) 0 0 / 240px 240px;
  }
  .xp-stage::after {
    /* a short fade below the stage, so text slides under it rather than being cut */
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: var(--space-m);
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none;
  }
  .ex {
    max-height: calc(44svh - 3rem);
  }
  .xp-cap {
    display: none;
  }
  .xp.live .xp-step::before {
    left: -0.75rem;
  }
}

/* ---- without JavaScript: no stage; each exhibit in reading order ---------------------- */
.xp:not(.live) .xp-stage {
  position: static;
  height: auto;
}
.xp:not(.live) .xp-scene {
  opacity: 1;
  visibility: visible;
  grid-area: auto;
  margin-bottom: var(--space-l);
}
.xp:not(.live) .xp-frame {
  display: block;
}
.xp:not(.live) .xp-cap {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .xp * {
    transition: none !important;
  }
}

/* ---- heading anchors: shown on hover or focus; a linked heading lands below the header -- */
/* in the left margin, so it never changes how the heading wraps */
.xp :is(.xp-ch > h2, h3) {
  position: relative;
}
.xp .anchor {
  position: absolute;
  right: 100%;
  padding-right: 0.35em;
  font: 400 0.7em var(--font-ui);
  color: var(--accent-ink);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.xp :is(h2, h3):hover .anchor,
.xp .anchor:focus-visible {
  opacity: 1;
}
.xp :is(.xp-ch, h3) {
  scroll-margin-top: 6rem;
}
.xp :target > h2,
.xp h3:target {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* ---- print: the article in reading order, then its exhibits; no sticky stage, no chrome -- */
@media print {
  .xp {
    display: block;
  }
  .xp .anchor {
    display: none;
  }
  .xp .xp-step::before {
    display: none;
  }
  .xp-stage {
    position: static !important;
    height: auto !important;
    break-before: page;
  }
  .xp-frame {
    display: block;
  }
  .xp-scene {
    opacity: 1 !important;
    visibility: visible !important;
    break-inside: avoid;
    margin-bottom: 1.5rem;
  }
  .xp-scene[data-for="night"],
  .xp-cap {
    display: none;
  }
  .xp-text a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
    overflow-wrap: anywhere;
  }
}

/* ---- phones: no pinned stage; each scene appears once, inline, as a still --------------- */
.xp-still {
  display: none;
}
@media (max-width: 60rem) {
  .xp-stage:not(.xp-still) {
    display: none !important;
  }
  .xp-still {
    display: block;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    margin: var(--space-m) 0 var(--space-l);
    padding: 0 !important;
    background: none !important;
  }
  .xp-still::after {
    display: none;
  }
  .xp-still .xp-frame {
    display: block;
  }
  .xp-still .xp-scene {
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .xp-still .ex {
    max-height: none;
  }
  /* the opening art as a clean 4:3 picture, not the desktop's feathered panel */
  .xp-still .xp-scene[data-for="night"] {
    aspect-ratio: 4 / 3;
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: var(--radius-m);
    overflow: hidden;
  }
  /* no gold "current paragraph" rule without a stage to follow */
  .xp.live .xp-step::before {
    display: none;
  }
}
@media (max-width: 60rem) {
  /* a graphic inside its exhibit: between the title and the source */
  .xp-ex .xp-still {
    margin: var(--space-s) 0 var(--space-xs);
  }
  .xp-still-cap {
    margin: var(--space-2xs) 0 0;
    font: 700 var(--step--2) / 1.2 var(--font-ui);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--accent-ink);
  }
}
.xp-stage:not(.xp-still) .xp-still-cap {
  display: none;
}
.read-progress[data-astro-cid-f2wfjkjp] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: var(--accent);
  transform-origin: 0;
  transform: scaleX(0);
  display: none;
}

@supports (animation-timeline: scroll()) {
  .read-progress[data-astro-cid-f2wfjkjp] {
    display: block;
    animation: linear both read-progress;
    animation-timeline: scroll(root);
  }
}

@keyframes read-progress {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .read-progress[data-astro-cid-f2wfjkjp] {
    display: none;
  }
}

.toc[data-astro-cid-f2wfjkjp] {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  max-width: 30rem;
}

.toc-h[data-astro-cid-f2wfjkjp], .share-h[data-astro-cid-f2wfjkjp] {
  font: 700 var(--step--2) / 1.2 var(--font-ui);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 var(--space-2xs);
}

.toc[data-astro-cid-f2wfjkjp] ol[data-astro-cid-f2wfjkjp] {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc[data-astro-cid-f2wfjkjp] li[data-astro-cid-f2wfjkjp] {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 2rem 1fr;
  padding: .2rem 0;
  font: 400 var(--step--1) / 1.4 var(--font-ui);
}

.toc[data-astro-cid-f2wfjkjp] li[data-astro-cid-f2wfjkjp]:before {
  content: counter(toc, decimal-leading-zero);
  font-weight: 700;
  color: var(--accent-ink);
}

.toc[data-astro-cid-f2wfjkjp] a[data-astro-cid-f2wfjkjp] {
  color: var(--heading);
  text-decoration: none;
}

.toc[data-astro-cid-f2wfjkjp] a[data-astro-cid-f2wfjkjp]:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.share[data-astro-cid-f2wfjkjp] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-s);
  margin-top: var(--space-m);
  font: 600 var(--step--1) / 1.3 var(--font-ui);
}

.share-h[data-astro-cid-f2wfjkjp] {
  margin: 0;
}

.share-copy[data-astro-cid-f2wfjkjp] {
  font: inherit;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: .18em;
}

.share-status[data-astro-cid-f2wfjkjp] {
  font-weight: 500;
  color: var(--muted);
}
.report[data-astro-cid-znh4wlgt] {
  padding-block-start: var(--space-xl);
}

.crumbs[data-astro-cid-znh4wlgt] a[data-astro-cid-znh4wlgt] {
  font: 600 var(--step--2)/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.top[data-astro-cid-znh4wlgt] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--space-2xl);
  align-items: start;
  margin-top: var(--space-l);
}

h1[data-astro-cid-znh4wlgt] {
  font-size: var(--step-6);
}

.byline[data-astro-cid-znh4wlgt] time[data-astro-cid-znh4wlgt] {
  white-space: nowrap;
}

.byline[data-astro-cid-znh4wlgt] {
  margin: var(--space-s) 0 0;
  font: 600 var(--step--1)/1.4 var(--font-ui);
  color: var(--muted);
}

.prose[data-astro-cid-znh4wlgt] {
  max-width: 38rem;
}

.dl[data-astro-cid-znh4wlgt] {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.cover[data-astro-cid-znh4wlgt] {
  display: block;
  box-shadow: 0 1px 2px #0000001f, 0 18px 40px #00000038;
  transform: rotate(.6deg);
}

.cover[data-astro-cid-znh4wlgt] img {
  width: 100%;
  height: auto;
}

.read[data-astro-cid-znh4wlgt] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-s);
  font: 600 var(--step-0) / 1.3 var(--font-ui);
}

.cover[data-astro-cid-znh4wlgt].art {
  transform: none;
  border-radius: var(--radius-m);
  overflow: hidden;
}

.read[data-astro-cid-znh4wlgt] .meta[data-astro-cid-znh4wlgt] {
  font-weight: 500;
}

.report[data-astro-cid-znh4wlgt] {
  padding-block-end: 0;
}

@media (width <= 48rem) {
  .top[data-astro-cid-znh4wlgt] {
    grid-template-columns: 1fr;
  }

  .cover[data-astro-cid-znh4wlgt] {
    max-width: 9rem;
  }

  .cover[data-astro-cid-znh4wlgt].art {
    display: none;
  }
}
.full[data-astro-cid-gytfa2rs] .head h2 {
  font-size: var(--step-3);
}

.adds[data-astro-cid-gytfa2rs] {
  font: italic 400 var(--step-1) / 1.45 var(--font-body);
  color: var(--ink-2);
}

.dl[data-astro-cid-gytfa2rs] {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: var(--space-l);
}

.col[data-astro-cid-gytfa2rs] {
  max-width: 42rem;
}

.inside[data-astro-cid-gytfa2rs] {
  margin: var(--space-s) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
  border-top: 2px solid var(--heading);
}

.inside[data-astro-cid-gytfa2rs] li[data-astro-cid-gytfa2rs] {
  counter-increment: s;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--rule);
  font: var(--display-weight) var(--step-0) / 1.4 var(--font-display);
  color: var(--heading);
}

.inside[data-astro-cid-gytfa2rs] li[data-astro-cid-gytfa2rs]:before {
  content: counter(s, decimal-leading-zero);
  font: 700 var(--step--1) / 1.7 var(--font-ui);
  color: var(--accent-ink);
}
.author-credits[data-astro-cid-77eldnga] {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
}

.eyebrow[data-astro-cid-77eldnga] {
  margin-bottom: var(--space-xs);
}

.author-list[data-astro-cid-77eldnga] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

li[data-astro-cid-77eldnga] {
  min-width: 0;
  max-width: 100%;
}

a[data-astro-cid-77eldnga] {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--ink);
}

a[data-astro-cid-77eldnga] .portrait {
  flex: none;
  width: var(--space-xl);
  height: auto;
}

.credit[data-astro-cid-77eldnga] {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}

.name[data-astro-cid-77eldnga] {
  font: 600 var(--step--1) / 1.3 var(--font-ui);
}

.role[data-astro-cid-77eldnga] {
  font: 400 var(--step--2) / 1.4 var(--font-ui);
  color: var(--muted);
}

a[data-astro-cid-77eldnga]:hover .name[data-astro-cid-77eldnga] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
.work[data-astro-cid-2bgdohx3] .head h2 {
  font-size: var(--step-3);
}

.col[data-astro-cid-2bgdohx3] {
  max-width: 42rem;
}

.dl[data-astro-cid-2bgdohx3] {
  margin-top: var(--space-l);
}

.soon[data-astro-cid-2bgdohx3] {
  margin-top: var(--space-m);
}

.bio-note[data-astro-cid-2bgdohx3] {
  max-width: 36rem;
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--muted);
}
.article[data-astro-cid-bj5spbip] {
  padding-block-start: var(--space-m);
}