:root{--paper:var(--vi-surface);--ink:var(--vi-ink);--muted:var(--vi-text-secondary);--gutter:1.4vw;--axis:32%;--index-width:17%;--trigger:45vh;--ease:cubic-bezier(.22,1,.36,1);color:var(--ink);background:var(--paper);font-family:var(--vi-font-ui);font-synthesis:none}*{box-sizing:border-box}html{scrollbar-width:thin;scroll-behavior:auto}body{margin:0;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{border:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--vi-ink);outline-offset:5px}img{display:block;width:100%;height:auto}figure,p{margin:0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-200%);padding:12px;background:var(--vi-ink);color:white;z-index:100}.skip-link:focus{transform:none}.code-header{position:fixed;inset:0 0 auto;z-index:20;pointer-events:none}.code-header a{pointer-events:auto}.back-link,.index-return{position:absolute;top:24px;left:var(--gutter);font-size:11px}.index-return{display:none}.works-title{position:absolute;top:64px;left:var(--gutter);font-size:clamp(90px,10.5vw,184px);line-height:.84;letter-spacing:-.075em;font-weight:700}.about-link{position:absolute;left:var(--axis);top:24px;font-size:14px;color:var(--vi-text-secondary);font-weight:600}.about-link:hover{color:var(--vi-ink)}.github-link{position:absolute;right:var(--gutter);top:24px;font-size:14px;font-weight:600}.section-caption{position:absolute;left:var(--gutter);top:calc(72px + 9vw);font-size:11px;color:var(--vi-text-secondary);letter-spacing:.06em}.project-index{position:fixed;left:var(--axis);top:var(--trigger);width:var(--index-width);z-index:12}.index-item{display:block;width:100%;text-align:left;line-height:1.5;min-height:27px;padding:4px 19px 4px 0;font-size:clamp(10px,.86vw,15px);font-weight:600;color:var(--muted);transition:color .2s;white-space:nowrap;letter-spacing:-.025em}.index-item[aria-current],.index-item:hover{color:var(--vi-ink)}.index-cursor{position:absolute;top:0;right:0;height:27px;display:flex;align-items:center;font-size:9px;pointer-events:none;transition:transform .72s var(--ease)}#catalog{padding-top:var(--trigger);padding-bottom:18vh}.project-row{display:grid;grid-template-columns:25% 26% 49%;padding:0 var(--gutter) 16vh;min-height:70vh;scroll-margin-top:var(--trigger)}.project-left{grid-column:1;padding-right:3.5vw}.project-right{grid-column:3;display:flex;align-items:flex-start;gap:12px}.project-media{display:block;position:relative;overflow:hidden;background:var(--vi-conversation)}.project-media img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}.project-media:hover img{transform:scale(1.025)}.project-media:after{content:'↗';position:absolute;right:12px;bottom:9px;font-size:21px;opacity:0;transition:opacity .2s}.project-media:hover:after{opacity:1}.secondary-frame{width:86%;aspect-ratio:1.28;background:var(--project-color)}.secondary-frame img{object-fit:contain}.primary-frame{width:100%;aspect-ratio:1.6;background:var(--project-color);padding:4%}.project-number{font-size:clamp(44px,4.2vw,72px);line-height:1;letter-spacing:-.075em;font-weight:600;margin-top:22px}.project-row:nth-child(even) .project-left{display:flex;flex-direction:column;align-items:flex-end}.mobile-name{display:none}.catalog-end{padding:0 var(--gutter);font-size:11px;color:var(--vi-text-secondary);display:flex;justify-content:space-between;max-width:25%}.code-footer{position:fixed;left:var(--axis);right:var(--gutter);bottom:21px;z-index:15;display:flex;align-items:center;justify-content:space-between;pointer-events:none;font-size:12px}.code-footer a{font-weight:700;pointer-events:auto;letter-spacing:-.045em}.code-footer>span{font-size:9px;color:var(--vi-text-secondary);letter-spacing:.055em}.scroll-progress{position:fixed;right:0;top:0;width:3px;height:100dvh;z-index:30;pointer-events:none}.scroll-progress span{display:block;transform:scaleY(0);transform-origin:top;width:100%;height:100%;background:var(--vi-ink)}.image-transition{position:fixed;z-index:50;pointer-events:none;max-width:none;object-fit:contain}.loading{padding:0 var(--gutter);font-size:13px;line-height:1.8}.loading button{margin-top:15px;text-decoration:underline}
.project-media .index-video{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
/* Focus shares the fixed index; only the left filmstrip participates in document flow. */
body[data-mode=focus] .back-link,body[data-mode=focus] .section-caption{display:none}body[data-mode=focus] .index-return{display:block}body[data-mode=focus] .works-title{top:24px;left:var(--axis);font-size:14px;line-height:1;letter-spacing:-.025em}body[data-mode=focus] .about-link{left:calc(var(--axis) + 53px)}.filmstrip{padding:var(--trigger) 0 55vh;margin-left:var(--gutter);width:24%;}.focus-project{display:grid;grid-template-columns:45% 55%;gap:0;padding-bottom:12vh}.focus-project-number{position:sticky;top:var(--trigger);align-self:start;font-size:clamp(40px,3.8vw,65px);font-weight:600;line-height:1;letter-spacing:-.065em}.focus-thumbnails{min-width:0}.frame-step{margin:0 0 18px;scroll-margin-top:var(--trigger)}.frame-step button{display:block;position:relative;width:100%;background:var(--project-color);overflow:hidden}.frame-step img{aspect-ratio:1.4;object-fit:contain;opacity:.55;transition:opacity .35s}.frame-step[data-active=true] img,.frame-step button:hover img{opacity:1}.frame-step[data-active=true] button:after{content:'';position:absolute;inset:0;border:1px solid var(--vi-ink);pointer-events:none}.frame-step figcaption{font-size:9px;color:var(--vi-text-secondary);margin-top:6px;letter-spacing:.04em}.focus-project-next{padding-top:12px;font-size:10px;color:var(--vi-text-secondary);border-top:1px solid var(--vi-conversation)}.focus-project-next button{text-align:left;line-height:1.8}.focus-meta{position:fixed;left:51.2%;right:var(--gutter);top:80px;z-index:14;font-size:12px}.focus-meta-top{display:flex;justify-content:space-between;gap:18px;align-items:baseline}.focus-subtitle{font-size:14px;font-weight:400;letter-spacing:-.02em;line-height:1.5}.project-links{display:flex;gap:18px;white-space:nowrap;font-size:11px}.project-links a{border-bottom:1px solid var(--vi-line);padding-bottom:3px}.project-info{margin-top:10px;max-width:100%;color:var(--vi-text-secondary);font-size:10px}.project-info summary{cursor:pointer;list-style:none;display:inline-block;line-height:2}.project-info summary:after{content:' ＋';padding-left:8px}.project-info[open] summary:after{content:' −'}.project-info[open]{background:var(--vi-overlay);backdrop-filter:blur(12px);padding:14px;margin:-4px -14px 0;border-bottom:1px solid var(--vi-line)}.info-body{max-height:55vh;overflow-y:auto;padding:18px 0 6px;color:var(--vi-ink);font-size:12px;line-height:1.9}.info-body p{margin-bottom:12px}.info-body ul{padding-left:17px}.info-body .info-boundary{color:var(--vi-text-secondary);font-size:11px}.focus-stage{position:fixed;left:51.2%;right:var(--gutter);top:24vh;bottom:62px;pointer-events:none}.stage-frame{position:absolute;inset:0;display:flex;align-items:flex-end;opacity:0;transform:translateY(16px);transition:opacity .48s var(--ease),transform .7s var(--ease)}.stage-frame.is-active{opacity:1;transform:none;z-index:1}.stage-frame img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.frame-counter{position:fixed;right:var(--gutter);bottom:43px;font-size:9px;color:var(--vi-text-secondary);letter-spacing:.06em}.filmstrip-end{font-size:11px;line-height:2;padding:20px 0}.filmstrip-end a{border-bottom:1px solid var(--vi-text-secondary)}body[data-mode=focus] .code-footer>span{visibility:hidden}
@media(min-width:1700px){.index-item{min-height:32px}.index-cursor{height:32px}}
@media(max-width:1000px) and (min-width:701px){:root{--index-width:18.2%}.index-item{font-size:9px}.focus-meta{top:75px}.focus-subtitle{font-size:12px}.project-links{gap:10px;font-size:10px}.project-info{font-size:9px}.project-row{min-height:60vh}.works-title{font-size:12vw}}
@media(max-width:700px){:root{--gutter:20px;--axis:20px;--trigger:235px}.back-link,.index-return{top:20px}.about-link{top:20px;left:auto;right:106px;font-size:12px}.github-link{top:20px;font-size:12px}.works-title{font-size:94px;top:65px}.section-caption{top:159px;font-size:10px}.project-index{top:190px;left:20px;right:20px;width:auto;background:var(--vi-overlay);backdrop-filter:blur(8px)}.index-items{display:flex;gap:18px;overflow:auto;scrollbar-width:none}.index-item{width:auto;min-width:max-content;font-size:10px;padding:6px 0;line-height:1.7}.index-item[aria-current]{border-bottom:1px solid var(--vi-ink)}.index-cursor{display:none}#catalog{padding-top:260px}.project-row{display:flex;flex-direction:column;min-height:0;padding:0 20px 74px}.project-left,.project-row:nth-child(even) .project-left{display:flex;align-items:baseline;flex-direction:row;justify-content:space-between;padding:0;margin-bottom:16px}.secondary-frame{display:none}.project-number{font-size:33px;margin:0}.mobile-name{display:block;font-size:10px;font-weight:600}.project-right{display:block}.primary-frame{aspect-ratio:1.4}.catalog-end{max-width:100%;padding:0 20px}.code-footer{left:20px;right:20px;bottom:17px;background:linear-gradient(var(--vi-canvas-clear),var(--vi-surface) 50%);padding-top:15px}.code-footer>span{font-size:8px}.filmstrip{width:auto;padding-top:240px;margin:0 20px;padding-bottom:50vh}.focus-project{display:block;padding-bottom:70px}.focus-project-number{position:static;display:flex;gap:14px;align-items:baseline;font-size:36px;margin-bottom:20px}.focus-project-number .mobile-name{font-size:12px;letter-spacing:0}.frame-step{margin-bottom:28px;scroll-margin-top:235px}.frame-step img{aspect-ratio:auto;min-height:180px;max-height:55vh;opacity:1}.frame-step figcaption{font-size:9px}.focus-stage{display:none}.focus-meta{left:20px;right:20px;top:71px;min-height:70px;background:var(--vi-overlay)}.focus-meta-top{align-items:flex-start;gap:8px}.focus-subtitle{font-size:12px;max-width:63%}.project-links{font-size:10px;gap:12px}.project-info{font-size:9px;margin-top:6px}.project-info[open]{margin-top:-8px}.info-body{max-height:46vh}.frame-counter{bottom:20px}.focus-project-next{margin-top:30px;font-size:12px}body[data-mode=focus] .works-title{left:107px;top:21px;font-size:12px}body[data-mode=focus] .about-link{left:auto}body[data-mode=focus] .project-index{top:165px}body[data-mode=focus] .code-header{height:225px;background:linear-gradient(var(--vi-surface) 85%,var(--vi-canvas-clear))}.image-transition{display:none}}
@media(max-height:650px) and (min-width:701px){:root{--trigger:40vh}.works-title{font-size:90px;top:45px}.section-caption{top:133px}.index-item{min-height:23px;padding-top:2px;padding-bottom:2px}.index-cursor{height:23px}.focus-meta{top:65px}.focus-stage{top:31vh}.code-footer{bottom:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.focus-subtitle,.mobile-name{margin:0}
#main:focus{outline:none}
@media(max-width:700px){body[data-mode=focus] .code-header{height:58px;background:var(--vi-surface)}#focus-view:before{content:'';position:fixed;inset:0 0 auto;height:220px;background:linear-gradient(var(--vi-surface) 94%,var(--vi-canvas-clear));z-index:10;pointer-events:none}.focus-meta{z-index:14}.project-index{z-index:12}}
/* Original navigation positions; the fields return lives at the bottom left. */
body .code-header .works-title{left:var(--gutter);right:auto;transform:none;top:64px;font-size:clamp(90px,10.5vw,184px);line-height:.84;letter-spacing:-.075em;transition:font-size .85s var(--ease),top .85s var(--ease),color .5s}
body .code-header .github-link{left:auto;right:var(--gutter);top:24px;font-size:14px}
body .code-header .about-link{left:var(--axis);right:auto;top:24px;font-size:14px;line-height:1;letter-spacing:-.025em;transition:font-size .85s var(--ease),top .85s var(--ease),color .5s,letter-spacing .85s var(--ease)}
body .code-header .section-caption{left:var(--gutter);transform:none;white-space:nowrap}
body[data-mode=focus] .code-header .works-title,body[data-mode=about] .code-header .works-title{left:var(--axis);top:24px;font-size:14px;letter-spacing:-.025em;line-height:1}
body[data-mode=about] .code-header .works-title{left:28%}
body[data-mode=focus] .code-header .about-link{left:calc(var(--axis) + 53px)}
body[data-mode=about] .code-header .about-link{left:var(--axis);top:64px;font-size:clamp(90px,10.5vw,184px);letter-spacing:-.075em;color:var(--ink);font-weight:700;line-height:.84}
body[data-mode=about] .section-caption{display:none}
body[data-mode=about]>.project-index{display:none}
.about-view{padding:38vh var(--gutter) 140px;min-height:100vh}
.about-grid{display:grid;grid-template-columns:24% 43% 22%;justify-content:space-between;gap:3%}
.section-label{font-size:10px;color:var(--vi-text-secondary);font-weight:400;letter-spacing:.045em;margin:0 0 28px}
.practice-column p{font-size:14px;line-height:1.95;margin:0 0 22px;max-width:310px}.practice-column .practice-lead{font-size:26px;line-height:1.55;letter-spacing:-.055em}
.capability-list>div{display:flex;gap:14px;margin-bottom:22px}.capability-list>div>span{font-size:11px;color:var(--vi-text-secondary);padding-top:5px}.capability-list p{font-size:14px;line-height:1.9}.capability-list strong{font-weight:600}.capability-footnote,.credits-note{font-size:11px;line-height:1.85;color:var(--vi-text-secondary);margin-top:25px}.credits-column>p{font-size:13px;line-height:1.9}.award{border-top:1px solid var(--vi-line);padding-top:24px;margin-top:27px;position:relative}.award-marker{position:absolute;right:0;top:24px}.award h3{font-size:15px;margin:0 0 10px}.award p{font-size:11px;color:var(--vi-text-secondary);line-height:1.8}.award .award-name{font-size:13px;color:var(--vi-action-hover);margin:20px 0}.award a{font-size:11px;border-bottom:1px solid var(--vi-text-secondary);padding-bottom:4px;overflow-wrap:anywhere}.credits-column .credits-note{font-size:11px;color:var(--vi-text-secondary)}
.surface-transition{position:fixed;inset:0;z-index:18;overflow:hidden;background:white;pointer-events:none}.surface-transition .project-index{display:block!important}.surface-transition [hidden]{display:none!important}.navigation-feedback{position:fixed;bottom:52px;right:20px;font-size:12px;background:white;padding:12px;z-index:40}
/* Mixed image ratios are derived from each source capture, never forced to landscape. */
.project-left,.project-row:nth-child(even) .project-left{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-right:3vw}.project-left .project-media{width:100%;padding:0;aspect-ratio:auto}.project-left .project-media:nth-child(even){width:76%;align-self:flex-end}.project-number{order:0;margin:0 0 10px}.project-left .mobile-name{order:0}.project-left .project-media{order:1}.project-right{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.project-media.primary-frame,.project-media.secondary-frame{padding:0;aspect-ratio:auto;background:var(--vi-conversation)}.project-media img{height:auto;aspect-ratio:var(--image-ratio);object-fit:contain}.project-media.is-portrait{width:100%}.project-row{min-height:0;padding-bottom:14vh}.frame-step img{height:auto;aspect-ratio:var(--image-ratio);object-fit:contain}.stage-frame img{object-position:center center}.focus-stage{top:22vh;bottom:62px}
@media(max-width:700px){body .code-header .github-link{left:auto;right:20px;top:21px;font-size:12px}body .code-header .about-link{left:auto;right:106px;top:21px;font-size:12px}body .code-header .works-title{top:68px;font-size:92px}body .code-header .section-caption{top:159px}body[data-mode=focus] .code-header .works-title,body[data-mode=about] .code-header .works-title{top:21px;left:20px;font-size:12px}body[data-mode=focus] .code-header .works-title{left:107px}body[data-mode=focus] .code-header .about-link{left:auto}body[data-mode=about] .code-header .about-link{left:20px;right:auto;top:69px;font-size:92px}.about-view{padding:230px 20px 110px}.about-grid{display:flex;flex-direction:column;gap:40px}.practice-column p{max-width:100%}.practice-column .practice-lead{font-size:27px}.capability-list p{font-size:14px}.project-left,.project-row:nth-child(even) .project-left{flex-direction:row;align-items:baseline;padding:0;gap:10px}.project-left .project-media{display:none}.project-number{font-size:30px}.project-right{grid-template-columns:1fr 1fr;gap:12px}.project-right .project-media:first-child{grid-column:1/-1}.project-left .mobile-name{display:block}.frame-step img{max-height:none;min-height:0}.project-row{padding-bottom:75px}.surface-transition .about-view{padding-top:230px}}
@media(max-height:650px) and (min-width:701px){body .code-header .works-title{font-size:90px;top:55px}body[data-mode=focus] .code-header .works-title,body[data-mode=about] .code-header .works-title{font-size:14px;top:24px}body[data-mode=about] .code-header .about-link{font-size:90px;top:55px}}

body .back-link{position:fixed;display:block;left:var(--gutter);top:auto;bottom:21px;z-index:25;font-size:11px;line-height:1.4;background:var(--vi-surface);padding:4px 0}
@media(max-width:700px){body .back-link{bottom:17px}.code-footer{left:auto}.code-footer>span{display:none}}
/* Compact project header and mixed image/video gallery. */
.project-media:after{content:none}
.focus-meta-top{display:block}.focus-subtitle{font-size:18px;line-height:1.4;font-weight:400;padding-right:135px;max-width:none}
.project-links{position:absolute;top:0;right:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:12px}
.project-links a{position:relative;border:0;padding:0 0 3px;line-height:1.4}
.project-links a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.project-links a:hover:after,.project-links a:focus-visible:after{transform:scaleX(1)}
.project-info{margin-top:10px}.project-info summary{display:grid;place-items:center;width:32px;height:32px;line-height:1;margin-left:-8px;color:var(--vi-text-secondary);list-style:none}
.project-info summary:after,.project-info[open] summary:after{content:none}.project-info summary::-webkit-details-marker{display:none}
.info-toggle{display:block;font-size:21px;font-weight:300;transition:transform .25s}.project-info[open] .info-toggle{transform:rotate(45deg)}
.project-info[open]{margin:10px 0 0;padding:0;background:var(--vi-overlay)}.project-info[open] .info-body{padding:16px 14px 6px}
.stage-frame{pointer-events:none}.stage-frame video{width:100%;height:auto;max-height:100%;align-self:center;object-fit:contain}.stage-frame.is-active video{pointer-events:auto}
.film-video{display:none}.video-fallback{position:absolute;right:10px;bottom:10px;z-index:2;font-size:12px;background:white;padding:8px;pointer-events:auto}
@media(max-width:700px){.focus-subtitle{font-size:16px;padding-right:105px}.project-links{font-size:11px;gap:8px}.project-info{margin-top:4px}.project-info[open]{margin-top:4px}.frame-step.has-video>button{display:none}.film-video{display:block;width:100%;height:auto;aspect-ratio:var(--image-ratio)}.frame-step.has-video{position:relative}.focus-meta{min-height:80px}}

.stage-frame .video-fallback{pointer-events:none}.stage-frame.is-active .video-fallback{pointer-events:auto}

/* PersonalWeb VI: shared interaction color; project media keeps its own palette. */
body[data-mode] :is(a,button,summary):focus-visible{outline-color:var(--vi-focus)}
body[data-mode] :is(.about-link,.github-link,.back-link,.project-links a,.project-index button):hover{color:var(--vi-focus)}
.index-item[aria-current]{color:var(--vi-focus)}

.index-cursor{color:var(--vi-focus)}
.scroll-progress span{background:var(--vi-focus)}
/* Architecture previews share the existing gallery and remain available on mobile. */
.project-left .project-media.architecture-frame{width:100%;align-self:stretch;background:var(--vi-surface)}
@media(min-width:701px){
  .project-row:has(.preview-align-left) .project-left{align-self:start}
  .project-media.preview-align-left img{height:var(--preview-height,auto);aspect-ratio:auto;object-fit:cover;object-position:center top}
}
@media(max-width:700px){.project-left,.project-row:nth-child(even) .project-left{flex-wrap:wrap}.project-left .project-media.architecture-frame{display:block;flex-basis:100%;width:100%;margin-top:8px}.project-left .architecture-frame img{width:100%;height:auto}}

/* Catalog composition: covers lead, numbers occupy the image group's whitespace. */
#catalog .project-row{position:relative}
#catalog .project-row .project-left{align-self:start}
#catalog .project-row .project-right{align-self:start;align-content:start}
/* Secondary display tier: 80px on wide layouts, below the Project masthead. */
#catalog .project-row .project-number{position:absolute;width:max-content;margin:0;font-size:clamp(50px,5.56vw,80px);line-height:.86;letter-spacing:normal;font-weight:500;z-index:1}
#catalog .project-row .project-left>.project-media.cover-frame{width:100%;align-self:flex-start}
#catalog .project-row .project-number:hover{color:var(--vi-focus)}
@media(max-width:700px){
  #catalog .project-row .project-left{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 16px;width:100%;align-items:center}
  #catalog .project-row .project-number{position:static;grid-column:1;order:1;font-size:var(--nav-small);align-self:center;display:flex;align-items:center;min-width:44px;min-height:44px}
  #catalog .project-row .mobile-name{grid-column:2;order:1;max-width:none;text-align:right;align-self:center}
  #catalog .project-row .project-left>.project-media{display:block;grid-column:1/-1;order:2;width:100%;margin-top:0}
  #catalog .project-row .project-left>.project-media.cover-frame{order:0;grid-column:1/-1}
}
/* Only the opening numeral leads its cover on the single-column mobile flow. */
@media(max-width:700px){
  #catalog .project-row:first-child .project-number,
  #catalog .project-row:first-child .mobile-name{order:-1}
}