/* An authored broadcast cabinet: curved glass, recessed trim and a bolted shell. */
.television { position: relative; width: 100%; max-width: 640px; aspect-ratio: 640 / 500;
  container-type: inline-size; isolation: isolate; animation: television-arrive .5s var(--ease) both; }
.television-cabinet { display: block; width: 100%; height: 100%; }
.television::after { content: ""; position: absolute; inset: 1.6% 1.25%; border-radius: 2.8%; pointer-events: none;
  background-image: var(--material-grain, none); opacity: .5; mix-blend-mode: soft-light; }
.tv-case { fill: var(--tv-case); stroke: var(--tv-edge); stroke-width: 2; }
.tv-case-edge { stroke: var(--tv-trim); stroke-width: 2; }
.tv-trim { fill: var(--tv-trim); stroke: var(--tv-edge); stroke-width: 1; }
.tv-bezel { fill: var(--tv-dark); stroke: var(--tv-dark); stroke-width: 3; }
.tv-glass { fill: var(--tv-screen); stroke: var(--tv-glass-edge); stroke-width: 2; }
.tv-reflection { stroke: var(--tv-ink); stroke-opacity: .17; stroke-width: 9; stroke-linecap: round; }
.tv-glass-lip { stroke: var(--tv-glass-edge); stroke-width: 2; }
.tv-vents { stroke: var(--tv-dark); stroke-width: 5; stroke-linecap: round; }
.tv-screws, .tv-power-socket { fill: var(--tv-dark); stroke: var(--tv-edge); stroke-width: 1.5; }
.tv-screw-slots { stroke: var(--tv-trim); stroke-width: 2; stroke-linecap: round; }
.tv-power { fill: var(--signal); stroke: var(--tv-ink); stroke-opacity: .5; }
.tv-screen-surface { position: absolute; inset: 14% 10% 18%; border-radius: 12% / 9%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 35%, var(--tv-dark) 110%),
    repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, var(--tv-dark) 30%, transparent) 2px 3px);
  opacity: .85; }
.tv-program { position: absolute; inset: 16% 15% 21%; display: grid; place-items: center;
  color: var(--tv-ink); text-align: center; animation: television-tune .65s var(--ease) both; }
.tv-wordmark { display: grid; justify-items: center; font: 800 18cqw/.8 var(--tv-font);
  text-transform: uppercase; letter-spacing: -.025em; transform: rotate(-5deg); }
.tv-super { font-size: .56em; letter-spacing: .025em; line-height: 1; }
.tv-wordmark strong { font-size: 1.15em; font-weight: inherit; }
.tv-name { margin-top: .12em; padding: 0 .13em .08em; background: var(--signal); color: var(--tv-dark);
  font-size: .9em; line-height: .9; letter-spacing: -.02em; }
.tv-caption { position: absolute; inset: auto 33% 5.6%; margin: 0; color: var(--tv-ink); text-align: center;
  font: 700 2cqw/1.1 var(--tv-font); letter-spacing: .055em; text-transform: uppercase; }
.television--compact { width: min(280px, 65vw); }
.television--compact .tv-caption { visibility: hidden; }
.television--compact .tv-power { animation: television-power 1s ease-in-out infinite alternate; }
:root[data-theme] .brand:has([data-television]) { padding: 0; background: none; border: 0; box-shadow: none; }
.brand > .tagline { max-width: 36ch; margin: var(--space-2) auto 0; text-align: center; }
.home-brand > .tagline { font-size: 1rem; }
@media (max-width: 760px) and (orientation: portrait) {
  .brand [data-television] { width: 100%; margin-inline: auto; }
  .brand > .tagline { font-size: .95rem; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .brand [data-television] { max-width: 360px; margin-inline: auto; }
  .brand > .tagline { font-size: .875rem; }
}
@keyframes television-arrive { from { transform: translateY(12px) scale(.97); } }
@keyframes television-tune { from { opacity: .25; clip-path: inset(49% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes television-power { to { opacity: .35; } }