/* Atelier direction: a quieter, darker frame around the approved world.
   Loaded last; the world runtime, cursor and journey sheets are unchanged. */
:root{
 --void:#06090f;--ink:#f3f1e8;--mist:#a9b6b3;--line:#ffffff1c;
 --glass:#0b121aa8;--mint:#bfffe6;--gold:#f0d9a6;
 --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
 --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
html{background:var(--void)}
html,main{background:var(--void)}
body.agency{color:var(--ink)}
.agency{--ink:#f3f1e8;--muted:#a9b6b3;--rule:#ffffff14}

/* Cinematic entry --------------------------------------------------------- */
.veil{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--void);color:var(--ink);transition:opacity 1.1s cubic-bezier(.6,0,.2,1) .25s,visibility 0s linear 1.4s}
.veil-inner{display:grid;justify-items:center;gap:26px;transform:translateY(0);transition:transform 1s cubic-bezier(.6,0,.2,1) .2s,opacity .6s ease .1s}
.veil svg{width:34px;height:40px;fill:none;stroke:var(--mint);stroke-width:.9;opacity:.9;animation:veil-breathe 3.2s ease-in-out infinite}
.veil-word{font:400 15px/1 var(--serif);letter-spacing:.02em}
.veil-meta{display:flex;gap:18px;align-items:baseline;font:300 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.veil-count{font-variant-numeric:tabular-nums;color:var(--ink);min-width:3ch;text-align:right}
.veil-line{width:min(220px,50vw);height:1px;background:#ffffff14;overflow:hidden}
/* After ten seconds the wait says so, on the veil itself, with somewhere to go. */
.veil-story{font:300 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);text-decoration:none;border-bottom:1px solid #ffffff22;opacity:0;transform:translateY(6px);transition:opacity .8s ease,transform .8s ease;pointer-events:none}
body.slow-loading .veil-story{opacity:1;transform:none;pointer-events:auto}.veil-story:hover{color:var(--mint);border-color:var(--mint)}
.veil-line i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--mint),var(--gold));transform:scaleX(var(--p,0));transform-origin:left;transition:transform .35s ease-out}
body.prelude-ready .veil,body.ready .veil,body.failed .veil{opacity:0;visibility:hidden;pointer-events:none}
body.prelude-ready .veil-inner,body.ready .veil-inner{transform:translateY(-14px);opacity:0}
body.agency main{transform:scale(1.045);transition:transform 2.6s cubic-bezier(.2,.7,.1,1)}
body.agency.prelude-ready main,body.agency.ready main,body.agency.static main,body.agency.failed main{transform:none}
@keyframes veil-breathe{50%{opacity:.45}}

/* Atmosphere --------------------------------------------------------------- */
.atmos{position:fixed;inset:0;z-index:4;pointer-events:none;background:
 radial-gradient(70% 55% at 6% -4%,#3ad1b622,transparent 62%),
 radial-gradient(45% 40% at 104% 100%,#8f7bff12,transparent 60%)}
.dust{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 2.4s ease 1s;width:100%;height:100%}
body.ready .dust{opacity:1}
body.sheet-open .dust,body.static .dust,body.failed .dust,body.capture .dust,body.capture .atmos{opacity:0}

/* Header: wordmark and one capsule ---------------------------------------- */
.studio-header{padding:22px 26px;background:linear-gradient(#06090fcc,#06090f66 45%,transparent);align-items:flex-start;padding-bottom:40px}
.studio-mark{gap:12px;align-items:flex-start;font:400 22px/1 var(--serif);letter-spacing:.01em;color:var(--ink)}
.studio-mark svg{width:24px;height:29px;stroke:var(--mint);stroke-width:.9;margin-top:-3px}
.studio-mark small{margin-top:10px;font:300 8.5px/1.2 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.studio-navigation{gap:0;height:44px;padding:0 4px;border-radius:999px;border:1px solid var(--line);background:#0b121ad9;box-shadow:0 10px 40px #0007,inset 0 1px 0 #ffffff12}
.studio-navigation a,.studio-navigation button{font:400 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);min-height:36px;padding:0 16px;gap:0;border-bottom:0;position:relative}
.studio-navigation a span{display:none}
.studio-navigation>*+*::before{content:"";position:absolute;left:-1px;top:50%;width:1px;height:14px;background:var(--line);transform:translateY(-50%)}
.studio-navigation a:hover,.studio-navigation button:hover{color:var(--mint)}
.studio-navigation a::after,.studio-navigation button:not(.sound-toggle):not(.inquire)::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:1px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.1,1)}
.studio-navigation a:hover::after,.studio-navigation button:not(.sound-toggle):not(.inquire):hover::after{transform:scaleX(1)}
.studio-navigation .inquire{padding-left:16px;gap:9px}
.studio-navigation .inquire span{font-size:12px;transform:translateY(-1px)}
.studio-navigation .inquire::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);order:-1;margin-right:9px}
.sound-toggle{display:flex;align-items:center;gap:8px;padding:0 14px 0 12px!important}
.sound-toggle i{display:flex;align-items:flex-end;gap:2px;height:10px;width:13px}
.sound-toggle i b{width:1.5px;height:3px;background:currentColor;border-radius:1px;transition:height .3s}
.sound-toggle[aria-pressed=true] i b{animation:eq .9s ease-in-out infinite alternate}
.sound-toggle[aria-pressed=true] i b:nth-child(2){animation-delay:-.3s}.sound-toggle[aria-pressed=true] i b:nth-child(3){animation-delay:-.55s}.sound-toggle[aria-pressed=true] i b:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:2px}to{height:10px}}
.sound-toggle em{font-style:normal}
.sound-toggle[aria-pressed=true] em::after{content:" ●";color:var(--mint)}
.sound-toggle[aria-pressed=false] em::after{content:" ○";color:var(--mist)}

