/* R4: the opening shares the frame with its copy, leaving the next scene visible.
   Only route opening/entry selectors change. The approved global shell is intact. */
@media (min-width:761px){
 .institute-r3 .institute-opening{height:82vh;height:82svh;min-height:0!important;max-height:820px}
 .institute-r3 .institute-opening h1{font-size:clamp(32px,3vw,46px)}
 .institute-r3 .institute-opening__copy{bottom:54px}
 .institute-r3 .institute-arrival{padding-top:18px}
 .institute-r3 .institute-arrival>.institute-story-scene:first-child{padding-top:0}
}
@media (max-width:760px){
 .institute-r3 .institute-opening{height:clamp(500px,70vh,640px);height:clamp(500px,70svh,640px);max-height:calc(100vh - 64px);max-height:calc(100svh - 64px);min-height:0!important;padding:0;color:var(--warm-light);background:var(--solar-charcoal)}
 .institute-r3 .institute-opening__frames{position:absolute;inset:0;height:100%}
 .institute-r3 .institute-opening__frames::after{height:170px}
 .institute-r3 .institute-opening__shade{display:block;background:linear-gradient(0deg,rgba(29,27,24,.94),rgba(29,27,24,.64) 44%,transparent 78%)}
 .institute-r3 .institute-opening__copy{position:absolute;inset:auto var(--page) 26px;padding:0;max-width:520px}
 .institute-r3 .institute-opening h1{font-size:clamp(26px,6.8vw,31px);line-height:1.08;max-width:20ch}
 .institute-r3 .institute-opening__copy>p{font-size:14px;line-height:1.55;color:var(--warm-light);margin:12px 0 0;max-width:55ch}
 .institute-r3 .institute-opening .institute-actions{display:flex;flex-wrap:nowrap;gap:14px;margin-top:16px}
 .institute-r3 .institute-opening .institute-actions a{min-height:44px;padding:10px 12px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
 .institute-r3 .institute-opening .institute-button{background:var(--solar-ivory);color:var(--ink);border-color:var(--solar-ivory)}
 .institute-r3 .institute-opening .institute-link{padding-inline:0}
 /* Like the Home, continuity is shown by the following photograph. */
 .institute-r3 .institute-opening__scroll{display:none}
 .institute-r3 .institute-arrival{padding-top:12px}
 .institute-r3 .institute-arrival>.institute-story-scene:first-child{padding-top:0}
}
@media (max-width:760px) and (max-height:560px){
 .institute-r3 .institute-opening h1{font-size:24px;max-width:22ch}
 .institute-r3 .institute-opening__copy>p{font-size:13px;line-height:1.5;margin-top:10px}
 .institute-r3 .institute-opening .institute-actions{margin-top:12px}
 .institute-r3 .institute-opening__copy{bottom:20px}
}

/* A short landscape viewport grows with its text instead of clipping it. */
@media (max-width:760px) and (max-height:430px), (min-width:761px) and (max-height:430px) and (orientation:landscape){
 .institute-r3 .institute-opening{height:auto;max-height:none;padding:160px var(--page) 20px}
 .institute-r3 .institute-opening__copy{position:relative;inset:auto;padding:0;max-width:none}
 .institute-r3 .institute-opening h1{max-width:none}
 .institute-r3 .institute-opening__copy>p{max-width:80ch}
}

/* The next chapter names its place within the incoming photograph. */
@media (max-width:760px){
 .institute-r3 .institute-arrival>.institute-story-scene:first-child{gap:18px}
 .institute-r3 .institute-arrival>.institute-story-scene:first-child .institute-story-scene__copy{display:block}
 .institute-r3 .institute-arrival>.institute-story-scene:first-child .institute-story-scene__copy h2{position:absolute;z-index:1;top:16px;left:16px;right:16px;font-size:clamp(20px,5.6vw,24px);line-height:1.15;max-width:none;color:var(--warm-light)}
 .institute-r3 .institute-arrival>.institute-story-scene:first-child .institute-story-scene__film{grid-row:1;position:relative}
}
@media (max-width:760px){
 .institute-r3 .institute-arrival>.institute-story-scene:first-child .institute-story-scene__film::after{content:"";position:absolute;inset:0 0 auto;height:130px;background:linear-gradient(rgba(29,27,24,.86),transparent);pointer-events:none}
}
/* Keep the optional internal shortcut available in the expanded no-JS shell. */
@media (max-width:760px) and (min-height:431px){
 html:not(.irp-global-shell-js) .institute-r3 .institute-opening__copy{bottom:80px}
 html:not(.irp-global-shell-js) .institute-r3 .institute-opening__scroll{display:flex;bottom:10px;right:var(--page);color:var(--warm-light)}
}
@media (max-width:760px) and (max-height:430px){
 html:not(.irp-global-shell-js) .institute-r3 .institute-opening{padding-bottom:74px}
 html:not(.irp-global-shell-js) .institute-r3 .institute-opening__scroll{display:flex;bottom:10px;right:var(--page);color:var(--warm-light)}
}