/* =========================================================
   Spellbinding Media — Site Shell Stylesheet
   Style direction: Apple TV-inspired — full-bleed hero art,
   dark chrome, poster grid below.
   ========================================================= */

:root{
  /* Brand palette — Option A: Oxblood & Brass (confirmed 2026-07-03) */
  --color-oxblood: #5C1A28;
  --color-navy: #1B1F2E;
  --color-brass: #C9A468;
  --color-parchment: #F0E6D8;

  --bg: var(--color-navy);
  --bg-elevated: #252a40; /* lighter navy tint, for cards/surfaces */
  --text: var(--color-parchment);
  --text-dim: rgba(240, 230, 216, .62);
  --accent: var(--color-brass);
  --accent-deep: var(--color-oxblood);

  --nav-height: 64px;
  --radius: 12px;
}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

a{
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   Logo — sits over the hero art, top-right.
   ========================================================= */
.site-logo{
  /* Absolute (not fixed) so it scrolls away with the hero on this page,
     rather than sticking to the viewport for the whole scroll. */
  position: absolute;
  top: 1.75rem;
  right: 2rem;
  z-index: 500;
}
.site-logo img{
  display: block;
  width: 160px;
  height: auto;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.55));
}

@media (max-width: 640px){
  .site-logo{
    top: 1.25rem;
    right: 1.25rem;
  }
  .site-logo img{
    width: 110px;
  }
}

/* =========================================================
   Icon menu — top-left, opposite the logo. Public/open-page
   variant: toggle + 2 items (language, sign in). A longer,
   different menu replaces this once a visitor is signed in.
   Fixed to the viewport (deliberately unlike the logo) since
   this is the one persistent way to reach those two controls.
   Same ring size/color as the hero's Series Details/Episode
   List icons (.btn-icon) — kept as separate rules here rather
   than sharing that class, since .btn-icon's hover transform
   would fight with this component's open/closed transforms.
   ========================================================= */
