:root{color-scheme:dark;--ink:#fff8e9;--ease:cubic-bezier(.22,.75,.22,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#082d61;color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #fcdf8e;outline-offset:6px}button{border:0;background:none}#player{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;touch-action:pan-y}#scenes,.scene,.paint,.ambient,.video{position:absolute;inset:0;width:100%;height:100%}.scene{overflow:hidden;isolation:isolate}.paint{width:110%;height:110%;left:-5%;top:-5%}.paint svg{width:100%;height:100%;overflow:visible}.ambient{animation:drift 18s ease-in-out infinite alternate;transform-origin:60% 70%}.layer:nth-child(2) .ambient{animation-duration:23s;animation-direction:alternate-reverse}.layer:nth-child(3) .ambient{animation-duration:29s}.layer:nth-child(4) .ambient{animation-duration:21s;animation-direction:alternate-reverse}.layer{position:absolute;inset:0;transform-origin:70% 90%;}.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,26,61,.52),transparent 85%);pointer-events:none}.copy{position:absolute;z-index:2;left:9%;top:50%;width:70%;max-width:1100px;transform:translateY(-50%);pointer-events:none}.eyebrow,.tiny,.edition,#counter{font-size:10px;letter-spacing:.19em;font-weight:500}.eyebrow{display:flex;align-items:center;gap:15px;margin:0 0 28px}.eyebrow:before{content:"";height:1px;width:33px;background:currentColor;opacity:.75}h1,h2{font-family:Arial,Helvetica,sans-serif;font-weight:750;font-size:clamp(64px,7.5vw,118px);line-height:.99;letter-spacing:-.065em;margin:0 0 30px;text-wrap:balance}h1 .line,h2 .line{display:block;overflow:hidden;padding:0 .06em .09em 0;margin-bottom:-.09em}.word{display:block;}em{font-weight:750;font-style:normal;color:#d8f0c3}.description{font-size:clamp(15px,1.25vw,19px);line-height:1.65;max-width:410px;margin:0;color:#f3f1e6}.copy-inner{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.curtain{position:absolute;z-index:3;inset:-10%;width:120%;height:120%;pointer-events:none;transform:translateX(130%)}.video{object-fit:cover}.video-fallback{position:absolute;inset:0;background:#082f65}.video-fallback:after{content:"";position:absolute;inset:0;background:#082f6580}header,footer{position:absolute;z-index:10;left:4%;right:4%}header{top:max(30px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{font-family:Arial,Helvetica,sans-serif;font-weight:750;text-decoration:none;color:inherit;font-size:29px;letter-spacing:-1.6px}.brand span{opacity:.7}.edition{position:absolute;left:50%;transform:translateX(-50%);opacity:.8}#motion{font-size:11px;display:flex;gap:13px;align-items:center;padding:10px 0}#motion span{font-size:15px}.edge{position:absolute;top:100px;bottom:130px;width:8%;z-index:5}.previous{left:0}.next{right:0}.edge:disabled{cursor:default}footer{bottom:max(24px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;gap:24px}.story-label{display:flex;flex-direction:column;gap:10px;justify-content:center}.hint{font-size:12px;opacity:.65}.navigation{display:flex;align-items:center;gap:16px}#counter{margin-right:12px;font-variant-numeric:tabular-nums}.navigation button{width:48px;height:48px;border:1px solid #ffffff70;border-radius:50%;font-size:24px;transition:background .2s}.navigation button:hover{background:#ffffff1c}.navigation button:disabled{opacity:.25;cursor:default}#progress{display:flex;gap:9px;grid-column:1/-1}#progress button{position:relative;height:15px;flex:1;padding:6px 0}#progress button:before{content:"";display:block;height:2px;background:#fff5}#progress button[data-state="past"]:before{background:#fff9}#progress button[aria-current="step"]:before{background:#f1e9b7;height:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.scene{--direction:1}.scene.reverse{--direction:-1}
.scene.entering{animation:scene-reveal 1.4s cubic-bezier(.42,0,.18,1) both}
.scene.entering.reverse{animation-name:scene-reveal-reverse}
.scene.entering .layer{animation:arrive 1.4s var(--ease) both;animation-delay:calc(var(--depth)*65ms)}
.scene.leaving .layer:not(:first-child){animation:depart 1.4s cubic-bezier(.45,0,.3,1) both;animation-delay:calc(var(--depth)*25ms)}
.scene.entering .word{animation:word-in  .75s cubic-bezier(.2,.7,.2,1) .65s both}
.scene.entering .line:nth-child(2) .word{animation-delay:.73s;animation-duration:.67s}
.scene.entering .eyebrow,.scene.entering .description{animation:word-in .75s var(--ease) .65s both}
.scene.leaving .word{animation:word-out .85s cubic-bezier(.5,0,.5,1) both}
.scene.leaving .line:nth-child(2) .word{animation-delay:.08s}
.scene.leaving .eyebrow,.scene.leaving .description{animation:word-out .85s cubic-bezier(.5,0,.5,1) both}
.scene.leaving .copy-inner{animation:mask-out 1s cubic-bezier(.5,0,.3,1) both}
.scene.entering .curtain{display:none}
.scene.leaving .curtain{animation:curtain-out 1.4s cubic-bezier(.45,0,.25,1) both}
/* Repeated navigation shortens the whole choreography, including text and masks. */
.scene.entering{animation-duration:calc(1.4s * var(--motion-scale,1))}
.scene.entering .layer,.scene.leaving .layer:not(:first-child),.scene.leaving .curtain{animation-duration:calc(1.4s * var(--motion-scale,1))}
.scene.entering .layer{animation-delay:calc(var(--depth) * 65ms * var(--motion-scale,1))}
.scene.leaving .layer:not(:first-child){animation-delay:calc(var(--depth) * 25ms * var(--motion-scale,1))}
.scene.entering .word,.scene.entering .eyebrow,.scene.entering .description{animation-duration:calc(.75s * var(--motion-scale,1));animation-delay:calc(.65s * var(--motion-scale,1))}
.scene.entering .line:nth-child(2) .word{animation-duration:calc(.67s * var(--motion-scale,1));animation-delay:calc(.73s * var(--motion-scale,1))}
.scene.leaving .word,.scene.leaving .eyebrow,.scene.leaving .description{animation-duration:calc(.85s * var(--motion-scale,1))}
.scene.leaving .line:nth-child(2) .word{animation-delay:calc(.08s * var(--motion-scale,1))}
.scene.leaving .copy-inner{animation-duration:calc(1s * var(--motion-scale,1))}
.scene.entering .slide-figure{animation-duration:calc(1.2s * var(--motion-scale,1));animation-delay:calc(.2s * var(--motion-scale,1))}
.scene.leaving .slide-figure{animation-duration:calc(.8s * var(--motion-scale,1))}
.paused .ambient{animation-play-state:paused!important}
@keyframes drift{from{transform:translate(-.6%,-.5%) rotate(-1deg) scale(1.03)}to{transform:translate(1.2%,1%) rotate(1deg) scale(1.06)}}
@keyframes scene-reveal{from{clip-path:ellipse(0% 110% at 130% 65%)}to{clip-path:ellipse(160% 140% at 130% 65%)}}
@keyframes scene-reveal-reverse{from{clip-path:ellipse(0% 110% at -30% 65%)}to{clip-path:ellipse(160% 140% at -30% 65%)}}
@keyframes arrive{from{transform:translateX(calc(28% * var(--direction))) rotate(calc(10deg * var(--direction))) scale(1.12)}to{transform:translateX(0) rotate(0) scale(1)}}
@keyframes depart{to{transform:translateX(calc(-35% * var(--direction))) rotate(calc(-9deg * var(--direction))) scale(1.08)}}
@keyframes word-in{from{transform:translateY(115%) rotate(3deg);opacity:.1}to{transform:translateY(0) rotate(0);opacity:1}}
@keyframes word-out{to{transform:translateY(-115%) rotate(-3deg);opacity:.3}}
@keyframes mask-out{from{clip-path:ellipse(150% 150% at 0% 45%)}to{clip-path:ellipse(0% 100% at -20% 45%)}}
@keyframes curtain-out{from{transform:translateX(calc(130% * var(--direction)))}to{transform:translateX(calc(-120% * var(--direction)))}}
@media(min-width:1500px){.copy{left:12%}}@media(max-width:650px){header,footer{left:6%;right:6%}header{top:max(22px,env(safe-area-inset-top))}.brand{font-size:26px}.edition{display:none}#motion{font-size:10px}.copy{left:8%;width:85%;top:47%}.eyebrow{font-size:9px;margin-bottom:26px;letter-spacing:.14em}h1,h2{font-size:clamp(48px,12vw,78px);line-height:1.03;letter-spacing:-.05em;margin-bottom:28px}.description{font-size:15px;max-width:290px;line-height:1.6}.paint{width:180%;left:-65%}.veil{background:linear-gradient(90deg,#031c46a6,#031c4620)}.hint{display:none}.tiny{font-size:8px;letter-spacing:.12em;max-width:150px;line-height:1.6}.navigation{gap:10px}.navigation button{height:42px;width:42px}#counter{font-size:9px;letter-spacing:.1em;margin-right:4px}footer{gap:18px;bottom:max(20px,env(safe-area-inset-bottom))}.edge{width:8%;top:85px;bottom:115px}}
@media(max-height:520px){.copy{top:48%;left:9%}h1,h2{font-size:clamp(38px,8vh,65px);margin-bottom:14px}.eyebrow{margin-bottom:14px}.description{font-size:13px;line-height:1.4;max-width:420px}header{top:15px}footer{bottom:12px;gap:8px}.hint{display:none}.navigation button{width:34px;height:34px}.story-label{gap:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.ambient{transform:none!important}.curtain{display:none}.scene.entering .copy-inner,.scene.leaving .copy-inner{clip-path:none;transform:none}}

.surface{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.6;mix-blend-mode:soft-light}

.reduced-motion *{animation:none!important;transition:none!important}.reduced-motion .ambient{transform:none!important}.reduced-motion .curtain{display:none}.reduced-motion .copy-inner{clip-path:none;transform:none}
/* V2: moving pigment, optional vertical reading, site navigation, ambient film. */
[hidden]{display:none!important}
#player{touch-action:none}
.header-actions{display:flex;align-items:center;gap:32px}#explore{font-size:12px;display:flex;align-items:center;gap:16px;padding:10px 0}#explore span{font-size:18px}.edition{font-size:9px}
.pigment-flow{animation:color-drift var(--color-time,24s) ease-in-out infinite alternate;transform-origin:center;}
@keyframes color-drift{0%{transform:translate(-170px,120px) rotate(-12deg);opacity:.5}100%{transform:translate(200px,-160px) rotate(12deg);opacity:1}}
.paused .pigment-flow{animation-play-state:paused!important}
/* Reading uses explicit animated pages, not scroll offsets that can be swallowed. */
.reader-viewport,.vertical-track,.page{position:absolute;inset:0;width:100%;height:100%}
.reader-viewport{z-index:2;overflow:hidden;pointer-events:none}.page{visibility:hidden;opacity:0;transform:translateY(105%);}
.page.is-current,.page.is-outgoing{visibility:visible;opacity:1;transform:none}
.detail .copy{max-width:750px;width:70%;top:45%}.detail-text{font-size:clamp(24px,3vw,43px);line-height:1.4;letter-spacing:-.025em;margin:0 0 30px;text-wrap:pretty}.detail-title{font-size:12px;color:#d8f0c3}
.in-detail .veil{background:linear-gradient(90deg,#031a3de6,#031a3d65)}
.paint{transform:translateY(var(--read-offset,0)) rotate(var(--read-turn,0deg)) scale(1.15);transition:transform 1.1s cubic-bezier(.3,.05,.2,1),opacity .55s ease}
.read-sweep{position:absolute;z-index:3;inset:-20%;width:140%;height:140%;pointer-events:none;opacity:0;transform:translateY(110%)}.read-sweep svg{width:100%;height:100%}
#depth-controls{position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:126px;display:flex;align-items:center;flex-direction:column;gap:8px;max-width:240px;text-align:center}
#depth-down{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.08em;padding:8px 15px}#depth-down svg{opacity:.8;animation:down-breath 4s ease-in-out infinite}#depth-up{font-size:25px;padding:5px 20px}#depth-position{font-size:9px;letter-spacing:.1em;opacity:.65;white-space:nowrap}.paused #depth-down svg{animation-play-state:paused}@keyframes down-breath{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(5px);opacity:.9}}
.film-well{position:absolute;inset:0;overflow:hidden;background:#061c38;opacity:0;transition:opacity 1.2s ease}.film-well iframe{position:absolute;top:50%;left:50%;width:100%;height:56.25vw;min-height:100%;min-width:177.778vh;min-width:177.778dvh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.film-visible .film-well{opacity:1}.film-visible .paint{opacity:.4}.scene.film-clear .paint{opacity:0!important}.scene.film-clear .read-sweep{visibility:hidden}.film-art-hidden .surface{opacity:0}.film-interactive .film-well iframe{pointer-events:auto}.film-visible .veil{background:linear-gradient(90deg,#031a3dce,#031a3d15)}
#film-controls{position:absolute;z-index:8;right:4%;top:95px;display:flex;align-items:flex-end;flex-direction:column;gap:9px;font-size:10px;max-width:240px;text-align:right}#film-state{opacity:.8;font-size:10px;line-height:1.5}#film-controls a{color:inherit;opacity:.7;text-decoration:none}#film-controls button{padding:6px 0;border-bottom:1px solid #fff5}
/* The navigation is another painted ribbon, with the live scene pushed aside. */
#scenes{position:absolute;inset:0;transition:transform .85s cubic-bezier(.22,.75,.22,1);}
.nav-open #scenes{transform:translateX(-22vw)}.nav-open #depth-controls,.nav-open #film-controls{opacity:0;pointer-events:none}
#site-nav{position:absolute;z-index:20;right:0;top:0;width:min(580px,55vw);height:100%;color:#062f4f;transform:translateX(120%);visibility:hidden;transition:transform .85s cubic-bezier(.22,.75,.22,1),visibility 0s .85s;pointer-events:none}
.nav-open #site-nav{transform:none;visibility:visible;transition:transform .85s cubic-bezier(.22,.75,.22,1),visibility 0s}
.nav-paint{position:absolute;inset:0;overflow:hidden;pointer-events:none}.nav-paint svg{width:100%;height:100%;overflow:hidden}
.nav-content{position:relative;height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:32px 38px 28px 30px;pointer-events:auto}
.menu-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.menu-head .tiny{font-size:8px;opacity:.65}.menu-head button{font-size:12px;padding:12px 0}.main-nav{display:flex;gap:25px;margin:35px 0 35px}.main-nav button{font-size:19px;font-weight:700;opacity:.5;padding:8px 0;border-bottom:1px solid transparent}.main-nav button[aria-current]{opacity:1;border-color:#062f4f}
.menu-panel .eyebrow{font-size:8px;margin:0 0 18px;letter-spacing:.12em}.menu-panel h2{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.06em;margin-bottom:16px;line-height:1.05}.menu-intro{font-size:13px;line-height:1.65;opacity:.75;max-width:360px;margin-bottom:24px}
.chapter{display:grid;grid-template-columns:25px 1fr 15px;width:100%;gap:8px;align-items:center;text-align:left;border-bottom:1px solid #06335135;padding:18px 0;font-size:18px;font-weight:600;letter-spacing:-.035em}.chapter-number{font-size:9px;font-weight:400;opacity:.6;letter-spacing:0}.chapter-topic{display:none}.chapter:hover{color:#207e87}
.version-link{display:block;margin-top:32px;color:#063351;font-size:10px;text-decoration:none}.concept-note{font-size:11px;line-height:1.5;opacity:.6;margin-top:24px}.menu-panel:not([hidden]){animation:panel-in .6s var(--ease)}@keyframes panel-in{from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:none}}
.nav-open .edition{opacity:0}.nav-open header{z-index:21;pointer-events:none}.nav-open header .brand{pointer-events:auto}.nav-open .header-actions{visibility:hidden}
@media(max-width:700px){#site-nav{width:88vw}.nav-open #scenes{transform:translateX(-44vw)}.nav-content{padding:27px 25px 25px 30px}.nav-paint{left:0}.main-nav{gap:22px;margin:25px 0 32px}.main-nav button{font-size:18px}.menu-panel h2{font-size:36px}.chapter{font-size:17px;padding:18px 0}.menu-head .tiny{max-width:140px;line-height:1.5}}
@media(max-width:650px){.header-actions{gap:18px}#motion{font-size:9px}#explore{font-size:11px;gap:9px}#explore span{font-size:15px}.copy{top:43%}.detail .copy{left:8%;width:84%;top:43%}.detail-text{font-size:clamp(22px,5.7vw,29px);line-height:1.45;margin-bottom:22px}.detail .eyebrow{margin-bottom:22px}.detail-title{font-size:10px}#depth-controls{bottom:125px;gap:3px}#depth-down{font-size:9px;gap:9px}#depth-down svg{height:26px}#film-controls{top:80px;right:6%;gap:7px;font-size:9px;max-width:180px}#film-state{font-size:9px}}
@media(max-height:650px) and (max-width:650px){h1,h2{font-size:clamp(34px,10.5vw,48px);margin-bottom:18px}.copy{top:43%}.description{font-size:13px;line-height:1.5}.eyebrow{margin-bottom:18px}#depth-controls{bottom:100px;flex-direction:row;gap:10px;max-width:90%}#depth-up{padding:5px 10px}#depth-down{font-size:8px;gap:4px;padding:5px 8px}#depth-down svg{height:20px}#depth-position{font-size:8px;letter-spacing:0}.detail .copy{top:40%}.detail .eyebrow{margin-bottom:15px}.detail-text{font-size:19px;line-height:1.4}.main-nav{margin:15px 0 22px}.chapter{padding:13px 0;font-size:15px}.menu-intro{margin-bottom:16px}.menu-panel h2{font-size:30px}}
@media(max-height:520px) and (min-width:651px){.copy{top:47%}#depth-controls{left:90%;bottom:108px;max-width:110px}#depth-position{white-space:normal;line-height:1.5}.detail .copy{width:62%;top:48%}.detail-text{font-size:23px;line-height:1.35}.detail .eyebrow{margin-bottom:14px}.detail-title{font-size:10px}#film-controls{top:70px}.nav-content{padding-top:15px}.main-nav{margin:12px 0 20px}.chapter{padding:12px 0}.menu-panel h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.pigment-flow{animation:none!important}#scenes,#site-nav,.paint,.film-well{transition:none!important}}
.reduce-all *, .reduce-all *::before, .reduce-all *::after{animation:none!important;transition:none!important}
@media(min-width:701px){.nav-open #scenes{transform:translateX(-7vw)}}
@media(max-width:700px){.nav-open .reader-viewport{opacity:.35;transition:opacity .7s ease}}
.reader-viewport{clip-path:inset(90px 0 155px)}
@media(max-height:520px){.reader-viewport{clip-path:inset(65px 0 85px)}}
.paint,.nav-paint,.surface,.veil,.curtain,.read-sweep{pointer-events:none}
.film-interactive:not(.film-clear) .paint{opacity:.18}
/* Library + low-overhead rendering revision. */
/* Texture and color washes are static SVG. Only HTML wrapper transforms move. */
.paint{width:106%;height:106%;left:-3%;top:-3%;transform:translateY(var(--read-offset,0)) rotate(var(--read-turn,0deg)) scale(1.03)}
.ambient{animation:none;transform:none}
.layer:nth-child(2) .ambient{animation:quiet-drift 32s ease-in-out infinite alternate}
.layer:nth-child(3) .ambient{animation:quiet-drift 40s ease-in-out infinite alternate-reverse}
@keyframes quiet-drift{from{transform:translate(-.4%,-.4%)}to{transform:translate(.7%,.6%)}}
.color-light{position:absolute;inset:0;pointer-events:none;animation:light-drift 28s ease-in-out infinite alternate;opacity:.65}
@keyframes light-drift{from{transform:translate(-4%,2%);opacity:.3}to{transform:translate(4%,-2%);opacity:.65}}
.paused .ambient,.paused .color-light,.inactive .ambient,.inactive .color-light{animation-play-state:paused!important}
#depth-down svg{animation:none;opacity:.7}
.surface{opacity:.65;mix-blend-mode:normal;contain:strict}
.layer,.word,.page{will-change:auto}
.scene.entering .layer,.scene.leaving .layer{will-change:transform}
/* A short drift into place; the story itself stays still. */
#scenes,.nav-open #scenes{transform:none!important;transition:none!important}
#site-nav{transform:translateX(24px);opacity:0;visibility:hidden;transition:transform .42s cubic-bezier(.2,.65,.35,1),opacity .32s ease,visibility 0s .42s}
.nav-open #site-nav{transform:none;opacity:1;visibility:visible;transition:transform .42s cubic-bezier(.2,.65,.35,1),opacity .32s ease,visibility 0s}
.nav-open .reader-viewport{opacity:.8;transition:opacity .3s ease}
.menu-panel:not([hidden]){animation:none}
.menu-panel .eyebrow{margin-bottom:14px}
.menu-intro{margin-bottom:20px}
#category-list{display:flex;flex-wrap:wrap;gap:9px 18px;margin:0 0 16px}
#category-list button{font-size:11px;line-height:1.4;padding:8px 0;border-bottom:1px solid transparent;opacity:.55;text-align:left}
#category-list button[aria-pressed="true"]{opacity:1;border-color:#063351;font-weight:700}
.story-option{position:relative;display:flex;flex-direction:column;gap:9px;width:100%;padding:23px 0;border-bottom:1px solid #06335130;text-align:left}
.story-option-title{font-size:23px;line-height:1.15;font-weight:700;letter-spacing:-.045em}
.story-option-summary{font-size:12px;line-height:1.6;opacity:.72;max-width:360px}
.story-option-meta{font-size:10px;opacity:.65;display:flex;justify-content:space-between;align-items:center}
.story-option-meta span{font-size:19px}
.story-option[aria-current="true"] .story-option-title:before{content:"";display:inline-block;vertical-align:middle;margin-right:9px;width:5px;height:5px;border-radius:50%;background:#0d6272}
.story-option:hover .story-option-title{color:#126a76}
@media(max-width:700px){.nav-open .reader-viewport{opacity:.65}.story-option-title{font-size:21px}#site-nav{transform:translateX(18px)}.nav-open #site-nav{transform:none}}
@media(max-width:650px){.paint{width:108%;height:108%;left:-4%;top:-4%}.story-option{padding:22px 0}.menu-panel h2{font-size:34px}}
@media(max-height:650px){.main-nav{margin:18px 0 22px}.menu-intro{margin-bottom:14px}.story-option{padding:17px 0}.story-option-title{font-size:20px}.story-option-summary{font-size:11px}#category-list{margin-bottom:10px}.version-link{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.color-light,.ambient{animation:none!important}}
@media(max-width:700px){.nav-open header .brand{visibility:hidden;pointer-events:none}}

/* Static paper tooth: denser irregular pigment and fine directional brush marks. */
.texture-fine{display:none}.texture-rich{display:block}
.fine-grain .texture-fine{display:block}.fine-grain .texture-rich{display:none}
.grain-style{display:block;margin-top:25px;padding:8px 0;border-bottom:1px solid #06335150;font-size:11px;color:#063351}

/* The original multi-scale grain, evaluated in a small static tile. */
.surface{opacity:.52;mix-blend-mode:soft-light;transform:translateZ(0)}
.fine-grain .surface{opacity:.65;mix-blend-mode:normal}
.nav-paint .texture-rich{mix-blend-mode:soft-light;opacity:.38}
.journey-preview{position:absolute;inset:0;z-index:6;background:#05284465;animation:journey-in .55s ease both}
.journey-preview .copy{pointer-events:auto;max-width:850px;width:78%}
.journey-preview h2{font-size:clamp(42px,6vw,86px);line-height:1.04}
#journey-open{display:block;margin-top:25px;padding:12px 0;border-bottom:1px solid #fff8;font-weight:700;font-size:20px;text-align:left}
#journey-cue{font-size:11px;opacity:.75;margin-top:18px}#journey-back{font-size:11px;opacity:.65;padding:10px 0}
.at-continuation .reader-viewport{visibility:hidden;opacity:0!important}.at-continuation #film-controls{visibility:hidden}
.at-continuation .edge{pointer-events:none}
@keyframes journey-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(max-width:650px){.journey-preview .copy{width:84%}.journey-preview h2{font-size:clamp(36px,10vw,60px)}}

/* Images share the scene transition; no persistent image motion or filter. */
.image-well{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;overflow:hidden}
.image-well img{display:block;width:100%;height:100%;object-fit:cover}
.image-visible .image-well{opacity:1}.image-visible .paint{opacity:.26}
.image-visible .veil{background:linear-gradient(90deg,#031a3dcc,#031a3d15)}
.image-visible.image-clear .paint{opacity:0!important}.image-art-hidden .surface{opacity:0}
.image-status{position:absolute;inset:0;display:grid;place-content:center;font-size:12px;color:#f4f3e9}
.image-well .image-status{display:none}
#image-controls{position:absolute;z-index:8;right:4%;top:95px;display:flex;align-items:flex-end;flex-direction:column;gap:9px;font-size:10px;max-width:230px;text-align:right}
#image-state{opacity:.8}#image-controls button{font-size:10px;padding:6px 0;border-bottom:1px solid #fff5}#image-credit{color:inherit;text-decoration:none;opacity:.7;font-size:9px}
.nav-open #image-controls,.at-continuation #image-controls{opacity:0;pointer-events:none}
.with-image .overview .copy{left:8%;width:40%;top:48%}
.with-image .overview h1,.with-image .overview h2{font-size:clamp(42px,5.2vw,82px);line-height:1.04}
.with-image .overview .description{max-width:360px;font-size:clamp(14px,1.2vw,18px)}
.slide-figure{position:absolute;margin:0;right:6%;top:50%;width:40%;transform:translateY(-50%);pointer-events:auto}
.figure-image{position:relative;height:54dvh;max-height:600px;overflow:hidden;background:#092f50}
.figure-image img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.figure-visible .figure-image img{opacity:1}
.slide-figure figcaption{display:flex;flex-direction:column;gap:8px;padding-top:14px;font-size:11px;line-height:1.5;color:#e0e9e1}
.slide-figure figcaption a{color:inherit;text-decoration:none;opacity:.65;font-size:9px}
.scene.entering .slide-figure{animation:figure-in 1.2s var(--ease) .2s both}
.scene.leaving .slide-figure{animation:figure-out .8s var(--ease) both}
@keyframes figure-in{from{clip-path:inset(100% 0 0);opacity:.3}to{clip-path:inset(0);opacity:1}}
@keyframes figure-out{to{clip-path:inset(0 0 100%);opacity:.2}}
@media(max-width:700px){
 .with-image .overview .copy{top:max(105px,15dvh);transform:none;left:8%;width:84%}
 .with-image .overview .eyebrow{margin-bottom:15px}
 .with-image .overview h1,.with-image .overview h2{font-size:clamp(32px,8.5vw,54px);margin-bottom:14px;line-height:1.03}
 .with-image .overview .description{font-size:13px;line-height:1.5;max-width:95%}
 .slide-figure{top:auto;bottom:max(165px,23dvh);right:8%;width:84%;transform:none}
 .figure-image{aspect-ratio:auto;height:clamp(115px,25dvh,230px)}
 .slide-figure figcaption{font-size:10px;gap:4px;padding-top:10px}
 #image-controls{right:6%;top:80px;max-width:180px;gap:7px}
 .image-background .overview .copy{top:48%}
}
@media(max-height:650px) and (max-width:700px){
 .with-image .overview .copy{top:105px}.with-image .overview h1,.with-image .overview h2{font-size:30px;margin-bottom:10px}.with-image .overview .eyebrow{font-size:8px;margin-bottom:10px}
 .with-image .overview .description{font-size:12px}.slide-figure{bottom:175px}.figure-image{height:19dvh;min-height:85px}.slide-figure figcaption{font-size:9px;gap:2px;padding-top:7px}
}
@media(min-width:701px) and (max-height:650px){.figure-image{aspect-ratio:auto;height:50dvh}.with-image .overview h1,.with-image .overview h2{font-size:clamp(32px,6vh,55px)}}

@media(max-height:520px) and (max-width:700px){.with-image .overview .copy{top:80px}.slide-figure{bottom:110px}.figure-image{height:18dvh}}

/* Combined grain: original wavy paper wash plus the earlier rich pigment flecks. */
.texture-flecks{opacity:.9}
.nav-paint .texture-flecks{opacity:.8;mix-blend-mode:normal}

.pigment-surface{opacity:.65;mix-blend-mode:normal}.fine-grain .pigment-surface{display:none}

/* Between stories, the outgoing slide controls leave with the outgoing story. */
#player footer{transition:opacity .35s ease,transform .45s cubic-bezier(.25,.7,.25,1),visibility 0s}
.at-continuation footer{opacity:0;transform:translateY(32px);visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.25,.7,.25,1),visibility 0s .45s}
.journey-preview #journey-open{animation:journey-action .6s cubic-bezier(.2,.7,.2,1) .16s both}
@keyframes journey-action{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.journey-preview #journey-open{animation:none}}
.brand{font-size:clamp(22px,2.1vw,29px);letter-spacing:-.055em;white-space:nowrap}
.main-nav a{color:inherit;text-decoration:none;font-size:19px;font-weight:700;opacity:.5;padding:8px 0;border-bottom:1px solid transparent}
.main-nav a:hover,.nav-linkedin:hover{opacity:1}
.nav-linkedin{display:block;margin-top:24px;color:#063351;text-decoration:none;font-size:11px;border-bottom:1px solid #06335150;width:max-content;padding-bottom:7px}
@media(max-width:700px){.brand{font-size:19px;letter-spacing:-.055em}.header-actions{gap:11px}.main-nav a{font-size:18px}}
@media(max-width:400px){#motion{font-size:0;width:24px;white-space:nowrap;overflow:hidden}#motion:after{content:'Ⅱ';font-size:16px}.paused #motion:after{content:'▷'}#explore{font-size:10px;gap:6px}}

.grain-root{position:absolute;inset:0;pointer-events:none}
.scene-grain{position:absolute;inset:0;z-index:1;pointer-events:none}
.scene-grain .surface{opacity:var(--grain-surface-opacity,.09);mix-blend-mode:soft-light}
.scene-grain .pigment-surface{opacity:.22;mix-blend-mode:soft-light}
.fine-grain .scene-grain .surface{opacity:.55;mix-blend-mode:normal}

:root{--grain-surface-opacity:.09}
/* Progressive text rendering: the same story is readable without JavaScript. */
body:has(#story-document){height:auto;min-height:100dvh;overflow:auto;background:#082b50}
#player{display:none}.story-ready #player{display:block}
.story-ready body:has(#story-document){height:100%;overflow:hidden}
.story-ready #story-document{display:none}
.readable-document{max-width:850px;margin:0 auto;padding:40px 6%;font-size:18px;line-height:1.7;color:#fff8e9}
.readable-document h1{font-size:clamp(36px,6vw,64px);line-height:1.1;margin:50px 0 25px}
.readable-document h2{font-size:clamp(24px,4vw,34px);line-height:1.2;margin:38px 0 18px;letter-spacing:-.035em}
.readable-document p{margin:16px 0}.readable-document nav:first-child{display:flex;gap:24px;flex-wrap:wrap}
.readable-document a{color:#d8f0c3}.readable-document li{margin:12px 0}
a.story-option{text-decoration:none;color:inherit}
.nav-text-link{display:block;font-size:11px;color:#063351;margin-top:20px;width:max-content}
.reading-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
body:has(.reading-backdrop){isolation:isolate}
.reading-paint{position:absolute;width:110%;height:110%;left:-5%;top:-5%;transform:scale(1.15)}
.reading-paint>div,.reading-paint svg{position:absolute;inset:0;width:100%;height:100%}
.reading-veil{position:absolute;inset:0;background:linear-gradient(90deg,#031a3df2,#031a3db8)}
.reading-backdrop .surface{opacity:var(--grain-surface-opacity,.09);mix-blend-mode:soft-light}
.reading-backdrop .pigment-surface{opacity:.22}
#analytics-choice{position:fixed;z-index:30;right:20px;bottom:20px;max-width:360px;padding:18px 20px;background:#082b50f2;color:#fff8e9;border:1px solid #fff4;font:13px/1.5 Arial,sans-serif}
#analytics-choice p{margin:0 0 12px}#analytics-choice button{padding:5px 0;margin-right:22px;border-bottom:1px solid #fff8;color:inherit;font-size:13px}
.analytics-preferences{display:block;width:max-content;margin-top:18px;padding:0;font-size:10px;color:inherit;text-decoration:underline;opacity:.75}

.ukraine-banner{display:inline-block;margin:26px 0 0;padding:12px 0;border-top:1px solid #fff5;font:10px/1.5 Arial,sans-serif;letter-spacing:.1em;color:#fff8e9}.scene:has(.ukraine-banner) .description{max-width:560px}.story-loading body:has(#story-document){height:100dvh;overflow:hidden}

/* Match the original background plugin's 200px cover overscan. */
.film-well iframe{width:max(calc(100vw + 200px),calc(177.778vh + 355.556px));height:max(calc(100vh + 200px),calc(56.25vw + 112.5px));min-width:0;min-height:0;pointer-events:none!important}
@supports(height:100dvh){.film-well iframe{width:max(calc(100vw + 200px),calc(177.778dvh + 355.556px));height:max(calc(100dvh + 200px),calc(56.25vw + 112.5px))}}

#progress[hidden],#counter[hidden]{display:none}