/* A single continuous room. Values are intentionally quiet, never pure black. */
:root{color-scheme:dark;background:#0c100e;--ash:#92998b;--ground:#0c100e}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;background:var(--ground)}
html{scroll-behavior:auto}
body{overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.journey{position:relative;height:760vh;height:760svh;isolation:isolate}
.air{position:fixed;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 19% 34%,#19211c 0,transparent 62%),#0c100e}
.scene{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:translate3d(0,var(--drift,0px),0);will-change:auto}
.scene.is-present{visibility:visible;will-change:opacity,transform}
.scene picture{position:absolute;inset:-2%;display:block;mask-image:radial-gradient(ellipse 76% 62% at var(--mx,50%) var(--my,50%),#000 12%,#000b 42%,transparent 88%);-webkit-mask-image:radial-gradient(ellipse 76% 62% at var(--mx,50%) var(--my,50%),#000 12%,#000b 42%,transparent 88%)}
.scene img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--px,50%) var(--py,50%);filter:saturate(.64) contrast(.96);user-select:none}
.scene--plant{--mx:58%;--my:54%;--px:54%;--py:58%}
.scene--glass{--mx:28%;--my:56%;--px:36%;--py:53%}
.scene--leaves{--mx:68%;--my:63%;--px:62%;--py:58%}
.scene--hands{--mx:43%;--my:57%;--px:45%;--py:59%}
.scene--light{--mx:49%;--my:57%;--px:49%;--py:55%}
.scene--room{--mx:43%;--my:61%;--px:46%;--py:57%}
.scene--threshold{--mx:50%;--my:55%;--px:50%;--py:48%}
.scene--plant picture{filter:blur(1.2px)}
.scene--leaves picture{mask-image:radial-gradient(ellipse 85% 40% at 60% 65%,#000 8%,#000a 45%,transparent 94%);-webkit-mask-image:radial-gradient(ellipse 85% 40% at 60% 65%,#000 8%,#000a 45%,transparent 94%)}
.scene--hands picture{mask-image:radial-gradient(ellipse 70% 37% at 46% 59%,#000 18%,#000a 44%,transparent 92%);-webkit-mask-image:radial-gradient(ellipse 70% 37% at 46% 59%,#000 18%,#000a 44%,transparent 92%)}
.scene--room picture{filter:blur(.3px)}
/* Thin, uneven layers of tinted light. No smoke asset, particle loop or WebGL. */
.humidity,.grain,.veil{position:absolute;inset:-5%;pointer-events:none}
.humidity{background:radial-gradient(ellipse 67% 28% at 15% 36%,#7c89751b,transparent 85%),radial-gradient(ellipse 42% 76% at 91% 58%,#737a681c,transparent 83%),linear-gradient(107deg,transparent 34%,#a6ad9610 49%,transparent 58%);opacity:.85;transform:translate3d(-.6%,0,0);animation:air-settle 4.8s ease-out both}
.veil{background:radial-gradient(ellipse at 49% 50%,transparent 25%,#0c100e88 88%),linear-gradient(180deg,#0c100e55,transparent 35%,transparent 68%,#0c100e88);opacity:.72}
.grain{inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.79' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23858c80' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.arrival{position:relative;z-index:2;height:100vh;height:100svh;top:660vh;top:660svh;display:flex;align-items:flex-end;justify-content:center;padding:0 26px calc(72px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#0c100e 55%)}
.doors{display:flex;gap:25px;align-items:center}
.door{display:flex;width:48px;height:48px;align-items:center;justify-content:center;color:#92998b;border-radius:50%;text-decoration:none;transition:color .3s ease,background .3s ease}
.door svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.25;fill:none;stroke-linecap:round;stroke-linejoin:round}
.door:focus-visible{outline:1px solid #ccd3c1;outline-offset:5px;background:#68745c22;color:#d6dece}
@media(hover:hover){.door:hover{color:#d6dece;background:#68745c16}}
@keyframes air-settle{from{transform:translate3d(-.6%,.2%,0);opacity:1}to{transform:translate3d(.6%,-.2%,0);opacity:.8}}
@media(min-width:800px){
 .scene{inset:0}
 .scene picture{inset:-2% auto;width:58svh;max-width:650px;left:calc(50% - 29svh);mask-image:radial-gradient(ellipse 70% 61% at var(--mx,50%) var(--my,50%),#000 7%,#000b 34%,transparent 88%);-webkit-mask-image:radial-gradient(ellipse 70% 61% at var(--mx,50%) var(--my,50%),#000 7%,#000b 34%,transparent 88%)}
 .scene img{object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
 .scene--glass picture{transform:translateX(-16vw)}
 .scene--leaves picture{transform:translateX(12vw)}
 .scene--hands picture{mask-image:radial-gradient(ellipse 70% 37% at 46% 59%,#000 18%,#000a 44%,transparent 92%);-webkit-mask-image:radial-gradient(ellipse 70% 37% at 46% 59%,#000 18%,#000a 44%,transparent 92%)}
 .arrival{justify-content:flex-end;padding-right:15vw;padding-bottom:80px}.doors{gap:30px}
}
/* Fade every edge of the glass photograph, including during vertical drift.
   The offset radial light alone leaves the left and bottom boundaries visible. */
.scene--glass img{
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 22%,#000 70%,transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 22%,#000 70%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-composite:intersect;
}
/* Motion-sensitive visitors get a stationary, naturally scrolling photographic path.
   No crossfade, drift, animation or sticky/fixed photographic surface. */
@media(prefers-reduced-motion:reduce){.journey{height:auto}.air{position:relative;overflow:hidden;background:#0c100e}.scene,.scene.is-present{position:relative;inset:auto;height:95vh;height:95svh;visibility:visible!important;opacity:.84!important;transform:none!important;will-change:auto}.scene picture{filter:none}.scene--plant{opacity:.55!important}.humidity{animation:none;transform:none;opacity:.5}.arrival{top:auto;height:100vh;height:100svh}.door{transition:none}}
/* JavaScript is enhancement only: all photographs and links remain reachable. */
html.no-js .journey{height:auto}
html.no-js .air{position:relative}
html.no-js .scene{position:relative;inset:auto;height:95vh;height:95svh;visibility:visible;opacity:.8;transform:none}
html.no-js .arrival{top:auto}

/* The supplied mark appears once, as a signature at the end of the journey.
   The artwork mask removes the paper entirely, revealing the page background. */
.arrival-signature{display:flex;flex-direction:column;align-items:center;gap:36px;width:min(280px,76vw)}
.wordmark{position:relative;width:100%;aspect-ratio:1140/165;overflow:hidden;opacity:.82}
.wordmark img{position:absolute;display:block;width:110%;max-width:none;height:auto;left:-5.26%;top:-103.03%;}
@media(min-width:800px){.arrival-signature{width:320px;gap:40px}}