/* ===== Guide TV page: day tabs, filters, rows by daypart, reminders ===== */
.guide__head{padding-top:28px;display:grid;grid-template-columns:1fr minmax(300px,420px);align-items:end;gap:28px;margin-bottom:26px}
.guide__head .kick{margin-bottom:12px}
.guide__head h1{font:900 clamp(30px,3.4vw,44px)/1.05 var(--ff-display);letter-spacing:var(--track-tighter)}
.guide__intro p{margin-top:10px;max-width:52ch}

/* what is on air, right at the top of the page */
.guide__now{display:flex;gap:16px;align-items:center;padding:14px;border-radius:var(--r-lg);color:#fff;
  background:linear-gradient(120deg,var(--c-primary-dark),var(--c-primary) 65%,var(--c-primary-light));box-shadow:var(--c-shadow-lg)}
.guide__now:hover{color:#fff;filter:brightness(1.04)}
.guide__now-art{width:104px;height:78px;border-radius:var(--r-md);overflow:hidden;flex:none}
.guide__now-art img{width:100%;height:100%;object-fit:cover}
.guide__now-body{min-width:0;flex:1}
.guide__now-body b{display:block;margin:8px 0 3px;font:800 19px/1.2 var(--ff-display);letter-spacing:var(--track-tight);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guide__now-body .mu{color:rgba(255,255,255,.82)}
.guide__now .prog{display:block;margin-top:10px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.guide__now .prog span{display:block;height:100%;background:#fff;border-radius:2px}
.guide__now--off{background:var(--c-raised);color:var(--c-text)}
.guide__now--off .mu{color:var(--c-muted)}

.guide__bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 4px}
.guide__filters{display:flex;gap:9px;flex-wrap:wrap}
.gen{font:600 12px/1 var(--ff-ui);color:var(--c-dosje);background:rgba(65,69,197,.13);padding:5px 10px;border-radius:var(--r-pill)}

/* the week, as a row of proper cards */
.days{display:flex;gap:10px;padding-bottom:20px;border-bottom:1px solid var(--c-line);align-items:stretch}
.day{flex:1 1 0;min-width:104px;padding:14px 12px 13px;border:1px solid var(--c-line);border-radius:var(--r-card);
  background:var(--c-card);color:var(--c-text);text-align:center;transition:border-color .18s,transform .18s,box-shadow .18s}
.day:hover{border-color:var(--c-line-2);transform:translateY(-2px);box-shadow:var(--c-shadow)}
.day__name{display:block;font:700 14.5px/1.15 var(--ff-display);letter-spacing:var(--track-tight);text-transform:capitalize}
.day__date{display:block;margin-top:5px;font:600 12px/1 var(--ff-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.day.is-past{opacity:.55}
.day.is-past:hover{opacity:.8}
.day.is-active{background:linear-gradient(140deg,var(--c-primary),var(--c-primary-dark));border-color:transparent;color:#fff;box-shadow:0 14px 30px -12px rgba(65,69,197,.6)}
.day.is-active .day__date{color:rgba(255,255,255,.82)}
.day.is-today .day__name::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c-live);margin-right:7px;vertical-align:middle;animation:pulse 1.4s infinite}
.daypart{color:var(--c-muted);margin:28px 0 14px;display:flex;align-items:center;gap:12px}
.daypart:first-child{margin-top:0}
.daypart--prime{color:var(--c-seriale-soft)}
.daypart--prime::after{content:"";flex-grow:1;height:1px;background:linear-gradient(90deg,#C9CBEA,transparent)}
.grow{display:flex;gap:20px;align-items:center;padding:15px 18px;border-radius:var(--r-card);border:1px solid var(--c-line);background:var(--c-card)}
.grow.is-past{opacity:.62}
.grow.is-live{border-color:var(--c-live);background:linear-gradient(120deg,rgba(249,97,66,.07),var(--c-card) 60%);box-shadow:0 14px 34px -18px rgba(249,97,66,.7)}
/* nothing on air: the next programme is marked in primary — never in the live red */
.grow.is-next{border-color:var(--c-primary);background:linear-gradient(120deg,rgba(65,69,197,.07),var(--c-card) 60%)}
.grow.is-next .grow__tm{color:var(--c-primary)}
.grow .pill--next{background:var(--c-primary);color:#fff}
.grow.is-flash{animation:grow-flash 1.4s ease-out}
@keyframes grow-flash{0%{box-shadow:0 0 0 0 rgba(249,97,66,.45)}70%{box-shadow:0 0 0 14px rgba(249,97,66,0)}100%{box-shadow:0 14px 34px -18px rgba(249,97,66,.7)}}
.grow__go{margin-left:auto}
.grow:hover{border-color:var(--c-line-2)}
.grow.is-serial{border-color:#C9CBEA;background:linear-gradient(120deg,rgba(106,111,221,.08),var(--c-card) 60%)}
.grow.is-serial .grow__tm{color:var(--c-seriale-soft)}
.grow.is-serial .chip{border-color:#C9CBEA;color:var(--c-seriale)}
.grow__tm{font:700 17px/1 var(--ff-display);width:56px;flex:none;color:var(--c-body)}
.grow.is-live .grow__tm{color:var(--c-live-soft)}
.grow__th{width:104px;height:62px;border-radius:var(--r-md);flex:none;display:flex;align-items:center;justify-content:center}
.grow__th .p{width:26px;height:26px;border-radius:50%;background:rgba(249,97,66,.92);display:flex;align-items:center;justify-content:center;z-index:2;color:#fff}
.grow__th .p svg{width:10px;height:10px}
.grow__body{flex-grow:1;min-width:0}
.grow__t{display:flex;align-items:center;gap:10px;font:700 17px/1.2 var(--ff-display);flex-wrap:wrap}
.grow__t a{color:var(--c-text)}
.grow .prog{margin-top:9px;max-width:280px;height:3px}
.grow .chip{border-radius:var(--r-md)}
.reminders{display:flex;flex-direction:column;gap:13px}
.reminders__row{display:flex;align-items:center;gap:11px;font:600 14px/1.3 var(--ff-ui)}
.reminders__row svg{width:17px;height:17px;color:var(--c-dosje);flex:none}
.reminders__row span{flex-grow:1}
.reminders__empty{color:var(--c-muted);font-size:13px}
.reminders__note{margin-top:16px;line-height:1.5;padding-top:14px;border-top:1px solid var(--c-line)}
.chip.is-remind{background:var(--c-primary-soft-2);border-color:transparent;color:var(--c-dosje)}
@media (max-width:991.98px){.guide__head{grid-template-columns:1fr}.guide__now{order:-1}}
@media (max-width:767.98px){.grow{flex-wrap:wrap;gap:12px;padding:12px}.grow__th{display:none}.grow__tm{width:auto}.grow .chip,.grow .btn-live{margin-left:auto}.guide__now-art{width:76px;height:60px}.guide__now-body b{font-size:17px}}

/* phones/tablets: the day picker is a sticky segmented bar; filters scroll as pills */
@media (max-width:991.98px){
  .days{position:sticky;top:0;z-index:30;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;gap:8px;margin-inline:-16px;padding:10px 16px 12px;border-bottom:1px solid var(--c-line);background:rgba(244,246,251,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);scrollbar-width:none}
  .days::-webkit-scrollbar{display:none}
  .day{flex:0 0 auto;scroll-snap-align:center;min-width:0;padding:10px 15px;border-radius:var(--r-pill);display:flex;align-items:baseline;gap:8px}
  .day__name{font-size:13.5px}
  .day__date{margin-top:0;font-size:11.5px}
  .day.is-active .day__date{color:rgba(255,255,255,.85)}
  .guide__filters{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .guide__filters::-webkit-scrollbar{display:none}
  .guide__filters .chip,.guide__filters .gen{flex:none}
}

/* ===== Home timeline EPG (band F) — light surface ===== */
.days-epg{display:flex;gap:9px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none;padding-bottom:3px;touch-action:pan-x;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:4px;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.days-epg .day-btn{scroll-snap-align:start}
.days-epg::-webkit-scrollbar{display:none}
.day-btn{flex:none;display:flex;align-items:baseline;gap:8px;padding:12px 20px;border-radius:var(--r-md);background:#fff;border:1px solid var(--c-line-2);color:var(--c-body);transition:border-color .2s,background .2s,transform .15s}
.day-btn .dow{font:700 15px/1 var(--ff-cond);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.day-btn .dnum{font-size:12px;opacity:.65;white-space:nowrap}
.day-btn:hover{border-color:var(--c-primary);color:var(--c-text)}
.day-btn.is-active{background:linear-gradient(135deg,var(--c-primary-dark),var(--c-primary));border-color:transparent;color:#fff;box-shadow:0 8px 26px rgba(65,69,197,.35)}
.day-btn.is-today:not(.is-active) .dow{color:var(--c-primary)}
/* live status strip */
.gd-now{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:16px;box-shadow:var(--c-shadow)}
.gd-now .gn-t{min-width:0}
.gd-now .gn-t b{font:900 21px/1 var(--ff-display);letter-spacing:var(--track-tight);text-transform:uppercase;color:var(--c-text);display:block}
.gd-now .gn-t span{font-size:12px;color:var(--c-muted);display:block;margin-top:4px}
.gd-now .gn-pb{flex:1;min-width:140px;height:5px;border-radius:var(--r-xs);background:var(--c-line);overflow:hidden;margin:0}
.gd-now .gn-pb span{background:linear-gradient(90deg,#DD4E31,var(--c-live));box-shadow:0 0 10px rgba(249,97,66,.45)}
.gd-now .gn-btn{padding:10px 18px;font-size:12.5px;margin-left:auto}
/* type filter chips */
.tl-kinds{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tl-k{--k:var(--c-primary);display:inline-flex;align-items:center;gap:7px;border:1px solid var(--c-line-2);background:#fff;color:var(--c-body);border-radius:var(--r-pill);padding:7px 13px;font:700 11.5px/1 var(--ff-cond);letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,background .2s,color .2s}
.tl-k i{width:9px;height:9px;border-radius:3px;background:var(--k);flex:none}
.tl-k--news{--k:#4145C5}.tl-k--show{--k:#6A6FDD}.tl-k--serial{--k:#8B8FE6}.tl-k--film{--k:#1E205D}.tl-k--kids{--k:#575CD4}.tl-k--sport{--k:var(--c-sport)}
.tl-k:hover{border-color:var(--k);color:var(--c-text)}
.tl-k.is-on{background:var(--k);border-color:var(--k);color:#fff}
.tl-k.is-on i{background:#fff}
/* legend + jump */
.tl-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.tl-hint{font-size:11px;color:var(--c-muted)}
/* timeline */
.tl-outer{position:relative}
/* a day the guide does not cover: a quiet card instead of an empty ruler (the sample week is never shown, user 12 Sep 2026) */
.tl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:160px;padding:28px 20px;text-align:center;border:1px dashed var(--c-line);border-radius:var(--r-lg);background:#fff}
.tl-empty__t{font:600 17px/1.3 var(--ff-ui);color:var(--c-primary-dark)}
.day-btn.is-empty:not(.is-active){opacity:.55}
.tl-wrap{position:relative;overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--r-lg);background:#fff;scrollbar-width:thin;box-shadow:var(--c-shadow)}
.tl-wrap::-webkit-scrollbar{height:9px}
.tl-wrap::-webkit-scrollbar-track{background:transparent}
.tl-wrap::-webkit-scrollbar-thumb{background:var(--c-primary);border-radius:var(--r-xs)}
.tl{position:relative;height:232px}
/* dayparts + prime-time shading give the grid a shape you can read at a glance */
.tl-dp{position:absolute;top:32px;font:700 10.5px/1 var(--ff-cond);letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);padding-left:9px}
.tl-prime{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,rgba(249,97,66,.07),rgba(249,97,66,.02));border-left:1px dashed color-mix(in srgb,var(--c-live) 45%,transparent);pointer-events:none;z-index:0}
.tl-prime span{position:absolute;top:32px;left:11px;font:700 10.5px/1 var(--ff-cond);letter-spacing:.16em;text-transform:uppercase;color:var(--c-sport)}
.tl-hour{position:absolute;top:0;bottom:0;border-left:1px dashed var(--c-line-2);pointer-events:none}
.tl-hour span{position:absolute;top:12px;left:9px;font:700 12px/1 var(--ff-cond);color:var(--c-muted);letter-spacing:.07em}
.tl-block{--k:var(--c-primary);--k-soft:color-mix(in srgb,var(--k) 12%,#fff);
  position:absolute;top:52px;bottom:18px;border-radius:var(--r-card);border:1px solid var(--c-line);
  border-left:3px solid var(--k);background:var(--k-soft);padding:12px 14px;overflow:hidden;color:var(--c-text);
  container-type:inline-size;display:flex;flex-direction:column;gap:3px;transition:border-color .18s,transform .18s,box-shadow .18s,opacity .2s}
/* programme types read at a glance */
.tl-block--news{--k:#4145C5}
.tl-block--show{--k:#6A6FDD}
.tl-block--serial{--k:#8B8FE6}
.tl-block--film{--k:#1E205D}
.tl-block--kids{--k:#575CD4}
.tl-block--sport{--k:var(--c-sport)}
.tl-block.is-dim{opacity:.22;pointer-events:none}
/* artwork fades in on blocks with room for it */
.tb-th{display:none;position:absolute;inset:0 0 0 auto;width:52%;z-index:0}
.tb-th img{width:100%;height:100%;object-fit:cover}
.tb-th::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--k-soft) 8%,color-mix(in srgb,var(--k-soft) 55%,transparent) 60%,transparent)}
@container (min-width:250px){.tb-th{display:block}}
@container (max-width:165px){.tb-hs,.tb-gen{display:none}}
@container (max-width:120px){.tl-block .tb-nm{font-size:13px}.tl-block{padding:10px}}
.tl-block>*:not(.tb-th){position:relative;z-index:1}
/* how far through the live programme we are */
.tb-fill{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 1%);background:color-mix(in srgb,var(--c-live) 16%,transparent);border-right:2px solid color-mix(in srgb,var(--c-live) 55%,transparent);z-index:0;display:none}
.tl-block.is-live .tb-fill{display:block}
.tb-foot{margin-top:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-left{font:700 10px/1 var(--ff-cond);letter-spacing:.06em;text-transform:uppercase;color:#DD4E31}
.tl-block:hover{border-color:var(--k);transform:translateY(-3px);box-shadow:0 14px 34px color-mix(in srgb,var(--k) 28%,transparent);z-index:4;color:var(--c-text)}
.tl-block .tb-tm{display:block;font:700 13px/1 var(--ff-cond);color:var(--k);letter-spacing:.05em}
.tl-block .tb-nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font:800 17px/1.14 var(--ff-display);text-transform:uppercase;color:var(--c-text);overflow:hidden}
.tl-block .tb-hs{display:block;font-size:11px;color:var(--c-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-block .tb-gen{font:700 10px/1 var(--ff-cond);text-transform:uppercase;letter-spacing:.07em;color:var(--k);border:1px solid color-mix(in srgb,var(--k) 35%,transparent);background:#fff;border-radius:var(--r-xs);padding:3px 8px}
.tl-block .tb-flag{position:absolute;top:10px;right:12px;font:700 10px/1 var(--ff-cond);letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-xs);display:none}
.tl-block.is-live{--k:var(--c-live);border-color:color-mix(in srgb,var(--c-live) 55%,transparent);background:#fff;box-shadow:0 14px 34px rgba(249,97,66,.18);z-index:3}
.tl-block.is-live .tb-tm{color:#DD4E31}
.tl-block.is-live .tb-flag{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#DD4E31,var(--c-live));color:#fff}
.tl-block.is-live .tb-flag::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
.tl-block.is-next{border-color:var(--c-primary)}
.tl-block.is-next .tb-flag{display:inline-block;background:var(--c-primary);color:#fff}
/* real schedules carry 5–20 minute slots: shed the detail as the block narrows (the title stays in the tooltip) */
@container (max-width:96px){.tl-block .tb-tm{display:none}.tl-block .tb-nm{font-size:12.5px;-webkit-line-clamp:3}.tl-block.is-next .tb-flag{display:none}}
@container (max-width:62px){.tl-block .tb-nm,.tl-block .tb-foot,.tl-block .tb-flag,.tl-block.is-live .tb-flag,.tl-block.is-next .tb-flag{display:none}}
.tl-block.is-past{opacity:.72}
.tl-needle{position:absolute;top:0;bottom:0;width:2px;background:var(--c-live);box-shadow:0 0 12px rgba(249,97,66,.7);z-index:5;pointer-events:none}
.tl-needle[hidden]{display:none}
.tl-needle span{position:absolute;top:7px;left:7px;background:linear-gradient(135deg,#DD4E31,var(--c-live));color:#fff;font:700 10.5px/1 var(--ff-cond);padding:4px 9px;border-radius:var(--r-xs);white-space:nowrap}
@media (max-width:575.98px){.gd-now .gn-btn{margin-left:0;width:100%;text-align:center}.tl-hint{display:none}.day-btn{padding:10px 14px}}

/* phones: the timeline becomes a clean vertical schedule list (swiping a huge canvas is clumsy) */
@media (max-width:767.98px){
  .tl-hint{display:none}
  .tl-wrap{overflow:visible;border:0;background:none;border-radius:0}
  .tl{height:auto!important;width:auto!important}
  .tl-hour,.tl-needle{display:none!important}
  .tl-prime,.tl-dp{display:none!important}
  .tl-block{position:static!important;width:auto!important;display:flex;flex-direction:row;align-items:center;text-align:left;gap:12px;margin-bottom:8px;padding:11px 13px;border-radius:var(--r-card);overflow:hidden}
  .tb-th{display:block;position:static;width:56px;height:44px;border-radius:var(--r-sm);overflow:hidden;flex:none;order:-1}
  .tb-th::after{display:none}
  .tb-foot{position:static;flex:none;margin-left:0}
  .tl-block .tb-gen{display:none}
  /* one line each: the hours small on the left, the title beside them (DECISIONS #156) */
  .tl-block{gap:10px;margin-bottom:6px;padding:9px 12px;min-height:52px}
  .tl-block .tb-tm{flex:none;width:auto;font-size:11.5px;white-space:nowrap;line-height:1;letter-spacing:.02em}
  .tl-block .tb-nm{margin-top:0;font-size:14.5px;line-height:1.2;text-transform:none;white-space:normal;flex:1 1 auto;min-width:90px;-webkit-line-clamp:2}
  .tb-th{width:48px;height:36px}
  .gd-now{padding:12px 14px;gap:10px 14px;margin-bottom:12px}
  .gd-now .gn-t b{font-size:17px;line-height:1.1;text-transform:none;letter-spacing:0}
  .gd-now .gn-btn{width:auto;margin-left:0;padding:9px 14px}
  .epg .days-epg{gap:8px;margin-bottom:14px}
  .epg .day-btn{padding:8px 12px;min-height:36px;gap:6px;border-radius:var(--r-pill)}
  .epg .day-btn .dow{font-size:12px}
  .epg .day-btn .dnum{font-size:11px}
  .tl-past-toggle{padding:9px 12px;font-size:12.5px;margin-bottom:8px}
  .tl-block .tb-hs,.tl-block .tb-gen{display:none}
  .tl-block .tb-flag{position:static;flex:none;margin-left:auto}
  .tl-block.is-past{opacity:.62}
  /* the day is mostly behind us by the evening — start the list at what is on now */
  .tl.is-hide-past .tl-block.is-past{display:none}
  .tl-past-toggle{display:block;width:100%;margin:0 0 10px;padding:11px 13px;border:1px dashed var(--c-line-2);border-radius:var(--r-card);background:var(--c-card);color:var(--c-muted);font:600 13px/1 var(--ff-ui)}
  .tl-past-toggle:active{transform:scale(.99)}
}

/* ===== reading a slot: hover stretches it on desktop, a tap opens it on phones ===== */
.tl-block .tb-x{display:none;font:400 12.5px/1.45 var(--ff-ui);color:var(--c-muted);margin-top:2px;overflow:hidden}
@media (hover:hover) and (min-width:992px){
  .tl-block{transition:border-color .18s,box-shadow .18s,opacity .2s,min-width .22s cubic-bezier(.2,.8,.3,1)}
  .tl-block:hover,.tl-block:focus-visible{min-width:380px;z-index:8;opacity:1;box-shadow:0 22px 50px -18px rgba(30,32,93,.45);border-color:var(--k)}
  /* the artwork steps back so the text is readable, and only then is there room for the synopsis */
  .tl-block:hover .tb-th::after,.tl-block:focus-visible .tb-th::after{background:linear-gradient(0deg,rgba(20,22,62,.97) 0%,rgba(20,22,62,.92) 46%,rgba(20,22,62,.74) 100%)}
  .tl-block:hover .tb-x,.tl-block:focus-visible .tb-x{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#DCDFEA}
  .tl-block:hover .tb-nm,.tl-block:focus-visible .tb-nm{-webkit-line-clamp:2}
}
/* the sheet body (phones) */
.epgs__media{display:block;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;margin-bottom:14px}
.epgs__media img{width:100%;height:100%;object-fit:cover}
.epgs__kick{display:block;color:var(--c-primary);margin-bottom:8px}
.epgs__t{font:800 22px/1.2 var(--ff-display);letter-spacing:var(--track-tight);color:var(--c-text)}
.epgs__sub{margin-top:6px}
.epgs__x{margin:12px 0 0;font:400 15px/1.6 var(--ff-serif);color:var(--c-body)}
.epgs__cta{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.epgs__cta .btn-primary,.epgs__cta .btn-ghost{justify-content:center}
/* phones show the list compactly — the sheet carries the detail (must sit after the container query above) */
@media (max-width:767.98px){.tl-block .tb-x{display:none}}

/* ===== timeline blocks read as poster tiles: the artwork fills the block, the text sits on it =====
   Scoped to the timeline (≥768px) — phones keep the compact list further up. */
@media (min-width:768px){
  .tl-block{
    padding:14px;justify-content:flex-end;color:#fff;
    border:1px solid rgba(20,22,62,.14);border-left:3px solid var(--k);
    background:linear-gradient(160deg,color-mix(in srgb,var(--k) 72%,#14163E),#14163E 82%)}
  .tb-th{display:block;position:absolute;inset:0;width:100%;z-index:0}
  .tb-th img{width:100%;height:100%;object-fit:cover}
  .tb-th::after{background:linear-gradient(0deg,rgba(20,22,62,.95) 0%,rgba(20,22,62,.68) 34%,rgba(20,22,62,.22) 66%,rgba(20,22,62,.3) 100%)}
  .tl-block .tb-tm{position:absolute;top:11px;left:11px;z-index:2;padding:5px 9px;border-radius:var(--r-pill);
    background:rgba(20,22,62,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;letter-spacing:.04em}
  .tl-block .tb-nm{color:#fff;text-transform:none;font:800 17px/1.2 var(--ff-display);letter-spacing:var(--track-tight);text-shadow:0 2px 14px rgba(0,0,0,.5)}
  .tl-block .tb-hs{color:rgba(255,255,255,.8)}
  .tl-block .tb-x{color:rgba(255,255,255,.85)}
  .tl-block .tb-foot{margin-top:9px}
  .tl-block .tb-gen{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
  .tb-left{color:#FFC4B4}
  .tl-block:hover{color:#fff}
  .tl-block.is-live{background:linear-gradient(160deg,#8F3A22,#14163E 82%);border-color:var(--c-live);box-shadow:0 16px 38px rgba(249,97,66,.28)}
  .tl-block.is-live .tb-tm{background:var(--c-live);color:#fff}
  .tl-block.is-live .tb-th::after{background:linear-gradient(0deg,rgba(37,18,14,.95) 0%,rgba(30,20,30,.66) 36%,rgba(20,22,62,.22) 70%,rgba(20,22,62,.3) 100%)}
  .tb-fill{background:color-mix(in srgb,var(--c-live) 26%,transparent);border-right-color:var(--c-live)}
  .tl-block.is-past{opacity:.66}
  .tl-block.is-past:hover{opacity:1}
  /* the artwork now fills every block, so the old width gate goes: only the text sheds as it narrows */
  @container (max-width:96px){.tl-block{padding:10px 8px}.tl-block .tb-nm{font-size:12.5px;text-shadow:0 2px 10px rgba(0,0,0,.7)}}
  @container (min-width:320px){.tl-block .tb-nm{font-size:19px}}
  /* nothing to show yet: the brand mark keeps the tile from reading as an empty box */
  .tl-block--noart::before{content:"";position:absolute;right:-18px;bottom:-14px;width:132px;height:132px;z-index:0;
    background:url("../images/logo.png") right bottom/contain no-repeat;opacity:.09}
}