@font-face { font-family:Pixel; src:url('/static/pixel-display.ttf') format('truetype'); font-display:swap; }
:root { color-scheme:dark; --ink:#382039; --cream:#fff0d5; --gold:#ffc979; --rose:#f4b4bc; --quiet:#dfbdbe; --pixel:Pixel,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--cream); font-family:var(--pixel); }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; cursor:pointer; min-width:44px; min-height:44px; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,[tabindex="0"]:focus-visible { outline:3px solid #fff2ba; outline-offset:5px; }
img { max-width:100%; }
p { line-height:1.5; }
.skip { position:fixed; z-index:100; top:12px; left:12px; padding:14px 18px; background:var(--ink); transform:translateY(-200%); }
.skip:focus { transform:none; }
.canyon-header { position:absolute; z-index:30; top:26px; left:4%; right:4%; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.canyon-header>* { pointer-events:auto; }
.studio-mark { display:inline-flex; align-items:center; min-width:44px; min-height:44px; }
.spark-nav-mark { display:inline-flex; align-items:center; gap:8px; }
.spark-nav-mark img { display:block; image-rendering:pixelated; }
.spark-nav-symbol { width:32px; height:32px; }
.spark-nav-name { width:96px; height:auto; }
.motion-toggle { padding:8px 12px; border:0; background:#382039b8; color:var(--quiet); font-size:13px; border-radius:3px; }
.motion-toggle:hover { color:var(--cream); }
.motion-toggle,.wind-invitation,.journey-nav,.desert-secret,.journey-hint,.gust-hint,.secrets-found { display:none; }
.canyon { --progress:0; --camera:0; --ground:710px; --perch-size:clamp(300px,44vw,660px); position:relative; isolation:isolate; overflow:clip; outline:none; }
.canyon-backdrop { position:fixed; z-index:-4; inset:0; overflow:hidden; pointer-events:none; background:linear-gradient(#311739,#9b4454 54%,#492842 100%); }
.sunset-sky { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 68%; image-rendering:pixelated; opacity:.9; }
.country-track { position:absolute; inset:0; width:330vw; transform:translateX(calc(var(--camera) * -.23px)); }
.country { display:block; position:absolute; width:155vw; height:100%; bottom:0; object-fit:cover; image-rendering:pixelated; mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent); }
.country-one { left:-36vw; object-position:50% 28%; opacity:.82; }
.country-two { left:100vw; object-position:50% 30%; opacity:.47; transform:scaleX(-1); }
.country-three { left:228vw; object-position:50% 44%; opacity:.6; }
.last-light-shade { position:absolute; inset:0; background:linear-gradient(#38203911,#38203955 65%,#281c32d9); }
.last-light-shade::after { content:""; position:absolute; inset:0; background:#221c3c; opacity:calc(var(--progress) * .4); }
.canyon-track { position:relative; }
.canyon-stop { position:relative; min-height:900px; padding:135px 8vw 300px; }
.stop-copy { position:relative; z-index:7; width:470px; max-width:100%; text-shadow:0 3px 14px #382039,0 1px 4px #382039; }
.opening-copy { width:min(64vw,920px); }
.wind-copy { width:min(50vw,660px); }
.overline { margin:0 0 35px; font-size:14px; color:var(--quiet); letter-spacing:.025em; }
h1 { margin:0; font-weight:400; }
.title-art { display:block; width:100%; height:auto; filter:drop-shadow(0 8px 6px #30173955); }
.opening-line { margin:35px 0 27px; font-size:clamp(34px,3.6vw,52px); line-height:1.06; letter-spacing:-.045em; }
.opening-line span { color:var(--gold); }
.sun-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; max-width:100%; min-height:52px; padding:13px 21px; border:0; color:#4e2939; background:var(--gold); font-size:16px; line-height:1.3; text-shadow:none; clip-path:polygon(5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px),0 5px,5px 5px); transition:background .2s,transform .2s; }
.sun-button span[aria-hidden] { font-size:24px; line-height:1; }
.sun-button:hover { background:#ffe1a3; transform:translateY(-2px); }
.sun-button:focus-visible { outline-color:#5c2d43; outline-offset:-6px; }
.journey-hint { margin:18px 0 0; font-size:15px; color:var(--gold); }
.gust-hint { margin:9px 0 0; font-size:12px; color:var(--quiet); }
.little-label { margin:0 0 24px; color:var(--quiet); font-size:16px; line-height:1.5; }
h2 { margin:0 0 28px; font-size:clamp(52px,6.4vw,92px); font-weight:400; letter-spacing:-.065em; line-height:.98; overflow-wrap:anywhere; }
em { color:var(--gold); font-style:normal; }
.passing-thought { margin:0; color:#f0d7cc; font-size:19px; line-height:1.6; }
.field-note { margin:28px 0 0; color:var(--quiet); font-size:14px; line-height:1.7; }
.moving-note { display:none; }
.quiet-aside { color:var(--rose); margin:40px 0 0; font-size:16px; }
.release-note { font-size:16px; color:var(--quiet); margin:0 0 24px; }
.last-light h2 { font-size:clamp(60px,6.1vw,86px); margin-bottom:24px; }
.text-invitation { display:inline-flex; min-height:44px; align-items:center; gap:12px; color:var(--gold); font-size:15px; border-bottom:1px dashed #ffc97966; }
.text-invitation:hover { color:var(--cream); }
.perch { --landing-x:.5; --landing-y:.4453125; position:absolute; width:var(--perch-size); aspect-ratio:1; left:calc(72% - var(--perch-size) * var(--landing-x)); top:calc(var(--ground) - var(--perch-size) * var(--landing-y)); pointer-events:none; }
.perch-first { --landing-x:.28125; --landing-y:.26953125; }
.perch-flower { --landing-x:.5; --landing-y:.26953125; }
.perch-last { --landing-x:.75; --landing-y:.2734375; }
.platform-art { position:absolute; z-index:3; inset:0; display:block; width:100%; height:100%; image-rendering:pixelated; mask-image:linear-gradient(#000 84%,transparent 100%); }
.landing-point { position:absolute; left:calc(var(--landing-x) * 100%); top:calc(var(--landing-y) * 100%); width:1px; height:1px; }
.rooted-prop,.desert-secret { position:absolute; z-index:4; width:24%; height:auto; }
.rooted-prop,.desert-secret img { display:block; image-rendering:pixelated; }
.rooted-prop { pointer-events:none; }
.first-cactus { width:28%; left:69%; top:44.7%; transform:translate(-50.625%,-90.179%); }
.hollow-grass { width:25%; left:16%; top:33.4%; transform:translate(-51.875%,-73.214%); }
.hollow-flower { width:21%; left:81%; top:33%; transform:translate(-50%,-75%); }
.flowering-cactus { width:27%; left:30%; top:40.5%; transform:translate(-47.5%,-89.286%); }
.last-branch { width:22%; left:28%; top:45.9%; transform:translate(-50%,-89.732%); }
.miss-static { position:absolute; z-index:6; width:148px; height:auto; left:calc(var(--landing-x) * 100%); top:calc(var(--landing-y) * 100%); transform:translate(-50%,-70.833%); image-rendering:pixelated; }
.desert-secret { padding:0; border:0; background:transparent; pointer-events:auto; min-width:44px; min-height:44px; transition:filter .25s; }
.desert-secret img { width:100%; height:auto; }
.desert-secret:hover,.desert-secret[aria-pressed=true] { filter:drop-shadow(0 0 12px #ffd4a399); }
.desert-secret:focus-visible { outline-offset:-5px; }
.seed-tuft { width:24%; left:78%; top:46.3%; transform:translate(-50%,-85.268%); }
.wildflowers { width:26%; left:79%; top:42.8%; transform:translate(-50%,-75%); }
.sleeping-stars { width:18%; left:48%; top:38%; transform:translate(-50%,-60%); }
.canyon-footer { margin-top:20px; max-width:470px; }
.canyon-footer>p:first-child { font-size:15px; margin:0 0 9px; }
.canyon-footer nav { display:flex; flex-wrap:wrap; gap:0 15px; color:var(--quiet); font-size:12px; }
.canyon-footer nav a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
.canyon-footer a:hover { color:var(--gold); }
.secrets-found { margin:12px 0 0; color:var(--quiet); font-size:12px; }
.static-note { font-size:15px; color:var(--gold); }
.canyon-life { display:none; position:fixed; z-index:6; inset:0; width:100%; height:100%; pointer-events:none; }
.desert-whisper { position:fixed; z-index:40; bottom:100px; left:8vw; width:350px; max-width:calc(100% - 40px); margin:0; padding:0; transform:translateY(10px); opacity:0; pointer-events:none; color:#ffe5b5; font-size:14px; line-height:1.5; text-align:left; text-shadow:0 2px 6px #28172d,0 0 18px #28172d,0 0 25px #28172d; transition:opacity .25s,transform .25s; }
.desert-whisper.show { opacity:1; transform:translateY(0); }
.is-interactive { scroll-behavior:auto; }
html.is-interactive,html.is-interactive body { width:100%; height:100%; overflow:hidden; }
.is-interactive .canyon-header { position:fixed; }
.is-interactive .motion-toggle,.is-interactive .desert-secret,.is-interactive .journey-hint,.is-interactive .gust-hint,.is-interactive .secrets-found { display:block; }
.is-interactive .canyon { --ground:82svh; height:100dvh; width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; touch-action:pan-y; scroll-snap-type:none; scroll-behavior:auto; }
.is-interactive .canyon::-webkit-scrollbar { display:none; }
.is-interactive .canyon-track { display:flex; gap:clamp(140px,14vw,220px); width:max-content; height:100%; }
.is-interactive .canyon-stop { flex:0 0 100vw; width:100vw; height:100%; min-height:0; padding:clamp(110px,17svh,185px) 8vw 0; }
.is-interactive .stop-copy { max-height:calc(82svh - clamp(110px,17svh,185px) - 100px); overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#dfbdbe66 transparent; padding:0 12px 12px 0; touch-action:pan-y; transition:opacity .18s; }
.is-interactive .canyon[data-traveling="true"] .stop-copy { opacity:0; pointer-events:none; }
.is-interactive .stop-copy:focus-visible { outline-offset:3px; }
.is-interactive .canyon:focus-visible { outline-offset:-4px; }
.is-interactive .moving-note { display:block; }
.is-interactive .still-note { display:none; }
html.motion-paused .moving-note,html.motion-paused .gust-hint { display:none; }
html.motion-paused .still-note { display:block; }
.is-interactive .canyon-life { display:block; }
.is-interactive .miss-static { display:none; }
.is-interactive .wind-invitation { display:flex; position:fixed; z-index:25; left:8vw; bottom:30px; align-items:center; gap:20px; }
.wind-caption { display:flex; flex-direction:column; gap:13px; min-width:120px; color:var(--quiet); font-size:12px; text-shadow:0 2px 8px #28172d; }
.wind-line { --wind:.5; position:relative; width:112px; height:12px; display:inline-block; border-bottom:1px solid #d6aaa36b; }
.wind-line::before { content:""; position:absolute; bottom:-2px; left:55%; width:27%; height:3px; background:#d4c19788; }
.wind-line i { display:block; position:absolute; bottom:-3px; left:calc(var(--wind) * (100% - 6px)); width:6px; height:6px; background:var(--quiet); }
[data-wind-ready="true"] [data-wind-value] i,[data-wind-value][data-strength="gentle"] i { background:#ffe9a7; box-shadow:0 0 9px #ffca74; }
.gust-button { min-width:170px; }
.canyon.is-wind-ready ~ .wind-invitation .gust-button:not([aria-pressed="true"]):not([aria-busy="true"]) { background:#ffe3a7; filter:drop-shadow(0 0 12px #ffc97966); }
.gust-button[aria-pressed=true] { background:var(--rose); }
.gust-button[aria-busy=true] { background:#efc2be; filter:none; cursor:wait; }
.is-interactive .journey-nav { display:flex; position:fixed; z-index:25; left:50%; top:26px; transform:translateX(-50%); gap:8px; align-items:center; }
.journey-label { position:absolute; top:52px; left:50%; transform:translateX(-50%); width:max-content; color:var(--quiet); font-size:12px; text-shadow:0 2px 8px #28172d; }
.direction { display:inline-flex; width:44px; height:44px; justify-content:center; align-items:center; border:0; background:#38203966; color:var(--gold); font-size:26px; }
.direction:disabled { opacity:.3; cursor:default; }
.direction:hover:not(:disabled) { color:var(--cream); background:#382039cc; }
.trail-dots { display:flex; gap:0; }
.trail-dots a { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; }
.trail-dots span { display:block; width:5px; height:5px; background:#dfbdbe66; transform:rotate(45deg); }
.trail-dots [aria-current="step"] span { background:var(--gold); box-shadow:0 0 8px #ffc97955; }
@media(max-width:900px) {
  .opening-copy { width:75vw; }
  .is-interactive .wind-invitation { left:5%; gap:13px; }
  .journey-nav { gap:3px; }
}
@media(max-width:700px) {
  .canyon-header { top:16px; left:20px; right:16px; }
  .motion-toggle { font-size:12px; }
  .canyon { --perch-size:300px; }
  .canyon-stop { min-height:900px; padding:115px 24px 300px; }
  .stop-copy,.opening-copy,.wind-copy { width:100%; }
  .overline { max-width:270px; font-size:12px; line-height:1.7; margin-bottom:18px; }
  .title-art { width:min(100%,300px); }
  .opening-line { margin:20px 0 18px; font-size:31px; }
  h2 { font-size:clamp(44px,11.4vw,66px); }
  .little-label { font-size:14px; margin-bottom:22px; }
  .passing-thought { font-size:17px; }
  .field-note { font-size:13px; }
  .quiet-aside { font-size:14px; margin-top:29px; }
  .release-note { font-size:14px; }
  .last-light h2 { font-size:clamp(44px,10.6vw,66px); }
  .canyon-footer { margin-top:22px; }
  .canyon-footer>p:first-child { font-size:14px; }
  .canyon-footer nav { gap:0 15px; font-size:12px; }
  .perch { left:calc(68% - var(--perch-size) * var(--landing-x)); }
  .miss-static { width:124px; }
  .journey-hint { font-size:13px; margin-top:16px; }
  .gust-hint { line-height:1.6; }
  .is-interactive .canyon-stop { padding:108px 24px 0; }
  .is-interactive .stop-copy { max-height:calc(82svh - 108px - 120px); padding-right:8px; }
  .is-interactive .wind-invitation { display:block; left:20px; bottom:22px; width:calc(100vw - 154px); max-width:210px; }
  .wind-caption { gap:8px; margin-bottom:13px; }
  .gust-button { width:100%; min-width:0; font-size:14px; padding:12px; gap:6px; }
  .gust-button [data-ride-label] { min-width:0; }
  .is-interactive .journey-nav { left:auto; top:auto; transform:none; right:16px; bottom:24px; gap:5px; }
  .direction { background:#382039d9; }
  .trail-dots,.journey-label { display:none; }
  .desert-whisper { left:20px; bottom:98px; width:calc(100vw - 154px); max-width:210px; font-size:12px; }
  body:has(.desert-whisper.show) .wind-caption { visibility:hidden; }
  .country-one { object-position:50% 48%; }
  .country-two { object-position:50% 38%; }
}
@media(max-width:360px) {
  .canyon { --perch-size:280px; }
  .gust-button { font-size:13px; }
  .wind-copy h2 { font-size:40px; }
  .leap-copy h2 { font-size:51px; }
}
@media(max-height:600px) and (min-width:701px) {
  .is-interactive .canyon-stop { padding-top:86px; }
  .is-interactive .stop-copy { width:48vw; max-height:calc(82svh - 86px - 35px); }
  .opening-copy .overline { margin-bottom:13px; }
  .opening-copy .title-art { width:90%; }
  .opening-line { margin:18px 0; font-size:32px; }
  h2 { font-size:50px; }
  .is-interactive .wind-invitation { bottom:18px; }
  .is-interactive .journey-nav { top:18px; bottom:auto; }
  .journey-label { display:none; }
  .quiet-aside { margin-top:20px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; }
}