/* Responsive opening slideshow */
.hero-media{position:absolute;inset:0;overflow:hidden;background:var(--dark)}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 1.1s;pointer-events:none}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-slide .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:none;transform:none}
.hero-slide.is-active .hero-image{transform:none}
.hero-bottom{gap:25px}.hero-project{min-width:0}.hero-project [data-hero-project-title]{overflow-wrap:anywhere}
.slideshow-controls{display:flex;align-items:center;gap:12px;direction:ltr;flex-shrink:0}
.slideshow-controls button{color:inherit;display:grid;place-items:center;min-width:36px;min-height:40px;padding:0}
.slide-arrow{font-size:20px}.hero-dots{display:flex;gap:5px}.hero-dots button{min-width:20px;width:20px}.hero-dots span{width:5px;height:5px;border-radius:50%;background:#ffffff65;transition:width .35s,background .35s}.hero-dots [aria-pressed=true] span{width:18px;border-radius:3px;background:white}
.motion-toggle{font-family:Manrope,sans-serif;font-size:15px;line-height:1;width:40px;height:40px;border:1px solid #ffffff40;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.slideshow-controls button:hover,.motion-toggle:hover{background:#ffffff12}.slideshow-controls button:focus-visible,.project-experience button:focus-visible{outline:2px solid #77c8ee;outline-offset:3px}
.archive-story-label{color:var(--ink);font-size:clamp(17px,1.5vw,22px);line-height:1.65}
@media screen and (max-width:1100px),screen and (max-height:650px){
 .hero-media{position:relative;inset:auto;aspect-ratio:1800/1013;width:100%;flex-shrink:0}
 .hero-slide .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
 .hero-bottom{flex-wrap:wrap}.slideshow-controls{gap:7px}
 .hero-project{flex:1 1 240px}
}

@media(max-width:540px){.hero-bottom{gap:10px;padding-bottom:18px}.hero-project{flex-basis:100%}.slideshow-controls{width:100%;justify-content:space-between}.hero-dots{gap:10px}}
.hero:not([data-enhanced]) .slideshow-controls{display:none}
/* Open architectural spreads: the page itself is the gallery. */
.project-experience{position:relative;background:none;color:var(--ink);--drift-x:0px;--drift-y:0px;--scroll-drift:0px}
.work-canvas{scroll-margin-top:0;position:relative;touch-action:pan-y pinch-zoom;isolation:isolate}
.project-spreads{position:relative}
.project-spread{position:relative;margin-bottom:70px}
.spread-link{display:block;position:relative;min-height:clamp(500px,44vw,690px);outline:none}
.spread-primary,.spread-study{position:absolute;margin:0;transition:transform 1.2s cubic-bezier(.2,.65,.2,1);will-change:transform}
.spread-primary{width:64%;right:0;top:8%;transform:translate3d(calc(var(--drift-x)*.65),calc(var(--drift-y)*.65 + var(--scroll-drift)),0)}
.spread-image{position:relative}
.spread-image img{display:block;width:100%;height:auto;max-height:clamp(360px,35vw,550px);object-fit:contain;object-position:right top;box-shadow:0 18px 30px -24px #142c3438}
.spread-primary figcaption{display:flex;justify-content:space-between;gap:15px;padding-top:13px;font-size:11px;color:var(--muted);line-height:1.7}
.spread-primary figcaption>span:last-child{white-space:nowrap}
.spread-study{width:28%;left:0;top:0;transform:translate3d(calc(var(--drift-x)*-1),calc(var(--drift-y)*-1 + var(--scroll-drift)*-.65),0)}
.spread-study img{max-height:clamp(180px,19vw,280px);object-position:left top}
.spread-study figcaption{margin-top:13px;color:var(--muted);font-size:11px;line-height:1.7}
.spread-caption{position:absolute;left:0;bottom:3%;width:35%;z-index:2;text-align:start}
.spread-meta{display:flex;align-items:baseline;gap:18px;font-size:10px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.spread-meta>span:first-child{font-family:Manrope,sans-serif;white-space:nowrap;color:var(--blue)}
.spread-caption h3{font-size:clamp(30px,3.25vw,54px);line-height:1.12;letter-spacing:-.045em;font-weight:450;overflow-wrap:anywhere;text-wrap:balance}
.spread-open{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-block:23px 12px;margin-top:8px;max-width:230px;font-size:12px;transition:color .3s,border-color .3s}
.spread-open>span:last-child{font-size:25px;transition:transform .3s}
.spread-link:hover .spread-open,.spread-link:focus-visible .spread-open{color:var(--blue);border-color:var(--blue)}
.spread-link:hover .spread-open>span:last-child{transform:translate(3px,-3px)}
.spread-link:focus-visible .spread-image{outline:2px solid var(--blue);outline-offset:6px}
.spread-portrait .spread-primary{width:54%;right:3%;top:0}
.spread-portrait .spread-primary img{max-height:clamp(435px,40vw,625px);object-position:center top}
.spread-portrait .spread-primary figcaption{justify-content:center;gap:25px}
.project-experience[data-enhanced] .project-spread{position:absolute;inset:0;margin:0;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .55s ease,visibility .55s}
.project-experience[data-enhanced] .project-spread.is-active{position:relative;visibility:visible;opacity:1;pointer-events:auto;z-index:1}
.project-experience[data-enhanced] .project-spread .spread-image{overflow:visible}
.project-experience[data-enhanced] .project-spread .spread-image img{opacity:0;transform:translateY(24px);transition:transform 1.25s cubic-bezier(.22,.75,.2,1),opacity .8s}
.project-experience[data-enhanced] .project-spread.is-active .spread-image img{opacity:1;transform:translateY(0) scale(1)}
.project-experience[data-enhanced] .project-spread.is-active .spread-study img{transition-delay:.12s}
.project-experience[data-enhanced] .project-spread .spread-caption{opacity:0;transform:translateY(12px);transition:opacity .55s,transform .65s}
.project-experience[data-enhanced] .project-spread.is-active .spread-caption{opacity:1;transform:none;transition-delay:.14s}
.work-navigation{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:40px;padding-block:15px 20px}
.work-index-label{font-size:10px;letter-spacing:.13em;color:var(--muted)}
.work-controls{display:flex;align-items:center;gap:6px;direction:ltr}
.work-controls button{width:42px;height:42px;border:1px solid transparent;border-radius:50%;font-family:Manrope,sans-serif;font-size:19px;display:grid;place-items:center;transition:background .25s,border-color .25s}
.work-controls [data-project-pause]{font-size:14px}
.work-controls button:hover{background:#e8ece6;border-color:var(--line)}
.work-position{font-family:Manrope,sans-serif;font-size:10px;margin-right:16px;color:var(--muted)}
.project-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.project-selector button{position:relative;display:flex;align-items:baseline;gap:13px;width:100%;min-width:0;padding:17px 0;border-top:1px solid var(--line);text-align:start;color:var(--muted);font-size:13px;line-height:1.5;min-height:57px;transition:color .3s}
.project-selector .selector-number{font-family:Manrope,sans-serif;font-size:9px;color:#89918d;flex-shrink:0;align-self:baseline}
.project-selector .selector-arrow{margin-inline-start:auto;opacity:0;transform:translate(-4px,4px);transition:opacity .3s,transform .3s;font-size:16px}
.project-selector button:hover,.project-selector [aria-pressed=true]{color:var(--ink)}
.project-selector [aria-pressed=true]{border-top-color:var(--blue)}
.project-selector [aria-pressed=true] .selector-number{color:var(--blue)}
.project-selector [aria-pressed=true] .selector-arrow,.project-selector button:hover .selector-arrow{opacity:1;transform:none}
.project-selector [aria-pressed=true]:before{content:'';position:absolute;top:-1px;inset-inline-start:0;width:100%;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;animation:project-time 12s linear paused}
.project-experience[data-running=true] .project-selector [aria-pressed=true]:before{animation-play-state:running}
@keyframes project-time{to{transform:scaleX(1)}}
.project-experience button:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.project-experience:not([data-enhanced]) .work-navigation,.project-experience:not([data-enhanced]) .project-selector{display:none}
html[lang=fa] .spread-caption h3{letter-spacing:0;line-height:1.45;font-size:clamp(28px,2.9vw,46px)}
html[lang=fa] .work-index-label{letter-spacing:0}
@media(min-width:1700px){.spread-caption{bottom:7%}}
@media(max-width:1100px){
 .spread-link{min-height:520px}.spread-caption{width:36%;bottom:3%}.spread-caption h3{font-size:clamp(27px,3.5vw,40px)}.spread-meta{display:block;font-size:10px;margin-bottom:13px}.spread-meta>span{display:block}.spread-meta>span+span{margin-top:7px}
 .spread-primary{width:61%;top:12%}.spread-study{width:29%}.spread-study img{max-height:185px}.spread-portrait .spread-primary img{max-height:480px}
 .project-selector{gap:0 25px}.project-selector button{font-size:11px;gap:9px}
}
@media(max-width:760px){
 .spread-link{min-height:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px 24px;align-items:start}
 .spread-primary,.spread-study,.spread-caption,.spread-portrait .spread-primary{position:relative;inset:auto;width:auto;transform:none;min-width:0}
 .spread-primary,.spread-portrait .spread-primary{grid-column:1/-1;grid-row:1}
 .spread-primary img,.spread-portrait .spread-primary img{width:100%;max-height:420px;object-position:center top}
 .spread-primary figcaption{font-size:10px;padding-top:10px}
 .spread-caption{grid-column:1;grid-row:2}.spread-study{grid-column:2;grid-row:2;padding-top:6px}
 .spread-study img{max-height:180px;object-position:center top}.spread-study figcaption{font-size:10px;margin-top:9px}
 .spread-caption h3,html[lang=fa] .spread-caption h3{font-size:clamp(22px,4.2vw,32px);line-height:1.22}.spread-meta{margin-bottom:13px;font-size:9px}.spread-open{font-size:11px;padding-top:13px;margin-top:6px}.spread-open>span:last-child{font-size:23px}
 .work-navigation{margin-top:30px;padding-bottom:15px}.work-index-label{font-size:9px;letter-spacing:.05em}.work-position{margin-right:8px;font-size:9px}.work-controls{gap:0}.work-controls button{width:36px;height:40px}
 .project-selector{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.project-selector button{font-size:12px;min-height:58px;padding-block:14px;gap:8px}.selector-arrow{display:none}
 html[lang=fa] .spread-caption h3{line-height:1.5}
}
@media(max-width:380px){.work-position{display:none}.spread-link{gap:24px 18px}.spread-caption h3,html[lang=fa] .spread-caption h3{font-size:21px}.project-selector{column-gap:18px}.project-selector button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-slide .hero-image,.project-experience *{transition:none!important;animation:none!important}.spread-primary,.spread-study{transform:none!important}.project-spread.is-active .spread-image img{transform:none!important}}
@media print{.project-experience,.hero{display:none!important}}



.project-selector button{grid-template-columns:minmax(0,1fr) 18px}
/* The displayed image box follows its intrinsic ratio, including portrait studies. */
.spread-image{display:flex;justify-content:flex-end}
.spread-study .spread-image{justify-content:flex-start}
.spread-image img,.spread-primary img,.spread-portrait .spread-primary img{width:auto;max-width:100%;height:auto}
.spread-portrait .spread-primary .spread-image{justify-content:center}
@media(max-width:760px){.spread-primary .spread-image,.spread-study .spread-image{justify-content:center}}

/* The frame matches the precomposed assets at every viewport, without side bars. */
.hero{height:auto;aspect-ratio:16/9;max-height:none}
@media screen and (max-width:1100px),screen and (max-height:650px){.hero{aspect-ratio:auto}.hero-media{aspect-ratio:16/9}}