.icon-menu{
  position: fixed;
  top: 1.75rem;
  left: 2rem;
  width: 45px;
  height: 45px;
  z-index: 700; /* above hero content (logo is 500) */
}
.menu-toggle,
.icon-menu .menu-item{
  position: absolute;
  left: 0;
  top: 0;
  width: 45px;
  height: 45px;
  display: block;
  border-radius: 50%;
  /* Semi-transparent navy backing plate — the brass-ring icons have a
     transparent center, so over a busy hero image or body text they were
     hard to read. This fills the circle behind each icon so it stays
     legible regardless of what's behind it, without hiding the ring
     artwork itself (drawn on top via the <img>). */
  background-color: rgba(27, 31, 46, .5); /* var(--color-navy) at 50% */
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.menu-toggle img,
.icon-menu .menu-item img{
  display: block;
  width: 100%;
  height: 100%;
}
.menu-toggle{
  z-index: 2;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform .25s ease;
}
.icon-menu .menu-item{
  opacity: 0;
  pointer-events: none;
  transform: translateY(0) scale(.7);
  transition: transform .25s ease, opacity .2s ease;
}
.icon-menu .menu-item:hover{
  transform: translateY(calc(var(--i) * 58px)) scale(1.08);
}
.icon-menu.open .menu-toggle{
  transform: rotate(45deg); /* turns the + into an X, no separate asset needed */
}
.icon-menu.open .menu-item{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(calc(var(--i) * 58px)) scale(1);
}

@media (max-width: 640px){
  .icon-menu{
    top: 1.25rem;
    left: 1.25rem;
    width: 72px;
    height: 72px;
  }
  .menu-toggle,
  .icon-menu .menu-item{
    width: 72px;
    height: 72px;
  }
  .icon-menu .menu-item:hover{
    transform: translateY(calc(var(--i) * 96px)) scale(1.08);
  }
  .icon-menu.open .menu-item{
    transform: translateY(calc(var(--i) * 96px)) scale(1);
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 2rem 5rem;
  overflow: hidden;
}
.hero-bg{
  /* Real <video> (not a CSS background) so autoplay/loop/poster all work
     natively and the poster frame still gives crawlers/no-JS visitors a
     still image. Alt-text equivalent now lives on the .hero section's
     aria-label since <video> has no alt attribute. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Anchor to the top so subjects near the top of the art are never
     cropped — any cover-scaling overflow is trimmed from the bottom
     instead, where the scrim already fades to the page background. */
  object-position: center top;
}
/* Two hero videos stacked in the same box (both position: absolute/inset:
   0 via .hero-bg above); only one is display: block at a time. Default
   (desktop/landscape) shows the horizontal cut; narrow/portrait screens
   swap to the vertical cut — same breakpoint the old <picture> used. */
.hero-bg--vertical{
  display: none;
}
@media (max-width: 1024px) and (orientation: portrait){
  .hero-bg--horizontal{
    display: none;
  }
  .hero-bg--vertical{
    display: block;
  }
}
.hero-scrim{
  position: absolute;
  inset: 0;
  /* Left side stays clear so the artwork reads on its own; right side
     (where the text sits) darkens toward the page background for
     legibility. Layered with the existing bottom fade. */
  background:
    linear-gradient(to right, rgba(27,31,46,0) 38%, var(--bg) 92%),
    linear-gradient(to top, var(--bg) 5%, rgba(27,31,46,0) 55%);
}
.hero-content{
  position: relative;
  max-width: 640px;
  /* Default (wider/"horizontal" screens): the whole block still sits on
     the right side of the hero (via .hero's justify-content: flex-end
     below), but within that column the logo/buttons are centered and
     the synopsis reads left-justified rather than everything being
     right-aligned. Mobile keeps the original all-right-aligned layout —
     see the max-width: 640px override further down. */
  text-align: center;
}
.hero-content h1{
  margin: 0;
  display: block;
  /* The <h1> is just a semantic wrapper around the title-treatment
     logo image; it carries no visual styling of its own. */
}
.hero-title{
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1rem;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.hero-logo{
  display: inline-block;
  width: min(420px, 70vw);
  height: auto;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.5));
}
.hero-tagline{
  font-size: 1.15rem;
  color: var(--text-dim);
  margin-bottom: 1.75rem;
  max-width: 46ch;
  /* Left-justified synopsis, flush to the left edge of .hero-content's
     column (not centered along with the logo/buttons, not right-aligned
     like the old layout). See mobile override below for the original
     right-aligned behavior. */
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
.hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.btn{
  display: inline-block;
  padding: .6rem 20px;
  border-radius: var(--radius);
  border: none;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease;
}
.btn:hover{
  transform: scale(1.05);
}
.btn-primary{
  background: var(--color-brass);
  color: var(--color-navy);
}
/* Icon-only hero CTAs — play / series details / episode list — so the hero
   carries no copy that needs translating per language. Each icon's
   accessible name lives on its parent <a>'s aria-label. */
.btn-play,
.btn-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
  transition: transform .15s ease;
}
.btn-play:hover,
.btn-icon:hover{
  transform: scale(1.07);
}
.btn-play-icon,
.btn-icon-img{
  display: block;
  width: 100%;
  height: 100%;
}
.rating-badge{
  font-size: .75rem;
  padding: .3rem .6rem;
  border: 1px solid rgba(240,230,216,.25);
  border-radius: 6px;
  color: var(--text-dim);
  letter-spacing: .04em;
}
.rating-badge.small{
  font-size: .7rem;
  padding: .15rem .4rem;
}
/* Hero rating badge sized to 60% of the base .rating-badge (scoped here so
   the poster-grid tile's .small variant is unaffected). */
.hero-actions .rating-badge{
  font-size: .45rem;
  padding: .18rem .36rem;
  border-radius: 4px;
  letter-spacing: .024em;
}

/* =========================================================
   Series grid
   ========================================================= */
.series-section{
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}
.section-title{
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.series-grid{
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
}
.series-card{
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
  transition: transform .2s ease, box-shadow .2s ease;
  flex: 0 0 calc((100% - 2rem) / 2.5);
  scroll-snap-align: start;
}
.series-card:hover{
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.series-poster{
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
}
.series-poster-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
}
.series-poster-wrap img{
  /* Real <img> elements (not CSS backgrounds) — indexable by image search
     and readable via alt text. The placeholder tile below stays a plain
     div since it has no image to show. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}
.series-poster--placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #2a3049, var(--bg));
  color: var(--text-dim);
  font-size: .85rem;
  text-align: center;
  padding: 1rem;
}
.series-info{
  padding: .9rem 1rem 1.1rem;
}
.series-info h3{
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .3rem;
}
.series-meta{
  font-size: .8rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.series-card--placeholder{
  cursor: default;
  opacity: .6;
  flex: 0 0 calc((100% - 2rem) / 2.5);
  scroll-snap-align: start;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  padding: 2rem;
  text-align: center;
  color: var(--text-dim);
  font-size: .8rem;
  border-top: 1px solid rgba(240,230,216,.08);
}
.footer-watermark{
  display: block;
  width: 140px;
  height: auto;
  margin: 0 auto .85rem;
}
.footer-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.25rem;
  max-width: 640px;
  /* Extra bottom margin here (vs. the watermark's .85rem) is the
     "spacing before the watermark" the nav needs now that it sits above
     the logo instead of below it. */
  margin: 0 auto 1.75rem;
}
.footer-nav a{
  color: var(--text-dim);
  text-decoration: none;
}
.footer-nav a:hover{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lang-override{
  margin-top: .6rem;
  font-size: .75rem;
}
.lang-override a{
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .8;
}
.lang-override a:hover{
  opacity: 1;
}

/* =========================================================
   Simple utility pages (language picker, sign-in placeholder,
   and similar minimal pages that aren't the main landing page)
   ========================================================= */
.simple-page{
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 2rem 4rem;
}
.simple-page-title{
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 2rem;
  max-width: 44ch;
}
/* Visually hidden but still readable by screen readers — used for a
   static heading copy when the visible version rotates/animates. */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.lang-rotator-item{
  display: none;
}
.lang-rotator-item.is-active{
  display: inline-block;
  animation: langRotatorFadeIn .5s ease;
}
@keyframes langRotatorFadeIn{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}
.simple-page-body{
  color: var(--text-dim);
  max-width: 46ch;
  margin-bottom: 2rem;
}
.simple-page-back a{
  font-size: .85rem;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.simple-page-back a:hover{
  color: var(--text);
}

/* =========================================================
   About page — a real article layout (left-aligned, readable
   measure) rather than the centered .simple-page treatment used
   by short utility pages.
   ========================================================= */
.about-page{
  max-width: 720px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem;
}
.about-hero{
  margin-bottom: 2.5rem;
}
.about-hero h1{
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 1rem;
}
.about-lede{
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 58ch;
}
.about-section{
  margin-bottom: 2.5rem;
}
.about-section h2{
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: .85rem;
}
.about-section p{
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 62ch;
}
.about-section p:last-child{
  margin-bottom: 0;
}
.about-section a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.about-section a:hover{
  color: var(--accent);
}
.about-faq-item{
  margin-bottom: 1.5rem;
}
.about-faq-item:last-child{
  margin-bottom: 0;
}
.about-faq-item h3{
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.about-faq-item p{
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 62ch;
}
}
.about-back{
  text-align: left;
}
@media (max-width: 640px){
  .about-page{
    padding: 7rem 1.25rem 3rem;
  }
}

/* =========================================================
   Legal pages (Terms of Use, and future pages like it — Privacy
   Policy, Cookie Policy) — same left-aligned readable-article
   treatment as .about-page, but for long sectioned legal text
   rendered from a structured content array (see s/render_terms.php)
   rather than hand-written markup: numbered h2/h3 section headings,
   an arbitration/class-action notice callout, and an ALL CAPS style
   for disclaimer/liability paragraphs that must render as-is.
   ========================================================= */
.legal-page{
  max-width: 720px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem;
}
.legal-header{
  margin-bottom: 1.5rem;
}
.legal-header h1{
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: .75rem;
}
.legal-meta{
  color: var(--text-dim);
  font-size: .85rem;
  font-style: italic;
}
.legal-notice{
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid rgba(201, 164, 104, .35);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 1.5rem 0 2.5rem;
  max-width: 62ch;
}
.legal-h1{
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--accent);
  margin: 2.25rem 0 .85rem;
}
.legal-h2{
  font-size: 1rem;
  font-weight: 600;
  margin: 1.5rem 0 .5rem;
}
.legal-page p{
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 62ch;
}
.legal-caps{
  font-size: .85rem;
  letter-spacing: .01em;
}
.legal-list{
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0 0 1rem 1.25rem;
  max-width: 62ch;
}
.legal-list li{
  margin-bottom: .4rem;
}
.legal-page a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page a:hover{
  color: var(--accent);
}
.legal-back{
  text-align: left;
  margin-top: 2rem;
}
@media (max-width: 640px){
  .legal-page{
    padding: 7rem 1.25rem 3rem;
  }
}

/* Support form styling — matches legal-page layout with form-specific enhancements */
#support-form{
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.form-group{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.form-group label{
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea{
  padding: .75rem 1rem;
  border: 1px solid rgba(201, 164, 104, .35);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: .95rem;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201, 164, 104, .15);
}

.form-group textarea{
  resize: vertical;
  min-height: 140px;
}

.error-message{
  font-size: .85rem;
  color: #e74c3c;
  display: none;
  margin-top: .25rem;
}

/* Support form submit button */
#support-form .btn-primary{
  align-self: center;
  margin-top: .5rem;
}

/* Thank You page — centered layout */
.thank-you-page{
  text-align: center;
}

.thank-you-page h1{
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  color: var(--text);
}

.thank-you-page > p{
  max-width: 640px;
  margin: 0 auto 2.5rem;
  color: var(--text-dim);
  line-height: 1.7;
  font-size: 1rem;
}

.thank-you-page .simple-page-back{
  text-align: center;
}

@media (max-width: 640px){
  #support-form{
    gap: 1.5rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea{
    font-size: 16px; /* prevents mobile zoom on focus */
  }
}

.lang-picker{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
  max-width: 320px;
  margin-bottom: 2.5rem;
}
.lang-picker-item{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.5rem;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid rgba(240,230,216,.1);
  transition: transform .15s ease, border-color .15s ease;
}
.lang-picker-item:hover{
  transform: translateY(-2px);
  border-color: var(--color-brass);
}
.lang-picker-native{
  font-size: 1.1rem;
  font-weight: 600;
}

@media (max-width: 640px){
  .hero{
    min-height: 70vh;
    /* Container itself is now centered on mobile (2026-07-06), not just
       its inner logo/buttons — a further step past the earlier "box
       stays right, contents center" arrangement that was meant for wide/
       "horizontal" screens. Symmetric 1rem side padding to match
       (previously right-only, back when the box was right-aligned). */
    justify-content: center;
    padding: 0 1rem 3rem;
  }
  /* Extra dark corner behind the site logo/icon-menu area (2026-07-06):
     the vertical crop's own artwork has a lighter blue-toned wall/window
     patch near its top-right, and the shared .hero-scrim (tuned for the
     wide desktop hero) doesn't fully darken it at mobile widths — this
     radial patch mutes just that corner without changing the rest of
     the framing. The right-side linear darkening gradient (needed on
     desktop, where the text column sits flush against the right edge)
     is dropped here (2026-07-06) — content is centered on mobile now, so
     that band no longer lines up with anything and just reads as a
     stray blue-ish stripe. Bottom fade is kept for legibility. */
  .hero-scrim{
    background:
      radial-gradient(ellipse 220px 200px at 100% 0%, var(--bg) 0%, rgba(27,31,46,0) 70%),
      linear-gradient(to top, var(--bg) 5%, rgba(27,31,46,0) 55%);
  }
  .series-section{
    padding: 2rem 1.25rem 4rem;
    text-align: left;
  }
  .series-card,
  .series-card--placeholder{
    flex: 0 0 calc((100% - 2rem) / 2.5);
  }
  .btn-play,
  .btn-icon{
    width: 72px;
    height: 72px;
  }
  /* Mobile now matches the horizontal-screen alignment (2026-07-06):
     logo/buttons centered, synopsis left-justified, inherited from the
     base rules above — this block only keeps the mobile-specific width
     and spacing tweaks. */
  .hero-content{
    /* "Show info" column occupies ~80% of the screen width (2026-07-05),
       measured against .hero's now-padding-free box, i.e. 80% of the
       true screen width rather than 80% of an already-inset container. */
    width: 80%;
    max-width: 80%;
  }
  .hero-actions{
    gap: .7rem;
  }


  /* Card info on mobile (2026-07-06): the series title is dropped since
     it's already carried by the poster's own logo overlay, and the
     limited real estate doesn't need it repeated as text underneath.
     Whatever text remains (the genre/rating line) is set 40% smaller. */
  .series-info h3{
    display: none;
  }
  .series-meta{
    font-size: .48rem; /* .8rem base, 40% smaller */
  }
  .series-meta .rating-badge.small{
    font-size: .42rem; /* .7rem base, 40% smaller */
  }

  /* Footer watermark/copyright ~40% smaller on mobile (2026-07-06). */
  .footer-watermark{
    width: 84px; /* 140px base, 40% smaller */
  }
  .footer-copyright{
    font-size: .48rem; /* .8rem base (inherited from .site-footer), 40% smaller */
  }
}

/* =========================================================
   Landscape orientation (tablets and landscape phones > 640px) —
   keep hero right-justified like desktop
   ========================================================= */
@media (orientation: landscape) and (min-width: 641px){
  .hero{
    min-height: 70vh;
    /* Keep right-aligned for horizontal tablets — desktop behavior */
    justify-content: flex-end;
    padding: 0 1rem 3rem;
  }
  .hero-scrim{
    background:
      linear-gradient(to top, var(--bg) 5%, rgba(27,31,46,0) 55%);
  }
  .hero-content{
    /* 40% width, positioned so its left edge starts at screen center (50%)
       by adding right margin to pull it back from the right edge */
    width: 40%;
    max-width: 40%;
    margin-right: 10%;
  }
  /* Horizontal screens: 5.5 thumbnails per view, left-justified title */
  .series-section{
    text-align: left;
  }
  .series-card,
  .series-card--placeholder{
    flex: 0 0 calc((100% - 4.5rem) / 5.5);
  }
}

/* =========================================================
   Phone in landscape orientation — short viewport height, but
   often wide enough (>640px logical width) to fall outside the
   portrait-mobile breakpoint above while still far too cramped for
   the desktop-scale hero. Without this, the full desktop-sized site
   logo and hero content overflowed the short hero and visibly
   overlapped each other (2026-07-06 bugfix, caught on Rolando's own
   phone). Targeted with orientation: landscape + a low max-height
   rather than max-width, since width alone can't tell a landscape
   phone apart from a small desktop/tablet window.
   ========================================================= */
@media (orientation: landscape) and (max-height: 500px){
  .hero{
    min-height: 100vh;
    /* Right-aligned here (2026-07-06), matching desktop rather than the
       portrait-mobile centering above — landscape phones are wide
       enough that the desktop-style right-side placement reads fine
       once the content itself is scaled down (below). */
    justify-content: flex-end;
    padding: .5rem 1rem;
  }
  /* Same fix as portrait mobile (2026-07-06): the desktop .hero-scrim's
     right-side linear darkening is tuned as a small fraction of a huge
     desktop-width image — on a ~800px-wide landscape phone that same
     percentage-based gradient eats a visually dominant chunk of the
     screen, reading as "the image stops and a solid color fills the
     rest" rather than a subtle legibility aid. Dropped for landscape
     too; bottom fade stays. Desktop itself is untouched. */
  .hero-scrim{
    background: linear-gradient(to top, var(--bg) 5%, rgba(27,31,46,0) 55%);
  }
  /* Landscape phones: 5.5 thumbnails per view, left-justified title */
  .series-section{
    text-align: left;
  }
  .series-card,
  .series-card--placeholder{
    flex: 0 0 calc((100% - 4.5rem) / 5.5);
  }
  .site-logo{
    top: .6rem;
    right: .75rem;
  }
  .site-logo img{
    width: 90px;
  }
  .icon-menu{
    top: .6rem;
    left: .6rem;
    width: 42px;
    height: 42px;
  }
  .menu-toggle,
  .icon-menu .menu-item{
    width: 42px;
    height: 42px;
  }
  .icon-menu .menu-item:hover,
  .icon-menu.open .menu-item{
    transform: translateY(calc(var(--i) * 48px)) scale(1);
  }
  .hero-content{
    /* About half the width/scale the wider-screen rules would otherwise
       give it here — this is exactly what was overflowing the short
       hero and colliding with the site logo. */
    width: 50%;
    max-width: 50%;
  }
  .hero-logo{
    width: min(160px, 30vw);
    margin-bottom: .4rem;
  }
  .hero-tagline{
    font-size: .65rem;
    margin-bottom: .5rem;
  }
  .hero-actions{
    gap: .4rem;
  }
  .btn-play,
  .btn-icon{
    width: 26px;
    height: 26px;
  }
  .hero-actions .rating-badge{
    font-size: .35rem;
    padding: .12rem .28rem;
  }

  /* Footer watermark/copyright ~40% smaller on mobile (2026-07-06) —
     same treatment as the portrait breakpoint below, repeated here since
     landscape phones don't inherit from that max-width query. */
  .footer-watermark{
    width: 84px; /* 140px base, 40% smaller */
  }
  .footer-copyright{
    font-size: .48rem; /* .8rem base (inherited from .site-footer), 40% smaller */
  }
}

/* =========================================================
   Vertical tablets (portrait orientation, 641px–1024px width)
   Center the hero content and series section
   ========================================================= */
@media (orientation: portrait) and (min-width: 641px) and (max-width: 1024px){
  .hero{
    justify-content: center;
    padding: 0 1rem 3rem;
  }
  .hero-scrim{
    background:
      radial-gradient(ellipse 220px 200px at 100% 0%, var(--bg) 0%, rgba(27,31,46,0) 70%),
      linear-gradient(to top, var(--bg) 5%, rgba(27,31,46,0) 55%);
  }
  .hero-content{
    width: 80%;
    max-width: 80%;
  }
  .series-section{
    margin: 0 auto;
    text-align: left;
  }
  .series-card,
  .series-card--placeholder{
    flex: 0 0 calc((100% - 2rem) / 2.5);
  }
}