@import url("code50.css");
#opening .intro-visual-key{display:none}
#opening [data-intro-beat="0"]{max-width:780px}
#opening [data-intro-beat="0"] .eyebrow{font-size:14px;letter-spacing:.16em;margin-bottom:26px}
#opening #openingTitle{font-size:clamp(64px,8vw,108px);font-weight:550;line-height:1.06;letter-spacing:-.035em;max-width:780px;margin:0}
#opening [data-intro-beat="0"] .intro-sub{font-size:clamp(22px,2.3vw,29px);line-height:1.65;max-width:660px;margin-top:30px;color:#dce5e6}
#opening .intro-beat .intro-body{font-size:25px;line-height:1.7}
/* Paused/reduced-motion beats are in document flow. Let their container grow
   past the cinematic viewport height so the next section starts after them. */
body.motion-paused #opening .opening-sticky{height:auto;min-height:0}
@media(min-width:701px){
  #opening [data-intro-beat="0"]{width:calc(100% - 2 * var(--pad));max-width:1100px}
  #opening #openingTitle{max-width:1100px}
}
@media(max-width:700px){
  #opening .intro-beat .intro-body{font-size:20px}
  #opening #openingTitle{font-size:clamp(44px,13vw,72px)}
  #opening [data-intro-beat="0"] .eyebrow{font-size:12px;margin-bottom:22px}
  #opening [data-intro-beat="0"] .intro-sub{font-size:20px;line-height:1.65;margin-top:25px;max-width:290px;text-wrap:balance}
}