@font-face{font-family:Berg;src:local('Arial');font-display:swap}
button{min-height:44px}
:root{font-family:Berg,Arial,Helvetica,sans-serif;color:#181918;background:#f3f1ee;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #695441;outline-offset:8px;border-radius:4px}button[disabled]{cursor:wait}button[hidden],[hidden]{display:none!important}
#experience{height:100svh;height:100dvh;min-height:280px;position:relative;isolation:isolate;overflow:hidden;touch-action:pan-y pinch-zoom}
#scene,#scene canvas,.vignette{position:absolute;inset:0;width:100%;height:100%}#scene canvas{display:block;opacity:0;transition:opacity .8s ease}body.ready #scene canvas{opacity:1}.vignette{pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 42%,rgba(70,60,48,.035) 100%);z-index:1}
#heading{position:absolute;inset:10.8% 0 auto;text-align:center;z-index:3;pointer-events:none;height:28px}#heading span{position:absolute;left:50%;white-space:nowrap;transform:translateX(-50%);font-size:clamp(13px,1.15vw,19px);font-weight:500;letter-spacing:.88em;padding-left:.88em}#studio-title{opacity:0;letter-spacing:.34em!important;padding-left:.34em!important;font-size:14px!important}
#app-icon{position:absolute;z-index:4;border:0;background:transparent;padding:0;cursor:pointer;border-radius:24%;min-width:44px;min-height:44px}#app-icon:focus-visible{outline:2px solid #816b51;outline-offset:9px}#app-icon:hover{cursor:pointer}
footer{position:absolute;inset:auto 0 max(24px,env(safe-area-inset-bottom)) 0;z-index:5;height:62px;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:0 32px;gap:20px}footer button{pointer-events:auto;cursor:pointer}.quiet-button{background:none;border:0;padding:12px 0;font-size:12px;letter-spacing:.025em;color:#66645f;transition:color .2s;white-space:nowrap}.quiet-button:hover{color:#151515}.motion{position:absolute;right:32px}#return{position:absolute;left:32px}#return span{font-size:17px;margin-right:7px;vertical-align:-1px}.invitation{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:13px;position:relative;padding:10px 28px 0;font-size:12px;letter-spacing:.12em;color:#57534d;transition:opacity .3s}.scroll-line{display:block;height:24px;width:1px;background:linear-gradient(#77736c,transparent);transform-origin:top;animation:breathe 2.4s ease-in-out infinite}body.arrived .scroll-line{transform:rotate(180deg);animation:none}body.moving .invitation{opacity:0;pointer-events:none}body:not(.ready) .motion{opacity:0}
#fallback{position:absolute;inset:0;z-index:7;background:#e7e5e0}#fallback>img{width:100%;height:100%;object-fit:cover;object-position:center 44%}.fallback-caption{position:absolute;inset:6% 0 auto;text-align:center}.fallback-caption p{font-size:15px;letter-spacing:.35em}.fallback-caption button{margin-top:8px;padding:10px 16px;border:1px solid #8f887a;background:#f1ece2c9;font-size:13px;cursor:pointer}.no-script{position:absolute;inset:0;background:#f3f1ee;padding:5vw;z-index:10}.no-script img{width:100%;max-height:70vh;object-fit:contain}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes breathe{0%,100%{opacity:.35;scale:1 .75}50%{opacity:.85;scale:1 1}}
@media(max-width:650px){#heading{top:9.5%}#heading span{font-size:12px;letter-spacing:.67em;padding-left:.67em}footer{bottom:max(18px,env(safe-area-inset-bottom));padding:0 20px;height:78px;align-items:flex-start}.motion{right:20px;bottom:0;font-size:12px}#return{left:20px;bottom:0;font-size:12px}.invitation{font-size:12px;gap:9px;padding-top:0}.scroll-line{height:20px}#studio-title{font-size:13px!important}}
@media(max-height:500px) and (min-width:651px){#heading{top:6%}footer{bottom:10px;height:40px}.scroll-line{height:12px}.invitation{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
body.reduced .scroll-line{animation:none}

/* Native text stays sharp independently of the WebGL drawing resolution. */
#wordmark{position:absolute;inset:0;z-index:2;pointer-events:none}
#wordmark>span{position:absolute;font-family:Arial,Helvetica,sans-serif;font-weight:700;line-height:1;letter-spacing:0;white-space:nowrap;color:#111;opacity:0;transform:translate(-50%,-50%)}
#wordmark .letter-mask{display:inline-block;overflow:hidden;vertical-align:top;padding:.10em .08em .08em;margin:-.10em -.08em -.08em}
#wordmark .word-letter{display:block;opacity:1;transform:none;filter:none}

/* Process copy remains native browser type, projected from a fixed scene anchor. */
#chapter{position:absolute;z-index:3;pointer-events:none;width:min(29vw,400px);color:#181b19}
#chapter-number{font-size:12px;letter-spacing:.14em;margin:0 0 18px;color:#50564e}
#chapter h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(28px,3.8vw,62px);letter-spacing:-.045em;line-height:1.01;font-weight:700;margin:0 0 22px;text-wrap:balance}
#chapter-copy{font-size:clamp(16px,1.55vw,23px);line-height:1.35;margin:0;max-width:22ch;letter-spacing:-.025em}
#skip-work{position:absolute;z-index:5;right:32px;top:calc(4% + env(safe-area-inset-top));font-size:14px;cursor:pointer;color:#333931}
#chapters{position:absolute;z-index:5;bottom:max(102px,calc(env(safe-area-inset-bottom) + 84px));left:50%;transform:translateX(-50%);display:flex;gap:6px}
#chapters button{border:0;background:transparent;padding:10px 14px;font-size:14px;color:#686d65;cursor:pointer}
#chapters button[aria-current=step]{color:#111814;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
body.moving #chapters{pointer-events:none;opacity:.5}
body.arrived .scroll-line{transform:none}
#work{position:absolute;inset:19% max(7%,24px) 24%;z-index:4;display:flex;flex-direction:column;justify-content:center;gap:32px}
#work h2{font-size:clamp(32px,4.3vw,66px);letter-spacing:-.04em;line-height:1.05;margin:0;font-weight:700;text-align:center}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;width:100%;margin:0 auto}
.project-grid button{padding:0;border:0;border-radius:14px;overflow:hidden;background:#eeeee7;text-align:left;cursor:pointer;box-shadow:0 16px 40px #171b1814}
.project-grid img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.project-grid button>span{display:flex;justify-content:space-between;padding:18px 22px;font-size:20px;font-weight:500}
#project-dialog{padding:24px;background:#eeeee9;color:#1e231f;border:0;border-radius:14px;width:min(1000px,92vw);max-height:90dvh;overflow:auto}
#project-dialog::backdrop{background:#181b1880;backdrop-filter:blur(8px)}
#project-dialog>div{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
#project-dialog h2{margin:0;font-size:28px;letter-spacing:-.03em}
#project-dialog button{padding:10px 18px;border:1px solid #babfb6;border-radius:6px;background:transparent;cursor:pointer}
#project-dialog img{width:100%;height:auto;display:block}
@media(max-aspect-ratio:21/25){
  #chapter{width:88%;max-width:none}
  #chapter-number{margin-bottom:9px;font-size:12px}
  #chapter h2{font-size:clamp(28px,8.1vw,43px);max-width:13ch;margin-bottom:10px}
  #chapter-copy{font-size:16px;max-width:26ch;line-height:1.3}
  #skip-work{top:max(14px,env(safe-area-inset-top));right:20px;font-size:13px}
  #chapters{bottom:max(113px,calc(env(safe-area-inset-bottom) + 100px));gap:0}
  #chapters button{padding:10px 12px;font-size:13px}
  #work{inset:12% 24px 25%;gap:22px}
  #work h2{font-size:34px}
  .project-grid{grid-template-columns:1fr;gap:15px;max-width:340px}
  .project-grid img{max-height:18dvh;object-fit:contain;background:#e9e9e1}
  .project-grid button>span{padding:10px 15px;font-size:17px}
}
@media(max-height:560px) and (min-aspect-ratio:21/25){#chapter h2{font-size:30px}#chapter-number{margin-bottom:8px}#chapter-copy{font-size:16px}#chapters{bottom:56px}#work{inset:14% 15% 27%;gap:16px}.project-grid{max-width:650px}.project-grid img{max-height:24dvh;object-fit:contain}.project-grid button>span{padding:8px 14px;font-size:16px}}

/* One native rounded mask contains both the icon artwork and entrance film. */
#launch-surface{position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden;overflow:hidden;isolation:isolate}
.launch-content{position:absolute;inset:0;transform-origin:50% 50%}
.launch-content>video,.launch-content>.launch-fallback{position:absolute;display:block;max-width:none;object-fit:cover}
.launch-art{position:absolute;display:block;max-width:none;object-fit:cover;pointer-events:none}
.launch-island{position:absolute;border-radius:999px;background:#020303;overflow:hidden}
.launch-island i{position:absolute;right:11%;top:35%;width:7.5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#233749,#07141c 65%,#030405);box-shadow:0 0 1px #354b54}

/* Quiet feedback only while media is genuinely pending. */
.loading-spinner{display:inline-block;flex:none;width:18px;height:18px;box-sizing:border-box;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:berg-spinner .8s linear infinite}
.loading-spinner[hidden]{display:none!important}
.invitation>.loading-spinner{display:none}
.invitation:disabled>.loading-spinner{display:block;margin:auto;color:#fff}
.invitation:disabled #invitation-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.invitation:disabled .scroll-line{display:none}
@keyframes berg-spinner{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none}}
body.reduced .loading-spinner{animation:none}