:root{color-scheme:light;--paper:#fff;--ink:#101210;--quiet:#73736d;--line:#cfcdc7;--rule:#efefed;--active:#62645f;--hover:#73736d;--bar:64px;--ease:cubic-bezier(.22,.75,.2,1);--gutter:clamp(24px,4.8vw,72px);--motion:640ms;--mark-size:44px}
:root[data-theme="dark"]{color-scheme:dark;--paper:#171916;--ink:#f1f1ec;--quiet:#aaa9a0;--line:#54574e;--rule:#34362f;--active:#c4c6bc;--hover:#c4c6bc}
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,p,figure{margin:0}
html{scrollbar-gutter:stable;scroll-padding-bottom:calc(var(--bar) + 16px)}
body{background:var(--paper);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;padding-bottom:var(--bar)}
a{color:inherit;text-decoration:none}
a,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid currentColor;outline-offset:7px}
::selection{background:#e0a5c9;color:#101210}
.skip{position:fixed;top:12px;left:12px;z-index:10;padding:12px;background:var(--paper);transform:translateY(-200%)}
.skip:focus{transform:none}
.page{--page-top:clamp(32px,9vh,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);grid-template-rows:auto 1fr;column-gap:8%;width:100%;max-width:1280px;margin-inline:auto;min-height:calc(100svh - var(--bar));padding:var(--page-top) var(--gutter) 4vh}
.opening{display:contents}
.left-rail,.right-rail{display:flex;flex-direction:column;min-width:0}
.left-rail{grid-column:1;grid-row:1;gap:0}
.right-rail{grid-column:2;grid-row:1 / span 2}
.introduction{max-width:33rem;scroll-margin-top:24px;container-type:inline-size}
.hello{display:flex;align-items:center;gap:20px}
.portrait{width:66px;height:66px;object-fit:contain}
.name-home{font-weight:500}
.wordmark{display:block;width:fit-content;transform-origin:left center;transition:transform 420ms var(--ease),color 240ms ease}
.wordmark-name{display:block;white-space:nowrap;font-size:clamp(2rem,3.6vw,4rem);line-height:1;letter-spacing:-.065em}
.introduction>p{margin-top:24px;font-size:min(1.35rem,3.25cqi);line-height:1.55;white-space:nowrap}
.introduction>.intro-role{white-space:normal}
.introduction>p+p{margin-top:12px}
.hello-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:.8125rem;line-height:1.5}
.hello-links a{border-bottom:1px solid var(--line);padding-bottom:3px}
.hello-links a:hover,.letters-link:hover{color:var(--quiet)}
.hello-links a[aria-expanded="true"]>span{display:inline-block;transform:rotate(45deg)}
.work{display:flex;flex-direction:column;gap:12px;margin-top:0}
.section-note{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:400;line-height:1.5;color:var(--quiet);margin-bottom:8px}
.project{min-width:0;scroll-margin-top:32px}
.project>summary{list-style:none;cursor:pointer;position:relative;width:fit-content;max-width:100%;transform-origin:left center;transition:color 240ms ease,transform 420ms var(--ease)}
summary::-webkit-details-marker{display:none}
.work-title{display:block;font-size:clamp(1.2rem,1.75vw,1.65rem);font-weight:500;line-height:1.12;letter-spacing:-.035em}
.work-title::after{content:' +';font-family:'JetBrains Mono',monospace;font-size:.7em;font-weight:300;color:var(--quiet)}
.project[open] .work-title::after{content:' −'}
.work-desc{display:block;margin-top:3px;font-family:'JetBrains Mono',monospace;font-size:.6875rem;line-height:1.5;color:var(--quiet)}
.project[open]>summary{color:var(--active)}
.project-copy{padding:22px 0 28px;max-width:38rem;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.6}
.project-copy p+p{margin-top:1em}
.project-copy .practical{margin-top:1.5em;font-family:'JetBrains Mono',monospace;font-size:.875rem;color:var(--quiet)}
.onward{display:block;width:fit-content;margin-top:1.2em;font-family:'JetBrains Mono',monospace;font-size:.875rem;line-height:1.65;text-decoration:underline;text-underline-offset:5px}
.onward:hover{color:var(--hover)}
.feature-stack{grid-column:1;grid-row:2;align-self:start;min-width:0;margin-top:40px}
.enhanced .feature-stack:not(:has(.feature[open])){display:none}
.feature{min-width:0;scroll-margin-top:28px}
.feature-summary{margin-top:20px;cursor:pointer;font-size:1rem}
.enhanced .feature-summary{display:none}
.feature-inner{padding-bottom:36px;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.65}
.feature-inner>p+p{margin-top:1em}
.feature h2{font-size:clamp(1.8rem,2.8vw,3.2rem);font-weight:500;line-height:1.1;letter-spacing:-.055em}
.story-heading{margin-bottom:30px;container-type:inline-size}
.story-heading h2{font-size:min(3.2rem,6.4cqi);white-space:nowrap}
.chapter{margin:24px 0;font-size:1rem}
.chapter>summary{cursor:pointer;list-style:none;font-family:'JetBrains Mono',monospace;font-size:.875rem;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.chapter[open]>summary>span{transform:rotate(45deg)}
.chapter>summary>span{transition:transform 500ms var(--ease)}
.chapter-copy{padding:24px 0 4px}
.chapter-copy>p+p{margin-top:1em}
.life-photo{margin:18px 0 28px}
.life-photo img{display:block;width:100%;height:auto}
.life-photo figcaption{font-family:'JetBrains Mono',monospace;font-size:.8125rem;line-height:1.6;color:var(--quiet);margin-top:12px}
.photo-journal{margin-top:36px;min-width:0}
.journal-photo+.journal-photo{margin-top:48px}
.journal-photo img,.journal-photo video{display:block;width:100%;height:auto;background:var(--rule)}
.journal-photo video{scroll-margin-top:24px}
.journal-photo figcaption{display:flex;gap:16px;margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:.75rem;line-height:1.6;color:var(--quiet)}
.journal-photo figcaption time{margin-left:auto;text-align:right}
.video-toggle{display:block;width:100%;padding:0;border:0;background:none;color:inherit;line-height:0;-webkit-tap-highlight-color:transparent}
.video-toggle video{pointer-events:none}
/* The footer owns the logo, so neither text column needs a reserved lane. */
.mark-home{width:var(--mark-size);height:var(--mark-size);flex-shrink:0;color:var(--ink)}
.space-mark{display:block;width:var(--mark-size);height:var(--mark-size);flex-shrink:0;transition:transform 420ms var(--ease),color 240ms ease}
.space-mark svg{width:100%;height:100%;display:block}
.utility{position:fixed;inset:auto 0 0;z-index:3;height:var(--bar);display:flex;justify-content:space-between;gap:28px;align-items:center;padding:0 var(--gutter);background:var(--paper);border-top:1px solid var(--rule);font-family:'JetBrains Mono',monospace;font-size:.75rem;line-height:1.5;color:var(--quiet)}
#now-playing{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.75rem;transition:opacity 320ms}
#np-label{text-transform:uppercase}
.footer-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.letters-link{flex-shrink:0}
.letters-short{display:none}
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;flex-shrink:0}
.theme-toggle[hidden]{display:none}
.theme-toggle svg{width:19px;height:19px;grid-area:1/1}
.theme-sun{display:none}
[data-theme="dark"] .theme-moon{display:none}
[data-theme="dark"] .theme-sun{display:block}
.theme-toggle:hover{color:var(--hover)}
.wordmark:focus-visible{transform:scale(1.045)}
.mark-home>.space-mark:focus-visible{transform:scale(1.12)}
@media(hover:hover){
  .project>summary:hover{transform:scale(1.035)}
  .project[open]>summary:hover{transform:none}
  .wordmark:hover{transform:scale(1.045);color:var(--hover)}
  .space-mark:hover{color:var(--hover)}
  .mark-home>.space-mark:hover{transform:scale(1.12)}
}

/* Both columns share the page scroll. A taller activity column may travel up
   until its bottom is visible; shorter columns stay near the top. */
@media(min-width:861px){
  .right-rail{align-self:start;padding:8px;margin:-8px}
  .enhanced .right-rail{position:sticky;top:min(calc(var(--page-top) - 8px),var(--rail-top-limit,0px))}
}
@media(min-width:861px) and (max-height:740px){
  .page{--page-top:28px;padding-bottom:24px}
  .portrait{width:52px;height:52px}
  .introduction>p{margin-top:16px;line-height:1.45}
  .hello-links{margin-top:16px}
  .work{gap:9px}
  .section-note{margin-bottom:4px}
  .work-title{font-size:1.2rem}
}
@media(max-width:860px){
  :root{--gutter:24px}
  .page{display:flex;flex-direction:column;gap:0;max-width:640px;padding:24px var(--gutter)}
  .opening{display:flex;flex-direction:column;gap:36px}
  .hello{gap:16px}
  .portrait{width:52px;height:52px}
  .wordmark-name{font-size:2.25rem}
  .introduction>p{margin-top:16px;font-size:1.0625rem;line-height:1.5;white-space:normal}
  .hello-links{margin-top:16px;font-size:.75rem}
  .feature-stack{margin-top:0}
  .work{gap:12px}
  .section-note{margin-bottom:4px}
  .work-title{font-size:1.25rem}
  .feature-inner{font-size:1rem}
  .utility{gap:16px;font-size:.6875rem}
  .footer-actions{gap:8px}
  #now-playing{font-size:.6875rem}
}
@media(max-width:599px){
  .letters-full{display:none}
  .letters-short{display:inline}
  .footer-actions{gap:4px}
}
@media(max-width:380px){
  :root{--gutter:18px}
  .hello-links{gap:10px 20px}
  .work-title{font-size:1.125rem}
  .utility{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .wordmark,.space-mark{transform:none!important}
}

/* Prepare images and fonts with a normal cursor, then quietly reveal the page.
   Opacity only: layout and the anchored footer stay in place. */
/* Keep the footer surface opaque from the first paint so the gallery never
   shows through it. Only the text and controls participate in the entry fade. */
html.site-loading .page,html.site-loading .utility>*,html.site-loading .skip{visibility:hidden}
html.site-ready .page,html.site-ready .utility>*{animation:page-arrive 900ms ease-out both}
@keyframes page-arrive{from{opacity:0}to{opacity:1}}