/* Space: the Fieldwork portfolio as a sky-atlas plate. Loaded after the hybrid layer; only pages with data-theme="space" opt in. */
html[data-theme="space"]{
  --sky:#0b1330;--sky-deep:#070c22;--plate:#0d1639e0;--plate-2:#142152;--grid:#26366f;--grid-soft:#1b2958;
  --star:#eef1ff;--star-2:#cbd3f1;--star-3:#a6b0d8;
  --vega:#8ea6ff;--vega-fill:#4a68f2;--amber:#ffb86b;--sage:#bfe0a6;--lilac:#cbbdf2;--peach:#ffc9a3;--peri:#aebcff;
  --paper:var(--sky);--ink:var(--star);--muted:var(--star-2);--line:var(--grid);--blue:var(--vega);--green:var(--sage);--pink:var(--lilac);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;background:var(--sky-deep);scrollbar-color:#34457f var(--sky-deep);
}
html[data-theme="space"] body{background:transparent;caret-color:var(--amber)}
html[data-theme="space"] ::selection{color:var(--sky);background:var(--amber)}
html[data-theme="space"] :focus-visible{outline-color:var(--amber)}
html[data-theme="space"] .skip{color:var(--sky)}
#sky,#universe{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none;background:var(--sky-deep)}
#universe,html[data-universe="on"] #sky{display:none}
html[data-universe="on"] #universe{display:block}
html[data-theme="space"] a{text-underline-offset:4px}

/* Header */
html[data-theme="space"] .site-header{border-bottom-color:var(--grid)}
html[data-theme="space"] .monogram{color:var(--vega)}
html[data-theme="space"] .site-header nav a{color:var(--star-2);transition:color .2s}
html[data-theme="space"] .site-header nav a:hover{color:var(--star)}

