/* Home-only automatic density. CSS viewport sizes track browser zoom without
   a preference toggle; keep the scene deck's viewport-height scroll geometry. */
@media (min-width: 1024px) and (max-width: 1550px),
       (min-width: 1024px) and (max-height: 870px) {
  :root {
    --page-pad: 2rem;
    --home-density-gap: 0.6rem;
    --home-density-body: 0.8rem;
    --home-density-feature: 0.74rem;
    --home-density-title: clamp(2.6rem, 4.7vw, 4.3rem);
    --home-density-hero: clamp(2.3rem, 3.5vw, 3.5rem);
    --home-density-control: 32px;
    --home-density-frame: 78px;
  }

  .site-header.cinematic-site-header { padding-block: 0.45rem; }
  .cinematic-site-header .brand-lockup { min-height: 36px; gap: 0.55rem; }
  .cinematic-site-header .logo-tile { width: 30px; height: 30px; flex-basis: 30px; }
  .cinematic-site-header .logo-tile img { width: 29px; height: 29px; }
  .cinematic-site-header .site-title { font-size: 1.55rem; }
  .cinematic-site-header .header-utilities { padding: 0; }
  .cinematic-site-header :is(.utility-link, .labs-switcher summary) {
    min-height: 30px; padding-inline: 0.5rem; font-size: 0.62rem; gap: 0.35rem;
  }
  .cinematic-site-header :is(.labs-menu, .pt-account-menu) {
    max-height: calc(100dvh - 5rem); overflow-y: auto;
  }

  .ov-inner {
    width: min(1040px, calc(100% - 10rem));
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 4.5rem 0 0; gap: 3rem; text-align: left;
  }
  .ov-copy { gap: var(--home-density-gap); align-items: stretch; margin: 0; min-width: 0; }
  .ov-kicker { justify-content: flex-start; font-size: 0.56rem; gap: 0.55rem; letter-spacing: 0.16em; }
  .ov-title--descriptive { font-size: var(--home-density-hero); }
  .ov-intro { gap: var(--home-density-gap); justify-items: start; }
  .ov-lede { font-size: var(--home-density-body); line-height: 1.4; text-align: left; }
  .ov-actions, .ov-credits { justify-content: flex-start; gap: 1rem; flex-wrap: wrap; }
  .ov-primary, .ov-secondary, .scene-cta, .pro-reel__subscribe {
    min-height: var(--home-density-control); font-size: 0.62rem; letter-spacing: 0.1em; gap: 0.5rem;
  }
  .ov-primary, .scene-cta, .pro-reel__subscribe { padding-inline: 0.9rem; }
  .ov-account { width: 24px; height: 24px; font-size: 13px; }
  .ov-credits span { font-size: 0.56rem; }
  .ov-fan { min-height: 42svh; margin-top: 0; }
  .fan-card { width: clamp(105px, 9vw, 145px); }
  .f2 { --tx: -85px; }
  .f3 { --tx: 85px; }
  .f4 { --tx: -150px; }
  .f5 { --tx: 150px; }
  .ov-cue { padding-block: 0.65rem; }
  .ov-cue-line { height: 20px; }
  .strip-hud { height: 28px; }
  .strip::before { top: 32px; }
  .reel-frame, .strip-track > img { height: var(--home-density-frame); }
  .strip-gate { top: 36px; height: calc(var(--home-density-frame) + 18px); }

  .scene .scene-grid, .pro-reel__inner {
    width: min(1040px, calc(100% - 10rem));
    margin-inline: auto;
    padding: 4.5rem 0 3rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }
  .scene:nth-of-type(even) .scene-copy { padding-right: 0; }
  .scene-hub .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene .scene-copy { gap: var(--home-density-gap); min-width: 0; }
  .scene .scene-title, .pro-reel__title { font-size: var(--home-density-title); }
  .scene-lede, .pro-reel__lede { font-size: var(--home-density-body); line-height: 1.4; }
  .scene-features, .scene-hub .scene-features, .pro-reel__grid { gap: 0.2rem; margin-top: 0.15rem; }
  .scene .f-row { grid-template-columns: 34px minmax(0, 1fr); gap: 0.65rem; padding-block: 0.4rem; }
  .f-ico, .pro-reel__ico { width: 34px; height: 34px; }
  .f-ico .material-symbols-rounded, .pro-reel__ico .material-symbols-rounded { font-size: 20px; }
  .f-row strong, .pro-reel__item strong { font-size: 0.92rem; line-height: 1.15; }
  .f-row p, .pro-reel__item p { font-size: var(--home-density-feature); line-height: 1.35; }
  .scene .scene-art { height: min(46svh, 410px); min-height: 0; }
  .scene .scene-art:not(.art-hub) { width: min(100%, 54svh); justify-self: center; }
  .hub-cinema--desktop { width: 110%; left: -5%; }
  .pro-reel__grid { margin-right: 0; }
  .pro-reel__item { padding-block: 0.4rem; grid-template-columns: 34px minmax(0, 1fr); gap: 0 0.65rem; }
  .pro-reel__lede { margin-top: 0.75rem; }
  .pro-reel__price { margin-top: 1rem; padding: 0.65rem 0.85rem; }
  .pro-reel__price strong { font-size: clamp(2.8rem, 4vw, 3.8rem); }
  .pro-reel__price span { font-size: 0.85rem; }
  .scene-rail { right: 0.65rem; gap: 0.4rem; }
  .scene-rail__head, .scene-rail__count { font-size: 0.43rem; letter-spacing: 0.12em; opacity: 0.55; }
  .scene-rail__frames { gap: 0.2rem; }
  .scene-rail__frames::before { background: rgba(255,255,255,0.12); }
  .scene-rail a { min-height: 22px; gap: 0.3rem; opacity: 0.45; }
  .scene-rail a:is(.active, :hover, :focus-visible) { opacity: 1; }
  .scene-rail .sr-num { font-size: 0.74rem; letter-spacing: 0.04em; }
  .scene-rail .sr-copy { min-width: 7rem; }
  .scene-rail .sr-copy small { font-size: 0.38rem; letter-spacing: 0.12em; }
  .scene-rail .sr-name { font-size: 0.72rem; letter-spacing: 0.06em; }
  .scene-rail .sr-tick { width: 6px; background: rgba(255,255,255,0.25); }
  .scene-rail a.active .sr-tick { width: 3px; height: 12px; background: var(--c); }
  .scene-rail a.active .sr-tick::before { width: 5px; }
  .scene-rail a:focus-visible .sr-copy { opacity: 1; transform: none; }
  .site-footer { padding-top: 2.5rem; padding-bottom: 1.25rem; }
  .ft-inner { gap: 2rem; padding-bottom: 1.5rem; }
  .ft-bottom { padding-top: 1rem; }
}

