/* BifrostTV – bifrosttv.com
   Colors from the app (src/theme/colors.ts). Dark only. No web fonts, no scripts.
   Mockups follow the app code: GuideHero.tsx, FilterRow.tsx, GuideRowView.tsx,
   Timeline.tsx, multiview.tsx and watch.tsx. Channels and programs are fictional. */
:root {
  --night: #070b17;
  --tv: #0b1226;
  --tv-iron: #1b2440;
  --tv-iron-light: #2b3658;
  --tv-edge: rgba(244, 246, 251, 0.24);
  --frost: #f4f6fb;
  --text-2: #aab2c4;
  --mist: #8a93a8;
  --gold: #d9a441;
  --ice: #6fb3d8;
  --focus: #9fd3f0;
  --line: rgba(244, 246, 251, 0.1);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --maxw: 1200px;
  --gutter: clamp(16px, 4.5vw, 48px);
  /* Distance from the viewport edge to the content column. Only used for the
     hero bleed, which .hero clips, so the scrollbar in 100vw does no harm. */
  --side: max(var(--gutter), (100vw - var(--maxw)) / 2);
  --block: clamp(96px, 11vw, 160px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--frost);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Footer at the bottom on short pages. width: 100% keeps .wrap centered. */
body > header, body > main, body > footer { width: 100%; }
body > main { flex: 1 0 auto; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--ice); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--frost); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
/* Ordmerket er en ferdig tegnet SVG (design/gen_wordmark.py): merke + Avenir Next Heavy */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: auto; height: 24px; }
.nav-link { margin-right: -8px; padding: 12px 8px; color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--frost); }

/* ---------- Layout: text left, product right (stacked below 1200px) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(32px, 5vw, 56px); }
.hero { overflow-x: hidden; overflow-x: clip; padding-top: clamp(16px, 3vw, 40px); }
.hero .split { row-gap: clamp(40px, 6vw, 64px); }
.hero h1 { max-width: 11em; font: 700 clamp(38px, 4vw, 56px)/1.06 var(--display); letter-spacing: -0.03em; }
.lede { margin-top: 20px; max-width: 26em; color: var(--text-2); font-size: clamp(18px, 1.45vw, 20px); line-height: 1.5; }
.avail { margin-top: 28px; font-size: 19px; font-weight: 600; line-height: 1.4; }

/* The screen runs to the right edge of the window. Its right side has no bezel,
   so nothing inside it is cut off on wide screens. */
.hero-art .tv { width: calc(100% + var(--side)); padding-right: 0; border-radius: 16px 0 0 16px; }
.hero-art .screen { border-radius: 10px 0 0 10px; }

.feature, .about { padding-top: var(--block); }
.feature h2, .about h2 { font: 700 clamp(30px, 3.2vw, 44px)/1.08 var(--display); letter-spacing: -0.028em; }
.feature p, .about p { margin-top: 14px; max-width: 24em; color: var(--text-2); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; }
.about p { max-width: 36em; }
.about p + p { margin-top: 12px; }
.feature-art { position: relative; }

/* ---------- Device frames ---------- */
.tv {
  container-type: inline-size;
  position: relative;
  padding: 6px;
  border-radius: 16px;
  background: #02040a;
  box-shadow: 0 0 0 1px rgba(244, 246, 251, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--tv); }

/* ---------- TV guide (tvOS, 1920 pt wide: 1em = 19.2 pt) ----------
   Sizes from src/components/guide/layout.ts: COL_W 184, ROW_H 88, HOUR_W 560,
   HERO_H 256, FILTER_H 60, HEADER_H 40, TV_SAFE_X 80, TV_SAFE_Y 60. */
