/* Watch Page — page-only rules, moved out of the inline <style>
   during the Sites signal retrofit. Load order is unchanged: this sheet sits
   exactly where the <style> block was. */
.hero .hero-content { max-width: 640px; }

/* ---- Watch page ----------------------------------------------------------- */
body.page-watch .nav-links, body.page-watch .nav-actions .btn-gold { display: none !important; }
body.page-watch .footer-top, body.page-watch .footer-news { display: none !important; }
body.page-watch .footer { padding-top: 34px; }
.wp-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: var(--size-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.wp-crumb:hover { color: var(--gold-mustard); }
.wp-crumb svg { width: 15px; height: 15px; }
.wp-stage { display: grid; grid-template-columns: minmax(0, 1fr) 0px; padding: calc(var(--nav-height) + 18px) 0 0; }
.wp-stage.chat-open { grid-template-columns: minmax(0, 1fr) 372px; }
.wp-player { position: relative; width: 100%; height: min(56.25vw, calc(100vh - var(--nav-height) - 150px)); background: #000; overflow: hidden; }
.wp-player video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.wp-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 14px; padding: 18px 22px 16px; background: linear-gradient(180deg, rgba(6,6,6,0) 0%, rgba(6,6,6,0.82) 62%, rgba(6,6,6,0.94) 100%); opacity: 0; transition: opacity 240ms var(--ease-out); }
.wp-player.is-paused .wp-controls, .wp-player.controls-on .wp-controls, .wp-controls:focus-within { opacity: 1; }
.wp-controls .gold-slider { flex: 1; }
.wp-badge { position: absolute; left: 20px; top: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: var(--size-meta); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-body); background: rgba(9,9,9,0.72); border: 1px solid var(--border-bevel-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-mustard); box-shadow: 0 0 8px rgba(255,210,107,0.8); }
.wp-gate { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 40px; background: rgba(6,6,6,0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wp-gate.is-on { display: flex; }
.wp-gate { overflow-y: auto; }
.wp-player:has(.wp-gate.is-on) .wp-controls { opacity: 0; pointer-events: none; }
.wp-gate > * { flex: none; }
.wp-gate h2 { font-size: clamp(calc(var(--size-heading) * 0.8125), 3vw, calc(var(--size-heading) * 1.25)); font-weight: 900; letter-spacing: -0.03em; }
.wp-gate p { max-width: 430px; font-size: calc(var(--size-body) * 1.0357); color: var(--text-body); }
.wp-gate-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-mustard); border: 1px solid var(--border-gold); background: rgba(255,255,255,0.03); }
.wp-chat { overflow: hidden; display: flex; flex-direction: column; background: var(--color-surface-1); border-left: 1px solid var(--border-bevel-strong); height: min(56.25vw, calc(100vh - var(--nav-height) - 150px)); opacity: 0; transform: translateX(14px); transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); }
.wp-stage.chat-open .wp-chat { opacity: 1; transform: none; }
.wp-stage:not(.chat-open) .wp-chat { border-left: 0; }
.wp-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-bevel-strong); }
.wp-chat-title { display: flex; align-items: center; gap: 9px; font-size: var(--size-small); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-heading); }
.wp-chat-count { font-size: calc(var(--size-meta) * 1.0455); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.wp-pin { margin: 14px 16px 0; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--border-gold); background: rgba(255,210,107,0.05); }
.wp-pin-kind { font-size: calc(var(--size-meta) * 0.9091); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-mustard); }
.wp-pin-text { margin-top: 5px; font-size: calc(var(--size-body) * 0.9643); line-height: 1.45; color: var(--text-heading); }
.wp-feed { flex: 1; min-height: 220px; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 13px; }
.wp-msg { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.wp-msg-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--size-meta); font-weight: 800; color: var(--gold-mustard); background: rgba(255,255,255,0.03); border: 1px solid var(--border-bevel-strong); }
.wp-msg-who { font-size: var(--size-small); font-weight: 700; color: var(--text-heading); }
.wp-host { margin-left: 6px; font-size: calc(var(--size-meta) * 0.8636); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #2a1e08; background: var(--gold-metallic-135); padding: 2px 6px; border-radius: 999px; }
.wp-msg-text { margin-top: 3px; font-size: calc(var(--size-body) * 0.9643); line-height: 1.45; color: var(--text-body); }
.wp-compose { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border-bevel-strong); }
.wp-compose input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 10px; font: inherit; font-size: calc(var(--size-body) * 0.9643); color: var(--text-heading); background: rgba(255,255,255,0.02); border: 1px solid var(--border-bevel-strong); box-shadow: var(--well-inset); }
.wp-compose input:focus { outline: none; border-color: var(--border-gold); }
.wp-locked { flex: none; padding: 14px 16px; border-top: 1px solid var(--border-bevel-strong); font-size: calc(var(--size-small) * 1.0833); color: var(--text-muted); }
body.view-paid .wp-locked { display: none !important; }
body:not(.view-paid) .wp-compose { display: none !important; }
.wp-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: start; }
.wp-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wp-title { margin-top: 12px; font-size: clamp(calc(var(--size-heading) * 0.9375), 3.4vw, calc(var(--size-heading) * 1.4375)); font-weight: 900; letter-spacing: -0.035em; line-height: 1.02; }
.wp-syn { margin-top: 14px; max-width: 68ch; font-size: calc(var(--size-body) * 1.1071); line-height: 1.62; color: var(--text-body); }
.wp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Ad pill fades out once the title is rolling */
.wp-badge { transition: opacity 400ms var(--ease-out); }
.wp-badge.is-gone { opacity: 0; pointer-events: none; }
/* .wp-nextup lives in site.css — the binge Watch Party uses the same card */
/* End of a series: the send-off frame over the last still */
.wp-end-card { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 40px 32px; text-align: center; background: rgba(6,6,6,0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wp-end-card.is-on { display: flex; }
/* Nothing left to control once the run is over */
body.wp-ended .wp-controls { opacity: 0; pointer-events: none; }
.wp-end-card img { width: 86px; margin-bottom: 6px; }
.wp-end-card h3 { font-size: clamp(calc(var(--size-heading) * 0.6875), 2.6vw, var(--size-heading)); font-weight: 900; letter-spacing: -0.035em; color: var(--text-heading); }
.wp-end-card p { max-width: 44ch; margin-top: 10px; font-size: calc(var(--size-body) * 1.0357); line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.wp-end-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.wp-end-note { margin-top: 16px; font-size: var(--size-small); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-mustard); }
/* Skip 10s buttons: circular arrow with the number inside */
.pb-skip { position: relative; }
.pb-skip svg { width: 19px; height: 19px; }
.pb-skip-n { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); font-size: calc(var(--size-meta) * 0.7273); font-weight: 800; letter-spacing: -0.02em; pointer-events: none; }
.wp-ctl-break { display: none; }
.pb-btn.is-on { color: var(--gold-mustard); }
.pb-btn.is-on svg { filter: drop-shadow(0 0 6px rgba(255,210,107,0.6)); }
/* Caption strip */
.wp-cc-line { position: absolute; left: 50%; bottom: 84px; z-index: 5; transform: translateX(-50%); max-width: min(80%, 720px); padding: 8px 16px; border-radius: 8px; text-align: center; font-size: calc(var(--size-body) * 1.1429); font-weight: 600; line-height: 1.35; color: #fff; background: rgba(6,6,6,0.72); display: none; }
.wp-player.cc-on .wp-cc-line { display: block; }
/* Loader */
.wp-loader { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #060606; transition: opacity 320ms var(--ease-out); }
.wp-loader-note { font-size: calc(var(--size-meta) * 1.0455); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.wp-loader.is-gone { opacity: 0; pointer-events: none; }
.wp-spin { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,210,107,0.18); border-top-color: var(--gold-mustard); animation: wpSpin 760ms linear infinite; }
@keyframes wpSpin { to { transform: rotate(360deg); } }
/* Chat has nowhere to go while the video fills the viewport */
body.wp-expanded #wpChatBtn { display: none; }
/* Expand: fill the viewport without real fullscreen (works inside previews) */
body.wp-expanded { overflow: hidden; }
.wp-player.is-expanded { position: fixed; inset: 0; z-index: 400; width: 100vw; height: 100vh; border-radius: 0; }
body.wp-expanded .app-tabbar { display: none !important; }
/* Signed-out chat: the thread is blurred, the frame around it stays readable */
body:not(.view-paid) .wp-feed { filter: blur(7px); pointer-events: none; user-select: none; }
@media (max-width: 1024px) {
  .wp-stage.chat-open { grid-template-columns: minmax(0, 1fr) 320px; }
  .wp-info { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wp-stage, .wp-stage.chat-open { grid-template-columns: minmax(0, 1fr); }
  /* The gate needs a taller player on phones — it stays over the key art */
  .wp-player:has(.wp-gate.is-on) { height: 74vw; min-height: 430px; }
  .wp-gate { padding: 26px 18px; gap: 11px; }
  .wp-gate h2 { font-size: calc(var(--size-subhead) * 1.2222); }
  .wp-gate p { font-size: calc(var(--size-body) * 0.9643); }
  .wp-gate .wp-actions { width: 100%; flex-direction: column; }
  .wp-gate .wp-actions .btn { width: 100%; justify-content: center; }
  .wp-cc-line { bottom: 70px; font-size: calc(var(--size-small) * 1.0833); }
  /* Expanded video turns sideways so the phone reads it landscape */
  body.wp-expanded .wp-player.is-expanded { position: fixed; inset: auto; top: 50%; left: 50%; width: 100vh; height: 100vw; min-height: 0; max-height: none; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center center; }
  .wp-chat { height: 0; border-left: 0; border-top: 1px solid var(--border-bevel-strong); transform: none; transition: height 300ms var(--ease-out), opacity 200ms var(--ease-out); }
  .wp-stage.chat-open .wp-chat { height: 62vh; }
  /* Row 1 is play / seek / sound / expand — the bar gets the room.
     Everything else drops to a second row. */
  .wp-controls { flex-wrap: wrap; gap: 9px 10px; padding: 12px 12px 14px; }
  .wp-controls .pb-btn { width: 34px; height: 34px; }
  .wp-controls .pb-btn svg { width: 15px; height: 15px; }
  .wp-controls .pb-skip svg { width: 17px; height: 17px; }
  #wpToggle { order: 1; }
  #wpSeek { order: 2; flex: 1 1 80px; min-width: 0; }
  #wpMute { order: 3; }
  #wpFull { order: 4; }
  .wp-ctl-break { display: block; order: 5; flex: 0 0 100%; height: 0; }
  .wp-controls .pb-time { order: 6; min-width: 0; font-size: var(--size-meta); }
  #wpBack10 { order: 7; }
  #wpFwd10 { order: 8; }
  #wpCC { order: 9; }
  #wpChatBtn { order: 10; }
}