/* Focus is the category level. The project level retains the cards and cube. */
main{container-type:inline-size;--topline-height:88px}
.topline{height:var(--topline-height);padding-inline:clamp(24px,3.4vw,78px);position:relative;z-index:12}
.breadcrumbs{min-width:0;gap:22px;max-width:none;flex:1;overflow:visible;white-space:normal}
.breadcrumbs .section-label{color:var(--ink);font-size:16px;letter-spacing:-.025em}
.breadcrumbs .section-count{font:11px monospace;color:var(--muted)}
.breadcrumbs .stage-heading{font-size:clamp(24px,2.05vw,42px);letter-spacing:-.045em;line-height:1.1;margin:0;white-space:normal}
.breadcrumbs .back-link{display:flex!important;align-items:center;gap:10px;font-size:13px;white-space:nowrap;color:var(--muted);flex-shrink:0;min-height:44px}
.breadcrumbs .back-link:hover{color:var(--ink)}
.breadcrumbs .back-link .back-arrow{font-size:24px;color:var(--ink);display:inline!important;transition:transform .25s var(--ease)}
.breadcrumbs .back-link:hover .back-arrow{transform:translateX(-4px)}
.breadcrumbs .stage-heading:focus{outline:none}
.view-controls{display:flex;align-items:center;gap:16px;flex-shrink:0}
#category-stage{height:calc(100svh - var(--topline-height));min-height:560px;padding:0 clamp(24px,3.4vw,78px) 36px;container-type:inline-size;position:relative}
.focus-index{height:100%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));padding:12px 0}
.focus-row{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(180px,27%) 58px;align-items:center;gap:clamp(16px,2.4vw,56px);border-bottom:1px solid var(--line);isolation:isolate;position:relative;min-height:0;outline-offset:-2px!important}
.focus-row:last-child{border-bottom:0}
.focus-row:before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);opacity:.55}
.focus-row:hover:before,.focus-row:focus-visible:before{transform:scaleX(1)}
.focus-copy{display:block;position:relative;z-index:5;pointer-events:none}
.focus-name{display:block;font-size:clamp(32px,4.8cqw,104px);line-height:1.04;letter-spacing:-.055em;color:var(--muted);transition:color .28s;max-width:100%;text-wrap:balance}
.focus-description{display:block;font-size:clamp(12px,.83cqw,17px);margin-top:clamp(10px,1.1cqw,20px);color:var(--muted);line-height:1.45;transition:color .3s}
.focus-row:is(:hover,:focus-visible,.is-engaged) .focus-name{color:var(--ink)}
.focus-row:is(:hover,:focus-visible,.is-engaged) .focus-description{color:var(--ink)}
.focus-number{font:11px monospace;color:var(--muted);align-self:center}
.focus-preview{position:relative;width:100%;height:80%;max-height:220px;min-height:80px;pointer-events:none;isolation:isolate;display:block;contain:layout}
.focus-card{position:absolute;left:18%;top:10%;width:66%;height:80%;display:block;transform-origin:50% 75%;z-index:calc(3 - var(--slot));will-change:transform}
.focus-card img{width:100%;height:100%;object-fit:cover;box-shadow:0 8px 22px #0002;display:block;backface-visibility:hidden}
.focus-card[data-slot="1"] img{filter:brightness(.88)}
.focus-card[data-slot="2"] img{filter:brightness(.8)}
.focus-end{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.focus-count{font:11px monospace;color:var(--muted);text-align:center;white-space:nowrap}
.focus-count>span{display:block;font-size:9px;margin-top:4px}
.focus-arrow{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;font-size:25px;line-height:1;transition:transform .35s var(--ease),color .25s,background .25s}
.focus-row:is(:hover,:focus-visible) .focus-arrow{background:var(--ink);color:var(--bg);transform:rotate(45deg)}
.focus-row:active .focus-arrow{transform:rotate(45deg) scale(.91)}
.focus-row.is-loading .focus-arrow{animation:focus-loading .7s ease-in-out infinite alternate}
@keyframes focus-loading{to{opacity:.35}}
.focus-flight-title{white-space:nowrap;line-height:1!important}
.focus-flight-image{display:block;backface-visibility:hidden}
.focus-departure{contain:layout style;user-select:none;background:var(--bg)}
.focus-departure .focus-card{will-change:auto}
.focus-departure .orbit-canvas{opacity:1!important;visibility:visible!important}
body.is-navigating .breadcrumbs,body.is-navigating #category-stage,body.is-navigating #work-stage{pointer-events:none}
#work-stage{height:calc(100svh - var(--topline-height));min-height:550px}
#project-rail .rail-title{display:none}
#project-rail{padding-top:18px}
#project-rail .rail-filters{margin:0 0 30px}
#project-rail .project-card{transition:opacity .24s;transform:none!important}
#project-rail .project-card[aria-current=true] .area-images img:last-child{outline:0}
#project-rail .project-card[aria-current=true] strong{color:var(--ink)}
#project-rail .project-card[aria-current=true] strong:after{content:'';display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-left:12px}
#project-rail .area-images{isolation:isolate}
#project-rail .area-images img{transition:transform .48s var(--ease),filter .3s}
#project-rail .project-card:is(:hover,:focus-visible) .area-images img:nth-child(1){transform:translate(13px,-11px) rotate(2.4deg)}
#project-rail .project-card:is(:hover,:focus-visible) .area-images img:nth-child(2){transform:translate(-5px,-5px) rotate(-1.1deg)}
body[data-view=home] .topline{border-bottom:0}
@media(min-width:1900px){main{--topline-height:108px}#category-stage{padding-bottom:50px}.focus-index{padding-block:20px}.focus-row{grid-template-columns:28px minmax(0,1fr) minmax(260px,26%) 62px}.focus-preview{max-height:245px}.focus-count{font-size:12px}.focus-count>span{font-size:10px}.focus-arrow{width:52px;height:52px}.breadcrumbs .section-label{font-size:20px}.focus-name{font-size:clamp(64px,5cqw,110px)}}
@media(max-height:760px) and (min-width:801px){main{--topline-height:68px}#category-stage{min-height:520px;padding-bottom:18px}.focus-row{gap:20px}.focus-name{font-size:clamp(30px,4.3cqw,78px)}.focus-description{margin-top:8px}.focus-preview{height:90%}.focus-card{height:72%;top:14%}.focus-end{gap:12px}#work-stage{height:calc(100svh - var(--topline-height));min-height:490px}}
@media(max-width:1200px) and (min-width:801px){.focus-row{grid-template-columns:18px minmax(0,1fr) 25% 40px;gap:20px}.focus-name{font-size:clamp(30px,4.8cqw,58px)}.focus-arrow{width:36px;height:36px;font-size:21px}.focus-card{left:10%;width:80%}.focus-count{font-size:10px}.breadcrumbs{gap:18px}.breadcrumbs .section-count{display:none}.breadcrumbs .back-link{font-size:12px}.breadcrumbs .stage-heading{font-size:26px}}
@media(max-width:800px){
 main{--topline-height:80px}
 .topline{height:var(--topline-height);padding-inline:22px;position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);gap:12px;z-index:32}
 .breadcrumbs{max-width:none!important;gap:12px;overflow:visible!important}
 .breadcrumbs .section-label{font-size:15px}
 .breadcrumbs .section-count{display:none!important}
 .breadcrumbs .stage-heading{font-size:clamp(20px,4.8vw,30px);line-height:1.05}
 .breadcrumbs .back-link{min-width:30px;min-height:44px}
 .breadcrumbs .back-label{display:none}
 body[data-view=project] .breadcrumbs .back-link .back-label{display:inline;font-size:13px;white-space:normal}
 .view-controls{gap:10px}.topline button[data-motion]{font-size:10px;white-space:nowrap}.mobile-theme span{display:none}
 #category-stage{height:auto;min-height:0;padding:0 22px 25px}
 .focus-index{padding:0;display:block}
 .focus-row{min-height:180px;grid-template-columns:16px minmax(0,1fr) 100px 27px;gap:10px;padding-block:20px}
 .focus-name{font-size:clamp(25px,6.4vw,43px);line-height:1.06;text-wrap:initial}
 .focus-description{font-size:11px;max-width:19ch;margin-top:12px}
 .focus-number{font-size:9px;align-self:start;margin-top:9px}
 .focus-preview{height:105px;min-height:0;width:100%;align-self:center}
 .focus-card{width:80%;left:6%;top:10%;height:80%}
 .focus-end{gap:16px}.focus-count{font-size:10px}.focus-count>span{display:none}.focus-arrow{width:28px;height:28px;font-size:19px}
 #work-stage,body[data-view=stack] #work-stage{height:800px;min-height:0}
 #project-rail .rail-filters{margin:0}
 #project-rail{padding-top:15px}
 #project-rail:has(.rail-filters){padding-top:42px}
 body[data-view=stack] #work-caption{top:385px;bottom:auto}
}
@media(max-width:430px){.focus-row{grid-template-columns:15px minmax(0,1fr) 88px;gap:10px;padding-block:24px;min-height:184px}.focus-end{position:absolute;right:0;bottom:16px;height:auto;flex-direction:row;gap:10px}.focus-preview{height:88px;align-self:start;margin-top:6px}.focus-card{left:0;width:89%}.focus-copy{align-self:start}.focus-name{font-size:27px}.focus-description{font-size:10px;margin-top:13px;max-width:17ch}.focus-count{font-size:9px}.focus-arrow{width:25px;height:25px}.topline,#category-stage{padding-inline:18px}.focus-number{margin-top:6px}.primary-nav a{font-size:12px}.role{font-size:12px}}
@media(prefers-reduced-motion:reduce){.focus-card{will-change:auto}.focus-row:before,.focus-arrow{transition:none}}
body[data-motion=paused] .focus-card{will-change:auto}

@media(max-width:800px){body[data-view=home] .breadcrumbs>.section-label{display:inline}body[data-view=project] .breadcrumbs>.back-link,body[data-view=essay] .breadcrumbs>.back-link{display:flex}}