@media (min-width: 1024px) and (max-width: 1320px),
       (min-width: 1024px) and (max-height: 770px) {
  :root {
    --page-pad: 1.5rem;
    --home-density-gap: 0.42rem;
    --home-density-body: 0.74rem;
    --home-density-feature: 0.7rem;
    --home-density-title: clamp(2.3rem, 4vw, 3.5rem);
    --home-density-hero: clamp(2rem, 3.1vw, 2.85rem);
    --home-density-control: 32px;
    --home-density-frame: 62px;
  }
  .site-header.cinematic-site-header { padding-block: 0.3rem; }
  .cinematic-site-header .brand-lockup { min-height: 32px; }
  .cinematic-site-header .site-title { font-size: 1.4rem; }
  .cinematic-site-header :is(.utility-link, .labs-switcher summary) { min-height: 28px; font-size: 0.58rem; }
  .ov-inner { width: min(880px, calc(100% - 10rem)); padding-top: 3.8rem; gap: 2.5rem; }
  .ov-fan { min-height: 38svh; }
  .fan-card { width: clamp(95px, 8vw, 125px); }
  .scene .scene-grid, .pro-reel__inner { width: min(880px, calc(100% - 10rem)); padding-top: 3.8rem; padding-bottom: 2.5rem; gap: 2.5rem; }
  .scene .f-row, .pro-reel__item { padding-block: 0.3rem; }
  .scene .scene-art { height: min(42svh, 340px); }
  .scene .scene-art:not(.art-hub) { width: min(100%, 47svh); }
  .hub-cinema--desktop { width: 96%; left: 2%; }
  .f-row strong, .pro-reel__item strong { font-size: 0.84rem; }
  .scene-rail__frames { gap: 0.1rem; }
  .scene-rail .sr-num { font-size: 0.68rem; }
  .scene-rail .sr-name { font-size: 0.65rem; }
  .site-footer { padding-top: 2rem; }
}

