@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Instrument+Serif&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#030303;color:#ebe7df;font-family:'DM Sans',sans-serif}header{position:fixed;z-index:5;top:0;left:0;padding:30px 5vw}.wordmark{font-size:35px;font-weight:500;letter-spacing:-2px;color:inherit;text-decoration:none}#scene{position:fixed;inset:0;pointer-events:none}canvas{display:block;width:100%;height:100%}section{position:relative;min-height:130vh;display:flex;align-items:center;padding:12vh 8vw}.opening{min-height:115vh;align-items:flex-start}.copy{width:39%;max-width:490px;text-shadow:0 2px 20px #000}.copy p{font-size:clamp(21px,2.3vw,34px);line-height:1.45;letter-spacing:-.025em}.copy h1,.copy h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(43px,5vw,76px);line-height:1.08;letter-spacing:-.025em}.copy h1{margin-bottom:10px}.copy .meaning{color:#d3ad67;margin-top:0}.scroll{position:absolute;top:80vh;left:50%;transform:translateX(-50%);color:#c7c1b6;text-decoration:none;font-size:12px;white-space:nowrap}.scroll span{display:block;text-align:center;margin-top:20px;font-size:22px;color:#d3ad67}.ending{min-height:110vh}.hiring{margin-top:46px;color:#d3ad67}a:focus-visible{outline:2px solid #d3ad67;outline-offset:8px}.fallback{position:fixed;bottom:20px;left:20px;font-size:12px}@media(max-width:700px){header{padding:24px 7vw}.wordmark{font-size:29px}section{padding:16vh 7vw 65vh;min-height:125svh;align-items:flex-start}.copy{width:100%;max-width:400px}.copy p{font-size:23px}.copy h1,.copy h2{font-size:46px}.opening{min-height:110svh}.scroll{top:80svh}.ending{min-height:120svh}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
header{background:linear-gradient(#030303 65%,#03030300);padding-bottom:24px}.ending{min-height:100vh}@media(max-width:700px){.ending{min-height:100svh;padding-top:16svh;padding-bottom:0}}

header{width:100%;pointer-events:none}.wordmark{pointer-events:auto}
/* Keep mobile copy in a stable reading area while the plant occupies the lower view. */
@media(max-width:700px){
  .js-story section .copy{position:fixed;top:14svh;left:7vw;width:86vw;max-width:440px;opacity:0;pointer-events:none;transition:opacity .3s ease}
  .js-story section.is-current .copy{opacity:1}
}
@media(prefers-reduced-motion:reduce){.js-story section .copy{transition:none}}
/* The wide field remains visible behind a soft reading-area shade. */
@media(min-width:701px){#scene::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,3,3,.72),rgba(3,3,3,.44) 29%,transparent 61%);opacity:var(--copy-shade,0)}}

header{background:transparent;text-shadow:0 2px 14px #0008}
@media(max-width:700px){#scene::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(12,7,18,.4),rgba(12,7,18,.38) 40%,transparent 76%);opacity:var(--sunset,0)}}

.js-story .ending .hiring{opacity:var(--hiring-reveal,0)}

html.is-loading{overflow:hidden}
#loading{position:fixed;inset:0;z-index:100;background:#030303;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s}
html:not(.is-loading) #loading{opacity:0;visibility:hidden;pointer-events:none}
.loading-wordmark{font-size:48px;letter-spacing:-3px;font-weight:500;margin-bottom:40px}
.loading-track{width:160px;height:2px;background:#28251e;overflow:hidden}
#loading-bar{display:block;height:100%;width:0;background:#d3ad67;transition:width .25s ease}
#loading-label{font-size:13px;color:#b6afa2;margin:20px 0 8px}
#loading-percent{font-size:11px;color:#8c8579;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){#loading,#loading-bar{transition:none}}

@media(max-width:700px){#scene::after{opacity:max(var(--sunset,0),calc(var(--copy-shade,0)*.85))}}

/* Compositor animation stays alive during shader/model preparation. */
.loading-track{position:relative}
.loading-track::after{content:"";position:absolute;inset:0;width:42%;background:linear-gradient(90deg,transparent,#f4d99f,transparent);animation:loading-sweep 1.8s ease-in-out infinite}
@keyframes loading-sweep{from{transform:translateX(-110%)}to{transform:translateX(350%)}}
@media(prefers-reduced-motion:reduce){.loading-track::after{animation:none}}

/* Narrative typography and the final invitation. */
.meaning .etymology{display:block;color:#ebe7df;font-size:.64em;letter-spacing:0;margin-top:7px}
.copy h2{font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:-.055em;font-size:clamp(38px,4vw,61px);line-height:1.12}
.copy .frontier{font-size:clamp(17px,1.7vw,24px);line-height:1.4;color:#d3ad67;letter-spacing:-.015em;margin-top:22px}
.hiring-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em}
.hiring-link[aria-disabled="true"]{cursor:default}
.hiring-link span{display:inline-block;font-size:.8em;margin-left:.12em}
.js-story .ending .hiring{visibility:hidden;pointer-events:none}
.js-story .ending .hiring.is-visible{visibility:visible;pointer-events:auto}
@media(max-width:700px){.copy h2{font-size:clamp(34px,7.7vw,46px)}.copy .frontier{font-size:19px}.ending .hiring{margin-top:32px}}

.meaning .translation{white-space:nowrap}