html { scrollbar-gutter: stable; }
.opening > .masthead,.opening > .lead-photograph { position: relative; z-index: 2; }
.photo-intro-field { position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:1; }
.intro-tile { position:absolute;border-radius:14px;overflow:hidden;opacity:0;transition:opacity 800ms cubic-bezier(.16,1,.3,1);transition-delay:var(--entry-delay,0ms); }
.intro-tile img { display:block;width:100%;height:100%;object-fit:cover;object-position:center;dynamic-range-limit:no-limit;transform:scale(1.035);transition:transform 1100ms cubic-bezier(.16,1,.3,1);transition-delay:var(--entry-delay,0ms); }
.intro-tile[data-ready] { opacity:1; }
.intro-tile[data-ready] img { transform:scale(1); }
.intro-ending .intro-tile { opacity:0;transition-duration:650ms;transition-delay:var(--exit-delay,0ms); }
.intro-ending .intro-tile img { transform:scale(1.015);transition-duration:800ms;transition-delay:var(--exit-delay,0ms); }
.scroll-cue { z-index:3;transition:opacity 280ms ease-out; }
.intro-pending .scroll-cue { opacity:0;visibility:hidden;pointer-events:none; }
.intro-pending .scroll-cue svg { animation-play-state:paused; }
.intro-skip { position:absolute;right:var(--margin);bottom:max(20px,env(safe-area-inset-bottom));z-index:4;min-height:44px;padding:10px 14px;background:#000;border:0;border-radius:8px;color:#a5a5a3;font:400 14px/1.4 Portfolio,sans-serif;cursor:pointer; }
.intro-ending .scroll-cue { background:#000;border-radius:50%; }
.intro-skip:hover { color:var(--white); }
.intro-skip:focus-visible { outline:2px solid var(--white);outline-offset:4px; }
@media (max-width:700px) { .intro-tile { border-radius:8px; } }
@media (prefers-reduced-motion:reduce) {
 .intro-tile,.intro-tile img,.scroll-cue { transition:none; }
 .photo-intro-field,.intro-skip { display:none; }
}

/* The centered loading title travels into the opening composition. */
html.intro-loading,html.intro-loading body { overflow:hidden;overscroll-behavior:none; }
.opening > .masthead { z-index:3; }
.masthead h1 { opacity:1;transform:none;transition:opacity 600ms cubic-bezier(.16,1,.3,1),transform 700ms cubic-bezier(.16,1,.3,1); }
.intro-loading .masthead h1 { opacity:.44;transition:none; }
.intro-loading:not(.intro-positioned) .masthead h1,.intro-loading:not(.intro-positioned) .intro-loader-content { visibility:hidden; }
.intro-loading .masthead h1,.intro-loading .intro-loader-content { transform:translateY(var(--loading-title-offset,0px)); }
.intro-loader { display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:30;opacity:1;transition:opacity 220ms ease-out; }
.intro-loading .intro-loader,.intro-active .intro-loader[data-leaving] { display:block; }
.intro-loader[data-leaving] { opacity:0;pointer-events:none; }
.intro-loader-content { width:96px;margin-inline:auto;transform:none;transition:transform 700ms cubic-bezier(.16,1,.3,1); }
.intro-loading .intro-loader-content { transition:none; }
.intro-loader-progress { width:100%;height:2px;background:#181818;overflow:hidden; }
.intro-loader-progress span { display:block;width:100%;height:100%;background:#999;transform:scaleX(var(--load-progress,0));transform-origin:left;transition:transform 180ms ease-out; }
.intro-loader .intro-skip { position:fixed;right:var(--margin); }
@media(prefers-reduced-motion:reduce) { .masthead h1,.intro-loader,.intro-loader-content,.intro-loader-progress span { transition:none; }
 .masthead h1,.intro-loader-content { transform:none!important; } }

.intro-skip[hidden] { display:none; }

.opening[data-composition=frame] .lead-photograph { width:min(calc(100vw - var(--margin)*2),calc(min(var(--lead-height),max(var(--frame-height,10000px),calc(var(--lead-height)*.8)))*var(--cover-ratio,.75))); }

@media(max-width:700px) { .intro-loader-content { width:72px; } }