/* AEZZE TV — from the "AEZZE TV" design system, palette Kerb: concrete stock grounds,
   asphalt ink structure, road-marking yellow as the one signal. Grounds are circles only;
   the mark and every headline sit on a plate. Signal never writes on a light ground. */
.channel--tv {
  --c-bg: #eae8e1; --c-ink: #232326;
  --stock: #eae8e1; --stock-low: #dedcd3; --tone: #cfccc2; --ink-tv: #232326; --signal: #f0b21f;
  --kerb: #63615a; --grey-2: #4d4d4a; --grey-dark: #c6c3b9; --paper-tv: #f6f5f0;
  font-family: "Archivo", var(--text); font-weight: 500;
}
.channel--tv h1, .channel--tv h2, .channel--tv h3 { font-family: "Archivo Black", var(--heading); text-transform: uppercase; letter-spacing: -.02em; line-height: .95; }
.tv-label { font: 700 .75rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.channel--tv .btn { background: var(--stock); color: var(--ink-tv); border: 4px solid var(--ink-tv); }
.channel--tv .btn::before { background: var(--ink-tv); }
.channel--tv .btn:hover { color: var(--stock); border-color: var(--ink-tv); }
.channel--tv .btn:active { transform: translate(4px, 4px); transition-duration: 0ms; }
.tv-plate { background: var(--stock); border: 4px solid var(--ink-tv); padding: 20px 28px; }

/* hero: the lockup on a plate over the default ring ground */
.tv-hero {
  border-bottom: 4px solid var(--ink-tv);
  background-color: var(--stock);
  background-image: repeating-radial-gradient(circle at 20% 80%, transparent 0 22px, rgba(35,35,38,.55) 22px 27px, transparent 27px 48px), repeating-radial-gradient(circle at 30% 72%, transparent 0 22px, rgba(240,178,31,.8) 22px 27px, transparent 27px 48px);
  background-blend-mode: multiply, normal;
}
.tv-hero .wrap { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; padding-block: clamp(40px, 8vw, 100px); }
.tv-hero h1 { margin: 0; }
.tv-hero h1 img { width: 100%; height: auto; }
.tv-hero .tv-plate--mark { padding: clamp(16px, 3vw, 32px); }
.tv-hero-copy { display: grid; gap: 14px; justify-items: start; }
.tv-line { font: 400 clamp(1.6rem, 3.6vw, 2.6rem)/.95 "Archivo Black", var(--heading); text-transform: uppercase; letter-spacing: -.02em; margin: 0; }
.tv-hero-copy p { margin: 0; }
.tv-hero .channel-follow { margin-top: 6px; }
@media (max-width: 760px) { .tv-hero .wrap { grid-template-columns: 1fr; } }

/* now showing: the one series out, on an ink ground (signal may write on ink) */
.tv-now { background: var(--ink-tv); color: var(--paper-tv); }
.tv-now .wrap { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding-block: clamp(40px, 7vw, 88px); }
.tv-now .tv-label { color: var(--signal); }
.tv-now h2 { font-size: clamp(3.5rem, 12vw, 8.5rem); color: var(--paper-tv); margin: 10px 0 18px; }
.tv-now p { color: var(--grey-dark); }
.tv-state { display: inline-block; background: var(--signal); color: var(--ink-tv); padding: 7px 10px; font: 700 .75rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.ep-rail { list-style: none; margin: 0; padding: 0; border-top: 4px solid var(--paper-tv); counter-reset: ep; }
.ep-rail { margin-top: 24px; }
.ep-rail a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 10px; border-bottom: 2px solid var(--kerb); color: var(--paper-tv); text-decoration: none; transition: background-color 100ms cubic-bezier(.2,.9,.1,1), color 100ms cubic-bezier(.2,.9,.1,1); }
.ep-rail a:hover { background: var(--kerb); }
.ep-rail a[aria-current="true"] { background: var(--signal); color: var(--ink-tv); }
.ep-rail b { font: 700 .75rem/1 var(--label); letter-spacing: .1em; color: var(--signal); }
.ep-rail a[aria-current="true"] b { color: var(--ink-tv); }
.ep-rail span { font: 400 clamp(1rem, 2vw, 1.3rem)/1.05 "Archivo Black", var(--heading); text-transform: uppercase; }
.ep-rail i { font: 700 .75rem/1 var(--label); font-style: normal; letter-spacing: .1em; }

/* the player: the work at the centre of the page */
.tv-player { margin: 0; display: grid; gap: 10px; justify-items: center; align-self: start; }
.tv-screen { position: relative; width: min(100%, 400px); aspect-ratio: 9 / 16; border: 4px solid var(--paper-tv); background: var(--ink-deep, #121214); }
.tv-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-play {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: calc(100% - 40px);
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; cursor: pointer;
  background: var(--signal); color: var(--ink-tv); border: 4px solid var(--ink-tv);
  font: 700 .8125rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase;
}
.tv-play:hover { background: var(--paper-tv); }
.tv-play:active { transform: translate(calc(-50% + 4px), 4px); }
.tv-play-icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.tv-player:not(.is-js) .tv-play { display: none; }
@media (max-width: 760px) {
  /* phones: title, then the player, then the episodes */
  .tv-now .wrap { display: flex; flex-direction: column; gap: 20px; }
  .tv-now-copy { display: contents; }
  .tv-now-copy > * { order: 1; }
  .tv-now .tv-player { order: 2; width: 100%; }
  .tv-now .ep-rail { order: 3; margin-top: 0; }
  .tv-now .tv-watch { order: 4; margin-top: 0; align-self: flex-start; }
  .tv-now h2 { margin: 0; }
  .tv-now .tv-state { align-self: flex-start; }
}
.tv-player figcaption { color: var(--grey-dark); }
.tv-watch { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; background: var(--signal); color: var(--ink-tv); border: 4px solid var(--signal); padding: 14px 18px; text-decoration: none; font: 700 .8125rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; transition: var(--flip); }
.tv-watch:hover { background: var(--paper-tv); border-color: var(--paper-tv); }
@media (max-width: 760px) { .tv-now .wrap { grid-template-columns: 1fr; } }

/* the Originals: distinct title treatments, explicit states */
.tv-originals { padding-block: clamp(40px, 7vw, 88px); }
.tv-originals > h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 28px; }
.originals { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 4px solid var(--ink-tv); border-left: 4px solid var(--ink-tv); }
.original { display: grid; gap: 16px; align-content: start; padding: clamp(18px, 3vw, 32px); border-right: 4px solid var(--ink-tv); border-bottom: 4px solid var(--ink-tv); background: var(--stock); }
.original-title { background: var(--paper-tv); border: 4px solid var(--ink-tv); padding: 18px; min-height: 180px; display: grid; align-content: end; }
.original h3 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); }
.original--dxb .original-title { background: var(--signal); }
.original--dxb h3 { font-style: italic; }
.original--dxb h3 span { display: block; font-size: .5em; }
.original--133 .original-title { background: var(--ink-tv); color: var(--paper-tv); border-color: var(--ink-tv); }
.original--133 h3 { font-variant-numeric: tabular-nums; }
.original--133 h3 small { display: block; font: 700 .75rem/1.2 var(--label); letter-spacing: .1em; color: var(--signal); margin-top: 10px; }
.spec { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); border-top: 2px solid var(--ink-tv); margin: 0; }
.spec dt, .spec dd { margin: 0; padding: 9px 0; border-bottom: 2px solid var(--tone); }
.spec dt { font: 700 .6875rem/1.4 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); }
.spec dd { font-size: .95rem; }
.original p { margin: 0; }
@media (max-width: 760px) { .originals { grid-template-columns: 1fr; } }

/* the promise, as already posted */
.tv-promise { border-top: 4px solid var(--ink-tv); background: var(--stock-low); }
.tv-promise ul { list-style: none; margin: 0; padding-block: clamp(28px, 5vw, 56px); display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-promise li { padding: 0 20px; border-left: 8px solid var(--signal); }
.tv-promise q { display: block; font: 400 clamp(1.05rem, 2vw, 1.3rem)/1.15 "Archivo Black", var(--heading); text-transform: uppercase; quotes: none; }
.tv-promise span { display: block; margin-top: 10px; }
@media (max-width: 760px) { .tv-promise ul { grid-template-columns: 1fr; gap: 20px; } }