@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lw_3E.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B4873_3E.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2_3E.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxhTg.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAkJxhTg.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAfJthTg.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwARZthTg.ttf) format('truetype');
}
@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/I_urMpiDvgLdLh0fAtoftig.ttf) format('truetype');
}


:root{--ink:#081111;--surface:#101b1a;--paper:#e9ece2;--muted:#a7b7af;--accent:#ead895;--line:rgba(228,237,217,.18);--display:'Pirata One',fantasy;--serif:'Barlow Condensed',Impact,sans-serif;--sans:'DM Sans',Arial,sans-serif;font-family:var(--sans);background:var(--ink);color:var(--paper);color-scheme:dark;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-gutter:stable}body{margin:0;overflow-x:clip}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.skip{position:fixed;top:-80px;left:20px;z-index:200;background:var(--accent);color:var(--ink);padding:12px}.skip:focus{top:12px}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:500;line-height:1.6}.site-header{position:fixed;top:0;left:0;right:0;padding:25px 4vw;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(#071212cf,transparent)}.wordmark{font:400 28px/1 var(--display);white-space:nowrap}.wordmark>span{color:var(--accent)}#chapter-label{font-size:12px;letter-spacing:.11em;color:var(--muted)}.header-actions{display:flex;gap:30px;align-items:center;font-size:14px}.header-actions button{border:0;background:none;color:var(--paper);padding:0}.header-actions span{margin-left:9px;color:var(--accent)}.header-actions a:hover,.header-actions button:hover{color:var(--accent)}#journey{position:relative;height:2300svh}#screen{height:100svh;width:100%;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#071211}.scroll-anchor{position:absolute;left:0;pointer-events:none}.concept-world{position:absolute;inset:0;will-change:opacity,transform;z-index:1}.concept-world>img{width:100%;height:100%;object-fit:cover;object-position:center}.concept-shade{position:absolute;inset:0;background:linear-gradient(90deg,#06111170,transparent 80%),linear-gradient(0deg,#071211,transparent 50%,#07121145)}.atmosphere{position:absolute;inset:0;background:radial-gradient(ellipse at 65% 47%,#2c4b382c,transparent 58%);opacity:0;z-index:0}.scene-vignette{position:absolute;inset:0;z-index:10;pointer-events:none;background:linear-gradient(0deg,#071211d9,transparent 22%,transparent 76%,#07121170),linear-gradient(90deg,#07121130,transparent 45%)}#world-camera{position:absolute;inset:0;z-index:2;opacity:0;transform-origin:50% 50%;will-change:transform,opacity}#world-plane{position:absolute;inset:0}#world-plane>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity}#world-final{z-index:9}#character-camera{position:absolute;left:65%;top:53%;width:min(102vh,80vw);aspect-ratio:1;z-index:5;opacity:0;will-change:transform,left,top,opacity;transform:translate(-50%,-50%)}#character-camera>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;will-change:transform,opacity}#character-drawing{padding:8%;z-index:1}#character-rest{z-index:2}#character-backpack{z-index:3}#character-body{z-index:4}#character-lantern{z-index:5}#character-performance{z-index:6}#forest-detail{position:absolute;top:50%;left:65%;width:min(80vh,55vw);aspect-ratio:1;z-index:7;opacity:0;will-change:transform,opacity}#forest-detail img{width:100%;height:100%;object-fit:contain}.intro-title{position:absolute;left:6.5vw;top:21%;z-index:12;will-change:opacity,transform}.intro-title .eyebrow{color:var(--accent)}h1{font:400 clamp(110px,14.4vw,260px)/.83 var(--display);letter-spacing:-.02em;margin:32px 0 24px}h1 span{color:var(--accent)}.intro-title>p{font-size:21px;line-height:1.45;margin:0 0 30px;color:var(--paper)}.begin{display:flex;align-items:center;gap:28px;font-size:12px;letter-spacing:.1em}.begin span{font-size:28px;color:var(--accent)}.story-copy{position:absolute;left:6.5vw;top:32%;z-index:13;max-width:385px;width:31vw;opacity:0;pointer-events:none;will-change:transform,opacity;text-shadow:0 3px 35px #04100fd0}.story-copy[data-beat=direction],.story-copy[data-beat=pose],.story-copy[data-beat=trees]{left:auto;right:6.5vw}.story-copy .eyebrow{color:var(--accent)}.story-copy h2{font:400 clamp(44px,5.1vw,82px)/1.04 var(--display);margin:22px 0 25px;letter-spacing:-.01em}.story-copy h2 em{font-style:normal;font-weight:400;color:var(--accent)}.story-copy p{font-size:17px;line-height:1.65;color:var(--paper);margin:0 0 25px;max-width:360px}.process-tag{display:block;font-size:12px;letter-spacing:.09em;color:var(--muted);line-height:1.7}.inline-inspect{border:0;border-bottom:1px solid #e8d89588;background:transparent;color:var(--accent);padding:0 0 9px;font-size:14px;text-shadow:0 3px 20px #04100f}.inline-inspect:hover{color:white}.direction-palette{display:flex;gap:5px;position:absolute;z-index:14;right:6.5vw;bottom:23%;width:31vw;max-width:385px;opacity:0}.direction-palette>span{display:block;width:25%;height:6px}.performance-readout{display:flex;align-items:center;gap:14px;margin:26px 0 18px;font-size:12px;color:var(--accent)}.performance-readout>div{width:170px;height:1px;background:#d6e0d933}.performance-readout i{display:block;width:0;height:2px;background:var(--accent)}.stage-bottom{position:absolute;bottom:92px;left:4vw;right:4vw;z-index:22;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.1em;color:var(--muted);pointer-events:none}.stage-bottom b{font-size:20px;font-weight:400;color:var(--accent);margin-left:13px}.chapter-nav{position:fixed;z-index:30;bottom:23px;left:4vw;right:4vw;display:flex;gap:0;align-items:center;border-top:1px solid #e1e9df2c;padding-top:19px;justify-content:space-between}.chapter-nav>a{font-size:12px;letter-spacing:.04em;color:#8c9c93;position:relative;transition:color .3s}.chapter-nav>a.active{color:var(--accent)}.chapter-nav>a:before{content:'';position:absolute;top:-22px;left:0;width:5px;height:5px;border-radius:50%;background:#67746a}.chapter-nav>a.active:before{background:var(--accent);box-shadow:0 0 10px #ead89570}.journey-progress{position:absolute;left:0;right:0;height:1px;top:-1px;pointer-events:none}.journey-progress>span{height:1px;background:var(--accent);display:block;width:0}#film-world{position:absolute;inset:25% 5vw 24%;z-index:11;opacity:0;pointer-events:none;transform-origin:center;will-change:transform,opacity}#final-video{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 20px 100px #0009);background:transparent}.film-copy{max-width:none;width:100%;left:0;right:0;text-align:center;top:10%}.film-copy h2{font-size:clamp(40px,4vw,68px);margin:12px 0}.film-copy p{font-size:14px;margin:0 auto;color:var(--muted);max-width:none}.film-credit{position:absolute;left:5vw;right:5vw;bottom:12%;z-index:14;text-align:center;opacity:0;pointer-events:none}.film-credit>span{font-size:12px;letter-spacing:.08em;color:var(--accent)}.film-credit>p{font-size:15px;color:var(--muted);margin:15px 0}.film-credit>div{display:flex;justify-content:center;gap:28px;font-size:13px}.film-credit button{background:none;border:0;color:var(--paper);font-size:13px;padding:0}.film-credit button:hover,.film-credit a:hover{color:var(--accent)}.asset-dialog{border:1px solid var(--line);background:#101918;color:var(--paper);padding:34px 38px;max-width:1250px;width:94vw;max-height:92svh;overflow:auto;border-radius:8px;box-shadow:0 40px 180px #000b}.asset-dialog::backdrop{background:#030b0ce8;backdrop-filter:blur(18px)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:25px;margin-bottom:25px}.dialog-heading .eyebrow{color:var(--accent)}.dialog-heading h2{font:400 52px/1.1 var(--display);margin:10px 0 0}.dialog-heading h2 em{font-style:normal;color:var(--accent)}#close-assets{border:1px solid var(--line);background:none;color:var(--paper);border-radius:50%;font-size:20px;width:42px;height:42px;flex-shrink:0}.no-script{position:fixed;z-index:200;inset:30%;background:var(--ink);padding:40px;line-height:1.7}.no-script a{color:var(--accent)}
.asset-lab{display:grid;grid-template-columns:210px minmax(300px,1.3fr) minmax(230px,.8fr);min-height:560px;align-items:stretch;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.asset-list{padding:24px 20px 24px 0;display:flex;flex-direction:column;gap:4px;justify-content:center;border-right:1px solid var(--line)}.asset-list button{border:0;border-radius:0;cursor:pointer;color:var(--muted);background:none;padding:19px 12px;display:flex;align-items:center;gap:15px;text-align:left;font-size:15px;line-height:1.2;transition:color .2s,background .2s}.asset-list button>span{font-size:12px;color:#74837b}.asset-list button i{font-style:normal;margin-left:auto;opacity:0}.asset-list button[aria-selected=true]{background:#e7d48f13;color:var(--accent)}.asset-list button[aria-selected=true] i{opacity:1}.asset-list button:hover{color:var(--accent);background:#e7d48f0a}.asset-stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#293d372c,transparent 60%);display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-width:0}.stage-top{position:absolute;left:22px;right:22px;top:23px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.1em;color:var(--muted);z-index:2}.view-count{font-size:18px;color:var(--accent)}.asset-visual{height:400px;display:flex;justify-content:center;align-items:center;cursor:grab;touch-action:pan-y;position:relative;user-select:none}.asset-visual:active{cursor:grabbing}.asset-visual img{width:100%;height:100%;object-fit:contain;pointer-events:none}.asset-visual.input-mode{cursor:default}.asset-visual.input-mode img{padding:25px}.asset-load{position:absolute;bottom:10px;font-size:12px;color:var(--muted)}.rotation-controls{display:flex;align-items:center;gap:15px;padding:0 35px;font-size:12px;letter-spacing:.08em;color:var(--muted)}.rotation-controls input{width:100%;min-width:30px;accent-color:var(--accent);cursor:ew-resize}.rotation-controls>span{white-space:nowrap}.rotation-controls output{width:38px;flex-shrink:0;font-size:12px}.asset-mode{display:flex;justify-content:center;margin-top:27px;gap:0}.asset-mode button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:10px 17px;font-size:12px;cursor:pointer}.asset-mode button:first-child{border-radius:30px 0 0 30px}.asset-mode button:last-child{border-radius:0 30px 30px 0}.asset-mode button.active{background:var(--paper);color:var(--ink);border-color:var(--paper)}.asset-info{padding:65px 0 35px 32px;border-left:1px solid var(--line);min-width:0}.asset-info>.eyebrow{font-size:12px;color:var(--accent)}.asset-info h3{font:500 clamp(30px,3.2vw,50px)/1 var(--serif);text-transform:uppercase;margin:20px 0;letter-spacing:-.02em}.asset-info>p{font-size:16px;line-height:1.6;color:var(--muted)}dl{margin-top:32px}dl>div{padding:14px 0;border-top:1px solid var(--line)}dt{font-size:12px;color:#85958d;margin-bottom:8px}dd{margin:0;font-size:14px;line-height:1.4}.asset-info>.asset-footnote{font-size:12px;color:#899b91;line-height:1.55;margin-top:25px}
.asset-lab{min-height:500px}.asset-info{padding-top:45px}.asset-visual{height:360px}.stage-top{font-size:12px}.asset-info>.eyebrow{font-size:12px}.asset-info h3{font-family:var(--display);font-weight:400;text-transform:none;font-size:40px}.asset-info>p{font-size:15px}.asset-info dt{color:var(--muted)}.asset-mode button{font-size:14px}.rotation-controls{font-size:12px;padding:0 20px}.asset-mode{margin:20px 0}#spin-toggle{flex-shrink:0;border:1px solid var(--line);color:var(--accent);background:transparent;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer;line-height:1}#spin-toggle[aria-pressed=true]{color:var(--ink);background:var(--accent)}
@media(min-width:1600px){.story-copy{max-width:480px}.story-copy p{font-size:20px;max-width:430px}.story-copy h2{font-size:88px}.intro-title>p{font-size:25px}}
@media(max-width:1100px){.story-copy{width:33vw;left:5vw}.story-copy[data-beat=direction],.story-copy[data-beat=pose],.story-copy[data-beat=trees]{right:5vw}.story-copy h2{font-size:56px}.story-copy p{font-size:16px}.asset-lab{grid-template-columns:170px 1fr}.asset-info{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:0 35px}.asset-info .eyebrow,.asset-info h3,.asset-info>p{grid-column:1}.asset-info dl{grid-column:2;grid-row:1/5;margin:0}.asset-info>.asset-footnote{grid-column:1/-1}.asset-stage{padding:45px 0 20px}.film-copy{width:100%;left:0}}
@media(max-width:700px){#journey{height:2300svh}.site-header{padding:19px 22px;gap:14px}.wordmark{font-size:23px}#chapter-label{display:none}.header-actions{gap:16px;font-size:12px}.header-actions button{font-size:13px}.header-actions span{margin-left:4px}.header-actions>a{display:none}.intro-title{left:7vw;top:24%}.intro-title .eyebrow{font-size:11px;max-width:270px}.intro-title h1{font-size:clamp(100px,26vw,160px);margin:28px 0 24px}.intro-title>p{font-size:19px}.begin{font-size:12px;gap:23px}.concept-world>img{object-position:58%}.story-copy,.story-copy[data-beat=direction],.story-copy[data-beat=pose],.story-copy[data-beat=trees]{left:7vw;right:auto;top:13%;width:86vw;max-width:430px}.story-copy .eyebrow{font-size:11px;line-height:1.5}.story-copy h2{font-size:43px;line-height:1.01;margin:15px 0 15px}.story-copy h2 br{display:none}.story-copy h2 br:after{content:' '}.story-copy p{font-size:16px;line-height:1.5;max-width:340px;margin-bottom:16px}.process-tag{font-size:10px;line-height:1.6;letter-spacing:.06em}.inline-inspect{font-size:13px;padding-bottom:6px}#character-camera{width:145vw;max-width:780px;top:62%;left:50%}.scene-vignette{background:linear-gradient(0deg,#071211d9,transparent 30%,transparent 55%,#071211b0)}.atmosphere{background:radial-gradient(ellipse at 50% 63%,#2c4b383d,transparent 58%)}.direction-palette{right:auto;left:7vw;top:auto;bottom:31%;width:68vw;max-width:340px}.stage-bottom{bottom:86px;left:6vw;right:6vw;font-size:10px;gap:15px;line-height:1.5;letter-spacing:.05em}#stage-status{max-width:220px}#scroll-cue{white-space:nowrap;font-size:10px}#scroll-cue b{margin-left:5px}.chapter-nav{bottom:21px;left:6vw;right:6vw;gap:0;padding-top:16px}.chapter-nav>a{font-size:10px;letter-spacing:0}.chapter-nav>a:before{top:-19px;width:4px;height:4px}.performance-readout{margin:18px 0 14px}.performance-readout>div{width:180px}#forest-detail{width:130vw;max-width:750px;left:50%;top:65%}#film-world{inset:32% 0 25%}.film-copy,.story-copy.film-copy{top:14%;text-align:center;left:5vw;width:90vw;max-width:none}.film-copy h2{font-size:44px}.film-copy p{font-size:14px;max-width:none}.film-credit{left:7vw;right:7vw;bottom:15%}.film-credit>span{font-size:10px;line-height:1.7;letter-spacing:.04em;display:block}.film-credit>p{font-size:13px;line-height:1.5;margin:12px 0 18px}.film-credit>div{gap:17px;flex-wrap:wrap;font-size:12px}.film-credit button{font-size:12px}.asset-dialog{padding:25px 20px;width:95vw;max-height:92svh}.dialog-heading h2{font-size:39px}.dialog-heading .eyebrow{font-size:11px}.asset-lab{display:flex;flex-direction:column}.asset-list{flex-direction:row;overflow-x:auto;padding:12px 0;gap:5px;border-right:0;border-bottom:1px solid var(--line);justify-content:flex-start;scrollbar-width:thin}.asset-list button{padding:12px 10px;white-space:nowrap;gap:7px;font-size:14px}.asset-list button>span{font-size:12px}.asset-list button i{display:none}.asset-stage{padding:50px 0 20px}.stage-top{left:0;right:0;font-size:10px}.view-count{font-size:17px}.asset-visual{height:330px}.rotation-controls{font-size:10px;padding:0 5px;gap:10px}.asset-mode button{font-size:13px;padding:9px 13px}.asset-info{display:block;padding:22px 0 0}.asset-info h3{font-size:36px}.asset-info>.eyebrow{font-size:11px}.asset-info dl{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.asset-info dl>div:last-child{grid-column:1/-1}.asset-info>p{font-size:16px}.asset-info>.asset-footnote{font-size:12px}.no-script{inset:10%;padding:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* The scene is the page; each caption belongs to a moment in its timeline. */
#screen img{-webkit-user-drag:none;user-select:none}.story-copy h2 br:after{content:" "}.story-copy{filter:drop-shadow(0 2px 15px #06100b80)}
@media(max-width:700px){.eyebrow,.intro-title .eyebrow,.story-copy .eyebrow,.process-tag,.stage-bottom,#scroll-cue,.chapter-nav>a,.film-credit>span,.dialog-heading .eyebrow,.stage-top,.rotation-controls,.asset-info>.eyebrow{font-size:12px}.chapter-nav{left:5vw;right:5vw}.chapter-nav>a{font-size:11px}.story-copy h2{font-size:42px;line-height:1.1}.story-copy p{font-size:15px;line-height:1.5}.story-copy .process-tag{max-width:310px}.stage-bottom{bottom:87px}.story-copy[data-beat=performance] p{max-width:330px}.story-copy[data-beat=performance] .process-tag{display:none}.film-credit>span{font-size:11px}#film-world{inset:34% 0 29%}.film-credit{bottom:16%}.story-copy.film-copy{top:14%}.direction-palette{bottom:40%}.asset-visual{height:310px}}

.opening-world{position:absolute;inset:0;z-index:1;will-change:transform,opacity}.opening-world>img,.opening-world>picture>img{height:100%;width:100%;object-fit:cover;object-position:52% center}.concept-world{z-index:2;opacity:0}.environment-shade{position:absolute;inset:0;z-index:6;background:#071211;opacity:0;pointer-events:none}.story-copy[data-beat=deadfall]{left:auto;right:6.5vw}#forest-detail{width:min(95vh,65vw);z-index:8}.story-copy h2{font-size:clamp(44px,4.7vw,78px)}.story-copy.film-copy h2{font-size:clamp(40px,4vw,68px)}.asset-info #locate-asset{margin-top:12px}.asset-mode button:disabled{opacity:.35;cursor:default}
@media(max-width:700px){.opening-world>img,.opening-world>picture>img{object-position:46% center}.story-copy[data-beat=deadfall]{left:7vw;right:auto;top:13%;width:86vw}#forest-detail{width:140vw}.story-copy h2{font-size:40px;line-height:1.08}.story-copy h2 br{display:block}.story-copy.film-copy h2{font-size:39px}.story-copy p{max-width:330px}.story-copy{top:12%}}

@media(min-width:701px){.intro-title{left:54vw;right:4vw;top:18%}.intro-title h1{font-size:clamp(106px,13.6vw,245px)}.intro-title .eyebrow{font-size:11px;letter-spacing:.09em}.opening-world .concept-shade{background:linear-gradient(90deg,transparent 10%,#06111130 55%,#06111150),linear-gradient(0deg,#071211d9,transparent 30%,#07121120)}}
@media(max-width:700px){.opening-world>img,.opening-world>picture>img{object-position:37% center}.intro-title{top:19%}.intro-title h1{font-size:clamp(94px,25vw,155px)}.intro-title .eyebrow{font-size:12px;max-width:300px}.begin{margin-top:25px}}

/* Keep the opening character unobstructed. */
@media(min-width:701px){.intro-title{left:58vw;right:4vw;top:26%}.intro-title h1{font-size:clamp(84px,10vw,180px);margin:24px 0 22px}.intro-title>p{font-size:18px;line-height:1.5;margin-bottom:22px}.intro-title .eyebrow{max-width:340px;font-size:11px;line-height:1.7}.intro-title .begin{font-size:11px;gap:20px}}
@media(max-width:700px){.intro-title{left:47vw;right:5vw;top:16%}.intro-title h1{font-size:clamp(54px,16vw,78px);margin:20px 0}.intro-title .eyebrow{font-size:10px;letter-spacing:.07em;line-height:1.6}.intro-title>p{font-size:15px;line-height:1.5;margin-bottom:20px}.intro-title .begin{font-size:10px;letter-spacing:.06em;line-height:1.7;gap:9px;margin-top:10px}.intro-title .begin span{font-size:21px}}

.opening-world>img,.opening-world>picture>img{object-fit:contain;object-position:center!important}.opening-world{background:#071211}

#film-world{inset:0!important;transform:none!important}#final-video{object-fit:contain;filter:none;background:transparent}.film-copy{top:11%;text-align:left;left:6.5vw;width:80%;pointer-events:none}.film-credit{bottom:12%;text-shadow:0 2px 8px #000}.film-copy p{margin:0}.film-copy h2{font-size:42px}.film-credit>p{display:none}.film-credit>span{display:none}@media(max-width:700px){.story-copy.film-copy{top:13%;left:7vw;width:86vw;text-align:left}.film-copy h2{font-size:35px}.film-credit{bottom:16%}}

@media(max-width:700px){#character-camera{width:112vw;max-width:650px}}

/* The environment and film share one frame throughout the handoff. */
#forest-camera{position:absolute;z-index:8;opacity:0;pointer-events:none;will-change:opacity;max-width:none}
#character-settle{z-index:7}
#film-world{inset:0;transform:none;z-index:15;background:transparent}
#film-world:fullscreen{background:#071211}
#film-world:fullscreen video{width:100vw;height:100vh}
#film-world:fullscreen::after{content:'Press Esc to leave full screen';position:absolute;bottom:22px;right:24px;color:#bec5bb;font:12px var(--sans);pointer-events:none}
.film-credit{z-index:20;bottom:95px;text-align:center}
.film-credit>div{display:inline-flex;align-items:center;gap:24px;padding:14px 25px;background:#071211b0;backdrop-filter:blur(12px);border:1px solid #d8e5d11c;border-radius:40px}
.story-copy.film-copy{z-index:20;top:12%}
.story-copy.film-copy h2{font-size:36px}
.story-copy.film-copy p{font-size:13px}
@media(max-width:700px){
 #character-camera{width:112vw;max-width:650px}
 .story-copy,.story-copy[data-beat=direction],.story-copy[data-beat=pose],.story-copy[data-beat=trees],.story-copy[data-beat=deadfall]{top:12%}
 .story-copy h2{font-size:36px;margin:12px 0}
 .story-copy p{font-size:14px;line-height:1.5;max-width:340px;margin-bottom:12px}
 .film-credit{bottom:92px;left:5vw;right:5vw}
 .film-credit>div{gap:14px;row-gap:11px;padding:13px 18px;border-radius:15px;max-width:100%}
 .film-credit button,.film-credit a{font-size:12px}
 .story-copy.film-copy{top:14%}
}

@media(min-width:701px){.asset-visual{height:clamp(330px,45svh,520px)}.asset-list button{padding-top:16px;padding-bottom:16px}}

/* Give pose development and complete asset rotations enough scroll distance. */
#journey{height:5230svh}



.lighting-steps{list-style:none;margin:25px 0;padding:0;display:flex;flex-direction:column;gap:12px;color:#72827b;font-size:14px}.lighting-steps li{padding-left:17px;position:relative}.lighting-steps li:before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:currentColor}.lighting-steps li.lit{color:#c4cbbf}.lighting-steps li.active{color:var(--accent)}
@media(min-width:701px){.story-copy[data-beat=light]{left:auto;right:6.5vw;top:23%}}
@media(max-width:700px){.lighting-steps{flex-direction:row;flex-wrap:wrap;gap:9px 16px;font-size:12px;margin:14px 0}.story-copy[data-beat=light] .process-tag{font-size:10px}}

.asset-visual[data-asset=rock]:not(.input-mode) img{transform:scale(1.55)}

/* Frame-one surface breakdowns retain the full composition. */
.stroke-steps{list-style:none;display:flex;gap:24px;padding:0;margin:25px 0;color:#a8b8ad;font-size:14px}
.stroke-steps li{padding:8px 0;border-bottom:1px solid #d8e5d12c}
.stroke-steps li.active{color:var(--accent);border-color:currentColor}
.header-actions>.about-link{display:inline-flex;white-space:nowrap}
.story-copy[data-beat=light]::before{content:"";position:absolute;inset:-20px -26px;z-index:-1;background:#071211df;filter:blur(18px);border-radius:24px;opacity:var(--clay-amount,0)}
.stage-bottom{text-shadow:0 1px 5px #071211,0 0 10px #071211}
.chapter-nav{background:rgb(7 18 17 / calc(var(--clay-amount,0)*.9));box-shadow:0 0 22px 16px rgb(7 18 17 / calc(var(--clay-amount,0)*.9))}
@media(min-width:701px){.story-copy[data-beat=strokes]{left:auto;right:6.5vw;top:26%}}
@media(max-width:700px){.site-header{padding-left:5vw;padding-right:5vw;gap:10px}.header-actions{gap:14px}.header-actions>.about-link{font-size:13px}.stroke-steps{margin:14px 0;gap:20px}.story-copy[data-beat=strokes] .process-tag{font-size:10px}}

/* The draggable reveal shares the contained opening image's exact 16:9 bounds. */
.opening-compare-frame{position:absolute;left:50%;top:50%;width:min(100%,177.777778svh);aspect-ratio:16/9;transform:translate(-50%,-50%);z-index:1;--reveal:48%;pointer-events:none}
#opening-clay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;clip-path:inset(0 calc(100% - var(--reveal)) 0 0);pointer-events:none}
#opening-reveal-control{position:absolute;inset:0;cursor:ew-resize;touch-action:pan-y;pointer-events:auto;outline:none}
.reveal-handle{position:absolute;left:clamp(22px,var(--reveal),calc(100% - 22px));top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 8px #ead89555;pointer-events:none}
.reveal-handle>span{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--accent);background:#0b1a16e8;border:1px solid var(--accent);font:24px var(--sans);box-shadow:0 3px 20px #0006}
#opening-reveal-control:focus-visible~.reveal-handle>span{outline:2px solid var(--accent);outline-offset:4px}
.opening-compare-frame:not([data-ready]) .reveal-handle{visibility:hidden}
.opening-world>.concept-shade{z-index:2;pointer-events:none}.reveal-handle{z-index:3}.opening-compare-frame{z-index:3}
.concept-world,.atmosphere,.scene-vignette,#character-camera,.direction-palette{pointer-events:none}
@media(max-width:700px){.reveal-handle>span{width:40px;height:40px}}
.opening-compare-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:inset(0 calc(100% - var(--reveal)) 0 0);background:linear-gradient(90deg,transparent 52%,#0712119e)}
.intro-watch{display:flex;width:fit-content;align-items:center;gap:14px;margin-top:20px;font-size:14px;color:var(--paper)}.intro-watch span{color:var(--accent)}.intro-watch:hover{color:var(--accent)}@media(max-width:700px){.intro-watch{font-size:13px;margin-top:17px;gap:10px}}
.header-actions>.watch-link{display:inline-flex;align-items:center;white-space:nowrap}.header-actions>.watch-link[hidden]{display:none}@media(max-width:700px){.header-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:8px}.wordmark{flex-shrink:0}.header-actions>.watch-link{font-size:12px}}

/* Reduce large filtered layers on touch devices without altering the scene path. */
.compact-media .story-copy{filter:none;will-change:auto}.compact-media .film-credit>div,.compact-media .asset-dialog::backdrop{backdrop-filter:none}.compact-media .opening-world,.compact-media .concept-world{will-change:transform}

/* In-place film excursions preserve the document's native scroll position. */
html{scrollbar-gutter:stable}
html.watching-shot,html.watching-shot body{overflow:hidden}
/* overflow:hidden changes sticky containment; keep the entire scene in the
   viewport while the document is locked, including during the return move. */
html.watching-shot #screen{position:fixed;inset:0;width:auto;height:100svh}
/* Focused controls must not scroll the clipped stage's contents internally. */
#screen{overflow:clip}
#shot-frame{position:absolute;inset:0;z-index:14;background:#071211;opacity:0;visibility:hidden;pointer-events:none}
#shot-frame img{width:100%;height:100%;object-fit:contain}
html:is(.watching-shot,.watch-restoring) :is(.site-header,.chapter-nav,#story-copies,.intro-title,.direction-palette,.stage-bottom){transition:opacity .22s ease}
.watching-shot .site-header,.watching-shot .chapter-nav,.watching-shot #story-copies,.watching-shot .intro-title,.watching-shot .direction-palette,.watching-shot .stage-bottom{opacity:0!important;pointer-events:none!important}
.watching-shot #film-assets,.watching-shot .film-credit a{display:none}
.film-credit [hidden]{display:none!important}
.film-credit button:disabled{opacity:.35;cursor:default}
#film-status{font-size:12px;max-width:220px;color:var(--accent)}
#return-film{color:var(--accent)}
@media(max-width:700px){.watching-shot .film-credit{bottom:max(28px,env(safe-area-inset-bottom));}.watching-shot .film-credit>div{gap:12px}}

#orientation-note{display:none;position:fixed;z-index:35;bottom:max(9px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);align-items:center;gap:7px;padding:5px 13px 5px 8px;border:1px solid #ead89533;border-radius:30px;background:#071211ed;color:var(--accent);font:11px/1.3 var(--sans);white-space:nowrap;pointer-events:none}
#orientation-note svg{flex:none}
@media (orientation:portrait) and (max-width:700px),(orientation:portrait) and (pointer:coarse){
 #orientation-note{display:flex}
 .chapter-nav{bottom:65px}
 .stage-bottom{bottom:130px}
 .film-credit{bottom:136px}
 .watching-shot .film-credit{bottom:70px}
}
/* Short landscape viewports need a compact layout as well as smaller media. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1100px){
 .site-header{padding:12px 4vw}
 .wordmark{font-size:27px}
 #chapter-label{display:none}
 .header-actions{gap:18px;font-size:11px}
 .header-actions button,.header-actions>.about-link,.header-actions>.watch-link{font-size:11px}
 .intro-title{left:59vw;right:4vw;top:18%}
 .intro-title .eyebrow{font-size:8px;line-height:1.45;max-width:320px;letter-spacing:.06em}
 .intro-title h1{font-size:clamp(44px,6.5vw,68px);line-height:.92;margin:10px 0}
 .intro-title>p{font-size:12px;line-height:1.4;margin-bottom:10px}
 .intro-title .begin{font-size:9px;line-height:1.4;gap:9px;margin-top:7px}
 .intro-title .begin span{font-size:21px}
 .intro-watch{font-size:11px;margin-top:9px;gap:10px}
 .story-copy,.story-copy[data-beat=direction],.story-copy[data-beat=pose],.story-copy[data-beat=trees],.story-copy[data-beat=deadfall],.story-copy[data-beat=strokes],.story-copy[data-beat=light]{top:21%;width:33vw;max-width:350px}
 .story-copy h2{font-size:32px;line-height:1.04;margin:9px 0 12px}
 .story-copy p{font-size:12px;line-height:1.5;margin-bottom:12px}
 .story-copy .eyebrow,.story-copy .process-tag{font-size:9px;line-height:1.45}
 .inline-inspect{font-size:11px;padding-bottom:5px}
 .direction-palette{top:auto;bottom:25%;width:180px}
 .performance-readout{margin:12px 0;font-size:10px}
 .performance-readout>div{width:135px}
 .lighting-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:10px;margin:12px 0}
 .stroke-steps{font-size:11px;margin:12px 0;gap:16px}
 .stage-bottom{bottom:57px;font-size:9px}
 #scroll-cue{font-size:9px}
 .chapter-nav{bottom:14px;padding-top:12px}
 .chapter-nav>a{font-size:10px}
 .chapter-nav>a:before{top:-15px}
 .film-credit{bottom:58px}
 .film-credit>div{gap:17px;padding:10px 18px}
 .film-credit button,.film-credit a{font-size:11px}
 .watching-shot .film-credit{bottom:14px}
 .story-copy.film-copy{top:17%;width:80%}
 .story-copy.film-copy h2{font-size:29px}
 .story-copy.film-copy p{font-size:11px}
}
@media (orientation:landscape) and (max-height:600px) and (max-width:1100px){
 .site-header{background:linear-gradient(#071211a8,transparent)}
}
@media (orientation:landscape) and (max-height:400px) and (max-width:1100px){
 .intro-title{top:16%}
 .intro-title h1{font-size:clamp(40px,6vw,56px);margin:7px 0}
 .intro-title>p{font-size:11px;line-height:1.35;margin-bottom:7px}
 .intro-watch{margin-top:7px}
 .story-copy,.story-copy[data-beat=direction],.story-copy[data-beat=pose],.story-copy[data-beat=trees],.story-copy[data-beat=deadfall],.story-copy[data-beat=strokes],.story-copy[data-beat=light]{top:20%}
 .story-copy h2{font-size:28px;margin:7px 0 8px}
 .story-copy p{font-size:11.5px;line-height:1.42;margin-bottom:8px}
 .story-copy .process-tag{display:none}
 .performance-readout{margin:9px 0}
 .stroke-steps{margin:9px 0}
 .stroke-steps li{padding:5px 0}
}