@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--green:#193b32;--paper:#f8f8f4;--blue:#609aff;--solar:#e4f222;--nav:111px;--scale:.5;color:#1a1919;font-family:Inter,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--nav)}body{margin:0;background:var(--paper)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.skip{position:fixed;top:-100px;left:15px;z-index:100;background:white;padding:14px}.skip:focus{top:10px}header{position:fixed;inset:0 0 auto;z-index:20;background:rgba(248,248,244,.96);backdrop-filter:blur(18px)}.masthead{display:flex;align-items:center;justify-content:space-between;padding:16px 34px 10px}.wordmark{font-size:23px;font-weight:700;letter-spacing:-1px}.wordmark span{margin-left:3px}.collection{font:10px 'IBM Plex Mono',monospace;letter-spacing:1.2px}.masthead button{border:0;background:none;color:#62645e;font:10px 'IBM Plex Mono',monospace;padding:5px}nav{display:flex;justify-content:center;gap:7px;overflow:auto;padding:8px 20px 15px;scrollbar-width:none}nav button{white-space:nowrap;border:1px solid #cfd2c9;border-radius:30px;background:transparent;padding:9px 18px;font-size:12px;transition:background .2s,color .2s}nav button:hover{background:#e6e9de}nav button.selected{background:var(--green);border-color:var(--green);color:white}.progress{height:2px;background:#e2e4dd}.progress i{display:block;width:100%;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left}#grid{position:fixed;inset:var(--nav) 0 0;z-index:-1;background-image:linear-gradient(to right,#193b3222 1px,transparent 1px),linear-gradient(to bottom,#193b321b 1px,transparent 1px);background-size:100px 33px;will-change:background-position}main{padding-top:var(--nav)}.opening{height:175vh;position:relative}.opening-pin{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));overflow:hidden;display:flex;align-items:center;justify-content:center}.title-card{width:100%;height:100%;color:#f6f8ee;background:var(--green);display:flex;align-items:center;justify-content:center;position:relative;transform-origin:center;will-change:transform}.title-card h1{font-size:clamp(40px,7.3vw,112px);letter-spacing:-.065em;line-height:1.05;font-weight:600;margin:0}.hero-meta,.hero-foot{position:absolute;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center}.hero-meta{top:30px;font:10px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#cbd8ca}.hero-foot{bottom:32px;font-size:12px}.scroll-hint{display:flex;gap:22px;align-items:center}.scroll-hint span{font-size:24px}.chapter{height:145vh;position:relative}.chapter-pin{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));display:flex;align-items:center;justify-content:center;overflow:hidden}.frame-shell{position:relative;width:calc(1920px * var(--scale));height:calc(1512px * var(--scale));will-change:transform}.frame{width:1920px;height:1512px;position:absolute;transform:scale(var(--scale));transform-origin:top left;isolation:isolate;background:#fff;overflow:hidden;border:1px solid #aaaaa0;box-shadow:0 28px 100px #173b3210;font-family:'IBM Plex Mono',monospace}.frame-grid{position:absolute;inset:0;background:linear-gradient(to right,#5a5d5a55 1px,transparent 1px),linear-gradient(to bottom,#5a5d5a55 1px,transparent 1px);background-size:154px 50.2px;background-position:36px 4px;z-index:-1}.layer{position:absolute;will-change:transform}.layer img{width:100%;height:100%;object-fit:cover;display:block}.layer.clip{overflow:hidden}.layer.multiply{mix-blend-mode:multiply}.layer.soft{mix-blend-mode:soft-light}.layer.dodge{mix-blend-mode:color-dodge}.layer.contain img{object-fit:contain}.frame h2{position:absolute;left:230px;top:81px;margin:0;font-size:44px;line-height:1;font-weight:700;letter-spacing:-.44px;z-index:8}.frame .copy{position:absolute;left:230px;top:193px;width:1332px;margin:0;font-size:43.5px;line-height:1.38;font-weight:300;z-index:8}.white-title{position:absolute;left:191px;top:55px;width:900px;height:98px;background:white;z-index:7}.white-copy{position:absolute;left:191px;top:154px;width:1384px;height:299px;background:white;z-index:7}.frame .tag{position:absolute;font-size:25px;line-height:1.43;font-weight:300;margin:0;z-index:5}.dot{background:var(--blue);border-radius:100%}.step{background:var(--blue)}.chapter-index{position:fixed;left:22px;top:55%;display:flex;flex-direction:column;gap:16px;z-index:10}.chapter-index a{display:block;width:7px;height:7px;border-radius:50%;background:#8c9a90;transition:transform .2s,background .2s}.chapter-index a.active{background:var(--green);transform:scale(1.8)}.chapter-index a:hover{transform:scale(1.7)}.position{position:fixed;bottom:18px;left:34px;right:34px;display:flex;justify-content:space-between;z-index:11;font:9px 'IBM Plex Mono',monospace;letter-spacing:1px;pointer-events:none;color:#516257}.closing{min-height:100svh;background:var(--green);color:#f8f8ec;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;padding:80px 25px}.eyebrow{font:11px 'IBM Plex Mono',monospace;letter-spacing:1px}.closing h2{font-size:clamp(55px,8vw,115px);line-height:.96;letter-spacing:-.06em;font-weight:500;margin:34px 0}.closing p{max-width:400px;line-height:1.6;font-size:14px;margin:0 auto 30px;color:#ced6c8}.closing button{background:var(--solar);color:var(--green);border:0;border-radius:30px;padding:14px 22px;font-size:13px}.closing button span{margin-left:20px}.endmark{font-size:24px;font-weight:600;margin-top:70px;letter-spacing:-1px}body.at-end .position{color:#d6e0cf}body.at-end .chapter-index a{background:#aebcad}dialog{border:1px solid #c9d0c4;background:var(--paper);padding:64px 44px 40px;width:min(480px,90vw);color:var(--green)}dialog::backdrop{background:#10271dcc;backdrop-filter:blur(8px)}dialog h2{font-size:38px;letter-spacing:-2px;margin:28px 0 18px}dialog p{font-size:15px}dialog .muted{font-size:12px;color:#657268}dialog #close-dialog{position:absolute;right:15px;top:8px;font-size:30px;background:none;border:0}dialog #return-ketchum{background:var(--green);color:white;padding:13px 20px;border:0;border-radius:24px;margin-top:20px}.receipt{background:#f7f5ed;padding:40px;box-shadow:6px 8px 0 #0002;font:17px 'IBM Plex Mono',monospace;text-align:center;transform:rotate(.4deg)}.receipt img.logo{object-fit:contain;width:110px;height:120px;margin:auto}.receipt p{margin:15px 0}.receipt .row{display:flex;justify-content:space-between;margin:10px 0}.receipt .barcode{height:80px;margin-top:25px;object-fit:cover}.status{background:var(--solar);padding:6px 20px;font-size:25px;white-space:nowrap}.status img{width:30px;height:30px;display:inline-block;vertical-align:middle;margin-right:8px}.status.white{background:white}.reduced .title-card,.reduced .frame-shell,.reduced .layer{will-change:auto}.reduced .chapter{height:110vh}.reduced .opening{height:100vh}.reduced .chapter-pin{position:relative;top:0}.reduced .opening-pin{position:relative;top:0}@media(max-width:700px){:root{--nav:106px}.masthead{padding:12px 18px 5px}.wordmark{font-size:21px}.collection{display:none}nav{justify-content:flex-start;padding:9px 14px 13px;gap:6px}nav button{padding:9px 14px;font-size:11px}.hero-meta,.hero-foot{left:24px;right:24px}.hero-meta{font-size:9px}.hero-foot{font-size:11px}.title-card h1{font-size:clamp(35px,9.7vw,68px)}.chapter-index{left:10px;gap:12px}.position{left:18px;right:18px;font-size:8px}.frame h2{font-size:57px}.frame .copy{font-size:53px;line-height:1.3;top:185px}.white-copy{height:340px}.white-title{width:1150px}.frame .tag{font-size:32px}.chapter{height:125vh}.closing{min-height:90svh}.frame{box-shadow:0 10px 50px #173b3210}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} 
#first .white-copy,#hemingway .white-copy{height:250px}@media(max-width:700px){.frame h2{font-size:80px;top:70px;left:185px}.frame .copy{font-size:72px;width:1550px;left:185px;top:192px;line-height:1.3}.white-copy,#first .white-copy,#hemingway .white-copy{left:145px;width:1640px;height:540px}.white-title{left:145px;width:1550px;height:125px}.frame .dot[style*="174px"]{left:112px!important;top:89px!important;width:40px!important;height:40px!important}}
.mobile-copy{display:none}@media(max-width:700px){.chapter-pin{flex-direction:column;gap:24px}.mobile-copy{display:block;width:calc(100% - 64px);max-width:420px;font-family:'IBM Plex Mono',monospace}.mobile-copy h2{font-size:20px;letter-spacing:-.5px;line-height:1.25;margin:0 0 16px}.mobile-copy h2:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:9px}.mobile-copy p{font-size:14px;font-weight:300;line-height:1.55;margin:0}.frame-shell{height:calc(1032px * var(--scale));overflow:hidden}.frame{top:calc(-480px * var(--scale))}.frame h2,.frame .copy,.white-copy,.white-title,.frame .dot[style*="174px"]{display:none}.chapter{height:130vh}.reduced .chapter{height:100vh}}
/* One continuous world: the compositions move with the page, over the same grid. */
html{scroll-snap-type:y proximity}.opening,.chapter,.closing{scroll-snap-align:start}.opening{scroll-snap-align:none}.opening-pin{scroll-snap-align:start}#grid{background-color:var(--paper);background-image:linear-gradient(to right,#193b3229 1px,transparent 1px),linear-gradient(to bottom,#193b3224 1px,transparent 1px)}
.chapter{height:calc(1807.2px * var(--scale));min-height:0}.chapter-pin{position:relative;top:0;height:auto;padding-top:calc(100.4px * var(--scale));display:flex;overflow:visible}.frame-shell{will-change:auto}.frame{background:transparent;border:0;box-shadow:none;overflow:visible}.frame-grid,.white-copy,.white-title{display:none}.frame h2,.frame .copy{background:transparent}.frame h2{z-index:12}.frame .copy{z-index:12;text-shadow:0 0 5px var(--paper),0 0 10px var(--paper)}.letter img{position:absolute;top:-634px;height:1100px;object-fit:fill}.status.white{background:var(--paper)}#hemingway .frame .copy{width:1312px}#hemingway .layer:first-of-type{opacity:.9}
.reduced .chapter{height:calc(1807.2px * var(--scale))}.reduced .chapter-pin{top:0}.reduced .opening{height:100vh}html:has(body.reduced){scroll-snap-type:none}
@media(max-width:700px){.chapter,.reduced .chapter{height:auto;min-height:calc(100svh - var(--nav));padding:70px 0 100px}.chapter-pin{padding-top:0;overflow:visible;gap:30px}.frame-shell{overflow:visible}.frame{overflow:visible}.frame .copy,.frame h2{display:none}.mobile-copy p{text-shadow:0 0 5px var(--paper),0 0 10px var(--paper)}.letter{display:none}.mobile-copy{position:relative;z-index:12}.chapter-index{left:9px}}
body{overflow-x:clip}.chapter-pin{clip-path:inset(-1000px 0 -1000px 0)}
/* Restore the artwork's paper labels and dashed story spine. */
html,body{max-width:100%;overflow-x:hidden}#chapters{width:100%;overflow:hidden}nav{flex-wrap:wrap;overflow:visible}.frame{isolation:auto}.white-title,.white-copy{display:block;background:#fff;z-index:7}.white-title{left:191px;top:55px;height:98px}.white-copy{left:191px;top:154px;width:1384px;height:299px}#first .white-copy,#hemingway .white-copy{height:250px}.frame .copy{text-shadow:none}.frame .multiply{mix-blend-mode:multiply}.receipt-export img{object-fit:contain}#grid:before,#grid:after{content:'';position:absolute;top:0;bottom:0;left:var(--spine-x);pointer-events:none}#grid:before{width:3px;transform:translateX(-1px);background:var(--paper)}#grid:after{width:1px;background:repeating-linear-gradient(to bottom,#5c7067 0 5px,transparent 5px 11px);background-position:0 var(--dash-offset)}
@media(max-width:700px){nav{justify-content:center;padding:9px 12px 12px;gap:6px}nav button{font-size:10px;padding:8px 12px}.white-title,.white-copy{display:none}.mobile-copy h2,.mobile-copy p{background:#fff;text-shadow:none;padding:10px 12px}.mobile-copy h2{position:relative;margin-left:0}.mobile-copy h2:before{position:absolute;left:-9px;top:18px;margin:0}.mobile-copy p{padding-top:12px;padding-bottom:12px}.frame .multiply{mix-blend-mode:multiply}}
/* Figma's portrait fill corrects the source image's pre-stretched dimensions. */
.portrait-fill img{object-fit:fill}.receipt-export{overflow:hidden}.receipt-export img{position:absolute;width:587px;height:720px;left:-115px;top:-53px;max-width:none;object-fit:fill}
/* Panel edges use exact grid columns and rows: x=36+154n, y=4+50.2n. */
.white-title,.white-copy{left:190px;background:var(--paper)}.white-title{top:54.2px;height:100.4px}.white-copy{top:154.6px;width:1386px;height:301.2px}#first .white-copy,#hemingway .white-copy{height:251px}.mobile-copy h2,.mobile-copy p{background:var(--paper)}
/* Leave each cell's bordering grid stroke uncovered at every render scale. */
.white-title,.white-copy{clip-path:inset(calc(1px / var(--scale)) 0 0 calc(1px / var(--scale)))}
/* Browser annotations: precise blends and foreground ordering. */
.grid-through{position:absolute;isolation:isolate}.grid-through:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background-image:linear-gradient(to right,#193b3229 calc(1px / var(--scale)),transparent calc(1px / var(--scale))),linear-gradient(to bottom,#193b3224 calc(1px / var(--scale)),transparent calc(1px / var(--scale)));background-size:154px 50.2px;background-position:calc(36px - var(--layer-x)) calc(4px - var(--layer-y))}
#banana .dodge{background:var(--blue);mix-blend-mode:multiply;z-index:1}#banana .dodge img{mix-blend-mode:color-dodge}#banana .banana-solar{z-index:0}#banana .chairlift-photo{mix-blend-mode:normal;z-index:4}#banana .layer:has(img[alt="Engineer James Curran"]){z-index:3}#banana .banana{z-index:4}
#first .town-photo{mix-blend-mode:normal;z-index:4}#hemingway .mountain-backdrop{mix-blend-mode:normal;opacity:1;z-index:0}#hemingway .layer:not(.mountain-backdrop){z-index:2}#hemingway .town-street{mix-blend-mode:normal}#hand .layer{mix-blend-mode:normal}#hand .copy{width:1310px}
#again .binocular-view{background:#000;z-index:4}#again .binocular-view img{object-fit:fill}#again .receipt-export{clip-path:inset(2px 20px 14px 11px)}
.status{display:flex;align-items:center;gap:10px;padding:0 16px;line-height:1;box-sizing:border-box}.status img{flex:none;margin:0;object-fit:contain;width:30px;height:30px}.receipt-status{font-size:20px;gap:6px;padding:0 8px}.receipt-status img{width:24px;height:24px}
#hand .white-copy{height:301.2px}
.grid-through:after{background-position:var(--grid-px,calc(36px - var(--layer-x))) var(--grid-py,calc(4px - var(--layer-y)))}#again .receipt-export{clip-path:inset(2px 26px 14px 11px)}
/* Crop the marked overflow at the right-hand grid line, preserving image scale. */
#hand .filing-crop{clip-path:inset(0 326px 0 0)}
#hand .paper-stack{clip-path:inset(0 0 13.2px 0)}
#first .scout-note{background:#85b1ff;mix-blend-mode:normal}
#first .scout-note img{mix-blend-mode:soft-light}
#first .scout-note{z-index:0}
#first .first-black-circle{z-index:1}
#first .first-train{z-index:2}
.status.white{clip-path:inset(3px 0 0 3px)}
.receipt-status{font-size:25px;gap:10px;padding:0 16px}
.receipt-status img{width:30px;height:30px}
/* Bring the first chapter closer to the opening title's exit. */
.opening{height:135vh}
.reduced .opening{height:100vh}
.opening{height:calc(100svh - var(--nav) + 32px)}
.reduced .opening{height:calc(100svh - var(--nav))}
/* The closing card enters in page flow, then expands as the opening card shrinks. */
.closing{display:block;position:relative;height:calc(100svh - var(--nav));min-height:0;padding:0;background:transparent;scroll-snap-align:none}
.ending-stage{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));z-index:19;visibility:hidden;pointer-events:none;overflow:hidden}
.ending-stage.visible{visibility:visible}
.ending-panel{position:absolute;inset:0;background:var(--green);color:var(--paper);transform-origin:center;will-change:transform;overflow:hidden}
.ending-lockup{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;will-change:opacity,transform}
.closing .ending-lockup h2{font-size:clamp(40px,7.3vw,112px);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:0;color:#f6f8ee}
.closing .ending-lockup p{font-size:clamp(30px,4.3vw,78px);font-weight:600;letter-spacing:-.055em;line-height:1.08;margin:0;color:var(--paper);max-width:none}
.ending-pattern{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(var(--repeat-rows,9),1fr);align-content:start;overflow:hidden}
.ending-pattern span{font-size:var(--word-size,8.9vw);font-weight:600;letter-spacing:-.065em;line-height:1;white-space:nowrap;text-align:center;opacity:0;align-self:center}
.ending-rest{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.ending-rest[hidden]{display:none}
.ending-wordmark{font-size:clamp(48px,9vw,140px);font-weight:600;letter-spacing:-.065em;line-height:1}
.ending-actions{position:absolute;left:26px;right:26px;bottom:28px;display:flex;justify-content:space-between;pointer-events:auto}
.closing .ending-actions button{background:none;border:1px solid #f8f8f466;color:var(--paper);padding:10px 16px;border-radius:24px;font-size:11px}
body.ending-fullscreen .chapter-index,body.ending-fullscreen .position{visibility:hidden;pointer-events:none}
@media(max-width:700px){.ending-actions{left:18px;right:18px;bottom:24px}.closing .ending-actions button{font-size:10px;padding:9px 12px}}
.ending-actions[hidden]{display:none}.ending-actions{justify-content:center}.ending-lockup{opacity:1;transform:none}
/* Brand type is scoped to the green intro and closing cards. */
@font-face{font-family:'TWK Lausanne';src:url('assets/fonts/TWKLausanne-400.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'TWK Lausanne';src:url('assets/fonts/TWKLausanne-700.otf') format('opentype');font-style:normal;font-weight:700;font-display:block}
.title-card h1,.closing .ending-lockup h2{font-family:'TWK Lausanne',Inter,Arial,sans-serif;font-weight:700;font-synthesis:none}
.hero-foot>span,.hero-foot .scroll-hint{font-family:'TWK Lausanne',Inter,Arial,sans-serif;font-weight:400;font-synthesis:none}
.title-card h1,.closing .ending-lockup h2{letter-spacing:-.04em}
.wordmark{display:inline-flex;align-items:center}.wordmark img{display:block;width:112px;height:auto}
@media(max-width:700px){.wordmark img{width:98px}}
/* Small time-based motion from the City of Ketchum film, independent of scroll. */
#first .step{animation:first-signal-a 5.6s steps(1,end) infinite;animation-play-state:paused}
#first .step.signal-b{animation-name:first-signal-b}
#first .first-train img{clip-path:inset(0 0 0 6.6%);transform-origin:55% 65%;animation:first-train-drift 2.8s steps(1,end) infinite;animation-play-state:paused;will-change:transform}
#first .first-scribble{z-index:1;pointer-events:none}#first .first-scribble svg{display:block;width:100%;height:100%;overflow:visible}
#first .first-scribble path{stroke-dashoffset:140;animation:first-ink-run 5.6s linear infinite;animation-play-state:paused;opacity:0}
#first .first-ink-main{stroke-dasharray:24 5 42 7 24 6 25 1000}
#first .first-ink-grit{stroke-dasharray:18 6 34 5 13 7 42 1000}
#first.motion-active .step,#first.motion-active .first-train img,#first.motion-active .first-scribble path{animation-play-state:running}
@keyframes first-signal-a{0%,9%{opacity:0}10%,64%{opacity:1}65%,100%{opacity:0}}
@keyframes first-signal-b{0%,34%{opacity:0}35%,85%{opacity:1}86%,100%{opacity:0}}
@keyframes first-train-drift{0%,100%{transform:translate(0,0) rotate(-.25deg)}35%{transform:translate(9px,-6px) rotate(.2deg)}70%{transform:translate(-4px,2px) rotate(-.1deg)}}
@keyframes first-ink-run{0%,5%{stroke-dashoffset:140;opacity:0}6%{opacity:1}20%{stroke-dashoffset:-1000;opacity:1}21%,100%{stroke-dashoffset:-1000;opacity:0}}
body.reduced #first .step,body.reduced #first .first-train img,body.reduced #first .first-scribble path{animation:none;will-change:auto}
body.reduced #first .step{opacity:1}body.reduced #first .first-train img{transform:none}body.reduced #first .first-scribble path{stroke-dasharray:none;stroke-dashoffset:0;opacity:.7}

/* Held poses preserve each image's existing crop and orientation. */
#banana .banana img,#hemingway .people img,#hand .carly img,#again .binocular-view img{animation:story-held-poses 2.8s steps(1,end) infinite;animation-play-state:paused;transform-origin:center;will-change:translate,rotate}
#banana.motion-active .banana img,#hemingway.motion-active .people img,#hand.motion-active .carly img,#again.motion-active .binocular-view img{animation-play-state:running}
#again .binocular-view{overflow:hidden}
#again .binocular-view img{scale:1.025}
#again .mountain-crop{clip-path:inset(0 0 242.2px 0)}
@keyframes story-held-poses{0%,100%{translate:0 0;rotate:-.25deg}35%{translate:9px -6px;rotate:.2deg}70%{translate:-4px 2px;rotate:-.1deg}}
body.reduced #banana .banana img,body.reduced #hemingway .people img,body.reduced #hand .carly img,body.reduced #again .binocular-view img{animation:none;translate:none;rotate:none;will-change:auto}

/* The collage layer moves independently from any animation on its image. */
.header-actions{display:flex;align-items:center;gap:13px}
.masthead .header-actions button{white-space:nowrap}
.masthead #reset-collage{border:1px solid #bfc9c0;border-radius:18px;padding:7px 10px;color:var(--green);background:transparent}
.masthead #reset-collage:not(:disabled):hover{background:#e7ede7}
.masthead #reset-collage:disabled{opacity:.42;cursor:default}
.collection{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.collage-item{translate:var(--drag-x,0px) var(--drag-y,0px);cursor:grab;touch-action:none;user-select:none}
.chapter:not(.collage-current) .collage-item{pointer-events:none}

/* The supplied blueprint has opaque white paper. Tint that paper to match the
   shared canvas, multiply the blue ink into it, then continue the grid above. */
#banana .dodge{background:var(--paper);mix-blend-mode:normal;isolation:isolate;z-index:1}
#banana .dodge img{mix-blend-mode:multiply}
#banana .engineer-photo{mix-blend-mode:normal;z-index:3}
.captioned-image:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.image-caption{position:fixed;z-index:40;max-width:260px;min-width:164px;padding:13px 16px 14px;background:#17332d;color:var(--paper);font:14px/1.45 'IBM Plex Mono',monospace;letter-spacing:.01em;white-space:pre-line;overflow-wrap:anywhere;box-shadow:0 8px 24px #10251e26;pointer-events:none}
.image-caption[hidden]{display:none}
#hemingway .memorial-crop{clip-path:inset(0 0 44px 0)}
#banana .dodge.was-dragged{background:var(--paper);mix-blend-mode:normal;isolation:isolate}
#banana .dodge.was-dragged img{mix-blend-mode:multiply}
.collage-item img{user-select:none;-webkit-user-drag:none}
.collage-item.is-dragging{cursor:grabbing}
.dragging-collage,.dragging-collage *{cursor:grabbing!important;user-select:none!important}
html:has(body.dragging-collage){scroll-snap-type:none}
.audio-toggle{display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:50%;background:transparent;color:#1a1919;padding:0;cursor:pointer;transition:background-color .18s ease,transform .18s ease}
.audio-toggle:hover{background:#dce9e4;transform:scale(1.06)}
.audio-toggle[aria-pressed="true"]{background:var(--blue)}
.audio-toggle[aria-pressed="true"] img{filter:invert(1)}
.audio-toggle img{display:block;width:40px;height:40px;pointer-events:none}
#hand .frame-audio{position:absolute;left:714px;top:69px;width:68px;height:68px;z-index:14}
#again .frame-audio{position:absolute;left:532px;top:69px;width:68px;height:68px;z-index:14}
#hand .mobile-audio,#again .mobile-audio{display:none}
#hand-soundbite,#again-soundbite{display:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:700px){.header-actions{gap:5px}.masthead #reset-collage{font-size:9px;padding:6px 7px}.masthead #motion{font-size:9px}#hand .frame-audio,#again .frame-audio{display:none}#hand .mobile-copy h2,#again .mobile-copy h2{display:inline-block;margin:0 8px 12px 0}#hand .mobile-audio,#again .mobile-audio{display:inline-flex;width:44px;height:44px;vertical-align:middle;margin-bottom:12px}#hand .mobile-audio img,#again .mobile-audio img{width:24px;height:24px}}

/* Keep the collage cuts on the shared 154 × 50.2 grid. */
#first .town-photo{clip-path:inset(3px 0 0 0)}
#hemingway .writer{clip-path:inset(0 0 0 14px)}
#hemingway .town-street{clip-path:inset(0 0 20px 0)}
#hand .paper-stack{clip-path:inset(0 0 63.4px 0)}

/* Small held-pose movement for the banana chapter's upper dot. */
#banana .banana-floating-dot{animation:banana-dot-wiggle 3.6s steps(1,end) infinite;animation-play-state:paused}
#banana.motion-active .banana-floating-dot{animation-play-state:running}
@keyframes banana-dot-wiggle{0%,100%{translate:0 0}24%{translate:-8px 4px}52%{translate:-2px 10px}78%{translate:6px 3px}}
body.reduced #banana .banana-floating-dot{animation:none;translate:none}

/* Trim the mountain's empty upper alpha and move both archival images by a grid row. */
#hemingway .mountain-backdrop{clip-path:inset(318px 0 0 0)}

/* The second Hemingway signal enters before the first leaves. */
#hemingway .people-green{background:var(--green);z-index:1;translate:var(--drag-x,0px) var(--drag-y,0px);pointer-events:none}
#hemingway .step{animation:first-signal-a 5.6s steps(1,end) infinite;animation-play-state:paused}
#hemingway .step.signal-b{animation-name:first-signal-b}
#hemingway.motion-active .step{animation-play-state:running}
body.reduced #hemingway .step{animation:none;opacity:1}

/* Square story controls and a three-way ending navigation. */
nav button,.masthead #reset-collage{border-radius:0}
.ending-actions{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.ending-actions button:first-child{justify-self:start}
.ending-actions button:nth-child(2){justify-self:center}
.ending-actions button:last-child{justify-self:end}
.closing .ending-actions button{border-radius:0;padding:11px 16px;transition:background-color .2s,border-color .2s,color .2s}
.closing .ending-actions button:hover,.closing .ending-actions button:focus-visible{background:var(--blue);border-color:var(--blue);color:var(--green)}
@media(max-width:700px){.ending-actions{gap:6px}.closing .ending-actions button{font-size:9px;padding:8px 6px}}
@media(max-width:700px){.closing .ending-lockup h2{font-size:clamp(35px,9.7vw,68px)}}

/* Keep the upper blue circle above the collage and completely still. */
#banana .banana-floating-dot{z-index:15;animation:none;translate:none;will-change:auto}

/* The portrait and its blue backing form one draggable layer. */
#again .portrait-fill{background:var(--blue)}