/* Hero */
html[data-theme="space"] .hero h1{color:var(--star)}
html[data-theme="space"] .intro{color:var(--star-2)}
html[data-theme="space"] .status-dot{background:var(--amber);box-shadow:0 0 0 3px #ffb86b24;animation:beacon 3s ease-in-out infinite;animation-play-state:paused}
html[data-theme="space"][data-motion="playing"][data-tab-hidden="false"] .status-dot{animation-play-state:running}
@keyframes beacon{0%,100%{box-shadow:0 0 0 2px #ffb86b30}50%{box-shadow:0 0 0 7px #ffb86b00}}
html[data-theme="space"] .pill-button{border-color:var(--vega);color:var(--vega)}
html[data-theme="space"] .pill-button:hover{background:var(--vega);color:var(--sky)}
html[data-theme="space"] .circle-icon{background:var(--vega);color:var(--sky)}
html[data-theme="space"] .pill-button:hover .circle-icon{background:var(--sky);color:var(--vega)}
html[data-theme="space"] .hero-bottom>div span:before{content:'';display:inline-block;width:5px;height:5px;margin-right:10px;vertical-align:2px;background:var(--amber);rotate:45deg}
html[data-theme="space"] .motion-control button{border-color:var(--grid);color:var(--star-2);transition:border-color .2s,color .2s}
html[data-theme="space"] .motion-control button:not(:disabled):hover{border-color:var(--vega);color:var(--star)}

/* The hero playground (a dust cloud that becomes a working system) is styled in orbits/orbits.css. */

/* Work: chart plates on open sky */
html[data-theme="space"] .work-section{background:transparent}
html[data-theme="space"] .featured-project{position:relative;isolation:isolate;background:var(--plate);border:1px solid var(--grid)}
html[data-theme="space"] .featured-project:before{content:'';position:absolute;z-index:-1;left:30%;top:74%;width:max(1100px,90vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 0,#1d3a35 0,#12282c 9%,#0d1b30 24%,#0e183d 42%);box-shadow:0 -1px 0 #bfe0a6b3,0 -16px 48px -18px #bfe0a680;pointer-events:none}
html[data-theme="space"] .featured-copy .project-context{color:var(--star-3)}
html[data-theme="space"] .project-tags li{border-color:var(--grid);color:var(--star-2)}
html[data-theme="space"] .illustration-note{color:var(--star-3)}
html[data-theme="space"] .delivery-map .judgment-note:nth-of-type(1){--tone:var(--peri)}
html[data-theme="space"] .delivery-map .judgment-note:nth-of-type(2){--tone:#e6ebff}
html[data-theme="space"] .delivery-map .judgment-note:nth-of-type(3){--tone:var(--lilac)}
html[data-theme="space"] .delivery-map .judgment-note rect{fill:#15225a;stroke:var(--tone);stroke-opacity:.55;filter:drop-shadow(0 10px 14px #0206157a)}
html[data-theme="space"] .delivery-map .note-icon{stroke:var(--tone)}
html[data-theme="space"] .delivery-map .note-detail{fill:var(--star-3)}
html[data-theme="space"] .delivery-map .workflow-output>rect{fill:var(--vega-fill)}
html[data-theme="space"] .delivery-route{stroke:var(--vega)}
html[data-theme="space"] .delivery-route.field-signal{stroke:var(--amber)}
html[data-theme="space"] .delivery-feedback{stroke:var(--sage)}
html[data-theme="space"] .delivery-map .feedback-label{fill:var(--sage)}

/* 1 day to 3 minutes as orbital periods: the same decision, one orbit 480 times faster. */
@keyframes orbit{to{transform:rotate(360deg)}}

html[data-theme="space"] .ella-art{background:var(--plate);border:1px solid var(--grid)}
/* Work: the featured plate carries the strongest proof, "1 day → 3 min" at headline scale, beside two orbits turning at the
   real ratio: one lap of the outer dot for every 480 of the inner one. */
html[data-theme="space"] .featured-budget .featured-copy{align-self:center}
html[data-theme="space"] .featured-budget .project-footnote{display:block;margin-top:22px;font-size:12px;letter-spacing:.02em;color:var(--star-3)}
.budget-feature{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:30px;padding:48px 52px 40px 8px}
.budget-times{display:grid;gap:22px}
.budget-times p{margin:0}
.budget-times span{display:block;margin-bottom:6px;font-size:13px;letter-spacing:.04em;color:var(--star-3)}
.budget-times strong{display:block;font-family:var(--display);font-weight:600;font-size:clamp(56px,6vw,90px);line-height:.95;letter-spacing:-.04em;white-space:nowrap;font-variant-numeric:tabular-nums}
.budget-times .time-before strong{color:var(--star-3)}
.budget-times .time-after strong{color:var(--star)}
.budget-orbits{position:relative;justify-self:center;width:min(100%,220px);aspect-ratio:1}
.budget-orbits i{position:absolute;border-radius:50%;animation:orbit 720s linear infinite;animation-delay:-150s;animation-play-state:paused}
.budget-orbits .orbit-slow{inset:0;border:1px dashed var(--grid)}
.budget-orbits .orbit-fast{inset:31%;border:1px solid #8ea6ff66;animation-duration:1.5s;animation-delay:0s}
.budget-orbits i:after{content:'';position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--star-3)}
.budget-orbits .orbit-fast:after{top:-3.5px;width:7px;height:7px;margin-left:-3.5px;background:var(--amber);box-shadow:0 0 0 3px #ffb86b26}
.budget-orbits b{position:absolute;inset:45%;border-radius:50%;background:radial-gradient(circle at 35% 32%,#e6ecff,#8ea6ff 52%,#34488f)}
html[data-theme="space"][data-motion="playing"][data-tab-hidden="false"] .budget-orbits i{animation-play-state:running}
.budget-caption{grid-column:1/-1;max-width:470px;margin:28px 0 0;font-size:13.5px;line-height:1.6;color:var(--star-2)}
/* The planet limb rises lower in this plate, so the orbit caption stays on open sky. */
html[data-theme="space"] .featured-budget:before{top:88%;left:42%}
/* Prentis: the way-of-working map on its own plate, beside Ella. */
html[data-theme="space"] .prentis-art{display:flex;align-items:center;justify-content:center;padding:16px 16px 38px;background:var(--plate);border:1px solid var(--grid)}
.prentis-art .delivery-map{width:100%;height:100%;padding:0}
html[data-theme="space"] .prentis-art .illustration-note{left:20px;right:auto;bottom:13px;font-size:12px}
.prentis-project .project-tags{margin-top:18px}
/* At card size the map shrinks to about 60%, so its lettering scales up to stay readable (about 12–15px on screen). */
.prentis-art .delivery-map text{font-size:23px}
.prentis-art .delivery-map .note-detail{font-size:18px}
.prentis-art .delivery-map .workflow-output text{font-size:27px}
.prentis-art .delivery-map .workflow-output .output-detail{font-size:19px}
.prentis-art .delivery-map .feedback-label{font-size:17px}
@media(max-width:800px){
  .budget-feature{grid-template-columns:1fr auto;padding:12px 28px 34px;column-gap:18px}
  .budget-times strong{font-size:clamp(44px,12vw,64px)}
  .budget-orbits{width:clamp(110px,30vw,170px)}
}
html[data-theme="space"] .question-bubble{background:var(--lilac);color:var(--sky)}
html[data-theme="space"] .reply-bubble{background:var(--plate-2);border-color:#cbbdf266;color:var(--star)}
html[data-theme="space"] .ella-mark,html[data-theme="space"] .knowledge-path{color:var(--lilac)}
html[data-theme="space"] .knowledge-path i{background:#cbbdf266}

/* Workbench: an atlas legend. Each category keeps its catalogue symbol. */
html[data-theme="space"] .project-library{border-top-color:var(--grid)}
html[data-theme="space"] [data-project-filter="ai/ml"],html[data-theme="space"] [data-category="ai/ml"]{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cellipse cx='8' cy='8' rx='7' ry='3.1' transform='rotate(-30 8 8)' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");--mark-color:var(--peach)}
html[data-theme="space"] [data-project-filter="data engineering"],html[data-theme="space"] [data-category="data engineering"]{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='1.9' stroke-dasharray='1.7 2.3'/%3E%3C/svg%3E");--mark-color:var(--amber)}
html[data-theme="space"] [data-project-filter="backend systems"],html[data-theme="space"] [data-category="backend systems"]{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");--mark-color:var(--sage)}
html[data-theme="space"] .project-filters button{display:inline-flex;align-items:center;gap:9px;border-color:var(--grid);color:var(--star-2);transition:border-color .2s,color .2s,background-color .2s}
html[data-theme="space"] .project-filters button:hover{border-color:var(--vega);color:var(--star)}
html[data-theme="space"] .project-filters button[aria-pressed=true]{background:var(--vega);border-color:var(--vega);color:var(--sky)}
html[data-theme="space"] .project-filters button:not([data-project-filter="all"]):before,html[data-theme="space"] .archive-meta:before{content:'';flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
html[data-theme="space"] .archive-project .archive-meta{display:flex;align-items:center;gap:8px;color:var(--vega)}
html[data-theme="space"] .archive-meta:before{background:var(--mark-color)}
html[data-theme="space"] .archive-project .archive-tools{color:var(--star-3)}
html[data-theme="space"] .archive-image{background:var(--plate);border-color:var(--grid);transition:border-color .3s,transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
html[data-theme="space"] .archive-project>a:hover .archive-image,html[data-theme="space"] .archive-project>a:focus-visible .archive-image{border-color:#8ea6ffa6;transform:translateY(-4px);box-shadow:0 22px 40px -26px #000}
html[data-theme="space"] .archive-project>a:focus-visible h4{color:var(--vega)}
/* The six project animations were drawn for paper. Remap their inks for the night plate. */
html[data-theme="space"] .project-motion-svg>rect:first-child{fill:var(--plate)}
html[data-theme="space"] .project-motion-svg text{fill:var(--star-2)}
html[data-theme="space"] .project-motion-svg [fill="#fff"]:not(text){fill:#18255e}
html[data-theme="space"] .project-motion-svg [fill="#2447df"]:not(text){fill:var(--vega-fill)}
html[data-theme="space"] .project-motion-svg [stroke="#2447df"],html[data-theme="space"] .project-motion-svg .pm-line{stroke:var(--vega)}
html[data-theme="space"] .project-motion-svg [fill="#68508a"]{fill:var(--lilac)}
html[data-theme="space"] .project-motion-svg [stroke="#68508a"]{stroke:var(--lilac)}
html[data-theme="space"] .project-motion-svg [fill="#f4f6fa"]:not(:first-child){fill:#16225a}
html[data-theme="space"] .project-motion-svg [fill="#e8dff4"]:not(:first-child){fill:#1b2253}
html[data-theme="space"] .project-motion-svg [fill="#6d8c60"]{fill:var(--sage)}
html[data-theme="space"] .project-motion-svg [fill="#9a69a8"]{fill:#dcaae8}
html[data-theme="space"] .project-motion-svg [fill="#17243e"]{fill:#243271}
html[data-theme="space"] .project-motion-svg [stroke="#9dabe8"]{stroke:#5163ab}
html[data-theme="space"] .project-motion-svg .pm-zone{stroke:#35468c}
html[data-theme="space"] .project-motion-svg .pm-response-card text{fill:var(--sky)}

/* Approach: a darker stretch of sky with a small orrery around the star */
html[data-theme="space"] .approach-section{background:linear-gradient(#040816b3,#04081680 50%,#040816b3);border-block:1px solid #26366f99;color:var(--star)}
html[data-theme="space"] .approach-intro .small-heading{color:var(--star-3)}
html[data-theme="space"] .approach-intro>p,html[data-theme="space"] .approach-steps p{color:var(--star-2)}
html[data-theme="space"] .approach-steps{position:relative}
html[data-theme="space"] .approach-steps:before{content:'';position:absolute;left:14px;top:44px;bottom:60px;width:0;border-left:1px dashed var(--grid)}
html[data-theme="space"] .approach-steps li{position:relative;border-color:var(--grid)}
html[data-theme="space"] .step-number{border-color:var(--vega);color:var(--vega);background:var(--sky-deep)}

/* About */
html[data-theme="space"] .about-heading .small-heading{color:var(--star-3)}
html[data-theme="space"] .portrait{background:var(--plate);border:1px solid var(--grid);box-shadow:0 14px 24px -14px #000c}
html[data-theme="space"] .portrait:after{content:'';position:absolute;inset:8px;pointer-events:none;opacity:.75;background:linear-gradient(var(--vega) 0 0) top left/14px 1px,linear-gradient(var(--vega) 0 0) top left/1px 14px,linear-gradient(var(--vega) 0 0) top right/14px 1px,linear-gradient(var(--vega) 0 0) top right/1px 14px,linear-gradient(var(--vega) 0 0) bottom left/14px 1px,linear-gradient(var(--vega) 0 0) bottom left/1px 14px,linear-gradient(var(--vega) 0 0) bottom right/14px 1px,linear-gradient(var(--vega) 0 0) bottom right/1px 14px;background-repeat:no-repeat}
html[data-theme="space"] .portrait figcaption{color:var(--star-2)}

/* Experience: a flight log along one trajectory */
html[data-theme="space"] .career-list{position:relative;padding-left:28px;border-top-color:var(--grid)}
html[data-theme="space"] .career-list:before{content:'';position:absolute;left:6px;top:0;bottom:0;width:0;border-left:1px dashed var(--grid)}
html[data-theme="space"] .career-item{position:relative;border-bottom-color:var(--grid)}
html[data-theme="space"] .career-item:before{content:'';position:absolute;left:-25.5px;top:33px;width:8px;height:8px;border-radius:50%;background:var(--star-3);box-shadow:0 0 0 4px var(--sky)}
html[data-theme="space"] .career-item[open]:before{background:var(--amber);box-shadow:0 0 0 4px var(--sky),0 0 12px #ffb86b80}
html[data-theme="space"] .career-date{color:var(--amber)}
html[data-theme="space"] .career-item summary:hover .career-role strong{color:var(--vega)}
html[data-theme="space"] .career-role strong{transition:color .2s}

/* Awards: a constellation, star size set by result like an atlas magnitude scale */
html[data-theme="space"] .awards-section{background:transparent;border-block:1px solid #26366f99}
html[data-theme="space"] .awards-intro p,html[data-theme="space"] .award-list p{color:var(--star-2)}
html[data-theme="space"] .award-list{position:relative;padding-left:32px}
html[data-theme="space"] .award-list:before{content:'';position:absolute;left:5px;top:8px;bottom:36px;width:0;border-left:1px dashed #34457f}
html[data-theme="space"] .award-list li{position:relative;border-bottom-color:var(--grid)}
html[data-theme="space"] .award-list li:before{content:'';position:absolute;left:calc(-27px - var(--mag) / 2);top:calc(31px - var(--mag) / 2);width:var(--mag);height:var(--mag);border-radius:50%;background:var(--star);box-shadow:0 0 0 4px #0b1330,0 0 14px #eef1ff59}
html[data-theme="space"] .award-list li{--mag:9px}
html[data-theme="space"] .award-list li:nth-child(3),html[data-theme="space"] .award-list li:nth-child(4){--mag:6px}
html[data-theme="space"] .award-list li:first-child{--mag:13px}
html[data-theme="space"] .award-list li:first-child:before{top:calc(11px - var(--mag) / 2);background:var(--amber);box-shadow:0 0 0 4px #0b1330,0 0 16px #ffb86b8c}
html[data-theme="space"] .award-list .award-place{color:var(--amber)}

/* Writing */
html[data-theme="space"] .article-list li{border-bottom-color:var(--grid)}
html[data-theme="space"] .article-list time{color:var(--star-3)}

/* Contact: the page ends above a planet's horizon */
html[data-theme="space"] .contact-section{position:relative;overflow:hidden;background:transparent;color:var(--vega)}
html[data-theme="space"] .contact-section:after{content:'';position:absolute;z-index:0;left:50%;top:calc(100% - 132px);width:max(2000px,170vw);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle at 50% 0,#173532 0,#0f2430 6%,#0a1629 18%,#070c1f 40%);box-shadow:0 -1px 0 #cfe8bcc9,0 -8px 30px -4px #bfe0a673,0 -60px 140px -40px #8fd0b040;pointer-events:none}
html[data-theme="space"] .contact-section>.wrap{z-index:1}
html[data-theme="space"] .contact-layout h2{color:var(--star)}
html[data-theme="space"] .contact-layout p{color:var(--star-2)}
html[data-theme="space"] .contact-links a{color:var(--star);border-bottom-color:#8ea6ff73;transition:color .2s,border-color .2s}
html[data-theme="space"] .contact-links a:hover{color:var(--vega);border-bottom-color:var(--vega)}
html[data-theme="space"] .contact-form label{color:var(--star-2)}
html[data-theme="space"] .contact-form input,html[data-theme="space"] .contact-form textarea{border-color:#34457f;background:#08102bd9;color:var(--star);caret-color:var(--amber);transition:border-color .2s}
html[data-theme="space"] .contact-form input:hover,html[data-theme="space"] .contact-form textarea:hover{border-color:#4c5fa6}
html[data-theme="space"] .contact-form input:focus,html[data-theme="space"] .contact-form textarea:focus{border-color:var(--vega)}
html[data-theme="space"] .contact-form input::placeholder,html[data-theme="space"] .contact-form textarea::placeholder{color:#7f8ab8}
html[data-theme="space"] .contact-form button{background:var(--vega);border-color:var(--vega);color:var(--sky);transition:background-color .2s,border-color .2s}
html[data-theme="space"] .contact-form button:not(:disabled):hover{background:var(--star);border-color:var(--star)}
html[data-theme="space"] .contact-form .form-note{color:var(--star-3)}
html[data-theme="space"] .footer-bottom{border-top-color:#8ea6ff33}
html[data-theme="space"] .footer-bottom>span{color:var(--star-3)}
html[data-theme="space"] .footer-bottom a{color:var(--star-2);transition:color .2s}
html[data-theme="space"] .footer-bottom a:hover{color:var(--star)}

@media(max-width:600px){
  html[data-theme="space"] .career-list{padding-left:20px}
  html[data-theme="space"] .career-list:before{left:4px}
  html[data-theme="space"] .career-item:before{left:-19.5px;top:28px}
  html[data-theme="space"] .award-list{padding-left:28px}
  html[data-theme="space"] .contact-section:after{top:calc(100% - 96px)}
}

/* Legibility over moving scenery: a soft dark shadow under all page text. */
html[data-theme="space"] :is(main,.contact-section){text-shadow:0 1px 3px rgb(2 4 14 / .85),0 0 18px rgb(2 4 14 / .95)}
html[data-theme="space"] .contact-form input,html[data-theme="space"] .contact-form textarea,html[data-theme="space"] button{text-shadow:none}

/* Flight readout: an instrument in the left gutter on desktop, a pause button with arrival toasts on smaller screens. */
.flight{display:none}
html[data-universe="on"] .flight{position:fixed;left:10px;top:50%;translate:0 -50%;z-index:20;display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--star)}
.flight-track{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.flight-track li{width:3px;height:16px;border-radius:2px;background:#26366f;transition:background-color .5s,height .5s var(--ease-out)}
.flight-track li.is-past{background:#8ea6ff8c}
.flight-track li.is-here{height:30px;background:var(--amber)}
.flight-now{writing-mode:vertical-rl;text-orientation:sideways;rotate:180deg;display:flex;flex-direction:row;gap:8px;margin:0;padding:12px 5px;border:1px solid #2c3d7a99;border-radius:14px;background:#050a1ce0;font-size:12px;line-height:1.45;white-space:nowrap}
.flight-name{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--star)}
.flight-distance{color:var(--amber);font-variant-numeric:tabular-nums}
.flight-caption{color:var(--star-2)}
.flight-caption:empty{display:none}
.flight-pause{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--grid);border-radius:50%;background:#050a1ccc;color:var(--star-2);transition:border-color .2s,color .2s,opacity .3s,translate .35s var(--ease-out)}
.flight-pause:not(:disabled):hover{border-color:var(--vega);color:var(--star)}
.flight-pause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flight-pause .icon-play{display:none;fill:currentColor;stroke:none}
html[data-motion="paused"] .flight-pause .icon-pause{display:none}
html[data-motion="paused"] .flight-pause .icon-play{display:block}
.flight.is-changing .flight-now{animation:hud-swap .8s var(--ease-out) both}
@keyframes hud-swap{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
/* With the readout active, the hero pause pill and the in-page kicker labels step aside; the readout carries both. */
html[data-universe="on"] .motion-control{display:none}
@media(prefers-reduced-motion:no-preference){html[data-universe="on"] .small-heading{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
html[data-universe="on"] .contact-section:after{display:none}
@media(max-width:1100px),(max-height:620px){
  html[data-universe="on"] .flight{left:auto;right:14px;top:auto;bottom:16px;translate:none;flex-direction:row;gap:10px}
  .flight-track{display:none}
  .flight-now{position:absolute;right:52px;bottom:2px;writing-mode:horizontal-tb;text-orientation:mixed;rotate:none;flex-direction:column;gap:0;padding:9px 14px;border:1px solid #2c3d7acc;border-radius:14px;background:#050a1ceb;opacity:0;pointer-events:none;text-shadow:none}
  .flight-pause{width:44px;height:44px}
  .flight.is-changing .flight-now{animation:toast 3.6s var(--ease-out) both}
}
/* Phones: no waypoint toast (it lands on the lines you are about to read), and the pause button tucks away while you scroll,
   coming back as soon as you stop. The footer keeps a clear strip so the button never sits on its last links. */
@media(max-width:600px){
  html[data-universe="on"] .flight-now{display:none}
  html[data-universe="on"] .flight{bottom:max(14px,env(safe-area-inset-bottom))}
  .flight-pause{background:#050a1cf2;box-shadow:0 8px 18px -8px #000}
  .flight.is-tucked .flight-pause{opacity:0;translate:0 14px;pointer-events:none}
  /* At rest it is a smaller disc tight in the corner, with its 44px touch target kept by an invisible ring. */
  html[data-universe="on"] .flight{right:6px}
  html[data-universe="on"] .flight-pause{position:relative;width:36px;height:36px}
  html[data-universe="on"] .flight-pause::after{content:'';position:absolute;inset:-4px;border-radius:50%}
  html[data-universe="on"] .career-item summary{padding-right:30px}
  html[data-universe="on"] .footer-bottom{padding-bottom:68px}
}
@keyframes toast{0%{opacity:0;translate:10px 0}10%,80%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}

/* Drawn icons in one stroke weight replace the old Unicode arrows and asterisk. */
.arrow{display:inline-block;width:.78em;height:.78em;vertical-align:-.04em;background:currentColor;--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.arrow-down-left{rotate:180deg}.arrow-up{rotate:-45deg}.arrow-down{rotate:135deg}
.circle-icon .arrow{width:16px;height:16px}
html[data-theme="space"] .approach-symbol{display:block;width:80px;height:80px;margin-top:38px;font-size:0;background:var(--amber);--star-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20M4.9 4.9l14.2 14.2M19.1 4.9 4.9 19.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask:var(--star-mark) center/contain no-repeat;mask:var(--star-mark) center/contain no-repeat;animation:star-turn 120s linear infinite;animation-play-state:paused}
html[data-theme="space"][data-motion="playing"][data-tab-hidden="false"] .approach-symbol{animation-play-state:running}
@keyframes star-turn{to{rotate:360deg}}

/* Launch: the headline and chart settle in as the warp from page load slows to cruise. */
@media(prefers-reduced-motion:no-preference){
  html[data-theme="space"] .hero h1{animation:launch-in 1.4s var(--ease-out) .45s both}
  html[data-theme="space"] .hero .intro,html[data-theme="space"] .hero .pill-button,html[data-theme="space"] .hero-topline{animation:launch-in 1.1s var(--ease-out) .75s both}
  html[data-theme="space"] .problem-playground{animation:chart-in 1.8s var(--ease-out) .3s both}
}
@keyframes launch-in{from{opacity:0;translate:0 30px;filter:blur(12px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes chart-in{from{opacity:0;scale:.86}to{opacity:1;scale:1}}

/* Arrivals: section headings come in out of the depth; everything else gets a short, quiet lift. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    html[data-theme="space"] :is(.section-heading h2,.library-heading h3,.approach-intro h2,.about-heading h2,.experience-heading h2,.awards-intro h2,.writing-intro h2,.contact-layout h2){animation:arrive linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    html[data-theme="space"] :is(.featured-project,.project-story,.archive-project,.approach-steps li,.about-copy,.education-list article,.tool-groups>div,.article-list li,.contact-form,.career-item,.award-list li){animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    html[data-theme="space"] .portrait{animation:plate-in linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
    html[data-theme="space"] :is(.career-item,.award-list li){view-timeline:--beacon block}
    html[data-theme="space"] :is(.career-item,.award-list li):before{animation:ignite linear both;animation-timeline:--beacon;animation-range:entry 40% cover 40%}
  }
}
@keyframes arrive{from{opacity:0;translate:0 48px;scale:.94;filter:blur(10px)}to{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
@keyframes lift{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes plate-in{from{opacity:0;translate:-40px 60px;rotate:-9deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes ignite{0%{scale:0;opacity:0}70%{scale:1.9;opacity:1}100%{scale:1;opacity:1}}

@media(prefers-reduced-motion:reduce){html[data-universe="on"] .flight{display:none}html[data-universe="on"] .motion-control{display:flex}}

/* Small text over bright limbs: the hero tags get dark chips over Earth, and the footer sits on a soft ground shadow over the arrival world. */
html[data-universe="on"] .hero-bottom>div span{padding:5px 11px;border:1px solid #2c3d7a80;border-radius:20px;background:#050a1cc7;color:var(--star-2)}
/* Under reduced motion the hero pause pill returns right on Earth's lit atmosphere, so it wears the same dark chip. */
html[data-universe="on"] .motion-control button{background:#050a1cc7;border-color:#2c3d7a80}
html[data-universe="on"] .contact-section:before{display:block;content:'';position:absolute;inset:auto 0 0 0;width:auto;height:150px;border:0;border-radius:0;background:linear-gradient(to top,#030612f5 25%,#03061200);pointer-events:none;z-index:0}

/* Licence credit for the planet surface maps (Solar System Scope, CC BY 4.0). */
html[data-theme="space"] .footer-bottom .map-credit{margin-left:10px}

/* Reading layer. The inherited scale had a 99px headline over 11–12px actions and 8–11px metadata; this gives the page a
   middle: actions at 14–15px, metadata at 12–13px, reading text at 15px, and long descriptions held to a readable measure.
   Scoped to the theme so it wins over the base layer at every width. */
html[data-theme="space"] .intro{font-size:16px;line-height:1.75}
html[data-theme="space"] :is(.section-heading>p,.featured-copy>p:not(.project-context):not(.project-footnote),.project-story-text>p:not(.project-context),.approach-intro>p,.about-copy>p,.experience-heading p,.awards-intro p,.writing-section p,.contact-layout p,.library-heading p){font-size:15px;line-height:1.75}
html[data-theme="space"] :is(.archive-project p,.approach-steps p,.tool-groups p,.education p,.award-list p){font-size:14.5px;line-height:1.7}
html[data-theme="space"] .career-description{font-size:15px;line-height:1.75}
html[data-theme="space"] :is(.career-description p,.award-list li>p){max-width:36em}
html[data-theme="space"] :is(.question-bubble,.reply-bubble p){font-size:14px}
html[data-theme="space"] :is(.hero-topline,.hero-bottom,.project-context,.project-footnote,.filter-status,.career-date,.award-list .award-place,.article-list time,.contact-form .form-note,.footer-bottom,.footer-bottom>span,.footer-bottom>div){font-size:12.5px}
html[data-theme="space"] :is(.project-tags li,.knowledge-path,.archive-project .archive-meta,.archive-project .archive-tools){font-size:12px}
html[data-theme="space"] .portrait figcaption{font-size:13px}
html[data-theme="space"] .pill-button{gap:20px;font-size:14.5px}
html[data-theme="space"] .text-link{font-size:14px}
html[data-theme="space"] :is(.contact-form button,.contact-links a){font-size:14.5px}
html[data-theme="space"] .project-filters button{font-size:13.5px}
html[data-theme="space"] .motion-control button{font-size:12.5px}
@media(min-width:801px){html[data-theme="space"] .site-header nav{font-size:13.5px}}
@media(max-width:800px){html[data-theme="space"] .intro{font-size:15px}}

/* The one optional field says so; the other three carry `required` for assistive tech and the browser. */
html[data-theme="space"] .field-optional{margin-left:6px;font-size:12px;font-weight:400;color:var(--star-3)}
/* Under reduced motion there is nothing to pause, so the disabled pill ("Reduced motion") steps out instead of posing as a button. */
html[data-theme="space"] .motion-control button:disabled{display:none}

/* Project names read as bylines under their headings (no labels above headings); workbench categories sit with the stack. */
html[data-theme="space"] :is(.featured-copy,.project-story-text) h3+.project-context{margin:-8px 0 18px}
html[data-theme="space"] .archive-project .archive-meta{margin:16px 0 0}
html[data-theme="space"] .archive-project .archive-tools{margin-top:6px}
.nowrap{white-space:nowrap}
/* Five workbench projects: three across, then two wider, so the grid never ends on an empty cell (unless a filter is on). */
@media(min-width:1101px){
  html[data-theme="space"] .archive-grid:not(:has(>[hidden])){grid-template-columns:repeat(6,minmax(0,1fr))}
  html[data-theme="space"] .archive-grid:not(:has(>[hidden]))>li{grid-column:span 2}
  html[data-theme="space"] .archive-grid:not(:has(>[hidden]))>li:nth-child(n+4){grid-column:span 3}
}