/* Three continuous discipline ribbons; portrait and name retain their original layout. */
html:has(.hero-marquee){overflow-x:clip}
.hero-marquee .words{inset:0 -2%;justify-content:space-evenly;gap:12px}
.hero-marquee .words>div{font-size:clamp(80px,13vw,220px);line-height:1.05;letter-spacing:-.055em;white-space:nowrap;flex-shrink:0;transform:none!important;overflow:visible}
.hero-marquee .ribbon-track{display:flex;width:max-content;will-change:transform;animation:ribbon-roll 38s linear infinite}
.hero-marquee .words>div:nth-child(2) .ribbon-track{animation-direction:reverse;animation-duration:46s}
.hero-marquee .words>div:nth-child(3) .ribbon-track{animation-duration:43s}
.hero-marquee .ribbon-group{display:flex;align-items:center;flex-shrink:0}
.hero-marquee .ribbon-word{display:inline-flex;white-space:pre}
.hero-marquee .ribbon-letter{display:inline-block;transform:translate3d(var(--bx,0px),var(--by,0px),0) rotate(var(--br,0deg));will-change:transform}
.hero-marquee .ribbon-dot{font-family:var(--body);font-size:.35em;padding:0 .9em;align-self:center;color:var(--olive);opacity:.5}
.hero-marquee .words{pointer-events:none}
.hero-marquee.marquee-stopped .ribbon-track,.hero-marquee.marquee-away .ribbon-track{animation-play-state:paused}
.marquee-pause{position:absolute;bottom:16px;right:16px;z-index:4;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:50%;width:30px;height:30px;background:transparent;color:var(--muted);font:12px var(--body);cursor:pointer;opacity:.65}
.marquee-pause:hover,.marquee-pause:focus-visible{opacity:1;background:var(--surface)}
@keyframes ribbon-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){.hero-marquee .words{inset:20px -3% 10px;gap:0}.hero-marquee .words>div{font-size:clamp(76px,17vw,110px);line-height:1.15}.marquee-pause{width:27px;height:27px;bottom:12px;right:12px}}
@media(prefers-reduced-motion:reduce){.hero-marquee .ribbon-track{animation:none;transform:translateX(-5%)}.hero-marquee .ribbon-letter{transform:none!important}.hero-marquee .words>div{font-size:clamp(26px,7.8vw,130px)}.marquee-pause{display:none}}
@media(max-width:640px){body:has(.hero-marquee) .top .cv{font-size:10px;white-space:nowrap;padding:10px 12px}body:has(.hero-marquee) .top .right{gap:12px}}
/* Keep the document as the scroll container so the header stays sticky. */
body:has(.hero-marquee){overflow-x:clip}
body:has(.hero-marquee)>.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50}
.hero-marquee .words>div{font-size:clamp(96px,16vw,275px);line-height:.98}
@media(max-width:640px){.hero-marquee .words>div{font-size:clamp(90px,22vw,145px);line-height:1.08}}
@media(prefers-reduced-motion:reduce){.hero-marquee .words>div{font-size:clamp(26px,7.8vw,130px)}}
/* Home narrative headings follow the case-study editorial type hierarchy. */
body:has(.hero-marquee) :is(.intro,.chs) .disc{font-family:var(--serif);font-weight:400;line-height:1.16;letter-spacing:-.035em}
body:has(.hero-marquee) .intro .label{font-family:var(--body);font-weight:500;font-size:11px;line-height:1.6;letter-spacing:.12em}
body:has(.hero-marquee) .intro>div>p:not(.label){font-family:var(--body);font-weight:400}