.guide {
  --half: 14.58em;
  --col: 9.58em;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 3.1em 0 0 4.2em;
  font-family: var(--sans);
  font-size: clamp(8.6px, 1.05vw, 13px);
  font-size: clamp(8.6px, 1.12cqw, 13px);
  line-height: 1.3;
  color: var(--frost);
  white-space: nowrap;
  background: var(--tv);
}
.g-hero { position: relative; flex: none; height: 13.33em; padding-right: 4.2em; }
/* GuideHero's faint glow at the top right */
.g-hero::before {
  content: "";
  position: absolute;
  top: -3.1em;
  bottom: 0;
  left: -4.2em;
  right: 0;
  background: linear-gradient(to bottom left, rgba(111, 179, 216, 0.1), rgba(111, 179, 216, 0) 60%);
}
.g-hero > * { position: relative; }
.g-top { display: flex; align-items: center; gap: 0.83em; height: 2.08em; }
.g-chan { flex: 1; color: var(--mist); font-size: 1.35em; font-weight: 600; }
.g-hint { color: var(--mist); font-size: 1.2em; font-weight: 600; }
.g-clock { margin-left: 0.3em; font-size: 1.56em; font-weight: 600; }
.g-title { margin-top: 0.08em; font-size: 2.5em; font-weight: 800; line-height: 1.2; }
.g-meta { display: flex; align-items: center; gap: 0.73em; height: 1.77em; margin-top: 0.31em; }
.g-live { padding: 0.04em 0.43em; border-radius: 0.26em; background: var(--gold); color: var(--night); font-size: 1.2em; font-weight: 800; letter-spacing: 0.04em; line-height: 1.3; }
.g-meta span:last-child { color: var(--mist); font-size: 1.35em; }
.g-desc {
  max-width: 40em;
  margin-top: 0.25em;
  color: rgba(244, 246, 251, 0.85);
  font-size: 1.25em;
  line-height: 1.42;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.g-track { width: 21.9em; height: 0.31em; margin-top: 0.73em; border-radius: 1em; background: var(--tv-edge); overflow: hidden; }
.g-track span { display: block; width: 44%; height: 100%; background: var(--gold); }
.g-hero .g-biglogo {
  position: absolute;
  right: 1.75em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ice);
  font: italic 700 5.6em/1 var(--serif);
  opacity: 0.28;
}

.g-filters { display: flex; flex: none; align-items: center; gap: 0.83em; height: 3.13em; }
.g-source { flex: none; width: 7.29em; color: var(--mist); font-size: 1.2em; font-weight: 600; }
.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  height: 2.17em;
  padding: 0 1em;
  border: 0.083em solid var(--tv-edge);
  border-radius: 0.58em;
  background: var(--tv-iron);
  font-size: 1.2em;
  font-weight: 700;
}
.pill-search { width: 12.5em; color: var(--mist); }
.pill-search svg { width: 0.9em; height: 0.9em; color: var(--frost); }

