.online-intro {
  padding-block: clamp(48px, 6vw, 88px) 48px;
}
.online-intro > .eyebrow { margin-bottom: 24px; }
.online-intro-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: clamp(32px, 6vw, 88px);
}
.online-intro h1 { font-size: clamp(3rem, 5.6vw, 5.6rem); }
.online-welcome > p:first-child { color: var(--muted); max-width: 46ch; }
.online-schedule { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.online-schedule span, .online-schedule strong { display: block; }
.online-schedule .eyebrow { color: var(--blue); margin-bottom: 8px; }
.online-schedule strong { font-size: 1.1rem; font-weight: 600; }
.online-schedule span:last-child { font-size: .85rem; color: var(--muted); }
.online-watch { padding-bottom: clamp(48px, 6vw, 80px); }
.watch-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.watch-heading h2 { font: 600 1rem/1.5 'DM Sans', sans-serif; letter-spacing: 0; }
.watch-heading .eyebrow { font-size: .6rem; color: var(--muted); }
.stream-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #20384e; }
.stream-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.stream-frame [hidden] { display:none!important; }
.stream-countdown { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:40px 24px; text-align:center; color:#fff; background:radial-gradient(ellipse at top right,#315caa55,transparent 65%),#20384e; }
.countdown-brand { display:flex; align-items:center; gap:12px; text-align:left; font-size:.85rem; font-weight:700; letter-spacing:.08em; }
.countdown-brand img { width:52px; height:52px; border-radius:50%; }
.countdown-brand small { display:block; margin-top:4px; font-size:.5rem; letter-spacing:.18em; color:#d5e5ff; }
.stream-countdown .eyebrow { color:#c4d9ec; font-size:.65rem; margin-top:10px; }
.stream-countdown h3 { color:#fff; font-size:clamp(2rem,4vw,3.4rem); line-height:1.15; }
.countdown-schedule { color:#e0e7ec; font-size:.95rem; }
.countdown-clock { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:min(100%,500px); gap:16px; margin-block:8px; }
.countdown-clock>div { border-top:1px solid #ffffff40; padding-top:18px; }
.countdown-clock span { display:block; font-size:clamp(2rem,4vw,3.7rem); font-weight:500; font-variant-numeric:tabular-nums; line-height:1.1; }
.countdown-clock small { display:block; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#c4d9ec; margin-top:12px; }
.countdown-next { color:#c4d9ec; font-size:.8rem; }
.stream-countdown noscript a { text-decoration:underline; }
@media(max-width:760px) {
  .stream-frame:has(.stream-countdown:not([hidden])) { aspect-ratio:auto; min-height:440px; }
  .stream-countdown { min-height:440px; gap:16px; padding:32px 18px; }
  .countdown-schedule { max-width:28ch; font-size:.88rem; }
  .countdown-clock { gap:10px; }
  .countdown-clock small { font-size:.55rem; }
  .countdown-next { font-size:.72rem; }
}
.stream-help { display: flex; justify-content: space-between; align-items: start; gap: 32px; padding-top: 24px; }
.stream-help p { max-width: 68ch; color: var(--muted); font-size: .85rem; }
.stream-help a { flex-shrink: 0; }
.stream-controls { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.stream-reload { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0; color: var(--ink); cursor: pointer; }
.stream-reload:hover { color: var(--blue); }
.stream-reload[hidden] { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.online-messages { padding-block: 48px; background: #ebece6; border-block: 1px solid var(--line); }
.online-messages-inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.online-messages h2 { font-size: clamp(2.25rem, 3.5vw, 3.5rem); margin-block: 16px; }
.online-messages p:not(.eyebrow) { max-width: 60ch; color: var(--muted); }
.message-actions { display: flex; flex-direction: column; align-items: start; gap: 16px; }
@media (max-width: 760px) {
  .online-intro-grid, .online-messages-inner { grid-template-columns: 1fr; gap: 32px; }
  .online-intro h1 { font-size: clamp(2.8rem, 9vw, 4rem); }
  .online-intro { padding-block: 40px 32px; }
  .watch-heading, .stream-help { flex-direction: column; align-items: start; gap: 12px; }
  .watch-heading .eyebrow { letter-spacing: .1em; }
  .stream-help a { flex-shrink: 1; }
}