/* The existing tablet layout is stacked; reduce its spacing without switching
   back to the desktop deck or reducing mobile touch controls. */
@media (min-width: 761px) and (max-width: 1023px) {
  .ov-inner { padding-top: 2rem; }
  .ov-copy { gap: 0.75rem; }
  .ov-title--descriptive { font-size: clamp(2.3rem, 4.4vw, 2.8rem); }
  .ov-lede, .scene-lede { font-size: 0.82rem; }
  .ov-fan { min-height: 30svh; }
  .scene .scene-grid, .pro-reel__inner { padding-top: 3rem; padding-bottom: 3rem; gap: 1rem; }
  .scene .scene-title, .pro-reel__title { font-size: 3rem; }
  .scene .scene-copy { gap: 0.7rem; }
  .scene .f-row { padding-block: 0.4rem; }
  .scene .scene-art { height: clamp(190px, 27svh, 270px) !important; }
}

/* Footer type and logos follow the same density as the content above. */
@media (min-width: 761px) and (max-width: 1550px),
       (min-width: 761px) and (max-height: 870px) {
  .site-footer .brand-lockup { gap: 0.5rem; min-height: 30px; }
  .site-footer .brand-lockup .logo-tile { width: 30px; height: 30px; flex-basis: 30px; }
  .site-footer .brand-lockup .logo-tile img { width: 29px; height: 29px; }
  .site-footer .brand-lockup .site-title { font-size: 1.45rem; }
  .ft-brand { gap: 0.7rem; }
  .ft-tagline { font-size: 0.78rem; line-height: 1.4; }
  .ft-cols { gap: 1.15rem; }
  .ft-col { padding-top: 0.65rem; }
  .ft-label { font-size: 0.58rem; letter-spacing: 0.13em; }
  .ft-links { gap: 0.42rem; margin-top: 0.65rem; }
  .ft-links a, .ft-links span { font-size: 0.75rem; }
  .ft-scenes a { gap: 0.4rem; }
  .ft-scenes .material-symbols-rounded { font-size: 15px; }
  .ft-hosts img { width: 19px; height: 19px; }
  .ft-credits img { height: 17px; max-width: 6.5rem; }
  .ft-credits img[alt="fanart.tv"] { height: 22px; }
  .ft-community img { height: 28px; }
  .ft-copy { font-size: 0.68rem; }
  .ft-meta { font-size: 0.56rem; letter-spacing: 0.13em; }
}

@media (min-width: 761px) and (max-width: 1320px),
       (min-width: 761px) and (max-height: 770px) {
  .ft-tagline { font-size: 0.72rem; }
  .ft-links a, .ft-links span { font-size: 0.68rem; }
  .ft-links { gap: 0.35rem; }
  .ft-label { font-size: 0.54rem; }
  .ft-copy { font-size: 0.62rem; }
  .ft-meta { font-size: 0.52rem; }
  .ft-community img { height: 24px; }
  .site-footer .brand-lockup .site-title { font-size: 1.25rem; }
}

/* All marks use the font's capital height and share its baseline. */
.ov-title .ov-server {
 display: inline-block;
 white-space: nowrap;
}
.ov-title .ov-server img {
 display: inline-block;
 width: .7em;
 height: .7em;
 width: 1cap;
 height: 1cap;
 margin-left: .14em;
 object-fit: contain;
 vertical-align: baseline;
}
.ov-title .ov-server img[src$="plex.svg"] {
 width: .43em;
 width: .61cap;
 object-fit: cover;
}
.ov-title .title-line { line-height: 1; }
.ov-title .ov-server + .ov-server { margin-left: .22em; }.ov-copy .ov-intro { margin-top: .35rem; }
.ov-copy .ov-lede { max-width: 46ch; }