/* Scene typography shares the same 16:9 containing block as the footage. */
#surface{container-type:inline-size}
#note,#note[data-stop]:not([data-stop="0"]){--note-width:clamp(240px,24cqw,340px);width:var(--note-width);top:15%}
#note[data-side=left],#note[data-stop]:not([data-stop="0"])[data-side=left]{left:calc(33.333% - var(--note-width)/2);right:auto}
#note[data-side=right],#note[data-stop]:not([data-stop="0"])[data-side=right]{right:calc(33.333% - var(--note-width)/2);left:auto}
#note[data-stop="0"] h2,#note h2,#note[data-stop]:not([data-stop="0"]) h2{font-size:clamp(28px,3.2cqw,46px)}
#note[data-stop="0"] p,#note p,#note[data-stop]:not([data-stop="0"]) p{font-size:clamp(17px,1.75cqw,25px);line-height:1.45;max-width:none}
#overviewCopy{top:auto;bottom:9%;left:auto;right:5%;max-width:90%}
#overviewCopy h1{font-size:clamp(28px,4.2cqw,68px)}
#overviewCopy p{font-size:clamp(14px,1.3cqw,22px)}
#openingTitle{top:34%}
#openingTitle h1{font-size:clamp(40px,9cqw,140px)}
#scrollCue{bottom:8%}
#stops button{min-height:32px;font-size:10px}
#scrub{height:4px;margin:10px 0 4px}
#play,#allHoles{min-height:44px;font-size:11px}
#transport{bottom:max(32px,env(safe-area-inset-bottom));gap:18px}
footer{bottom:max(10px,env(safe-area-inset-bottom))}

