/* ===== Scaling Trust figures (generated by working/html/gen-figures.py) ===== */
.stf { --ink: rgb(59,59,59); --muted:#7a7a7a; --rule:#d9d9d9; --paper:#fff; --soft:#f3f3f3;
  --red:#cf5656; --red-soft:#fbe6e6; --blue:#2f6db5; --blue-soft:#e1ecf9; --green:#2f8f5b; --green-soft:#e0f3e7;
  --purple:#6d55d6; --purple-soft:#ebe6fb; --amber:#c98a1b; --amber-soft:#fbf0d9;
  --f-sm: clamp(10px, 1.35cqw, 13px); --f-md: clamp(11px, 1.6cqw, 15px); --f-lg: clamp(12px, 1.9cqw, 18px);
  color: var(--ink); font-family: var(--sans, "Jost", -apple-system, sans-serif); }
.stf * { box-sizing: border-box; }
.stf-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .stf-grid { grid-template-columns: 1fr; } }
.stf-canvas { position:relative; width:100%; container-type:inline-size; background:var(--paper);
  border:1px solid #ddd; overflow:hidden; }
.stf-canvas.r53 { aspect-ratio: 5 / 3; }
/* Figure 2 uses a shallower canvas: 42% of its width rather than 60% (30% less height). */
.stf-canvas.r53.stf-how { aspect-ratio: 50 / 21; }
.stf-canvas.r107 { aspect-ratio: 10 / 7; }
.stf-canvas.r169 { aspect-ratio: 16 / 9; }
.stf-canvas.r2 { aspect-ratio: 25 / 14; }
@media (max-width: 640px) {
  .stf-canvas.r53.stf-how { aspect-ratio: 8 / 7; }
}
@container (max-width: 700px) {
  .stf-how .sub .chips { gap: .25em; }
  .stf-how .sub .stf-chip { padding: .08em .35em; font-size: 8.5px; }
}
@container (max-width: 520px) {
  .stf-how .sub .chips { display: none; }
  .stf-how .stf-chip.m-hide { display: none; }
  .stf-how .stf-band .role { font-size: 9px; }
  .stf-how .sub b { font-size: 9.5px; }
  .stf-how .b-int b { writing-mode: vertical-rl; transform: rotate(180deg); }
}
.stf-canvas > * { position:absolute; }
.stf-title { left:3%; top:5%; font-size: var(--f-lg); font-weight:600; letter-spacing:-0.01em; }
.stf-sub { left:3%; top:5%; margin-top: calc(var(--f-lg) * 1.55); max-width: 70%; font-size: var(--f-sm); color: var(--muted); line-height:1.35; }
.stf-foot { left:3%; right:3%; bottom:4.5%; font-size: var(--f-sm); color: var(--muted); display:flex; gap: 1.4em; flex-wrap:wrap; }
.stf-foot span::before { content:"·"; margin-right: 0.6em; color:#bbb; }
.stf-foot span:first-child::before { content:none; }

/* nodes */
.stf-node { width: 6.4cqw; height: 6.4cqw; transform: translate(-50%,-50%); border: 1.5px solid var(--ink);
  border-radius: 1.2cqw; background: var(--paper); display:flex; align-items:center; justify-content:center; z-index: 3; }
.stf-node.agent { border-radius: 1.2cqw; }
.stf-node.agent::before { content:""; width: 55%; height: 55%; border: 1.2px solid var(--ink); border-radius: 0.5cqw;
  background: repeating-linear-gradient(45deg, transparent 0 15%, rgba(59,59,59,.28) 15% 22%); }
.stf-node.machine { border-radius: 50%; }
.stf-node.machine::before { content:""; width: 40%; height: 40%; border-radius:50%; border: 1.2px solid var(--ink);
  box-shadow: 0 0 0 0.9cqw var(--paper), 0 0 0 1.05cqw rgba(59,59,59,.45); }
.stf-node.hub { width: 12cqw; height: 12cqw; border-radius: 50%; border-width: 2px; background: var(--ink); z-index:4; }
.stf-node.hub::before { content:""; width: 35%; height: 35%; border-radius: 50%; background: var(--paper); }
/* owner (principal) dot */
.stf-node .own { position:absolute; left: -22%; top: -22%; width: 40%; height: 40%; border-radius: 50%;
  border: 1.5px solid var(--paper); box-shadow: 0 0 0 1px rgba(59,59,59,.35); background: var(--c, var(--ink)); }
.stf-node.machine .own { border-radius: 25%; }

/* connectors */
.stf-line { height: 0.28cqw; margin-top: -0.14cqw; transform-origin: 0 50%; z-index: 2; }
.stf-line > i { position:absolute; inset:0; background: var(--ink); opacity:.55; transform-origin: 0 50%; transform: scaleX(1); border-radius: 1px; }
.stf-line.dashed > i { background: repeating-linear-gradient(90deg, var(--ink) 0 0.9cqw, transparent 0.9cqw 1.6cqw); opacity: .45; }
.stf-line > b { position:absolute; top: 50%; left: 0; width: 1.5cqw; height: 1.5cqw; margin: -0.75cqw 0 0 -0.75cqw; border-radius: 50%;
  background: var(--pc, var(--blue)); opacity: 0; box-shadow: 0 0 0 0.4cqw var(--paper); z-index: 5; }

/* labels */
.stf-tag { font-size: var(--f-sm); color: var(--muted); white-space: nowrap; transform: translate(-50%,-50%); }
.stf-pill { font-size: var(--f-sm); padding: 0.25em 0.7em; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); white-space: nowrap; }
.stf-chip { font-size: var(--f-sm); padding: 0.28em 0.65em; border-radius: 0.5em; border: 1px solid rgba(59,59,59,.28); background: rgba(255,255,255,.75); white-space: nowrap; }
.stf-ticker { display:flex; gap: 0; flex-wrap: wrap; row-gap: .3em; max-width: 94%; font-size: var(--f-sm); color:#b5b5b5; }
.stf-ticker span { padding: 0.15em 0.55em; border-radius: 999px; transition: none; }
.stf-ticker span + span::before { content: "→"; margin-right: 0.9em; color:#c8c8c8; position: relative; left: -0.55em; }

@media (prefers-reduced-motion: reduce) {
  .stf *, .stf *::before, .stf *::after { animation-play-state: paused !important; }
}


/* --- Figure: how (three tracks) --- */
.stf-how .stf-tlabel { width: 18.500%; display:flex; flex-direction:column; justify-content:center; gap:.15em; font-size: var(--f-md); line-height:1.2; }
.stf-how .stf-tlabel b { font-weight:600; }
.stf-how .stf-tlabel span { color: var(--muted); font-size: var(--f-sm); }
.stf-band { border: 1.5px solid var(--bc); background: var(--bs); border-radius: 1.2cqw; padding: 1.2cqw 1.4cqw; display:flex; flex-direction:column; justify-content:center; transition:none; }
.stf-band .chips { display:flex; flex-wrap:wrap; gap: .5em .55em; justify-content:center; }
.stf-how .stf-band .chips { gap: .3em .4em; }
.stf-how .stf-chip { padding: .12em .48em; }
.stf-band .role { position:absolute; right: 1.2cqw; top: -0.8em; font-size: var(--f-sm); color: var(--bc); background: var(--paper); padding: 0 .5em; border-radius: 999px; border: 1px solid var(--bc); line-height: 1.5; text-transform: lowercase; letter-spacing:.02em; }
.b-arena { --bc: var(--red); --bs: var(--red-soft); }
.b-stack { --bc: #8a8a8a; --bs: var(--soft); }
.b-theory { --bc: var(--blue); --bs: linear-gradient(90deg, var(--blue-soft), var(--green-soft)); }
.b-theory .role { background: var(--paper); }
.stf-band .sub { position:absolute; border: 1.5px solid var(--sc); background: var(--ss); border-radius: 1cqw; padding: .7cqw 1cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; font-size: var(--f-md); }
.stf-band .sub b { font-weight:600; }
.stf-band .sub .stf-chip { background: rgba(255,255,255,.7); border-color: rgba(59,59,59,.22); }
.b-digital { --sc: var(--blue); --ss: var(--blue-soft); }
.b-int { --sc: var(--purple); --ss: var(--purple-soft); }
.b-physical { --sc: var(--green); --ss: var(--green-soft); }
.stf-band .link { position:absolute; height: 0.3cqw; margin-top:-0.15cqw; background: rgba(59,59,59,.3); overflow:visible; }
.stf-band .link::before, .stf-band .link::after { content:""; position:absolute; top:50%; width:0; height:0; border: 0.55cqw solid transparent; margin-top:-0.55cqw; }
.stf-band .link::before { left:-0.2cqw; border-right-color: rgba(59,59,59,.5); border-left:0; }
.stf-band .link::after { right:-0.2cqw; border-left-color: rgba(59,59,59,.5); border-right:0; }
.stf-band .link > i { position:absolute; inset:0; background: var(--purple); opacity:0; }
.stf-arrow { width: 0.3cqw; margin-left: -0.15cqw; background: rgba(59,59,59,.32); }
.stf-arrow::after { content:""; position:absolute; left:50%; width:0; height:0; border: 0.7cqw solid transparent; margin-left:-0.7cqw; }
.stf-arrow.up::after { top:-0.2cqw; border-bottom-color: rgba(59,59,59,.6); border-top:0; margin-top:-0.55cqw; }
.stf-arrow.down::after { bottom:-0.2cqw; border-top-color: rgba(59,59,59,.6); border-bottom:0; margin-bottom:-0.55cqw; }
.stf-arrow > b { position:absolute; left:50%; top:0; width: 1.6cqw; height:1.6cqw; margin: -0.8cqw 0 0 -0.8cqw; border-radius:50%; background: var(--pc, var(--ink)); box-shadow: 0 0 0 0.35cqw var(--paper); opacity:0; }
.stf-alabel { font-size: var(--f-sm); color: var(--muted); transform: translateY(-50%); max-width: 30.000%; line-height:1.25; }

@keyframes stf-how-theory { 0% { box-shadow: 0 0 0 0.8cqw rgba(47,109,181,.35) } 10.00% { box-shadow: 0 0 0 0.8cqw rgba(47,109,181,.35) } 14.44% { box-shadow: 0 0 0 0 rgba(47,109,181,0) } 87.78% { box-shadow: 0 0 0 0 rgba(47,109,181,0) } 91.11% { box-shadow: 0 0 0 0.8cqw rgba(47,109,181,.35) } 100% { box-shadow: 0 0 0 0.8cqw rgba(47,109,181,.35) } }
.stf-how .b-theory { animation: stf-how-theory 9.0s linear infinite; }
@keyframes stf-how-stack { 0%,22.22% { box-shadow: 0 0 0 0 rgba(120,120,120,0) } 25.56% { box-shadow: 0 0 0 0.8cqw rgba(120,120,120,.28) } 35.56% { box-shadow: 0 0 0 0.8cqw rgba(120,120,120,.28) } 38.89% { box-shadow: 0 0 0 0 rgba(120,120,120,0) } 70.00% { box-shadow: 0 0 0 0 rgba(120,120,120,0) } 72.22% { box-shadow: 0 0 0 0.8cqw rgba(120,120,120,.28) } 76.67% { box-shadow: 0 0 0 0.8cqw rgba(120,120,120,.28) } 80.00% { box-shadow: 0 0 0 0 rgba(120,120,120,0) } 100% { box-shadow: 0 0 0 0 rgba(120,120,120,0) } }
.stf-how .b-stack { animation: stf-how-stack 9.0s linear infinite; }
@keyframes stf-how-arena { 0%,46.67% { box-shadow: 0 0 0 0 rgba(207,86,86,0) } 49.44% { box-shadow: 0 0 0 0.8cqw rgba(207,86,86,.35) } 57.78% { box-shadow: 0 0 0 0.8cqw rgba(207,86,86,.35) } 61.11% { box-shadow: 0 0 0 0 rgba(207,86,86,0) } 100% { box-shadow: 0 0 0 0 rgba(207,86,86,0) } }
.stf-how .b-arena { animation: stf-how-arena 9.0s linear infinite; }
@keyframes stf-how-lk { 0%,24.44% { opacity:0 } 26.67% { opacity:1 } 33.33% { opacity:1 } 36.67% { opacity:0 } 100% { opacity:0 } }
.stf-how .lk1 > i { animation: stf-how-lk 9.0s linear infinite; }
.stf-how .lk2 > i { animation: stf-how-lk 9.0s linear infinite; animation-delay: .25s; }
@keyframes stf-how-g2u { 0%,11.11% { top:100%; opacity:0 } 12.00% { opacity:1 } 21.33% { opacity:1 } 22.22% { top:0%; opacity:0 } 100% { top:0%; opacity:0 } }
.stf-how .g2u > b { --pc: var(--blue); animation: stf-how-g2u 9.0s linear infinite; }
@keyframes stf-how-g1u { 0%,35.56% { top:100%; opacity:0 } 36.44% { opacity:1 } 45.78% { opacity:1 } 46.67% { top:0%; opacity:0 } 100% { top:0%; opacity:0 } }
.stf-how .g1u > b { --pc: var(--purple); animation: stf-how-g1u 9.0s linear infinite; }
@keyframes stf-how-g1d { 0%,61.11% { top:0%; opacity:0 } 62.00% { opacity:1 } 70.22% { opacity:1 } 71.11% { top:100%; opacity:0 } 100% { top:100%; opacity:0 } }
.stf-how .g1d > b { --pc: var(--red); animation: stf-how-g1d 9.0s linear infinite; }
@keyframes stf-how-g2d { 0%,77.78% { top:0%; opacity:0 } 78.67% { opacity:1 } 88.00% { opacity:1 } 88.89% { top:100%; opacity:0 } 100% { top:100%; opacity:0 } }
.stf-how .g2d > b { --pc: var(--red); animation: stf-how-g2d 9.0s linear infinite; }

/* --- Figure: interactive portfolio map (generated by working/html/gen-map.py) --- */
.stf-map { position:relative; display:block; width:95%; margin-inline:auto; font-size:1rem; container-type:inline-size; }
.stf-map .map-diagram { grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:6px; width:100%; min-width:0; font-weight:500; zoom:.9; }
.stf-map > .details { position:absolute; z-index:20; width:300px; max-width:100%; max-height:calc(100vh - 24px); overflow:visible;
  border-color:var(--tip-accent, var(--rule)); border-radius:10px;
  background:color-mix(in srgb, var(--tip-accent, var(--ink)) 7%, var(--paper));
  box-shadow:0 4px 14px rgba(59,59,59,.14); }
.stf-map > .details::before { content:""; position:absolute; top:var(--tip-arrow-y, 22px); width:9px; height:9px;
  border:1px solid var(--tip-accent, var(--rule)); background:inherit; transform:translateY(-50%) rotate(45deg); }
.stf-map > .details[data-side="right"]::before { left:-5px; border-right:0; border-top:0; }
.stf-map > .details[data-side="left"]::before { right:-5px; border-left:0; border-bottom:0; }
.stf-map > .details[hidden] { display:none; }
.stf-map .details .dp:not(.is-open) { display:none !important; }
.stf-map .details .dp.is-open { display:block; }
.stf-map .mband { border: 1px solid var(--bc); background: var(--bs); border-radius: 12px; padding: 7px 9px 9px; position: relative; }
.stf-map .mband > header { display:flex; align-items: baseline; gap: .6em; margin: 0 0 5px; font-size: 1rem; }
.stf-map .mband > header b { font-weight: 600; white-space: nowrap; }
.stf-map .mband > header span { color: var(--muted); }
.stf-map .mband > header .role { margin-left: auto; font-style: normal; font-size: .85rem; color: var(--bc); border: 1px solid var(--bc); background: var(--paper); border-radius: 999px; padding: 0 .6em; line-height: 1.5; }
.stf-map .b-arena { --bc:var(--red); --bs:var(--red-soft); }
.stf-map .b-stack { --bc:#8a8a8a; --bs:var(--soft); }
.stf-map .b-theory { --bc:var(--blue); --bs:linear-gradient(90deg, var(--blue-soft), var(--green-soft)); }
.stf-map .cols { display:flex; gap: 6px; align-items: stretch; }
.stf-map .col { flex: 1 1 0; min-width: 0; border: 1px solid var(--cc); background: var(--cs); border-radius: 10px; padding: 6px 6px 7px; display:flex; flex-direction:column; }
.stf-map .b-stack .col.c-int { flex: 0 1 138px; }
.stf-map .b-stack .col.c-partner { flex: 0 1 128px; }
.stf-map .b-stack .col.c-digital { flex: 1 1 0; }
.stf-map .b-stack .col.c-physical { flex: 1 1 0; }
.stf-map .b-arena .col { border-color:transparent; background:transparent; padding:0; }
.stf-map .b-theory .col.c-digital { --cc:#7399c5; --cs:#f2f6fb; flex:1 1 0; }
.stf-map .b-theory .col.c-physical { --cc:#70a98a; --cs:#f1f8f3; }
.stf-map .b-theory .c-physical .slots { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.stf-map .c-arena { --cc:var(--red); --cs:transparent; }
.stf-map .c-digital { --cc:var(--blue); --cs:var(--blue-soft); }
.stf-map .c-int { --cc:var(--purple); --cs:var(--purple-soft); }
.stf-map .c-physical { --cc:var(--green); --cs:var(--green-soft); }
.stf-map .c-partner { --cc:#9a9a9a; --cs:rgba(255,255,255,.55); border-style:dashed !important; }
.stf-map .col h5 { margin: 0 0 5px; font: 600 .9rem/1.2 var(--sans); color: var(--ink); letter-spacing: .01em; }
.stf-map .b-arena .col h5 { display:none; }
.stf-map .slots { display:flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; flex: 1; }
.stf-map .slot { flex: 1 1 auto; min-width: 0; border: 1px solid rgba(59,59,59,.16); border-radius: 8px; padding: 4px 5px 5px; background: rgba(255,255,255,.35); }
.stf-map .c-partner .slot { flex-basis: 100%; }
.stf-map .c-partner .pj { min-width: 0; flex: 1 1 100%; }
.stf-map .b-stack .c-digital > .slots { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); }
.stf-map .b-stack .c-digital .slot-group { min-width:0; display:grid; gap:4px; align-content:start; }
.stf-map .b-stack .c-digital .agent-slots { grid-template-columns:1fr; }
.stf-map .b-stack .c-digital .tool-slots { grid-template-columns:1fr; }
@container (min-width: 761px) {
  .stf-map .b-theory .c-digital .slots { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
.stf-map .slot h6 { margin: 0 0 3px; font: 500 .74rem/1.2 var(--sans); color: var(--muted); letter-spacing: .02em; text-transform: uppercase; }
.stf-map .cards { display:flex; flex-wrap: wrap; gap: 3px; }
.stf-map .pj { appearance: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  display:flex; flex: 0 1 120px; flex-direction: column; gap: 1px; width: 120px; min-width: 0; max-width: 100%;
  padding: 4px 6px 4px; border: 1px solid var(--cc, rgba(59,59,59,.4)); border-radius: 8px; background: var(--paper);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; }
.stf-map .pj.partner { border-radius: 2px; background: #fbfbfb; }
.stf-map .b-arena .pj { --cc:var(--red); }
.stf-map .c-partner .pj { --cc:#8a8a8a; }
.stf-map .pj b { font-weight: 600; font-size: .92rem; line-height: 1.2; }
.stf-map .pj span { font-size: .76rem; color: var(--muted); line-height: 1.2; }
.stf-map .pj i { font-size: .68rem; font-style: normal; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.stf-map .pj:hover, .stf-map .pj:focus-visible, .stf-map .pj.active { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--cc, var(--ink)); outline: none; }
.stf-map:has(.pj:hover) .pj:not(:hover), .stf-map.has-active .pj:not(.active) { opacity: .7; }
.stf-map .open { display:block; flex: 0 0 25.2px; width: 25.2px; height: 25.2px; border: 1px dashed rgba(59,59,59,.28); border-radius: 6px; background: rgba(255,255,255,.4); align-self: flex-end; }
.stf-map .details { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); padding: 9px 11px; min-height: 5.4rem; }
.stf-map .dp { display: none; }
.stf-map .dp.default { display: block; }
.stf-map .dp.default b { margin-bottom:.5rem; }
.stf-map .dp b { display:block; padding-bottom:5px; border-bottom:1px solid color-mix(in srgb, var(--tip-accent, var(--rule)) 35%, transparent); font-weight:600; font-size:1.05rem; line-height:1.25; }
.stf-map .dp em { display:block; margin:5px 0 7px; color:var(--muted); font-size:.78rem; font-style:normal; line-height:1.3; }
.stf-map .dp p { margin:0; max-width:none; font:400 .92rem/1.42 var(--sans); }
.stf-map .dp p.team { margin-top:7px; color:var(--muted); font-size:.76rem; line-height:1.35; }
.stf-map:has(.pj[data-pj="andon"]:hover) .dp[data-dp="andon"], .stf-map:has(.pj[data-pj="andon"]:focus-visible) .dp[data-dp="andon"], .stf-map[data-active="andon"] .dp[data-dp="andon"],
.stf-map:has(.pj[data-pj="amodo"]:hover) .dp[data-dp="amodo"], .stf-map:has(.pj[data-pj="amodo"]:focus-visible) .dp[data-dp="amodo"], .stf-map[data-active="amodo"] .dp[data-dp="amodo"],
.stf-map:has(.pj[data-pj="bt6"]:hover) .dp[data-dp="bt6"], .stf-map:has(.pj[data-pj="bt6"]:focus-visible) .dp[data-dp="bt6"], .stf-map[data-active="bt6"] .dp[data-dp="bt6"],
.stf-map:has(.pj[data-pj="6049"]:hover) .dp[data-dp="6049"], .stf-map:has(.pj[data-pj="6049"]:focus-visible) .dp[data-dp="6049"], .stf-map[data-active="6049"] .dp[data-dp="6049"],
.stf-map:has(.pj[data-pj="6203"]:hover) .dp[data-dp="6203"], .stf-map:has(.pj[data-pj="6203"]:focus-visible) .dp[data-dp="6203"], .stf-map[data-active="6203"] .dp[data-dp="6203"],
.stf-map:has(.pj[data-pj="6217"]:hover) .dp[data-dp="6217"], .stf-map:has(.pj[data-pj="6217"]:focus-visible) .dp[data-dp="6217"], .stf-map[data-active="6217"] .dp[data-dp="6217"],
.stf-map:has(.pj[data-pj="6181"]:hover) .dp[data-dp="6181"], .stf-map:has(.pj[data-pj="6181"]:focus-visible) .dp[data-dp="6181"], .stf-map[data-active="6181"] .dp[data-dp="6181"],
.stf-map:has(.pj[data-pj="6104"]:hover) .dp[data-dp="6104"], .stf-map:has(.pj[data-pj="6104"]:focus-visible) .dp[data-dp="6104"], .stf-map[data-active="6104"] .dp[data-dp="6104"],
.stf-map:has(.pj[data-pj="matta"]:hover) .dp[data-dp="matta"], .stf-map:has(.pj[data-pj="matta"]:focus-visible) .dp[data-dp="matta"], .stf-map[data-active="matta"] .dp[data-dp="matta"],
.stf-map:has(.pj[data-pj="5999"]:hover) .dp[data-dp="5999"], .stf-map:has(.pj[data-pj="5999"]:focus-visible) .dp[data-dp="5999"], .stf-map[data-active="5999"] .dp[data-dp="5999"],
.stf-map:has(.pj[data-pj="5909"]:hover) .dp[data-dp="5909"], .stf-map:has(.pj[data-pj="5909"]:focus-visible) .dp[data-dp="5909"], .stf-map[data-active="5909"] .dp[data-dp="5909"],
.stf-map:has(.pj[data-pj="6056"]:hover) .dp[data-dp="6056"], .stf-map:has(.pj[data-pj="6056"]:focus-visible) .dp[data-dp="6056"], .stf-map[data-active="6056"] .dp[data-dp="6056"] { display: block; }
.stf-map:has(.pj:hover) .dp.default, .stf-map:has(.pj:focus-visible) .dp.default, .stf-map.has-active .dp.default { display: none; }
@container (max-width: 900px) {
  .stf-map .b-stack .cols { flex-wrap: wrap; }
  .stf-map .c-partner .slot { flex-basis: auto; }
  .stf-map .c-partner .pj { flex: 0 1 200px; }
  .stf-map .pj { width:96px; min-width:0; max-width:100%; flex-basis:96px; }
}
/* Two equal partner panels above three stack panels at intermediate widths. */
@container (min-width: 521px) and (max-width: 760px) {
  .stf-map .b-stack > .cols { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .stf-map .b-stack > .cols > .col { grid-column:span 2; }
  .stf-map .b-stack > .cols > .c-partner { grid-column:span 3; grid-row:1; }
  .stf-map .b-stack > .cols > .c-digital,
  .stf-map .b-stack > .cols > .c-int,
  .stf-map .b-stack > .cols > .c-physical { grid-row:2; }
}
@media (max-width: 760px) {
  .stf-map { display:flex; flex-direction:column; gap:6px; width:100%; margin-inline:0; }
  .stf-map .map-diagram { width:100%; zoom:1; }
  .stf-map .cols { flex-wrap: wrap; }
  .stf-map .b-stack .col { flex: 1 1 45% !important; }
  .stf-map .b-stack .col.c-digital, .stf-map .b-stack .col.c-physical { flex-basis: 100% !important; }
}
@media (max-width: 520px) {
  .stf-map .cols { flex-direction: column; }
  .stf-map .b-stack .col, .stf-map .b-theory .col { flex: 1 1 auto !important; }
}

@media (max-width: 900px) {
  .stf-map .b-stack .col.c-partner { flex:0 1 100px !important; }
}

/* Site integration: generated figures sit centred under the 760px column and may extend
   symmetrically into the margins (up to 980px), never past the viewport. Overrides Tufte figure defaults. */
article > section > figure.stf, figure.stf {
  --stf-w: min(980px, calc(100vw - 48px));
  --stf-col: min(712px, calc(100vw - 48px));
  width: var(--stf-w); max-width: none; margin: 2.4rem 0 2.6rem calc((var(--stf-col) - var(--stf-w)) / 2);
  padding: 0; float: none; }
figure.stf figcaption { float: none; clear: both; width: auto; max-width: none; margin: .7rem 0 0; padding: 0;
  font: 500 .95rem/1.5 var(--sans); color: var(--muted); font-style: normal; }
figure.stf .stf-map p { width: auto; max-width: none; margin: 0; }
@media (max-width: 760px) { article > section > figure.stf, figure.stf { width: 100%; margin-left: 0; } }