:root{color-scheme:dark;--bg:#101112;--fg:#ededeb;--muted:#939694;--line:#353837;--accent:#c9d7ce;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:4px}button{border:0;background:none}button:disabled{cursor:default;opacity:.4}.site-shell{min-height:100svh;display:flex;flex-direction:column;padding:0 clamp(24px,5vw,88px);max-width:2000px;margin:auto}.topbar{height:116px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0c;position:relative;z-index:2}.monogram{font-size:29px;font-weight:650;letter-spacing:-2px}.monogram span{color:#a6b9ac}.header-caption{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.19em;color:var(--muted)}.quiet-button{font-size:13px;color:var(--muted);padding:12px 0;display:inline-flex;align-items:center;gap:8px;transition:color .2s}.quiet-button:hover{color:var(--fg)}#motion-label{color:var(--fg)}.map{position:relative;flex:1;min-height:560px;height:calc(100svh - 200px);max-height:1100px;outline:none}.identity{position:absolute;left:45%;top:47%;transform:translate(-50%,-50%);white-space:nowrap;z-index:1}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:500;color:var(--muted);margin:0 0 22px}.identity h1{font-size:clamp(40px,5.6vw,88px);font-weight:450;line-height:1.15;letter-spacing:-.045em;margin:0}.name-period{color:#a6b9ac}.identity-caption{font-size:15px;letter-spacing:-.01em;color:var(--muted);margin:23px 0 0}.node{position:absolute;text-align:left;z-index:2;padding:16px 20px;margin:-16px -20px;border-radius:12px;transition:background .25s}.node:hover{background:#ffffff04}.node-index{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.06em;color:#787e7a;display:block;margin-bottom:17px}.node-title{font-size:clamp(25px,2.6vw,40px);font-weight:400;letter-spacing:-.04em;line-height:1.2;display:block}.node-description{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:20px;margin-top:13px}.node-arrow{font-size:17px;display:inline-block;transition:transform .25s,color .25s;color:#767b77}.node:hover .node-arrow{transform:translate(3px,-3px);color:var(--fg)}.node-background{left:9%;top:21%}.node-skills{left:78%;top:16%}.node-projects{left:75%;top:73%}.connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.connections path{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .25s}.map:has(.node-background:hover) #line-background,.map:has(.node-skills:hover) #line-skills,.map:has(.node-projects:hover) #line-projects{stroke:#49504b}.footer{height:84px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff0c;font-size:12px;color:var(--muted);gap:20px}.footer-note{font-size:12px;color:#717773}#replay{font-size:12px}#replay>span{font-size:19px}.glyph{display:inline-block;white-space:pre}.chrome{transition:opacity .75s ease}.intro-active .chrome{opacity:0;pointer-events:none}.intro-active .glyph{visibility:hidden}.intro-active .node{pointer-events:none}.intro-active .site-shell{user-select:none}#letter-stage{position:fixed;inset:0;z-index:10;pointer-events:none;overflow:hidden}.flying-letter{position:absolute;top:0;left:0;will-change:transform;transform-origin:0 0;white-space:pre;color:var(--fg);pointer-events:none}.skip-intro{position:fixed;bottom:30px;right:5vw;z-index:11;color:var(--muted);font-size:13px;padding:12px 16px;border:0;border-radius:0}.skip-intro:hover{color:var(--fg);background:none}.skip-link{position:fixed;left:20px;top:-70px;padding:14px 20px;background:var(--fg);color:var(--bg);z-index:100}.skip-link:focus{top:20px}dialog{color:var(--fg);background:#17191a;border:1px solid #343736;border-radius:20px;padding:0;width:min(680px,calc(100% - 32px));max-height:calc(100svh - 64px);box-shadow:0 30px 150px #0008;overflow:auto}dialog::backdrop{background:#080909b8;backdrop-filter:blur(14px)}dialog[open]{animation:dialog-in .3s ease both}.detail-top{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid #ffffff0b}.detail-top .eyebrow{margin:0}.close-button{font-size:28px;width:40px;height:40px;color:var(--muted);border-radius:50%;line-height:1}.close-button:hover{background:#ffffff0a;color:var(--fg)}.detail-body{padding:40px 40px 48px}.detail-body h2{font-size:48px;font-weight:450;letter-spacing:-.055em;margin:0 0 20px}.detail-intro{color:#c3c6c3;font-size:18px;line-height:1.6;max-width:470px;margin:0 0 36px}.draft-note{padding:24px;border:1px solid #353937;border-radius:12px;color:var(--muted);font-size:15px;line-height:1.7}.draft-note strong{font-weight:500;display:block;color:var(--fg);margin-bottom:8px}.detail-bottom{border-top:1px solid #ffffff0b;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 32px;color:var(--muted);font-size:12px}.noscript-note{text-align:center;color:var(--muted);font-size:14px}.motion-off *{scroll-behavior:auto!important;animation:none!important;transition:none!important}@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@media(min-width:1600px){.map{min-height:660px}}@media(max-width:800px){.topbar{height:88px}.header-caption{font-size:10px}.site-shell{padding:0 28px}.map{min-height:650px;height:calc(100svh - 170px)}.identity{left:50%;top:30%;text-align:center}.identity h1{font-size:clamp(40px,8vw,64px)}.identity .eyebrow{margin-bottom:18px}.identity-caption{font-size:14px;margin-top:18px}.node-title{font-size:28px}.node-background{left:4%;top:58%}.node-skills{left:65%;top:58%}.node-projects{left:36%;top:82%}.node-index{margin-bottom:10px}.node-description{font-size:12px;margin-top:9px;gap:10px}.node-arrow{font-size:15px}.footer-note{display:none}.footer{height:82px}.connections path{stroke:#303432}.detail-body{padding:30px 26px}.detail-body h2{font-size:38px}.detail-bottom{padding:16px 24px}.detail-bottom>span{max-width:130px;line-height:1.6}}
@media(max-width:380px){.site-shell{padding:0 20px}.header-caption{display:none}.node-title{font-size:25px}.node-skills{left:63%}.node-description{font-size:11px;gap:6px}.identity h1{font-size:39px}.footer{font-size:11px;gap:10px}#replay{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.glyph-space{width:.28em;letter-spacing:0}

/* Full-viewport composition: the name itself, rather than its caption group, is centered. */
.site-shell{padding:0;max-width:none;min-height:100svh;position:relative}
.topbar{position:absolute;top:0;left:0;right:0;height:90px;border:0;pointer-events:none}
.map{width:100%;height:100svh;min-height:0;max-height:none;flex:none}
.identity{left:50%;top:50%;transform:translate(-50%,-50%);text-align:left}
.identity h1{font-size:clamp(38px,5.6vw,88px)}
.identity .eyebrow{position:absolute;bottom:100%;left:0;margin:0 0 22px;font-size:11px;white-space:nowrap}
.node{width:clamp(180px,18vw,240px);margin:0;padding:16px 20px;transform:translate(-50%,-50%)}
.footer{position:absolute;bottom:0;left:0;width:100%;height:70px;border:0;justify-content:center}
.intro-active .chrome{transition:none}
@media(max-width:800px){
 .identity h1{font-size:clamp(34px,7.6vw,56px)}
 .node{width:min(43vw,174px);padding:12px}
 .node-title{font-size:clamp(22px,5.8vw,28px)}
 .node-description{font-size:12px;gap:8px;line-height:1.5}
 .header-caption{display:block;font-size:10px}
 .identity .eyebrow{font-size:10px;margin-bottom:20px}
}
@media(max-height:500px){.node-description,.node-index{display:none}.topbar{height:45px}.footer{height:42px}.identity .eyebrow{margin-bottom:12px}}

/* Three equally spaced branches, in reading order: Background, Projects, Skills. */
.node{width:auto;white-space:nowrap;text-align:center;padding:16px 12px}
.node-title{font-size:clamp(24px,2.6vw,40px)}
@media(max-width:800px){.node-title{font-size:clamp(20px,4.6vw,28px)}.node{width:auto;padding:12px 8px}.identity h1{font-size:clamp(34px,7.6vw,56px)}}

/* Optical center and a quiet, expanding web. */
.identity{top:47%}
.identity h1{position:relative;background:var(--bg);padding:5px 10px;margin:-5px -10px}
.web-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.web-ring{fill:none;stroke:#343936;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.65;transform:scale(1);transition:transform 1.15s cubic-bezier(.22,.7,.2,1),opacity .7s ease}
.web-ring:nth-child(2){opacity:.53}.web-ring:nth-child(3){opacity:.42}.web-ring:nth-child(4){opacity:.3}
.intro-active:not(.assembling) .web-ring{transform:scale(0);opacity:0;transition:none;transition-delay:0ms!important}
.intro-active.assembling .connections{opacity:1;transition:opacity 1s ease}
.node{background:var(--bg)}.node:hover{background:var(--bg)}
.connections path{stroke:#49504b}
@media(prefers-reduced-motion:reduce){.web-ring{transition:none}}

/* A smaller name, adaptive section geometry, and screen-filling rings. */
.identity h1{font-size:clamp(34px,4.9vw,76px)}
.web-ring,.web-ring:nth-child(n){opacity:var(--ring-opacity,.45)}
.intro-active:not(.assembling) .web-ring{opacity:0}
@media(max-width:800px){.identity h1{font-size:clamp(30px,6.8vw,50px)}}

.map:has(.node:hover) .connections path{stroke:#49504b}
.map:has(.node-background:hover) #line-background{stroke:#49504b}
.map:has(.node-desol:hover) #line-desol{stroke:#49504b}
.map:has(.node-dreamcatcher:hover) #line-dreamcatcher{stroke:#49504b}
.map:has(.node-vole:hover) #line-vole{stroke:#49504b}
.map:has(.node-other:hover) #line-other{stroke:#49504b}

/* More prominent project labels, with room retained at phone widths. */
.node-title{font-size:clamp(27px,2.95vw,45px)}
@media(max-width:800px){.node-title{font-size:clamp(22px,5.1vw,31px)}}

/* First-level previews: compact, lower-contrast branches beneath each section. */
.branch-group{position:absolute;width:clamp(180px,17vw,248px);transform:translate(-50%,-50%);z-index:2}
.branch-group .node{position:relative;left:auto;top:auto;transform:none;display:block;width:100%;padding:8px 10px;margin:0;text-align:left}
.section-preview{list-style:none;margin:14px 0 0;padding:0 0 0 36px;display:grid;gap:7px;color:#9a9e9b;font-size:14px;line-height:1.4}
.section-preview li{width:max-content;max-width:100%;background:var(--bg);padding:1px 4px}
.preview-connections,.ring-dots{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.preview-connections path{stroke:#58635c;stroke-opacity:.4;stroke-width:1;fill:none}
.web-dot{fill:#adbcb1;opacity:.48;transform:scale(1);transition:transform 1.15s cubic-bezier(.22,.7,.2,1),opacity .7s ease}
.intro-active:not(.assembling) .web-dot{transform:scale(0);opacity:0;transition:none;transition-delay:0ms!important}
.intro-active.assembling .preview-connections,.intro-active.assembling .section-preview{opacity:1;transition:opacity 1s ease .3s}
@media(max-width:699px){
 .branch-group{width:calc(50vw - 18px)}
 .branch-group .node{padding:5px 3px}
 .node-title{font-size:clamp(19px,4.5vw,27px)}
 .section-preview{font-size:13px;line-height:1.3;margin-top:10px;padding-left:26px;gap:5px}
 .section-preview li{padding:0 2px}
 .footer{height:38px}
}
@media(max-height:620px){.section-preview{gap:3px;font-size:12px;margin-top:9px}.branch-group .node{padding-top:3px;padding-bottom:3px}}
@media(max-height:500px) and (min-width:700px){.branch-group{width:170px}.node-title{font-size:24px}.section-preview{font-size:12px;gap:1px;margin-top:6px}.footer{height:30px}}

/* Each preview is an independent satellite of its section title. */
.branch-group{width:0;height:0;transform:none}
.branch-group .node{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:max-content;text-align:center;padding:7px 9px}
.section-preview{position:absolute;inset:0;margin:0;padding:0;display:block;font-size:14px;line-height:1.35}
.section-preview li{position:absolute;transform:translate(-50%,-50%);width:max-content;max-width:130px;text-align:center;padding:2px 4px}
.preview-connections path{stroke-opacity:.36}
#replay{padding:5px 0;line-height:20px}
@media(max-width:699px){.branch-group{width:0;height:0}.branch-group .node{padding:5px 3px}.section-preview{font-size:12px}.section-preview li{width:max-content;max-width:77px;padding:2px 3px}.node-title{font-size:clamp(18px,4.5vw,25px)}}
@media(max-height:500px) and (min-width:700px){.branch-group{width:0}.section-preview{font-size:12px}}

/* Preview branches grow from their parent, then reveal the endpoint label. */
.intro-active .preview-connections,.intro-active .section-preview{opacity:0!important;transition:none!important}
.preview-growing .preview-connections,.preview-growing .section-preview{opacity:1;transition:none}
.preview-growing .preview-connections path{stroke-dasharray:1;animation:branch-grow .48s cubic-bezier(.2,.7,.2,1) var(--grow-delay,0ms) both}
.preview-growing .section-preview li{animation:label-appear .3s ease var(--label-delay,.48s) both}
.web-dot{opacity:.65}
@keyframes branch-grow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes label-appear{from{opacity:0}to{opacity:1}}

@media(max-width:360px){#group-other .section-preview li:nth-child(n+2){max-width:60px}}

/* Keep the same glyphs throughout the introduction; no text swap. */
.glyph{position:relative;z-index:3;backface-visibility:hidden}
.intro-active .glyph{will-change:transform}
.skip-intro{border:0;border-radius:0;outline:none;box-shadow:none;appearance:none}

.skip-intro:focus-visible{outline:0;text-decoration:underline;text-underline-offset:5px}

/* Text backgrounds must never occlude moving letters from another branch. */
.identity h1,.branch-group .node,.branch-group .node:hover,.section-preview li{background:transparent}
.web-rings{mask:url(#ring-text-clearance)}
.ring-mask-definitions{position:absolute;width:0;height:0;pointer-events:none}
.section-preview,.preview-connections{will-change:opacity}
.previews-wait .section-preview,.previews-wait .preview-connections{opacity:0;transition:none}

/* Main branch titles lift and drift while their fixed hit areas stay easy to use. */
.node-title{transform:translate3d(0px,0px,0px) scale(1);transform-origin:center;will-change:transform;transition:color .25s,text-shadow .25s}
.node.is-floating .node-title{color:#fff;text-shadow:0 8px 24px #0005}


.section-preview{will-change:opacity,transform}

.identity-button{display:block;padding:0;margin:0;font:inherit;letter-spacing:inherit;line-height:inherit;background:transparent;color:inherit}
.identity-title{display:block;transform:translate3d(0,0,0);transform-origin:center;will-change:transform;transition:color .25s,text-shadow .25s}
.identity-button.is-floating .identity-title{color:#fff;text-shadow:0 8px 24px #0005}
.intro-active .identity-button{pointer-events:none}

#group-other .section-preview li.investment-label{white-space:nowrap;max-width:none}

/* Keep replay visually secondary to the project previews. */
#replay{font-size:10px;opacity:.42;transition:opacity .2s ease,color .2s ease}
#replay>span{font-size:13px}
#replay:hover,#replay:focus-visible{opacity:.7}

/* The same map becomes the subpage's enlarged ring backdrop. */
.site-shell{position:fixed;inset:0;overflow:hidden}
.map{transform-origin:0 0}
.page-open .web-rings{mask:none}
.page-open .map nav,.page-open .identity,.page-open .connections,.page-open .preview-connections{opacity:0;transition:opacity .8s}
.page-open .footer{visibility:hidden}
.page-open.page-returning .footer{visibility:visible}
.subpage{position:fixed;inset:0;z-index:10;overflow-x:hidden;overflow-y:auto;background:transparent;overscroll-behavior:contain}
.subpage[hidden]{display:none}
.subpage-content{padding:90px clamp(24px,6vw,96px) 100px;max-width:1320px;margin:0 auto}
#subpage-title{font-size:clamp(40px,5vw,68px);line-height:1.15;font-weight:450;letter-spacing:-.045em;margin:0;transform-origin:top left;outline:none;width:max-content;max-width:100%}
#subpage-summary{font-size:clamp(17px,1.6vw,23px);line-height:1.6;color:#a6aaa7;max-width:720px;margin:40px 0 90px}
.project-section{margin:0 0 90px}
.project-section h2{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.025em;margin:0 0 30px;line-height:1.25;transform-origin:top left;width:max-content;max-width:100%}
.section-content{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:center}
.media-placeholder{height:230px;border:1px dashed #424743;border-radius:4px;display:grid;place-items:center;color:#757d77;font-size:13px;background:#10111255}
.section-content p{color:#969e98;font-size:16px;line-height:1.7}
.back-home{position:fixed;right:clamp(18px,4vw,60px);top:18px;z-index:30;color:#b6c0b8;font-size:13px;background:#101112ed;border:0;padding:10px 12px;cursor:pointer}
.back-home:hover{color:#ededeb}
.back-home:focus-visible{outline:1px solid #919991;outline-offset:5px}
@media(max-width:699px){.subpage-content{padding-top:88px}#subpage-summary{margin:28px 0 65px}.section-content{grid-template-columns:1fr;gap:12px}.media-placeholder{height:185px}.project-section{margin-bottom:65px}.project-section h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.page-open .map nav,.page-open .identity,.page-open .connections,.page-open .preview-connections{transition:none}}
.page-open .ring-dots{opacity:.25;transition:opacity .8s}
/* Shared text nodes travel between layouts; no replacement title is revealed. */
#subpage .shared-item{position:relative;display:block;left:auto;top:auto;margin:0;padding:0;width:max-content;max-width:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;list-style:none;transform-origin:0 0;transition:none;will-change:transform}
.web-rings,.ring-dots{overflow:visible}
.page-open .web-rings{-webkit-mask:none;mask:none}
.page-returning .map nav,.page-returning .identity,.page-returning .connections,.page-returning .preview-connections{opacity:1;transition:opacity 1.4s cubic-bezier(.42,0,.18,1)}
.page-open .map{will-change:transform}
.shared-placeholder,.shared-placeholder *{visibility:hidden!important}
.page-open .ring-dots{opacity:.5}
/* Readable project stories, original artifacts, and credited artwork. */
.section-content.portfolio-content{display:block;max-width:1020px}
.portfolio-content p,.portfolio-content li{font-size:16px;line-height:1.8;color:#bbc0bc;max-width:760px}
.portfolio-content p{margin:0 0 22px}
.portfolio-content ul{padding-left:22px;margin:0 0 26px}
.portfolio-content li{padding-left:5px;margin:6px 0}
.portfolio-content h3{font-size:25px;font-weight:450;letter-spacing:-.025em;margin:48px 0 18px;line-height:1.3}
.portfolio-content .section-kicker{font-size:12px;letter-spacing:.08em;color:#8f9a92;margin-bottom:24px}
.portfolio-content .project-lede{font-size:21px;line-height:1.6;color:#e2e5e1}
.portfolio-content figure{margin:26px 0 32px;min-width:0}
.portfolio-content figure img,.portfolio-content figure video{width:100%;height:auto;display:block;border-radius:5px;background:#171a18}
.portfolio-content figure>a{display:block}
.portfolio-content figcaption{font-size:12px;line-height:1.65;color:#98a299;margin-top:10px}
.portfolio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.portfolio-gallery figure{margin:12px 0}
.resource-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin:24px 0 34px}
.resource-links a{font-size:14px;line-height:1.6;color:#d3dfd4;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#59645b;overflow-wrap:anywhere}
.resource-links a:hover{color:#fff;text-decoration-color:#c9d7ce}
.portfolio-content .source-note,.portfolio-content .content-pending{font-size:14px;color:#8f9a92}
.narrative-project{margin-bottom:64px}
.narrative-project>h3{font-size:34px}
@media(max-width:699px){.portfolio-gallery{grid-template-columns:1fr;gap:12px}.portfolio-content p,.portfolio-content li{font-size:15px}.portfolio-content h3{font-size:23px}.resource-links{flex-direction:column;gap:16px}.portfolio-content .project-lede{font-size:19px}}
#subpage-intro:empty{display:none}
#subpage-intro:not(:empty){margin:-48px 0 80px}
.task-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.task-gallery>div{display:flex;flex-direction:column;gap:14px;min-width:0}
.task-gallery figure{margin:0}
@media(max-width:699px){.task-gallery{grid-template-columns:1fr;gap:14px}#subpage-intro:not(:empty){margin:-30px 0 60px}}
/* All galleries use independently stacked columns, including future content. */
.portfolio-gallery>.gallery-column{display:flex;flex-direction:column;gap:18px;min-width:0}
.portfolio-gallery>.gallery-column>figure{margin:0}
.portfolio-gallery{margin:26px 0 32px}
@media(max-width:699px){.portfolio-gallery{gap:18px}}
#subpage[data-section="desol"] #subpage-summary{font-size:clamp(16px,1.4vw,20px)}
.portfolio-content p,.portfolio-content li{font-size:18px}
@media(max-width:699px){.portfolio-content p,.portfolio-content li{font-size:17px}}
.portfolio-content .section-kicker{font-size:12px}
.portfolio-content .source-note,.portfolio-content .content-pending{font-size:16px}
.design-study{margin-bottom:54px}
#image-viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:76px clamp(18px,4vw,60px) 28px;border:0;border-radius:0;background:#101112;box-shadow:none;overflow:auto;animation:none}
#image-viewer::backdrop{background:#101112}
#image-back{font-size:13px;color:#ededeb}
#image-viewer figure{margin:0;text-align:center}
#viewer-image{display:block;margin:auto;max-width:100%;max-height:calc(100dvh - 145px);width:auto;height:auto;object-fit:contain}
#viewer-caption{font-size:13px;line-height:1.6;color:#a4aea6;margin:18px auto 0;max-width:900px}
.portfolio-content figcaption,#viewer-caption{font-size:15px;line-height:1.65;color:#b6c0b8}
.viewer-toolbar{position:fixed;left:0;top:0;right:0;min-height:64px;z-index:2;display:flex;align-items:center;gap:12px;padding:12px clamp(18px,4vw,60px);background:#101112}
.viewer-toolbar button,.viewer-toolbar a{font-size:13px;padding:10px 0;color:#b6c0b8;line-height:1.4}
.viewer-toolbar .viewer-home{margin-left:auto}
.viewer-toolbar a{margin-left:12px}
.viewer-toolbar button:hover,.viewer-toolbar a:hover{color:#fff}
#document-viewer{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:0;border:0;background:#101112;overflow:hidden;color:var(--fg)}
#document-viewer::backdrop{background:#101112}
#document-title{position:absolute;top:64px;left:0;right:0;margin:0;padding:8px 20px;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;height:36px;color:#b6c0b8}
#document-frame{position:absolute;top:100px;left:0;width:100%;height:calc(100% - 100px);border:0;background:#fff}
#subpage-note{margin:80px 0 0;padding-top:24px;border-top:1px solid #ffffff18;color:#a4aea6;font-size:16px;line-height:1.7;max-width:820px}
#subpage-note:empty{display:none}
@media(max-width:480px){.viewer-toolbar{gap:10px;padding:10px 16px}.viewer-toolbar button,.viewer-toolbar a{font-size:11px}.viewer-toolbar button+button{margin-left:0}}

.portfolio-content h4{font-size:18px;font-weight:450;line-height:1.4;margin:30px 0 16px;color:var(--fg)}
.portfolio-content img.proposal-crop{aspect-ratio:991 / 1076;object-fit:cover;object-position:50% 30.8642%}
#subpage[data-section="background"] #subpage-summary{font-size:clamp(19px,2vw,25px);margin-bottom:76px}
.education-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:56px;align-items:start}
.portfolio-content .school-name{font-size:clamp(22px,2.5vw,30px);color:var(--fg);line-height:1.3;margin:0 0 12px;letter-spacing:-.025em}
.portfolio-content .education-status{font-size:15px;color:#a0aaa3;margin-bottom:32px}
.degree+.degree{margin-top:24px}
.degree p{margin:0 0 4px;color:#e0e5e1}
.degree span{font-size:15px;color:#a0aaa3}
.gpa{display:flex;flex-direction:column;gap:12px;padding:6px 0 6px 30px;border-left:1px solid #ffffff26}
.gpa-label{font-size:14px;color:#b4beb7}
.gpa strong{font-size:52px;font-weight:400;letter-spacing:-.045em;line-height:1.1;font-variant-numeric:tabular-nums}
.gpa-date{font-size:13px;color:#99a49c}
.portfolio-content .favorite-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.portfolio-content .favorite-games>li{margin:0;padding:0;min-width:0}
.game-rank{display:block;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.1em;color:#98a299;margin-bottom:14px}
.favorite-games figure{margin:0}
.favorite-games figcaption{font-size:17px;color:#e0e5e1;line-height:1.5;margin-top:16px}
.portfolio-content .hobby-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0;margin:0}
.portfolio-content .hobby-list li{padding:20px 0;margin:0;border-top:1px solid #ffffff26;font-size:23px;color:#d9e0db}
@media(max-width:699px){.education-layout{grid-template-columns:1fr;gap:32px}.gpa{border-left:0;border-top:1px solid #ffffff26;padding:24px 0 0}.gpa strong{font-size:44px}.portfolio-content .favorite-games{grid-template-columns:1fr;gap:32px}.portfolio-content .hobby-list{gap:16px}.portfolio-content .hobby-list li{font-size:19px}}

/* Reader navigation mirrors the page's top-right return control. */
.viewer-toolbar{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.viewer-toolbar #document-tab{grid-column:1;justify-self:start;margin:0}
.viewer-toolbar #document-back,.viewer-toolbar #image-back{grid-column:2;justify-self:end;margin:0;font-size:13px}
#subpage[data-section="desol"] #subpage-summary{white-space:pre-line}
.task-gallery>.schedule-column{padding-top:0}
.education-layout{max-width:900px;gap:36px}
@media(max-width:699px){.task-gallery>.schedule-column{padding-top:0}.education-layout{gap:32px}}
@media(max-width:480px){.viewer-toolbar #document-back,.viewer-toolbar #image-back{font-size:11px}}

/* Preview links retain their original shared text during navigation. */
.section-preview li[role="link"]{cursor:pointer;transition:scale .3s ease,translate .18s ease,color .3s ease}
.section-preview li[role="link"]:hover,.section-preview li[role="link"]:focus-visible{scale:1.16;color:#ededeb}
.section-preview li[role="link"]:focus-visible{outline:1px solid #919991;outline-offset:5px}
.page-returning .subpage{overflow-y:hidden}
#subpage[data-section="background"] #subpage-summary{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:clamp(16px,1.5vw,20px)}
#subpage-summary a{color:inherit;text-decoration:none}
#subpage-summary a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.section-preview li[role="link"]{transition:none;scale:1}}

/* Secondary branches return only once their text has landed. */
.page-returning .preview-connections{opacity:0!important;transition:none!important}
.preview-connections{transition:opacity .5s ease}
#subpage[data-section="other"] #subpage-summary{font-size:clamp(16px,1.4vw,20px)}
.portfolio-content .narrative-project>h3{font-size:25px}
.portfolio-content .narrative-project .project-lede{font-size:18px;line-height:1.8}
.narrative-project{margin-bottom:54px}
.portfolio-content figcaption a{color:inherit;text-underline-offset:4px;text-decoration-color:#59645b}
.portfolio-content figcaption a:hover{color:#fff}
@media(max-width:699px){.portfolio-content .narrative-project>h3{font-size:23px}.portfolio-content .narrative-project .project-lede{font-size:17px}}
@media(prefers-reduced-motion:reduce){.preview-connections{transition:none}}

/* Align the task screenshots and give Core's document a larger reading preview. */
.task-gallery>.schedule-column{padding-top:0}
.world-lore-preview{width:60%;max-width:680px}
@media(max-width:699px){.world-lore-preview{width:100%}}

/* Override the general figure margins in the task-management columns. */
.portfolio-content .task-gallery figure{margin:0}

/* Use the full content width for the introduction, wrapping only on smaller screens. */
.portfolio-content .narrative-introduction{max-width:none;text-wrap:pretty}
#subpage[data-section="other"] .project-lede{color:#bbc0bc}

/* Match the half-width Fireworks document preview, expanding on phones. */
.review-study>figure{width:calc((100% - 24px)/2)}
@media(max-width:699px){.review-study>figure{width:100%}}

.hobby-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.hobby-stories article{min-width:0}
.gallery-cover{position:relative;overflow:hidden;border-radius:6px;background:#202622;padding:14px 0;isolation:isolate}
.gallery-strip{display:flex;gap:12px;width:max-content;animation:gallery-drift 32s linear infinite;filter:blur(4px);opacity:.6}
.gallery-strip:nth-child(2){animation-direction:reverse;animation-duration:38s;margin:12px 0}
.gallery-strip img,.gallery-tile{width:120px;height:76px;object-fit:cover;display:block;flex:none;background:linear-gradient(135deg,#343e37,#647266,#29312d);border-radius:4px}
.gallery-cover-label{position:absolute;inset:0;display:grid;place-items:center;background:#10111255;font-size:15px;color:#ddd}
.gallery-page main{max-width:1100px;margin:120px auto;padding:0 28px}
.gallery-page h1{font-size:clamp(32px,5vw,58px);font-weight:400;letter-spacing:-.035em}
.gallery-back{position:fixed;top:30px;right:32px;color:#b9c0ba;font-size:14px}
.photo-collection{columns:2;column-gap:24px;color:#aeb6af;line-height:1.7}
.photo-collection figure{break-inside:avoid;margin:0 0 28px}
.photo-collection img{width:100%;height:auto;border-radius:5px}
@keyframes gallery-drift{to{transform:translateX(calc(-50% - 6px))}}
@media(max-width:699px){.hobby-stories{grid-template-columns:1fr;gap:32px}.photo-collection{columns:1}}
@media(prefers-reduced-motion:reduce){.gallery-strip{animation:none}}
/* Keep cover photos small despite the full-width content-image rule. */
.portfolio-content .gallery-strip img{width:120px;height:76px;object-fit:cover;max-width:none}
.gallery-page h2{font-size:24px;font-weight:400;margin:44px 0 24px}
.gallery-cover{background:#202020}
.gallery-strip{filter:grayscale(1) blur(4px)}
.gallery-tile{background:linear-gradient(135deg,#343434,#646464,#292929)}
.gallery-cover-label{background:#10101055}
.photo-collection video{display:block;width:100%;border-radius:5px}
.photo-collection a{display:block}
.video-hint{display:block;font-size:13px;color:#aaa;margin-top:8px}
#gallery-viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:76px 24px 24px;border:0;background:#101010;color:#eee}
#gallery-viewer::backdrop{background:#101010}
#gallery-close{position:absolute;right:28px;top:28px;font-size:14px}
#gallery-media{height:100%;display:flex;align-items:center;justify-content:center}
#gallery-media img,#gallery-media video{max-width:100%;max-height:100%;object-fit:contain}
body:has(#gallery-viewer[open]){overflow:hidden}

/* Separate ordered photo and video columns. */
.fencing-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.fencing-columns .photo-collection{columns:1}
.fencing-columns header{min-height:100px;padding-top:20px}
.fencing-columns h2{margin:0 0 8px}
.fencing-columns header .video-hint{margin:0}
@media(max-width:699px){.fencing-columns{grid-template-columns:1fr;gap:24px}.fencing-columns header{min-height:auto;padding:16px 0 24px}}

/* Read Magic Gallery photos across each row in source order. */
.magic-gallery-page .photo-collection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;gap:28px 24px;columns:auto;align-items:start}
.magic-gallery-page .photo-collection figure{margin:0;min-width:0}
@media(max-width:699px){.magic-gallery-page .photo-collection{grid-template-columns:1fr}}

/* Let each Gansu column stack without gaps from the adjacent portrait. */
.magic-gallery-page .gansu-collection{align-items:start}
.gansu-column{display:flex;flex-direction:column;gap:28px;min-width:0}
.gansu-column img{display:block}
@media(max-width:699px){.gansu-column{display:contents}}

/* Stack Inner Mongolia photos independently of adjacent image heights. */
.magic-gallery-page .compact-collection{align-items:start}
.compact-gallery-column{display:flex;flex-direction:column;gap:28px;min-width:0}
.compact-gallery-column img{display:block}
@media(max-width:699px){.compact-gallery-column{display:contents}}

/* Gallery previews and shared expansion. */
.hobby-stories article>h3:first-child{margin-top:0}
.gallery-cover{height:260px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 12px}
.gallery-strip{display:flex;flex-direction:column;gap:12px;width:auto;height:max-content;animation:gallery-vertical-drift 28s linear infinite;will-change:transform}
.gallery-strip:nth-child(2){margin:0;animation-direction:normal;animation-duration:28s}
.gallery-strip-cycle{display:flex;flex-direction:column;gap:12px}
.portfolio-content .gallery-strip img{width:100%;height:130px;max-width:100%;object-fit:cover}
@keyframes gallery-vertical-drift{to{transform:translateY(calc(-50% - 6px))}}
.gallery-transition{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#101010;color:#ddd;overflow:hidden;transform-origin:top left}
.gallery-transition::backdrop{background:#10101088}
.gallery-transition iframe{display:block;width:100%;height:100%;border:0;background:#101010}
.gallery-transition-label{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:#10101044;color:#ddd;font-size:15px}
@media(prefers-reduced-motion:reduce){.gallery-strip{animation:none}}

.gallery-transition>.gallery-return-preview{position:absolute;inset:0;height:100%;width:100%;box-sizing:border-box;border-radius:inherit;pointer-events:none}
.gallery-return-preview .gallery-strip img{width:100%;height:130px;max-width:100%;object-fit:cover}

/* Keep moving layers small and avoid expensive animated blur surfaces. */
.gallery-strip{filter:grayscale(1);will-change:auto;animation-play-state:paused}
.gallery-cover.preview-visible .gallery-strip{animation-play-state:running}
.gallery-is-open .hobby-stories .gallery-strip{animation-play-state:paused}
.gallery-return-preview .gallery-strip{animation-play-state:running}
.gallery-cover{contain:layout paint}

/* A gallery owns its camera motion; disable the generic dialog entrance. */
.gallery-transition[open]{animation:none;box-shadow:none}
.gallery-transition::backdrop{backdrop-filter:none}

/* Equal physical speed, opposite directions; phase is preserved across zooms. */
.gallery-strip{animation-direction:reverse}
.gallery-strip:nth-child(2){animation-direction:normal}
.gallery-transition::backdrop{background:rgb(16 16 16 / var(--gallery-dim,0))}

.gallery-motion-plane{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* Readable descriptions beneath desol section headings. */
#subpage[data-section="desol"] .section-kicker{font-size:18px;line-height:1.6;letter-spacing:.03em}
@media(max-width:699px){#subpage[data-section="desol"] .section-kicker{font-size:17px}}

/* Align both task previews and their captions without cropping either document. */
.task-gallery figure>a{aspect-ratio:8/5;display:flex;align-items:flex-start}
.task-gallery figure img{height:100%;object-fit:contain;object-position:top left;background:transparent}
#subpage[data-section="dreamcatcher"] .section-kicker{font-size:18px;line-height:1.6;letter-spacing:.03em}
@media(max-width:699px){#subpage[data-section="dreamcatcher"] .section-kicker{font-size:17px}.task-gallery figure>a{aspect-ratio:auto}.task-gallery figure img{height:auto}}

/* Dates are quiet context above project headings. */
.project-year,.portfolio-content .project-year{font-size:13px;line-height:1.4;letter-spacing:.08em;color:rgba(230,235,231,.45);font-weight:400;margin:0 0 10px}
.project-year[hidden]{display:none}
.portfolio-content .project-year{margin-top:48px;margin-bottom:8px}
.portfolio-content .project-year+h3{margin-top:0}
#subpage[data-section="dreamcatcher"] #subpage-summary{font-size:clamp(16px,1.4vw,20px);white-space:pre-line}
/* A link's inline line box must not add baseline space to one caption. */
.task-gallery figcaption{display:block;font-size:15px;line-height:1.65;margin:10px 0 0;padding:0}
.task-gallery figcaption a{display:block;font:inherit;line-height:inherit;margin:0;padding:0}

/* Shared rows align document previews, captions, and following rows together.
   Bottom-aligned 8:5 crops remove the source screenshots' black top padding.
   Full-resolution originals remain available through each preview link. */
.portfolio-content .aligned-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;align-items:start}
.portfolio-content .aligned-previews>figure{margin:0;min-width:0}
.portfolio-content .aligned-previews>figure>a{display:block;position:relative;aspect-ratio:8/5;overflow:hidden;border-radius:5px;background:#171a18}
.portfolio-content .aligned-previews>figure>a>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;border-radius:0}
.portfolio-content .aligned-previews figcaption{margin:10px 0 0;padding:0;font-size:15px;line-height:1.65}
.portfolio-content .aligned-previews figcaption a{display:block;font:inherit;line-height:inherit;margin:0;padding:0}
@media(max-width:699px){.portfolio-content .aligned-previews{grid-template-columns:1fr}}

#subpage[data-section="background"] #subpage-summary{max-width:none;gap:8px 12px}

/* Keep glyph shapes stable across preview and heading sizes; rasterize resting headings normally. */
.section-preview li,.node-title,#subpage .shared-item{font-optical-sizing:none}

/* System UI fonts can switch text/display faces with point size, even when
   optical sizing is disabled. Use one scalable face for all traveling text. */
[data-assemble],.node-title,.identity-title,.section-preview li,#subpage .shared-item{font-family:Helvetica,Arial,sans-serif;font-optical-sizing:none}