@font-face {
  font-family:"PP Neue Montreal";
  src:url("/assets/fonts/pp-neue-montreal-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"PP Neue Montreal";
  src:url("/assets/fonts/pp-neue-montreal-book.woff2") format("woff2");
  font-weight:350;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"PP Neue Montreal";
  src:url("/assets/fonts/pp-neue-montreal-medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
:root[data-font-preview="archivo"] { --font-sans:"Archivo",sans-serif; }
:root {
  --font-sans:"PP Neue Montreal","Archivo",ui-sans-serif,system-ui,sans-serif;
  --default-font-family:var(--font-sans);
}
@font-face {
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-latin-variable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:"Geist Mono";
  src:url("/assets/fonts/geist-mono-latin-variable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
.agency-scale :is(h1,h2,h3).font-light { font-weight:400; }
.creative-copy .hero-contact { min-height:46px; height:auto; padding:10px 22px; font-size:16px; line-height:1.35; }
.creative-copy > p:not(.font-mono) { color:#51464f; }

/* Sampled from the DistribuComm paper. Keep this pigment inside the artwork. */
.work-material {
  --prune-papier: #745c7c;
  background-color: var(--prune-papier);
}

.practice-title { max-width:1500px; margin:auto; padding:clamp(38px,6vw,90px) 6% 0; }
.site-menu { position:absolute; inset:auto 0 auto auto; min-width:min(340px,100%); padding:12px 24px 22px; background:var(--background,#f5f2eb); box-shadow:0 10px 20px #42283d20; border:1px solid #cfc7ca; color:var(--prune-encre); }
.site-menu a { display:block; padding:12px 2px; border-bottom:1px solid #cfc7ca; font-size:19px; }
[role="group"] button[aria-pressed="true"] { text-decoration:underline; opacity:1; }
[role="group"] button[aria-pressed="false"] { text-decoration:none; opacity:.7; }
@media(max-width:760px) {
  .agency-scale > header > div:first-of-type { min-height:72px; padding:10px 18px; gap:8px; }
  .agency-scale > header img { width:110px; }
  .agency-scale > header button[aria-expanded] { width:42px; height:42px; }
  .creative-hero { min-height:0; height:auto; padding-bottom:12px; }
  .creative-copy { padding:32px 22px 10px; }
  .creative-scene { position:relative; inset:auto; height:auto; aspect-ratio:1.85; margin-top:1.2rem; overflow:hidden; }
  .creative-hero { display:flex; flex-direction:column; }
  .creative-copy { order:0; } .creative-scene { order:1; } .creative-caption { position:relative; inset:auto; margin:6px 22px 0; order:2; }
  .creative-scene .hero-collective { width:85%; height:100%; right:0; }
}
.site-menu[hidden] { display:none !important; }
.site-menu a:focus-visible { outline:2px solid var(--prune-encre); outline-offset:2px; }

/* The diagram stays beside five ordinary, linkable sections of the document. */
.story {
  --ink:var(--prune-encre); --muted:#665961; --line:#c9bec4; --pin-top:112px;
  max-width:1720px; margin:0 auto; padding:clamp(40px,5vw,74px) clamp(22px,5vw,78px) 26px;
  color:var(--ink); scroll-margin-top:var(--pin-top);
}
.story-intro { max-width:850px; padding-bottom:clamp(20px,2.5vw,36px); }
.agency-scale .story-intro h2,.agency-scale .practice-title h2 {
  font-size:clamp(40px,5.3vw,84px); line-height:1.02; letter-spacing:-.045em; font-weight:400; text-wrap:balance;
}
.story-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); align-items:start; column-gap:clamp(28px,4vw,72px); }
.story-pin { position:sticky; top:var(--pin-top); align-self:start; }
.story-art { margin:0; }
.network-key { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; margin:0; }
.network-key span { display:flex; align-items:center; justify-content:center; gap:.45em; color:var(--ink); white-space:nowrap; font-size:clamp(11px,1.1vw,16px); }
.network-key i { width:.7em; height:.7em; border-radius:50%; background:var(--tone); }
.story-art .people { --tone:#baa5cd; }
.story-art .technology { --tone:#e0b49b; }
.story-art .data { --tone:#a9b9a1; }
.manifest-diagram { display:block; width:100%; height:auto; max-height:min(59svh,calc(100svh - var(--pin-top) - 90px)); margin-top:8px; }
.registration { fill:none; stroke:#bfb4bc; stroke-width:1; opacity:.55; }
.network-node circle { fill:var(--tone); }
.network-node use,.output-icon,.arrow-shaft,.arrow-point { fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.network-edges line { stroke:var(--prune-encre); stroke-width:1.35; stroke-linecap:round; stroke-dasharray:1 5; }
.network-node:not([data-forecast-node]) { opacity:var(--context-node-opacity,1); }
.forecast-note { opacity:var(--forecast-label,0); }
[data-forecast-node="purchasing"] .forecast-note { opacity:var(--purchasing-label,0); }
[data-forecast-node="marketing"] .forecast-note { opacity:var(--marketing-label,0); }
.network-node .forecast-ring { fill:none; stroke:var(--ink); stroke-width:1.25; }
.forecast-note text { font:500 19px var(--font-mono,monospace); fill:var(--ink); stroke:var(--background,#f4f1ec); stroke-width:4; stroke-linejoin:round; paint-order:stroke fill; }
.network-edges line[data-team] { stroke-width:var(--forecast-weight,1.35); }
.graph-result text { fill:var(--ink); font:500 17px var(--font-mono,monospace); }
.arrow-shaft { stroke-dasharray:1; }
.act-nav { display:flex; gap:6px; padding:10px 0 0; font-family:var(--font-mono,monospace); }
.act-nav a { flex:1; position:relative; display:flex; align-items:center; min-height:40px; border-top:2px solid var(--line); color:var(--muted); font-size:12px; text-decoration:none; }
.act-nav a::before { content:""; position:absolute; top:-2px; left:0; width:100%; height:2px; background:var(--ink); transform:scaleX(var(--fill,0)); transform-origin:left; }
.act-nav a[aria-current] { color:var(--ink); font-weight:650; }
.act-nav a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.act { display:flex; align-items:center; min-height:clamp(310px,57svh,620px); padding:32px 0; scroll-margin-top:var(--pin-top); }
.acts { border-inline-start:1px solid #d4cbd1; padding-inline-start:clamp(16px,2vw,32px); }
.act + .act { border-top:1px solid var(--line); }
.agency-scale .act h3 { font-size:clamp(33px,3.5vw,58px); font-weight:400; line-height:1.04; letter-spacing:-.045em; text-wrap:balance; margin:0 0 18px; }
.agency-scale .act p { line-height:1.55; max-width:40ch; margin:0; color:#51464f; }
html:has(.story) { scroll-behavior:auto; }
@media(max-width:760px) {
  .story { --pin-top:74px; padding:36px 20px 22px; }
  .story-intro { padding-bottom:16px; }
  .agency-scale .story-intro h2 { font-size:clamp(33px,8vw,48px); }
  .story-layout { display:block; }
  .story-pin { z-index:2; background:var(--background,#f4f1ec); }
  .network-key span { gap:4px; }
  .manifest-diagram { max-height:30svh; }
  .act-nav { padding-top:5px; }
  .act-nav a { min-height:34px; }
  .acts { border:0; padding:0; }
  .act { min-height:clamp(250px,46svh,390px); padding:20px 0; }
  .agency-scale .act h3 { font-size:clamp(28px,6.8vw,36px); margin-bottom:10px; }
  .agency-scale .act p { font-size:16px; }
}
@media(max-height:500px) and (min-width:580px) {
  .story-layout { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
  .story-pin { background:transparent; }
  .manifest-diagram { max-height:45svh; }
  .act { min-height:60svh; }
}