:root{color-scheme:dark;--ink:#f1eee4;--sage:#b8cda9;--brass:#dfba72;--bg:#070c09;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--ink)}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--brass);outline-offset:6px}[hidden]{display:none!important}.entry{min-height:100svh;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}.frames,.shade,.grain{position:absolute;inset:0;z-index:-1;pointer-events:none}.frame{position:absolute;inset:-3%;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity .5s ease;animation:drift 19s ease-out both}.frame.active{opacity:1}.frame[data-scene=forest]{background-image:url('/entry/assets/forest.webp')}.frame[data-scene=coast]{background-image:url('/entry/assets/coast.webp')}.shade{background:linear-gradient(180deg,rgba(3,10,7,.55),rgba(3,10,7,.2) 40%,rgba(3,10,7,.65)),linear-gradient(90deg,rgba(3,10,7,.2),transparent,rgba(3,10,7,.2));transition:background 1s}.grain{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.entry-header,.entry-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:32px 4.8vw;position:relative;z-index:2}.signature{font-size:15px;line-height:1.5;letter-spacing:.02em}.signature span{display:block;font-family:monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:.65;margin-top:5px}.quiet-button{background:transparent;border:0;color:var(--ink);padding:12px 0;font-size:13px;display:inline-flex;gap:14px;align-items:center;min-height:44px}.quiet-button:hover{color:var(--sage)}.cinema{display:grid;place-items:center;min-height:60svh;padding:24px 7vw}.words{font-family:'Iowan Old Style','Palatino Linotype',Georgia,serif;text-align:center;font-size:clamp(38px,6.3vw,98px);line-height:1.1;letter-spacing:-.045em;text-shadow:0 3px 30px #0008;max-width:1100px}.words .line{display:block}.words .word{display:inline-block;animation:arrive .2s ease-out both}.words .accent{color:var(--sage);font-style:italic}.words.but{font-style:italic;font-weight:600;font-size:clamp(76px,13vw,194px);letter-spacing:-.05em;transform:scale(var(--pulse,1));color:var(--ink)}.words.but.alt{color:var(--brass)}.words.closing{font-size:clamp(32px,4.8vw,74px);max-width:980px;line-height:1.16}.entry-footer{font-family:monospace;text-transform:uppercase;font-size:10px;letter-spacing:.16em;opacity:.7;padding-bottom:30px}.progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff15}.progress span{display:block;background:var(--brass);height:100%;width:0}.gate{align-self:center;justify-self:center;width:min(470px,calc(100% - 48px));padding:40px 0 30px;animation:arrive .7s ease both}.eyebrow{font-family:monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin:0 0 22px}.gate h1{font-family:'Iowan Old Style',Georgia,serif;font-size:clamp(52px,6vw,80px);line-height:1.06;letter-spacing:-.055em;font-weight:400;margin:0 0 22px}.gate h1,.gate h1 em{color:#fff}.gate-intro{color:#d1d8cb;font-size:17px;line-height:1.6;margin:0 0 36px}form label{display:block;font-size:13px;margin-bottom:10px}.password-field{display:flex;border:1px solid #819078;background:#09140cd9}.password-field:focus-within{border-color:var(--sage)}input{min-width:0;width:100%;padding:17px 18px;background:none;border:none;color:var(--ink);font-size:18px;outline:none!important}.password-field button{padding:12px 16px;background:none;border:0;color:var(--sage);font-size:12px}.enter-button{margin-top:16px;width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border:1px solid var(--sage);background:var(--sage);color:#122016;font-weight:600;min-height:58px}.enter-button:hover{background:#d0dfc5}.enter-button:disabled{opacity:.65;cursor:wait}#feedback{font-size:13px;line-height:1.5;min-height:20px;color:#f0c395;margin:12px 0 6px}.entry.gated .shade{background:rgba(3,12,7,.85)}.entry.gated .frame{filter:blur(3px)}.entry.gated #duration{display:none}.entry.gated .progress{display:none}.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.noscript-note{position:fixed;bottom:0;font-size:12px;padding:16px}@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.12) translateY(-1%)}}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.entry-header{padding:22px 24px}.signature{font-size:12px}.signature span{font-size:8px;letter-spacing:.08em;max-width:190px}.quiet-button{font-size:12px}.cinema{padding:25px}.words{font-size:clamp(36px,9.2vw,56px)}.words.closing{font-size:clamp(30px,8.1vw,44px)}.entry-footer{padding:24px;letter-spacing:.08em;font-size:9px}.entry-footer #duration{max-width:110px;text-align:right;line-height:1.6}.gate{padding-block:30px}.gate-intro{font-size:16px}}@media(prefers-reduced-motion:reduce){.frame{animation:none;transition:none}.words .word,.gate{animation:none}.words.but{transform:none}}

.frame[data-scene=mountains]{background-image:url('/entry/assets/mountains.webp')}
.frame[data-scene=waterfall]{background-image:url('/entry/assets/waterfall.webp')}
.frame[data-scene=dunes]{background-image:url('/entry/assets/dunes.webp')}
.frame{animation-duration:28s;transition:opacity .16s ease}
.entry.gated .entry-footer{visibility:hidden}
.gate{width:min(410px,calc(100% - 48px))}
.gate h1{margin-bottom:32px}
@media(prefers-reduced-motion:reduce){.frame{transition:none;animation:none}}

.frame[data-scene=antarctic]{background-image:url('/entry/assets/antarctic.webp')}

.begin-screen{display:grid;place-items:center;min-height:60svh;padding:24px}
#begin{border:1px solid #bacda080;background:#07140b80;backdrop-filter:blur(8px);color:var(--ink);display:flex;align-items:center;gap:48px;min-height:64px;padding:18px 28px;font-size:17px;letter-spacing:.02em}
#begin:hover{background:#1b2c20;border-color:var(--sage)}#begin:disabled{opacity:.65}

.typed-word{display:inline-block;animation:word-reveal .3s cubic-bezier(.2,.65,.3,1) both}
@keyframes word-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.gate{width:min(400px,calc(100% - 48px));padding:30px 0}
.gate h1{font-size:clamp(46px,5vw,66px);line-height:1.03;letter-spacing:-.045em;margin-bottom:22px}
.password-field{border:1px solid #86967b;border-radius:4px;background:#06110acc;min-height:58px}
.password-field input{padding:16px 18px;font-size:17px}
.password-field button{padding-inline:18px}
.enter-button{justify-content:center;border-radius:4px;margin-top:14px;min-height:54px;padding:15px 20px;font-size:15px;letter-spacing:.01em}
form label{font-size:13px;color:#d0dac8;margin-bottom:12px}
@media(prefers-reduced-motion:reduce){.typed-word{animation:none}}

.words.but.alt{color:var(--sage)}
.replay-icon{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #81907870;background:#09140c70;border-radius:50%;color:var(--sage)}
.replay-icon:hover{background:#203322;border-color:var(--sage)}

/* Leave room for italic overhangs and descenders throughout the reveal. */
.words,.typed-word{overflow:visible}
.typed-word{padding:.12em .16em;margin:-.12em -.16em;clip-path:none}
.frame[data-scene=beach]{background-image:url("/entry/assets/beach.webp")}
form label{color:var(--sage)}
#duration{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-height:500px) and (orientation:landscape){.entry-header,.entry-footer{padding-block:14px}.cinema,.begin-screen{min-height:48svh}.gate{padding-block:12px}.gate h1{font-size:42px;margin-bottom:20px}}

.frame[data-scene=space]{background-image:url("/entry/assets/space.webp")}
.entry.montage .frame{transition-duration:.16s}
.entry.montage .typed-word{animation-duration:.16s}
@media(prefers-reduced-motion:reduce){.entry.montage .frame{transition:none}}

/* Each word has its own landscape, including every montage beat. */
.frame[data-scene=red-canyon]{background-image:url("/entry/assets/red-canyon.webp")}
.frame[data-scene=black-sand]{background-image:url("/entry/assets/black-sand.webp")}
.frame[data-scene=milkyway-desert]{background-image:url("/entry/assets/milkyway-desert.webp")}
.frame[data-scene=volcanic-caldera]{background-image:url("/entry/assets/volcanic-caldera.webp")}
.frame[data-scene=glacial-lagoon]{background-image:url("/entry/assets/glacial-lagoon.webp")}
.frame[data-scene=aurora-fjord]{background-image:url("/entry/assets/aurora-fjord.webp")}
.frame[data-scene=cloud-peaks]{background-image:url("/entry/assets/cloud-peaks.webp")}
.frame[data-scene=ocean-cave]{background-image:url("/entry/assets/ocean-cave.webp")}
.frame[data-scene=autumn-valley]{background-image:url("/entry/assets/autumn-valley.webp")}
.frame[data-scene=salt-flats]{background-image:url("/entry/assets/salt-flats.webp")}
.frame[data-scene=rolling-hills]{background-image:url("/entry/assets/rolling-hills.webp")}
.frame[data-scene=snowy-pines]{background-image:url("/entry/assets/snowy-pines.webp")}
.frame[data-scene=alpine-meadow]{background-image:url("/entry/assets/alpine-meadow.webp")}

/* Only the visible scene moves; hidden scenes do not occupy animated layers. */
.frame{visibility:hidden;animation:none;transition:opacity .16s ease,visibility 0s linear .16s}
.frame.active{visibility:visible;animation:drift 28s ease-out both;transition:opacity .16s ease,visibility 0s}
@media(prefers-reduced-motion:reduce){.frame,.frame.active{animation:none;transition:none}}

/* Give the opening controls breathing room below the top of the screen. */
.entry-header{padding-top:calc(56px + env(safe-area-inset-top,0px))}
@media(max-width:600px){.entry-header{padding-top:calc(44px + env(safe-area-inset-top,0px))}}
@media(max-height:500px) and (orientation:landscape){.entry-header{padding-top:calc(22px + env(safe-area-inset-top,0px))}}

/* A still Seattle cover has its own portrait composition for mobile. */
.frame[data-scene=seattle-cover]{inset:0;transform:none;animation:none;background-image:url('/entry/assets/seattle-cover.webp')}
@media(orientation:portrait){.frame[data-scene=seattle-cover]{background-image:url('/entry/assets/seattle-cover-mobile.webp')}}