#opening-loader{display:none}.opening-loading #opening-loader,.opening-reveal #opening-loader{position:fixed;left:50%;top:50%;translate:-50% -50%;width:clamp(190px,22vw,270px);aspect-ratio:1;z-index:90;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;pointer-events:none;color:var(--ink);transition:opacity .3s,transform .5s}
.opening-percent{font:400 clamp(64px,6.5vw,88px)/1 Tinos,'Times New Roman',serif;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.opening-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.opening-loading .hero-copy,.opening-loading .header,.opening-loading main>.opening-chapter,.opening-loading main>.portfolio{opacity:0;pointer-events:none}
.opening-loading .hero .work-card{opacity:0!important}.opening-loading .hero .work-card.opening-image-ready{opacity:1!important;transition:opacity .5s ease;transition-delay:calc(var(--opening-order)*30ms)}
.opening-reveal #opening-loader{opacity:0;transform:scale(.9)}
.opening-reveal .hero-copy{animation:opening-content .85s .25s both cubic-bezier(.2,.8,.2,1)}.opening-reveal .header{animation:opening-content .65s .4s both cubic-bezier(.2,.8,.2,1)}
@keyframes opening-content{from{opacity:0;translate:0 18px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
/* Captions sit inside the artwork, so both rails keep the same compact rhythm. */
.portfolio-row{padding-block:0;margin-block:0}
.portfolio-row+.portfolio-row{margin-top:24px}
.portfolio-row .project-art{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;transition:box-shadow .3s;isolation:isolate}
.portfolio-row .project-art::after{content:"";position:absolute;inset:0;z-index:2;border:3px solid var(--ink);border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s}
.portfolio-row .project-card:focus-visible{outline:none}
.portfolio-row .project-card:focus-visible .project-art::after{opacity:1}
.portfolio-row :is(.project-art>img,.project-art>picture>img){display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease-fluid),filter .3s}
.portfolio-row :is(.project-art>img,.project-art>picture>img)[src*="eiland-scott/"]{transform:scale(1.028)}
.portfolio-row .project-caption{position:absolute;inset:auto 0 0;z-index:1;display:grid;gap:6px;padding:65px 90px 25px 25px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;opacity:0;translate:0 8px;transition:opacity .28s,translate .4s var(--ease-fluid);pointer-events:none}
.portfolio-row .project-caption strong{font-size:clamp(25px,2.3vw,33px);line-height:1.1;font-weight:400;color:#fff}
.portfolio-row .project-caption>span:not(.project-open){font-size:14px;line-height:1.4;color:#eee;white-space:normal}
.portfolio-row .project-open{position:absolute;right:24px;bottom:24px;width:50px;height:50px;display:grid;place-items:center;border:1.5px solid #fff;border-radius:50%;transition:background .25s}
.portfolio-row .project-open img{width:22px;height:22px;object-fit:contain}
.portfolio-row .project-card:focus-visible .project-caption{opacity:1;translate:0 0}
@media(hover:hover) and (pointer:fine){
 .portfolio-row .project-card:hover .project-art::after,.portfolio-row .project-card.artwork-active .project-art::after{opacity:1}
 .portfolio-row .project-card:hover .project-caption,.portfolio-row .project-card.artwork-active .project-caption{opacity:1;translate:0 0}
 .portfolio-row .project-card:hover .project-art,.portfolio-row .project-card.artwork-active .project-art,.portfolio-row .project-card:focus-visible .project-art{transform:none;box-shadow:0 6px 18px #0002}
 .portfolio-row .project-card:hover :is(.project-art>img,.project-art>picture>img),.portfolio-row .project-card.artwork-active :is(.project-art>img,.project-art>picture>img),.portfolio-row .project-card:focus-visible :is(.project-art>img,.project-art>picture>img){transform:scale(1.035)}
 .portfolio-row:has(.artwork-active) .project-card:not(.artwork-active) .project-art{transform:none}
 .portfolio-row:has(.artwork-active) .project-card:not(.artwork-active) :is(.project-art>img,.project-art>picture>img){filter:brightness(.78)}
}
@media(max-width:700px){
 .portfolio-row{padding-block:0;margin-block:0}
 .portfolio-row+.portfolio-row{margin-top:16px}
 .portfolio-row .project-art{border-radius:12px}
 .portfolio-row .project-caption{padding:56px 72px 18px 18px;gap:5px}
 .portfolio-row .project-caption strong{font-size:25px}
 .portfolio-row .project-caption>span:not(.project-open){font-size:13px}
 .portfolio-row .project-open{right:17px;bottom:18px;width:44px;height:44px}
 .portfolio-row .project-open img{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){.opening-loading #opening-loader{display:none}.opening-reveal .hero-copy,.opening-reveal .header{animation:none}.portfolio-row .project-art,.portfolio-row .project-caption{transition:none;translate:none;transform:none!important}}
@media(max-width:700px),(hover:none){.portfolio-row .project-caption{opacity:1;translate:0 0}}

.opening-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;width:250%;height:250%;overflow:visible;rotate:-90deg;fill:none;stroke:currentColor;stroke-width:.7}.opening-ring-track{opacity:.14}.opening-ring-progress{stroke-width:1.4;stroke-linecap:round;transition:stroke-dashoffset .16s linear}

/* The loader follows the existing orbit centre; the artwork never shifts. */
@media(max-width:700px){.opening-ring{width:min(250%,calc(100vw - 32px));height:auto;aspect-ratio:1}}