/* Programme list: what is on now and next. Landscape 1920×1080, portrait 1080×1920. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow: hidden; background: transparent; }
html.preview body { background: #2a2a2a repeating-conic-gradient(#3a3a3a 0 25%, transparent 0 50%) 0 0 / 40px 40px; }
:root { --ink: #1f1f1f; --pink: #e5177f; --mute: #6b6676; --line: #ece8f0; }

.stage { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0;
  font-family: Barlow, sans-serif; color: var(--ink); }
.stage:not(.ready) { visibility: hidden; }
.landscape .stage { width: 1920px; height: 1080px; }
.portrait  .stage { width: 1080px; height: 1920px; }

.panel { position: absolute; background: #fff; border-radius: 44px; display: flex; flex-direction: column; overflow: hidden; }
.landscape .panel { left: 60px; top: 60px; width: 1800px; height: 960px; padding: 40px 56px 32px; }
.portrait  .panel { left: 60px; top: 60px; width: 960px; height: 1800px; padding: 44px 44px 36px; }

.head { position: relative; text-transform: uppercase; flex: none; }
.kicker { font-weight: 800; color: var(--pink); letter-spacing: .05em; }
.day { font-weight: 900; line-height: 1; margin-top: 6px; }
.filter { position: absolute; right: 0; bottom: 6px; font-weight: 700; color: var(--mute); text-align: right; }
.landscape .kicker { font-size: 34px; } .landscape .day { font-size: 88px; } .landscape .filter { font-size: 30px; }
.portrait  .kicker { font-size: 32px; } .portrait  .day { font-size: 76px; } .portrait  .filter { font-size: 26px; max-width: 45%; }
.landscape .head { height: 160px; } .portrait .head { height: 170px; }

.rows { flex: 1; min-height: 0; position: relative; overflow: hidden; border-top: 3px solid var(--line); margin-top: 6px; }
/* The track holds every row at a fixed height (--h, set from the viewport); paging slides it up. */
.track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.row { display: grid; align-items: center; border-bottom: 2px solid var(--line); height: var(--h, 100px); }
.time { font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.time small { display: block; font-weight: 600; color: var(--mute); margin-top: 4px; }
.time .now-pill + small { margin-top: 6px; }
.title { font-weight: 800; line-height: 1.05; text-transform: uppercase;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.chip { display: inline-block; color: #fff; font-weight: 700; border-radius: 99px; white-space: nowrap; }
.cat { color: var(--mute); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.now-pill { display: inline-block; background: var(--pink); color: #fff; font-weight: 900; letter-spacing: .06em; border-radius: 99px; line-height: 1; }
.row.live { background: linear-gradient(90deg, #fde6f1, #fff 70%); }

.landscape .row { grid-template-columns: 230px 1fr 590px; gap: 0 28px; padding: 0 14px; }
.landscape .time { font-size: 58px; } .landscape .time small { font-size: 24px; }
.landscape .title { font-size: 42px; }
.landscape .where { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.landscape .chip { font-size: 26px; padding: 5px 18px; } .landscape .cat { font-size: 22px; }
.landscape .now-pill { font-size: 30px; padding: 8px 20px; }

.portrait .row { grid-template-columns: 200px 1fr; grid-template-areas: "time title" "time where"; gap: 4px 24px; padding: 0 8px; align-content: center; }
.portrait .time { grid-area: time; font-size: 52px; } .portrait .time small { font-size: 22px; }
.portrait .title { grid-area: title; font-size: 36px; }
.portrait .where { grid-area: where; display: flex; align-items: center; gap: 14px; }
.portrait .chip { font-size: 24px; padding: 4px 16px; } .portrait .cat { font-size: 21px; }
.portrait .now-pill { font-size: 28px; padding: 8px 18px; }

.foot { flex: none; border-top: 3px solid var(--line); display: flex; gap: 14px; align-items: center; color: var(--mute); font-weight: 700; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.foot:empty { display: none; }
.landscape .foot { height: 76px; font-size: 26px; } .portrait .foot { height: 70px; font-size: 22px; }
.foot b { color: var(--ink); font-weight: 800; } .foot .sep { opacity: .4; }
.empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; text-transform: uppercase; color: var(--mute); text-align: center; }
.landscape .empty { font-size: 56px; } .portrait .empty { font-size: 44px; }

.swap { transition: opacity .35s ease; } .swap.out { opacity: 0; }