/* The identity is type only. The TV is a live media frame, not a flattened image. */
.brand > span { font-family: var(--display); font-style: italic; font-size: 33px; font-weight: 900; letter-spacing: .2px; }
.brand .brand-sub { font-style: normal; font-family: var(--mono); font-size: 13px; letter-spacing: 6px; padding-left: 3px; margin-top: 8px; color: #d8c5df; }
.footer-top .brand > span { font-size: 28px; }
.footer-top .brand .brand-sub { font-size: 12px; letter-spacing: 5px; }
.orbit-center { width: 91px; height: 91px; }
.orbit-center > span { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 19px; letter-spacing: -.3px; color: var(--pink); }

.tv-stage { position: absolute; width: min(44%, 600px); right: max(48px, calc((100% - 1224px) / 2)); top: 63px; pointer-events: none; z-index: 1; }
/* Fade to zero within the glow layer so its rectangular bounds never show. */
.tv-aura { position: absolute; inset: -30% -18% -15%; background: radial-gradient(ellipse closest-side at 58% 48%, #a432754d, #50246524 52%, #50246500 100%); }
.tv-rig { position: relative; animation: crt-float 10s ease-in-out infinite; }
.tv-cabinet { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16%; gap: 3%; padding: 4% 3.8% 6.2%; border: 3px solid #4d3b4e; border-bottom-color: #211a27; border-radius: 24px 24px 20px 20px; background: linear-gradient(135deg, #443a49 0%, #29232e 18%, #17141c 60%, #2f2332 100%); box-shadow: inset 0 2px 2px #c396b34a, inset 0 -5px 6px #000b, 7px 7px 0 #19121f, 10px 9px 0 1px #382334, 14px 14px 0 #100c15, 18px 22px 40px #0009, 0 0 65px #d34b9a15; transform: perspective(1400px) rotateY(-7deg) rotateZ(-1.3deg); }
.tv-cabinet::before { content: ''; position: absolute; inset: 4px; border: 1px solid #b78aaf1c; border-radius: 19px; pointer-events: none; }
.tv-bezel { min-width: 0; align-self: start; border-radius: 13% / 10%; padding: 2.8%; border: 2px solid #60505e; border-bottom-color: #0b090d; border-right-color: #100b14; background: linear-gradient(140deg, #0c090f, #27232d 42%, #483c49 100%); box-shadow: 0 1px 1px #edb9d326, inset 3px 4px 12px #000; }
.tv-screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; border-radius: 12% / 9%; border: 1px solid #76677555; background: repeating-linear-gradient(0deg, #34323a 0 1px, #17151d 1px 3px); box-shadow: inset 0 0 30px #000; }
.tv-static, #hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-static { opacity: .5; image-rendering: auto; }
#hero-video { opacity: 0; background: #08080b; }
.tv-screen[data-video="ready"] #hero-video { opacity: 1; }
.tv-screen[data-video="ready"] :is(.tv-static, .tv-idle) { visibility: hidden; }
.tv-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #e9e4eb; text-shadow: -1px 0 #fe68ad70, 1px 0 #78cfb866, 0 0 12px #fff3; }
.tv-channel { position: absolute; top: 8%; left: 8%; font-family: var(--mono); font-size: clamp(15px, 1.5vw, 22px); letter-spacing: 2px; color: #cbdfbf; opacity: .85; }
.tv-screen-wordmark { font-family: var(--display); font-style: italic; font-weight: 900; font-size: clamp(38px, 4.7vw, 70px); letter-spacing: -1px; opacity: .8; }
.tv-signal-label { position: absolute; bottom: 15%; font-family: var(--mono); font-size: clamp(5px, .58vw, 9px); letter-spacing: 2px; opacity: .7; }
.tv-scanlines { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .45; background: repeating-linear-gradient(0deg, #0005 0 1px, transparent 1px 3px); }
.tv-scanlines::after { content: ''; position: absolute; inset: -100% 0; background: linear-gradient(transparent 46%, #d0e1ff09 49%, #d0e1ff14 50%, transparent 54%); animation: tv-tracking 11s linear infinite; }
.tv-glass { position: absolute; z-index: 3; inset: 0; border-radius: inherit; box-shadow: inset 0 0 23px 8px #030106c7, inset 2px 3px 6px #b5afc033; background: radial-gradient(ellipse at 25% -5%, #f5cce514, transparent 55%), linear-gradient(116deg, transparent 40%, #ffffff05 41%, #ffffff09 43%, transparent 60%); pointer-events: none; }
.tv-control-panel { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 5px 2px 0; border-left: 1px solid #0008; background: linear-gradient(90deg, #0002, transparent 20%); }
.tv-tuning-label { font-family: var(--mono); font-size: clamp(5px, .5vw, 7px); letter-spacing: 2px; color: #9f879c; margin: 2px 0 8px; }
.tv-dial { position: relative; width: 85%; aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; border: 1px solid #6c5263; background: repeating-conic-gradient(from -50deg, #887183 0deg 1.5deg, #18151d 1.5deg 19deg); box-shadow: 2px 3px 7px #000b, 0 1px 1px #bb88a422; }
.tv-dial::before { content: ''; position: absolute; inset: 12%; border: 1px solid #776073; border-radius: 50%; background: linear-gradient(135deg, #776877, #322b38 28%, #17131d 62%, #4f3b4f); box-shadow: inset 1px 1px 3px #bfa6ba66, inset -2px -2px 4px #000b; }
.tv-dial::after { content: ''; position: absolute; width: 7%; height: 61%; left: 46%; top: 19%; border-radius: 3px; background: linear-gradient(90deg, #241923, #8e7087 44%, #2e212d); transform: rotate(32deg); box-shadow: 2px 1px 4px #000; }
.dial-primary { margin-bottom: 16%; }
.dial-secondary { width: 70%; }
.dial-secondary::after { transform: rotate(-30deg); }
.tv-speaker { flex: 1; align-self: stretch; min-height: 34px; margin: 18% 10% 10%; border: 1px solid #221826; border-radius: 3px; background: repeating-linear-gradient(0deg, #0b090f 0 2px, #403043 2px 3px, #1d1722 3px 5px); box-shadow: inset 0 2px 5px #000; }
.tv-power { display: flex; gap: 7px; align-items: center; margin-bottom: 3px; }
.tv-power > span { width: 6px; height: 6px; border-radius: 1px; background: #ff83b6; box-shadow: 0 0 9px #ff66ad8c; }
.tv-power small { font-family: var(--mono); font-size: 5px; letter-spacing: 1px; color: #ac8a9e; }
.tv-cabinet-wordmark { position: absolute; bottom: 2.8%; left: 6%; font-family: var(--display); font-style: italic; font-weight: 900; letter-spacing: 1px; font-size: clamp(8px, .9vw, 13px); color: #bda9ba; }
.tv-model { position: absolute; bottom: 3%; right: 5%; font-family: var(--mono); font-size: clamp(3px, .35vw, 5px); letter-spacing: 1px; color: #8c7489; }
.tv-screw { position: absolute; width: 5px; height: 5px; border-radius: 50%; border: 1px solid #87707c55; background: linear-gradient(135deg, #685568, #131017); box-shadow: 0 1px 1px #000; }
.tv-screw::after { content: ''; position: absolute; width: 3px; height: 1px; background: #100c14; left: 0; top: 1px; transform: rotate(-35deg); }
.screw-top-left { top: 11px; left: 12px; }.screw-top-right { top: 11px; right: 12px; }.screw-bottom-left { bottom: 10px; left: 12px; }.screw-bottom-right { bottom: 10px; right: 12px; }
.tv-feet { height: 9px; display: flex; justify-content: space-between; width: 72%; margin-inline: auto; transform: rotate(-1.3deg); }
.tv-feet i { width: 25px; height: 10px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #15111b, #403040, #15111b); }
.tv-ground-shadow { height: 30px; margin-top: 10px; background: radial-gradient(ellipse, #c64b9d22, #0003 35%, transparent 70%); filter: blur(4px); }

@keyframes tv-tracking { from { transform: translateY(-25%); } to { transform: translateY(25%); } }

@media (max-width: 1100px) { .tv-stage { top: 84px; right: 32px; width: 45%; } .tv-cabinet { border-radius: 19px; } .tv-tuning-label { margin-bottom: 5px; }  }
@media (max-width: 900px) {
  .hero { min-height: 0; padding-bottom: 26px; }
  .hero-content { padding-bottom: 25px; }
  .tv-stage { position: relative; top: auto; right: auto; width: min(560px, calc(100% - 68px)); margin: 6px auto 0; }
  .tv-channel { font-size: 19px; }
  .tv-screen-wordmark { font-size: 59px; }
  .tv-signal-label { font-size: 7px; }
  .tv-cabinet-wordmark { font-size: 11px; }
  .tv-model { font-size: 4px; }
  
}
@media (max-width: 580px) {
  .brand > span { font-size: 28px; }
  .brand .brand-sub { font-size: 11px; letter-spacing: 5px; margin-top: 7px; }
  .footer-top .brand .brand-sub { font-size: 11px; letter-spacing: 5px; }
  .footer-top .brand > span { font-size: 26px; }
  .hero { padding-bottom: 23px; }
  .hero-content { padding-bottom: 26px; }
  .tv-stage { width: calc(100% - 48px); margin-top: 12px; }
  .tv-cabinet { border-width: 2px; border-radius: 15px; box-shadow: inset 0 2px 2px #c396b34a, inset 0 -3px 4px #000b, 5px 5px 0 #19121f, 7px 6px 0 1px #382334, 10px 10px 0 #100c15, 15px 18px 30px #0009; }
  .tv-cabinet::before { border-radius: 11px; }
  .tv-bezel { padding: 3%; border-width: 1px; }
  .tv-channel { font-size: 12px; letter-spacing: 1px; }
  .tv-screen-wordmark { font-size: clamp(30px, 9.5vw, 48px); }
  .tv-signal-label { font-size: 4px; letter-spacing: 1px; }
  .tv-glass { box-shadow: inset 0 0 15px 4px #030106c7, inset 1px 2px 4px #b5afc033; }
  .tv-control-panel { padding-top: 1px; }
  .tv-tuning-label { font-size: 4px; letter-spacing: 1px; margin: 0 0 5px; }
  .tv-speaker { min-height: 18px; margin-top: 13%; background-size: auto 4px; }
  .tv-power { gap: 3px; margin-bottom: 0; }
  .tv-power > span { width: 4px; height: 4px; }
  .tv-power small { font-size: 3px; letter-spacing: .6px; }
  .tv-cabinet-wordmark { font-size: 7px; }
  .tv-model { font-size: 3px; letter-spacing: .6px; }
  .tv-screw { width: 4px; height: 4px; }
  .screw-top-left { top: 6px; left: 7px; }.screw-top-right { top: 6px; right: 7px; }.screw-bottom-left { bottom: 5px; left: 7px; }.screw-bottom-right { bottom: 5px; right: 7px; }
  .tv-feet { height: 6px; }.tv-feet i { width: 17px; height: 7px; }
  .tv-ground-shadow { height: 22px; margin-top: 5px; }
  
  .tv-rig { animation-name: crt-float-mobile; }
}