/* Portrait uses a taller photographic crop, with text retained on the scene. */
@media(max-aspect-ratio:1/1){
 #stage{height:100svh}
 #surface{width:100%;height:100%;top:0;left:0;transform:none;overflow:hidden}
 #still,#canvas{object-fit:cover;object-position:center}
 /* Routing and mask use the identical cover transform as the overview image. */
 #focus,#markers{width:177.7778svh;height:100svh;left:50%;right:auto;transform:translateX(-50%)}
 header{inset:max(16px,env(safe-area-inset-top)) 5% auto}
 .wordmark b{font-size:25px}.wordmark span{font-size:7px}
 nav{gap:16px}nav a{display:none}
 .book{padding:12px;font-size:10px}.book span{margin-left:8px}
 #overviewCopy{top:auto;bottom:18%;width:90%;max-width:620px;left:auto;right:5%;translate:none}
 #overviewCopy .course-name{font-size:20px;margin-bottom:7px}
 #overviewCopy .eyebrow,#teeMeta{font-size:9px;line-height:1.4}
 #overviewCopy h1{font-size:clamp(24px,5.4vw,38px);margin:12px 0}
 #overviewCopy p{font-size:18px;line-height:1.4;white-space:normal;text-wrap:pretty;margin:12px 0 18px}
 .pill{font-size:11px;min-height:44px;padding:10px 16px}
 #note,#note[data-stop]:not([data-stop="0"]){--note-width:min(62vw,340px);width:var(--note-width);top:16%;bottom:auto;translate:none}
 #note[data-side=left],#note[data-stop]:not([data-stop="0"])[data-side=left]{left:6%!important;right:auto!important}
 #note[data-side=right],#note[data-stop]:not([data-stop="0"])[data-side=right]{right:6%!important;left:auto!important}
 #note[data-stop="0"] h2,#note h2,#note[data-stop]:not([data-stop="0"]) h2{font-size:clamp(26px,4vw,34px);line-height:1.1;margin:0 0 10px}
 #note[data-stop="0"] p,#note p,#note[data-stop]:not([data-stop="0"]) p{font-size:clamp(17px,2.5vw,21px);line-height:1.4;margin:0;max-width:none}
 #teeMeta{margin-bottom:8px}
 #proLabel,#note[data-stop]:not([data-stop="0"]) #proLabel{font-size:10px;margin-bottom:8px}
 #yards{margin:12px 0;max-width:340px}
 #yards span{padding:7px 3px;font-size:10px}#yards small{font-size:6px}
 #finish{margin-top:14px}#nextUnavailable{margin-top:8px}
 #scrollCue{top:auto;bottom:21%;font-size:10px;text-shadow:0 1px 8px #00190d}
 #scrollCue span{display:inline;margin:0 0 0 6px;font-size:14px}
 #transport{bottom:max(30px,env(safe-area-inset-bottom));left:5%;right:5%;gap:5px 16px;flex-wrap:wrap}
 .holeIdentity{min-width:0;flex:1}.holeIdentity b{font-size:28px}
 .timeline{flex-basis:100%;order:4}
 #stops button{font-size:11px;min-height:36px}
 #allHoles{margin-left:auto}#play{width:44px}
 footer>span:nth-child(2){display:none}
 #openingTitle{top:34%}#openingTitle h1{margin:12px 0;font-size:clamp(48px,12vw,90px)}
 #openingTitle p{font-size:11px}#openingTitle span{font-size:8px}
 #demoCallout{width:125px;font-size:13px}
 .marker.active{width:40px;height:40px;font-size:13px}
 #sources{padding:24px;max-height:85svh;overflow:auto}
 #noteShade[data-side=left]{background:linear-gradient(90deg,#02110aeb, #02110aad 48%,#02110a30 76%,transparent)}
 #noteShade[data-side=right]{background:linear-gradient(270deg,#02110aeb,#02110aad 48%,#02110a30 76%,transparent)}
 #overviewShade{background:linear-gradient(0deg,#02110ae6 8%,#02110aa0 36%,#02110a30 64%,transparent 82%)}
}
@media(max-aspect-ratio:1/1) and (max-height:740px){
 #note,#note[data-stop]:not([data-stop="0"]){top:15%;--note-width:66vw}
 #note[data-stop="0"] p,#note p,#note[data-stop]:not([data-stop="0"]) p{font-size:16px;line-height:1.32}
 #note[data-stop="0"] h2,#note h2,#note[data-stop]:not([data-stop="0"]) h2{font-size:25px;margin-bottom:7px}
 #yards{margin:8px 0}#yards span{padding:5px 3px}
 #finish{margin-top:8px;min-height:36px}#nextUnavailable{margin-top:5px}
 #overviewCopy p{font-size:16px;margin:10px 0 12px}
 #overviewCopy .course-name{font-size:18px;margin-bottom:4px}
}
/* Landscape tablet and phone overlays scale with the visible film, not screen width. */
@media(min-aspect-ratio:1001/1000) and (max-height:650px){
 header{inset:max(10px,env(safe-area-inset-top)) max(4%,env(safe-area-inset-right)) auto}
 .wordmark b{font-size:21px}.wordmark span{font-size:6px}nav a{display:none}
 nav{font-size:10px}.book{font-size:9px;padding:10px 12px}
 #note,#note[data-stop]:not([data-stop="0"]){--note-width:38cqw;top:17%;width:var(--note-width)}
 #note[data-side=left],#note[data-stop]:not([data-stop="0"])[data-side=left]{left:8%!important;right:auto!important}
 #note[data-side=right],#note[data-stop]:not([data-stop="0"])[data-side=right]{right:8%!important;left:auto!important}
 #note[data-stop="0"] h2,#note h2,#note[data-stop]:not([data-stop="0"]) h2{font-size:clamp(23px,3.5cqw,32px);margin-bottom:7px}
 #note[data-stop="0"] p,#note p,#note[data-stop]:not([data-stop="0"]) p{font-size:clamp(15px,2.1cqw,19px);line-height:1.3}
 #teeMeta,#proLabel,#note[data-stop]:not([data-stop="0"]) #proLabel{font-size:8px;margin-bottom:6px}
 #yards{margin:8px 0}#yards span{padding:5px}#yards small{font-size:6px}
 #transport{bottom:15px;gap:12px;flex-wrap:nowrap;left:5%;right:5%}
 .holeIdentity{min-width:110px;flex:0}.holeIdentity b{font-size:26px}
 .timeline{flex:1;order:0}#stops button{font-size:9px;min-height:28px}
 #play,#allHoles{font-size:10px}#scrollCue{display:none}
 footer{bottom:4px}footer>span:nth-child(2){display:none}
 #overviewCopy{bottom:10%;top:auto;left:auto;right:5%}
 #overviewCopy .course-name{font-size:18px;margin-bottom:6px}
 #overviewCopy h1{font-size:clamp(28px,4.2cqw,40px);margin:10px 0}
 #overviewCopy p{font-size:clamp(13px,1.8cqw,17px);margin:10px 0 14px}
 #finish{min-height:32px;padding:7px 14px;margin-top:8px;font-size:10px}#nextUnavailable{font-size:8px;margin-top:6px}
}

/* Keep scene UI inside the same fitted bounds as the image and film. */
#surface{overflow:hidden}