@font-face{font-family:Barlow;src:url('assets/fonts/Barlow-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url('assets/fonts/BarlowCondensed-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
:root{
 font-family:Barlow,sans-serif;font-synthesis:none;color:#191d22;background:#fff;
 --pad:clamp(1.25rem,3.5vw,4.5rem);
 --headline:clamp(2rem,calc(1.5rem + 2.5vw),4.5rem);
 --small:.75rem;--body:1rem;
}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
header{position:fixed;z-index:10;inset:0 0 auto;padding:.875rem var(--pad);display:flex;align-items:center;gap:1.25rem}
.brand img{display:block;width:4rem;height:auto}
.brand-caption{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;flex-shrink:0;line-height:1;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-style:italic;color:#1665b0}
.brand-caption strong{font:inherit;font-size:calc(var(--small) * 1.75);letter-spacing:.035em;white-space:nowrap}
.brand-caption span{font-size:var(--small);letter-spacing:.2em;white-space:nowrap;padding-top:.25rem;border-top:2px solid currentColor}
nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem;font-size:.875rem;line-height:1.4}
nav a{display:flex;gap:.4rem;padding:.6rem 0;border-bottom:1px solid transparent;color:#565b60;white-space:nowrap}
nav a[aria-current]{border-color:#207bcd;color:#15191e}
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#fff}
.stage video,.poster,.frame-canvas{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}
.poster{background:#fff center/contain no-repeat}
.stage video,.frame-canvas{opacity:0}.stage.ready video,.stage.frames.ready .frame-canvas{opacity:1}.stage.frames video{display:none}
/* Native scroll pacing: desktop 6 screens, mobile/touch 15. */
.chapter{height:300svh;position:relative;z-index:1;pointer-events:none}.chapter:last-of-type{height:400svh}
.copy{position:fixed;z-index:2;left:var(--pad);right:var(--pad);top:clamp(6rem,10svh,9rem);max-width:60rem;will-change:opacity,transform}
.chapter-label{font-size:var(--small);letter-spacing:.14em;display:block;margin-bottom:1rem;line-height:1.4}
h1,h2{font-size:var(--headline);line-height:1.04;letter-spacing:-.04em;margin:0;font-weight:600;overflow-wrap:normal}
em{font-style:normal;color:#1665b0}
.copy p{font-size:var(--body);color:#434a50;margin:1rem 0 0;line-height:1.5;max-width:36rem}
.chapter-note{position:fixed;z-index:2;bottom:6.5rem;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:1rem;font-size:var(--small);letter-spacing:.1em;line-height:1.4}
#detail .copy,#detail .chapter-note{opacity:0}
footer{position:fixed;bottom:0;z-index:10;left:0;width:100%;padding:1.5rem var(--pad);display:flex;gap:1.25rem;align-items:center;font-size:var(--small);letter-spacing:.08em;line-height:1.4}
.scroll-label,.restart{display:flex;align-items:center;gap:.65rem;white-space:nowrap}
svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0}
.track{height:1px;background:#999b9c;flex:1;min-width:1.5rem}
.track div{height:2px;transform-origin:left;background:#1665b0;transform:scaleX(var(--progress,0))}
.count{white-space:nowrap}.restart{display:none;border:0;padding:0;background:none;cursor:pointer}
.at-end .restart{display:flex}.at-end .scroll-label{display:none}
.contact-email{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.875rem;letter-spacing:0;white-space:normal}
.contact-email span{font-size:var(--small);letter-spacing:.08em;color:#1665b0}
a:focus-visible,button:focus-visible{outline:2px solid #1665b0;outline-offset:.35rem}
.skip{position:fixed;top:-10rem;z-index:30;background:white;padding:.75rem}.skip:focus{top:0}
@media(max-width:60rem){
 .brand-caption{display:none}
 footer{flex-wrap:wrap;gap:1rem}
 .contact-email{width:100%;justify-content:flex-end}
 .chapter-note{bottom:8rem}
}
@media(max-width:700px),(pointer:coarse){.chapter{height:750svh}.chapter:last-of-type{height:850svh}}
@media(max-width:40rem){
 header{gap:.75rem}.brand img{width:3rem}nav{gap:.8rem;font-size:.8125rem}nav a{gap:.25rem}
 .copy{top:6rem;max-width:none}.copy p{max-width:28rem}
 .chapter-note{bottom:8.5rem;font-size:.6875rem;letter-spacing:.06em}
 footer{padding:1rem var(--pad) calc(1rem + env(safe-area-inset-bottom));gap:.75rem}
 .contact-email{justify-content:center}.contact-email span{font-size:.6875rem}
 .scroll-label{font-size:.6875rem;letter-spacing:.04em}
}
@media(max-width:23rem){
 header{gap:.5rem}nav{gap:.6rem;font-size:.75rem}.brand img{width:2.5rem}
 nav a[data-chapter]{gap:.2rem}nav a[data-chapter] span{font-size:.75rem}
}
/* Short windows keep readable type; remove only the secondary bottom notes. */
@media(max-height:34rem){
 header{padding-top:.5rem;padding-bottom:.5rem}.brand img{width:2.5rem}
 .copy{top:4.5rem}.chapter-label{margin-bottom:.5rem}
 h1,h2{font-size:clamp(2rem,calc(1.25rem + 2vw),3rem)}
 .copy p{margin-top:.65rem}.chapter-note{display:none}
 footer{padding-top:.75rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom))}
}
/* One desktop scale keeps every text role and its spacing in proportion. */
@media(min-width:701px){
 :root{
  --desktop-unit:clamp(.875rem,calc(.5rem + .625vw),1.375rem);
  --headline:calc(var(--desktop-unit) * 3.5);
  --body:var(--desktop-unit);
  --small:calc(var(--desktop-unit) * .75);
 }
 header{padding-block:calc(var(--desktop-unit) * .625);gap:calc(var(--desktop-unit) * 1.25)}
 .brand img{width:clamp(2.5rem,calc(var(--desktop-unit) * 3.25),4rem)}
 .brand-caption{max-width:calc(var(--desktop-unit) * 11)}
 nav{font-size:calc(var(--desktop-unit) * .875);gap:calc(var(--desktop-unit) * 1.5)}
 nav a{gap:calc(var(--desktop-unit) * .4);padding-block:calc(var(--desktop-unit) * .5)}
 .copy{top:calc(var(--desktop-unit) * 6);max-width:calc(var(--desktop-unit) * 48)}
 h1,h2{font-size:var(--headline)}
 .chapter-label{margin-bottom:var(--desktop-unit)}
 .copy p{margin-top:var(--desktop-unit);max-width:calc(var(--desktop-unit) * 36)}
 .chapter-note{bottom:calc(var(--desktop-unit) * 6.5);gap:var(--desktop-unit)}
 footer{font-size:var(--small);padding-block:calc(var(--desktop-unit) * 1.5);gap:calc(var(--desktop-unit) * 1.25)}
 .scroll-label,.restart{gap:calc(var(--desktop-unit) * .65)}
 .contact-email{font-size:calc(var(--desktop-unit) * .875);gap:calc(var(--desktop-unit) * .5)}
 .contact-email span{font-size:var(--small)}
 svg{width:var(--desktop-unit);height:var(--desktop-unit)}
 .skip{font-size:var(--body)}
}
@media(min-width:701px) and (max-width:60rem){
 .chapter-note{bottom:calc(var(--desktop-unit) * 8)}
}
@media(min-width:701px) and (max-height:34rem){
 h1,h2{font-size:calc(var(--desktop-unit) * 2.75)}
 .copy{top:calc(var(--desktop-unit) * 4.75)}
 .chapter-label{margin-bottom:calc(var(--desktop-unit) * .5)}
 .copy p{margin-top:calc(var(--desktop-unit) * .65)}
 footer{padding-block:calc(var(--desktop-unit) * .75)}
}
@media(prefers-reduced-motion:reduce){
 .chapter,.chapter:last-of-type{height:100svh}.stage{display:none}
 .chapter{background:#fff center/contain no-repeat}

 .copy{position:absolute;opacity:1!important;transform:none!important}
 .chapter-note{position:absolute;opacity:1!important;transform:none!important}
 footer{background:#ffffffb0}.scroll-label,.track{display:none}
}

.stage{-webkit-touch-callout:none;user-select:none}

/* Visible filing link, separate from the scroll controls. */
footer{flex-wrap:wrap;row-gap:.35rem}
.icp-link{flex-basis:100%;text-align:center;font-size:.6875rem;line-height:1.4;letter-spacing:0;color:#595959}
.icp-link:hover{text-decoration:underline}