@font-face {
  font-family:'DM Sans'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('fonts/dm-sans-v17-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:'DM Sans'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('fonts/dm-sans-v17-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --readable-text-size:21px;
  --night:#2e3440; --night-soft:#3b4252; --muted:#4c566a;
  --paper:#eceff4; --rule:#d8dee9; --snow:#e5e9f0;
  --red:#bf616a; --orange:#d08770; --yellow:#ebcb8b;
  --green:#a3be8c; --purple:#b48ead; --blue:#4c6a90; --frost:#81a1c1;
  --sans:'DM Sans',Arial,sans-serif; --gutter:5.2vw;
  --section-space:96px; --section-title:clamp(55px,8.5vw,136px);
  --card-inset:32px; --panel-inset:32px;
  --action-height:64px; --action-padding:18px 24px;
}
* { box-sizing:border-box; }
@media(max-width:750px) { :root { --readable-text-size:19px; } }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
.page-scrolling .section-background *,
.page-scrolling .chapter-aster::after,
.page-scrolling .hero-sculpture *,
.page-scrolling .role-page *,
.page-scrolling .company-logo *,
.page-scrolling .hero-note .ph-icon,
.page-scrolling .frost-layer,
.page-scrolling .role-toggle-label::after { animation-play-state:paused!important; }
@media(max-width:750px), (pointer:coarse) {
  body.enhanced .reveal { filter:none!important; transform:none!important; transition:opacity .65s cubic-bezier(.16,1,.3,1)!important; }
  /* Keep each background on one moving SVG surface on Android. */
  .career-chapter .card-geometry .card-plane {
    animation:none!important;
    transform:translate(25px,-20px) rotate(var(--angle)) scale(.85);
  }
  .career-chapter .card-geometry .sail-fold {
    transform:rotate(calc(var(--angle) - 12deg)) translate(-25px,15px) scale(.9,1.05);
  }
  .career-chapter .card-geometry svg {
    transform-origin:center;
    animation:career-background-drift 19s ease-in-out infinite;
  }
}
@keyframes career-background-drift {
  0%,100% { transform:translate(-2%,1%) rotate(-3deg) scale(1.05); }
  50% { transform:translate(2%,-1%) rotate(3deg) scale(1.1); }
}
body { margin:0; background:var(--paper); color:var(--night); font-family:var(--sans); }
::selection { color:var(--night); background:var(--yellow); }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
:where(button[data-scroll-target]) { border:0; padding:0; background:transparent; color:inherit; text-align:inherit; }
h1,h2,h3,p { margin:0; }
p { line-height:1.55; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--blue); outline-offset:6px; }
.skip { position:fixed; z-index:20; top:-80px; left:20px; padding:12px; background:var(--night); color:var(--paper); }
.skip:focus { top:16px; }
header { margin:0 var(--gutter); height:100px; display:flex; align-items:center; border-bottom:1px solid var(--rule); gap:30px; }
.brand { min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; flex-shrink:0; font-weight:600; font-size:23px; letter-spacing:-1.2px; margin-right:auto; }
.brand span { color:var(--red); }
header nav { display:flex; gap:38px; font-size:13px; align-items:center; }
header nav a { padding:10px 0; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
header nav a:hover { color:var(--blue); }
header nav a span { margin-left:10px; }
@media(max-width:900px) {
  header { gap:16px; }
  header nav { gap:14px; font-size:12px; }
}
@media(max-width:750px) {
  body > header { height:auto; min-height:124px; display:grid; grid-template-columns:1fr auto; gap:0; padding:12px 0 8px; }
  header nav { grid-column:1 / -1; grid-row:2; justify-content:space-between; gap:4px; font-size:12px; }
  header #theme { grid-column:2; grid-row:1; }
  header nav a { min-width:0; }
}
.hero { position:relative; isolation:isolate; min-height:calc(100svh - 100px); display:flex; flex-direction:column; justify-content:center; padding:35px var(--gutter) 36px; gap:35px; }
.has-background { position:relative; isolation:isolate; }
.section-background { position:absolute; inset:0; overflow:hidden; contain:strict; pointer-events:none; z-index:-1; color:var(--blue); opacity:.16; }
.section-background svg { display:block; width:100%; height:100%; overflow:visible; }
.section-background path,.section-background ellipse,.section-background circle { fill:none; stroke:currentColor; stroke-width:1; vector-effect:non-scaling-stroke; }
.plane-background,[data-theme="dark"] .plane-background { opacity:.18; }
.section-background .soft-shape { fill:var(--blue); stroke:none; vector-effect:none; opacity:.22; transform-box:fill-box; transform-origin:center; }
.section-background .soft-shape:nth-child(even),.section-background .secondary-plane { fill:var(--frost); opacity:.3; }
.pane { animation:pane-tilt 22s ease-in-out infinite; animation-delay:var(--phase); }
.ribbon { animation:plane-drift 24s ease-in-out infinite; animation-delay:var(--phase); }
.crescent { animation:crescent-turn 26s ease-in-out infinite; animation-delay:var(--phase); }
.card-geometry,[data-theme="dark"] .card-geometry { opacity:.3; mask-image:linear-gradient(100deg,transparent 5%,#000 55%); }
@media(min-width:751px) and (pointer:fine) {
  /* Expanding the notes must not resize and rasterize the SVG every frame. */
  .card-geometry { bottom:auto; height:auto; aspect-ratio:1000 / 650; }
}
.section-background .card-plane { fill:#eceff4; stroke:none; vector-effect:none; opacity:.45; transform-origin:720px 330px; animation:card-unfold 22s ease-in-out infinite; animation-delay:var(--phase); }
.card-plane:nth-child(2) { opacity:.3; animation-direction:reverse; }
.card-plane:nth-child(3) { opacity:.2; }
.fan-background { border-radius:inherit; }
.section-background .fan-plane { transform-box:view-box; transform-origin:430px 410px; animation:fan-open 22s ease-in-out infinite; animation-delay:var(--phase); }
.facet-background,[data-theme="dark"] .facet-background { height:800px; max-height:100%; opacity:.18; }
.facet { transform-origin:670px 320px; animation:facet-fold 24s ease-in-out infinite; animation-delay:var(--phase); }
.facet-face { fill:var(--blue); opacity:.22; stroke:var(--blue); stroke-width:.7; }
.facet-edge { fill:var(--frost); opacity:.3; }
.facet:nth-child(even) .facet-face { fill:var(--purple); }
@keyframes pane-tilt { 0%,100% { transform:translate(-35px,-15px) rotate(-11deg); } 50% { transform:translate(35px,15px) rotate(11deg); } }
@keyframes plane-drift { 0%,100% { transform:translate(-45px,-25px) rotate(-3deg); } 50% { transform:translate(45px,25px) rotate(3deg); } }
@keyframes crescent-turn { 0%,100% { transform:rotate(-25deg) scale(.9); } 50% { transform:rotate(25deg) scale(1.12); } }
@keyframes fan-open { 0%,100% { transform:rotate(calc(var(--angle)*.65 - 12deg)); } 50% { transform:rotate(calc(var(--angle)*1.6 + 15deg)); } }
@keyframes facet-fold { 0%,100% { transform:rotate(var(--angle)) scale(.75); } 50% { transform:rotate(calc(var(--angle) + 28deg)) scale(1.12); } }
@keyframes card-unfold { 0%,100% { transform:translate(25px,-20px) rotate(var(--angle)) scale(.85); } 50% { transform:translate(-35px,30px) rotate(calc(var(--angle) + 35deg)) scale(1.16); } }
@media(max-width:600px) { .facet-background { height:700px; } }
.hero h1 { position:relative; z-index:2; display:flex; flex-direction:column; gap:24px; width:100%; font:800 clamp(90px,14vw,240px)/.92 var(--sans); letter-spacing:-.075em; perspective:900px; text-shadow:0 3px 4px #2e344033,0 9px 22px #2e34401a; }
[data-theme="dark"] .hero h1 { text-shadow:0 3px 5px #0000004d,0 10px 25px #00000033; }
@media(min-width:901px) {
  .hero h1 { font-size:clamp(90px,min(14vw,calc((100svh - 360px)/3.68)),240px); }
}
.human { display:block; color:var(--red); white-space:nowrap; }
.second-line { display:block; margin-left:10vw; margin-top:4px; white-space:nowrap; }
.hero h1 em { color:var(--blue); font-weight:800; }
.letter { display:inline-block; position:relative; transform-origin:50% 85%; }
.hero-note { display:flex; align-items:center; gap:60px; justify-content:space-between; border-top:1px solid var(--rule); padding-top:24px; margin:48px 0 0 10vw; max-width:790px; }
.hero-note p { font-size:21px; letter-spacing:-.5px; line-height:1.35; }
@media(max-width:600px) { .hero-note p br { display:none; } }
.text-link { display:flex; align-items:center; gap:22px; font-size:13px; white-space:nowrap; padding:10px 0; }
.text-link svg { width:24px; height:24px; fill:none; stroke:var(--blue); stroke-width:1.2; transition:translate .3s; }
.text-link:hover svg { translate:0 6px; }
.hero-rule { position:absolute; bottom:0; left:var(--gutter); right:var(--gutter); height:3px; display:flex; }
.hero-rule i { flex:1; background:var(--red); }
.hero-rule i:nth-child(2) { background:var(--orange); }
.hero-rule i:nth-child(3) { background:var(--yellow); }
.hero-rule i:nth-child(4) { background:var(--green); }
.hero-rule i:nth-child(5) { background:var(--purple); }
.hero-rule i:nth-child(6) { background:var(--frost); }
.work { padding:calc(var(--section-space)/2) var(--gutter); }
.section-title { font:500 clamp(60px,7vw,110px)/.92 var(--sans); letter-spacing:-.055em; margin-bottom:80px; }
.section-title em { color:var(--blue); margin-left:8vw; }
.project { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6vw; align-items:start; margin-bottom:var(--section-space); }
.project:last-child { margin-bottom:0; }
.project-copy { min-width:0; }
.project h3 { font:700 clamp(40px,4.5vw,68px)/1.06 var(--sans); letter-spacing:-.04em; margin-bottom:16px; color:var(--blue); text-shadow:0 2px 6px #2e34400a; text-wrap:balance; }
.project-room h3 { color:var(--red); }
.project-copy > p { font-size:clamp(18px,1.55vw,24px); max-width:470px; letter-spacing:-.5px; line-height:1.45; }
.project-copy > .project-tagline { font-size:clamp(26px,2.3vw,34px); font-weight:700; line-height:1.2; letter-spacing:-.04em; margin-bottom:24px; text-shadow:0 2px 6px #2e34400a; }
@media(max-width:600px) {
  .project h3 { font-size:42px; }
  .project-copy > p { font-size:20px; }
  .project-copy > .project-tagline { font-size:28px; }
}
.poster { min-width:0; aspect-ratio:1/1.06; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.learn-poster { background:var(--yellow); flex-direction:column; padding:50px 25px; }
.room-poster { background:var(--green); isolation:isolate; }
details { margin-top:26px; }
summary { display:flex; justify-content:space-between; align-items:center; list-style:none; cursor:pointer; border-top:1px solid var(--rule); padding:17px 0; font-size:13px; }
summary::-webkit-details-marker { display:none; }
summary span { font-size:22px; line-height:1; }
.about { padding:calc(var(--section-space)/2) var(--gutter); background:var(--snow); }
.reading { max-width:1120px; font:500 clamp(60px,8vw,125px)/.98 var(--sans); letter-spacing:-.055em; }
.reading em { color:var(--blue); }
.about-note { display:grid; grid-template-columns:minmax(180px,280px) minmax(0,1fr); align-items:center; gap:6vw; margin:48px 0 0; }
.career h3 { font:500 34px/1 var(--sans); letter-spacing:-1px; margin-bottom:8px; }
.career p { font-size:13px; max-width:330px; }
footer { padding:95px var(--gutter) 35px; background:var(--night); color:var(--snow); }
footer > p { font-size:14px; }
.footer-bottom { border-top:1px solid var(--muted); padding-top:25px; display:flex; align-items:center; justify-content:space-between; gap:25px; font-size:12px; }
.enhanced .reveal { opacity:0; transform:translateY(28px); transition:opacity .65s,transform .65s cubic-bezier(.16,1,.3,1); }
.enhanced .reveal.visible { opacity:1; transform:none; }
.enhanced .career-chapter.reveal { transform:none; transition:opacity .65s; }
.paused *,.paused *::after { animation-play-state:paused!important; }
.paused .letter { animation:none; opacity:1; }
.paused .reveal { opacity:1; transform:none; transition:none; }
@media(min-width:1800px) { :root { --gutter:max(5.2vw,calc((100vw - 1620px)/2)); } }
@media(max-width:900px) {
  header { min-height:85px; }

  .hero-note { margin-left:10vw; max-width:600px; gap:30px; }
  .hero-note p { font-size:19px; }
  .project { gap:5vw; }
  .poster { aspect-ratio:.85; }
}
@media(max-width:600px) {
  :root { --gutter:6vw; --section-space:64px; --section-title:14vw; --card-inset:24px; --panel-inset:24px; --action-height:60px; --action-padding:16px 22px; }
  html { scroll-padding-top:20px; }
  .brand { font-size:20px; }
  header nav a span { display:none; }

  .second-line { margin-left:0; margin-top:0; }
  .hero-note { display:block; margin:40px 0 0; padding-top:22px; }
  .hero-note p { font-size:19px; }
  .hero-note .text-link { width:fit-content; margin-top:20px; }
  .project { display:flex; flex-direction:column; align-items:stretch; gap:24px; }
  .project-room .poster { order:2; }
  .poster { aspect-ratio:1; }
  .reading { font-size:61px; }
  .about-note { display:block; margin:32px 0 0; }
  .career h3 { font-size:30px; }
  .career p { font-size:12px; }
  footer { padding-top:60px; }
  footer > p { font-size:12px; }
  .footer-bottom { flex-wrap:wrap; font-size:11px; gap:20px; }
  .footer-bottom > :is(a,button):first-child { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::after { animation:none!important; transition:none!important; }
  .enhanced .reveal { opacity:1; transform:none; }
}

/* Full-viewport sans typography. */
em { font-style:normal; }

.second-line { margin-left:0; margin-top:0; }
.hero .letter { animation:focus-letter 1.6s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i)*.075s); }
.hero em .letter { animation-delay:calc(.3s + var(--i)*.075s); }

.second-line,.purpose-line { animation:line-arrive 1.5s cubic-bezier(.16,1,.3,1) both; }
.purpose-line { animation-delay:.55s; }
@keyframes line-arrive { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }
header { animation:focus-line 1.2s cubic-bezier(.16,1,.3,1) both; }
.hero-note { margin:10px 0 0; max-width:none; width:100%; padding-top:22px; }
.hero-note p { font-size:clamp(24px,2.65vw,42px); font-weight:500; letter-spacing:-1px; line-height:1.2; animation:focus-line 1.3s .55s both; }
.hero-note .text-link { font-size:17px; font-weight:600; gap:24px; padding:18px 22px 18px 27px; border-radius:40px; background:var(--night); color:var(--paper); box-shadow:0 5px 12px #2e344014; animation:focus-line 1.3s .75s both; transition:transform .3s,box-shadow .3s,background .3s; }
.hero-note .text-link svg { width:30px; height:30px; stroke:var(--yellow); }
.hero-note .text-link:hover { transform:translateY(-3px); box-shadow:0 10px 20px #2e344026; }
@keyframes focus-letter { from { opacity:0; filter:blur(18px); transform:translateY(.24em) scale(.96); } to { opacity:1; filter:blur(0); transform:none; } }
@keyframes focus-line { from { opacity:0; filter:blur(10px); translate:0 18px; } to { opacity:1; filter:blur(0); translate:0 0; } }
.paused header,.paused .second-line,.paused .purpose-line,.paused .hero-note p,.paused .hero-note .text-link { animation:none; }
.section-title,.reading { font-weight:700; }
.reading { font-size:clamp(48px,7vw,108px); }
@media(max-width:900px) {
  .hero { min-height:calc(100svh - 85px); }
}
@media(max-width:600px) {

  .second-line { white-space:normal; }
  .second-line em { display:block; }
  .hero-note { margin:0; }
  .hero-note p { font-size:25px; letter-spacing:-.6px; }
  .hero-note .text-link { margin-top:22px; font-size:16px; padding:14px 21px; }
  .reading { font-size:46px; }
}

/* Carry the hero's weight, depth and focus into the fieldnotes. */
.section-title { font-size:var(--section-title); font-weight:800; line-height:.96; letter-spacing:-.06em; margin-bottom:48px; text-shadow:0 5px 12px #2e344014; }
.section-title em { margin-left:0; }
.project { gap:6vw; }
.poster { border-radius:20px; box-shadow:0 12px 25px #2e344014; }
summary { border:0; border-radius:36px; background:var(--night); color:var(--paper); padding:18px 24px; font-size:16px; font-weight:600; box-shadow:0 5px 12px #2e344014; transition:background .3s,translate .3s,box-shadow .3s; }
summary span { color:var(--yellow); margin-left:20px; }
summary:hover { background:var(--night-soft); translate:0 -3px; box-shadow:0 10px 20px #2e344026; }
.reading { font-weight:800; line-height:1.03; text-shadow:0 5px 12px #2e344014; }
.about-note strong { font-weight:800; }
.about-ai { --emphasis-color:#567d3e; color:var(--emphasis-color); }
.about-coding { --emphasis-color:#89538b; color:var(--emphasis-color); }
.about-operations { --emphasis-color:#b46343; color:var(--emphasis-color); }
[data-theme="dark"] .about-ai { --emphasis-color:var(--green); }
[data-theme="dark"] .about-coding { --emphasis-color:var(--purple); }
[data-theme="dark"] .about-operations { --emphasis-color:var(--orange); }
.career h3 { font:700 clamp(28px,2.8vw,44px)/1.1 var(--sans); letter-spacing:-1.5px; }
.career p { font-size:16px; line-height:1.5; }
footer > p { font-size:clamp(19px,2vw,28px); letter-spacing:-.5px; }
.footer-bottom { font-size:14px; }
.paused .reveal { filter:none; }
@media(max-width:600px) {
  .section-title { margin-bottom:32px; }
  .poster { border-radius:14px; }
  .reading { font-size:43px; }
  .career h3 { font-size:28px; }
  .career p { font-size:14px; }
  .footer-bottom { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .enhanced .reveal { filter:none; }
}

#theme { min-width:90px; flex-shrink:0; min-height:44px; font:500 12px var(--sans); color:inherit; background:transparent; border:1px solid var(--rule); border-radius:24px; padding:9px 12px; cursor:pointer; }
#theme:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.theme-control { position:relative; display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:50%; transition:background-color .25s; }
.theme-control:hover { background:color-mix(in srgb,currentColor 8%,transparent); }
.theme-control:has(:focus-visible) { outline:2px solid var(--blue); outline-offset:3px; }
.theme-icon { width:21px; height:21px; pointer-events:none; }
.theme-icon > * { display:none; }
.theme-control[data-mode="system"] .theme-system,.theme-control[data-mode="light"] .theme-light,.theme-control[data-mode="dark"] .theme-dark { display:block; }
.theme-control #theme { position:absolute; grid-area:auto; inset:0; width:44px; min-width:44px; max-width:44px; height:44px; padding:0; opacity:0; }
.theme-menu { position:absolute; right:0; top:52px; display:flex; gap:6px; padding:8px; background:var(--paper); color:var(--night); border-radius:16px; box-shadow:0 8px 24px #2e344033; z-index:10; }
.theme-menu[hidden] { display:none; }
.theme-menu button { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:inherit; transition:background-color .2s,color .2s; }
.theme-menu svg { width:22px; height:22px; }
.theme-menu button:hover { background:#d8dee9; }
.theme-menu button[aria-checked="true"] { background:#4c6a90; color:#eceff4; }
[data-theme="dark"] .theme-menu { background:#434c5e; color:#eceff4; box-shadow:0 8px 24px #00000040; }
[data-theme="dark"] .theme-menu button:hover { background:#4c566a; }
[data-theme="dark"] .theme-menu button[aria-checked="true"] { background:#88c0d0; color:#2e3440; }
.site-credit { font-size:clamp(18px,1.4vw,20px); line-height:1.6; max-width:65ch; padding:12px 0 20px; }
.site-credit .credit-heading { font-size:clamp(24px,2vw,28px); font-weight:750; letter-spacing:-.025em; line-height:1.2; margin-bottom:16px; }
.credit-model { display:inline; white-space:nowrap; font-weight:650; }
.credit-model svg { display:inline-block; width:1em; height:1em; margin-right:.3em; vertical-align:-.125em; fill:currentColor; }
.site-credit .credit-palette { font-size:17px; margin-top:16px; }
.site-footer .footer-bottom { align-items:flex-start; gap:24px 48px; }
.site-footer .footer-bottom > :is(a,button) { flex:none; margin-top:12px; }
.site-credit a { text-decoration:underline; text-underline-offset:3px; }
:root { color-scheme:light; }
:root[data-theme="dark"] { color-scheme:dark; --blue:#9bb7d8; --red:#d38b92; --rule:#566176; }
[data-theme="dark"] body { background:#2e3440; color:#e5e9f0; }
[data-theme="dark"] .about { background:#3b4252; }
[data-theme="dark"] .about-note,[data-theme="dark"] .project-copy > p { color:#c8d0dc; }
[data-theme="dark"] .career-heading { border-color:var(--rule); }
[data-theme="dark"] .reading,[data-theme="dark"] .section-title { text-shadow:0 5px 15px #00000018; }
[data-theme="dark"] summary { background:#434c5e; color:#f0f3f8; border:1px solid #56677e; box-shadow:0 5px 15px #00000018; }
[data-theme="dark"] summary:hover { background:#4c566a; border-color:#8198b6; }
[data-theme="dark"] .hero-note .text-link svg { stroke:#ebcb8b; }
[data-theme="dark"] summary span { color:#ebcb8b; }
[data-theme="dark"] .learn-poster { background:#d5bb89; color:#2e3440; }
[data-theme="dark"] .room-poster { background:#91a880; color:#2e3440; }
:root[data-theme="dark"] .chapter-date,:root[data-theme="dark"] .chapter-number { color:var(--chapter-accent); }
[data-theme="dark"] .chapter-bottom,[data-theme="dark"] .chapter-tag { border-color:#e5e9f026; }
[data-theme="dark"] .career-chapter,[data-theme="dark"] .poster { box-shadow:0 12px 30px #00000015; }
[data-theme="dark"] footer { background:#2e3440; }
[data-theme="dark"] .footer-bottom { border-color:var(--rule); }
@media(max-width:600px) {
  #theme { padding:8px 5px; font-size:11px; max-width:80px; }
  .brand { font-size:var(--readable-text-size); }
}

/* Career chapters */
.career { margin-top:64px; }
.career-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,240px); align-items:end; gap:24px 48px; padding:24px 0 48px; border-top:1px solid #c6cedc; }
.career-heading h2 { font:800 var(--section-title)/.96 var(--sans); letter-spacing:-.06em; text-shadow:0 5px 12px #2e344014; }
.career-heading h2 em { color:var(--blue); }
.career-heading > p,.contact-intro > p { position:static; margin:0; padding:0 0 4px; max-width:240px; font-size:clamp(18px,1.7vw,24px); line-height:1.4; letter-spacing:-.5px; }
.career-chapters { list-style:none; padding:0; margin:0; display:grid; gap:25px; }
.career-chapter { padding:var(--card-inset); border-radius:24px; overflow:hidden; box-shadow:0 12px 26px #2e344017; --chapter-accent:var(--yellow); background:var(--night); color:var(--paper); }
.chapter-forma { background:var(--yellow); color:var(--night); --chapter-accent:var(--red); }
.chapter-independent { background:var(--purple); color:var(--night); --chapter-accent:var(--paper); }
.chapter-top { display:flex; align-items:center; gap:24px; font-size:13px; font-weight:500; }
.chapter-number { font-size:38px; line-height:1; font-weight:800; letter-spacing:-2px; color:var(--chapter-accent); }
.chapter-date { margin-left:auto; font-size:clamp(22px,2.5vw,34px); font-weight:650; line-height:1.1; letter-spacing:-.025em; color:var(--chapter-accent); white-space:nowrap; font-variant-numeric:tabular-nums; }
.chapter-main { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:38px 0 42px; }
.chapter-main > div:first-child { min-width:0; }
.career .chapter-main h3 { font:750 clamp(40px,5.5vw,88px)/1.04 var(--sans); letter-spacing:-.04em; margin-bottom:15px; text-shadow:0 2px 6px #2e34400a; }
.chapter-main h3 > span { color:var(--chapter-accent); }
.career .chapter-role { font-size:clamp(20px,2.2vw,33px); letter-spacing:-.8px; max-width:none; }
.chapter-bottom { display:flex; justify-content:space-between; align-items:end; gap:35px; border-top:1px solid currentColor; padding-top:25px; }
.career .chapter-bottom p { max-width:34ch; font-size:21px; font-weight:450; line-height:1.5; letter-spacing:-.3px; }
.career .chapter-bottom p strong,.role-story p strong,.role-brief p strong { color:inherit; font-weight:750; text-shadow:0 1px 2px #2e34401f; }
.chapter-tag { font-size:12px; font-weight:600; white-space:nowrap; padding-bottom:4px; }
.career-art { width:145px; height:145px; flex-shrink:0; position:relative; color:var(--chapter-accent); }
.career-art i { position:absolute; display:block; transition:transform 1s cubic-bezier(.16,1,.3,1); }
.art-orbit i { width:100%; height:45%; border:3px solid currentColor; border-radius:50%; top:27%; }
.art-orbit i:nth-child(2) { transform:rotate(60deg); }
.art-orbit i:nth-child(3) { transform:rotate(120deg); }
.career-chapter:hover .art-orbit i:first-child { transform:rotate(180deg); }
.career-chapter:hover .art-orbit i:nth-child(2) { transform:rotate(240deg); }
.career-chapter:hover .art-orbit i:nth-child(3) { transform:rotate(300deg); }
.paused .career-art i { transition:none; }
@media(max-width:900px) {
  .career-heading { grid-template-columns:1fr; }
  .career-heading > p { max-width:none; }
  .career-art { width:95px; height:95px; }
  .chapter-bottom { align-items:start; flex-direction:column; gap:18px; }
  .career .chapter-main h3 { font-size:clamp(40px,5.5vw,88px); }
}
@media(max-width:600px) {
  .career { margin-top:48px; }
  .career-heading { padding-bottom:32px; }
  .career-chapter { border-radius:18px; }
  .chapter-top { flex-wrap:wrap; gap:14px; }
  .chapter-theme { order:3; width:100%; font-size:12px; }
  .chapter-number { font-size:32px; }
  .chapter-date { font-size:clamp(25px,7vw,36px); }
  .chapter-main { position:relative; padding:32px 0 24px; }
  .chapter-top { position:relative; padding-right:0; }
  .chapter-theme { padding-right:48px; }
  .career .chapter-main h3 { font-size:clamp(36px,9.5vw,56px); letter-spacing:-.04em; }
  .career .chapter-role { font-size:19px; letter-spacing:-.5px; }
  .career-art { position:absolute; top:-32px; right:0; width:36px; height:36px; }
  .career-art i { border-width:2px; }
  .career .chapter-bottom p { font-size:19px; }
  .chapter-tag { white-space:normal; }
}

/* Finishing details: restrained depth, crisp colour and deliberate motion. */
body { -webkit-font-smoothing:antialiased; }
header nav a,.footer-bottom :is(a,button) { position:relative; }
header nav a::after,.footer-bottom :is(a,button)::after { content:''; position:absolute; left:0; right:0; bottom:3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1); }
header nav a:hover::after,header nav a:focus-visible::after,.footer-bottom :is(a,button):hover::after,.footer-bottom :is(a,button):focus-visible::after { transform:scaleX(1); }
.hero-note .text-link:active,summary:active { transform:translateY(0) scale(.985); }
.project-copy > p,.chapter-bottom p { text-wrap:pretty; }
.chapter-forma .chapter-date,.chapter-forma .chapter-number { color:#883e47; }
.chapter-independent .chapter-date,.chapter-independent .chapter-number { color:var(--night); }
.chapter-bottom { border-color:#2e344033; }
.chapter-northstar .chapter-bottom { border-color:#eceff433; }
.chapter-theme { letter-spacing:.015em; }
.chapter-tag { border:1px solid #2e344033; border-radius:30px; padding:8px 13px; }
.chapter-northstar .chapter-tag { border-color:#eceff433; color:var(--yellow); }
.career-chapter { box-shadow:0 2px 3px #2e344007,0 14px 30px #2e344010; }
.career-art { transition:rotate 1.2s cubic-bezier(.16,1,.3,1); }
.career-chapter:hover .career-art { rotate:-5deg; }
.company-logo { display:flex; align-items:center; justify-content:center; }
.company-logo svg { display:block; width:100%; height:100%; fill:currentColor; overflow:visible; transition:transform 1s cubic-bezier(.16,1,.3,1); }
.logo-google svg { width:86%; height:86%; }
.logo-kobo path { transition:transform 1s cubic-bezier(.16,1,.3,1); }
.company-logo svg { filter:drop-shadow(0 3px 3px #2e344047) drop-shadow(0 9px 8px #2e344033); }
.career-art.logo-vmware { width:190px; }
.company-logo svg { transform-origin:center; animation:company-drift 5s ease-in-out infinite; animation-play-state:paused; }
.logo-google path { transform-box:fill-box; transform-origin:center; animation:google-breathe 5s ease-in-out infinite; animation-play-state:paused; }
.logo-google path:nth-child(2) { animation-delay:-.15s; }
.logo-google path:nth-child(3) { animation-delay:-.3s; }
.logo-google path:nth-child(4) { animation-delay:-.45s; }
.logo-vmware svg { animation-name:vmware-drift; }
.career-chapter:hover .company-logo svg,.career-chapter:focus-within .company-logo svg,.career-chapter:hover .logo-google path,.career-chapter:focus-within .logo-google path { animation-play-state:running; }
@keyframes company-drift { 0%,100% { transform:translateY(0) rotate(0); } 35% { transform:translateY(-5px) rotate(5deg); } 70% { transform:translateY(-2px) rotate(-3deg); } }
@keyframes google-breathe { 0%,100% { scale:1; } 50% { scale:.96; } }
@keyframes vmware-drift { 0%,100% { transform:perspective(500px) rotateY(0) translateY(0); } 30% { transform:perspective(500px) rotateY(-12deg) translateY(-5px); } 70% { transform:perspective(500px) rotateY(10deg) translateY(2px); } }
.career-chapter:hover .kf-k { transform:translateX(3px); }
.career-chapter:hover .kf-f { transform:translateX(-3px); }
.career-chapter:hover .kf-line { transform:translateY(-4px); }
@media(max-width:750px) { .career-art.company-logo { top:24px; } .career-art.logo-vmware { width:72px; } }
@media(prefers-reduced-motion:reduce) { .company-logo svg,.logo-google path { animation:none; } .company-logo svg,.logo-kobo path { transition:none; } }
.paused .company-logo svg,.paused .logo-google path,.page-inactive .company-logo svg,.page-inactive .logo-google path { animation-play-state:paused!important; }
.paused .company-logo svg,.paused .logo-kobo path { transition:none; }
.reading,.career-heading h2 { text-wrap:balance; }
.chapter-theme { letter-spacing:.035em; }
.career .chapter-role { font-weight:500; line-height:1.25; }
.project-copy > p { max-width:31ch; }
[data-theme="dark"] a:focus-visible,[data-theme="dark"] summary:focus-visible,[data-theme="dark"] #theme:focus-visible { outline-color:#ebcb8b; }
.paused *,.paused *::before,.paused *::after { transition:none!important; }
.paused .reveal { filter:none; }
@media(max-width:600px) {
  .chapter-tag { font-size:11px; }
  .career-chapters { gap:20px; }
}
@media(prefers-reduced-motion:reduce) {
  *::before { animation:none!important; transition:none!important; }
  .enhanced .reveal { filter:none; }
}

/* A ribbon marks the fieldnote currently open. */
.poster::after { content:''; position:absolute; top:0; right:28px; width:30px; height:70px; background:#8d424b; clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); transform:translateY(-100%); transition:transform .45s cubic-bezier(.16,1,.3,1); }
@media(max-width:900px) { .footer-bottom { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .poster::after { transition:none; } }

/* Contact is a destination; the colophon follows separately. */
.contact-section { padding:calc(var(--section-space)/2) var(--gutter) 64px; background:var(--paper); color:var(--night); }
.contact-intro { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:end; gap:24px 48px; margin-bottom:48px; }
.contact-intro h2 { font:800 var(--section-title)/.96 var(--sans); letter-spacing:-.06em; text-shadow:0 5px 12px #2e344014; }
.contact-intro h2 em { color:var(--blue); }
.contact-desk { display:grid; grid-template-columns:1fr 1fr; border-radius:24px; overflow:hidden; box-shadow:0 12px 30px #2e344010; }
.contact-prompt,[data-theme="dark"] .contact-prompt { position:relative; padding:var(--panel-inset); background:#a3be8c; color:#2e3440; }
.contact-prompt h3 { font:700 clamp(36px,2.8vw,40px)/1.08 var(--sans); letter-spacing:-.035em; margin-bottom:26px; }
.contact-prompt h3 em,[data-theme="dark"] .contact-prompt h3 em { color:#78324f; }
.contact-prompt > p { font-size:var(--readable-text-size); max-width:29ch; line-height:1.5; }
.contact-symbol { position:absolute; right:35px; top:30px; font:400 55px/1 var(--sans); }
.contact-action { display:flex; flex-direction:column; justify-content:center; background:var(--snow); padding:var(--panel-inset); }
.contact-guidance { font-size:clamp(21px,1.7vw,24px); line-height:1.35; letter-spacing:-.7px; margin-bottom:35px; }
.write-link svg { transition:translate .3s; }
.write-link:hover { translate:0 -2px; }
.write-link:hover svg { translate:3px -3px; }
.site-footer { padding:0 var(--gutter) 30px; background:var(--paper); color:var(--night); }
.site-footer .footer-bottom { border-color:var(--rule); }
[data-theme="dark"] .contact-section,[data-theme="dark"] .site-footer { background:#2e3440; color:#e5e9f0; }
[data-theme="dark"] .contact-action { background:#434c5e; }
@media(max-width:900px) {
  .contact-intro { grid-template-columns:1fr; gap:24px; }
  .contact-intro > p { max-width:none; }
}
@media(max-width:600px) {
  .contact-section { padding-bottom:48px; }
  .contact-intro { margin-bottom:32px; }
  .contact-desk { border-radius:18px; }
  .contact-prompt h3 { font-size:36px; }
  .contact-prompt > p { font-size:var(--readable-text-size); }
  .site-footer .footer-bottom { align-items:center; }
}

.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
svg.ph-icon { width:24px; height:24px; fill:currentColor!important; stroke:none!important; flex-shrink:0; vertical-align:middle; }
.hero-note .text-link .ph-icon,.write-link .ph-icon { width:28px; height:28px; color:var(--yellow); }
header nav .ph-icon { width:18px; height:18px; }
summary .ph-icon { width:22px; height:22px; }
.chapter-date { display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.chapter-date strong { font:inherit; }
.chapter-date small { font:500 13px/1.2 var(--sans); letter-spacing:.015em; color:inherit; }
/* Aurora surfaces carry the career chapters in both themes. */
.chapter-northstar,[data-theme="dark"] .chapter-northstar { background:#a3be8c; color:#10141b; --chapter-accent:#10141b; }
.chapter-forma,[data-theme="dark"] .chapter-forma { background:#ebcb8b; color:#2e3440; --chapter-accent:#883e47; }
.chapter-independent,[data-theme="dark"] .chapter-independent { background:#d78f95; color:#2e3440; --chapter-accent:#503d52; }
.chapter-independent .chapter-date,:root[data-theme="dark"] .chapter-independent .chapter-date { color:#2e3440; }
.chapter-northstar .chapter-role,[data-theme="dark"] .chapter-northstar .chapter-role { color:#10141b; }
[data-theme="dark"] .chapter-role,[data-theme="dark"] .chapter-bottom p { color:#2e3440; }
[data-theme="dark"] .chapter-northstar .chapter-bottom p { color:#10141b; }
.chapter-northstar .chapter-tag { color:#10141b; }
.chapter-northstar .chapter-bottom,.chapter-northstar .chapter-tag,[data-theme="dark"] .chapter-bottom,[data-theme="dark"] .chapter-tag { border-color:#2e344040; }

.slogan-first,.slogan-next { display:block; min-width:0; }
.slogan-next { padding-top:0; }
.hero .second-line,.purpose-line { font-weight:400; }
.purpose { font-weight:800; }
.slogan-first .human,.slogan-first .second-line,.practical,.purpose-line { display:block; white-space:nowrap; }
.practical { color:#ad705c; }
.purpose { color:#627a50; }
[data-theme="dark"] .practical { color:#d08770; }
[data-theme="dark"] .purpose { color:#a3be8c; }
.slogan-next .letter { animation-delay:calc(.55s + var(--i)*.06s); }
.purpose-line .letter { animation-delay:calc(.8s + var(--i)*.06s); }
@media(max-width:600px) {
  .hero { min-height:calc(100svh - 124px); padding-top:75px; padding-bottom:30px; gap:28px; }
  .hero h1 { gap:24px; font-size:16.5vw; line-height:.98; }
  .slogan-first .human,.slogan-first .second-line,.practical,.purpose-line { display:block; }
  .slogan-first .human::after,.practical::after { content:none; }
  .hero .second-line { white-space:nowrap; }
  .hero .second-line em { display:inline; }
  .slogan-next { padding-top:0; padding-left:0; }
}
.contact-symbol .ph-icon { width:1em; height:1em; }
.footer-bottom > :is(a,button) { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 0; }
/* Experience components share the page's type, Aurora surfaces and open spacing. */
.resume-link { display:inline-flex; align-items:center; gap:18px; font-weight:700; border-bottom:1px solid currentColor; padding:10px 0; min-height:44px; }
.resume-link .ph-icon { width:24px; height:24px; }
.scope-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:30px 0 0; padding:24px 0; border-top:1px solid #2e344040; gap:22px; }
.scope-strip dt { font-size:13px; margin-bottom:8px; }
.scope-strip dd { margin:0; font-size:clamp(22px,2.5vw,36px); line-height:1.15; letter-spacing:-.025em; font-weight:700; }
.role-details { margin-top:12px; }
.role-details summary { touch-action:manipulation; }
@supports (interpolate-size:allow-keywords) {
  .role-details::details-content {
    interpolate-size:allow-keywords;
    block-size:0;
    overflow:clip;
    transition:block-size .65s cubic-bezier(.4,0,.2,1),content-visibility .65s allow-discrete;
  }
  .role-details[open]::details-content { block-size:auto; }
}
@media(prefers-reduced-motion:reduce) {
  .role-details::details-content { transition:none; }
}
@media(max-width:750px), (pointer:coarse) {
  .role-details::details-content { transition:none; }
}
.role-details summary,[data-theme="dark"] .role-details summary { background:transparent; color:inherit; border:0; border-top:1px solid #2e344040; border-radius:0; box-shadow:none; padding:20px 0 0; gap:20px; }
.role-details summary:hover,[data-theme="dark"] .role-details summary:hover { background:transparent; translate:none; box-shadow:none; }
.role-details summary .role-toggle-label,[data-theme="dark"] .role-details summary .role-toggle-label { display:inline-flex; align-items:center; gap:10px; color:inherit; margin:0; font-size:19px; font-weight:700; line-height:1.3; letter-spacing:-.025em; text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 45%,transparent); text-underline-offset:5px; text-decoration-thickness:1px; }
.role-details summary:hover .role-toggle-label,.role-details summary:focus-visible .role-toggle-label { text-decoration-color:currentColor; }
.role-details summary:focus-visible { outline-color:currentColor; outline-offset:2px; }
.role-story { padding:35px 0 8px; }
.role-story-copy { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto 1fr; gap:0 32px; }
.role-story-copy > div { display:grid; grid-row:span 2; grid-template-rows:subgrid; }
.role-story .role-transition { margin-top:24px; }
.role-story h4 { font-size:var(--readable-text-size); margin:0 0 12px; letter-spacing:-.02em; }
.role-story p { font-size:var(--readable-text-size); font-weight:450; line-height:1.6; }
.role-story .role-work-title { font-size:30px; letter-spacing:-.035em; margin:0 0 28px; }
.role-work-areas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; list-style:none; padding:0; margin:0 0 8px; }
.role-work-areas h5 { font-size:24px; font-weight:800; line-height:1.15; letter-spacing:-.025em; margin:0 0 16px; color:var(--chapter-accent); }
#role-google-fleet .role-work-areas h5 { color:#43252a; }
#role-google-hardware .role-work-areas h5 { color:#6b4420; }
@media(max-width:750px) {
  .role-work-areas { grid-template-columns:1fr; gap:28px; }
  .role-work-areas h5 { margin-bottom:10px; }
}
.writing-section { margin:var(--section-space) var(--gutter); }
.writing-heading { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:end; gap:40px; margin-bottom:36px; }
.writing-heading h2 { font-size:clamp(48px,7.6vw,116px); font-weight:800; line-height:1; letter-spacing:-.04em; }
.writing-heading h2 span { color:var(--blue); }
.writing-heading .section-deck,.contact-intro .section-deck { --deck-accent:var(--blue); position:relative; min-width:0; max-width:38ch; margin:0 0 4px; padding:20px 24px; border-top:1px solid color-mix(in srgb,var(--deck-accent) 40%,transparent); border-left:1px solid color-mix(in srgb,var(--deck-accent) 40%,transparent); background:color-mix(in srgb,var(--deck-accent) 6%,transparent); font-size:20px; font-weight:450; line-height:1.5; letter-spacing:-.015em; text-wrap:pretty; }
.section-deck::before { content:''; position:absolute; top:-1px; left:-1px; width:48px; height:3px; background:var(--deck-accent); }
.section-deck strong { color:inherit; font-weight:650; }
[data-theme="dark"] .section-deck { --deck-accent:#88c0d0; }
.contact-intro .section-deck { font-size:clamp(30px,2.8vw,42px); font-weight:650; line-height:1.2; letter-spacing:-.025em; }
.contact-intro .section-deck strong { font-weight:800; white-space:nowrap; }
.writing-feature { display:grid; grid-template-columns:1.3fr 1fr; background:var(--night); color:#eceff4; border-radius:16px; overflow:hidden; transition:box-shadow .8s cubic-bezier(.16,1,.3,1),border-radius .8s cubic-bezier(.16,1,.3,1); }
.writing-feature + .writing-feature { margin-top:32px; }
.enhanced .writing-feature { transition:opacity .65s,transform .65s cubic-bezier(.16,1,.3,1),box-shadow 1.2s cubic-bezier(.4,0,.2,1),border-radius 1.2s cubic-bezier(.4,0,.2,1); }
.writing-image { display:block; min-width:0; overflow:hidden; }
.writing-image img { display:block; width:100%; height:100%; min-height:420px; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.writing-feature-copy { padding:var(--card-inset); display:flex; flex-direction:column; align-items:start; justify-content:center; }
.writing-feature h3 { font-size:clamp(30px,3.2vw,50px); font-weight:750; line-height:1.008; letter-spacing:-.03em; margin:0 0 24px; text-wrap:balance; }
.writing-subline { font-size:var(--readable-text-size); font-weight:450; line-height:1.35; margin-bottom:28px; max-width:38ch; }
.writing-feature-communication h3 em { color:var(--frost); }
.writing-read .ph-icon { transition:transform .8s cubic-bezier(.16,1,.3,1); }
.writing-feature:focus-within { border-radius:40px 16px 40px 16px; box-shadow:0 16px 32px #2e344026; }
.writing-feature:focus-within .writing-read .ph-icon { transform:translate(4px,-4px); }
@media(hover:hover) {
  .writing-feature:hover { border-radius:40px 16px 40px 16px; box-shadow:0 16px 32px #2e344026; }
  .writing-feature:hover .writing-image img { transform:scale(1.045) rotate(-1deg); }
  .writing-feature-communication:hover .writing-image img { transform:scale(1.045) rotate(1deg); }
  .writing-feature:hover .writing-read .ph-icon { transform:translate(4px,-4px); }
}
@media(prefers-reduced-motion:reduce) {
  .writing-feature,.enhanced .writing-feature,.writing-image img,.writing-read .ph-icon { transition:none; }
  .writing-feature:hover .writing-image img,.writing-feature:hover .writing-read .ph-icon,.writing-feature:focus-within .writing-read .ph-icon { transform:none; }
}
.paused .writing-feature,.paused .writing-image img,.paused .writing-read .ph-icon { transition:none; }
.writing-feature h3 em { color:var(--yellow); font-style:normal; }
[data-theme="dark"] .writing-feature { background:#eceff4; color:#2e3440; }
[data-theme="dark"] .writing-feature h3 em { color:#4c6a90; }
[data-theme="dark"] .writing-feature a:focus-visible { outline-color:#4c6a90; }
.writing-read { display:flex; align-items:center; gap:18px; font-size:17px; font-weight:600; padding:12px 0; margin-top:8px; text-decoration:underline; text-underline-offset:7px; }
.writing-footer { display:flex; align-items:end; justify-content:space-between; gap:40px; padding:28px 0; border-bottom:1px solid var(--rule); }
.writing-archive { display:flex; align-items:center; gap:14px; font-size:16px; min-height:44px; }
.writing-section a:hover { text-decoration:underline; text-underline-offset:6px; }
.writing-section a:focus-visible { outline-offset:-4px; }
.writing-feature a:focus-visible { outline-color:var(--yellow); }
@media(max-width:900px) {
  .writing-heading,.contact-intro { grid-template-columns:1fr; gap:24px; }
  .writing-heading .section-deck,.contact-intro .section-deck { max-width:none; width:100%; margin:0; padding:16px 20px; border-left:0; border-bottom:1px solid color-mix(in srgb,var(--deck-accent) 24%,transparent); font-size:19px; line-height:1.5; }
  .section-deck::before { left:0; width:32px; }
  .contact-intro .section-deck { font-size:clamp(28px,4.5vw,36px); line-height:1.25; padding:20px; }
}
@media(max-width:800px) {
  .writing-feature { grid-template-columns:1fr; }
  .writing-image img { min-height:0; height:auto; aspect-ratio:1672/941; }
  .writing-feature h3 { font-size:clamp(32px,6vw,46px); }
  .writing-footer { flex-direction:column; align-items:start; gap:24px; }
}
@media(max-width:750px) {
  .scope-strip { grid-template-columns:1fr; gap:18px; }
  .scope-strip > div { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
  .scope-strip dt { margin:0; }
  .scope-strip dd { font-size:24px; text-align:right; }
  .role-story-copy { grid-template-columns:1fr; grid-template-rows:none; gap:24px; }
  .role-story-copy > div { display:block; grid-row:auto; }
}

/* Five experience surfaces and the current role. */
.chapter-morrow,[data-theme="dark"] .chapter-morrow { background:#b9a6cd; color:#2e3440; --chapter-accent:#40324f; }
.chapter-aster,[data-theme="dark"] .chapter-aster { background:#2e3440; color:#eceff4; --chapter-accent:#a3be8c; border:0; --glare-light:#171c26e6; --glare-shade:#171c2666; overflow:visible; }
.chapter-aster .card-geometry { border-radius:inherit; }
.chapter-aster::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; box-shadow:-12px -9px 28px -6px var(--glare-light),13px 11px 32px -8px var(--glare-light),0 12px 34px var(--glare-shade); opacity:.7; will-change:opacity; animation:current-glare 5.5s ease-in-out infinite; }
[data-theme="dark"] .chapter-aster { --glare-light:#eceff47a; --glare-shade:#00000035; }
@keyframes current-glare {
  0%,100% { opacity:.55; }
  50% { opacity:1; }
}
@media(prefers-reduced-motion:reduce) { .chapter-aster::after { animation:none; opacity:.7; will-change:auto; } }
.chapter-aster .chapter-role,.chapter-aster .chapter-bottom p,[data-theme="dark"] .chapter-aster .chapter-role,[data-theme="dark"] .chapter-aster .chapter-bottom p { color:#eceff4; }
.chapter-aster .chapter-bottom,.chapter-aster .scope-strip,.chapter-aster .chapter-tag,.chapter-aster .role-details summary,[data-theme="dark"] .chapter-aster .chapter-bottom,[data-theme="dark"] .chapter-aster .chapter-tag,[data-theme="dark"] .chapter-aster .role-details summary { border-color:#eceff440; }
.chapter-aster .role-details summary:focus-visible { outline-color:#a3be8c; }
.current-position { display:inline-flex; align-items:center; gap:9px; color:#c7ddb6; font-weight:700; }
.current-position::before { content:''; width:7px; height:7px; border-radius:50%; background:#a3be8c; }
.chapter-northstar .card-geometry { opacity:.16; }
.chapter-aster .card-geometry { opacity:.16; }
.section-background .sail-fold { transform-origin:760px 320px; animation:sail-weave 19s ease-in-out infinite; animation-delay:var(--phase); }
.section-background .independent-plane { transform-origin:760px 320px; animation:arc-slide 24s ease-in-out infinite; animation-delay:var(--phase); }
@keyframes sail-weave { 0%,100% { transform:rotate(calc(var(--angle) - 12deg)) translate(-25px,15px) scale(.9,1.05); } 50% { transform:rotate(calc(var(--angle) + 22deg)) translate(35px,-25px) scale(1.14,.85); } }
@keyframes arc-slide { 0%,100% { transform:translate(-35px,25px) rotate(-12deg); } 50% { transform:translate(45px,-35px) rotate(18deg); } }
.contact-section { background:#dce4ed; border-top:1px solid #bdc9d8; }
[data-theme="dark"] .contact-section { background:#3b4252; border-top:1px solid #4c566a; }

/* A folded, translucent sculpture behind the original oversized headline. */
.hero-sculpture { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.48; mask-image:linear-gradient(90deg,transparent 5%,#000 45%); }
.sculpture-arrive { position:absolute; width:1000px; height:1000px; width:clamp(760px,91vw,1450px); height:clamp(760px,91vw,1450px); left:66%; top:45%; translate:-50% -50%; animation:sculpture-enter 2.8s cubic-bezier(.16,1,.3,1) both; }
.sculpture-tilt { width:100%; height:100%; perspective:1400px; transform:rotateX(var(--sculpture-x,0deg)) rotateY(var(--sculpture-y,0deg)); transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.sculpture-turn { position:absolute; inset:0; transform-style:preserve-3d; animation:sculpture-turn 24s ease-in-out infinite; }
.sculpture-arm { position:absolute; width:42%; height:65%; left:29%; top:0; transform-origin:50% 98.5%; transform-style:preserve-3d; transform:rotate(var(--angle)); animation:sculpture-open 18s ease-in-out infinite; animation-delay:var(--phase); will-change:transform; }
.sculpture-fold { width:100%; height:100%; transform-origin:50% 98.5%; animation:sculpture-fold 18s ease-in-out infinite; animation-delay:var(--phase); will-change:transform; }
.sculpture-fold svg { display:block; width:100%; height:100%; overflow:visible; }
.sculpture-face { opacity:.54; }
.sculpture-shade { opacity:.19; }
.sculpture-light { opacity:.23; }
.sculpture-crease { fill:none; stroke:#ffffff; stroke-width:1; stroke-opacity:.4; vector-effect:non-scaling-stroke; }
.hero-note { position:relative; z-index:2; }
[data-theme="dark"] .hero-sculpture { opacity:.37; }
.sculpture-resting .sculpture-turn,.sculpture-resting .sculpture-arm,.sculpture-resting .sculpture-fold { animation-play-state:paused; }
@keyframes sculpture-enter { from { opacity:0; transform:translate(80px,60px) rotate(-12deg) scale(.75); } to { opacity:1; transform:translate(0,0) rotate(0) scale(1); } }
@keyframes sculpture-open { 0%,100% { transform:rotate(calc(var(--angle) - var(--splay)*.55)); } 50% { transform:rotate(calc(var(--angle) + var(--splay))); } }
@keyframes sculpture-fold { 0%,100% { transform:rotateY(-48deg) rotateX(12deg); } 50% { transform:rotateY(28deg) rotateX(-8deg); } }
@keyframes sculpture-turn { 0%,100% { transform:translate(15px,35px) rotate(-9deg); } 50% { transform:translate(-25px,-20px) rotate(13deg); } }
@media(max-width:600px) {
  .hero-sculpture { opacity:.36; mask-image:linear-gradient(90deg,transparent,#000 65%); }
  .sculpture-arrive { width:850px; height:850px; left:90%; top:43%; }
  [data-theme="dark"] .hero-sculpture { opacity:.3; }
}
.paused .sculpture-tilt { transform:none; }
@media(prefers-reduced-motion:reduce) {
  .sculpture-arm { will-change:auto; }
  .sculpture-fold { transform:rotateY(-15deg); will-change:auto; }
  .sculpture-tilt { transform:none; transition:none; }
}

/* Portrait placement and the compact invitation to open a fieldnote. */
.portrait-placeholder { margin:0; width:100%; max-width:280px; }
.portrait-window { aspect-ratio:4/5; position:relative; overflow:hidden; display:grid; place-items:center; background:#d8dee9; color:#2e3440; border-radius:16px; box-shadow:0 9px 24px #2e344012; }
.portrait-placeholder figcaption { margin-top:14px; font-size:14px; font-weight:600; }
[data-theme="dark"] .portrait-window { background:#434c5e; color:#d8dee9; }
.role-details summary .role-toggle-copy { display:block; color:inherit; margin:0; min-width:0; }
.role-toggle-label::after { content:''; display:block; flex:0 0 12px; width:12px; height:9px; background:var(--chapter-accent); clip-path:polygon(0 0,100% 0,50% 100%); animation:role-descent 2s ease-in-out infinite; animation-play-state:paused; }
.role-details summary.invitation-visible .role-toggle-label::after { animation-play-state:running; }
.role-details[open] .role-toggle-label::after { animation:none; transform:rotate(180deg); }
.role-details summary[aria-disabled="true"] { cursor:default; }
.role-details summary[aria-disabled="true"] .role-toggle-label { text-decoration:none; }
.role-details summary[aria-disabled="true"] .role-toggle-label::after,.role-details summary[aria-disabled="true"] .role-toggle-art > .ph-icon { display:none; }
.role-details summary[aria-disabled="true"] .role-toggle-art { transform:none; }
@keyframes role-descent { 0%,100% { transform:translateY(-2px); opacity:.65; } 55% { transform:translateY(4px); opacity:1; } }
.role-details summary .role-toggle-art { position:relative; flex:0 0 56px; height:64px; color:var(--chapter-accent); margin:0 0 0 auto; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.role-page { display:block; width:56px; height:64px; overflow:visible; fill:color-mix(in srgb,currentColor 8%,transparent); stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; }
.role-page .page-back { opacity:.28; }
.role-page .page-face { transform-origin:15px 55px; animation:page-invitation 6.5s ease-in-out infinite; animation-play-state:paused; }
.role-page .page-fold { fill:none; }
.role-toggle-art .ph-icon { position:absolute; width:21px; height:21px; top:24px; left:22px; }
.role-details summary.invitation-visible .page-face { animation-play-state:running; }
.role-details[open] .page-face { animation:none; transform:translate(2px,-2px) rotate(4deg); }
.role-details summary:hover .role-toggle-art,.role-details summary:focus-visible .role-toggle-art { transform:translateY(-3px) rotate(5deg); }
@keyframes page-invitation { 0%,65%,100% { transform:none; } 78% { transform:translate(2px,-3px) rotate(7deg) skewY(-2deg); } 88% { transform:translate(1px,-1px) rotate(3deg); } }
.hero-note .text-link .ph-icon { animation:work-invitation 5.5s ease-in-out infinite; animation-play-state:paused; }
.hero-note.invitation-visible .text-link .ph-icon { animation-play-state:running; }
@keyframes work-invitation { 0%,58%,100% { transform:translateY(0); } 70% { transform:translateY(5px); } 82% { transform:translateY(0); } }
.section-background.motion-resting *,.poster.motion-resting *,.chapter-aster.motion-resting::after,
.page-inactive *,.page-inactive *::before,.page-inactive *::after { animation-play-state:paused!important; }
header.entrance-finished,.hero .entrance-finished { animation:none; }
@media(min-width:601px) and (max-width:900px) {
  .about-note { grid-template-columns:150px minmax(0,1fr); gap:32px; }
}
@media(max-width:600px) {
  .portrait-placeholder { width:min(64%,230px); margin-bottom:32px; }
  .role-details summary .role-toggle-label { font-size:var(--readable-text-size); }
  .role-details summary { gap:12px; }
  .role-details summary .role-toggle-art { flex-basis:48px; height:56px; }
  .role-page { width:48px; height:56px; }
  .role-toggle-art .ph-icon { width:18px; height:18px; top:21px; left:19px; }
}

/* A soft Frost wash accelerates and fades across every word. */
.hero [data-letters] { position:relative; --sweep-delay:3s; }
.hero .by-copy,.hero .second-line em,.hero .purpose { display:inline-block; }
.hero .frost-layer { position:absolute; top:0; left:0; width:max-content; pointer-events:none; white-space:nowrap; color:#88c0d0; text-shadow:none; opacity:0; mask-image:linear-gradient(110deg,transparent 35%,#000 50%,transparent 65%); mask-size:250% 100%; mask-repeat:no-repeat; mask-position:140% 0; animation:frost-sweep 2.4s cubic-bezier(.45,0,.25,1) both; animation-delay:var(--sweep-delay); }
.frost-letter { display:inline-block; }
.hero .second-line [data-letters] { --sweep-delay:3.5s; }
.hero .second-line em[data-letters] { --sweep-delay:3.8s; }
.hero .practical { --sweep-delay:4.1s; }
.hero .purpose-line [data-letters] { --sweep-delay:4.6s; }
.hero .purpose-line .purpose { --sweep-delay:4.9s; }
@keyframes frost-sweep { 0% { opacity:0; mask-position:140% 0; } 20%,70% { opacity:.4; } 100% { opacity:0; mask-position:-40% 0; } }
.paused .frost-layer { display:none; }
@media(prefers-reduced-motion:reduce) { .hero .frost-layer { display:none; } }

/* Intermediate layouts use the space available to their content. */
@media(max-width:800px) {
  .project { display:flex; flex-direction:column; align-items:stretch; gap:24px; }
  .project-room .poster { order:2; }
  .project .poster { aspect-ratio:1; }
}
@media(min-width:901px) {
  .career-heading { grid-template-columns:minmax(180px,240px) minmax(0,1fr); }
  .career-heading h2 { grid-column:2; grid-row:1; justify-self:end; text-align:right; }
  .career-heading > p { grid-column:1; grid-row:2; }
}

/* Shared insets and action controls from the spacing review. */
@media(min-width:601px) and (max-width:900px) { :root { --card-inset:32px; --panel-inset:32px; --section-space:80px; } }
@media(max-width:800px) {
  .contact-desk { grid-template-columns:1fr; }
  .contact-symbol { position:static; display:block; margin-bottom:20px; font-size:40px; line-height:1; }
}
.hero-note .text-link,.project summary { min-height:var(--action-height); padding:var(--action-padding); font-size:var(--readable-text-size); font-weight:600; line-height:1.25; gap:24px; border-radius:40px; }
.hero-note .text-link .ph-icon,.project summary .ph-icon,.write-link .ph-icon { width:26px; height:26px; }
.contact-action .write-link + .write-link { margin-top:16px; }
.write-link > span { flex:1; min-width:0; }
.write-link .ph-icon { width:22px; height:22px; flex:none; color:inherit; }
[data-theme="dark"] .contact-action .write-link { --action-background:#88c0d0; --action-foreground:#2e3440; }
.project summary > span { display:flex; align-items:center; margin-left:0; }
.project-repo-link { margin-top:28px; }
.project-repo-link,.contact-action .write-link { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--action-height); padding:18px 24px; border-radius:40px; font-size:clamp(18px,1.5vw,21px); font-weight:750; line-height:1.2; }
.project-repo-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:0; line-height:1.2; }
.project-repo-copy small { font-size:14px; font-weight:500; line-height:1.25; overflow-wrap:anywhere; }
.project-repo-link > .ph-icon,.contact-action .write-link > .ph-icon { width:42px; height:42px; flex:none; }
.project-repo-link > .ph-icon:last-child,.contact-action .write-link > .ph-icon:last-child { width:24px; height:24px; }
@media(max-width:600px) {
  .project-repo-link,.contact-action .write-link { gap:10px; padding:16px; }
  .project-repo-link > .ph-icon:last-child,.contact-action .write-link > .ph-icon:last-child { width:22px; height:22px; }
}
:is(.hero-note .text-link,.project-repo-link,.contact-action .write-link,.about-career-copy .resume-link) { --action-background:var(--night); --action-foreground:var(--paper); background:var(--action-background); color:var(--action-foreground); border:1px solid var(--action-background); transition:background-color .65s cubic-bezier(.16,1,.3,1),color .65s cubic-bezier(.16,1,.3,1),transform .3s,translate .3s,box-shadow .3s; }
:is(.hero-note .text-link,.project-repo-link,.contact-action .write-link,.about-career-copy .resume-link):is(:hover,:focus-visible) { background:var(--action-foreground); color:var(--action-background); }
[data-theme="dark"] :is(.hero-note .text-link,.project-repo-link,.about-career-copy .resume-link) { --action-background:#4c566a; --action-foreground:#eceff4; }
.hero-note .text-link .ph-icon { color:inherit; }
@media(prefers-reduced-motion:reduce) { :is(.hero-note .text-link,.project-repo-link,.contact-action .write-link,.about-career-copy .resume-link) { transition:none; } }
.poster.screenshot-poster { padding:0; }
.screenshot-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.learn-poster.screenshot-poster img { inset:4%; width:92%; height:92%; object-position:center top; }
.room-poster.screenshot-poster img { inset:4%; width:92%; height:92%; object-position:left center; }
.screenshot-poster::after { display:none; }
.screenshot-poster,.screenshot-poster * { animation:none; }

/* Sticky header and a portrait that follows the introduction. */
html { scroll-padding-top:120px; }
html.role-scroll-settling { overflow-anchor:none; }
body > header {
  position:sticky; top:0; z-index:30; margin:0; padding:18px var(--gutter);
  height:100px; min-height:100px; display:flex; gap:24px;
  background:var(--paper); animation:none;
}
[data-theme="dark"] body > header { background:var(--night); }
.about-career-copy { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.about-career-copy p { font-size:24px; line-height:1.5; max-width:65ch; }
.about-career-copy > p:not(.about-career-lead) { letter-spacing:-.02em; }
.about-career-copy strong { font-weight:750; }
.about-career-copy strong,.about-personal strong { text-shadow:0 1px 2px #2e34401f; }
[data-theme="dark"] .about-career-copy p { color:#bcc5d2; }
[data-theme="dark"] .about-career-copy p strong,[data-theme="dark"] .about-personal strong { color:var(--emphasis-color,#fff); text-shadow:0 2px 4px #00000040; }
.about-career-copy .about-career-lead { font-size:clamp(32px,2.5vw,36px); line-height:1.22; letter-spacing:-.035em; }
.about-career-copy .resume-link { font-size:20px; margin-top:4px; min-height:var(--action-height); padding:var(--action-padding); border-radius:40px; }
.about-personal { display:grid; grid-template-columns:minmax(180px,280px) minmax(0,1fr); align-items:center; gap:6vw; margin-top:48px; padding-top:32px; border-top:1px solid var(--rule); }
.about-personal p { font-size:clamp(20px,1.7vw,24px); line-height:1.5; letter-spacing:-.015em; }
.personal-portrait { display:block; width:100%; max-width:280px; height:auto; border-radius:16px; box-shadow:0 9px 24px #2e344012; }
@media(min-width:601px) and (max-width:900px) { .about-personal { grid-template-columns:1fr; gap:32px; } .personal-portrait { width:230px; } }
@media(max-width:600px) {
  .about-personal { grid-template-columns:1fr; gap:20px; margin-top:32px; }
  .personal-portrait { width:min(64%,230px); }
  .about-career-copy p { font-size:21px; }
  .about-career-copy .about-career-lead { font-size:28px; }
}
.role-brief { display:none; }
/* Mobile career chapters use the whole screen, with one reading column. */
@media(max-width:750px), (max-height:500px) and (pointer:coarse) {
  .career-chapters { margin-inline:calc(-1 * var(--gutter)); gap:0; }
  .career .career-chapter {
    padding:32px max(24px,var(--gutter)) 24px;
    border-radius:0; box-shadow:none; overflow:hidden;
  }
  .career-chapter .chapter-number,.career-chapter .chapter-theme,
  .career-chapter .chapter-tag,.career-chapter .scope-strip,
  .career-chapter .role-story { display:none; }
  .career-chapter .chapter-top { min-height:20px; }
  .career-chapter .chapter-date {
    flex-direction:row; align-items:baseline; flex-wrap:wrap;
    margin:0; gap:8px 12px; font-size:16px; line-height:1.3;
    letter-spacing:-.015em; white-space:normal; text-shadow:none;
  }
  .career-chapter .chapter-date small { font-size:15px; letter-spacing:0; }
  .career-chapter .chapter-main {
    display:grid; grid-template-columns:minmax(0,1fr) 64px;
    align-items:start; gap:16px; padding:22px 0;
  }
  .career .chapter-main h3 {
    font-size:clamp(36px,9.5vw,56px); line-height:1.06;
    letter-spacing:-.04em; margin-bottom:12px;
  }
  .career .chapter-role { font-size:19px; line-height:1.35; letter-spacing:-.025em; }
  .career .career-art { position:relative; top:auto; right:auto; width:64px; height:64px; margin-top:2px; }
  .career .career-art.logo-vmware { width:64px; }
  .career .chapter-bottom { display:block; padding-top:20px; }
  .career .chapter-bottom p { max-width:none; font-size:18px; line-height:1.5; letter-spacing:-.015em; }
  .career-chapter .role-details { margin-top:22px; border-top:1px solid color-mix(in srgb,currentColor 25%,transparent); }
  .career-chapter .role-details summary { display:none; }
  .role-brief { display:grid; gap:18px; padding:20px 0 8px; }
  .role-brief p { font-size:18px; line-height:1.5; font-weight:450; letter-spacing:-.015em; }
  .role-brief strong { font-weight:800; }
  .career-chapter.chapter-aster::after { inset:0 0 auto; height:180px; box-shadow:inset 0 24px 32px -18px var(--glare-light); }
}
@media(prefers-reduced-motion:reduce) {
  body.enhanced .reveal { transition:none!important; }
  .career-chapter .card-geometry svg { animation:none; }
}
@media(min-width:601px) {
  .about-note { align-items:stretch; padding-block:12px; }
  .about-note .portrait-placeholder { margin-block:-12px; }
  .about-note .portrait-window { height:100%; aspect-ratio:auto; }
  .about-note .portrait-window img { position:absolute; inset:0; }
}
@media(max-width:750px) {
  html { scroll-padding-top:90px; }
  body > header { height:auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:12px var(--gutter); }
  body > header .theme-control { grid-column:2; grid-row:1; }
}
@media(min-width:601px) and (max-width:900px) {
  .about-note { display:block; }
  .about-note .portrait-placeholder { width:230px; margin:0 0 32px; }
  .about-note .portrait-window { height:auto; aspect-ratio:3/4; }
  .about-note .portrait-window img { position:static; }
}

/* One fitted frame for portraits and project screenshots. */
.image-frame { --frame-inset:10px; --frame-radius:20px; --frame-tint:#81a1c1; }
.personal-portrait.image-frame { --frame-tint:#b48ead; }
.learn-poster.image-frame { --frame-tint:#ebcb8b; }
.room-poster.image-frame { --frame-tint:#a3be8c; }
.image-frame,.poster.image-frame {
  position:relative; padding:var(--frame-inset); overflow:hidden;
  border-radius:var(--frame-radius);
  background:color-mix(in srgb,var(--frame-tint) 22%,#eceff4);
  box-shadow:inset 0 0 0 1px #2e344014,0 2px 4px #2e34400a,0 10px 24px #2e344014;
}
[data-theme="dark"] .image-frame {
  background:color-mix(in srgb,var(--frame-tint) 24%,#3b4252);
  box-shadow:inset 0 0 0 1px #eceff414,0 2px 4px #00000014,0 10px 24px #00000026;
}
.image-frame > img { display:block; border-radius:calc(var(--frame-radius) - var(--frame-inset)); outline:1px solid #2e344018; outline-offset:-1px; }
.personal-portrait.image-frame > img { width:100%; height:auto; }
:is(.portrait-window,.screenshot-poster).image-frame > img {
  position:absolute; inset:var(--frame-inset);
  width:calc(100% - 2 * var(--frame-inset)); height:calc(100% - 2 * var(--frame-inset));
  object-fit:cover;
}
@media(max-width:600px) {
  .image-frame { --frame-inset:8px; --frame-radius:16px; }
}