/* Portfolio map on /projects/. Adapted from the map in the portfolio post
   (content/blog/building-the-scaling-trust-portfolio/figures.css); rendered by
   layouts/_partials/portfolio-map.html from data/portfolio.yaml. */
.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-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: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; } }

/* Cards are links to project pages. */
article > section .stf-map a.pj:link, article > section .stf-map a.pj:visited, article > section .stf-map a.pj:hover {
  color: var(--ink); text-decoration: none; padding: 4px 6px 4px; border: 1px solid var(--cc, rgba(59,59,59,.4)); background: var(--paper); }
article > section .stf-map a.pj.partner:link, article > section .stf-map a.pj.partner:visited, article > section .stf-map a.pj.partner:hover { background: #fbfbfb; }
article > section .stf-map .dp-link a:link, article > section .stf-map .dp-link a:visited { color: #0099FF; }
.stf-map .dp .dp-link { margin-top: 8px; font: 500 .85rem/1.3 var(--sans); }
.stf-map .dp .dp-link a { color: var(--link, var(--blue)); text-decoration: none; }

/* Projects page: a light lede and counts, the map as the page's centrepiece, onward links. */
.portfolio-lede > p:first-child { font-size: 1.5rem; line-height: 1.4; max-width: 640px; margin: 0.5rem 0 0; }
.portfolio-stats { font: 500 0.85rem/1.4 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 0; }
.portfolio-page figure.stf { margin-top: 2rem; }
.portfolio-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; max-width: 712px;
  margin: 3rem 0 1rem; border-top: 1px solid var(--rule); font-family: var(--sans); }
.portfolio-next a:link, .portfolio-next a:visited { display: block; padding: 0.9rem 1rem 0 0; color: var(--ink); text-decoration: none; font-size: 1.05rem; line-height: 1.35; }
.portfolio-next a:hover { color: var(--link); }
.portfolio-next a span { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }

/* Project page: the same map, this team's card marked, the rest dimmed. */
.stf-map.has-here .pj:not(.is-here) { opacity: .45; }
.stf-map.has-here .pj.is-here { box-shadow: 0 0 0 2px var(--cc, var(--ink)); opacity: 1; }
.stf-map.has-here:has(.pj:hover) .pj:not(:hover):not(.is-here) { opacity: .45; }
figure.stf.is-mini .map-diagram { zoom: .8; }
.project-crumb { font: 500 0.8rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 2.5rem 0 0; }
.project-crumb a:link, .project-crumb a:visited { color: var(--muted); text-decoration: none; border-bottom: 1px dotted currentColor; }
.project-page h1 { margin-top: 0.6rem; }
.project-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 1.5rem; font: 500 0.78rem/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; }
.project-badges > * { padding: 0.35rem 0.6rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); }
.project-badges .muted { color: var(--muted); }
.project-badges a:link, .project-badges a:visited { color: var(--link); text-decoration: none; text-transform: none; letter-spacing: 0; }
.project-where h2 { margin-top: 3rem; }
.project-back { font-family: var(--sans); }