:root {
  --fog: #e3e5e8; --ink: #20252d; --metal: #b9bfcb; --panel: #252a34;
  --acid: #ff946c; --blue: #7f8794; --coral: #ff6736;
  --display: 'Avenir Next Condensed', 'Arial Narrow', 'PingFang SC', sans-serif;
  --body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --card-width: 350px;
}
* { box-sizing: border-box; }
html { background: var(--fog); scrollbar-width: thin; scrollbar-color: #869393 var(--fog); }
body { margin: 0; color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #237398; outline-offset: 6px; }
button:disabled { opacity: .25; cursor: default; }
.skip { position: fixed; top: -60px; left: 24px; z-index: 100; padding: 12px; background: var(--acid); }
.skip:focus { top: 20px; }
.site-header { position: fixed; left: 42px; right: 42px; top: 0; height: 99px; border-bottom: 1px solid #293c4238; display: flex; align-items: center; gap: 34px; z-index: 40; }
.brand { font: 900 44px/.8 var(--display); letter-spacing: -3px; display: flex; align-items: flex-start; }
.brand span { font: 10px/1 var(--mono); margin: 1px 0 0 9px; letter-spacing: 0; }
.identity { font-size: 12px; letter-spacing: 1px; line-height: 1.7; }
.identity span { display: block; font-size: 9px; letter-spacing: 0; color: #566167; }
.header-actions { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.original { font-size: 11px; }
.mode-button { display: flex; align-items: center; gap: 10px; padding: 9px 13px; font-size: 11px; background: #e8ebea80; border: 1px solid #6d7a7d6e; }
.mode-button:hover { background: var(--ink); color: var(--fog); }
.view-icon { font: 20px/1 var(--mono); }
#scene { position: fixed; inset: 0; pointer-events: none; }
#scene canvas { display: block; width: 100%; height: 100%; }
.atmosphere { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, #e3e5e8 .2%, #e3e5e800 22%, #e3e5e800 80%, #e3e5e8 100%); z-index: 2; }
.frame-mark { position: fixed; width: 11px; height: 11px; top: 121px; z-index: 4; pointer-events: none; }
.frame-mark::before, .frame-mark::after { content: ''; background: #59676b; position: absolute; }
.frame-mark::before { width: 11px; height: 1px; top: 5px; }.frame-mark::after { width: 1px; height: 11px; left: 5px; }
.top-left { left: 38px; }.top-right { right: 38px; }
#journey { position: relative; min-height: 100vh; }
.intro { position: fixed; top: 22vh; left: 6.2vw; z-index: 6; width: 33vw; will-change: opacity, transform; }
.intro-kicker { font: 9px/1.4 var(--mono); letter-spacing: .8px; display: flex; align-items: center; gap: 9px; margin: 0 0 24px; }
.intro-kicker span { background: var(--ink); width: 6px; height: 6px; }
h1 { font-size: clamp(28px, 3.25vw, 53px); font-weight: 600; line-height: 1.38; letter-spacing: -2px; margin: 0; }
.intro-copy { color: #586468; font-size: 12px; line-height: 2; margin: 24px 0 30px; }
.explore { border: none; border-bottom: 1px solid #778387; padding: 0 0 9px; background: none; font-size: 11px; min-width: 122px; text-align: left; display: flex; justify-content: space-between; align-items: center; }
.explore span { font: 19px/1 var(--mono); }.explore:hover { border-color: var(--ink); }
.helix-signature { margin-top: 28px; display: flex; align-items: center; gap: 13px; width: 176px; color: var(--ink); border-top: 2px solid var(--ink); padding-top: 10px; }
.helix-glyph { font: 46px/.85 var(--display); color: var(--coral); }
.helix-signature > span:nth-child(2) { font: 800 26px/.9 var(--display); letter-spacing: -.5px; }
.signature-sub { display: block; margin-top: 7px; font: 7px/1.3 var(--mono); letter-spacing: .3px; }
.helix-signature i { height: 35px; width: 12px; margin-left: auto; background: repeating-linear-gradient(0deg,#20252d 0 1px,transparent 1px 4px,#20252d 4px 6px,transparent 6px 9px); }
.object-caption { font: 10px/1.8 var(--mono); letter-spacing: 1px; }
.spine-caption { position: fixed; left: 54.5%; top: 21%; font-size: 10px; line-height: 1.7; color: #627077; z-index: 5; display: flex; gap: 9px; pointer-events: none; }
.caption-rule { width: 35px; height: 1px; background: #77878d; margin-top: 9px; }
#connections { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; overflow: hidden; mask-image: linear-gradient(to bottom,transparent 99px,#000 150px,#000 calc(100% - 110px),transparent calc(100% - 70px)); }
.connector-track { fill: none; stroke: #20252d; stroke-width: 4.5; stroke-linejoin: bevel; }.connector { fill: none; stroke: #aeb4bf; stroke-width: 1.5; stroke-linejoin: bevel; }.connector.active { stroke: #ff6736; }
.connector-dot { fill: #8c939e; stroke: #20252d; stroke-width: 1.5; }.connector-dot.active { fill: #ff6736; }
#project-list { position: fixed; inset: 0; z-index: 10; pointer-events: none; perspective: 1400px; overflow: clip; mask-image: linear-gradient(to bottom, transparent 95px, #000 135px, #000 calc(100% - 95px), transparent calc(100% - 60px)); }
.project-card { position: absolute; top: 0; left: 0; width: var(--card-width); pointer-events: auto; transform-origin: center; will-change: transform, opacity; }
body:not(.scene-ready):not(.flat) #project-list { opacity: 0; }
.card-shell { position: relative; color: #20252d; padding: 7px; background: #252a34; border: 1px solid #252a34; box-shadow: inset 0 0 0 1px #f5f7ff60; clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); }
.card-shell::before { content: ''; position: absolute; left: 0; top: 20px; width: 3px; height: 76px; background: repeating-linear-gradient(0deg,#ff6736 0 5px,transparent 5px 8px); }
.card-top { display: flex; align-items: center; gap: 10px; padding: 5px 5px 10px; font: 8px/1.2 var(--mono); letter-spacing: .6px; color: #e3e5e8; }
.card-date { color: #e3e5e8; }.card-type { margin-left: auto; font: 8px/1.3 var(--body); color: #c4c9d2; }
.card-chevron { display: inline-block; width: 20px; height: 8px; flex-shrink: 0; background: repeating-linear-gradient(120deg,#ff6736 0 3px,transparent 3px 6px); }
.card-heading { min-height: 79px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px 12px; background: #eeeee8; transition: background .18s; border-bottom: 4px solid #252a34; }
body:not(.flat) .is-linked .card-heading { background: #ff6736; }
.card-heading h3 { margin: 0; color: #171b21; font: 700 24px/1.15 var(--body); text-transform: uppercase; letter-spacing: -.6px; overflow-wrap: anywhere; text-wrap: balance; }
.card-title-part { display: block; }
.card-number { color: #171b21; font: 900 62px/.85 var(--display); letter-spacing: -3px; align-self: end; background: radial-gradient(#20252d24 .5px,transparent .8px) 0 0/3px 3px; }
.card-image { display: block; height: 143px; margin: 0; position: relative; overflow: hidden; background: #b9bfcb; border: 0; border-radius: 0; }
.card-image img { display: block; transform: translateZ(0); width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(.35); transition: filter .25s; }
.project-card:hover img { filter: saturate(.9); }
.image-tick { position: absolute; left: 7px; top: 7px; width: 8px; height: 8px; border-left: 1px solid white; border-top: 1px solid white; mix-blend-mode: difference; }
.card-body { padding: 14px 13px 7px; background: #eeeee8; border-top: 4px solid #252a34; }
.card-summary { font-size: 11px; line-height: 1.85; color: #3e434c; margin: 0; }
.card-bottom { display: flex; align-items: center; margin-top: 13px; padding: 9px 0 2px; border-top: 1px solid #20252d38; }
.read-link { font-size: 10px; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 15px; }
.read-link span { font: 20px/1 var(--mono); color: #eeeee8; background: #20252d; width: 27px; height: 23px; display: grid; place-items: center; }
body:not(.flat) .is-linked .read-link span { background: #ff6736; color: #20252d; }
.read-link::after { content: ''; position: absolute; inset: 0; }
.barcode { display: inline-block; height: 15px; width: 33px; margin-left: 9px; background: repeating-linear-gradient(90deg,#20252d 0 1px,transparent 1px 3px,#20252d 3px 5px,transparent 5px 6px,#20252d 6px 7px,transparent 7px 10px); }
.card-port { position: absolute; top: 58px; width: 23px; height: 29px; z-index: 2; background: #20252d; border: 1px solid #20252d; display: grid; place-items: center; pointer-events: none; }
.card-port i { width: 12px; height: 19px; background: repeating-linear-gradient(0deg,#8c939e 0 3px,transparent 3px 7px); }
.is-linked .card-port i { background: repeating-linear-gradient(0deg,#ff6736 0 3px,transparent 3px 7px); }
.project-card[data-dock="left"] .card-port { left: -20px; clip-path: polygon(5px 0,100% 0,100% 100%,5px 100%,0 calc(100% - 5px),0 5px); }
.project-card[data-dock="right"] .card-port { right: -20px; clip-path: polygon(0 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%); }
.project-card[data-dock="top"] .card-port { top: -18px; right: 18px; width: 35px; height: 21px; }
.project-card[data-dock="top"] .card-port i { width: 23px; height: 11px; background: repeating-linear-gradient(90deg,#8c939e 0 3px,transparent 3px 7px); }
.project-card[data-dock="top"].is-linked .card-port i { background: repeating-linear-gradient(90deg,#ff6736 0 3px,transparent 3px 7px); }
body.flat .card-port { display: none; }
.card-footnote { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #4c5c60; padding: 10px 1px; font: 9px/1.5 var(--body); }
.card-footnote > span:last-child { flex-shrink: 0; }
.meta-label { color: #718089; margin-right: 7px; flex-shrink: 0; }
.card-context { margin-left: auto; display: flex; align-items: center; gap: 5px; color: #c4c9d2; font: 9px/1.4 var(--body); letter-spacing: 0; }
.context-mark { width: 6px; height: 6px; border: 1px solid currentColor; flex-shrink: 0; }
.card-context[data-kind="assessment"] .context-mark { transform: rotate(45deg); }
.card-context[data-kind="personal"] .context-mark { border-radius: 50%; }
.no-image { display: flex; justify-content: center; align-items: center; background: #d4d8e0; }
.diagram { display: block; width: 100%; height: 100%; flex: none; }
.project-nav { position: fixed; bottom: 116px; left: 42px; z-index: 20; }
.nav-label { font-size: 9px; color: #657478; display: block; margin-bottom: 16px; }
#project-dots { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.dot-button { border: 0; background: none; padding: 5px 0; display: flex; align-items: center; gap: 10px; font: 9px/1.4 var(--mono); color: #607176; text-align: left; }
.dot-button .dot { width: 5px; height: 5px; background: #819190; transition: width .2s, background .2s; }
.dot-button[aria-current="true"] { color: var(--ink); }.dot-button[aria-current="true"] .dot { width: 20px; background: var(--ink); }
.dot-name { font: 9px/1.3 var(--body); opacity: 0; transition: opacity .2s; }.dot-button:hover .dot-name,.dot-button[aria-current="true"] .dot-name,.dot-button:focus-visible .dot-name { opacity: 1; }
.status-bar { position: fixed; bottom: 0; left: 42px; right: 42px; height: 72px; border-top: 1px solid #293c4238; display: flex; gap: 22px; align-items: center; z-index: 30; }
.scroll-cue { display: flex; align-items: center; gap: 10px; font-size: 10px; width: 260px; }.scroll-icon { width: 20px; height: 25px; border: 1px solid #708082; display: grid; place-items: center; font: 16px/1 var(--mono); }
.project-progress { display: flex; align-items: center; gap: 13px; font: 10px/1 var(--mono); margin-left: auto; }
.progress-track { width: 132px; height: 3px; background: #87989b55; }.progress-track i { width: 16.66%; display: block; height: 100%; background: #283b43; }
.travel-controls { display: flex; gap: 3px; }.travel-controls button { border: 1px solid #85939680; background: #dde1df70; width: 27px; height: 27px; font: 16px/1 var(--mono); }.travel-controls button:not(:disabled):hover { background: var(--acid); }
.study-label { margin-left: auto; font-size: 9px; color: #5e6c70; }.study-label span { margin-left: 15px; font: 10px/1 var(--mono); }
.journey-end { position: fixed; left: 7vw; top: 25vh; z-index: 11; display: flex; gap: 22px; flex-direction: column; pointer-events: none; opacity: 0; }
.journey-end > span { font-size: 28px; font-weight: 500; }.journey-end a { font-size: 12px; text-decoration: underline; text-underline-offset: 5px; }
.boot-status { position: fixed; right: 44px; bottom: 85px; padding: 10px; font-size: 11px; z-index: 50; background: var(--fog); }.boot-status[hidden] { display: none; }
.no-script { position: fixed; inset: 35% 20% auto; background: var(--fog); z-index: 60; padding: 35px; line-height: 2; }
body.flat #journey { height: auto !important; padding: 140px 7vw 110px; }
body.flat .intro { position: relative; left: auto; top: auto; width: auto; opacity: 1 !important; transform: none !important; margin-bottom: 50px; }
body.flat .intro h1 { font-size: 36px; }.flat .intro-copy,.flat .explore { display: none; }
body.flat #project-list { position: relative; inset: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 35px; overflow: visible; perspective: none; mask-image: none; }
body.flat .project-card { width: 100%; position: relative; transform: none !important; opacity: 1 !important; visibility: visible !important; }
body.flat .project-card:has(:focus-visible) .card-heading { background: #ff6736; }
body.flat .project-card:has(:focus-visible) .read-link span { background: #ff6736; color: #20252d; }
@media (hover:hover) {
 body.flat .project-card:hover .card-heading { background: #ff6736; }
 body.flat .project-card:hover .read-link span { background: #ff6736; color: #20252d; }
}
body.flat .project-card .card-shell { min-height: 380px; }
body.flat #connections,body.flat .project-nav,body.flat .spine-caption,body.flat .journey-end,body.flat .project-progress,body.flat .travel-controls { display: none; }
body.flat .site-header,body.flat .status-bar { background: #e3e5e8ed; backdrop-filter: blur(8px); }
body.flat .scroll-cue { width: auto; }
@media (min-width:1600px) { :root { --card-width: 395px; }.card-image { height: 172px; }.card-body { padding: 18px 17px 8px; }.card-summary { font-size: 12px; }.card-heading h3 { font-size: 28px; } }
@media (min-width:901px) and (max-width:1600px) {
 .project-nav { bottom: 86px !important; }
 .nav-label { display: none; }
 #project-dots { flex-direction: row; gap: 15px; }
 .dot-name { display: none; }
}
@media (max-width:1100px) { :root { --card-width: 315px; }.site-header { left: 28px; right: 28px; height: 85px; }.intro { left: 5vw; top: 22vh; width: 34vw; }.intro h1 { font-size: 32px; letter-spacing: -1.4px; }.project-nav { left: 28px; bottom: 100px; }.card-image { height: 140px; }.card-body { padding: 14px 12px 4px; }.card-summary { font-size: 10px; }.card-type { max-width: 145px; text-align: right; }.status-bar { left: 28px; right: 28px; height: 62px; }.scroll-cue { width: 210px; }.spine-caption { display: none; }body.flat #project-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) {
 :root { --card-width: min(80vw,350px); }
 .atmosphere { background: linear-gradient(90deg,#e3e5e8e8 0%,#e3e5e865 29%,#e3e5e800 70%),linear-gradient(180deg,#e3e5e8 0%,#e3e5e800 28%,#e3e5e800 79%,#e3e5e8 100%); }
 #project-list { mask-image: linear-gradient(to bottom, transparent 85px, #000 112px, #000 calc(100% - 119px), transparent calc(100% - 85px)); }
 .site-header { height: 74px; left: 20px; right: 20px; gap: 17px; }.brand { font-size: 34px; }.brand span { font-size: 8px; margin-left: 5px; }.identity { font-size: 10px; }.identity span { display: none; }.header-actions { gap: 0; }.original { display: none; }.mode-button { padding: 6px 9px; gap: 6px; font-size: 10px; }.view-icon { font-size: 17px; }
 .intro { top: 111px; left: 23px; width: 80%; }.intro-kicker { font-size: 8px; margin-bottom: 14px; }.intro h1 { font-size: 29px; line-height: 1.3; letter-spacing: -1px; }.intro-copy { display: none; }.explore { margin-top: 17px; font-size: 9px; min-width: 104px; }
 .top-left,.top-right,.helix-signature { display: none; }.card-shell { padding: 6px; }.card-top { font-size: 8px; padding: 4px 4px 8px; }.card-heading { min-height: 67px; padding: 9px 10px; gap: 8px; }.card-number { font-size: 52px; }.card-type { font-size: 8px; }.card-image { height: 117px; }.card-body { padding: 13px 11px 4px; }.card-heading h3 { font-size: 21px; }.card-summary { font-size: 11px; line-height: 1.8; }.card-bottom { margin-top: 13px; padding-top: 10px; }.card-footnote { padding-top: 7px; font-size: 7px; }
 .project-nav { bottom: 81px; left: 22px; }.nav-label { display: none; }#project-dots { flex-direction: row; gap: 13px; }.dot-button { font-size: 8px; gap: 4px; }.dot-button .dot { width: 3px; height: 3px; }.dot-button[aria-current="true"] .dot { width: 10px; }.dot-name { display: none; }
 .status-bar { height: 60px; left: 20px; right: 20px; gap: 12px; }.scroll-cue { width: auto; font-size: 9px; }.scroll-icon { display: none; }.project-progress { gap: 7px; font-size: 9px; }.progress-track { width: 42px; }.study-label { display: none; }.travel-controls { gap: 5px; }.travel-controls button { width: 26px; height: 26px; }
 .journey-end { top: 118px; left: 23px; gap: 12px; }.journey-end>span { font-size: 24px; }.journey-end a { font-size: 11px; }
 body.flat #journey { padding: 110px 22px 95px; }body.flat .intro h1 { font-size: 28px; }body.flat #project-list { display: flex; flex-direction: column; gap: 28px; }body.flat .project-card .card-shell { min-height: 0; }body.flat .card-image { height: 175px; }body.flat .intro { margin-bottom: 35px; }
}
@media (max-height:700px) and (min-width:901px) { :root { --card-width: 300px; }.card-image { height: 110px; }.card-summary { font-size: 10px; }.card-body { padding-top: 12px; }.card-bottom { margin-top: 10px; }.intro { top: 25vh; }.intro h1 { font-size: 32px; }.intro-copy { margin: 14px 0 20px; }.project-nav { bottom: 94px; }#project-dots { gap: 0; }.nav-label { margin-bottom: 10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none !important; scroll-behavior: auto !important; } }

/* Full homepage: the orbit owns one sticky viewport and then releases the page. */
html { scroll-behavior: smooth; }
.dna-home { --pad: 42px; --ui-page-gutter: 0px; --ui-header-height: 88px; background: var(--fog); }
.dna-home .site-header { height: 88px; gap: 28px; padding: 0; background: #e3e5e8ed; backdrop-filter: blur(12px); }
.dna-home .brand { align-items: center; }
.dna-home .brand-word { display: flex; font: 900 44px/.8 var(--display); letter-spacing: -3px; }
.dna-home .brand-word span { font: inherit; letter-spacing: inherit; margin: 0; }
.dna-home .site-nav { margin-left: auto; gap: 22px; }
.dna-home .site-nav a { display: grid; place-items: center; position: relative; font-size: 12px; }
.dna-home .site-nav a::after { content: ''; position: absolute; height: 2px; left: 10px; right: 10px; transform: scaleX(0); }
.dna-home .mode-button { min-height: 44px; }
[hidden] { display: none !important; }
#projects { position: relative; }
.orbit-stage { position: sticky !important; top: 0; height: var(--stage-height,100svh); min-height: 0 !important; overflow: hidden; }
.orbit-stage :is(#scene,.atmosphere,.frame-mark,.intro,.spine-caption,#connections,#project-list,.project-nav,.status-bar,.journey-end,.boot-status) { position: absolute; }
.orbit-stage .intro { top: 22%; }
.orbit-stage .journey-end { top: 25%; }
.orbit-stage .project-card { scroll-margin-top: 120px; }
.card-heading a:focus-visible { outline-offset: 3px; }
.card-image a { display: block; width: 100%; height: 100%; }
.card-stage { display: flex; align-items: baseline; font-size: 9px; color: #647079; line-height: 1.5; margin: 10px 0 0; }
.read-link { min-height: 30px; }
.read-link::after { content: none; }
.continue-link { margin-left: auto; font-size: 11px; min-height: 44px; display: flex; align-items: center; }
.dna-home .travel-controls button { width: 36px; height: 36px; }
.dna-home .dot-button { min-height: 30px; }
.dna-home .project-nav { bottom: 108px; }
.dna-home .status-bar { height: 72px; }
.after-journey, .about-section, .resume-section { position: relative; padding: 96px max(7vw,24px); scroll-margin-top: 88px; }
.eyebrow { font: 11px/1.6 var(--body); letter-spacing: 1.5px; color: #637078; margin: 0 0 22px; }
.eyebrow::before { content: ''; width: 7px; height: 7px; background: #ff6736; display: inline-block; margin-right: 12px; }
.section-intro h2,.about-heading h2,.resume-section h2 { font: 600 clamp(28px,3.3vw,48px)/1.35 var(--body); letter-spacing: -1.5px; margin: 0; }
.after-journey { border-top: 1px solid #20252d30; display: grid; grid-template-columns: 1fr 1.1fr; gap: 8vw; background: #edede7; }
.dna-home .project-drafts { padding: 0; margin: 0; }
.dna-home .project-drafts h3 { font: 11px/1.6 var(--body); margin: 0 0 22px; color: #647078; }
.dna-home .project-drafts article { border-top: 1px solid #20252d40; padding: 24px 0; }
.dna-home .project-drafts h4 { font: 600 21px/1.5 var(--body); margin: 0 0 12px; }
.dna-home .project-drafts p { font: 14px/1.9 var(--body); color: #465059; margin: 0 0 12px; }
.dna-home .project-drafts .draft-status { font: 11px/1.6 var(--body); color: #6e787d; margin: 0; }
.about-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 42px 8vw; border-top: 1px solid #20252d30; }
.about-heading { grid-column: 1; }
.about-heading h2 span { color: #647078; }
.about-image { grid-column: 1; margin: 0; max-width: 510px; }
.about-image img { display: block; width: 100%; height: auto; filter: saturate(.65); }
.about-copy { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 600px; }
.about-copy p { font: 15px/2 var(--body); color: #49535b; margin: 0 0 24px; }
.about-copy .about-statement { color: #20252d; font: 600 24px/1.6 var(--body); border-left: 4px solid #e3262c; padding-left: 22px; margin-bottom: 32px; }
.resume-section { background: #252a34; color: #eeeee8; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.resume-section .eyebrow { color: #b3bac2; }
.resume-section p:not(.eyebrow) { font: 14px/1.9 var(--body); color: #b7bfc7; margin: 20px 0 0; }
.resume-link { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; border: 1px solid #ff6736; background: #ff6736; color: #20252d; padding: 20px 28px; min-height: 56px; }
.resume-link:hover { background: #eeeee8; border-color: #eeeee8; }
.dna-home .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; background: #252a34; color: #b7bfc7; padding: 28px 7vw; border-top: 1px solid #eeeee82a; font: 9px/1.6 var(--mono); }
.dna-home .footer-version { margin: 0; font-size: 10px; }
body.flat #projects { height: auto !important; }
body.flat .orbit-stage { position: relative !important; height: auto !important; overflow: visible; }
body.flat #journey { padding: 140px 7vw 70px; }
body.flat .frame-mark,body.flat .status-bar { display: none; }
body.flat .intro { position: relative; top: auto; }
body.flat .intro-copy { display: block; }
body.flat .project-card .card-shell { min-height: 0; }
body.flat .card-summary { font-size: 13px; }
body.flat .card-stage { font-size: 11px; }
body.flat .read-link { min-height: 44px; font-size: 12px; }
body.flat .helix-signature { display: none; }
body.flat .boot-status { position: static; margin: 28px 0 0; padding: 0; }
@media (min-width:1601px) { .dna-home .project-nav { bottom: 108px; } }
@media (max-width:1100px) {
 .dna-home .site-header { gap: 18px; }
 .dna-home .site-nav { gap: 10px; }
 .dna-home .identity { font-size: 11px; }
 .after-journey,.about-section,.resume-section { padding: 72px 5vw; gap: 40px; }
 .dna-home .project-nav { bottom: 88px !important; }
 .dna-home .dot-button { min-height: 28px; }
}
@media (max-width:900px) {
 .dna-home { --ui-header-height: 74px; }
 .dna-home .site-header { left: 18px; right: 18px; height: 74px; gap: 12px; }
 .dna-home .identity { display: none; }
 .dna-home .brand-word { font-size: 34px; }
 .dna-home .site-nav { gap: 2px; }
 .dna-home .site-nav a { font-size: 11px; min-width: 38px; }
 .dna-home .mode-button { width: 38px; padding: 6px; justify-content: center; flex-shrink: 0; }
 .mode-label { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
 .dna-home .mode-button[aria-pressed="true"] { background: #ff6736; }
 .orbit-stage .intro { top: 111px; }
 .orbit-stage .journey-end { top: 118px; }
 .dna-home .status-bar { height: 62px; gap: 8px; }
 .dna-home .travel-controls button { width: 36px; height: 40px; }
 .dna-home .project-nav { bottom: 74px !important; }
 .dna-home .dot-button { min-height: 32px; padding: 7px 2px; }
 .dna-home .continue-link { display: none; }
 .card-stage { margin-top: 8px; font-size: 9px; }
 .card-footnote { font-size: 9px; }
 .card-bottom { margin-top: 8px; }
 .after-journey,.about-section,.resume-section { display: block; padding: 56px 24px; scroll-margin-top: 74px; }
 .section-intro { margin-bottom: 40px; }
 .about-image { margin: 30px 0; max-width: none; }
 .about-copy .about-statement { font-size: 21px; padding-left: 16px; }
 .about-copy p { font-size: 14px; }
 .about-copy p:last-child { margin-bottom: 0; }
 .resume-link { margin-top: 30px; width: 100%; }
 .dna-home .footer-signature:nth-child(2) { display: none; }
 .dna-home .site-footer { padding: 24px; }
 body.flat #journey { padding: 110px 24px 56px; }
 body.flat .intro { top: auto; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width:901px) { .about-copy { align-self: start; padding-top: 62px; } }

@media (min-width:701px) and (max-width:900px) {
 .dna-home .identity { display: block; }
 .dna-home .mode-button { width: auto; padding: 9px 13px; }
 .mode-label { position: static; width: auto; height: auto; clip-path: none; }
 .dna-home .site-nav { gap: 16px; }
 body.flat #project-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* A single DNA scene carries the opening into the project journey. */
.experience { position: relative; isolation: isolate; --viewport-height: 100svh; }
.scene-backdrop { position: sticky; top: 0; height: var(--viewport-height); margin-bottom: calc(-1 * var(--viewport-height)); overflow: hidden; pointer-events: none; z-index: 0; }
.scene-backdrop :is(#scene,.atmosphere) { position: absolute; inset: 0; height: 100%; width: 100%; }
.opening { position: relative; z-index: 1; min-height: var(--viewport-height); display: flex; align-items: center; padding: 130px 7vw; }
.opening-copy { max-width: 600px; padding-bottom: 30px; }
.opening-kicker { display: flex; align-items: center; gap: 10px; font: 11px/1.5 var(--body); letter-spacing: 1.4px; margin: 0 0 30px; }
.opening-kicker span { width: 7px; height: 7px; background: #e3262c; }
.opening h1 { font: 600 clamp(40px,4.6vw,70px)/1.28 var(--body); letter-spacing: -2.5px; }
.opening-intro { font: 14px/2 var(--body); color: #515a65; margin: 28px 0 36px; }
.opening-actions { display: flex; align-items: center; gap: 30px; }
.opening-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; background: #252a34; color: #eeeee8; min-height: 50px; padding: 12px 20px; font-size: 13px; }
.opening-primary span { color: #ff6736; font: 20px/1 var(--mono); }
.opening-primary:hover { background: #e3262c; }.opening-primary:hover span { color: #eeeee8; }
.opening-resume { display: inline-flex; gap: 22px; align-items: center; min-height: 48px; font-size: 12px; border-bottom: 1px solid #20252d50; }
.opening-resume:hover { border-color: #20252d; }
.opening-scroll { position: absolute; left: 7vw; right: 7vw; bottom: 30px; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid #20252d30; color: #67707a; font-size: 11px; }
.opening-scroll i { font: 20px/1 var(--mono); color: #20252d; }
.orbit-stage { z-index: 1; }
.journey-heading { position: absolute; top: 122px; left: 42px; z-index: 5; pointer-events: none; opacity: var(--arrival,0); }
.journey-heading .eyebrow { font-size: 10px; letter-spacing: 1px; }
.journey-heading h2 { font: 500 25px/1.4 var(--body); margin: 10px 0 0; letter-spacing: -.5px; }
.orbit-stage :is(.project-nav,.status-bar) { opacity: var(--arrival,0); }
.orbit-stage .journey-end { left: auto; right: 7vw; top: 43%; width: 25vw; }
@media (min-width: 901px) {
 .orbit-stage[data-ending-side="left"] .journey-end { left: 7vw; right: auto; }
}
.after-journey { padding: 36px 7vw; gap: 5vw; grid-template-columns: minmax(160px,.55fr) 1.6fr; background: #dcdfe3; }
.after-journey .section-intro { margin: 0; }
.after-journey .section-intro h2 { font-size: 19px; letter-spacing: -.4px; line-height: 1.5; }
.after-journey .section-intro p { font: 12px/1.8 var(--body); color: #647078; margin: 7px 0 0; }
.dna-home .project-drafts { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.dna-home .project-drafts h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dna-home .project-drafts article { padding: 0; border: 0; min-width: 0; }
.project-drafts summary { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 2px 24px 12px 0; min-height: 63px; cursor: pointer; list-style: none; }
.project-drafts summary::-webkit-details-marker { display: none; }
.project-drafts summary::after { content: '+'; position: absolute; right: 0; top: 0; font: 21px/1.3 var(--mono); color: #67707a; }
.project-drafts details[open] summary::after { content: '−'; }
.project-drafts summary:focus-visible { outline: 2px solid #20252d; outline-offset: 6px; }
.project-drafts .draft-title { font: 500 15px/1.5 var(--body); }
.dna-home .project-drafts .draft-status { font-size: 10px; }
.dna-home .project-drafts details > p { font-size: 12px; margin: 3px 0 0; }
.closing { position: relative; background: #eeeee8; }
.about-section { padding-top: 90px; padding-bottom: 72px; border: 0; }
@media (min-width:901px) {
 .about-section { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 30px 8vw; }
 .about-heading { grid-column: 2; grid-row: 1; }
 .about-heading h2 { font-size: clamp(30px,3vw,43px); line-height: 1.25; }
 .about-image { grid-column: 1; grid-row: 1 / span 2; align-self: center; max-width: none; }
 .about-copy { grid-column: 2; grid-row: 2; padding-top: 0; }
 .about-copy .about-statement { font-size: 22px; padding-left: 18px; margin-bottom: 25px; }
 .about-copy p:last-child { margin-bottom: 0; }
}
.resume-section { margin: 0 7vw; padding: 38px 0 48px; border-top: 1px solid #20252d30; background: transparent; color: #20252d; }
.resume-section .eyebrow { display: none; }
.resume-section h2 { font-size: 28px; letter-spacing: -.8px; }
.resume-section p:not(.eyebrow) { font-size: 13px; color: #67707a; margin: 13px 0 0; }
.resume-link { min-height: 52px; padding: 16px 24px; font-size: 13px; }
.resume-link:hover { background: #252a34; color: #eeeee8; border-color: #252a34; }
.resume-download { flex-shrink: 0; max-width: 320px; text-align: right; }
.resume-link[aria-disabled="true"] { cursor: progress; opacity: .65; }
.resume-section .download-status { max-width: 28em; font-size: 12px; line-height: 1.7; margin-top: 10px; }
.resume-section .download-status.is-error { color: #a32932; }
.dna-home .site-footer { background: #eeeee8; color: #67707a; border-top: 1px solid #20252d20; padding-top: 24px; padding-bottom: 24px; }
.dna-home .footer-signature:nth-child(2) { display: none; }
body.flat .journey-heading { position: static; opacity: 1 !important; margin-bottom: 36px; }
body.flat .journey-heading h2 { font-size: 32px; }
body.flat #journey { padding-top: 110px; }
@media (max-width:1100px) and (min-width:901px) {
 .opening { padding-left: 5vw; }.opening h1 { font-size: 45px; }.opening-intro { font-size: 13px; }
 .journey-heading { left: 28px; top: 112px; }
 .after-journey { padding: 32px 5vw; gap: 30px; }.dna-home .project-drafts { gap: 22px; }
 .resume-section { margin: 0 5vw; }
}
@media (max-width:900px) {
 .opening { padding: 130px 24px 110px; align-items: flex-start; min-height: max(var(--viewport-height),640px); }
 .opening-copy { max-width: 100%; padding: 0; }
 .opening-kicker { font-size: 10px; margin-bottom: 23px; }
 .opening h1 { font-size: clamp(35px,6.2vw,48px); line-height: 1.3; letter-spacing: -1.7px; }
 .opening-intro { max-width: 310px; font-size: 12px; line-height: 1.9; margin: 23px 0 24px; }
 .opening-actions { gap: 24px; }.opening-primary { font-size: 12px; min-height: 48px; gap: 26px; padding: 12px 16px; }
 .opening-resume { font-size: 11px; gap: 14px; }
 .opening-scroll { left: 24px; right: 24px; bottom: 25px; font-size: 10px; }
 .journey-heading { top: 102px; left: 24px; }
 .orbit-stage .journey-end { top: 106px; left: 24px; right: auto; width: auto; }
 .journey-heading .eyebrow { font-size: 9px; }.journey-heading h2 { font-size: 22px; margin-top: 7px; }
 .after-journey { padding: 28px 24px; }
 .after-journey .section-intro { margin-bottom: 23px; }
 .after-journey .section-intro h2 { font-size: 18px; }
 .dna-home .project-drafts { grid-template-columns: 1fr; gap: 15px; }
 .dna-home .project-drafts article + article { border-top: 1px solid #20252d24; padding-top: 15px; }
 .project-drafts summary { min-height: 57px; gap: 5px; padding-bottom: 0; }
 .dna-home .project-drafts details > p { margin-top: 10px; }
 .about-section { padding: 58px 24px 40px; }
 .resume-section { margin: 0 24px; padding: 30px 0 38px; }
 .resume-section h2 { font-size: 26px; }
 .resume-link { margin-top: 24px; }
 .resume-download { max-width: none; text-align: left; }
 body.flat #journey { padding-top: 95px; }
 body.flat .journey-heading h2 { font-size: 28px; }
}
@media (max-height:700px) and (max-width:900px) {
 .opening { padding-top: 116px; }.opening-kicker { margin-bottom: 18px; }
 .opening-intro { margin-top: 20px; margin-bottom: 20px; }
}

/* Shared reading scale; the condensed face is reserved for the brand and numbers. */
.dna-home {
 --type-meta: 12px;
 --type-body: 14px;
 --type-label: 16px;
 --type-title: 24px;
 --type-section: 36px;
}
.dna-home :is(.opening-kicker,.eyebrow,.card-top,.card-type,.card-context,.card-stage,.card-footnote,.project-progress,.scroll-cue,.continue-link,.footer-version,.footer-signature) { font-family: var(--body); font-size: var(--type-meta); letter-spacing: 0; }
.dna-home :is(.opening-intro,.card-summary,.read-link,.opening-primary,.opening-resume,.opening-scroll,.site-nav a,.mode-button,.identity) { font-family: var(--body); font-size: var(--type-body); }
.dna-home .identity span { font-size: var(--type-meta); }
.dna-home .card-heading h3 { font-size: var(--type-title); }
.dna-home .journey-heading h2 { font-size: var(--type-section); font-weight: 600; letter-spacing: -1px; }
.dna-home .journey-heading .eyebrow { margin-bottom: 12px; }
.dna-home .nav-label { font-size: var(--type-meta); margin-bottom: 16px; }
.dna-home .dot-button { font: 400 var(--type-meta)/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.dna-home .dot-name { font: 400 var(--type-meta)/1.4 var(--body); }
.dna-home .opening-scroll { border: 0; }
@media (max-width:1100px) {
 .dna-home { --type-section: 32px; }
 .dna-home .card-context { font-size: var(--type-meta); }
}
@media (max-width:900px) {
 .dna-home { --type-section: 28px; }
 .dna-home .card-summary { font-size: var(--type-meta); }
 .dna-home .card-heading h3 { font-size: var(--type-title); }
}

/* A continuous header and a bounded about composition share one anchor offset. */
.dna-home { --ui-header-height: 72px; }
.dna-home .site-header,
.dna-home.flat .site-header {
 left: 0; right: 0; height: var(--ui-header-height);
 padding-inline: max(32px,calc((100vw - 1196px) / 2));
 background: #e3e5e8f5; border-bottom-color: #20252d18;
 transition: background-color 180ms ease;
}
.dna-home.closing-visible .site-header { background: #eeeee8f5; }
.dna-home .brand-word { font-size: 38px; }
.dna-home :is(.about-section,.resume-section,.after-journey) { scroll-margin-top: var(--ui-header-height); }
.dna-home .about-section {
 width: min(100%,1120px); margin-inline: auto;
 padding: 32px; gap: 20px 56px;
}
.dna-home .about-heading .eyebrow { margin-bottom: 14px; }
.dna-home .about-heading h2 { font-size: 32px; line-height: 1.28; letter-spacing: -1px; }
.dna-home .about-copy p { font-size: 14px; line-height: 1.85; margin-bottom: 16px; }
.dna-home .about-copy .about-statement {
 font-size: 18px; line-height: 1.6; padding-left: 16px; margin-bottom: 20px;
}
.dna-home .about-copy p:last-child { margin-bottom: 0; }
@media (min-width:901px) {
 .dna-home .about-section {
  min-height: calc(100svh - var(--ui-header-height));
  grid-template-columns: minmax(0,340px) minmax(0,1fr);
  align-content: center;
 }
 .dna-home .about-image { width: 100%; max-width: 340px; justify-self: center; }
}
@media (max-width:900px) {
 .dna-home { --ui-header-height: 64px; }
 .dna-home .site-header { padding-inline: 20px; gap: 12px; }
 .dna-home .brand-word { font-size: 32px; }
 .dna-home .about-section { padding: 32px 24px; }
 .dna-home .about-heading h2 { font-size: 28px; }
 .dna-home .about-image { width: min(100%,220px); margin: 24px auto; }
}