:root {
      --gold: #FDC830;
      --orange: #F37335;

      --gradient: linear-gradient(135deg, #FDC830, #F37335);

      --bg: #0a0a0f;

      --surface-1: #13131a;
      --surface-2: #1c1c26;
      --surface-3: #242433;

      --text: #f0f0f0;
      --muted: #888899;

      --hairline: rgba(255,255,255,0.08);

      --display: "Bebas Neue", sans-serif;
      --body: "DM Sans", sans-serif;

      --page: 1440px;

      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --radius-xl: 32px;

      --ease:
        cubic-bezier(.22,.8,.26,1);
    }


    /* =========================================================
       RESET
    ========================================================= */

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    body {
      margin: 0;
      min-width: 320px;

      overflow-x: hidden;

      font-family: var(--body);

      color: var(--text);

      background:
        radial-gradient(
          circle at 90% -5%,
          rgba(243,115,53,.07),
          transparent 30rem
        ),
        var(--bg);

      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    img {
      display: block;
      width: 100%;
    }

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

    button,
    input {
      font: inherit;
    }

    button {
      color: inherit;
    }


    /* =========================================================
       UTILITIES
    ========================================================= */

    .page-width {
      width: min(calc(100% - 32px), var(--page));
      margin-inline: auto;
    }

    .display {
      font-family: var(--display);
      font-weight: 400;
      text-transform: uppercase;
    }

    .gradient-text {
      background: var(--gradient);

      -webkit-background-clip: text;
      background-clip: text;

      color: transparent;
    }


    /* =========================================================
       HEADER
    ========================================================= */

    .site-header {
      position: absolute;
      inset: 0 0 auto;

      z-index: 50;

      pointer-events: none;
    }

    .nav {
      width: min(calc(100% - 32px), var(--page));
      min-height: 72px;

      margin-inline: auto;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;

      pointer-events: auto;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .logo-mark {
      width: 34px;
      height: 34px;

      display: grid;
      place-items: center;

      border-radius: 9px;

      background: var(--gradient);

      color: #0a0a0f;

      font-family: var(--display);
      font-size: 1.45rem;
      line-height: 1;
    }

    .logo-name {
      font-family: var(--display);

      font-size: 1.55rem;
      letter-spacing: .035em;

      background: var(--gradient);

      -webkit-background-clip: text;
      background-clip: text;

      color: transparent;
    }

    .nav-links {
      display: none;

      align-items: center;
      gap: 28px;

      font-size: .84rem;
      font-weight: 600;

      color: rgba(240,240,240,.72);
    }

    .nav-links a {
      transition: color 180ms ease;
    }

    .nav-links a:hover {
      color: var(--text);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-button {
      min-height: 38px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: 0 14px;

      border: 1px solid var(--hairline);
      border-radius: 999px;

      background: rgba(10,10,15,.42);

      backdrop-filter: blur(14px);

      font-size: .76rem;
      font-weight: 600;

      transition:
        border-color 180ms ease,
        background 180ms ease;
    }

    .nav-button:hover {
      border-color: rgba(253,200,48,.3);

      background: rgba(28,28,38,.75);
    }

    .search-button {
      width: 38px;
      padding: 0;
    }


    /* =========================================================
       BUTTONS
    ========================================================= */

    .btn {
      min-height: 48px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;

      padding: 0 19px;

      border-radius: 999px;

      font-size: .84rem;
      font-weight: 700;

      transition:
        transform 200ms var(--ease),
        box-shadow 200ms ease,
        background 200ms ease;
    }

    .btn-primary {
      color: #0a0a0f;

      background: var(--gradient);

      box-shadow:
        0 12px 30px rgba(243,115,53,.18);
    }

    .btn-primary:hover {
      transform: translateY(-2px);

      box-shadow:
        0 18px 38px rgba(243,115,53,.28);
    }

    .btn-secondary {
      color: var(--text);

      background: rgba(255,255,255,.07);

      border: 1px solid rgba(255,255,255,.1);

      backdrop-filter: blur(14px);
    }

    .btn-secondary:hover {
      background: rgba(255,255,255,.11);
    }


    /* =========================================================
       HERO
    ========================================================= */

    .hero {
      position: relative;

      height: min(940px, 96svh);
      min-height: 720px;

      overflow: hidden;

      background: var(--surface-1);
    }

    .hero > input {
      position: absolute;

      width: 1px;
      height: 1px;

      opacity: 0;
      pointer-events: none;
    }


    /* -----------------------------------------
       HERO VISUALS
    ----------------------------------------- */

    .hero-visuals,
    .hero-slide {
      position: absolute;
      inset: 0;
    }

    .hero-slide {
      opacity: 0;
      visibility: hidden;

      transform: scale(1.035);

      transition:
        opacity 700ms ease,
        transform 1400ms var(--ease),
        visibility 700ms;
    }

    .hero-slide img {
      height: 100%;

      object-fit: cover;
      /* Cover art is a portrait poster; the hero band is wide and short,
         so a full crop is unavoidable. Biased toward the upper third
         rather than dead-center (cuts top and bottom evenly) or the top
         edge (cuts off too much of the bottom) -- a balance that keeps
         most posters' faces/title treatment in frame either way. */
      object-position: 55% 25%;

      filter:
        saturate(.96)
        contrast(1.05);
    }

    .hero-slide::before {
      content: "";

      position: absolute;
      z-index: 1;
      inset: 0;

      background:
        linear-gradient(
          180deg,
          rgba(10,10,15,.46) 0%,
          rgba(10,10,15,.07) 24%,
          rgba(10,10,15,.18) 48%,
          rgba(10,10,15,.86) 84%,
          #0a0a0f 100%
        ),
        linear-gradient(
          90deg,
          rgba(10,10,15,.96) 0%,
          rgba(10,10,15,.74) 28%,
          rgba(10,10,15,.22) 62%,
          rgba(10,10,15,.12) 100%
        );
    }

    .hero-slide::after {
      content: "";

      position: absolute;
      z-index: 2;

      inset: auto 0 0;
      height: 160px;

      background:
        linear-gradient(
          to bottom,
          transparent,
          var(--bg)
        );
    }


    /* Active imagery */

    #featured-1:checked ~ .hero-visuals .hero-slide:nth-child(1),
    #featured-2:checked ~ .hero-visuals .hero-slide:nth-child(2),
    #featured-3:checked ~ .hero-visuals .hero-slide:nth-child(3),
    #featured-4:checked ~ .hero-visuals .hero-slide:nth-child(4),
    #featured-5:checked ~ .hero-visuals .hero-slide:nth-child(5),
    #featured-6:checked ~ .hero-visuals .hero-slide:nth-child(6) {
      opacity: 1;
      visibility: visible;

      transform: scale(1);
    }


    /* -----------------------------------------
       HERO COPY
    ----------------------------------------- */

    .hero-content-shell {
      position: relative;
      z-index: 10;

      height: 100%;

      width: min(calc(100% - 32px), var(--page));
      margin-inline: auto;

      display: flex;
      align-items: flex-end;

      padding-bottom: 94px;
    }

    .hero-copy-stack {
      position: relative;

      width: min(760px, 100%);
      min-height: 450px;
    }

    .hero-copy {
      position: absolute;
      inset: auto 0 0;

      opacity: 0;
      visibility: hidden;

      transform: translateY(18px);

      transition:
        opacity 500ms ease,
        transform 600ms var(--ease),
        visibility 500ms;
    }

    #featured-1:checked ~ .hero-content-shell .hero-copy:nth-child(1),
    #featured-2:checked ~ .hero-content-shell .hero-copy:nth-child(2),
    #featured-3:checked ~ .hero-content-shell .hero-copy:nth-child(3),
    #featured-4:checked ~ .hero-content-shell .hero-copy:nth-child(4),
    #featured-5:checked ~ .hero-content-shell .hero-copy:nth-child(5),
    #featured-6:checked ~ .hero-content-shell .hero-copy:nth-child(6) {
      opacity: 1;
      visibility: visible;

      transform: translateY(0);
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;

      margin-bottom: 15px;

      color: rgba(240,240,240,.74);

      font-size: .66rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .hero-kicker::before {
      content: "";

      width: 30px;
      height: 2px;

      border-radius: 999px;

      background: var(--gradient);
    }

    .hero-title {
      margin: 0;

      max-width: 760px;

      font-family: var(--display);

      font-size:
        clamp(4.2rem, 18vw, 8.7rem);

      font-weight: 400;

      line-height: .79;
      letter-spacing: .012em;
      text-transform: uppercase;

      text-wrap: balance;
    }

    .hero-meta {
      margin-top: 20px;

      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 9px;

      color: rgba(240,240,240,.73);

      font-size: .72rem;
      font-weight: 600;
    }

    .hero-tag {
      padding: 6px 9px;

      border-radius: 999px;

      border: 1px solid rgba(255,255,255,.11);

      background: rgba(10,10,15,.46);

      backdrop-filter: blur(10px);
    }

    .hero-description {
      max-width: 590px;

      margin: 17px 0 0;

      color: rgba(240,240,240,.69);

      font-size: .91rem;
      line-height: 1.66;
    }

    .hero-actions {
      margin-top: 25px;

      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }


    /* -----------------------------------------
       HERO NUMBER
    ----------------------------------------- */

    .hero-series-count {
      position: absolute;
      z-index: 12;

      top: 50%;
      right: 16px;

      display: none;

      transform: translateY(-50%) rotate(90deg);
      transform-origin: center;

      color: rgba(255,255,255,.3);

      font-family: var(--display);

      font-size: .78rem;
      letter-spacing: .22em;
    }


    /* -----------------------------------------
       MOBILE DOTS
    ----------------------------------------- */

    .hero-dots {
      position: absolute;
      z-index: 15;

      left: 16px;
      bottom: 45px;

      display: flex;
      align-items: center;
      gap: 6px;
    }

    .hero-dots label {
      width: 7px;
      height: 7px;

      border-radius: 999px;

      background: rgba(255,255,255,.28);

      cursor: pointer;

      transition:
        width 240ms ease,
        background 240ms ease;
    }

    #featured-1:checked ~ .hero-dots label:nth-child(1),
    #featured-2:checked ~ .hero-dots label:nth-child(2),
    #featured-3:checked ~ .hero-dots label:nth-child(3),
    #featured-4:checked ~ .hero-dots label:nth-child(4),
    #featured-5:checked ~ .hero-dots label:nth-child(5),
    #featured-6:checked ~ .hero-dots label:nth-child(6) {
      width: 30px;

      background: var(--gradient);
    }


    /* -----------------------------------------
       DESKTOP FEATURED NAV
    ----------------------------------------- */

    .featured-nav {
      position: absolute;
      z-index: 15;

      right: max(
        24px,
        calc((100vw - var(--page)) / 2)
      );

      bottom: 92px;

      width: min(340px, 28vw);

      display: none;
    }

    .featured-nav-heading {
      margin-bottom: 10px;

      color: var(--muted);

      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .featured-nav-list {
      display: grid;
      gap: 3px;
    }

    .featured-nav-item {
      min-height: 52px;

      display: grid;

      grid-template-columns:
        28px
        minmax(0,1fr)
        28px;

      align-items: center;

      gap: 10px;

      padding: 0 10px;

      border-radius: 10px;

      color: rgba(240,240,240,.42);

      cursor: pointer;

      transition:
        color 180ms ease,
        background 180ms ease;
    }

    .featured-nav-item:hover {
      color: var(--text);

      background: rgba(255,255,255,.045);
    }

    .featured-index {
      font-size: .65rem;
      font-weight: 700;
    }

    .featured-name {
      overflow: hidden;

      white-space: nowrap;
      text-overflow: ellipsis;

      font-size: .78rem;
      font-weight: 600;
    }

    .featured-line {
      height: 2px;

      overflow: hidden;

      border-radius: 999px;

      background: rgba(255,255,255,.12);
    }

    .featured-line::after {
      content: "";

      display: block;

      width: 0;
      height: 100%;

      background: var(--gradient);

      transition: width 320ms var(--ease);
    }

    #featured-1:checked ~ .featured-nav label:nth-child(1),
    #featured-2:checked ~ .featured-nav label:nth-child(2),
    #featured-3:checked ~ .featured-nav label:nth-child(3),
    #featured-4:checked ~ .featured-nav label:nth-child(4),
    #featured-5:checked ~ .featured-nav label:nth-child(5),
    #featured-6:checked ~ .featured-nav label:nth-child(6) {
      color: var(--text);

      background: rgba(255,255,255,.065);
    }

    #featured-1:checked ~ .featured-nav label:nth-child(1) .featured-line::after,
    #featured-2:checked ~ .featured-nav label:nth-child(2) .featured-line::after,
    #featured-3:checked ~ .featured-nav label:nth-child(3) .featured-line::after,
    #featured-4:checked ~ .featured-nav label:nth-child(4) .featured-line::after,
    #featured-5:checked ~ .featured-nav label:nth-child(5) .featured-line::after,
    #featured-6:checked ~ .featured-nav label:nth-child(6) .featured-line::after {
      width: 100%;
    }


    /* =========================================================
       CONTENT SECTIONS
    ========================================================= */

    main {
      position: relative;
      z-index: 20;

      background: var(--bg);
    }

    .content-section {
      padding: 48px 0 12px;
    }

    .section-header {
      width: min(calc(100% - 32px), var(--page));

      margin: 0 auto 17px;

      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
    }

    .section-heading-group {
      min-width: 0;
    }

    .section-eyebrow {
      margin-bottom: 2px;

      color: var(--muted);

      font-size: .61rem;
      font-weight: 700;

      letter-spacing: .17em;
      text-transform: uppercase;
    }

    .section-title {
      margin: 0;

      font-family: var(--display);

      font-size: clamp(2rem, 8vw, 3.3rem);

      line-height: .95;
      letter-spacing: .025em;

      text-transform: uppercase;
    }

    .section-link {
      flex: 0 0 auto;

      padding-bottom: 4px;

      color: var(--muted);

      font-size: .72rem;
      font-weight: 600;

      transition: color 180ms ease;
    }

    .section-link:hover {
      color: var(--gold);
    }


    /* =========================================================
       DRAMA RAILS
    ========================================================= */

    .rail-shell {
      position: relative;
    }

    .rail-shell::after {
      content: "";

      position: absolute;

      z-index: 5;

      top: 0;
      right: 0;
      bottom: 0;

      width: 38px;

      pointer-events: none;

      background:
        linear-gradient(
          to left,
          var(--bg),
          transparent
        );
    }

    .drama-rail {
      display: grid;

      grid-auto-flow: column;
      grid-auto-columns: minmax(145px, 43vw);

      gap: 13px;

      overflow-x: auto;

      padding:
        4px
        max(
          16px,
          calc((100vw - var(--page)) / 2)
        )
        28px;

      scrollbar-width: none;

      scroll-snap-type: x proximity;
      overscroll-behavior-inline: contain;
    }

    .drama-rail::-webkit-scrollbar {
      display: none;
    }


    /* =========================================================
       DRAMA CARD
    ========================================================= */

    .drama-card {
      min-width: 0;

      scroll-snap-align: start;
    }

    .poster {
      position: relative;

      aspect-ratio: 2 / 3;

      overflow: hidden;

      border-radius: var(--radius-md);

      border: 1px solid var(--hairline);

      background: var(--surface-2);

      transform-origin: center bottom;

      transition:
        transform 320ms var(--ease),
        border-color 220ms ease,
        box-shadow 320ms var(--ease);
    }

    .poster img {
      height: 100%;

      object-fit: cover;

      transition:
        transform 650ms var(--ease),
        filter 300ms ease;
    }

    .poster::after {
      content: "";

      position: absolute;
      z-index: 1;

      inset: auto 0 0;
      height: 38%;

      background:
        linear-gradient(
          to top,
          rgba(10,10,15,.92),
          transparent
        );
    }

    .drama-card:hover .poster {
      transform:
        perspective(700px)
        translateY(-7px)
        rotateX(1.5deg);

      border-color: rgba(253,200,48,.22);

      box-shadow:
        0 22px 48px rgba(0,0,0,.42);
    }

    .drama-card:hover .poster img {
      transform: scale(1.045);

      filter: saturate(1.07);
    }

    .poster-badge {
      position: absolute;

      z-index: 3;

      top: 10px;
      left: 10px;

      padding: 5px 8px;

      border-radius: 999px;

      border: 1px solid rgba(255,255,255,.1);

      background: rgba(10,10,15,.68);

      backdrop-filter: blur(10px);

      font-size: .56rem;
      font-weight: 700;

      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .play-pill {
      position: absolute;

      z-index: 3;

      right: 10px;
      bottom: 10px;

      min-width: 35px;
      height: 35px;

      display: grid;
      place-items: center;

      border-radius: 50%;

      background: var(--gradient);

      color: #0a0a0f;

      opacity: 0;

      transform:
        translateY(7px)
        scale(.92);

      transition:
        opacity 180ms ease,
        transform 220ms var(--ease);
    }

    .drama-card:hover .play-pill {
      opacity: 1;

      transform:
        translateY(0)
        scale(1);
    }

    .card-copy {
      padding: 10px 3px 0;
    }

    .card-title {
      margin: 0;

      overflow: hidden;

      white-space: nowrap;
      text-overflow: ellipsis;

      font-size: .83rem;
      font-weight: 600;

      letter-spacing: -.01em;
    }

    .card-meta {
      margin-top: 4px;

      color: var(--muted);

      font-size: .67rem;
      font-weight: 500;
    }


    /* =========================================================
       TRENDING RANK
    ========================================================= */

    .rank {
      position: absolute;

      z-index: 2;

      left: 5px;
      bottom: 7px;

      font-family: var(--display);

      font-size: clamp(4rem, 16vw, 6.1rem);
      line-height: .65;

      color: #0a0a0f;

      -webkit-text-stroke:
        1.3px
        rgba(255,255,255,.58);

      transition:
        transform 250ms var(--ease),
        -webkit-text-stroke-color 200ms ease;
    }

    .drama-card:hover .rank {
      transform: translateX(4px);

      -webkit-text-stroke-color: var(--gold);
    }


    /* =========================================================
       GENRE SECTION
    ========================================================= */

    .genre-section {
      padding-top: 72px;
    }

    .genre-grid {
      display: grid;

      grid-template-columns:
        repeat(2,minmax(0,1fr));

      gap: 9px;
    }

    .genre-card {
      position: relative;

      min-height: 132px;

      overflow: hidden;

      display: flex;
      flex-direction: column;
      justify-content: flex-end;

      padding: 16px;

      border: 1px solid var(--hairline);
      border-radius: var(--radius-md);

      background:
        radial-gradient(
          circle at 110% -10%,
          rgba(253,200,48,.08),
          transparent 50%
        ),
        var(--surface-1);

      transition:
        transform 250ms var(--ease),
        background 250ms ease,
        border-color 200ms ease;
    }

    .genre-card::before {
      content: attr(data-letter);

      position: absolute;

      top: -26px;
      right: 1px;

      font-family: var(--display);

      font-size: 9rem;
      line-height: 1;

      color: rgba(255,255,255,.025);

      transition:
        transform 450ms var(--ease),
        color 250ms ease;
    }

    .genre-card::after {
      content: "";

      position: absolute;

      inset: 0;

      opacity: 0;

      background:
        linear-gradient(
          135deg,
          transparent 15%,
          rgba(253,200,48,.025),
          rgba(243,115,53,.065)
        );

      transition: opacity 250ms ease;
    }

    .genre-card:hover {
      transform: translateY(-4px);

      border-color: rgba(253,200,48,.22);

      background:
        radial-gradient(
          circle at 110% -10%,
          rgba(243,115,53,.11),
          transparent 50%
        ),
        var(--surface-2);
    }

    .genre-card:hover::before {
      color: rgba(253,200,48,.05);

      transform:
        translate(-5px,7px)
        scale(1.04);
    }

    .genre-card:hover::after {
      opacity: 1;
    }

    .genre-title,
    .genre-count {
      position: relative;
      z-index: 2;
    }

    .genre-title {
      font-family: var(--display);

      font-size: 1.55rem;
      line-height: 1;

      letter-spacing: .025em;
      text-transform: uppercase;
    }

    .genre-count {
      margin-top: 5px;

      color: var(--muted);

      font-size: .65rem;
      font-weight: 500;
    }

    .genre-view-more-wrap {
      padding-top: 28px;

      display: flex;
      justify-content: center;
    }


    /* =========================================================
       APP PROMO
    ========================================================= */

    .app-section {
      padding: 82px 16px 88px;
    }

    .app-banner {
      position: relative;

      width: min(100%, var(--page));
      margin-inline: auto;

      overflow: hidden;

      display: grid;
      gap: 30px;

      padding: 34px 24px;

      border: 1px solid rgba(255,255,255,.09);
      border-radius: var(--radius-xl);

      background:
        linear-gradient(
          130deg,
          rgba(253,200,48,.065),
          rgba(243,115,53,.025) 38%,
          transparent 68%
        ),
        var(--surface-1);
    }

    .app-banner::before {
      content: "";

      position: absolute;

      width: 420px;
      height: 420px;

      top: -250px;
      right: -150px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(253,200,48,.15),
          transparent 68%
        );
    }

    .app-eyebrow {
      margin-bottom: 8px;

      color: var(--gold);

      font-size: .61rem;
      font-weight: 700;

      letter-spacing: .17em;
      text-transform: uppercase;
    }

    .app-title {
      margin: 0;

      max-width: 700px;

      font-family: var(--display);

      font-size: clamp(3rem, 11vw, 5.7rem);

      font-weight: 400;

      line-height: .86;
      letter-spacing: .025em;

      text-transform: uppercase;
    }

    .app-copy {
      max-width: 580px;

      margin: 16px 0 0;

      color: var(--muted);

      font-size: .83rem;
      line-height: 1.65;
    }

    .app-actions {
      margin-top: 22px;

      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }


    /* Phones */

    .phones {
      position: relative;

      min-height: 260px;

      display: none;
      align-items: flex-end;
      justify-content: center;
    }

    .phone {
      position: absolute;

      width: 150px;

      overflow: hidden;

      border: 5px solid var(--surface-3);
      border-radius: 26px;

      background: #000;

      box-shadow:
        0 25px 55px rgba(0,0,0,.44);
    }

    .phone img {
      aspect-ratio: 9 / 19;

      object-fit: cover;
    }

    .phone-a {
      z-index: 2;

      transform:
        translateX(-45px)
        rotate(-7deg);
    }

    .phone-b {
      z-index: 1;

      transform:
        translateX(62px)
        translateY(14px)
        rotate(9deg);
    }


    /* =========================================================
       FOOTER
    ========================================================= */

    footer {
      padding: 0 16px 36px;
    }

    .footer-inner {
      width: min(100%, var(--page));
      margin-inline: auto;

      padding-top: 24px;

      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;

      border-top: 1px solid var(--hairline);

      color: var(--muted);

      font-size: .65rem;
    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (min-width: 560px) {
      .drama-rail {
        grid-auto-columns:
          minmax(165px,31vw);

        gap: 15px;
      }

      .genre-grid {
        grid-template-columns:
          repeat(3,minmax(0,1fr));
      }
    }


    @media (min-width: 760px) {
      .content-section {
        padding-top: 58px;
      }

      .drama-rail {
        grid-auto-columns:
          minmax(180px,23vw);

        gap: 17px;
      }

      .genre-grid {
        grid-template-columns:
          repeat(4,minmax(0,1fr));
      }

      .app-banner {
        padding: 48px;
      }
    }


    @media (min-width: 960px) {
      .nav-links {
        display: flex;
      }

      .hero-content-shell {
        padding-bottom: 90px;
      }

      .hero-copy-stack {
        width: min(720px,58vw);
      }

      .hero-dots {
        display: none;
      }

      .featured-nav {
        display: block;
      }

      .hero-series-count {
        display: block;
      }

      .drama-rail {
        grid-auto-columns:
          minmax(190px,16vw);
      }

      .genre-grid {
        grid-template-columns:
          repeat(6,minmax(0,1fr));
      }

      .app-banner {
        grid-template-columns:
          minmax(0,1.3fr)
          minmax(280px,.7fr);

        align-items: center;

        padding: 58px 64px;
      }

      .phones {
        display: flex;
      }
    }


    @media (min-width: 1280px) {
      .drama-rail {
        grid-auto-columns: 205px;
      }
    }


    /* =========================================================
       ACCESSIBILITY
    ========================================================= */

    :focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 4px;
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;

        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
      }
    }