@font-face{font-family:Nunito;src:url('assets/Nunito-Variable-latin.woff2') format('woff2');font-weight:200 1000;font-display:swap}
:root{color-scheme:dark;--cream:#fff4dc;--ground:#352719;--ink:#163a1f;--glow:0 1px 2px #1d130b99,0 2px 16px #1d130b8c}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--cream);font-family:Nunito,system-ui,sans-serif}
button{font:inherit;color:inherit}
:is(button,a):focus-visible{outline:2px solid var(--cream);outline-offset:4px;border-radius:4px;box-shadow:0 0 0 6px #1d130b59}
.opening{position:fixed;inset:0;overflow:hidden;isolation:isolate}
.poster,.noscript-poster,#street{position:absolute;inset:0;width:100%;height:100%;display:block}
.poster,.noscript-poster{object-fit:cover;opacity:0}
.noscript-poster{opacity:1;z-index:3}
#street{touch-action:pan-y}
/* While the street loads: the held view, far out of focus and dimmed, with the wordmark's star breathing. */
.veil{position:absolute;inset:0;background:var(--ground);pointer-events:none;transition:opacity 1.4s cubic-bezier(.3,0,.2,1)}
.veil-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.veil::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 44%,#35271966,#352719d9)}
.veil-mark{position:absolute;z-index:1;left:50%;top:50%;margin:-15px 0 0 -15px;filter:drop-shadow(0 2px 8px #1d130b80);animation:mark-breathe 1.7s ease-in-out infinite alternate}
@keyframes mark-breathe{from{opacity:.45;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
/* Once faded, hidden outright, so the breathing star stops costing frames under the live scene. */
.opening:is(.is-live,.is-still) .veil{opacity:0;visibility:hidden;transition:opacity 1.4s cubic-bezier(.3,0,.2,1),visibility 0s 1.4s}
.opening:has(.noscript-poster) .veil{display:none}
.opening.is-still .poster{opacity:1}
.opening.is-still #street{visibility:hidden}
/* The wordmark comes in large over the entrance, then lifts and shrinks out of the way once it has landed. */
.logo-wrap{--lift:-34vh;--landed:.5;position:absolute;z-index:4;left:50%;top:44%;width:min(58vw,500px);aspect-ratio:540/320;pointer-events:none;transform:translate(-50%,-50%) translateY(var(--lift)) scale(var(--landed));transition:transform 1.8s cubic-bezier(.45,0,.15,1)}
.opening.logo-intro .logo-wrap{transform:translate(-50%,-50%)}
.opening.logo-instant .logo-wrap{transition:none}
.logo-still,#logo-animation,.noscript-logo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 22px #3a1f0a40)}
[hidden]{display:none!important}
/* The line and the App Store note: in the trees left of the house on wide screens, under the wordmark on tall ones.
   They arrive once the wordmark has lifted (or at once without motion, in the still and without JavaScript).
   --wall is where the house's left wall lands: the held view keeps the house 55vh wide down to an aspect of
   1.07, and about 55vw wide below that (camera.js widens the lens). The copy stays in the room left of it. */
.hero-copy{--wall:calc(50vw - 27.5vh);--left:max(calc(var(--wall) * .19),calc(env(safe-area-inset-left) + 20px));--room:calc(var(--wall) - var(--left) - 24px);position:absolute;z-index:4;left:var(--left);top:47vh;max-width:var(--room);display:flex;flex-direction:column;align-items:flex-start;text-shadow:var(--glow)}
.hero-copy::before{content:"";position:absolute;inset:-40% -34% -40% -30%;z-index:-1;background:radial-gradient(closest-side,#1d130b66,#1d130b33 58%,#1d130b00);opacity:0;transition:opacity 1.6s ease}
.tagline{margin:0;font-size:clamp(18px,min(3.8vh,var(--room) / 5.9),46px);font-weight:800;line-height:1.08;letter-spacing:-.012em}
.tagline span{display:block}
.soon{display:inline-flex;align-items:center;gap:.6em;max-width:100%;margin:clamp(14px,2.3vh,26px) 0 0;padding:.7em 1.2em .7em 1em;border:1px solid #fff4dc8f;border-radius:1.4em;background:#241a1247;font-size:clamp(11px,1.3vh,15px);font-weight:800;line-height:1.25;letter-spacing:.015em;text-wrap:balance;cursor:default}
.soon svg{flex:none;width:1.15em;height:1.15em;filter:drop-shadow(0 1px 2px #1d130b80)}
.hero-copy>p{opacity:0;transform:translateY(8px);transition:opacity 1.3s cubic-bezier(.3,0,.2,1),transform 1.9s cubic-bezier(.2,.7,.2,1)}
.opening.is-live:not(.logo-intro) .hero-copy>p,.opening.is-still .hero-copy>p,.opening:has(.noscript-poster) .hero-copy>p{opacity:1;transform:none}
.opening.is-live:not(.logo-intro) .hero-copy::before,.opening.is-still .hero-copy::before,.opening:has(.noscript-poster) .hero-copy::before{opacity:1}
/* Wait for the wordmark's 1.8 s lift to all but finish; a seek or a switch to reduced motion (logo-instant) shows them at once. */
.opening.is-live:not(.logo-intro,.logo-instant) .tagline,.opening.is-live:not(.logo-intro,.logo-instant) .hero-copy::before{transition-delay:1.3s}
.opening.is-live:not(.logo-intro,.logo-instant) .soon{transition-delay:1.8s}
.footer-shade{position:absolute;inset:auto 0 0;height:140px;background:linear-gradient(transparent,#21190f66);pointer-events:none}
footer{position:fixed;z-index:5;bottom:0;left:0;right:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 16px;padding:24px max(34px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(34px,env(safe-area-inset-left));text-shadow:0 1px 4px #241a12}
footer nav,.controls{display:flex;align-items:center;gap:26px}
footer a,.quiet-control{display:flex;align-items:center;min-height:44px;font-size:12px;font-weight:700;letter-spacing:.02em;opacity:.8;color:inherit;text-decoration:none}
footer a:hover,.quiet-control:hover{opacity:1}
footer a:hover{text-decoration:underline;text-underline-offset:4px}
.quiet-control{background:none;border:0;padding:0;cursor:pointer}
/* Sound: three small bars, flat when off, swaying when on (scaled, so playing never re-lays out the page). */
.sound-bars{display:inline-flex;align-items:center;gap:2px;height:10px;margin-right:7px}
.sound-bars i{width:2px;height:10px;border-radius:1px;background:currentColor;transform:scaleY(.2);transition:transform .4s ease}
[aria-pressed="true"] .sound-bars i{transform:scaleY(.6)}
[aria-pressed="true"] .sound-bars i:nth-child(2){transform:none}
.is-playing .sound-bars i{animation:sway 1.1s ease-in-out infinite alternate}
.is-playing .sound-bars i:nth-child(2){animation-delay:-.45s}
.is-playing .sound-bars i:nth-child(3){animation-delay:-.8s}
@keyframes sway{from{transform:scaleY(.3)}to{transform:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-aspect-ratio:1.07){.hero-copy{--wall:22.5vw}}
@media(max-aspect-ratio:3/4){
  .logo-wrap{width:min(82vw,460px);top:30%;--lift:-17vh;--landed:.62}
  /* Centred just under the landed wordmark, over the cornice: light stone and sky, so the wordmark's dark
     green on a soft cream glow rather than cream on shadow. */
  .hero-copy{left:50%;top:calc(13vh + min(82vw,460px) * .1102 + 10px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);align-items:center;text-align:center;color:var(--ink);text-shadow:0 0 2px #fff4dc,0 0 12px #fff4dcd9}
  .hero-copy::before{inset:-34% -16%;background:radial-gradient(closest-side,#fff4dc8c,#fff4dc40 58%,#fff4dc00)}
  .tagline{font-size:clamp(19px,5.3vw,27px)}
  .tagline span{display:inline}
  .soon{margin-top:12px;font-size:12px;border-color:#163a1f66;background:#fff4dca6;white-space:nowrap}
  .soon svg{filter:none}
}
@media(prefers-reduced-motion:reduce){
  .logo-wrap{transition:none}
  .veil-mark{animation:none;opacity:.8}
  .hero-copy>p{transform:none;transition:opacity .8s ease}
  .hero-copy>p,.hero-copy::before{transition-delay:0s!important}
  .is-playing .sound-bars i{animation:none}
}
@media(max-width:600px){footer{gap:0 12px;padding:16px max(21px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(21px,env(safe-area-inset-left))}footer nav,.controls{gap:16px}footer a,.quiet-control{font-size:11px}}
@media(max-width:360px){footer{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}footer nav,.controls{gap:12px}}