.g-grid { position: relative; flex: 1; min-height: 0; }
/* The guide goes on below the screen: fade the last, partly shown row */
.g-grid::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: -4.2em;
  right: 0;
  bottom: 0;
  height: 5em;
  background: linear-gradient(to bottom, rgba(11, 18, 38, 0), var(--tv) 85%);
  pointer-events: none;
}
.g-times { display: flex; height: 2.08em; margin-left: var(--col); border-bottom: 1px solid var(--tv-edge); }
.g-times span { position: relative; flex: 0 0 13.25em; display: flex; align-items: center; padding-left: 0.45em; color: var(--mist); font-size: 1.1em; font-weight: 700; }
.g-times span::before { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 0.47em; background: var(--tv-edge); }
.g-times .hid { color: transparent; }
.g-row { display: flex; gap: 0.21em; height: 4.58em; padding: 0.21em 0; }
.g-ch { flex: 0 0 calc(var(--col) - 0.21em); display: grid; place-items: center; border-radius: 0.5em; background: var(--tv-iron); line-height: 1; }
/* On Apple TV a program cell shows only its title; times are in the top panel */
.p { position: relative; flex: 0 0 calc(var(--w) * var(--half) - 0.21em); min-width: 0; display: flex; align-items: center; padding: 0 0.83em; border-radius: 0.42em; background: var(--tv-iron); overflow: hidden; }
.p b { overflow: hidden; text-overflow: ellipsis; font-size: 1.3em; font-weight: 600; }
/* On now: lighter cell with a gold stripe on the left */
.p.live { background: var(--tv-iron-light); }
.p.live::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.21em; background: var(--gold); }
.p.focus { z-index: 3; background: var(--frost); color: var(--night); }
.p.focus b { font-weight: 700; }
.now-line { position: absolute; z-index: 2; top: 1.875em; bottom: 0; left: calc(var(--col) + 1.333 * var(--half)); width: 0.16em; margin-left: -0.08em; background: var(--gold); }
.now-line span {
  position: absolute;
  top: -1.67em;
  left: 50%;
  width: 5em;
  height: 1.67em;
  transform: translateX(-50%);
  border-radius: 1em;
  background: var(--gold);
  color: var(--night);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.now-line b { font-size: 1.2em; }

/* Fictional channel logos */
.lg-nordlys { font: italic 700 1.5em var(--serif); color: var(--ice); }
.lg-valhalla { font-weight: 800; font-size: 1em; letter-spacing: 0.08em; text-align: center; }
.lg-valhalla span { display: block; margin-top: 0.3em; color: var(--gold); font-size: 0.66em; letter-spacing: 0.32em; }
.lg-fjord { font-weight: 800; font-size: 1.25em; letter-spacing: 0.02em; }
.lg-fjord span { color: var(--ice); }
.lg-mimir { font: 400 1.25em var(--serif); letter-spacing: 0.28em; color: #b4a9e0; }
.lg-skald { font-weight: 800; font-size: 1.45em; color: var(--gold); letter-spacing: -0.02em; }
.lg-rune { font-weight: 300; font-size: 1.2em; letter-spacing: 0.32em; }
.lg-vinter { font: 700 1.35em var(--serif); letter-spacing: 0.04em; color: var(--text-2); }

/* ---------- Multi-view: tiles fill the screen, each in a grey frame; gold frame = sound ---------- */
.mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  background: #000;
  font-size: max(6.4px, 0.5vw);
  font-size: max(6.4px, 1cqw);
}
.tile { position: relative; border: 0.25em solid #4b5268; }
.tile.audio { border-color: var(--gold); }
.lbl {
  position: absolute;
  left: 0.8em;
  bottom: 0.7em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em 0.55em;
  max-width: 88%;
  padding: 0.3em 0.65em;
  border-radius: 0.5em;
  background: rgba(7, 11, 23, 0.72);
  white-space: nowrap;
}
.lbl .nm { overflow: hidden; font-size: 1.3em; font-weight: 600; }
.snd { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15em 0.4em; border-radius: 0.3em; background: var(--gold); color: var(--night); font-size: 1.3em; font-weight: 800; }
.snd svg { width: 0.95em; height: 0.95em; }

/* Two examples: four football matches, and four winter sports at once */
.mv-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.6vw, 32px); }

/* ---------- AirPlay: the TV plays the picture, the phone keeps the controls ---------- */
.feature-cast .feature-art { padding-bottom: 20%; }
.feature-cast .tv { width: 80%; margin-left: 20%; }
.phone { container-type: inline-size; position: absolute; left: 0; bottom: 0; z-index: 2; width: 74%; }
.phone-body {
  aspect-ratio: 19.5 / 9;
  padding: 1.3em;
  border-radius: 7em;
  background: #04060c;
  box-shadow: 0 0 0 1px rgba(244, 246, 251, 0.16), 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  font-size: max(2.9px, 0.5vw);
  font-size: max(2.9px, 1cqw);
}
.ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 5.8em; background: #000; color: var(--frost); font-family: var(--sans); line-height: 1.2; }
.ph-top { position: absolute; top: 2em; left: 6.4em; right: 6.4em; display: flex; align-items: center; gap: 1.5em; }
.ph-btn { flex: none; display: grid; place-items: center; width: 6.2em; height: 6.2em; border-radius: 50%; background: rgba(21, 28, 48, 0.8); }
.ph-btn svg { width: 3.1em; height: 3.1em; }
.ph-btn.on { color: var(--gold); }
.ph-star { font-size: 3.2em; line-height: 1; }
.ph-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 2.7em; font-size: max(2.7em, 9px); font-weight: 700; }
.ph-play { position: absolute; left: 50%; top: 57%; display: flex; justify-content: center; align-items: center; gap: 1em; width: 9em; height: 9em; transform: translate(-50%, -50%); border-radius: 50%; background: var(--gold); }
.ph-play i { width: 1em; height: 3.5em; border-radius: 0.25em; background: var(--night); }

