:root{--ink:#f4f3fc;--sub:#b9bbd2;--dark:#0d1020;--yellow:#ffd246;--line:#ffffff24;--pad:clamp(22px,5.1vw,88px);font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--dark);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}
[hidden]{display:none!important}html{scroll-behavior:smooth}html.still{scroll-behavior:auto}
.skip{position:fixed;top:12px;left:12px;background:var(--yellow);color:#121326;padding:12px;transform:translateY(-160%);z-index:5}.skip:focus{transform:none}
.top{min-height:76px;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px var(--pad);border-bottom:1px solid var(--line);position:relative;z-index:2}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;white-space:nowrap;letter-spacing:-.04em}.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:#101123;font-size:.72rem;letter-spacing:-.03em}
.top nav{display:flex;gap:clamp(16px,3vw,44px);color:var(--sub);font-size:.8rem}.top nav a:hover,.site-foot a:hover{color:var(--yellow)}
.book-link{font-size:.77rem;border:1px solid var(--line);padding:10px 13px;border-radius:30px;white-space:nowrap}.book-link span{margin-left:7px;color:var(--yellow)}
.hero{min-height:min(850px,calc(100svh - 76px));position:relative;isolation:isolate;display:grid;grid-template-columns:.89fr 1.11fr;grid-template-rows:1fr auto;align-items:center;padding:clamp(28px,5vh,62px) var(--pad) 0;background:radial-gradient(ellipse at 69% 48%,#22224a 0,#14172d 47%,#0d1020 79%);overflow:hidden}
.hero-copy{z-index:1;position:relative;padding:25px 0 26px;pointer-events:none}.hero-copy a{pointer-events:auto}
.eyebrow,.scene-top,.scene-bottom,.hero-footer,.path-top,.portrait figcaption,.site-foot>span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.68rem;font-weight:500;letter-spacing:.105em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:9px;line-height:1.5;margin:0 0 26px}.dot{display:inline-block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--yellow)}
h1,h2,h3,p,figure{margin:0}
h1{font-size:clamp(82px,12.3vw,193px);letter-spacing:-.097em;line-height:.77;font-weight:850;margin-left:-.065em}h1 span{color:var(--yellow)}
.intro{margin-top:clamp(25px,4vh,42px);font-size:clamp(.9rem,1.3vw,1.18rem);line-height:1.5;color:var(--sub)}
.quick{display:flex;gap:9px;margin-top:22px}.quick a{font-size:.8rem;display:inline-flex;align-items:center;gap:20px;padding:10px 13px;border:1px solid #ffffff48;border-radius:40px}.quick a:hover{background:var(--yellow);color:var(--dark);border-color:var(--yellow)}
.scene{width:110%;margin-left:-4%;height:clamp(415px,65vh,710px);position:relative;display:grid;place-items:center;isolation:isolate;background:radial-gradient(ellipse at 57% 48%,#3939a15c,transparent 65%);border:1px solid #8888ff24}
.scene canvas,.poster{position:absolute;inset:0;width:100%;height:100%}.poster{object-fit:contain;object-position:50% 50%;padding:5%}.scene canvas{opacity:0}.scene.live canvas{opacity:1}.scene.live .poster{visibility:hidden}
.scene::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#8384d01a 1px,transparent 1px),linear-gradient(90deg,#8384d01a 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse,#000,transparent 79%)}
.orbit{position:absolute;pointer-events:none;width:75%;aspect-ratio:1.1;border-radius:50%;border:1px solid #a3aaff2c;transform:rotate(-24deg) scaleY(.57)}.orbit-2{width:90%;transform:rotate(32deg) scaleY(.65);border-style:dashed}
.reticle{position:absolute;width:10px;height:10px;border:solid #c3c9ff88;z-index:1;pointer-events:none}.tl{top:-1px;left:-1px;border-width:1px 0 0 1px}.tr{top:-1px;right:-1px;border-width:1px 1px 0 0}.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px}.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.scene-top,.scene-bottom{position:absolute;display:flex;justify-content:space-between;align-items:center;left:16px;right:16px;color:#c0c6ea;pointer-events:none}.scene-top{top:17px}.scene-bottom{bottom:16px}.scene-bottom button,.hero-footer button{border:0;background:transparent;cursor:pointer;padding:7px 0;color:var(--ink);pointer-events:auto;letter-spacing:inherit;text-transform:inherit;font:inherit}.scene-bottom button span{color:var(--yellow)}.scene-bottom button:hover,.hero-footer button:hover{color:var(--yellow)}
.hero-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;min-height:68px;border-top:1px solid var(--line);color:var(--sub);z-index:1}.hero-footer a{display:flex;align-items:center;gap:10px}.scroll-icon{display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);width:26px;height:26px;color:var(--yellow)}
.work{padding:clamp(55px,9vw,130px) var(--pad) clamp(45px,6vw,85px);background:#eeedf5;color:#14162a}
.section-head{display:grid;grid-template-columns:1fr 2fr;align-items:start;margin-bottom:clamp(28px,5vw,62px)}.work .dot{background:#4b48a5}
h2{font-size:clamp(52px,8vw,114px);line-height:.86;letter-spacing:-.086em;font-weight:820}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:12px}.path{border-radius:4px;padding:clamp(22px,4vw,55px);min-height:clamp(280px,33vw,445px);display:flex;flex-direction:column;overflow:hidden}.therapy{background:#dcdaf5}.hair{background:#ffd246}.path-top{display:flex;justify-content:space-between;align-items:center}.path-top span:last-child{font-size:clamp(24px,5vw,58px);line-height:.9;transition:transform .65s ease}.path:hover .path-top span:last-child{transform:rotate(60deg)}
.path h3{font-size:clamp(48px,8vw,104px);letter-spacing:-.085em;line-height:.85;margin-top:auto;padding-top:35px}.path p{line-height:1.5;max-width:28ch;margin-top:15px}.path-links{display:flex;align-items:center;gap:13px 19px;flex-wrap:wrap;margin-top:23px}
.pill{display:inline-flex;gap:18px;align-items:center;border-radius:40px;background:#14162a;color:#fff;padding:13px 16px;font-size:.83rem;font-weight:700}.pill:hover{background:#3b4075}.profile,.text-link{font-size:.84rem;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.boundary{margin-top:20px;color:#41445f;font-size:.85rem}
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,7vw,100px);align-items:center;padding:clamp(56px,9vw,132px) var(--pad);background:#171932}.portrait{position:relative;min-width:0;aspect-ratio:1.1;overflow:hidden;background:#2a2b4a}.portrait img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 36%}.portrait-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(80px,24vw,330px);font-weight:850;letter-spacing:-.12em;background:radial-gradient(ellipse at 40% 40%,#5658a4,#262746);color:#b5b8f2}.portrait figcaption{position:absolute;bottom:0;left:0;background:#15162c;padding:10px 12px}
.about-copy>p:not(.eyebrow){color:var(--sub);max-width:37ch;line-height:1.65;margin:23px 0}.text-link:hover{color:var(--yellow)}
.memoir{padding:clamp(54px,8vw,120px) var(--pad);background:#2e3287;display:flex;justify-content:space-between;align-items:end;gap:28px}.memoir .pill{background:var(--yellow);color:#16172c;white-space:nowrap}.memoir .pill:hover{background:#ffe797}
.site-foot{padding:26px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:25px}.site-foot>div{display:flex;gap:12px 22px;flex-wrap:wrap;color:var(--sub);font-size:.78rem}.site-foot>span{white-space:nowrap;color:var(--sub)}
:target{scroll-margin-top:12px}
html.still *{transition:none!important}
@media(max-width:780px){.top{min-height:61px;gap:9px 14px;flex-wrap:wrap}.top nav{order:3;width:100%;justify-content:space-between;padding-top:5px}.hero{min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto auto;padding-top:27px}.hero-copy{padding:6px 0 4px}.hero .eyebrow{margin-bottom:18px}h1{font-size:clamp(76px,17vw,133px)}.intro{margin-top:23px}.quick{margin-top:15px}.scene{width:100%;margin:15px 0 12px;height:clamp(270px,80vw,430px)}.scene-top,.scene-bottom{left:10px;right:10px}.hero-footer{min-height:55px}.section-head{grid-template-columns:1fr}.section-head .eyebrow{margin-bottom:15px}.about{gap:32px}.site-foot{flex-wrap:wrap}}
@media(max-width:550px){.paths,.about{grid-template-columns:1fr}.memoir{display:grid}.memoir .pill{justify-self:start}.site-foot>div{order:3;width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Opening sequence. The original photo is projected onto two independently moving plates. */
.split-hero{background:#0a0b0f;color:#f9f6ed}
.film-stage{
  --gate:0%;--camera-scale:1;--camera-x:0px;--camera-y:0px;--title-rise:0px;
  --aperture:0;--progress:0;--intertitle:0;
  position:relative;isolation:isolate;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  min-height:clamp(610px,calc(100svh - 76px),940px);padding:24px var(--pad) 0;overflow:hidden;
  background:radial-gradient(ellipse at 50% 58%,#22262b 0%,#0a0b0f 70%);
}
.split-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px;z-index:3;pointer-events:none}
.split-heading .eyebrow{order:2;margin:0 0 .2em;color:#c3c1b6}
.split-heading h1{font-size:clamp(39px,7.8vw,122px);letter-spacing:-.088em;line-height:.8;margin:0}
.split-heading h1 span{color:var(--yellow)}
.split-frame{
  position:relative;isolation:isolate;overflow:hidden;display:grid;
  grid-template-columns:1fr 1.5fr 1fr;grid-template-rows:1fr auto auto .86fr;
  justify-items:center;align-items:start;min-height:430px;background:#101115;
}
.split-visual,.film-plate,.film-grain,.film-frame{position:absolute;inset:0;pointer-events:none}
.film-plate{overflow:hidden;transform:translateX(var(--gate));will-change:transform}
.plate-therapy{clip-path:inset(0 50% 0 0);transform:translateX(calc(0% - var(--gate)));background:radial-gradient(ellipse at 65% 30%,#f3fff5,#acd3ca 64%,#77a6a4)}
.plate-hair{clip-path:inset(0 0 0 50%);background:radial-gradient(ellipse at 42% 24%,#fff5d8,#f0c778 68%,#c48a4b)}
.split-image{
  position:absolute;left:50%;bottom:-1%;height:94%;width:auto;max-width:none;
  transform:translate(calc(-50% + var(--camera-x)),var(--camera-y)) scale(var(--camera-scale));
  transform-origin:50% 40%;
  --portrait-edge:linear-gradient(90deg,transparent,#000 15%,#000 86%,transparent);
  mask-image:url(hero-portrait-mask.svg?v=4),var(--portrait-edge);
  mask-size:100% 100%;
  mask-repeat:no-repeat;
  mask-composite:intersect;
}
/* Keep the original lettering without projecting the photo's wall or shadows. */
.split-greeting{
  clip-path:inset(8% 59.5% 75% 24%);
  filter:contrast(4);
  mix-blend-mode:multiply;
  mask-image:var(--portrait-edge);
}
.film-grain{background:url(grain.svg);opacity:.15;mix-blend-mode:soft-light}
.film-frame{inset:12px;border:1px solid #fff7;opacity:.55;mask-image:linear-gradient(90deg,#000,transparent 17%,transparent 83%,#000)}
.split-caption,.split-action{position:relative;z-index:1;text-align:center}
.split-caption{grid-row:2;padding:13px 10px 4px;color:#0e1213}
.split-therapy,.split-action-therapy{grid-column:1}.split-hair,.split-action-hair{grid-column:3}
.split-index,.split-footer{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.68rem;letter-spacing:.095em;text-transform:uppercase}
.split-caption h2{font-size:clamp(37px,6.3vw,110px);line-height:.89;letter-spacing:-.085em;margin:6px 0 12px}
.split-caption p{font-size:clamp(.82rem,1.4vw,1.08rem);line-height:1.35;font-weight:600}
.split-action{grid-row:3;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:15px 8px 0;padding:12px 15px;min-height:44px;border:1px solid #121316;border-radius:24px;background:#eaf3e9;color:#101212;font-size:.79rem;font-weight:750;line-height:1.2}
.split-action-hair{background:#ffd580}
.split-action:hover,.split-action:focus-visible{background:#121316;color:#fff;outline-color:#fff}
.split-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;color:#c7c5bd}
.split-footer a{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.split-footer button{border:0;background:none;cursor:pointer;font:inherit;text-transform:inherit;padding:10px 0;white-space:nowrap}
.split-footer a:hover,.split-footer button:hover{color:var(--yellow)}
.film-progress{width:min(25vw,230px);height:1px;background:#f6f2e64a}
.film-progress span{display:block;width:100%;height:100%;transform:scaleX(var(--progress));transform-origin:left;background:var(--yellow)}
.work{background:#151819;color:#f4f1e9}
.work .dot{background:#b3d7c8}
.path{color:#101615}.therapy{background:#aebfb4}.hair{background:#eac183}
.boundary{color:#c7ccc8}
.film-enabled:not(.still) .path.hair.film-seen{animation-delay:.09s}
@keyframes plate-left{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 50% 0 0)}}
@keyframes plate-right{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 50%)}}
@keyframes title-in{from{opacity:0;translate:0 25px;clip-path:inset(0 0 80%)}to{opacity:1;translate:0;clip-path:inset(0)}}
.film-enabled:not(.still) .plate-therapy{animation:plate-left 1.25s cubic-bezier(.22,.76,.27,1) both}
.film-enabled:not(.still) .plate-hair{animation:plate-right 1.25s .10s cubic-bezier(.22,.76,.27,1) both}
.film-enabled:not(.still) .split-heading{animation:title-in .78s .23s cubic-bezier(.22,.72,.25,1) both;transform:translateY(var(--title-rise))}
.film-enabled:not(.still) .split-caption{animation:title-in .7s .45s cubic-bezier(.22,.72,.25,1) both}
.film-enabled:not(.still) .split-caption.split-hair{animation-delay:.58s}
.film-enabled:not(.still) .split-frame:focus-within .split-caption{animation:none}
@media(min-height:670px){
  .film-enabled:not(.still) .split-hero{height:180svh}
  .film-enabled:not(.still) .film-stage{position:sticky;top:0;height:calc(100svh - 76px);min-height:0}
}
.still .film-stage{--gate:0%!important;--camera-scale:1!important;--camera-x:0px!important;--camera-y:0px!important;--aperture:0!important;--intertitle:0!important;}
@media(max-width:780px){
  .film-stage{min-height:620px;padding-top:22px}
  .split-heading{display:block}
  .split-heading h1{font-size:clamp(41px,10vw,74px)}
  .split-heading .eyebrow{margin-bottom:12px}
  .split-frame{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr auto;min-height:400px}
  .split-hair,.split-action-hair{grid-column:2}
  .split-caption{grid-row:1;color:#121515}
  .split-caption h2{margin:5px 0}
  .split-action{padding:8px;margin:0 5px 17px;font-size:.72rem}
  .split-image{height:78%;bottom:5%;--portrait-edge:linear-gradient(0deg,transparent,#000 15%,#000 92%,transparent)}
  .film-frame{inset:7px}
}
@media(max-width:380px){.split-index{letter-spacing:.02em;font-size:.61rem}.split-action{font-size:.69rem}}

.film-intertitle{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:12px;color:#fcf1df;text-align:center;opacity:var(--intertitle);transform:translateY(calc(17px * (1 - var(--intertitle))));pointer-events:none}
.film-intertitle span{font:500 .67rem ui-monospace,monospace;letter-spacing:.2em;color:#e7c98e}
.film-intertitle strong{font-size:clamp(22px,5.15vw,80px);letter-spacing:-.085em;line-height:.91}
.split-caption{color:color-mix(in srgb,#0e1213,#fff7e6 calc(var(--aperture) * 100%));text-shadow:0 1px 18px rgb(0 0 0 / var(--aperture))}
@media(max-width:780px){
  .film-intertitle{padding-top:24px}
  .film-intertitle strong{font-size:clamp(19px,5vw,32px)}
  .split-caption{color:#101513;text-shadow:none;background:radial-gradient(ellipse at center, #fff6dfbf, transparent 75%)}
}

@media(max-width:780px) and (min-height:670px){.film-enabled:not(.still) .film-stage{height:calc(100svh - 95px)}}

/* The two colors from the portrait lead into the rest of the page. */
[data-chapter]{--chapter-enter:1;--chapter-travel:.5}
.work{padding:0;background:#0a0b0f}
.work-stage{padding:clamp(43px,6.5vw,90px) var(--pad) clamp(35px,5vw,76px)}
.work .section-head{margin-bottom:clamp(20px,4vw,50px)}
.work .section-head h2{font-size:clamp(52px,7.3vw,104px)}
.paths{position:relative}
.paths::before{content:"";position:absolute;z-index:2;left:50%;top:-12px;bottom:-12px;width:1px;background:linear-gradient(transparent,#f5e2b386,transparent);pointer-events:none}
.path{position:relative;isolation:isolate;min-height:clamp(270px,29vw,405px)}
.path-art{position:absolute;z-index:-1;inset:-20% -16% auto auto;width:112%;height:122%;pointer-events:none;opacity:.28;color:#37574d}
.hair .path-art{color:#744818;inset:-25% -7% auto auto}
.therapy{background:radial-gradient(ellipse at 75% 0,#d0e0d5,#a4b8ac 72%)}
.hair{background:radial-gradient(ellipse at 80% 5%,#ffe4a7,#d9a762 78%)}
.about{background:radial-gradient(ellipse at 30% 50%,#263c38,#101718 70%)}
.about .portrait-fallback{background:radial-gradient(ellipse at 40% 40%,#526960,#222f2d)}
.about .portrait img{object-position:center 39%;filter:grayscale(1)}
.memoir{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(365px,56vw,680px);align-items:center;background:#13191c}
.memoir-light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#101519e6,transparent 82%),radial-gradient(ellipse at 78% 40%,#d3915d,#744c37 26%,#213534 53%,#12191c 74%)}
.memoir-light::before,.memoir-light::after{content:"";position:absolute;inset:10% 8%;border:1px solid #ffe1ad56;mask-image:linear-gradient(90deg,transparent 32%,#000)}
.memoir-light::after{inset:0;background:url(grain.svg);border:0;mask-image:none;opacity:.18;mix-blend-mode:soft-light}
.memoir .pill{background:#ffe3a4}
.chapters-enabled:not(.still) .work .section-head,
.chapters-enabled:not(.still) .about-copy,
.chapters-enabled:not(.still) .memoir>div:not(.memoir-light){transform:translateY(calc(28px * (1 - var(--chapter-enter))))}
.chapters-enabled:not(.still) .path-art{transform:translateY(calc((.5 - var(--chapter-travel)) * 175px)) rotate(calc((var(--chapter-travel) - .5) * 17deg))}
.chapters-enabled:not(.still) .hair .path-art{transform:translateY(calc((var(--chapter-travel) - .5) * 130px)) rotate(calc((.5 - var(--chapter-travel)) * 24deg))}
.chapters-enabled:not(.still) .about .portrait img{transform:scale(1.13) translateY(calc((var(--chapter-travel) - .5) * 11%))}
.chapters-enabled:not(.still) .about .portrait{clip-path:inset(calc(10% * (1 - var(--chapter-enter))) 0 0)}
.chapters-enabled:not(.still) .memoir-light{transform:scale(1.14) translateX(calc((var(--chapter-travel) - .5) * 8%))}
@media(min-width:781px) and (min-height:780px){
  .chapters-enabled:not(.still) .work{min-height:126svh}
  .chapters-enabled:not(.still) .work-stage{position:sticky;top:0}
  .chapters-enabled:not(.still) .therapy{transform:translateX(calc(19px * (1 - var(--chapter-enter))))}
  .chapters-enabled:not(.still) .hair{transform:translateX(calc(-19px * (1 - var(--chapter-enter))))}
}
@media(max-width:550px){.paths::before{display:none}.memoir{align-content:center}}

/* The portrait's opening becomes the entrance to the memoir. */
.world-frame{
  position:relative;isolation:isolate;overflow:hidden;min-height:clamp(410px,62vh,680px);
  color:#fff0d3;background:#262b29;display:grid;align-items:end;
}
.world-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#101413f7 0%,#101413b8 24%,#10141316 62%,transparent 78%),linear-gradient(90deg,#10141366,transparent 72%)}
.world-shade::after{content:"";position:absolute;inset:0;background:url(grain.svg);opacity:.2;mix-blend-mode:soft-light}
.world-copy{position:relative;z-index:1;padding:clamp(21px,4.6vw,68px);max-width:680px}
.world-copy .eyebrow{margin-bottom:17px;color:#ffdda4}
.world-copy h2{font-family:Georgia,serif;font-weight:500;font-size:clamp(47px,7.4vw,109px);letter-spacing:-.077em;line-height:.88;text-shadow:0 3px 28px #090d0d}
.world-copy .pill{margin-top:23px;background:#ffe1a0;color:#181b17}
.world-copy .pill:hover{background:#fff3d4}
@media(min-height:670px){
  .film-enabled:not(.still) .split-hero{height:475svh}
  .film-enabled:not(.still) .split-frame,.film-enabled:not(.still) .world-frame{grid-row:2;grid-column:1}
  .film-enabled:not(.still) .world-frame{
    min-height:0;z-index:2;clip-path:inset(0 var(--world-mask,50%));pointer-events:none;
  }
  .film-enabled:not(.still) .world-copy{opacity:var(--world-title,0);transform:translateY(calc(25px * (1 - var(--world-title,0))))}
  .film-enabled:not(.still) .world-frame:not([inert]) .pill{pointer-events:auto}
}
@media(max-width:780px){
  .world-copy h2{font-size:clamp(50px,10vw,78px)}
}
.still .film-stage{display:flex;flex-direction:column;overflow:visible;min-height:0}
.still .split-footer{order:1;position:sticky;top:0;z-index:4;background:#101014}
.still .world-frame{order:2}
@media(max-height:669px){
  .film-enabled .film-stage{display:flex;flex-direction:column;overflow:visible}
  .film-enabled .split-footer{order:1;position:sticky;top:0;z-index:4;background:#101014}
  .film-enabled .world-frame{order:2}
}
.film-stage{grid-template-columns:minmax(0,1fr)}
.film-progress{flex:0 1 min(25vw,230px);min-width:0}
@media(max-width:430px){.split-footer{gap:9px;font-size:.62rem;letter-spacing:.05em}}

/* Four memoir scenes share the portrait's projection frame. */
.world-description{font-size:clamp(.88rem,1.45vw,1.13rem);line-height:1.48;max-width:35ch;color:#fce8cd;margin-top:17px}
.world-copy .pill{margin-top:17px}
.world-route{display:flex;position:relative;align-items:center;justify-content:center;gap:clamp(9px,2vw,30px);padding:11px 0}
.world-route a{display:inline-block;padding:6px 0;white-space:nowrap}
.world-route a[aria-current=step]{color:var(--yellow)}
.world-route .film-progress{position:absolute;inset:auto 0 3px;width:100%}
@media(min-height:670px){
  .film-enabled:not(.still) .world-frame{opacity:var(--world-visible,0)}
}
@media(max-width:780px){
  .split-footer{display:grid;grid-template-columns:1fr auto;gap:1px 12px;padding:4px 0}
  .world-route{grid-row:2;grid-column:1/-1;justify-content:space-between;padding:0 0 8px}
  .world-route .film-progress{bottom:0}
  .world-description{margin-top:12px;max-width:28ch}
  .world-copy .eyebrow{margin-bottom:12px}
}

.stage-controls{display:flex;align-items:center;justify-content:flex-end;gap:clamp(8px,1.8vw,25px);white-space:nowrap}
#sound[aria-pressed=true]{color:var(--yellow)}
.paper-illustration{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;background:#a47d68;
}
.paper-illustration svg{width:100%;height:100%;display:block;overflow:hidden}
.paper-boat{transform-origin:320px 245px}
@keyframes paper-boat-rock{
  0%,100%{transform:translate(-9px,2px) rotate(-4deg)}
  25%{transform:translate(1px,-8px) rotate(2deg)}
  50%{transform:translate(11px,1px) rotate(5deg)}
  75%{transform:translate(1px,7px) rotate(-1deg)}
}
@keyframes paper-water{
  from{transform:translate(-19px,3px)}
  to{transform:translate(19px,-3px)}
}
@media(min-height:670px){
  .film-enabled:not(.still) #miami:not([inert]) .paper-boat{animation:paper-boat-rock 3.6s steps(5,end) infinite}
  .film-enabled:not(.still) #miami:not([inert]) .paper-wave{animation:paper-water 2.2s steps(8,end) infinite alternate}
  .film-enabled:not(.still) #miami:not([inert]) .paper-wave-back{animation-duration:2.9s;animation-direction:alternate-reverse}
  .film-enabled:not(.still) #miami:not([inert]) .paper-wave-front{animation-duration:1.7s}
}
@media(max-width:780px){
  .stage-controls{gap:10px}
}
@media(max-width:380px){
  .stage-controls{gap:7px}
  .split-footer{letter-spacing:0}
}
#sound::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.5em;border-radius:50%;border:1px solid currentColor;vertical-align:.12em}
#sound[data-playing]::before{background:currentColor;box-shadow:0 0 7px currentColor}

.paper-illustration::after{content:"";position:absolute;inset:0;background:url(grain.svg);opacity:.22;mix-blend-mode:multiply}
.paper-crossing{background:#a1c3ca}
.paper-boat,.paper-bird,.fold-clouds,.paper-wave-front{filter:drop-shadow(2px 5px 5px #29434c55)}
.paper-bird{transform-origin:555px 110px}
@keyframes folded-birds{from{transform:translate(-9px,4px) rotate(-2deg)}to{transform:translate(10px,-6px) rotate(2deg)}}
@keyframes folded-glow{from{opacity:.18}to{opacity:.68}}
@media(min-height:670px){
  .film-enabled:not(.still) .world-frame:not([inert]) .paper-bird{animation:folded-birds 2.3s steps(7,end) infinite alternate}
  .film-enabled:not(.still) .world-frame:not([inert]) .fold-city-lights{animation:folded-glow 2.4s steps(8,end) infinite alternate}
}
.split-footer #sound{border:1px solid #cfab65;border-radius:4px;color:#ffe1a5;padding:7px 8px}
.split-footer #sound:hover,.split-footer #sound[aria-pressed=true]{background:#ffe1a5;color:#171617}
@media(max-width:380px){.split-footer #sound{padding-inline:4px}.stage-controls{gap:5px}.split-footer{column-gap:7px}}

.fold-chair{transform-origin:0 0;filter:drop-shadow(1px 4px 3px #29262d75)}
.fold-chairs{transform:translate(46px,-25px) scale(1.13);transform-origin:330px 270px}
#new-york .world-shade{background:linear-gradient(90deg,#101413af,transparent 72%),linear-gradient(0deg,#101413d9, #10141328 35%,transparent 62%)}
@keyframes unfold-chair{
  0%{opacity:0;transform:scale(.82,.05) skewX(24deg)}
  15%{opacity:1}
  65%{transform:scale(.98,1.08) skewX(-3deg)}
  100%{transform:scale(1) skewX(0)}
}
@keyframes paper-chair-shadow{from{opacity:0}to{opacity:1}}
@media(min-height:670px){
  .film-enabled:not(.still) .paper-illustration svg{transform:scale(var(--world-zoom,1))}
  .film-enabled:not(.still) #new-york:not([inert]) .fold-chair-left{animation:unfold-chair 1.25s 1.7s steps(11,end) both}
  .film-enabled:not(.still) #new-york:not([inert]) .fold-chair-right{animation:unfold-chair 1.25s 1.95s steps(11,end) both}
  .film-enabled:not(.still) #new-york:not([inert]) .fold-chairs>ellipse{animation:paper-chair-shadow .8s 1.65s steps(6,end) both}
}
@media(max-width:780px){
  .film-enabled:not(.still) .paper-illustration svg{transform:none}
  .fold-chairs{transform:translateY(-84px)}
  .fold-room-floor{transform:translateY(-58px)}
  .fold-bird-placement{transform:translate(-131px,20px) scale(.75);transform-origin:330px 110px}
  .fold-boat-placement{transform:translateX(5px) scale(.64);transform-origin:330px 270px}
  .world-shade{background:linear-gradient(0deg,#101413f7 1%,#101413d2 22%,#10141328 55%,transparent 73%)}
}

.calle-doorway{background:#1e2323}
.calle-palm{transform-origin:593px 418px}
@keyframes calle-cloud-drift{from{transform:translateX(-6px)}to{transform:translateX(9px)}}
@keyframes calle-water-shimmer{from{transform:translateX(-8px);opacity:.62}to{transform:translateX(8px);opacity:1}}
@keyframes calle-reflection-shimmer{from{transform:translateX(-4px);opacity:.34}to{transform:translateX(6px);opacity:.58}}
@keyframes calle-sunset-glow{from{opacity:.72}to{opacity:1}}
@keyframes calle-palm-breeze{from{transform:rotate(-2.1deg)}to{transform:rotate(2.1deg)}}
@media(min-height:670px){
  .film-enabled:not(.still) #calle-6:not([inert]) .calle-cloud{animation:calle-cloud-drift 8s steps(14,end) infinite alternate}
  .film-enabled:not(.still) #calle-6:not([inert]) .calle-ripples{animation:calle-water-shimmer 2.9s steps(8,end) infinite alternate}
  .film-enabled:not(.still) #calle-6:not([inert]) .calle-reflection{animation:calle-reflection-shimmer 2.4s steps(9,end) infinite alternate}
  .film-enabled:not(.still) #calle-6:not([inert]) :is(.calle-sun-halo,.calle-floor-light){animation:calle-sunset-glow 4s steps(12,end) infinite alternate}
  .film-enabled:not(.still) #calle-6:not([inert]) .calle-palm{animation:calle-palm-breeze 3.5s steps(10,end) infinite alternate}
}

.havana-film,.havana-film :is(img,video){position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.havana-film{background:#100e0e}
.havana-film :is(img,video){object-fit:cover;object-position:50% 48%}
.havana-film video{visibility:hidden}
.havana-film.is-playing video{visibility:visible}
#havana .world-shade{background:linear-gradient(0deg,#100e0ef5,transparent 43%),linear-gradient(90deg,#100e0e9c,transparent 55%)}
@media(max-width:780px){#havana .world-shade{background:linear-gradient(0deg,#100e0ef7,#100e0e77 28%,transparent 54%)}}

/* The same sheet crosses the lens and settles into the East River. */
.river-flight{display:none}
@media(min-height:670px){
  .film-enabled:not(.still) .river-flight:not([hidden]){
    display:block;grid-area:2/1;position:relative;z-index:3;
    min-width:0;min-height:0;overflow:hidden;pointer-events:none;isolation:isolate;
  }
  .river-flight svg{position:absolute;inset:0;width:100%;height:100%;display:block}
  .river-flight::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:url(grain.svg);opacity:.24;mix-blend-mode:soft-light;
  }
  .river-city{opacity:var(--river-reveal,0)}
  .river-fold-dusk{opacity:var(--river-dusk,0)}
  .river-bridge{opacity:var(--river-bridge,0)}
  .river-tower{
    transform-origin:center bottom;transform-box:fill-box;
    transform:scaleY(var(--tower-fold,0)) skewX(calc((1 - var(--tower-fold,0)) * -17deg));
    filter:drop-shadow(4px 1px 1px #27364c65);
  }
  .film-enabled:not(.still) #miami .paper-crossing svg{
    transform-origin:48% 66%;
    transform:translateY(calc(-11% * var(--boat-dive,0))) scale(calc(1 + .42 * var(--boat-dive,0)));
  }
  .film-enabled:not(.still) #miami .fold-boat-placement{
    translate:calc(20px * var(--boat-dive,0)) calc(-9px * var(--boat-dive,0));
  }
  .film-enabled:not(.still) #miami .world-copy{
    opacity:calc(var(--world-title,0) * (1 - var(--boat-dive,0)));
  }
}

/* A small neon shop sign comes to life in the New York window. */
.fold-neon-tube{
  filter:drop-shadow(0 0 1.4px #ffe0ab) drop-shadow(0 0 3px #ed8c6d);
}
@keyframes fold-neon-ignite{
  0%,25%,49%{opacity:.18}
  22%,44%,68%,100%{opacity:1}
}
@keyframes fold-neon-upper-snip{
  0%,100%{transform:rotate(0)}
  52%{transform:rotate(19deg)}
}
@keyframes fold-neon-lower-snip{
  0%,100%{transform:rotate(0)}
  52%{transform:rotate(-19deg)}
}
@media(min-height:670px) and (prefers-reduced-motion:no-preference){
  .film-enabled:not(.still) #new-york:not([inert]) .fold-neon-tube{animation:fold-neon-ignite .8s 1.7s both}
  .film-enabled:not(.still) #new-york:not([inert]) .fold-neon-upper{animation:fold-neon-upper-snip .48s 2.48s ease-in-out}
  .film-enabled:not(.still) #new-york:not([inert]) .fold-neon-lower{animation:fold-neon-lower-snip .48s 2.48s ease-in-out}
}
@media(max-width:780px){
  .fold-neon-sign{transform:translateY(-44px)}
}