.portfolio-video-host{position:relative;width:100%;height:100%;overflow:hidden}
.portfolio-video-host>iframe,.portfolio-video-host>video{display:block;width:100%;height:100%;border:0;object-fit:contain}
.carousel-video-host.portfolio-video-host{position:absolute;inset:0}
.carousel-video-host video{object-fit:cover}
.project-film>.portfolio-video-host{position:absolute;inset:0}
#lightbox-video{width:min(84vw,1400px);height:76vh;z-index:1}
#lightbox-video[hidden],#project-image[hidden]{display:none!important}
@media(max-width:760px){#lightbox-video{width:90vw;height:65vh}}

.carousel-video-host{pointer-events:none}.lightbox-close,.lightbox-prev,.lightbox-next,.lightbox-footer{z-index:3}

/* Give the archive control its own space and a soft moving tick wave. */
.rail-navigation.hover-navigation{width:min(860px,94%);margin-top:64px;padding:18px 30px 17px}
.hover-navigation .rail-progress,.hover-navigation .rail-progress>input{height:36px;min-height:36px}
.hover-navigation .rail-progress:before{display:none}
.hover-navigation .rail-progress>span{height:36px}
.zoom-ticks.animated-ticks,.rail-ticks.animated-ticks{position:absolute;inset:0;height:100%;display:flex;align-items:center;justify-content:space-between;background:none;mask-image:none;pointer-events:none}
.animated-ticks .ruler-tick{display:block;flex:none;width:1px;height:100%;background:currentColor;transform-origin:center;pointer-events:none}
.zoom-ticks.animated-ticks{color:#333;left:1px;right:1px}
.rail-ticks.animated-ticks{color:#333}
@media(min-width:761px) and (hover:hover){.material-toolbar{grid-template-columns:minmax(0,1fr) minmax(320px,620px) minmax(0,1fr)}}
@media(max-width:760px), (max-width:1100px) and (hover:none){.rail-navigation.hover-navigation{width:100%;margin-top:44px;padding:17px 20px}.animated-ticks .ruler-tick:nth-child(even){display:none}}

.study-video-host.portfolio-video-host{position:absolute;inset:0;opacity:0;pointer-events:none;background:#111;transition:opacity .55s ease}
.study-video-host.is-playing{opacity:1}
.title-index-preview[data-video-state=unavailable]:after{content:'VIDEO PREVIEW UNAVAILABLE';position:absolute;left:12px;bottom:12px;background:#111b;color:#fff;font-size:8px;padding:5px 8px;border-radius:4px;pointer-events:none}
@media(prefers-reduced-motion:reduce){.study-video-host{transition:none}}

.other-page{padding-top:145px;min-height:100svh}.other-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;padding:20px 6% 0}.other-heading h1{font-size:48px;font-weight:400;letter-spacing:-2px;margin:0}.other-status{font-size:9px;letter-spacing:1px;color:#888;margin:0 0 8px}.other-page .title-index{height:auto;min-height:calc(100svh - 300px);border-top:0;background:transparent;padding:50px 6% 75px}.other-page #other-projects{min-width:0}.other-page .archive-footer{margin-top:25px}header nav a{min-width:0}
@media(max-width:760px), (max-width:1100px) and (hover:none){header nav{gap:4px}header nav a{padding:10px 5px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.other-page{padding-top:140px}.other-heading{padding:18px 20px 0;align-items:start}.other-heading h1{font-size:38px}.other-status{max-width:120px;text-align:right;line-height:1.8;font-size:7px}.other-page .title-index{padding:30px 20px 45px;min-height:0}.other-page .title-index-list{max-height:235px}.other-page .archive-footer{margin-top:5px}}
header nav a[hidden]{display:none!important}

/* The first frame stays behind the naturally scrolling material study. */
.home-handoff{position:relative;isolation:isolate}
.home-handoff>.opening{position:sticky;top:var(--hero-lock-top,0px);z-index:0}
.material{background:#f5f5f5;color:#171717}
.home-handoff>.material{position:relative;z-index:2;isolation:isolate;background:transparent}
.material h2,.material h2 i{color:#171717}
.material>.section-label,.material .material-copy p,.material .material-study-label,.material .material-selection-label{color:#666666}
.rail-navigation.hover-navigation,.material-toolbar>.zoom-dial,.material-toolbar>.zoom-dial.is-adjusting{background:#ffffff88;border-color:#1112;box-shadow:inset 0 1px 0 #fff9}
.material .zoom-value{color:#333}
.material .zoom-position{background:#333;box-shadow:0 0 7px #1112}
.material .zoom-stops button{color:#999}
.material .zoom-stops button:hover,.material .zoom-stops button:focus-visible{color:#333}
.material .zoom-dial:focus-within{outline-color:#111}

/* Shared header identity and centered page navigation. */
header .logo{display:inline-flex;align-items:center;justify-self:start;line-height:0}header .logo img{display:block;width:44px;height:44px;max-width:none}header nav{justify-content:center} @media(max-width:760px){header .logo img{width:36px;height:36px}header nav{justify-content:center;gap:24px}}

/* Keep the archive light: rounded clips, without backdrop blur. */.archive .rail-viewport{mask-image:none}.archive .rail-card img,.archive .rail.has-focus .rail-card:not(.is-focused) img{filter:none!important}.archive .rail-card,.archive .rail-visual{backdrop-filter:none}.archive-heading h2{font-size:clamp(30px,3.15vw,52px);letter-spacing:-1.5px}

/* Full-width archive; its text follows the material study's alignment. */
.archive{display:flex;flex-direction:column;height:auto;min-height:calc(100svh - 94px);padding:64px 0 42px;gap:32px}
.archive>.section-label,.archive>.rail-footer{width:min(96%,1600px);margin:0 auto}
.archive-heading{width:min(96%,1600px);margin:0 auto;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:32px}
.archive-heading h2{font-size:48px;line-height:1;letter-spacing:-2px;white-space:nowrap}
.archive-heading h2 br{display:none}.archive-heading h2 i:before{content:' '}
.archive-heading p{margin:0 0 0 auto}.archive-heading .archive-count{margin:0;white-space:nowrap}
.archive-gallery{width:100%;align-self:stretch;min-width:0}
.archive .rail-viewport{width:100%}
.archive .rail-navigation.hover-navigation{width:min(860px,calc(100% - 40px));margin:48px auto 0;align-self:center}
.archive>.rail-footer{padding-top:20px}
@media(max-width:760px), (max-width:1100px) and (hover:none){
 .archive{padding:60px 0 48px;gap:28px;min-height:0}
 .archive>.section-label,.archive>.rail-footer,.archive-heading{width:calc(100% - 40px)}
 .archive-heading{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
 .archive-heading h2{font-size:clamp(28px,7.8vw,44px);letter-spacing:-1.5px}
 .archive-heading p{grid-column:1;grid-row:2;margin:0;text-align:left;max-width:none}
 .archive-heading .archive-count{grid-column:2;grid-row:2}
 .archive .rail-navigation.hover-navigation{margin-top:36px}
}

/* Explicit gallery rows never leave an unpaired half-row. */
.project-image-grid{display:flex;flex-direction:column;gap:40px}.project-image-row{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}.project-image-row.is-pair{grid-template-columns:repeat(2,minmax(0,1fr))}.project-image-row .project-figure{width:100%;min-width:0;margin:0}.project-image-row img{height:auto;max-height:none;object-fit:contain}
@media(max-width:760px), (max-width:1100px) and (hover:none){.project-image-row.is-pair{grid-template-columns:minmax(0,1fr)}.project-image-grid,.project-image-row{gap:22px}}

.material[hidden],#image-field[hidden]{display:none!important}.opening.no-hero{min-height:440px;height:60svh}.portfolio-empty{min-height:85svh;padding:180px 6% 80px;display:flex;flex-direction:column;justify-content:center;gap:24px}.portfolio-empty h1{font-size:clamp(30px,5vw,64px);font-weight:400;margin:0}.portfolio-empty p,.portfolio-empty a{font-size:13px;color:#777}

/* Studies: a readable title column and a larger preview with its caption below. */
.other-page{padding-top:94px}
.other-page>.other-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.other-page .title-index{min-height:calc(100svh - 94px);padding:64px 6%;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(36px,5vw,88px);align-items:center}
.other-page .title-index-label{margin-bottom:28px;font-size:9px;color:#888}
.other-page .title-index-list{max-height:min(64svh,680px);padding:12px 20px 16px 0;scrollbar-color:#bbb transparent}
.other-page .title-entry{overflow:hidden;padding:0 0 8px;margin-bottom:4px}
.other-page .title-entry button{position:relative;display:block;width:100%;max-width:100%;font-size:clamp(42px,4.5vw,72px);line-height:1.25;letter-spacing:-2px;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip;padding:.06em .05em .2em 30px;text-align:left;transition:filter .35s,opacity .35s,color .35s}
.other-page .title-entry button:after{position:absolute;left:0;top:.55em;content:'↗';font-size:18px;margin:0;line-height:1;opacity:0}
.other-page .title-entry button.is-focused:after{opacity:1}
.other-page .title-index-list.has-focus button:not(.is-focused){filter:blur(4px);opacity:.4}
.other-page .title-preview-group{display:flex;flex-direction:column;gap:22px;align-items:stretch;justify-content:center;min-width:0;width:100%}
.other-page .title-index-preview{width:100%;aspect-ratio:1.6;border-radius:14px;align-self:stretch}
.other-page .preview-description{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;gap:20px;margin:0;max-width:none;width:100%;min-height:90px}
.other-page .preview-description>span{padding-top:4px;font-size:9px}
.other-page .preview-description p{max-width:none;min-height:0;font-size:14px;line-height:1.8}
.other-page .studies-scroll-note{margin-top:18px}
.other-page .archive-footer{margin-top:0}
@media(max-width:760px), (max-width:1100px) and (hover:none){
 .other-page{padding-top:112px}
 .other-page .title-index{display:flex;flex-direction:column;align-items:stretch;min-height:calc(100svh - 112px);padding:34px 20px 48px;gap:28px}
 .other-page .title-index-list{max-height:260px;padding:8px 12px 12px 0}
 .other-page .title-entry button{font-size:34px;line-height:1.28;letter-spacing:-1px;padding-left:25px}
 .other-page .title-entry button:after{font-size:15px}
 .other-page .title-index-label{margin-bottom:18px}
 .other-page .title-preview-group{gap:18px}
 .other-page .preview-description{grid-template-columns:38px minmax(0,1fr);gap:14px;min-height:0}
 .other-page .preview-description p{font-size:12px;line-height:1.8}
}

/* Distance-based blur preserves opaque, clean image edges. */
.detail-surface{isolation:isolate}.detail-surface>img,.detail-surface.is-inspecting>img{filter:none}.distance-blur{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:1}.is-inspecting>.distance-blur{opacity:1}.distance-blur canvas{position:absolute;inset:0;width:100%;height:100%;mask-image:radial-gradient(circle at var(--focus-x,50%) var(--focus-y,50%),transparent var(--blur-start),#000 var(--blur-end));-webkit-mask-image:radial-gradient(circle at var(--focus-x,50%) var(--focus-y,50%),transparent var(--blur-start),#000 var(--blur-end))}.detail-surface>.lens{z-index:2}.detail-surface>.material-step{z-index:4}
@media(prefers-reduced-motion:reduce){.distance-blur{transition:none}}

.archive[hidden]{display:none!important}