/* ---------- My teams: iPhone med kamplista (etter MatchGroupList.tsx) ---------- */
.feature-teams .feature-art { display: flex; justify-content: center; }
.handset {
  container-type: inline-size;
  width: min(100%, 320px);
  aspect-ratio: 9 / 12.8;
  padding: 3.4%;
  border-radius: 13% / 7.8%;
  background: #04060c;
  box-shadow: 0 0 0 1px rgba(244, 246, 251, 0.16), 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  -webkit-mask-image: linear-gradient(#000 82%, transparent);
  mask-image: linear-gradient(#000 82%, transparent);
}
.hs-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 11% / 6.6%;
  padding: 17cqw 4.5cqw 0;
  background: linear-gradient(180deg, #141e3c, var(--night) 70%);
  color: var(--frost);
  font-family: var(--sans);
  font-size: 4.1cqw;
  line-height: 1.25;
}
.hs-island { position: absolute; top: 3.6cqw; left: 50%; width: 30%; height: 8cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.hs-head { margin: 0 0.3em 0.7em; font-size: 1.7em; font-weight: 800; letter-spacing: -0.01em; }
.hs-section { margin: 1.1em 0.4em 0.5em; color: var(--mist); font-size: 0.85em; font-weight: 700; }
.hs-match { margin-bottom: 0.6em; border-radius: 0.8em; background: rgba(21, 28, 48, 0.85); overflow: hidden; }
.hs-mh { display: flex; align-items: center; gap: 0.6em; padding: 0.75em 0.8em 0.6em; }
.hs-mt { flex: 1; min-width: 0; }
.hs-mt b { display: block; font-size: 1.05em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-mt em { color: var(--gold); font-style: normal; }
.hs-mt span { display: block; margin-top: 0.15em; color: var(--mist); font-size: 0.8em; }
.hs-live { display: inline-flex; align-items: center; gap: 0.35em; flex: none; padding: 0.2em 0.55em; border-radius: 99px; background: rgba(224, 120, 123, 0.16); font-size: 0.75em; font-weight: 700; }
.hs-live i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #e0787b; }
.hs-time { flex: none; color: var(--mist); font-size: 0.85em; font-weight: 700; }
.hs-ch { display: flex; align-items: center; gap: 0.7em; padding: 0.55em 0.8em; border-top: 1px solid rgba(244, 246, 251, 0.06); }
.hs-logo { flex: none; display: grid; place-items: center; width: 2.6em; height: 1.9em; border-radius: 0.35em; background: #232d4a; font-size: 0.72em; font-weight: 800; letter-spacing: 0.04em; }
.hs-ct { flex: 1; min-width: 0; }
.hs-ct b { display: block; font-size: 0.9em; font-weight: 600; }
.hs-ct span { display: block; color: var(--mist); font-size: 0.78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-ct s { display: block; height: 0.18em; margin-top: 0.35em; border-radius: 99px; background: linear-gradient(90deg, var(--gold) calc(var(--p) * 100%), rgba(244, 246, 251, 0.14) 0); }

/* ---------- Teletext (etter src/components/teletext, palett fra palette.ts) ---------- */
@font-face { font-family: "VT323"; src: url("/fonts/VT323-Regular.ttf") format("truetype"); font-display: swap; }
.screen.tt {
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  padding: 1em 1.6em 0.9em;
  background: #000;
  color: #fff;
  font-family: "VT323", ui-monospace, Menlo, monospace;
  font-size: max(7px, 3.55cqw);
  line-height: 1;
  text-align: left;
  white-space: pre;
}
.tt .w { color: #fff; }
.tt .y { color: #ffff00; }
.tt .c { color: #00ffff; }
.tt .g { color: #00ff5a; }
.tt .r { color: #ff3b3b; }
.tt b { font-weight: 400; }
.tt-top { display: flex; justify-content: space-between; }
.tt-title { display: flex; align-items: center; gap: 0.4em; margin: 0.15em 0 0.2em; color: #ffff00; font-size: 1.9em; line-height: 0.9; transform: scaleY(1.15); transform-origin: left center; }
.tt-mosaic { width: 0.55em; height: 0.8em; background:
  linear-gradient(#ffff00, #ffff00) 0 0 / 50% 50% no-repeat,
  linear-gradient(#ffff00, #ffff00) 100% 100% / 50% 50% no-repeat; }
.tt-band { margin-top: 0.25em; padding: 0.05em 0.3em; background: #0000c8; color: #00ffff; }
.tt-row { display: grid; grid-template-columns: 1fr 3.4em 1fr 2em; gap: 0.5em; padding: 0 0.3em; }
.tt-row span:first-child { text-align: right; }
.tt-row span:nth-child(2) { text-align: center; }
.tt-row span:last-child { text-align: right; }
.tt-status { margin-top: auto; color: #2ed0d0; }
.tt-fastext { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.tt-fastext span { text-align: center; }

/* ---------- Footer ---------- */
.footer { margin-top: var(--block); border-top: 1px solid var(--line); color: var(--mist); font-size: 14px; }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 28px; padding-bottom: 36px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer nav a { padding-block: 4px; color: var(--text-2); text-decoration: none; }
.footer nav a:hover { color: var(--frost); }

/* ---------- Support ---------- */
.page-head { padding: clamp(32px, 6vw, 72px) 0 clamp(40px, 5vw, 64px); }
.page-head h1 { font: 700 clamp(40px, 5vw, 64px)/1.03 var(--display); letter-spacing: -0.032em; }
.qa { border-top: 1px solid var(--line); }
.qa-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 48px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.qa h2 { font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.qa p { max-width: 36em; color: var(--text-2); }
.qa b { color: var(--frost); font-weight: 600; }
.qa code { color: var(--frost); font: 0.92em ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 48px; margin-top: clamp(64px, 8vw, 104px); }
.contact h2 { font: 700 clamp(26px, 2.4vw, 32px)/1.15 var(--display); letter-spacing: -0.02em; }
.contact p { color: var(--text-2); }
.contact .mail { display: inline-block; margin-top: 14px; font-size: clamp(16px, 5.4vw, 20px); font-weight: 600; }

/* ---------- 404 ---------- */
.lost { padding: clamp(56px, 10vw, 136px) var(--gutter) clamp(24px, 4vw, 48px); }
.lost h1 { font: 700 clamp(40px, 5vw, 64px)/1.03 var(--display); letter-spacing: -0.032em; }
.lost p { margin-top: 16px; color: var(--text-2); font-size: clamp(18px, 1.5vw, 20px); }

/* ---------- Wider screens ---------- */
@media (min-width: 761px) {
  .qa-row, .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* Multi-view: the two TVs side by side under the heading, stacked below 700px */
@media (min-width: 700px) {
  .mv-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 521px) and (max-width: 1199px) {
  .feature-cast .feature-art { padding-bottom: 12%; }
  .feature-cast .tv { width: 76%; margin-left: 24%; }
  .phone { width: 46%; }
}
@media (min-width: 1200px) {
  .split { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: 56px; align-items: center; }
  .feature-mv .split { grid-template-columns: minmax(0, 1fr); }
  .feature-cast .feature-art { padding-bottom: 12%; }
  .feature-cast .tv { width: 84%; margin-left: 16%; }
  .phone { width: 44%; }
  .guide {
    font-size: clamp(8.6px, 0.66vw, 13px);
    font-size: clamp(8.6px, 1.12cqw, 13px);
  }
}

/* ---------- Phones ---------- */
/* The guide keeps its TV size and the screen shows its left part */
@media (max-width: 619px) {
  .hero-art .screen { aspect-ratio: 1 / 1.04; }
  .guide {
    width: 100em;
    font-size: 8.6px;
    font-size: clamp(8.2px, 2.4cqw, 9.6px);
  }
  .g-desc { max-width: 24em; }
}
@media (min-width: 521px) and (max-width: 619px) {
  .hero-art .screen { aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
  .nav { height: 64px; }
}
/* Small multi-view TVs: the speaker icon alone marks the sound (follows the TV's width, not the window's) */
@container (max-width: 420px) {
  .snd-t { display: none; }
  .lbl { flex-wrap: nowrap; }
}

/* ---------- Video stills (fictional programs) ---------- */
.v-aurora { background: #0b1226 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23030718'/%3E%3Cstop offset='.62' stop-color='%230a1d33'/%3E%3Cstop offset='1' stop-color='%2310293b'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237de3b1' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%237de3b1' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%237de3b1' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Cfilter id='c' x='-50%25' y='-80%25' width='200%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='160' height='90' fill='url(%23k)'/%3E%3Cellipse cx='112' cy='16' rx='58' ry='13' fill='%238a7cc4' opacity='.4' filter='url(%23c)'/%3E%3Cellipse cx='52' cy='40' rx='50' ry='12' fill='%233fb58a' opacity='.25' filter='url(%23c)'/%3E%3Cpath d='M-10 46 C18 24 44 42 70 27 S122 8 170 20 L170 33 C132 24 110 45 80 43 S30 52 -10 64 Z' fill='url(%23g)' filter='url(%23b)'/%3E%3Cpath d='M8 44 C30 33 52 40 76 30 S118 15 150 20' stroke='%23c9fbe2' stroke-width='.7' opacity='.45' fill='none' filter='url(%23b)'/%3E%3Cg fill='%23f4f6fb'%3E%3Ccircle cx='9' cy='7' r='.35' opacity='.7'/%3E%3Ccircle cx='31' cy='14' r='.3' opacity='.5'/%3E%3Ccircle cx='47' cy='5' r='.4' opacity='.8'/%3E%3Ccircle cx='66' cy='12' r='.3' opacity='.5'/%3E%3Ccircle cx='88' cy='4' r='.35' opacity='.6'/%3E%3Ccircle cx='131' cy='9' r='.3' opacity='.5'/%3E%3Ccircle cx='150' cy='4' r='.4' opacity='.7'/%3E%3Ccircle cx='21' cy='26' r='.3' opacity='.4'/%3E%3Ccircle cx='142' cy='36' r='.3' opacity='.4'/%3E%3C/g%3E%3Cpath d='M0 90V67l13-6 11 5 15-11 15 9 12-5 16 10 18-13 14 8 12-4 16 8 18-6v38z' fill='%230a1524'/%3E%3Cpath d='M0 90V75l20-4 18 5 22-6 26 7 20-5 24 6 30-4v16z' fill='%2303060d'/%3E%3C/svg%3E") center / cover no-repeat; }
.v-football-1 { background: #0b1226 url("/img/mv/football-1.svg") center / cover no-repeat; }
.v-football-2 { background: #0b1226 url("/img/mv/football-2.svg") center / cover no-repeat; }
.v-football-3 { background: #0b1226 url("/img/mv/football-3.svg") center / cover no-repeat; }
.v-football-4 { background: #0b1226 url("/img/mv/football-4.svg") center / cover no-repeat; }
.v-alpine { background: linear-gradient(rgba(7, 11, 23, .2), rgba(7, 11, 23, .2)), #0b1226 url("/img/mv/winter-alpine.svg") center / cover no-repeat; }
.v-skijump { background: linear-gradient(rgba(7, 11, 23, .08), rgba(7, 11, 23, .08)), #0b1226 url("/img/mv/winter-skijump.svg") center / cover no-repeat; }
.v-biathlon { background: linear-gradient(rgba(7, 11, 23, .2), rgba(7, 11, 23, .2)), #0b1226 url("/img/mv/winter-biathlon.svg") center / cover no-repeat; }
.v-hockey { background: linear-gradient(rgba(7, 11, 23, .2), rgba(7, 11, 23, .2)), #0b1226 url("/img/mv/winter-hockey.svg") center / cover no-repeat; }
@media (max-width: 520px) { .brand img { height: 22px; } }