/* Photo-based TV: the complete physical shell is one photograph. Interactive
   elements are positioned on its screen, badge, and actual photographed keys. */
body:not(.interior-page) .site{padding:12px 2vw;min-height:100svh}
.television.photographic{width:min(100%,calc((100svh - 24px)*1.5),1700px);aspect-ratio:3/2;transform:none;filter:drop-shadow(0 20px 22px #0007);isolation:isolate;container-type:inline-size}
.television.photographic:after{display:none}
.tv-photograph{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.photographic .photo-screen{position:absolute;left:16.146%;top:11.23%;width:61.98%;height:57.03%;aspect-ratio:auto;border-radius:0;clip-path:url(#crt-glass);background:transparent;box-shadow:none;mix-blend-mode:screen;isolation:auto;overflow:hidden;pointer-events:none}
.photographic .photo-screen.youtube-active{pointer-events:auto}
.photographic .photo-screen.streaming-active{pointer-events:auto}
.photographic .screen:after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at center,transparent 35%,#0002 80%,#0008 100%);box-shadow:none}
.photographic .picture{inset:0;transform-origin:center;transition:opacity .2s,transform .2s}
.photographic .picture video{filter:saturate(.48) brightness(.85) contrast(1.1);opacity:.84;transform:none;object-fit:cover}
.photographic .youtube-player{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;background:#000;filter:saturate(.78) contrast(1.08)}
.photographic .streaming-launch{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1.2cqw,14px);color:#f5f1df;text-align:center;text-decoration:none;background:radial-gradient(ellipse at center,#111a,#05070bd9 78%);font-family:Arial,sans-serif}
.photographic .streaming-title{font-size:clamp(10px,2.2cqw,30px);font-weight:700;letter-spacing:.12em;text-shadow:0 2px 5px #000}
.photographic .streaming-cta{padding:clamp(6px,1cqw,12px) clamp(10px,2cqw,24px);border:1px solid #f5f1df99;border-radius:2px;background:#c92933;color:#fff;font-size:clamp(8px,1.4cqw,17px);font-weight:700;letter-spacing:.12em;box-shadow:0 2px 10px #0008}
.photographic .streaming-launch:hover .streaming-cta{background:#e53943}
.photographic .streaming-launch.amazon-video .streaming-cta{background:#00a8e0}
.photographic .streaming-launch.amazon-video:hover .streaming-cta{background:#27bbed}
.photographic .streaming-launch.letterboxd .streaming-cta{background:#00a84f}
.photographic .streaming-launch.letterboxd:hover .streaming-cta{background:#00c45e}
.photographic .picture:after{display:none}
.photographic .glass-reflection{background:linear-gradient(125deg,#d4e5e50a,transparent 25%);box-shadow:none;opacity:.4}
.photographic .glass-reflection:after{display:none}
.photographic.screen-off .photo-screen{background:transparent}
.photographic.screen-off .picture{opacity:0;transform:scaleY(.01)}
.photo-brand{position:absolute;left:37%;top:69.2%;width:20%;height:4.5%;display:flex;align-items:center;justify-content:center;mix-blend-mode:multiply}
.photo-brand .brand-name{width:100%}
.photo-brand .brand-logo{opacity:.87}
.photo-channels{position:absolute;left:23.83%;top:76.35%;width:46.1%;height:7.45%}
.photo-channels .channels{height:100%;display:grid;grid-template-columns:23.2fr 24.6fr 26.4fr 25.8fr;gap:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
.photo-channels .channel{position:relative;isolation:isolate;min-height:0;height:100%;padding:0;gap:0;border:0;border-radius:2px;box-shadow:none;background:none;transform:none;color:#292c2a;text-shadow:none;transition:background .15s,filter .15s}
.photo-channels .channel:after{display:none}
.photo-channels .channel-number{display:none}
.photo-channels .channel-name{position:absolute;z-index:1;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;font:700 clamp(8px,1.08cqw,14px)/.98 'Arial Narrow','Roboto Condensed','Helvetica Neue',Arial,sans-serif;letter-spacing:.055em;text-transform:uppercase;color:#454b42;opacity:.84;mix-blend-mode:multiply;text-shadow:0 1px 0 #f4f2e5a8,0 -1px 0 #282b2638}
.photo-channels .channel-name span{display:block;text-align:center;white-space:nowrap}
.photo-channels .channel:hover:after{opacity:.76;background:linear-gradient(180deg,#ffffff36 0%,#f3f2e90c 34%,#181b1812 100%)}
.photo-channels .channel:active{background:transparent;box-shadow:none;transform:translateY(1px);filter:brightness(.94)}
.photographic .photo-power{position:absolute;left:23.57%;top:87.7%;width:3.125%;height:auto;aspect-ratio:1;min-width:0;border:0;border-radius:50%;padding:0;box-shadow:none;background:none;color:#393d37;transform:none}
.photographic .photo-power:before{inset:-35%;border-radius:50%}
.photographic .photo-power svg{width:40%;height:40%;opacity:.7}
.photographic .photo-power:hover{background:#fff2}
.photographic .photo-power:active{box-shadow:inset 0 1px 2px #0003}
.photo-socials{position:absolute;left:40.885%;top:89.06%;width:10.94%;height:4.1%}
.photo-socials .social-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15%;width:100%;height:100%}
.photo-socials .social-link{width:100%;height:100%;border:0;box-shadow:none;background:none;border-radius:1px;color:#2b312b;transform:none}
.photo-socials .social-link:before{inset:-12%}
.photo-socials .social-link svg{width:48%;height:48%}
.photo-socials .social-link:hover{background:#fff2;transform:none;filter:none}
.photo-socials .social-link:active{background:#0002;transform:translateY(1px);box-shadow:none}
@media(max-width:650px){
  body:not(.interior-page) .site{padding:16px 0}
  .television.photographic{width:min(100%,calc((100svh - 32px)*1.5));transform:none}
  .photo-channels .channel:before{content:'';position:absolute;inset:-5px 0}
  .photo-channels .channel-name{font-size:clamp(6px,1.25cqw,9px);font-weight:600;line-height:1}
  .photographic .photo-power:before{inset:-70%}
  .photo-socials .social-link:before{inset:-35%}
}
@media(orientation:landscape) and (max-height:560px){.television.photographic{width:min(100%,calc((100svh - 20px)*1.5))}body:not(.interior-page) .site{padding:10px}}
@media(prefers-reduced-motion:reduce){.photographic .picture{transition:none}}

@media(max-width:650px){.photo-channels .channel-name span{display:block;text-align:center}.photo-socials .social-link svg{width:65%;height:65%}}