/* Hero copy: fewer words, larger, set in a real serif ----------------------- */
.agency .poem-opening{top:auto;bottom:15vh;left:6vw;max-width:min(760px,80vw)}
.agency .poem-opening:before{inset:-20vh -14vw -24vh -12vw;background:radial-gradient(ellipse at 22% 62%,#06090fe6 0%,#06090fb0 36%,#06090f40 60%,transparent 78%)}
.agency .poem-opening h1{font:300 10px/1.6 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--mist);margin:0 0 26px;display:flex;gap:16px;align-items:center}
.agency .poem-opening h1::before{content:"";width:28px;height:1px;background:var(--mint);opacity:.7}
.agency .poem-opening p{font:400 clamp(60px,7.2vw,118px)/.92 var(--serif);letter-spacing:-.035em;color:var(--ink)}
.agency .poem-opening p em{font:400 .98em/.9 var(--serif);font-style:italic;letter-spacing:-.02em;margin:0;color:var(--mint)}
.agency .poem-opening p em.script{font:400 1.36em/.85 "Grove Script",cursive;font-style:normal;letter-spacing:0;color:#e7f8da;margin:8px 0 0 -2px}
.agency .studio-intro{font:300 11.5px/1.75 var(--mono);letter-spacing:.06em;margin-top:30px;max-width:380px;color:var(--mist)}
.agency .studio-intro b{font-weight:400;color:var(--ink)}
.agency.entered .poem-opening>*{animation:rise 1.3s cubic-bezier(.2,.7,.1,1) both}
.agency.entered .poem-opening h1{animation-delay:.2s}.agency.entered .poem-opening p{animation-delay:.35s}.agency.entered .poem-opening .studio-intro{animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(34px)}}
.agency .poem-passage p,.agency .poem-arrival p,.celestial-words p,.coast-caption p{font-family:"Grove Script",cursive}
.celestial-words small,.coast-caption small,.star-cue,.poem-arrival span{font-family:var(--mono);font-weight:300;letter-spacing:.24em;text-transform:uppercase;font-size:10px}
.celestial-words span,.coast-caption span{font-family:var(--serif);font-size:17px;letter-spacing:0}

/* Entry note and scroll cue --------------------------------------------------- */
.entry-note{left:auto;right:26px;bottom:88px;text-align:right;color:var(--ink)}.entry-note::before{content:"";position:absolute;z-index:-1;inset:-40px -60px -50px -120px;background:radial-gradient(ellipse at 75% 55%,#06090fd6 0%,#06090f8c 40%,transparent 72%);pointer-events:none}
.entry-note>span{font:300 9px/1 var(--mono);letter-spacing:.24em;color:var(--mist)}
.entry-note p{font:400 17px/1.3 var(--serif);font-style:italic;margin:10px 0 2px;color:var(--ink)}
.entry-note button{font:300 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);gap:10px;margin-left:auto;flex-direction:row-reverse}
.entry-note button span{font-size:12px}
.entry-note button:hover{color:var(--mint);text-decoration:none}
.scroll-cue{left:50%;bottom:20px;width:auto;height:auto;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--mist)}
.scroll-cue svg{display:none}
.scroll-cue::before{content:"Scroll";font:300 9px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase}
.scroll-cue::after{content:"";width:1px;height:44px;background:linear-gradient(var(--mint),transparent);animation:cue-drop 2.2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue-drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}46%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
body.paused .scroll-cue::after,body.reduced .scroll-cue::after{animation:none}
.journey-line{left:26px;top:38%;height:24%;background:#ffffff14}.journey-line i{background:var(--mint)}

/* Controls capsule ------------------------------------------------------------ */
nav[aria-label="Journey controls"]{right:26px;bottom:26px;gap:2px;height:40px;padding:0 4px;border-radius:999px;border:1px solid var(--line);background:#0b121ad9;box-shadow:0 10px 40px #0007,inset 0 1px 0 #ffffff12}
nav .project-link{display:none}
nav button{width:32px;height:32px;border:0;background:none;backdrop-filter:none;color:var(--ink)}
nav button:hover{background:#ffffff14}
nav button svg{width:15px;height:15px;stroke-width:1.2}
.quality-control{display:flex;align-items:center;padding-right:2px;margin-right:2px;border-right:1px solid var(--line)}
.quality-control select{height:32px;max-width:none;padding:0 22px 0 12px;border:0;border-radius:999px;background:none;color:var(--mist);font:300 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23a9b6b3' stroke-width='1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:7px}
.quality-control select:hover{color:var(--ink)}
.quality-control select option{background:#0b121a;color:var(--ink)}
body.arrived nav{border-color:#bfffe655}

/* Ending ------------------------------------------------------------------------- */
.ending #send-light{font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;border-color:var(--gold);color:var(--gold);background:#06090fb0;border-radius:999px;min-width:190px;height:44px}
#light-status{font:400 13px/1.5 var(--serif);font-style:italic}
.ending-links{font:300 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
/* The aside serves the pond (Touch the light) and the ending; the onward links belong to the ending only. */
.ending:has(#send-light:not([hidden])) .ending-links{display:none}
/* At the ending the links sit over the cloud sea: the same dark capsule as the other controls keeps them legible. */
.ending:has(#send-light[hidden]) .ending-links{display:inline-flex;padding:0 18px;min-height:44px;background:#06090fb0;border:1px solid #bfffe633;border-radius:999px}
.ending:has(#send-light[hidden]):before{display:none}
.ending-links button,.ending-links a{text-decoration:none;color:var(--mist)}.ending-links button:hover{color:var(--mint)}

/* Sheets ------------------------------------------------------------------------- */
.studio-sheet{background:linear-gradient(150deg,#0c141c,#080d13 60%,#0a1219);border-left:1px solid var(--line);box-shadow:-40px 0 120px #0009;font:300 15px/1.7 var(--mono);color:var(--ink)}
.studio-sheet::backdrop{background:#03050899}
.sheet-bar{background:#0b121af0;border-bottom:1px solid var(--line);font:300 9px/1.5 var(--mono);letter-spacing:.24em}
.sheet-bar button{font:300 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.field-caption p{font:400 32px/1.15 var(--serif);letter-spacing:-.02em}.field-caption em{font-style:italic;font-family:var(--serif);font-size:1em}.field-caption>span{font-family:var(--mono);letter-spacing:.24em}
.kicker,.studio-sheet p.kicker{font:300 9px/1.6 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mist)}
.studio-sheet h2{font:400 clamp(46px,4.8vw,78px)/.98 var(--serif);letter-spacing:-.035em}
.studio-sheet h2 em{font:italic 400 1em/.98 var(--serif);letter-spacing:-.03em;margin:0;color:var(--mint)}
.studio-sheet h3{font:400 28px/1.15 var(--serif);letter-spacing:-.02em}
.studio-sheet p,.sheet-lead{font-family:var(--serif);font-size:17px;line-height:1.6;letter-spacing:0;color:var(--mist)}
.sheet-lead{font-size:20px;color:var(--ink)}
.case-columns p:not(.kicker),.work-summary p,.case-resolution p,.offerings p{font-size:16px;line-height:1.6}
.process b{font:400 24px/1.2 var(--serif)}.process span{font-family:var(--serif);font-size:16px}
.offerings h3{font-size:30px}.offerings span,.work-art figcaption,.work-facts dt,.offerings small,.work-facts dd{font-family:var(--mono);font-weight:300;letter-spacing:.18em}
.work-facts dd{letter-spacing:.04em;font-size:11px}.offerings small{letter-spacing:.06em;font-size:10px}
.sheet-action,.text-link{font:300 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.sheet-action.dark{border-bottom-color:var(--mint)}
.studio-sheet .sheet-note{font:300 11px/1.8 var(--mono);letter-spacing:.02em;color:#7f8d8a}
.sheet-footer{font:italic 400 17px/1.5 var(--serif)}
#project-brief label{font:300 10px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
#project-brief input,#project-brief textarea,#project-brief select{font:400 15px/1.5 var(--serif);background:#ffffff08;border-bottom-color:#ffffff33;color:var(--ink);letter-spacing:0}
#project-brief select option{background:#0b121a}
#project-brief input::placeholder,#project-brief textarea::placeholder{color:#6f7d7a}
.brief-actions p{font:300 10px/1.7 var(--mono);letter-spacing:.06em}
.work-art{background:#0b121a}
.load-notice{font:300 11px/1.6 var(--mono);letter-spacing:.08em;color:var(--mist)}

/* Static edition keeps the same voice ---------------------------------------- */
.agency.static .studio-header{background:#06090f}
body.static .journey-transcript{background:#0b121af2;border-color:var(--line);font:300 16px/1.75 var(--serif);color:var(--ink)}
.agency-noscript{background:#0b121a}

/* Phones choose their own quality; the control is desktop furniture. */
@media(pointer:coarse){.quality-control{display:none}}

/* Responsive ------------------------------------------------------------------ */
@media(max-width:1000px){.agency .poem-opening{bottom:16vh}.agency .poem-opening p{font-size:clamp(56px,9vw,84px)}}
@media(max-width:700px){.studio-header{padding:16px 18px}.studio-mark{font-size:19px}.studio-mark small{display:none}.studio-navigation a,.studio-navigation button{padding:0 11px;font-size:9.5px;letter-spacing:.14em}.sound-toggle em{display:none}.sound-toggle{padding:0 12px!important}.studio-navigation .inquire::after{display:none}}
@media(max-width:560px){.studio-header{flex-wrap:nowrap;gap:10px;background:linear-gradient(#06090fd9,#06090f70 50%,transparent);padding:14px 16px 34px;align-items:center}.studio-mark{font-size:0}.studio-mark svg{width:26px;height:31px;margin:0}.studio-navigation{width:auto;height:40px;justify-content:flex-start;padding:0 3px}.studio-navigation a,.studio-navigation button{min-height:32px;padding:0 10px;font-size:9px;letter-spacing:.12em}.studio-navigation .inquire{padding-right:8px}.studio-navigation .inquire span{font-size:11px}.sound-toggle{padding:0 10px!important}.agency .poem-opening{bottom:23vh;left:7vw;max-width:86vw}.agency .poem-opening h1{font-size:9px;margin-bottom:18px;max-width:none}.agency .poem-opening p{font-size:clamp(50px,13.5vw,64px);letter-spacing:-.03em}.agency .poem-opening p em.script{font-size:1.36em}.agency .studio-intro{font-size:10.5px;line-height:1.7;margin-top:18px;max-width:290px}.agency .studio-intro br{display:none}.entry-note{right:16px;bottom:78px}.entry-note p{display:none}.entry-note>span{display:block;margin-bottom:6px}.entry-note button{min-height:32px}.entry-note::before{inset:-24px -40px -20px -80px}nav[aria-label="Journey controls"]{right:16px;bottom:16px}.scroll-cue{display:none}.journey-line{left:12px}}
@media(max-width:560px){.ending-links{flex-wrap:wrap;justify-content:center;gap:6px 14px;letter-spacing:.1em;font-size:9.5px}.ending{width:calc(100% - 28px)}}
@media(max-height:740px) and (max-width:560px){.agency .poem-opening p{font-size:46px}.agency .poem-opening h1{margin-bottom:14px}.agency .studio-intro{margin-top:14px}.entry-note{bottom:76px}}
@media(max-height:680px) and (min-width:561px){.agency .poem-opening{bottom:13vh}.agency .poem-opening p{font-size:clamp(48px,6vw,70px)}.agency .studio-intro{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.veil,.veil-inner,body.agency main{transition:none}.veil svg,.sound-toggle i b,.scroll-cue::after{animation:none!important}.agency.entered .poem-opening>*{animation:none}}
body.reduced .veil,body.reduced .veil-inner,body.reduced.agency main{transition:none}
body.capture .veil,body.capture .studio-navigation,body.capture .entry-note{visibility:hidden!important}

/* Prelude: the void and the emblem. Everything else waits. ------------------ */
#prelude{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;display:block}
body.static #prelude,body.failed #prelude,body.capture #prelude{display:none}
body.prelude .poem-opening{opacity:0!important}
body.prelude .grove-pointer span,body.prelude-live .grove-pointer span{display:none}
body.prelude .entry-note,body.prelude .journey-line{opacity:0;visibility:hidden}
body.prelude:not(.ready) .scroll-cue{opacity:1}
body.prelude:not(.ready) .scroll-cue::before{content:"Preparing the forest · " attr(data-load)}
body.prelude:not(.ready) .scroll-cue::after{animation:none;transform:scaleY(var(--load,0));transform-origin:top;background:linear-gradient(var(--mint),var(--gold))}
.scroll-cue{z-index:4}
body.prelude .scroll-cue::before{content:"Scroll to enter"}
.prelude-note{position:fixed;z-index:4;left:26px;bottom:30px;max-width:min(360px,38vw);color:var(--ink);pointer-events:none;opacity:0;transition:opacity .8s ease}.prelude-note small{line-height:1.6}
.sound-invite{pointer-events:auto;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;margin-top:14px;width:auto;height:auto;min-height:32px;padding:0;border:0;border-radius:0;background:none;font:300 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mist);cursor:pointer}.sound-invite b{color:var(--gold);font-size:11px;text-shadow:0 0 8px var(--gold)}.sound-invite:hover{color:var(--ink)}body.sound-on .sound-invite,body:not(.prelude) .sound-invite{display:none}
body.prelude.ready .prelude-note{opacity:1;transition-delay:1.1s}
.prelude-note span{display:block;font:300 9px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--mist)}
.prelude-note p{margin:10px 0 6px;font:italic 400 18px/1.25 var(--serif)}
.prelude-note small{display:block;font:300 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
body.prelude .studio-header{background:none}
body.prelude .atmos{opacity:1;background:radial-gradient(62% 52% at 8% -2%,#3ad1b64a,transparent 62%),radial-gradient(40% 36% at 102% 102%,#8f7bff24,transparent 60%)}
@media(max-width:560px){.prelude-note{left:16px;bottom:78px;max-width:min(320px,70vw)}.prelude-note p{font-size:16px}.prelude-note small{line-height:1.7}body.prelude .scroll-cue{display:none}.prelude-note small::after{content:" · Scroll to enter"}body.remembered .prelude-note small::after{content:""}}

/* No per-frame blurs over the live canvas. */
button,.project-link,.quality-control select{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* A frame cap is not our fault, but the visitor should know it is a cap. Shown once per session. */
.frame-hint{position:fixed;right:22px;bottom:78px;z-index:5;display:flex;align-items:center;gap:12px;max-width:min(360px,calc(100% - 44px));padding:12px 10px 12px 16px;border:1px solid #bfffe633;border-radius:14px;background:#06090fd0;color:var(--mist);font:300 10px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;animation:frame-hint-in .8s ease both}
.frame-hint[hidden]{display:none}.frame-hint button{border:0;background:none;color:var(--ink);font:300 16px/1 var(--mono);width:32px;height:32px;cursor:pointer}.frame-hint button:hover{color:var(--mint)}
@keyframes frame-hint-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:800px){.frame-hint{right:14px;left:14px;bottom:calc(140px + env(safe-area-inset-bottom));max-width:none}}
@media(prefers-reduced-motion:reduce){.frame-hint{animation:none}}