@import url('./project-motion.css');
@font-face{font-family:Inter;src:url('/studio-assets/bcb2841efd67379971dd/assets/fonts/Inter-latin.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:Fraunces;src:url('/studio-assets/bcb2841efd67379971dd/assets/fonts/Fraunces-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
:root{color-scheme:dark;--night:#080d17;--ink:#e9e6e1;--dim:#a6b0b9;--teal:#72b8c2;--orange:#ff692e;--rule:#e9e6e125;font-family:Inter,system-ui,sans-serif;background:var(--night);color:var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-underline-offset:5px}a:hover,button:hover{color:var(--orange)}a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:7px}button{cursor:pointer}button:disabled{cursor:default}svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.skip-link{position:absolute;top:12px;left:20px;background:var(--ink);color:var(--night);padding:12px;z-index:20;transform:translateY(-160%)}.skip-link:focus{transform:none}

.space-stage{position:relative;height:100svh;min-height:740px;max-height:1150px;overflow:clip;isolation:isolate;background:#03070e;outline:none}
.space-stage.is-playing #game-canvas{pointer-events:auto;touch-action:none}
#space-canvas,#game-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#space-canvas{z-index:0}#game-canvas{z-index:4}
.space-stage[data-sky=fallback] #space-canvas{opacity:0}
.scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#02071045,transparent 65%),linear-gradient(0deg,#03070e9c,transparent 18%);z-index:1}
.navigation{position:absolute;z-index:8;left:6vw;right:6vw;top:30px;display:flex;align-items:center;justify-content:space-between}
.small-mark{display:inline-flex;width:38px;height:44px;color:var(--ink)}.small-mark svg{width:100%;height:100%}
.navigation-links{margin-left:auto;display:flex;align-items:center;gap:36px;font-size:13px}.navigation-links a{text-decoration:none;padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.hero-copy{position:absolute;top:27%;left:8vw;z-index:3;pointer-events:none}
.hero-copy h1{font-family:Inter,system-ui,sans-serif;font-size:clamp(82px,10.6vw,164px);font-weight:500;letter-spacing:-.065em;line-height:1.08;margin:0 0 22px;padding-right:.08em;text-shadow:0 2px 40px #02071080;white-space:nowrap}
.hero-copy h1 [data-stealable]{display:inline-block}
.hero-copy p{font-size:clamp(16px,1.6vw,21px);letter-spacing:-.015em;margin:0;color:var(--ink);text-shadow:0 2px 14px var(--night)}
.studio-cat{position:absolute;left:76%;top:43%;width:clamp(290px,30vw,430px);aspect-ratio:1;z-index:3;transform:translate(calc(-50% + var(--cat-x,0px)),calc(-50% + var(--cat-y,0px)));--ex:0;--ey:0;padding:0;border:0;background:none;color:inherit;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline-offset:-30px}
.studio-cat>svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:none;filter:drop-shadow(0 8px 24px #0006);pointer-events:none}
.studio-cat .pupil{transform:translate(calc(var(--ex,0)*7px),calc(var(--ey,0)*3px));stroke:none}
.studio-cat:focus-visible{outline:none}.studio-cat:focus-visible::before{content:"";position:absolute;inset:4% 12% 27%;border:1px solid #d0d9e16b;border-radius:8px}
.cat-hint{position:absolute;left:76%;top:55%;transform:translateX(-50%);z-index:3;font-size:11px;color:#c0ccda;letter-spacing:.03em;opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none}
.studio-cat[data-cue-ready=true]:hover~.cat-hint,.studio-cat[data-cue-ready=true]:focus-visible~.cat-hint{opacity:1}.is-playing .cat-hint{display:none}
.play-controls{position:absolute;left:8vw;bottom:10%;z-index:8;width:min(405px,42vw)}
.play-status{margin:0;min-height:0;font-size:12px;line-height:1.7;color:#c4cdd8;max-width:360px;text-wrap:pretty;text-shadow:0 2px 6px #000}
#play-stop{border:0;border-bottom:1px solid #d9e0e980;background:none;padding:12px 0;min-height:44px;color:var(--ink);font-size:12px;margin-top:8px}
.scene-controls{position:absolute;right:6vw;bottom:7%;z-index:8;display:flex;align-items:center}
.down-link{height:48px;width:48px;display:grid;place-items:center;text-decoration:none}.down-link svg{width:24px;height:24px}
.projects-section{position:relative;max-width:1600px;margin:auto;padding:78px 7vw 100px;border-top:1px solid var(--rule);min-height:385px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-title h2{font-family:Inter,system-ui,sans-serif;font-size:clamp(43px,5.5vw,76px);font-weight:400;line-height:1.15;letter-spacing:-.045em;margin:0}.orbit-glyph{width:135px;height:72px;color:var(--teal);opacity:.6;stroke-width:1}.projects-empty{margin:38px 0 25px;font-size:18px;color:var(--dim)}.projects-empty p{margin:0}.text-link{border:0;border-bottom:1px solid #72b8c277;color:var(--teal);background:none;padding:5px 0;font-size:13px}.text-link:after{content:'↗';margin-left:15px}.projects-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:28px}.projects-list:empty{margin-top:0}.project-card{display:block;width:100%;text-align:left;background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:26px}.project-card:hover{border-color:var(--teal)}.project-card h3{font-family:Inter,system-ui,sans-serif;font-size:34px;margin:0 0 12px;font-weight:450}.project-state{display:inline-block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--teal);margin:10px 0 14px}.project-card p{font-size:14px;line-height:1.6;color:var(--dim)}.project-platforms{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--dim)}.project-platforms span{padding:5px 9px;border:1px solid var(--rule);border-radius:3px}.site-footer{border-top:1px solid var(--rule);padding:30px 7vw 38px;display:flex;align-items:center;justify-content:space-between;gap:25px;color:var(--dim);font-size:11px}.site-footer>div{display:flex;gap:28px}.site-footer a{text-decoration:none}
.project-dialog{width:min(920px,calc(100% - 48px));max-height:calc(100svh - 64px);padding:0;border:1px solid #dce3e940;border-radius:10px;background:#14181e;color:var(--ink);box-shadow:none;overscroll-behavior:contain}.project-dialog::backdrop{background:#030812c9;backdrop-filter:blur(12px)}.project-dialog-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:15px 24px;border-bottom:1px solid var(--rule);background:#14181ef5;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}.project-dialog form{margin:0}.close-project{border:1px solid var(--rule);border-radius:50%;background:none;color:var(--ink);height:38px;width:38px;display:grid;place-items:center}.close-project svg{width:18px;height:18px}#project-detail{padding:34px}#project-detail h2,#project-detail h3{font-family:Inter,system-ui,sans-serif;font-weight:500;letter-spacing:-.035em;line-height:1.15;font-size:clamp(32px,5vw,56px);margin:0 0 12px}#project-detail p{max-width:60ch;line-height:1.7}#project-detail figure{margin:24px 0}.project-image,.projectdetailimg{display:block;width:100%;max-height:440px;object-fit:contain;background:#07101a;border-radius:3px}#project-detail figcaption{font-size:11px;color:var(--dim);line-height:1.7;margin-top:10px}.project-description{font-size:17px}.local-review-badge{position:fixed;bottom:12px;left:12px;z-index:30;font-size:11px;padding:8px 13px;border:1px solid var(--teal);background:var(--night);color:var(--ink);border-radius:4px}
.projects-list{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:28px;gap:26px}.project-card{padding:0 0 24px;border:0;border-radius:0;border-bottom:1px solid var(--rule)}.project-card-image{width:100%;aspect-ratio:1.25;object-fit:contain;display:block;padding:30px;background:#111d28;margin-bottom:24px;border:1px solid var(--rule);border-radius:3px;transition:border-color .2s}.project-card:hover .project-card-image{border-color:var(--teal)}.project-card-title{display:block;font:500 26px/1.2 Inter,system-ui,sans-serif;letter-spacing:-.025em;color:var(--ink)}.project-card-summary{display:block;font:400 13px/1.6 Inter,system-ui,sans-serif;color:var(--dim);margin-top:13px;min-height:3.4em}.project-card .project-state{font-size:10px;margin:14px 0 0}.project-platforms{list-style:none;padding:0;margin:16px 0}.project-platforms li{padding:5px 9px;border:1px solid var(--rule);border-radius:3px}.project-store-link{display:inline-block;margin-top:20px;border:1px solid var(--teal);border-radius:30px;padding:12px 20px;text-decoration:none;font-size:13px;color:var(--ink)}.project-store-link:hover{border-color:var(--orange)}
.project-card-image{height:auto}.project-platforms{display:flex}.project-card .project-card-summary{min-height:3.4em}

@media(max-width:760px){
.space-stage{height:100svh;min-height:760px;max-height:1000px}
.navigation{top:20px;left:25px;right:25px}.small-mark{width:28px}.navigation-links{font-size:12px;gap:24px}
.hero-copy{top:18%;left:25px;right:25px}.hero-copy h1{font-size:clamp(65px,18vw,112px);margin-bottom:14px;letter-spacing:-.065em}.hero-copy p{font-size:16px}
.studio-cat{left:53%;top:49%;width:min(340px,90vw)}.cat-hint{left:50%;top:60%;opacity:0;white-space:nowrap}
.play-controls{left:25px;right:25px;bottom:8%;width:auto}.play-status{font-size:11px;max-width:270px}.scene-controls{right:20px;bottom:3%}
.projects-section{padding:48px 25px 65px;min-height:310px}.section-title h2{font-size:46px}.orbit-glyph{display:none}.projects-empty{font-size:16px;margin-top:25px}.projects-list{grid-template-columns:1fr}
.site-footer{padding:26px 25px;align-items:flex-start;flex-wrap:wrap;font-size:10px;gap:22px}.site-footer>div{gap:23px;flex-wrap:wrap}.project-dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px)}.project-dialog-top{padding:12px 17px}#project-detail{padding:25px 21px}.project-description{font-size:15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
.studio-cat::after{content:'';position:absolute;left:38%;right:38%;top:76%;height:2px;background:var(--orange);opacity:0;transform:scaleX(var(--charge,0));transform-origin:left;pointer-events:none}
.studio-cat[data-charging=true]::after{opacity:1}
.studio-cat[data-charging=true] .pupil{filter:drop-shadow(0 0 5px #ff7428)}
.studio-cat[data-cue-ready=true][data-charging=true]~.cat-hint{opacity:1}

.is-playing .scene-shade{background:linear-gradient(90deg,#02071045,transparent 65%),linear-gradient(0deg,#03070eed,transparent 38%)}

/* The title, cat and projects inhabit the same scene. The sky follows its height. */
.space-stage{height:auto;min-height:100svh;max-height:none;padding-top:420px}
.hero-copy{top:142px}.hero-copy h1{font-size:clamp(76px,9.5vw,144px)}
.studio-cat{left:76%;top:220px;width:clamp(260px,29vw,365px)}.cat-hint{left:76%;top:315px}
.space-stage>.projects-section{position:relative;z-index:5;border:0;padding:16px 7vw 48px;background:none;min-height:0}
.space-stage .section-title{padding-left:3px}.space-stage .section-title h2{font:500 13px/1.5 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.space-stage .orbit-glyph{display:none}.space-stage .projects-list{margin-top:20px;margin-bottom:23px}
.space-stage .play-controls{top:326px;bottom:auto;left:8vw;max-width:430px;width:44vw}
.space-stage .scene-controls{display:none}
.space-stage .text-link{font-size:12px}.space-stage .projects-empty{margin-top:36px;margin-bottom:70px}
@media(max-width:699px){.space-stage{padding-top:470px}.navigation{top:20px}.hero-copy{top:105px;left:25px}.hero-copy h1{font-size:clamp(56px,17vw,108px);margin-bottom:12px}.hero-copy p{font-size:15px}.studio-cat{top:325px;left:50%;width:265px}.cat-hint{left:50%;top:420px;font-size:10px}.space-stage>.projects-section{padding:22px 25px 40px}.space-stage .play-controls{top:428px;left:25px;right:25px;width:auto;max-width:none}.space-stage.is-playing{padding-top:520px}.space-stage.is-playing .play-controls{top:405px}.space-stage .section-title h2{font-size:11px}}

.space-stage.is-playing:focus-visible .play-controls{outline:2px solid var(--teal);outline-offset:8px;border-radius:3px}

/* Keep sky projection and GPU backing size independent of project expansion. */
#space-canvas{position:fixed;inset:0;width:100%;height:100svh}
.site-footer{position:relative;background:var(--night)}

/* Local typography trial: existing Inter, with restrained material and sharper edges. */
.hero-copy h1{letter-spacing:-.06em;text-shadow:none}

/* Sources stays in the page; the standalone document remains a fallback. */
.sources-dialog{position:fixed;inset:auto;top:50%;left:50%;z-index:40;margin:0;transform:translate(-50%,-50%);transform-origin:center;width:min(760px,calc(100% - 40px));max-height:calc(100svh - 40px);overflow:auto;background:linear-gradient(145deg,#202c42df,#0c1220ed);border:1px solid #dae9ff42;border-radius:18px;box-shadow:0 12px 52px #02081766,inset 0 1px 0 #ffffff13;backdrop-filter:blur(24px) saturate(1.25);-webkit-backdrop-filter:blur(24px) saturate(1.25);overscroll-behavior:contain}
.sources-dialog::backdrop{background:transparent;backdrop-filter:none}
.sources-dialog[data-sources-phase=closing]{pointer-events:none}
.sources-dialog-top{background:#152035e8;backdrop-filter:blur(16px);text-transform:none;letter-spacing:normal;gap:24px}
.sources-dialog-top h2{font:500 20px/1.3 Inter,system-ui,sans-serif;letter-spacing:-.025em;margin:0;color:var(--ink)}
.sources-dialog-top button{min-height:44px;padding:8px 14px;border:1px solid var(--rule);border-radius:6px;background:none;color:var(--ink);font-size:13px}
.sources-dialog-top button:hover{border-color:var(--teal)}
.sources-content{padding:28px 30px 34px;font:400 14px/1.7 Inter,system-ui,sans-serif;color:var(--dim);overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.sources-content section+section{margin-top:28px}
.sources-content h2,.sources-content h3{font:500 16px/1.4 Inter,system-ui,sans-serif;margin:0 0 10px;color:var(--ink)}
.sources-content p{margin:0 0 12px}
.sources-content a{color:var(--ink);text-decoration-color:#a6b0b966;text-underline-offset:4px}
.sources-content a:hover{color:var(--orange)}
@media(max-width:699px){.sources-dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px)}.sources-content{padding:24px 20px 28px;font-size:13px}}

/* A brief studio introduction shares the scene; copy remains owner-editable. */
.about-section{position:relative;z-index:5;display:grid;grid-template-columns:1fr 2fr;gap:40px;max-width:1600px;margin:0 auto;padding:54px 7vw 70px;border-top:1px solid var(--rule);scroll-margin-top:100px}
.about-section h2{font:500 13px/1.5 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:8px 0}
.about-content p{max-width:24ch;margin:0 0 26px;font:400 clamp(24px,3vw,40px)/1.3 Inter,system-ui,sans-serif;letter-spacing:-.035em;text-wrap:balance}
.about-links{display:flex;gap:28px;font-size:13px}.about-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration-thickness:1px;text-underline-offset:6px}
@media(max-width:760px){.about-section{grid-template-columns:1fr;gap:16px;padding:38px 25px 45px}.about-content p{font-size:27px}}

/* The Projects heading stays secondary but is easier to find beside the scene. */
.space-stage .section-title h2{font-size:15px;color:var(--dim)}
@media(max-width:699px){.space-stage .section-title h2{font-size:13px}}

/* About candidate, 8 October: a short story and a timeline he can add to. */
.about-content .about-story{margin:0 0 26px}
.about-content .about-story p{max-width:46ch;margin:0 0 10px;font:400 17px/1.65 Inter,system-ui,sans-serif;letter-spacing:-.005em;color:#c9d0d6;text-wrap:pretty}
.about-timeline-title{font:500 13px/1.5 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:30px 0 10px}
.about-timeline{margin:0 0 30px;max-width:46ch;border-top:1px solid var(--rule)}
.about-timeline div{display:grid;grid-template-columns:9.5em 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font:400 15px/1.6 Inter,system-ui,sans-serif}
.about-timeline dt{color:var(--dim)}.about-timeline dd{margin:0}
@media(max-width:760px){.about-content .about-story p{font-size:16px}.about-timeline div{grid-template-columns:8.5em 1fr;font-size:14px}}

/* ---- 8 October, pages pass ------------------------------------------------
   The backdrop. The photograph was the play area's own background, stretched
   to cover a section several screens tall, so wherever the rendered sky did
   not reach (the strip a phone uncovers when its toolbar slides away) a
   blown-up smear of it showed. Now the ground under the sky is plain night,
   and the photograph is only for a device with no rendered
   sky, where it is sized to the window and not to the section. */
.space-stage[data-sky=fallback]::before{content:"";position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;background:#03070e url('assets/stars-nasa.jpg') center/cover}
/* iOS Safari also shows the page under its floating toolbar, where no fixed
   layer can reach (seen in the iOS 27 simulator: the sky stops at a hard line
   above the toolbar). There the sky fades into the same night colour over
   its last 96 px, so it has no edge. iOS only; closed page only. */
@supports(-webkit-touch-callout:none){.space-stage:not(.is-playing)::after{content:"";position:fixed;left:0;right:0;bottom:0;height:96px;z-index:0;pointer-events:none;background:linear-gradient(#03070e00,#03070e)}}

/* The footer takes the header's treatment: the sky runs under it, with a
   thin backing and the same hairline. Plain transparency, no blur. Its links
   are full-height targets. */
.site-footer{background:linear-gradient(#080d1740,#080d1799);border-top:1px solid #e9e6e112;padding:14px 7vw 18px;font-size:13px;gap:20px}
.site-footer>span{text-shadow:0 1px 6px var(--night)}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;text-shadow:0 1px 6px var(--night)}

/* Phone: readable type and full-size targets. Nothing a visitor reads is
   under 14 px. The footer's links come first on their own row, the same
   left edge as the page; the copyright line sits under them. */
@media(max-width:760px){
 .site-footer{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0;padding:8px 25px 20px;font-size:15px}
 .site-footer>div{order:-1;gap:30px;flex-wrap:nowrap}
 .site-footer>span{font-size:14px}
}
@media(max-width:699px){
 .hero-copy p{font-size:17px}
 .space-stage .section-title h2{font-size:14px}
 .about-section h2,.about-timeline-title{font-size:14px}
 .about-content .about-story p{font-size:17px}
 .about-timeline div{font-size:15px}
 .about-links{font-size:15px}
 .sources-content{font-size:15px}
 /* Project entries: only the type. Their layout measures its own text
    (project-reserve.js, project-motion.js), so the held space follows. */
 .project-deck [data-project-layer=summary],.project-deck .project-inline-description{font-size:15px}
 .project-deck .project-inline-actions a,.project-deck .project-inline-actions button{font-size:14px}
 .project-gallery-status{font-size:14px}
 .project-deck .project-inline-meta{font-size:12px}
}