@font-face{font-family:Space;src:url('assets/space-grotesk.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:Mono;src:url('assets/ibm-plex-mono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Source;src:url('assets/fonts/source-sans-latin.woff2') format('woff2');font-weight:300 600;font-style:normal;font-display:swap}
:root{color-scheme:dark;--ink:#eeeee7;--muted:#b0bdc8;--dim:#9aa8b7;--accent:#e9a58e;--base:#070a10;--line:#aebec43c;--hover-time:420ms;--press-time:180ms;--scene-time:720ms;--ease:cubic-bezier(.2,.7,.2,1);font:100% Source,Arial,sans-serif;background:var(--base);color:var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:110px}body{margin:0;min-width:320px}button,input{font:inherit}button,a{color:inherit;-webkit-tap-highlight-color:transparent}a{text-decoration:none}button{background:none;border:0;padding:0;cursor:pointer}a,button{touch-action:manipulation}button:disabled{cursor:default;color:var(--dim)}[hidden]{display:none!important}
h1,h2,h3,h4,p,figure{margin:0}h1,h2{font-family:Space,Arial,sans-serif;font-weight:300;letter-spacing:-.035em}p{line-height:1.65}h1:focus,h2:focus,main:focus{outline:none}a,button,input{scroll-margin-block:130px 100px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:5px;text-decoration:underline;text-underline-offset:5px}
.skip-link{position:fixed;z-index:100;left:20px;top:12px;padding:14px 20px;background:var(--ink);color:var(--base);transform:translateY(-160%)}.skip-link:focus{transform:none}
.cosmos,.cosmos-shade{position:fixed;inset:0;pointer-events:none}.cosmos{background:var(--base);opacity:1;overflow:hidden}#cosmic-sky{position:absolute;inset:0;width:100%;height:100%}.cosmos-shade{background:linear-gradient(90deg,#070a1073 0%,#070a1047 40%,#070a1040 66%,#070a4059 100%),linear-gradient(180deg,#070a10cc 0%,#070a1061 13%,#070a1033 46%,#070a4040 74%,#070a10d1 100%)}
.masthead{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:16px 25px;flex-wrap:wrap;padding:20px 4vw;background:linear-gradient(#070a10f7,#070a10eb);border-bottom:1px solid #b0bdc814}
.identity a{display:flex;align-items:center;gap:12px;min-height:48px}.identity span{font-size:1rem;line-height:1.25}.identity small{display:block;color:var(--muted);font-size:.875rem;margin-top:4px}.utilities{display:flex;align-items:center;gap:22px;font-size:.9375rem}.utilities a,.utilities button{min-height:44px;display:inline-flex;align-items:center;gap:12px}.utilities button{color:var(--muted);font-size:.875rem}.utilities a{border-bottom:1px solid var(--line)}
/* The canvas has its own physical lane. No foreground object can cover copy. */
.stage{position:fixed;top:130px;right:3vw;width:44vw;height:min(69vh,720px);z-index:2;display:flex;flex-direction:column;pointer-events:none}.scene-window{position:relative;flex:1;min-height:0;width:100%}.folio-still,#folio-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#folio-canvas{visibility:hidden;pointer-events:auto;touch-action:pan-y}.scene-ready #folio-canvas{visibility:visible}.scene-ready .folio-still{visibility:hidden}.stage figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:18px 10px 0;color:var(--muted);font-size:.875rem;min-height:65px;border-top:1px solid var(--line)}.stage figcaption>span:first-child{max-width:65%;line-height:1.4}.scene-number{color:var(--accent);margin-right:8px}.orbit-controls{display:flex;align-items:center;pointer-events:auto}.orbit-controls button{min-width:44px;min-height:44px;font-size:1rem}.orbit-controls #reset-view{font-size:.875rem;padding:0 6px}.chapter-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px;pointer-events:auto;font-size:.875rem}.chapter-links a{min-height:44px;display:flex;align-items:center;gap:8px}.chapter-links span{color:var(--accent)}html:not([data-view="home"]):not([data-view="work"]) .chapter-links{visibility:hidden}.static-scene .orbit-controls{display:none!important}.scene-slot{display:none}

main{position:relative;z-index:3;width:100%;pointer-events:none}.view{position:relative;margin:0 0 0 6vw;width:42vw;max-width:660px;min-height:105svh;padding:80px 0 110px;pointer-events:auto;scroll-margin-top:100px;contain:style}.view+.view{border-top:1px solid var(--line)}.view :is(p,h1,h2,h3,h4,a,li){overflow-wrap:anywhere}.view h2{font-size:clamp(2.9rem,4.3vw,5rem);line-height:1.04;margin:0 0 30px;max-width:100%}.kicker{font-size:.875rem;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:26px;letter-spacing:.025em}.short-rule{width:22px;height:1px;background:var(--line)}.section-intro{font-size:1.2rem;max-width:36rem;color:var(--muted)}
.origin-view{min-height:calc(105svh - 90px);padding-top:60px}.origin-intro{max-width:28rem}.intro-lead{font:300 clamp(2rem,3vw,3.25rem)/1.14 Space,Arial,sans-serif;letter-spacing:-.025em}.intro-copy{font-size:1.125rem;max-width:26rem;margin-top:22px;color:var(--muted)}.primary-link{display:inline-flex;align-items:center;gap:45px;border-bottom:1px solid #aab2b6;padding:13px 2px;margin-top:25px;font-size:1.0625rem;min-height:48px}.primary-link span{color:var(--accent)}.origin-view h1{font-size:clamp(5rem,8vw,8.4rem);line-height:.88;letter-spacing:-.055em;margin-top:65px}.origin-view h1>span{display:block}.surname{padding-left:.28em;padding-top:.15em}.period{color:var(--accent)}.current-work{display:flex;flex-wrap:wrap;gap:12px 25px;margin-top:40px;font-size:.9375rem}.current-work>span{color:var(--dim);padding-top:2px}.current-work p{color:var(--muted)}.home-note{font-size:.875rem;color:var(--dim);margin-top:35px}
.featured-work{margin-top:42px}.project-index-item{display:grid;grid-template-columns:25px minmax(0,1fr) 20px;gap:18px;padding:24px 2px;align-items:start;border-top:1px solid var(--line);font-size:1.3rem;line-height:1.25}.project-index-item small{display:block;font:1rem/1.5 Source,Arial,sans-serif;color:var(--muted);margin-top:10px}.project-index-item>span:last-child{color:var(--accent)}.record-number{font:.8125rem Source;color:var(--accent);padding-top:5px}.featured-work .project-index-item{font:300 clamp(2rem,2.8vw,3rem)/1.05 Space,Arial,sans-serif;padding:28px 2px}.further-work{margin-top:50px}.further-work h3{font-weight:400;color:var(--muted);font-size:.875rem;margin-bottom:20px}
.project-heading .kicker{margin:25px 0 22px}.back-link{font-size:.9375rem;color:var(--muted);display:inline-flex;align-items:center;min-height:44px}.project-body>p{font-size:1.125rem;color:#c1cbd2;margin-bottom:24px}.project-body>p:first-child{color:var(--ink);font:300 1.7rem/1.4 Space,Arial,sans-serif;letter-spacing:-.015em}.contribution-title{font-size:.875rem;font-weight:400;color:var(--accent);margin:34px 0 12px}.contributions{margin:0 0 25px;padding:0;list-style:none}.contributions li{font-size:1.0625rem;line-height:1.6;padding:15px 0 15px 20px;position:relative;border-top:1px solid #ffffff1c;color:#bdc7ce}.contributions li:before{content:'—';position:absolute;left:0;color:var(--dim)}.project-body .stack{font-size:.9375rem;color:var(--dim);line-height:1.8}.next-project{border-block:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;align-items:center;padding:24px 3px;margin-top:40px;font-size:1rem;color:var(--muted)}.next-project>span:last-child{color:var(--ink);text-align:right;max-width:65%}.experiment{margin:38px 0 30px;border-top:1px solid var(--line);padding-top:22px}.experiment-label,.experiment label{display:block;font-size:.9375rem;color:var(--muted);margin-bottom:16px}.experiment button{color:var(--accent);font-size:1.0625rem;min-height:48px;padding:0 12px;border:1px solid var(--line)}.experiment button span{margin-left:20px}.experiment p{font-size:1rem;color:var(--muted);margin-top:16px;min-height:3.5em}.experiment input{width:100%;accent-color:var(--accent);min-height:44px;cursor:ew-resize}.process-steps{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:13px;font-size:1rem;flex-wrap:wrap}.process-steps li{color:var(--muted);padding-bottom:5px;border-bottom:2px solid transparent}.process-steps li+li:before{content:'→';padding-right:13px;color:var(--dim)}.process-steps [aria-current]{color:var(--accent);border-bottom-color:currentColor;font-weight:600}
.disciplines{margin-top:45px}.disciplines article{display:flex;gap:24px;border-top:1px solid var(--line);padding:27px 0}.disciplines article>span{color:var(--accent);font-size:.8125rem;padding-top:4px}.disciplines h3{font:300 2rem/1.15 Space,Arial,sans-serif;margin-bottom:18px}.disciplines p{font-size:1.125rem;color:var(--muted)}.disciplines a{display:inline-flex;align-items:center;margin-top:12px;font-size:1rem;color:var(--accent);min-height:44px}.toolkit{font-size:.9375rem;color:var(--dim);margin-top:35px}.toolkit span{display:block;color:var(--muted);font-size:1rem;margin-top:10px}
.about-intro{display:grid;grid-template-columns:135px minmax(0,1fr);gap:25px;margin-top:35px}.about-intro img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:saturate(.7)}.about-intro p{font-size:1.0625rem;color:var(--muted);margin-bottom:18px}.about-intro p:first-child{color:var(--ink);font-size:1.2rem}.about-intro a{font-size:1rem;color:var(--accent);display:inline-flex;min-height:44px;align-items:center}.career{margin-top:55px}.career>h3{font:300 2rem Space,Arial,sans-serif;margin-bottom:30px}.career article{border-top:1px solid var(--line);padding:25px 0 30px}.career time{font-size:.875rem;color:var(--accent);display:block;margin-bottom:13px}.career h4{font-size:1.2rem;font-weight:400;line-height:1.35}.career p{font-size:1.0625rem;color:var(--muted);margin:9px 0}.career small{display:block;margin-top:12px;font-size:.875rem;color:var(--dim)}
.contact-view .section-intro{margin:30px 0 40px}.email{font:300 clamp(2rem,3.15vw,3.1rem)/1.15 Space,Arial,sans-serif;letter-spacing:-.025em;display:inline-block;margin-bottom:38px}.email span{color:var(--accent);font:1.7rem Source}.contact-links{display:flex;flex-wrap:wrap;gap:12px 30px;font-size:1rem}.contact-links a{display:flex;align-items:center;min-height:44px}.location{font-size:1rem;color:var(--dim);margin-top:45px}.colophon{position:relative;z-index:4;display:flex;flex-wrap:wrap;gap:18px 25px;padding:25px 6vw 100px;width:50%;font-size:.875rem;color:var(--dim)}.colophon a{min-height:44px;display:flex;align-items:center}
/* Shared hover, focus and physical press language. Text remains selectable. */
.interaction-target{--mx:0px;--my:0px;--lift:0px;--scale:1;transform:translate3d(var(--mx),calc(var(--my) + var(--lift)),0) scale(var(--scale));transition:transform var(--hover-time) var(--ease),color var(--hover-time) var(--ease),border-color var(--hover-time) var(--ease),background-color var(--hover-time) var(--ease)}
@media(hover:hover) and (pointer:fine){a:hover,button:not(:disabled):hover{color:var(--accent);--lift:-2px}.project-index-item:hover,.next-project:hover,.primary-link:hover{border-color:var(--accent);background:#e9a58e09}}
a:focus-visible,button:focus-visible{--lift:-2px}.project-index-item:focus-visible,.next-project:focus-visible{background:#e9a58e12;border-color:var(--accent)}.interaction-target:active,.interaction-target.is-pressed{--scale:.975;--lift:1px;transition-duration:var(--press-time)}.skip-link.interaction-target{transform:translateY(-160%)}.skip-link.interaction-target:focus{transform:none}
html:not(.enhanced) .stage{display:none}html:not(.enhanced) .cosmos{opacity:.1}html:not(.enhanced) .view{width:min(760px,75%);max-width:760px;margin:0 auto;min-height:0;padding:75px 0}html:not(.enhanced) .colophon{width:min(760px,85%);margin:auto}.simple-motion .interaction-target{transform:none;transition:none}
@media(min-width:1700px){.view{margin-left:9vw}.stage{right:7vw;width:40vw}}
@media(max-width:1100px) and (min-width:900px){.view{margin-left:4vw;width:44vw}.stage{right:2vw;width:46vw}.about-intro{grid-template-columns:110px minmax(0,1fr);gap:18px}.stage figcaption{font-size:.8125rem}.utilities{gap:16px}}
@media(max-width:899px){
 html{scroll-padding-top:140px}.masthead{padding:15px 24px;gap:6px 16px}.identity img{width:30px;height:30px}.identity a{gap:9px}.identity span{font-size:.9375rem}.identity small{font-size:.8125rem}.utilities{gap:16px;flex-wrap:wrap;font-size:.875rem}.utilities button{font-size:.8125rem} .view,html:not(.enhanced) .view{width:auto;max-width:690px;margin:0 28px;min-height:0;padding:60px 0 80px}.view h2{font-size:clamp(2.7rem,7vw,4.5rem)}.view .kicker{font-size:.8125rem;gap:10px}.origin-view{padding-top:42px}.origin-view h1{font-size:clamp(4.7rem,13vw,7.5rem);margin-top:38px}.intro-lead{font-size:2.5rem}.origin-intro{max-width:32rem}.intro-copy{max-width:29rem}.home-note{display:none}
 .enhanced .scene-slot{display:block;position:relative;height:400px;width:100%;margin:30px 0;contain:layout style}.stage{position:absolute;inset:0;width:100%;height:100%;z-index:2}.stage .scene-window{min-height:180px}.stage figcaption{padding:8px 0 0;font-size:.8125rem;min-height:55px}.stage figcaption>span:first-child{max-width:65%}.chapter-links{gap:0 16px;font-size:.8125rem}.chapter-links a{min-height:44px}html:not([data-view="home"]):not([data-view="work"]) .chapter-links{display:none}
 .current-work{margin-top:30px}.colophon,html:not(.enhanced) .colophon{width:auto;padding:25px 28px 110px;margin:0}.featured-work .project-index-item{font-size:2.6rem}.about-intro{grid-template-columns:150px minmax(0,1fr)}.email{font-size:clamp(2rem,5.8vw,3.6rem)}
}
@media(max-width:500px){
 .masthead{padding:12px 22px;align-items:flex-start}.identity{width:100%}.utilities{width:100%;justify-content:space-between;gap:8px}.utilities a,.utilities button{min-height:44px}.view,html:not(.enhanced) .view{margin-inline:24px;padding-block:45px 65px}.view h2{font-size:clamp(2.6rem,11vw,3.8rem)}.intro-lead{font-size:2.2rem}.origin-view h1{font-size:21vw}.intro-copy,.section-intro{font-size:1.125rem}.enhanced .scene-slot{height:330px;margin:28px 0}.stage figcaption{font-size:.75rem}.stage figcaption>span:first-child{max-width:58%}.orbit-controls button{min-width:44px}.stage .scene-number{display:none}.chapter-links{gap:0 12px}.featured-work .project-index-item{font-size:2.2rem}.project-index-item{gap:11px;grid-template-columns:22px minmax(0,1fr) 16px}.about-intro{grid-template-columns:1fr}.about-intro img{width:145px}.email{font-size:clamp(1.85rem,8vw,2.6rem)}.next-project{font-size:.9375rem;gap:12px}.colophon{font-size:.8125rem}
}
@media(max-height:550px){.masthead{position:relative}.stage{top:85px;height:calc(100vh - 170px)}.stage figcaption{padding-top:0;min-height:44px}.chapter-links{display:none}.enhanced .scene-slot{height:310px}.scene-slot .stage{top:0;height:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.interaction-target{transform:none}}
@media(prefers-contrast:more){:root{--muted:#d5e0e8;--dim:#c2d0dc;--line:#b9cbd1}.cosmos{opacity:.12}.project-index-item,.next-project{border-width:2px}}
@media(prefers-contrast:less){:root{--accent:#dba48f}.cosmos{opacity:.24}}
@media(forced-colors:active){:root{color-scheme:light;--ink:CanvasText;--muted:CanvasText;--dim:CanvasText;--accent:LinkText;--base:Canvas;--line:CanvasText}.cosmos,.cosmos-shade,.stage,.scene-slot{display:none!important}body,.masthead{background:Canvas;color:CanvasText}.view{width:min(760px,85%);margin-inline:auto;min-height:0}a{color:LinkText}button{color:ButtonText;border:1px solid ButtonText}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid Highlight;outline-offset:4px}.process-steps [aria-current]{font-weight:600;border-bottom:3px solid CanvasText}.project-body>p,.contributions li{color:CanvasText}}
@media print{.stage,.scene-slot,.cosmos,.cosmos-shade,.utilities,.finale-orbits,.skip-link,.experiment{display:none!important}:root{color-scheme:light;background:#fff;color:#111}body{background:#fff}.masthead{position:static;background:none;border:0;padding:10px 0}.view{display:block!important;visibility:visible;width:100%!important;max-width:none!important;min-height:0!important;padding:25px 0!important;margin:0!important;contain:none;break-inside:auto}.project-heading{break-after:avoid}.view p,.view li,.view small,.view time,.kicker,.view a{color:#222!important}h1{font-size:56px!important}h2{font-size:34px!important;margin-bottom:20px!important}.current-work{margin-top:25px!important}.about-intro img{max-width:130px}.interaction-target{transform:none!important}}
.view:not(.in-view) .interaction-target{transition:none}
/* Preserve chapter geometry while the optional scene controls initialize. */
.enhanced .scene-experiment[hidden]{display:block!important;visibility:hidden}
.scene-slot,.stage{overflow-anchor:none}

/* The stellar disk and the project story share a spread, with a quiet reading
   lane and a wider visual field. The same hierarchy stacks on smaller screens. */
@media screen {
  :root{--ink:#f3f0e8;--muted:#b8c4cf;--dim:#a0afbd;--accent:#e8b77a;--line:#b0c1d033}
  ::selection{background:#e8b77a;color:#070a10}
  .masthead{padding-block:17px;background:#070a10;border-bottom-color:#c3d3df20}
  .identity a{gap:14px}.identity small{letter-spacing:.02em}
  .stage{top:calc(var(--masthead-height,83px) + 24px);bottom:calc(var(--contents-height,74px) + 56px);right:2.5vw;width:48vw;height:auto;max-height:800px}
  .folio-still{object-fit:cover;object-position:70% center;mask-image:radial-gradient(ellipse,black 24%,transparent 73%)}
  .stage figcaption{padding:12px 4px 0;min-height:62px;letter-spacing:.01em}
  .scene-number{font-variant-numeric:tabular-nums;font-size:.75rem;letter-spacing:.06em}
  .chapter-links{justify-content:flex-start;padding-left:4px;gap:0 24px}
  
  
  
  .view{width:41vw;padding-block:88px 120px}
  .view h2{font-size:clamp(3rem,4.5vw,5rem);line-height:1.06;letter-spacing:-.035em}
  .kicker{letter-spacing:.06em;font-size:.8125rem}
  .origin-view{display:flex;flex-direction:column;min-height:calc(100svh - 83px);padding-top:45px;padding-bottom:75px}
  .origin-location{margin-bottom:30px;order:0}
  .origin-view h1{order:1;font-size:clamp(6.1rem,9.15vw,9.6rem);line-height:.88;letter-spacing:-.052em;margin:0 0 35px}
  .surname{padding-left:.13em;padding-top:.16em}
  .origin-intro{order:2;max-width:31rem}
  .intro-lead{font-size:clamp(1.9rem,2.25vw,2.5rem);line-height:1.15}
  .intro-copy{margin-top:16px;max-width:27rem}
  .primary-link{margin-top:19px;padding-block:12px;gap:55px;border-color:var(--accent)}
  .origin-view>.scene-slot{order:3}
  .current-work{order:4;border-top:1px solid var(--line);padding-top:20px;margin-top:34px;max-width:29rem;gap:10px 24px}
  .featured-work{margin-top:38px}
  .project-index-item{position:relative;padding:25px 2px;gap:18px}
  .project-index-item>span:last-child{transition:transform 300ms var(--ease);font-size:1.2rem;padding-top:3px}
  .project-index-item:hover>span:last-child,.project-index-item:focus-visible>span:last-child{transform:translate(3px,-3px)}
  .project-index-item small{margin-top:8px}
  .featured-work .project-index-item{padding:29px 2px}
  .project-heading .kicker{color:var(--accent)}
  .project-body>p:first-child{font-size:1.8rem;line-height:1.45}
  .contribution-title{text-transform:uppercase;letter-spacing:.11em;font-size:.75rem;margin-top:38px}
  .contributions li{padding-block:17px}
  .next-project{margin-top:46px;padding-block:24px}
  .next-project>span:first-child{font-size:.875rem;color:var(--dim)}
  .disciplines article{padding-block:30px;gap:25px}
  .disciplines h3{font-size:2.25rem;margin-bottom:14px}
  .disciplines article>span{font-variant-numeric:tabular-nums}
  .about-intro{grid-template-columns:150px minmax(0,1fr);gap:27px}
  .about-intro img{filter:saturate(.8);border:1px solid #d7e4e922;padding:5px;object-position:center}
  .career article{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding-block:29px}
  .career time{padding-top:3px;font-size:.875rem;line-height:1.5}
  .career h4{font-size:1.25rem}
  .contact-view h2{font-size:clamp(3.2rem,4.7vw,5.3rem)}
  .email{padding-bottom:20px;border-bottom:1px solid var(--line);line-height:1.25}
  .contact-links{column-gap:28px}
  .contact-links a{border-bottom:1px solid #b0c1d024}
  html:not(.enhanced) .view{width:min(760px,75%)}
  html:not(.enhanced) .origin-view h1{font-size:clamp(5rem,10vw,8rem)}
}
@media screen and (min-width:1700px){.stage{right:5vw;width:45vw}.view{margin-left:8vw}}
@media screen and (min-width:900px) and (max-width:1100px){
  .stage{right:2vw;width:46vw}.view{margin-left:4vw;width:43vw}
  .about-intro{grid-template-columns:105px minmax(0,1fr);gap:20px}
  .career article{grid-template-columns:1fr;gap:3px}
  .origin-view h1{font-size:10vw}
}
@media screen and (max-width:899px){
  .masthead{padding:12px 28px}
  .view,html:not(.enhanced) .view{width:auto;max-width:690px;margin:0 auto;padding:58px 30px 78px}
  .view h2{font-size:clamp(2.9rem,7vw,4.5rem)}
  .origin-view{padding-top:37px;min-height:0}
  .origin-location{margin-bottom:26px}
  .origin-view h1{font-size:clamp(5.8rem,14vw,8rem);margin:0;line-height:.86}
  .origin-view>.scene-slot{order:2;margin-block:25px 32px}
  .origin-intro{order:3;max-width:35rem}
  .intro-lead{font-size:2.35rem}
  .intro-copy{font-size:1.125rem;max-width:31rem}
  .enhanced .scene-slot{height:410px;margin-block:30px 35px}
  .stage{inset:0;width:100%;height:100%;max-height:none}
  .stage figcaption{padding:8px 0 0;font-size:.875rem;min-height:56px}
  .stage figcaption>span:first-child{max-width:63%}
  .chapter-links{justify-content:space-between;padding:0;gap:0 16px;font-size:.875rem}
  
  
  
  .project-body>p:first-child{font-size:1.75rem}
  .about-intro{grid-template-columns:160px minmax(0,1fr)}
  .contact-view h2{font-size:clamp(3rem,8vw,4.5rem)}
  .colophon{width:auto;padding-inline:30px}
}
@media screen and (max-width:500px){
  .masthead{padding:10px 22px;gap:5px 12px}
  .identity{width:100%}.identity img{width:30px;height:30px}.identity span{font-size:.9375rem}.identity small{font-size:.8125rem}
  .utilities{width:100%;gap:12px;justify-content:space-between;flex-wrap:wrap}
  .utilities button{font-size:.875rem}.utilities a{font-size:.875rem}
  .view,html:not(.enhanced) .view{padding:48px 24px 66px;margin:0}
  .origin-view{padding-top:35px}
  .origin-location{font-size:.75rem!important;gap:9px!important;margin-bottom:24px;letter-spacing:.015em}
  .origin-location .short-rule{width:14px}
  .origin-view h1{font-size:22vw;line-height:.88}
  .surname{padding-left:.15em}
  .intro-lead{font-size:2.05rem}
  .enhanced .scene-slot{height:335px;margin-block:25px 30px}
  .enhanced .origin-view>.scene-slot{height:330px;margin-block:10px 22px}
  .stage .scene-window{min-height:175px}
  .stage figcaption{font-size:.8125rem;min-height:62px;gap:8px}
  .stage figcaption>span:first-child{max-width:57%;line-height:1.45}
  .chapter-links{font-size:.8125rem;gap:0 10px}
  .orbit-controls #reset-view{font-size:.8125rem}
  .view h2{font-size:clamp(2.65rem,11vw,3.7rem)}
  .featured-work .project-index-item{font-size:2.2rem}
  .project-index-item{gap:12px;grid-template-columns:22px minmax(0,1fr) 16px}
  .project-body>p:first-child{font-size:1.6rem}
  .about-intro{grid-template-columns:1fr;gap:25px}.about-intro img{width:155px}
  .career article{grid-template-columns:1fr;gap:2px}
  .career time{margin-bottom:8px}
  .disciplines h3{font-size:2rem}.disciplines article{gap:20px}
  .contact-view h2{font-size:clamp(2.85rem,12vw,4rem)}
  
  
  .email{font-size:clamp(1.85rem,8vw,2.6rem)}
}
@media screen and (max-height:550px){
  .stage{top:80px;height:calc(100vh - 162px)}
  .scene-slot .stage{top:0;height:100%}
  
  .stage figcaption{min-height:44px;padding-top:0}
  .enhanced .scene-slot{height:330px}
}
@media screen and (prefers-contrast:more){:root{--muted:#d5e0e8;--dim:#c2d0dc;--line:#b9cbd1}.cosmos{opacity:.12}}
@media screen and (forced-colors:active){
  :root{--ink:CanvasText;--muted:CanvasText;--dim:CanvasText;--accent:LinkText;--base:Canvas;--line:CanvasText}
  .masthead{background:Canvas;color:CanvasText}
  .view{width:min(760px,85%);margin-inline:auto;min-height:0}
}

/* Personal observatory: a photographic sky, editorial type, and no surface cards. */
@media screen {
 :root{--base:#070a0f;--ink:#eeeae2;--muted:#bac3cc;--dim:#a7b1bd;--accent:#daba8e;--line:#b5c6d02e}
 .cosmos-photo{position:absolute;inset:-25%;background:url('assets/milky-way-eso.webp') 50% 50%/cover no-repeat;opacity:.54;transform:rotate(-16deg) scale(1.14);animation:galactic-drift 240s ease-in-out infinite alternate;will-change:transform;animation-play-state:paused}
 .cosmos-shade{background:linear-gradient(180deg,#070a1026 0%,#070a1012 35%,#070a1050 100%);opacity:1}
 .enhanced:not(.sky-paused) .cosmos-photo{animation-play-state:running}
 .sky-paused .cosmos-photo{animation-play-state:paused}
 .masthead{padding:14px 4vw;background:#070a0fe8;border-bottom:1px solid #becbd51c;backdrop-filter:blur(14px)}
 .identity a{gap:16px}.identity span{font-family:Space,Arial,sans-serif;font-weight:500}
 .identity .monogram{font:500 1.65rem Space,sans-serif;letter-spacing:-.08em;width:38px}.monogram span{color:var(--accent)}
 .identity small{font-family:Source,Arial,sans-serif;font-weight:400}
 .edition{font:400 .75rem/1.8 Mono,monospace;text-align:center;color:var(--dim)}.edition>span{color:#8493a1}
 .utilities{gap:25px}.utilities button{font-size:.875rem;color:var(--dim)}.utilities a{font-size:.9375rem}
 .view{padding-top:80px}.view+.view{border-top-color:#a8b8c521}
 .origin-view{padding-top:58px;padding-bottom:58px;min-height:calc(100svh - 83px)}
 .origin-location{font:400 .75rem/1.7 Mono,monospace;letter-spacing:.035em;text-transform:uppercase;margin-bottom:34px}
 .origin-view h1{font-weight:450;font-size:clamp(5rem,7.9vw,9rem);line-height:1.02;letter-spacing:-.065em;margin:0 0 34px;text-transform:uppercase}
 .origin-view h1 .surname{padding-left:.14em;padding-top:0;color:#bfc8cc}.period{color:var(--accent)}
 .intro-lead{font:400 clamp(1.6rem,2.2vw,2.15rem)/1.22 Space,sans-serif;letter-spacing:-.045em}
 .intro-copy{font-size:1.125rem;max-width:27rem;line-height:1.7;margin-top:20px}
 .primary-link{font-size:1rem;gap:50px;margin-top:22px;padding-block:14px;border-color:#daba8e80}
 .current-work{font-size:.9375rem;margin-top:32px;border-color:#b5c6d030;padding-top:23px}
 .current-work>span{font-size:.8125rem}
 .view h2{font-weight:400;font-size:clamp(2.6rem,3.8vw,4.5rem);line-height:1.08;letter-spacing:-.055em}
 .section-banner{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:98px;padding:20px 0;margin:0 0 35px;border-block:1px solid #b7c5d237;background:linear-gradient(90deg,#070a10d4,#070a1080),url('assets/milky-way-eso.webp') 50% 53%/200% auto no-repeat}
 .section-banner .kicker{font:400 .75rem/1.7 Mono,monospace;letter-spacing:.025em;margin:0;color:var(--accent)}
 .section-banner>span{font:400 .75rem/1.7 Mono,monospace;color:var(--muted);text-align:right}
 .expertise-banner{background-position:50% 48%}.about-banner{background-position:34% 57%}.contact-banner{background-position:75% 51%}
 .featured-work .project-index-item{font:400 clamp(1.75rem,2.25vw,2.6rem)/1.18 Space,sans-serif;letter-spacing:-.04em}
 .project-index-item small{letter-spacing:0;font-size:1rem;color:var(--muted)}
 .project-index-item{font-family:Space,sans-serif;font-size:1.15rem;line-height:1.4}
 .record-number,.contribution-title,.career time{font-family:Mono,monospace;font-size:.75rem;letter-spacing:.02em}
 .project-heading .kicker{font-family:Mono,monospace;font-size:.75rem;line-height:1.7;margin-top:26px;padding-block:18px;border-block:1px solid var(--line)}
 .project-body>p:first-child{font:400 1.5rem/1.5 Space,sans-serif;letter-spacing:-.035em}
 .disciplines h3{font:400 1.75rem/1.25 Space,sans-serif;letter-spacing:-.035em}
 .career>h3{font:400 1.8rem Space,sans-serif;letter-spacing:-.04em}
 .career h4{font-size:1.125rem}.email{font:400 clamp(1.7rem,2.8vw,2.8rem)/1.3 Space,sans-serif;letter-spacing:-.05em}
 .stage figcaption{font-size:.875rem;color:var(--dim);border-top-color:#afc2d128}
 .scene-number{font-family:Mono,monospace;color:var(--accent)}
 html[data-view="home"] .orbit-controls{visibility:hidden}
 .chapter-links{font-size:.875rem;gap:0 24px;justify-content:space-between}
 
 
 .interaction-target,.interaction-target:active,.interaction-target.is-pressed{transform:none;background:transparent;--scale:1;--lift:0px}
 .identity a:hover,.identity a:active{background:none;transform:none}
 .skip-link.interaction-target{transform:translateY(-170%)}.skip-link.interaction-target:focus{transform:none}
 .colophon{border-top:1px solid var(--line);padding-top:28px;line-height:1.6}.sky-credit{font-size:.75rem}.sky-credit a{display:inline;min-height:0;text-decoration:underline;text-underline-offset:3px}
 html:not(.enhanced) .cosmos{opacity:.5}.static-scene .folio-still{visibility:visible;object-fit:contain;mask-image:none}
}
@keyframes galactic-drift{from{transform:translate3d(-1.5%,1%,0) rotate(-16deg) scale(1.14)}to{transform:translate3d(1.5%,-1%,0) rotate(-14deg) scale(1.16)}}
@media screen and (max-width:1100px){.edition{display:none}}
@media screen and (max-width:899px){
 .masthead{padding:12px 28px}.identity{width:auto}.utilities{width:auto;gap:18px}.identity a{gap:10px}
 .cosmos-photo{inset:-12% -75%;opacity:.46;background-position:52% 52%;background-size:cover}
 .cosmos-shade{background:#070a103b}
 .origin-view{padding-top:42px}.origin-location{margin-bottom:28px;font-size:.75rem}
 .origin-view h1{font-size:clamp(4.6rem,12.8vw,7.6rem);line-height:1.04;margin:0 0 24px}
 .origin-view>.scene-slot{order:3}.origin-intro{order:2}.enhanced .origin-view>.scene-slot{height:380px;margin:16px 0 8px}
 .intro-lead{font-size:1.8rem}.intro-copy{max-width:31rem}.current-work{margin-top:22px}
 .section-banner{min-height:86px;margin-bottom:30px}.view h2{font-size:clamp(2.5rem,6vw,4rem)}
 .contact-view h2{font-size:clamp(2.5rem,7vw,4rem)}
}
@media screen and (max-width:500px){
 .masthead{padding:10px 22px;align-items:center;gap:5px 10px}.identity{width:100%}.utilities{width:100%;justify-content:space-between;flex-wrap:nowrap}.identity .monogram{width:32px}
 .origin-view h1{font-size:20vw;letter-spacing:-.06em;line-height:1.06}.origin-view h1 .surname{padding-left:.1em}
 .origin-location{font-size:.75rem!important;gap:9px!important;letter-spacing:0;margin-bottom:28px}
 .intro-lead{font-size:1.65rem;line-height:1.25}.intro-copy{font-size:1.0625rem}
 .enhanced .origin-view>.scene-slot{height:315px;margin:8px 0 6px}.stage .scene-window{min-height:175px}
 .stage figcaption{font-size:.8125rem;min-height:50px}.stage figcaption>span:first-child{max-width:75%}
 .chapter-links{font-size:.8125rem;gap:0 10px}
 .section-banner{min-height:86px;gap:14px}.section-banner .kicker,.section-banner>span{font-size:.75rem;line-height:1.8}
 .section-banner>span{max-width:38%}.view h2{font-size:clamp(2.4rem,10vw,3.3rem)}
 .featured-work .project-index-item{font-size:1.8rem}.project-body>p:first-child{font-size:1.4rem}.email{font-size:clamp(1.5rem,7.2vw,2.4rem)}
 .current-work{gap:8px 18px}
}
@media(prefers-reduced-motion:reduce){.cosmos-photo{animation:none!important}.skip-link.interaction-target:not(:focus){transform:translateY(-170%)}}
@media screen and (prefers-contrast:more){.cosmos{opacity:.20}.section-banner{background:none}.masthead{background:#070a0f}.view{--muted:#d5e0e8;--dim:#c2d0dc}}
@media(forced-colors:active){.section-banner{background:none}.monogram span,.view h1 .surname{color:CanvasText!important}.sky-credit a{color:LinkText}.edition{display:none}}
@media print{.section-banner{background:none;min-height:0;border:0;padding:0;margin:0 0 16px}.section-banner>span,.edition{display:none}.section-banner .kicker{margin:0}.origin-view h1{color:#111!important}}

@media screen{html:not([data-view="home"]).static-scene .stage{display:none}.static-scene .scene-experiment{display:none!important}.folio-still{object-fit:contain;mask-image:none;object-position:center}}
@media screen and (max-width:899px){.static-scene .scene-slot{display:none}.static-scene #home .scene-slot{display:block}}

@media screen and (max-width:899px){.cosmos-photo{background-image:url('assets/milky-way-eso-mobile.webp')}.section-banner{background-image:linear-gradient(90deg,#070a10d4,#070a1080),url('assets/milky-way-eso-mobile.webp')}}

/* Eyepiece: the page closes to a telescope field around what was selected. */
@property --eye-r{syntax:'<length>';inherits:true;initial-value:150vmax}
.eyepiece{position:fixed;inset:0;z-index:80;pointer-events:none;visibility:hidden;--eye-r:150vmax;--ex:50vw;--ey:50vh}
.eyepiece-field{position:absolute;inset:0;background:radial-gradient(circle at var(--ex) var(--ey),transparent 0,transparent calc(var(--eye-r)*.82),#03050826 calc(var(--eye-r) - 3px),#e9c99a80 calc(var(--eye-r) - 1px),#020306f5 calc(var(--eye-r) + 1px),#010203 calc(var(--eye-r) + 50vmax))}
.reticle{position:absolute;left:var(--ex);top:var(--ey);width:calc(var(--eye-r)*2);height:calc(var(--eye-r)*2);translate:-50% -50%;overflow:visible;opacity:0;transition:opacity 300ms ease}
.reticle-rim{fill:none;stroke:#daba8e;stroke-width:.5;opacity:.7}
.reticle-tick{stroke:#daba8e;stroke-width:.45;opacity:.65}
.reticle-cross{stroke:#e8e4da;stroke-width:.3;opacity:.45}
.reticle-ring{fill:none;stroke:#afc3d1;stroke-width:.25;stroke-dasharray:1.5 2.5;opacity:.45}
.reticle-pip{fill:none;stroke:#daba8e;stroke-width:.5}
.eyepiece-readout{position:absolute;left:var(--ex);top:calc(var(--ey) + var(--eye-r) + 22px);translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:90vw;text-align:center;font:400 .75rem/1.5 Mono,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);opacity:0;transition:opacity 300ms ease}
.eyepiece-caption{color:var(--muted);letter-spacing:.06em;text-transform:none;font-size:.8125rem}
.eyepiece.closing{visibility:visible;--eye-r:var(--eye-close,min(30vmin,260px));transition:--eye-r 650ms cubic-bezier(.6,0,.25,1)}
.eyepiece.closing .reticle,.eyepiece.closing .eyepiece-readout{opacity:1;transition-delay:380ms}
.eyepiece.closing .reticle{animation:reticle-turn 6s linear infinite}
.eyepiece.opening{visibility:visible;--eye-r:150vmax;transition:--eye-r 900ms cubic-bezier(.55,0,.2,1) 80ms}
@keyframes reticle-turn{to{rotate:30deg}}
.is-observing{cursor:progress}

/* Scene hints are only offered where the scene can be pointed at. */
.scene-hint{display:none}
@media all{
 /* Two lines are always reserved: a hint that wraps (or empties) must never
    resize the scene above it, which would shift the picture mid-motion. */
 .scene-ready .scene-hint{display:block;min-height:3em;margin-top:4px;font:400 .6875rem/1.5 Mono,monospace;letter-spacing:.06em;color:#8e9dab}
 .scene-ready .scene-hint:not(:empty):before{content:'◎ ';color:var(--accent)}
}

/* A sighted year in the career list answers the armillary ring. */
.career article,.disciplines article{transition:background-color 600ms var(--ease),box-shadow 600ms var(--ease)}
.career article.sighted,.disciplines article.sighted,.contributions li.sighted{background:linear-gradient(90deg,#daba8e14,transparent 70%);box-shadow:inset 2px 0 0 var(--accent)}
.career article.sighted time,.disciplines article.sighted>span{color:#f2d3a6}
.signal-status{min-height:1.6em;margin-top:18px;font:400 .75rem/1.6 Mono,monospace;letter-spacing:.04em;color:var(--accent)}


@media(prefers-reduced-motion:reduce){.eyepiece{display:none}}
@media print{.eyepiece,.scene-hint,.signal-status{display:none!important}}
@media(forced-colors:active){.eyepiece{display:none}}
/* Inside the eyepiece only the sky and its target remain. */
/* Fade the chapter copy, not `main`: on small screens the scene lives inside it. */
.view>:not(.scene-slot),.masthead,.stage figcaption,.chapter-links,.colophon{transition:opacity 500ms var(--ease)}
.is-observing :is(.view>:not(.scene-slot),.masthead,.stage figcaption,.chapter-links,.colophon){opacity:0;transition-duration:420ms}
/* With motion always on there is one utility: keep it on the name's line. */
@media screen and (max-width:500px){
 .masthead{flex-wrap:nowrap;align-items:center}
 .identity,.utilities{width:auto}
 .utilities{justify-content:flex-end;flex-shrink:0}
}
/* Large displays: scale the whole type system rather than leaving a wide empty middle. */
@media screen and (min-width:1900px){html{font-size:112.5%}.view{max-width:760px}}
@media screen and (min-width:2300px){html{font-size:125%}.view{max-width:880px;margin-left:9vw}}

.contributions li{transition:background-color 600ms var(--ease),box-shadow 600ms var(--ease),color 600ms var(--ease)}
.contributions li.sighted{color:var(--ink)}
/* The colophon shares the reading column's geometry, so its rule never runs
   into the scene lane's caption rule. */
@media screen and (min-width:900px){
 .colophon{width:41vw;max-width:660px;margin-left:6vw;padding-inline:0}
}
@media screen and (min-width:900px) and (max-width:1100px){.colophon{width:43vw;margin-left:4vw}}
@media screen and (min-width:1700px){.colophon{margin-left:8vw}}
@media screen and (min-width:1900px){.colophon{max-width:760px}}
@media screen and (min-width:2300px){.colophon{max-width:880px;margin-left:9vw}}

/* Section banners are instrument scales: a graduated rule along the strip and
   a gold index at this chapter's place in the journey (1–14). */
@media screen{
 .section-banner{background:linear-gradient(90deg,#0b111acc,#0b111a66 60%,#0b111a00);min-height:0;padding:18px 0 34px;margin-bottom:34px;align-items:flex-start;border-color:#b7c5d22e}
 .section-banner>span:not(.banner-scale){font:400 .75rem/1.7 Mono,monospace;letter-spacing:.04em;color:var(--muted)}
 .banner-scale{position:absolute;left:6px;right:6px;bottom:9px;height:12px;pointer-events:none;
  background:
   linear-gradient(90deg,transparent calc(var(--pos)*100% - .5px),var(--accent) calc(var(--pos)*100% - .5px),var(--accent) calc(var(--pos)*100% + .5px),transparent calc(var(--pos)*100% + .5px)) 0 0/100% 12px no-repeat,
   linear-gradient(90deg,#b7c5d266 0 1px,transparent 1px) 0 4px/calc((100% - 1px)/13) 8px repeat-x,
   linear-gradient(90deg,#b7c5d230 0 1px,transparent 1px) 0 8px/calc((100% - 1px)/52) 4px repeat-x}
 .banner-scale:after{content:'';position:absolute;top:-3px;left:calc(var(--pos)*100% - 2.5px);width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px #daba8e99}
 /* The distance covered to reach this chapter. */
 .banner-scale:before{content:'';position:absolute;left:0;top:-1px;width:calc(var(--pos)*100%);height:1px;background:var(--accent);opacity:.5;transform-origin:0 50%}
}
@media print,(forced-colors:active){.banner-scale{display:none}}

.section-banner>span:not(.banner-scale){white-space:nowrap}
@media screen and (max-width:500px){.banner-extra{display:none}}
.section-banner>.banner-scale{max-width:none}
@media screen and (max-width:500px){
 .section-banner{flex-direction:column;align-items:flex-start;gap:4px;padding-bottom:36px}
 .section-banner>span:not(.banner-scale){max-width:none;text-align:left}
}

/* ===== Polish pass ===== */
/* Large displays: :root's font shorthand outranks html{font-size}; scale on :root. */
@media screen and (min-width:1900px){:root{font-size:112.5%}.view{max-width:700px}}
@media screen and (min-width:2300px){:root{font-size:125%}.view{max-width:820px}}
.project-body,.about-intro,.career{max-width:44rem}

/* Tracking that never lets glyphs touch. */
@media screen{
 .origin-view h1{letter-spacing:-.045em}
 .identity .monogram{letter-spacing:-.04em}
}

/* Typesetting: no widows or dangling words in headings and copy. */
.view h2,.featured-work .project-index-item{text-wrap:balance}
.view p,.contributions li,.career p{text-wrap:pretty}
.nw{white-space:nowrap}

/* Project copy: only a short opening line is set as display type. */
@media screen{
 .project-view .project-body>p:first-child:not(.lede){font:400 1.1875rem/1.65 Source,Arial,sans-serif;letter-spacing:0;color:var(--ink)}
}
@media screen and (max-width:500px){.project-view .project-body>p:first-child:not(.lede){font-size:1.125rem}}

/* Chapter boundaries: one rule per boundary, not five. */
@media screen{
 .project-view .next-project{border-bottom:0}
 .project-heading .kicker{border-top:0;padding-top:0}
 .view:has(.section-banner){border-top-color:transparent}
 .colophon{border-top:0}
}
@media screen and (min-width:900px){.project-view{padding-bottom:80px}}

/* Lists: closed at the bottom; hover draws the whole row. */
.featured-work,.project-index{border-bottom:1px solid var(--line)}
@media(hover:hover) and (pointer:fine){.project-index-item:hover{box-shadow:inset 0 -1px 0 var(--accent)}}

/* One label system: small structural labels are Mono uppercase like the kickers. */
@media screen{
 .current-work>span,.further-work h3,.experiment-label,.experiment label,.next-project>span:first-child,.toolkit{font:400 .75rem/1.7 Mono,monospace;letter-spacing:.06em;text-transform:uppercase}
 .toolkit span{font:400 1rem/1.6 Source,Arial,sans-serif;letter-spacing:0;text-transform:none}
 .current-work{max-width:none}
 .career h4+p{font-size:.9375rem;color:var(--dim);margin-top:4px}
}

/* Arrows are always the accent; underlines sit close to their words. */
.next-project span span,.contact-links a span,.colophon a span,.about-intro a span{color:var(--accent)}
@media screen{
 .utilities a,.contact-links a{border-bottom:0;text-decoration:underline;text-decoration-color:#b0c1d055;text-decoration-thickness:1px;text-underline-offset:6px}
 .utilities a:hover,.contact-links a:hover{text-decoration-color:var(--accent)}
}

/* Keyboard focus: one clear outline, no stacked underlines. */
:is(.utilities a,.identity a,.contact-links a,.primary-link,.project-index-item,.next-project,.chapter-links a):focus-visible{text-decoration:none}
.chapter-links a:focus-visible{outline-offset:-2px}

/* Scene lane: a steady caption row, flush edges, compact chapter links. */
@media screen and (min-width:900px){
 .stage{max-height:none}
 .stage figcaption{align-items:flex-start;padding-inline:0}
 .stage figcaption>span:first-child{max-width:none}
 .chapter-links{padding-left:0;justify-content:flex-start;gap:0 32px}
 html:not([data-view="home"]):not([data-view="work"]) .chapter-links{display:none}
 .project-index-item,.next-project{padding-inline:0}
}
.scene-ready .scene-hint:not(:empty){color:var(--dim)}
.edition>span{color:var(--dim)}

/* Footer: one baseline, the link at the end. */
@media screen and (min-width:900px){
 .colophon{align-items:baseline;flex-wrap:nowrap;gap:28px}
 .colophon>a{margin-left:auto;min-height:0;white-space:nowrap}
 .sky-credit{flex:1}
}

/* Masthead aligns with the reading column and the scene lane; the edition line is truly centred. */
@media screen and (min-width:1101px){
 .masthead{display:grid;grid-template-columns:1fr auto 1fr;padding-inline:6vw 2.5vw}
 .utilities{justify-self:end}
}
@media screen and (min-width:1700px){.masthead{padding-inline:8vw 5vw}}
@media screen and (min-width:2300px){.masthead{padding-inline:9vw 5vw}}

/* Controls in the hairline language. */
.experiment button{border:0;border-bottom:1px solid #daba8e80;padding:0 2px}
.scene-experiment p{min-height:0}
.experiment input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:44px}
.experiment input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line)}
.experiment input[type=range]::-moz-range-track{height:1px;background:var(--line)}
.experiment input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #daba8e26}
.experiment input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--accent)}

/* ===== Polish pass: phones and tablets ===== */
/* On narrow screens the scene lives in a chapter slot; until one is on screen it stays out of sight. */
@media screen and (max-width:899px){
 body>.stage,body>.stage #folio-canvas{visibility:hidden}
 .stage figcaption>span:first-child{max-width:none}
 .stage figcaption,.scene-hint{text-wrap:pretty}
 .enhanced .scene-slot{margin-block:14px 30px}
 .current-work{max-width:none}
 .further-work{margin-top:36px}
}
.view h3,.project-index-item>span,.next-project>span:last-child{text-wrap:balance}
.view h4,.colophon,.location{text-wrap:pretty}

/* One gutter on phones; tablets align the chrome with the centred reading column. */
@media screen and (max-width:500px){
 .masthead,.colophon{padding-inline:24px}
 .next-project>span:last-child{max-width:75%}
}
@media screen and (min-width:501px) and (max-width:899px){
 .masthead,.colophon{padding-inline:max(30px,calc((100vw - 690px)/2 + 30px))}
}
@media screen and (max-width:899px){
 .colophon{align-items:baseline}
 .colophon a{min-height:0;padding-block:12px}
}
@media screen and (min-width:501px){.email br{display:none}}

/* Credit links: comfortable tap targets without changing the line. */
.sky-credit a{display:inline-block;padding-block:13px;margin-block:-13px}

/* Experiment blocks end where their text ends. */
.experiment{margin-bottom:0}
.experiment+.next-project{margin-top:32px}
#trace-status{min-height:3.3em}

/* Phone landscape: the slot fits the visible area; the nav marker sits under its label. */
@media screen and (max-height:550px){
 .enhanced .origin-view>.scene-slot,.enhanced .scene-slot{height:calc(100svh - 84px)}
 
}
/* Space Grotesk's B has left spurs; open the I–B pair optically instead of loosening the name. */
#home-title>span:first-child::first-letter{margin-right:.075em}


/* Wide screens: the canvas spans the viewport behind the copy. The camera is
   framed on the lane, so plates rest beside the text while arrivals,
   departures and the signal can cross the whole composition. Copy stays
   above it and the signal dims itself behind the reading column. */
@media screen and (min-width:900px){
 .enhanced #folio-canvas{position:fixed;inset:0;width:100%;height:100%}
 /* The caption, telemetry and links stay above the canvas that spans behind them. */
 .stage figcaption,.stage .chapter-links{position:relative;z-index:1}
}

/* Motion grammar, mirrored from js/motion.js. Each verb has one curve. */
:root{--settle:cubic-bezier(.16,.84,.24,1);--approach:cubic-bezier(.22,.9,.18,1);--depart:cubic-bezier(.5,0,.75,.2);--lock-on:900ms;--acknowledge:320ms}

/* Chapter number re-registers when the scene changes. */
.scene-number.registered{animation:register 520ms var(--settle)}
@keyframes register{from{opacity:.2;letter-spacing:.4em}to{opacity:1;letter-spacing:.06em}}

/* Headings lock on as their chapter comes into view: an optical focus pull,
   paint-only (no layout), so nothing below it moves. Body copy never animates. */
@media screen{
 .enhanced:not(.simple-motion) .view:not(.in-view) :is(h2,.project-heading .kicker){opacity:0;filter:blur(7px);transform:translate3d(-10px,0,0)}
 .enhanced:not(.simple-motion) .view.in-view :is(h2,.project-heading .kicker){transition:opacity var(--lock-on) var(--settle),filter var(--lock-on) var(--settle),transform var(--lock-on) var(--approach)}
 .enhanced:not(.simple-motion) .view.in-view .project-heading .kicker{transition-delay:120ms}
 /* A gold hairline sweeps the chapter rule as it registers. */
 .enhanced .project-heading .kicker{position:relative}
 .enhanced .project-heading .kicker:after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:linear-gradient(90deg,var(--accent),#daba8e00 70%);transform:scaleX(0);transform-origin:left;opacity:.8}
 .enhanced:not(.simple-motion) .view.in-view .project-heading .kicker:after{transform:scaleX(1);transition:transform 1.4s var(--settle) .25s}
 .simple-motion .project-heading .kicker:after{transform:scaleX(1)}
}

/* The period of the name is where the signal starts: it carries a faint glow
   on the same slow cadence as the stream leaving it. */
@media screen{
 .scene-ready:not(.simple-motion)[data-view="home"] #home .period{animation:emit 4.8s ease-in-out infinite}
}
@keyframes emit{0%,100%{text-shadow:0 0 0 #daba8e00}45%{text-shadow:0 0 18px #daba8eaa,0 0 3px #f5dcb0}}

/* Contact: the confirmation arrives with the beam. */
.signal-status[data-state="sending"]:empty:before{content:'';display:inline-block;width:46px;height:1px;vertical-align:middle;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;animation:charge .9s linear infinite}
@keyframes charge{from{background-position:100% 0}to{background-position:-100% 0}}

@media(prefers-reduced-motion:reduce){.enhanced .view :is(h2,.project-heading .kicker){opacity:1!important;filter:none!important;transform:none!important}}
@media print{.view :is(h2,.kicker){opacity:1!important;filter:none!important;transform:none!important}}
@media(forced-colors:active){.project-heading .kicker:after{display:none}}

/* Query the work by stack: a small retrieval over the projects. */
.query{margin:30px 0 0;display:grid;gap:12px}
.query-label{font:400 .6875rem/1.4 Mono,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.query-chips{display:flex;flex-wrap:wrap;gap:8px}
.query-chip{position:relative;min-height:36px;padding:0 13px;border:1px solid #b5c6d040;border-radius:2px;font:400 .8125rem/1 Mono,monospace;letter-spacing:.02em;color:var(--muted);transition:color 260ms var(--settle),border-color 260ms var(--settle),background-color 260ms var(--settle)}
.query-chip:before{content:'';position:absolute;left:-1px;top:-1px;width:5px;height:5px;border-left:1px solid var(--accent);border-top:1px solid var(--accent);opacity:0;transition:opacity 260ms var(--settle)}
@media(hover:hover) and (pointer:fine){.query-chip:hover{color:var(--ink);border-color:#daba8e80}.query-chip:hover:before{opacity:1}}
.query .query-chip[aria-pressed="true"]{color:var(--accent);background:#daba8e18;border-color:#daba8ea8}.query .query-chip[aria-pressed="true"]:before{opacity:1}
.query-result{min-height:1.5em;font:400 .75rem/1.6 Mono,monospace;letter-spacing:.03em;color:var(--accent)}
.project-index-item{transition:opacity 420ms var(--settle),border-color 420ms var(--settle),background-color 420ms var(--settle)}
.is-querying .project-index-item.is-quiet{opacity:.42}
.is-querying .project-index-item.is-match{border-top-color:#daba8e70}
.is-querying .project-index-item.is-match .record-number{color:#f2d3a6}
@media(forced-colors:active){.query-chip[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}.is-querying .project-index-item.is-quiet{opacity:1}}
@media print{.query{display:none}}

/* Microinteractions: each gesture says what the link does. */
@media screen and (hover:hover) and (pointer:fine){
 /* Navigation: a rule draws under the destination before you commit. */
 
 
 
 /* Downloads drop; outbound links lift out of the page. */
 a[download]>span[aria-hidden]{display:inline-block;transition:transform 320ms var(--settle)}
 a[download]:hover>span[aria-hidden]{transform:translateY(3px)}
 :is(.contact-links,.disciplines,.about-intro) a:not([download])>span[aria-hidden],.next-project span[aria-hidden],.chapter-links span[aria-hidden],.primary-link span{display:inline-block;transition:transform 320ms var(--settle)}
 :is(.contact-links,.disciplines) a:not([download]):hover>span[aria-hidden],.next-project:hover span[aria-hidden],.chapter-links a:hover span[aria-hidden],.primary-link:hover span{transform:translate(3px,-3px)}
 /* The address is the channel: its rule charges towards the dish. */
 .contact-view .email{background:linear-gradient(90deg,var(--accent),var(--accent)) 0 100%/0 1px no-repeat;transition:background-size 600ms var(--settle),color 320ms var(--settle)}
 .contact-view .email:hover{background-size:100% 1px}
 .utilities a{transition:border-color 320ms var(--settle),color 320ms var(--settle)}
}
@media(prefers-reduced-motion:reduce){a span[aria-hidden],.contact-view .email{transition:none!important}}

/* The full stop as the planet M51-ULS-1b. The glyph stays in the text (screen
   readers, print, forced colours); the canvas sits exactly on its dot. */
.has-planet #home .period{position:relative;color:transparent;animation:none}
.planet{position:absolute;left:calc(50% - .25em);bottom:.15em;width:1.1em;height:.567em;pointer-events:none}
@media(forced-colors:active){.planet{display:none}.has-planet #home .period{color:CanvasText}}
@media print{.planet{display:none}.has-planet #home .period{color:#111}}

/* ---------------------------------------------------------------------------
   Themes. Dark is the night sky seen through the instruments. Light is the
   observatory's other medium: the astronomical glass plate, where the sky was
   recorded as a negative (dark stars on a pale plate) and the instruments as
   ink. The copy gets its own light palette; the sky and the engravings print
   as the plate. The theme is chosen before first paint (saved choice, else the
   system setting).
   ------------------------------------------------------------------------- */
.theme-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 2px;font:400 .75rem/1 Mono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.theme-glyph{position:relative;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;overflow:hidden}
.theme-glyph:after{content:'';position:absolute;inset:-1px -1px -1px 50%;background:currentColor;transition:transform 500ms var(--settle)}
[data-theme="light"] .theme-glyph:after{transform:translateX(-100%)}
@media(hover:hover) and (pointer:fine){.theme-toggle:hover{color:var(--accent)}}

:root[data-theme="light"]{color-scheme:light;--base:#efe9de;--ink:#16191e;--muted:#3f4752;--dim:#5b6470;--accent:#8a5a14;--line:#2a33402e}
@media screen{
 [data-theme="light"] body{background:var(--base)}
 [data-theme="light"] ::selection{background:#8a5a14;color:#f6f1e7}
 [data-theme="light"] .cosmos{background:#efe9de}
 /* The negative plate: the same sky, printed dark-on-pale, warmed like old glass. */
 /* The photograph is pre-rendered as the plate (tools/archive/light_plate.py) and the
    sky draws its own plate colours, so only the scene canvas carries a filter. */
 [data-theme="light"] .cosmos-photo{background-image:url('assets/milky-way-eso-light.webp')}
 [data-theme="light"] .cosmos-photo{opacity:.3}
 [data-theme="light"] .cosmos-shade{background:linear-gradient(180deg,#efe9de55 0%,#efe9de22 40%,#efe9de88 100%)}
 [data-theme="light"] .masthead{background:#efe9dee6;border-bottom-color:#2a334022}
 
 [data-theme="light"] .section-banner{border-color:#2a334026;background:linear-gradient(90deg,#efe9dee0,#efe9de99)}
 [data-theme="light"] .origin-view h1 .surname{color:#3c4552}
 [data-theme="light"] .project-body>p{color:#2c333d}
 [data-theme="light"] .project-body>p:first-child{color:var(--ink)}
 [data-theme="light"] .contributions li{color:#323943;border-top-color:#2a33401f}
 [data-theme="light"] .contributions li:before{color:#8a929c}
 [data-theme="light"] .edition,[data-theme="light"] .edition>span{color:var(--dim)}
 [data-theme="light"] .scene-ready .scene-hint:not(:empty){color:#5b6470}
 [data-theme="light"] .stage figcaption{border-top-color:#2a334022}
 [data-theme="light"] .about-intro img{border-color:#2a334026}
 [data-theme="light"] .query-chip{border-color:#2a334033}
 [data-theme="light"] .query .query-chip[aria-pressed="true"]{background:#8a5a1414;border-color:#8a5a1499}
 [data-theme="light"] .career article.sighted,[data-theme="light"] .disciplines article.sighted,[data-theme="light"] .contributions li.sighted{background:linear-gradient(90deg,#8a5a1414,transparent 70%)}
 [data-theme="light"] .career article.sighted time,[data-theme="light"] .disciplines article.sighted>span{color:#6e4710}
 [data-theme="light"] .is-querying .project-index-item.is-match .record-number{color:#6e4710}
 [data-theme="light"] .colophon{border-top-color:#2a334022}
@media screen and (max-width:899px){[data-theme="light"] .cosmos-photo{background-image:url('assets/milky-way-eso-mobile-light.webp')}}
 [data-theme="light"] .banner-scale{background:
   linear-gradient(90deg,transparent calc(var(--pos)*100% - .5px),var(--accent) calc(var(--pos)*100% - .5px),var(--accent) calc(var(--pos)*100% + .5px),transparent calc(var(--pos)*100% + .5px)) 0 0/100% 12px no-repeat,
   linear-gradient(90deg,#2a334070 0 1px,transparent 1px) 0 4px/calc((100% - 1px)/13) 8px repeat-x,
   linear-gradient(90deg,#2a334036 0 1px,transparent 1px) 0 8px/calc((100% - 1px)/52) 4px repeat-x}
 [data-theme="light"] .banner-scale:after,[data-theme="light"] .edition-track i{box-shadow:none}
 /* The engraved instruments and the signal print as ink on the plate. */

 [data-theme="light"] .static-scene .folio-still{filter:invert(1) hue-rotate(180deg)}
}
/* Switching theme is an occultation: the new sky covers the old as a disc
   growing from the switch. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* Theme change as an exposure change (experience.js): the new light is
   revealed through a soft front from the switch, minus a region around the
   black hole that the front wraps around before filling. */
@property --vr{syntax:'<length>';inherits:false;initial-value:0px}
@property --vh{syntax:'<length>';inherits:false;initial-value:0px}
.vt-exposure::view-transition-new(root){
 -webkit-mask-image:radial-gradient(circle at var(--vx) var(--vy),#000 calc(var(--vr) - 110px),transparent var(--vr)),radial-gradient(circle at var(--hx) var(--hy),#000 calc(var(--vh) * .55),transparent var(--vh));
 mask-image:radial-gradient(circle at var(--vx) var(--vy),#000 calc(var(--vr) - 110px),transparent var(--vr)),radial-gradient(circle at var(--hx) var(--hy),#000 calc(var(--vh) * .55),transparent var(--vh));
 -webkit-mask-composite:source-out;mask-composite:subtract}
.vt-exposure::view-transition-old(root){animation:none}
.vt-quick::view-transition-old(root),.vt-quick::view-transition-new(root){animation-duration:220ms;animation-timing-function:ease-out;animation-fill-mode:both}
.vt-quick::view-transition-old(root){animation-name:vt-out}.vt-quick::view-transition-new(root){animation-name:vt-in}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0}}

/* Masthead readout: what the instruments are pointed at, and where the
   journey is. Decorative (the headings carry the meaning), so aria-hidden. */
@media screen{
 .edition{display:grid;justify-items:center;gap:4px;min-width:240px;max-width:34vw;text-align:center}
 .edition>span{color:inherit}
 .edition-label{font:400 .625rem/1 Mono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
 .edition-target{display:flex;gap:10px;align-items:baseline;max-width:100%;font:400 .75rem/1.3 Mono,monospace;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
 .edition-number{color:var(--accent);font-variant-numeric:tabular-nums}
 .edition-title{overflow:hidden;text-overflow:ellipsis}
 .edition-track{position:relative;display:block;width:181px;height:5px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(180px / 13));opacity:.9}
 /* The scale glides with the scene's travel; the line behind the marker is
    the distance covered. Both are transforms, so nothing re-lays out. */
 .edition-track:before{content:'';position:absolute;left:0;top:2px;width:180px;height:1px;background:var(--accent);opacity:.55;transform-origin:0 50%;transform:scaleX(var(--p,0))}
 .edition-track i{position:absolute;top:-2px;left:0;width:1px;height:9px;background:var(--accent);box-shadow:0 0 6px #daba8e88;transform:translateX(calc(var(--p,0) * 180px - .5px))}
 .edition.acquire .edition-target{animation:acquire 560ms var(--settle)}
 .simple-motion .edition.acquire .edition-target{animation:none}
 html:not(.enhanced) .edition{visibility:hidden}
}
/* The new target is written in from the left, the way the scale moves: no fade. */
@keyframes acquire{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}

/* Content choreography. Labels, numbers and headings move with the scene;
   paragraphs never do. */
@media screen{
 /* The signal passes through a chapter's mono label as it arrives. */
 .enhanced:not(.simple-motion) .view.in-view :is(.project-heading .kicker,.section-banner .kicker){background:linear-gradient(100deg,currentColor 0 40%,#f6dfb4 50%,currentColor 60% 100%) 120% 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sweep 1.6s var(--settle) .35s both}
 .enhanced:not(.simple-motion) .view.in-view :is(.project-heading .kicker,.section-banner .kicker){background-position:0% 0}
 /* The index lands in sequence, like stars acquiring. */
 .enhanced:not(.simple-motion) .view:not(.in-view) .project-index-item{opacity:0;transform:translate3d(-14px,0,0)}
 .enhanced:not(.simple-motion) .view.in-view .project-index-item{transition:opacity 700ms var(--settle),transform 800ms var(--approach)}
 .enhanced:not(.simple-motion) .view.in-view .project-index-item:nth-child(2){transition-delay:70ms}
 .enhanced:not(.simple-motion) .view.in-view .project-index-item:nth-child(3){transition-delay:140ms}
 .enhanced:not(.simple-motion) .view.in-view .project-index-item:nth-child(4){transition-delay:210ms}
 .enhanced:not(.simple-motion) .view.in-view .project-index-item:nth-child(n+5){transition-delay:260ms}
}
@keyframes sweep{from{background-position:100% 0}to{background-position:0% 0}}
/* Heading gravity: leaving Home, the name leans a little towards the black hole
   (the nearer word more); chapter headings drift as their chapter exits. */
@supports (animation-timeline:view()){
 @media screen and (min-width:900px) and (prefers-reduced-motion:no-preference){
  .enhanced #home h1>span{animation:pull linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .enhanced #home h1>.surname{animation-name:pull-near}
  /* During the opening the rise (time, on `translate`) and the lean (scroll,
     on `transform`) run together; letting the opening's shorthand replace
     the lean ran it on the clock, so SULTAN slid out and snapped back. */
  .enhanced.opening #home h1>span{animation:open-rise 1s var(--approach) .32s both,pull linear both;animation-timeline:auto,view();animation-range:normal,exit 0% exit 100%}
  .enhanced.opening #home h1>.surname{animation-name:open-rise,pull-near;animation-delay:.46s,0s}
  .enhanced .view h2{animation:drift linear both;animation-timeline:view();animation-range:exit 10% exit 100%}
 }
}
/* Banner readings: as a banner rises into view its index travels along the
   scale to this chapter's place in the journey, the distance covered fills in
   behind it and a scan passes across the strip. Scroll-linked, so it plays
   back with the scroll; without support it simply shows the reading. */
@supports (animation-timeline:view()){
 @media screen and (prefers-reduced-motion:no-preference){
  .enhanced:not(.simple-motion) .section-banner{isolation:isolate;view-timeline:--banner block}
  .enhanced:not(.simple-motion) .section-banner:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent 0 42%,#f6dfb424 50%,transparent 58% 100%) 100% 0/250% 100% no-repeat;animation:sweep linear both;animation-timeline:--banner;animation-range:entry 10% cover 55%}
  .enhanced:not(.simple-motion) .banner-scale{container-type:inline-size}
  .enhanced:not(.simple-motion) .banner-scale:after{animation:index-travel linear both;animation-timeline:--banner;animation-range:entry 20% cover 50%}
  .enhanced:not(.simple-motion) .banner-scale:before{animation:index-cover linear both;animation-timeline:--banner;animation-range:entry 20% cover 50%}
  .enhanced[data-theme="light"]:not(.simple-motion) .section-banner:before{background-image:linear-gradient(100deg,transparent 0 42%,#8a5a1418 50%,transparent 58% 100%)}
 }
}
@keyframes index-travel{from{transform:translateX(calc(var(--pos) * -100cqw))}to{transform:none}}
@keyframes index-cover{from{transform:scaleX(0)}to{transform:none}}
@keyframes pull{to{transform:translate3d(14px,-4px,0)}}
@keyframes pull-near{to{transform:translate3d(34px,-6px,0)}}
@keyframes drift{to{transform:translate3d(0,-26px,0)}}
@media print{.view :is(.kicker,.project-index-item,h2,h1>span){animation:none!important;opacity:1!important;transform:none!important;-webkit-text-fill-color:currentColor!important;background:none!important}}
@media(forced-colors:active){.view .kicker{-webkit-text-fill-color:CanvasText!important;background:none!important}}

/* Opening: first visit to Home only, under two and a half seconds, never with
   reduced motion. The name is legible by 0.9 s. */
@media screen{
 .opening .cosmos{animation:open-sky 1.6s ease-out both}
 .opening .masthead{animation:open-fade .9s var(--settle) .15s both}
 .opening #home .origin-location{animation:open-reveal .8s var(--settle) .2s both}
 .opening #home h1>span{animation:open-rise 1s var(--approach) .32s both}
 .opening #home h1>.surname{animation-delay:.46s}
 .opening #home .planet{animation:open-ignite 1.1s var(--settle) 1s both}
 .opening #home :is(.origin-intro,.current-work){animation:open-fade .9s var(--settle) 1.2s both}
 /* Opacity only: an animated transform would make the stage the containing
    block of its fixed, full-viewport canvas, and the scene's framing would
    snap when the opening ends. */
 .opening .stage{animation:open-appear 1.4s ease-out .7s both}
}
@keyframes open-sky{from{opacity:0}to{opacity:1}}
@keyframes open-appear{from{opacity:0}to{opacity:1}}
@keyframes open-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes open-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes open-rise{from{opacity:0;clip-path:inset(0 0 100% 0);translate:0 .32em}to{opacity:1;clip-path:inset(-10% -5% -20% -5%);translate:none}}
@keyframes open-ignite{0%{opacity:0;transform:scale(.2);filter:brightness(3)}60%{opacity:1;filter:brightness(1.6)}100%{opacity:1;transform:none;filter:none}}

/* The readout belongs to wide screens; small screens keep the name and controls. */
@media screen and (max-width:1100px){.edition{display:none!important}}
@media screen and (max-width:640px){.theme-toggle .theme-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.theme-toggle{min-width:44px;justify-content:center}.utilities{gap:10px}}

/* Back to all work: a comet heading home instead of an arrow. */
.back-mark{width:26px;height:12px;margin-right:10px;flex:none;overflow:visible;transition:transform 260ms var(--settle)}
.back-mark path{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;opacity:.55}
.back-mark circle{fill:var(--accent)}
.back-mark .coma{fill:none;stroke:var(--accent);stroke-width:.8;opacity:.4}
.back-link:is(:hover,:focus-visible) .back-mark{transform:translateX(-4px)}
@media (prefers-reduced-motion:reduce){.back-mark{transition:none}}
@media (forced-colors:active){.back-mark circle{fill:CanvasText}.back-mark .coma{stroke:CanvasText}}

/* Full-resolution sky on dense wide screens, added once decoded (experience.js). */
@media screen and (min-width:900px){
 .sky-2x:not([data-theme="light"]) .cosmos-photo{background-image:url('assets/milky-way-eso-2x.webp')}
 .sky-2x[data-theme="light"] .cosmos-photo{background-image:url('assets/milky-way-eso-light-2x.webp')}
}

/* Space Grotesk's B carries spurs to the left of its stem; at display size and
   this tracking they wall the I off ("I | BRAHIM"). Kern the pair so IBRAHIM
   reads as one word: the stem gap then matches the rest of the word. */
.kern-ib{margin-right:-.035em}

/* Light theme, softened: a vellum white instead of glaring paper. The plate
   shows more of its stars, panels are frosted glass over the sky rather than
   solid sheets, and the scene's negative prints its shadow near the paper
   tone instead of as a bright disc. Text keeps WCAG AA contrast. */
[data-theme="light"]{--base:#d5d0c6;--muted:#3a424c;--dim:#4c5561;--accent:#744a0f}
[data-theme="light"] .cosmos{background:#d5d0c6}
[data-theme="light"] .cosmos-photo{opacity:.42}
[data-theme="light"] .cosmos-shade{background:linear-gradient(180deg,#d5d0c64d 0%,#d5d0c61a 40%,#d5d0c680 100%)}
[data-theme="light"] .masthead{background:#e2ded69e;border-bottom-color:#2a33401f}
[data-theme="light"] .section-banner{background:linear-gradient(90deg,#e2ded6a8,#e2ded64d)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
 [data-theme="light"] .masthead{-webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05)}
}

[data-theme="light"] .scene-ready .scene-hint:not(:empty){color:var(--dim)}

/* Music toggle (music.js): a speaker beside the theme switch. When on, its
   two waves breathe slowly; off, a small cross. */
.music-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 2px;font:400 .75rem/1 Mono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);background:none;border:0;cursor:pointer}
.music-glyph{width:20px;height:16px;overflow:visible}
.music-glyph path{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.music-glyph .speaker{fill:currentColor;fill-opacity:.18}
.music-glyph .wave{opacity:0;transition:opacity .4s}
.music-on .music-glyph .wave{opacity:1;animation:music-breathe 2.8s ease-in-out infinite}
.music-on .music-glyph .w2{animation-delay:.5s}
.music-glyph .mute{transition:opacity .3s}
.music-on .music-glyph .mute{opacity:0}
.music-on .music-toggle{color:var(--accent)}
@keyframes music-breathe{0%,100%{opacity:.35}50%{opacity:1}}
@media(hover:hover) and (pointer:fine){.music-toggle:hover{color:var(--accent)}}
@media screen and (max-width:640px){.music-toggle .music-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.music-toggle{min-width:44px;justify-content:center}}
@media (prefers-reduced-motion:reduce){.music-on .music-glyph .wave{animation:none;opacity:1}}
@media print{.music-toggle{display:none}}


/* ---------------------------------------------------------------------------
   Celestial navigation (celestial-nav.js). Five real small bodies are the
   navigation: no bar, no cards. Each link is a column: the body's orbit (the
   WebGL canvas draws the body exactly there) and its catalogue designation.
   The word is cut into the body; the link keeps it as text for assistive
   technology and shows it only when the bodies cannot be drawn.
   ------------------------------------------------------------------------- */
.celestial{--nav-h:clamp(96px,13vh,128px);position:fixed;right:2.5vw;bottom:6px;width:min(40vw,640px);height:var(--nav-h);z-index:25;pointer-events:none}
.celestial-canvas{position:absolute;left:-2vw;right:-1vw;top:-26px;bottom:0;width:calc(100% + 3vw);height:calc(100% + 26px);pointer-events:none;opacity:0;transition:opacity 900ms var(--settle)}
.celestial-ready .celestial-canvas{opacity:1}
.celestial-list{position:relative;display:flex;height:100%;margin:0;padding:0;list-style:none}
.celestial-list li{flex:var(--w,1) 1 0;min-width:0;display:flex}
.celestial-ready .celestial-list{justify-content:space-between}.celestial-ready .celestial-list li{flex:0 1 calc(var(--w) * 1px)}
.celestial a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;padding:2px 2px 8px;pointer-events:auto;color:var(--ink);outline:none;-webkit-tap-highlight-color:transparent}
.celestial-orbit{position:relative;flex:1;width:100%;min-height:0}
.celestial-word{position:absolute;left:0;right:0;top:38%;text-align:center;font:500 .9375rem/1 Space,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:opacity 600ms var(--settle)}
.celestial-ready .celestial-word{opacity:0}
.celestial-cat{display:flex;gap:0;align-items:baseline;justify-content:center;white-space:nowrap;font:400 .625rem/1 Mono,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:color 420ms var(--settle),opacity 420ms var(--settle);opacity:.82}
.celestial-cat b{font-weight:400;font-variant-numeric:tabular-nums;color:inherit}
.celestial-cat i{font-style:normal;padding:0 .35em;opacity:.6}
.celestial a[aria-current] .celestial-cat{color:var(--ink);opacity:1}
.celestial a[aria-current] .celestial-cat b{color:var(--accent)}
.celestial a[aria-current] .celestial-word{color:var(--accent)}
@media(hover:hover) and (pointer:fine){.celestial a:hover .celestial-cat{color:var(--muted);opacity:1}.celestial a:hover{color:var(--ink)}}
/* Focus is an observatory reticle around the body, not a box. */
.celestial-orbit:before,.celestial-orbit:after{content:'';position:absolute;inset:6% 9%;pointer-events:none;opacity:0;transition:opacity 300ms var(--settle),inset 300ms var(--settle);
 background:linear-gradient(var(--accent),var(--accent)) 0 0/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 0/1px 12px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 100% 0/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 0/1px 12px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 0 100%/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 100%/1px 12px no-repeat,
 linear-gradient(var(--accent),var(--accent)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 100%/1px 12px no-repeat}
.celestial-orbit:after{display:none}
.celestial a:focus-visible .celestial-orbit:before{opacity:1;inset:2% 5%}
.celestial a:focus-visible .celestial-cat{color:var(--ink);opacity:1}
.celestial-toggle{display:none}
html:not(.enhanced) .celestial,.static-nav .celestial{position:relative;inset:auto;width:auto;height:auto;margin:30px 6vw}
html:not(.enhanced) .celestial-canvas{display:none}
html:not(.enhanced) .celestial-word{position:static}
@media screen and (min-width:1700px){.celestial{right:5vw;width:min(40vw,760px)}}
@media screen and (min-width:900px) and (max-width:1100px){.celestial{right:2vw;width:46vw}.celestial-cat{font-size:.5625rem;letter-spacing:.1em}}
@media screen and (min-width:900px) and (max-width:1280px){.celestial li:last-child .celestial-cat{letter-spacing:.06em}}
/* Tablets: a band of five across the foot of the screen. */
@media screen and (max-width:899px){
 .celestial{left:0;right:0;bottom:0;width:100%;--nav-h:clamp(118px,17vh,150px);padding:0 2vw max(2px,env(safe-area-inset-bottom))}
 .celestial:before{content:'';position:absolute;inset:-26px 0 0;background:linear-gradient(to top,var(--base) 58%,transparent);pointer-events:none}
 .celestial-canvas{left:0;right:0;width:100%;top:-26px;height:calc(100% + 26px)}
 .celestial-cat{font-size:.5625rem;letter-spacing:.1em}
 .celestial-cat i,.celestial li:last-child .celestial-cat{letter-spacing:.04em}
 .colophon{padding-bottom:calc(var(--nav-h,130px) + 30px)}
}
/* Phones (and phones held sideways, where the band would take a third of the
   screen): one control opens a sheet where the five are large enough to read. */
@media screen and (max-width:599px),screen and (max-height:500px) and (pointer:coarse){
 .celestial.is-compact{height:auto;padding:0}
 .celestial.is-compact:before{inset:-20px 0 0}
 .is-compact .celestial-toggle{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:6px 22px max(6px,env(safe-area-inset-bottom));pointer-events:auto;color:var(--ink);font:400 .6875rem/1 Mono,monospace;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid var(--line)}
 .celestial-toggle-text{display:flex;gap:12px;align-items:baseline}
 .celestial-toggle-current{color:var(--accent)}
 .celestial-toggle-mark{order:2;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#9a8f80 0,#4a4640 38%,#1a1b1e 70%);box-shadow:inset -3px -3px 6px #0008}
 [data-theme="light"] .celestial-toggle-mark{background:radial-gradient(circle at 36% 34%,#857a6b 0,#3b3a38 40%,#17191d 72%)}
 .is-compact:not(.is-open) .celestial-list,.is-compact:not(.is-open) .celestial-canvas{display:none}
 .celestial.is-compact.is-open{position:fixed;inset:0;height:auto;z-index:60;display:flex;flex-direction:column;background:color-mix(in srgb,var(--base) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
 .is-compact.is-open:before{display:none}
 .is-compact.is-open .celestial-list{order:1;flex:1;flex-direction:column;padding:max(18px,env(safe-area-inset-top)) 16px 6px}
 .is-compact.is-open .celestial-canvas{top:0;left:0;right:0;width:100%;height:calc(100% - 56px)}
 .is-compact.is-open .celestial-toggle{order:2}
 .is-compact.is-open .celestial-list li{flex:1 1 0}
 .is-compact.is-open .celestial-cat{font-size:.625rem;letter-spacing:.12em}
 .is-compact .celestial-toggle .celestial-toggle-current:before{content:'· ';color:var(--dim)}
}
.nav-open{overflow:hidden}
@media(forced-colors:active){.celestial a:focus-visible{outline:3px solid Highlight;outline-offset:2px}.celestial-canvas{display:none}.celestial-word{position:static;opacity:1!important;color:LinkText}.celestial a[aria-current] .celestial-word{text-decoration:underline}}
@media print{.celestial{display:none!important}}

/* Travel: after the body answers, the view dims for a moment (a fixed,
   viewport-sized veil: fading the document itself would composite the whole
   page as one layer) and opens on the destination. */
.travel-veil{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;will-change:opacity;background:radial-gradient(140% 120% at var(--tx,80%) var(--ty,90%),color-mix(in srgb,var(--base) 55%,transparent) 0%,var(--base) 62%)}
@media screen and (prefers-reduced-motion:no-preference){
 .travel-veil{transition:opacity 520ms var(--settle)}
 .is-travelling .travel-veil{opacity:.86;transition-duration:260ms}
}

/* Masthead controls: icons only. Their names are their labels, shown as a
   quiet tooltip on hover and keyboard focus. */
.icon-control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;color:var(--dim);border-radius:50%;transition:color 320ms var(--settle),background-color 320ms var(--settle)}
.icon-control:after{content:attr(aria-label);position:absolute;top:calc(100% + 4px);left:50%;transform:translate(-50%,-4px);padding:6px 9px;white-space:nowrap;pointer-events:none;opacity:0;font:400 .625rem/1 Mono,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--tip-bg,#0b0f15f2);border:1px solid var(--line);transition:opacity 220ms var(--settle),transform 220ms var(--settle);z-index:5}
.icon-control:focus-visible{outline:2px solid var(--accent);outline-offset:2px;color:var(--ink)}
.icon-control:focus-visible:after{opacity:1;transform:translate(-50%,0)}
@media(hover:hover) and (pointer:fine){.icon-control:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}.icon-control:hover:after{opacity:1;transform:translate(-50%,0);transition-delay:350ms}}
.utilities{gap:10px}
.utilities a[download]{margin-left:12px}
.music-glyph{width:21px;height:17px}
.music-on .music-toggle{color:var(--accent)}
.theme-icon{width:20px;height:20px;overflow:visible}
.theme-icon .sun circle,.theme-icon .sun path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.theme-icon .moon{fill:currentColor;fill-opacity:.16;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.theme-icon .sun,.theme-icon .moon{transform-origin:12px 12px;transition:opacity 420ms var(--settle),transform 520ms var(--settle)}
:root:not([data-theme="light"]) .theme-icon .moon{opacity:0;transform:rotate(-40deg) scale(.6)}
[data-theme="light"] .theme-icon .sun{opacity:0;transform:rotate(60deg) scale(.6)}
[data-theme="light"]{--tip-bg:#ebe6dcf2}
@media(prefers-reduced-motion:reduce){.theme-icon .sun,.theme-icon .moon,.icon-control:after{transition:none}}
@media(forced-colors:active){.icon-control{border:1px solid ButtonText}.icon-control:after{display:none}}
.celestial li:last-child a{align-items:center}.celestial li:last-child .celestial-cat{letter-spacing:.1em;padding-left:0}
@media screen and (max-width:1366px){.celestial li:last-child .celestial-cat{font-size:.5625rem;letter-spacing:.02em}}

/* Light theme: the same universe under a different light. The sky is pale
   lunar stone with the galaxy kept as light and dust (light_plate.py); type
   is graphite; the black hole and the bodies stay physically dark. */
[data-theme="light"]{--base:#ded8cd;--ink:#1b1f26;--muted:#3b434e;--dim:#4d5662;--accent:#7a4e14;--line:#2a33402a}
[data-theme="light"] body,[data-theme="light"] .cosmos{background:#ded8cd}
[data-theme="light"] .cosmos-photo{opacity:.96}
[data-theme="light"] .cosmos-shade{background:radial-gradient(90% 80% at 16% 34%,#e4dfd54d 0%,#e4dfd500 62%),linear-gradient(180deg,#ded8cd22 0%,#ded8cd00 40%,#d6cfc355 100%)}
[data-theme="light"] .masthead{background:#e3ded4b8;border-bottom-color:#2a33401c}

/* The eyepiece is dark in both lights: its readout keeps night colours. */
[data-theme="light"] .eyepiece-readout{color:#dcb67f}
[data-theme="light"] .eyepiece-caption{color:#c3c9cf}

/* Captions are a fixed instrument readout, not part of camera framing.
   Reserving both rows prevents a 44px projection change at Qi Flash and
   every subsequent chapter. Invisible chapter links keep their space. */
@media screen{
 .stage{--scene-caption-height:88px}
 .stage figcaption{flex:0 0 var(--scene-caption-height);height:var(--scene-caption-height);min-height:var(--scene-caption-height);align-items:flex-start}
 .stage figcaption>span:first-child{max-width:none}
 .colophon{align-items:center;gap:8px 24px;padding-bottom:calc(var(--contents-height,56px) + 42px)}
 .colophon p{margin:0}
}
@media screen and (max-width:899px){
 .stage{--scene-caption-height:92px}
 .enhanced .view>.scene-slot{height:360px}
}
.resume-glyph{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media screen and (max-width:500px){
 .utilities{gap:6px}
 .utilities .resume-link[download]{display:inline-flex;width:44px;height:44px;min-width:44px;align-items:center;justify-content:center;margin-left:0;text-decoration:none;border-radius:50%}
 .resume-link .resume-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .resume-glyph{display:block}
 .resume-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}
@media screen and (max-width:380px){
 .masthead{gap:8px}
 .identity a>span:last-child{font-size:.875rem;white-space:nowrap}
 .identity small{font-size:.75rem;white-space:nowrap;letter-spacing:0}
}
@media screen and (max-width:340px){.identity .monogram{display:none}}

/* Chapter context and results: where the work happened, and the few figures
   the résumé states. Quiet instrument readings, never a dashboard. */
.project-context{margin:14px 0 30px;font:400 .75rem/1.6 Mono,monospace;letter-spacing:.04em;color:var(--dim);text-wrap:pretty}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 28px;margin:6px 0 10px;padding:0}
.results>div{padding:16px 0 14px;border-top:1px solid var(--line)}
.results dt{font:400 1.75rem/1.1 Space,Arial,sans-serif;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.results dd{margin:8px 0 0;font-size:.9375rem;line-height:1.5;color:var(--muted);text-wrap:pretty}
.project-note{font-size:.875rem!important;color:var(--dim)!important;margin-top:4px}
.side-project{margin-top:44px;max-width:44rem}
.side-project h3{font:400 .75rem/1.6 Mono,monospace;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.side-project p{margin:0 0 6px;color:var(--muted);line-height:1.6}
.side-project a{color:var(--ink);font-size:1.125rem}
.side-project a span{color:var(--accent)}
@media print{.results dt{color:#111}.results dd,.project-context{color:#333}}
@media(forced-colors:active){.results dt{color:CanvasText}}


/* Home: three readings under "Currently", so the first screen already shows
   real work. Instrument type, no motion of its own. */
.origin-proof{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:0 32px;max-width:34rem;font:400 .6875rem/1.45 Mono,monospace;letter-spacing:.03em;color:var(--dim)}
.origin-proof b{display:block;margin-bottom:4px;font:400 1.0625rem/1.1 Space,Arial,sans-serif;letter-spacing:-.015em;color:var(--accent);font-variant-numeric:tabular-nums}
@media screen and (max-width:899px){.origin-proof{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px;letter-spacing:0}.origin-proof li{text-wrap:balance}}
@media screen and (min-width:900px){.origin-proof{order:5}}
@media screen and (max-width:899px){.origin-proof{order:5;margin-top:14px}}
@media print{.origin-proof,.origin-proof b{color:#333}}

/* Scene labels: HTML text over the canvas (scroll-world.js places them each
   frame). Same type as before, now rasterised by the browser, so it stays
   crisp at any WebGL render scale. Never interactive, never read twice. */
.scene-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;visibility:hidden;contain:strict;-webkit-text-size-adjust:none;text-size-adjust:none}
.scene-ready .scene-labels{visibility:visible}
.static-scene .scene-labels{display:none}
@media screen and (min-width:900px){.enhanced .scene-labels{position:fixed}}
.scene-labels{will-change:transform}
.scene-label{position:absolute;left:0;top:0;white-space:nowrap;font:400 12px/1.1 Mono,"IBM Plex Mono",monospace;letter-spacing:.107em;text-transform:uppercase;
 text-shadow:0 0 2px rgba(4,6,10,.95),0 0 6px rgba(4,6,10,.7)}
[data-theme="light"] .scene-label{text-shadow:0 0 2px rgba(239,233,222,.95),0 0 6px rgba(239,233,222,.75)}
.is-observing .scene-labels{opacity:0;transition:opacity 300ms var(--ease)}

/* ── Masthead: a strip of the same night sky ───────────────────────────────
   One sky, one palette. The band is the galactic core from the site's own
   ESO/S. Brunier panorama (graded with PhotoCraft, assets/banner-galaxy*.webp),
   held low and dark so it reads as depth, not decoration; live stars and the
   odd meteor come from js/masthead-sky.js. No gradient type, no coloured glows:
   the only colour is the site's gold, on the monogram's period and a hairline
   glint that travels the lower edge. */
.masthead{isolation:isolate;overflow:hidden;background:#06080d;border-bottom:1px solid #b0bdc81f}
[data-theme="light"] .masthead{background:#e4dfd5;border-bottom-color:#2a33401f}
.masthead>:not(.masthead-sky){position:relative;z-index:1}
.masthead-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.masthead-sky>*{position:absolute;inset:0;display:block}
.masthead-band{inset:-35% -4%;background:url('assets/banner-galaxy.webp') 50% 52%/cover no-repeat;opacity:.5;filter:saturate(.7);
 animation:band-drift 120s linear infinite alternate;will-change:transform}
.masthead-nebula{background:linear-gradient(90deg,#06080df2 0,#06080db3 24%,#06080d8c 50%,#06080db3 76%,#06080df0 100%)}
.masthead-stars{width:100%;height:100%;opacity:.85}
.masthead-aurora{top:auto;height:1px;background:linear-gradient(90deg,transparent 0 40%,#f6dfb4 50%,transparent 60% 100%) 120% 0/250% 100% no-repeat;opacity:.55;animation:glint 9s var(--settle,ease) infinite}
[data-theme="light"] .masthead-band{background-image:url('assets/banner-galaxy-light.webp');opacity:.55;filter:none}
[data-theme="light"] .masthead-nebula{background:linear-gradient(90deg,#e4dfd5f2 0,#e4dfd5b3 24%,#e4dfd580 50%,#e4dfd5b3 76%,#e4dfd5f0 100%)}
[data-theme="light"] .masthead-stars{opacity:.6}
[data-theme="light"] .masthead-aurora{background-image:linear-gradient(90deg,transparent 0 40%,#8a5a14 50%,transparent 60% 100%);opacity:.35}
@media screen and (max-width:899px){
 .masthead-band{background-image:url('assets/banner-galaxy-mobile.webp');background-position:46% 50%}
 [data-theme="light"] .masthead-band{background-image:url('assets/banner-galaxy-mobile-light.webp')}
 .masthead-nebula{background:linear-gradient(90deg,#06080df0 0,#06080d99 50%,#06080dbf 100%)}
 [data-theme="light"] .masthead-nebula{background:linear-gradient(90deg,#e4dfd5f0 0,#e4dfd599 50%,#e4dfd5bf 100%)}
}
@keyframes band-drift{from{transform:translate3d(-2%,0,0) scale(1.04)}to{transform:translate3d(2%,0,0) scale(1.04)}}
@keyframes glint{0%,55%{background-position:120% 0}100%{background-position:-20% 0}}

/* The monogram: IS on an engraved orbit (a hairline, like the plates), a moon
   going round it, the period the site's gold. */
.identity .monogram{position:relative;display:inline-grid;place-items:center;width:46px;height:40px;letter-spacing:-.06em}
.identity .monogram>span{font-size:inherit;line-height:1;color:inherit}
.monogram-letters{color:var(--ink)}
.identity .monogram>.monogram-dot{position:absolute;right:0;bottom:8px;color:var(--accent)}
.monogram-orbit{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;overflow:visible;transform:rotate(-16deg);pointer-events:none}
.monogram-orbit ellipse{fill:none;stroke-width:.7}
.orbit-back{stroke:#b0bdc870}
.orbit-moon{fill:#d9d3c7}
[data-theme="light"] .orbit-back{stroke:#2a334033}[data-theme="light"] .orbit-moon{fill:#4d5662}
.identity small{letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.masthead-band,.masthead-aurora{animation:none}.masthead-aurora{opacity:0}}
@media (forced-colors:active){.masthead-sky,.monogram-orbit{display:none}}
@media print{.masthead-sky,.monogram-orbit{display:none}}

/* One name on screen at a time: while the hero's name is in view on Home, the
   masthead carries only the monogram; the name and role come in as the hero
   leaves (experience.js toggles .hero-in-view). */
.identity-text{transition:opacity 420ms var(--settle,ease),transform 520ms var(--settle,ease)}
.hero-in-view .identity-text{opacity:0;transform:translateY(-6px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.identity-text{transition:none}.hero-in-view .identity-text{transform:none}}

/* Phones: the sky covers the largest viewport, so the address bar showing
   or hiding never resizes (and clears) it mid-scroll. */
@supports (height:100lvh){.cosmos{bottom:auto;height:100lvh}}
/* Phones: the slot's edges are feathered on the GPU (scroll-world.js, fadeScene). */

/* The chapter readout sits over the galactic core: a dark well behind it. */
@media screen and (min-width:900px){
 .masthead-nebula{background:radial-gradient(24% 130% at 50% 50%,#06080dd9,#06080d00 100%),linear-gradient(90deg,#06080df2 0,#06080db3 24%,#06080d8c 50%,#06080db3 76%,#06080df0 100%)}
 [data-theme="light"] .masthead-nebula{background:radial-gradient(24% 130% at 50% 50%,#e4dfd5d9,#e4dfd500 100%),linear-gradient(90deg,#e4dfd5f2 0,#e4dfd5b3 24%,#e4dfd580 50%,#e4dfd5b3 76%,#e4dfd5f0 100%)}
}

/* Section banners: a slice of the same galactic core behind the chapter's
   readout, darkened towards the copy; the gold glint marks the lower edge. */
@media screen{
 .enhanced .section-banner,.section-banner{background:
  linear-gradient(90deg,#06080df2 0,#06080dc4 40%,#06080d80 100%),
  url('assets/banner-galaxy.webp') 62% 50%/cover no-repeat}
 .section-banner:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 40%,#f6dfb4 50%,transparent 60% 100%) 120% 0/250% 100% no-repeat;opacity:.5;animation:glint 11s var(--settle,ease) infinite}
 [data-theme="light"] .section-banner,[data-theme="light"] .enhanced .section-banner{background:
  linear-gradient(90deg,#e4dfd5f5 0,#e4dfd5c4 40%,#e4dfd580 100%),url('assets/banner-galaxy-light.webp') 62% 50%/cover no-repeat}
 [data-theme="light"] .section-banner:after{background-image:linear-gradient(90deg,transparent 0 40%,#8a5a14 50%,transparent 60% 100%);opacity:.35}
}
@media screen and (max-width:899px){
 .enhanced .section-banner,.section-banner{background:linear-gradient(90deg,#06080df2 0,#06080db3 55%,#06080d73 100%),url('assets/banner-galaxy-mobile.webp') 55% 50%/cover no-repeat}
 [data-theme="light"] .section-banner,[data-theme="light"] .enhanced .section-banner{background:linear-gradient(90deg,#e4dfd5f5 0,#e4dfd5b3 55%,#e4dfd573 100%),url('assets/banner-galaxy-mobile-light.webp') 55% 50%/cover no-repeat}
}
@media (prefers-reduced-motion:reduce){.section-banner:after{animation:none;opacity:0}}
@media (forced-colors:active),print{.section-banner:after{display:none}.section-banner{background:none!important}}
@media screen and (prefers-contrast:more){.section-banner{background:#06080d!important}}

/* Light theme: secondary ink and the gold accent meet WCAG AA (4.5:1) on the
   vellum ground (they were 4.2:1). */
html:root[data-theme="light"]{--dim:#4d5662;--accent:#744a0f}

/* Contact: ask about the work (js/ask.js). An instrument readout, not a chat
   window: one line to ask on, the answer as body copy, citations in gold that
   travel to their chapter, the sources listed as a short index. */
.ask{margin:46px 0 10px;padding-top:22px;border-top:1px solid var(--line);max-width:36rem}
.ask[hidden]{display:none}
.ask-label{display:block;font:400 .75rem/1.6 Mono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ask-row{display:flex;align-items:stretch;gap:0;border-bottom:1px solid color-mix(in srgb,var(--muted) 45%,transparent);transition:border-color 300ms var(--settle,ease)}
.ask-row:focus-within{border-bottom-color:var(--accent)}
.ask-row input{flex:1;min-width:0;min-height:48px;padding:10px 0;border:0;background:none;color:var(--ink);font:400 1.0625rem/1.4 Source,system-ui,sans-serif;outline:none}
.ask-row input::placeholder{color:var(--dim);opacity:1}
.ask-submit{min-width:72px;min-height:48px;padding:0 4px 0 14px;border:0;background:none;color:var(--ink);font:400 .9375rem Source,system-ui,sans-serif;cursor:pointer;text-align:right}
.ask-submit span{color:var(--accent)}
.ask-submit:disabled{color:var(--dim);cursor:progress}
.ask-submit:focus-visible,.ask-try button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ask-try{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:12px 0 0;font:400 .75rem/1.6 Mono,monospace;letter-spacing:.04em;color:var(--dim)}
.ask-try span{margin-right:2px}
.ask-try button{min-height:32px;padding:0;border:0;background:none;color:var(--muted);font:inherit;letter-spacing:inherit;cursor:pointer;border-bottom:1px solid transparent}
.ask-try button:hover{color:var(--ink);border-bottom-color:var(--line)}
.ask-answer{min-height:0;margin:20px 0 0;color:var(--muted);font:400 1.0625rem/1.65 Source,system-ui,sans-serif;white-space:pre-wrap}
.ask-answer:empty{margin:0}
.is-asking .ask-answer:empty:before{content:'Retrieving from the site, then answering';display:block;font:400 .75rem/1.6 Mono,monospace;letter-spacing:.06em;color:var(--dim);animation:ask-wait 1.6s ease-in-out infinite}
.is-asking .ask-answer:not(:empty):after{content:'';display:inline-block;width:.5em;height:1px;margin-left:2px;vertical-align:middle;background:var(--accent);animation:ask-wait 1s steps(2) infinite}
.has-error .ask-answer{color:var(--ink)}
.ask-cite{display:inline-block;margin:0 1px;padding:0 3px;font:400 .6875rem/1 Mono,monospace;color:var(--accent);vertical-align:super;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.ask-cite:hover{border-bottom-color:var(--accent)}
.ask-sources{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font:400 .75rem/1.6 Mono,monospace;letter-spacing:.03em}
.ask-sources:empty{display:none}
.ask-sources li:before{content:attr(data-n) ' · ';color:var(--accent)}
.ask-sources a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.ask-sources a:hover{color:var(--ink)}
.ask-note{margin:18px 0 0;font:400 .75rem/1.6 Source,system-ui,sans-serif;color:var(--dim)}
@keyframes ask-wait{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.is-asking .ask-answer:empty:before,.is-asking .ask-answer:not(:empty):after{animation:none}}
@media print{.ask{display:none}}