/* Natural aspect ratios are sourced from the actual local media files. */
.card .picture{aspect-ratio:var(--asset-ratio);height:auto;background:transparent;overflow:hidden}
.card .picture :is(img,video){display:block;width:100%;height:auto;aspect-ratio:var(--asset-ratio);object-fit:contain;background:transparent;transform:none}
.cards{align-items:start}
.post-grid{align-items:start;grid-auto-flow:row}
.post-art{display:block;aspect-ratio:var(--asset-ratio);height:auto;max-height:none;background:transparent;overflow:hidden}
.post-art img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:transparent;transform:none}
.source-posts .post-art,.brand-posts .post-art{max-height:none}
.social-post>a:hover img{transform:none}
.editorial-row{align-items:center}
.editorial-row>img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:transparent}
.bagels-site-images{align-items:start}
.bagels-site-images img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
/* Independent frames replace a shared detail box for differently shaped films. */
.brand-world{align-items:center;min-height:0}
.brand-world .world-media{position:relative;min-height:0;height:auto;width:100%;aspect-ratio:var(--asset-ratio);overflow:hidden;background:transparent;align-self:center}
.brand-world .world-media video{position:static;inset:auto;display:block;width:100%;height:auto;aspect-ratio:var(--asset-ratio);object-fit:contain;animation:none;transform:none;background:transparent}
.brand-world .world-media.portrait-world{width:min(calc(100% - 32px),calc(66svh * var(--asset-ratio)));justify-self:center;border:6px solid #111110;border-radius:28px;box-sizing:content-box;box-shadow:0 12px 30px #0002}
.brand-world .portrait-world video{border-radius:21px}
.supplemental-reel{margin:35px 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.native-phone{width:min(calc(100% - 16px),calc(68svh * var(--asset-ratio)));aspect-ratio:var(--asset-ratio);box-sizing:content-box;border:6px solid #111110;border-radius:28px;overflow:hidden;box-shadow:0 12px 30px #0002}
.native-phone video{display:block;width:100%;height:auto;object-fit:contain;border-radius:21px}
.supplemental-reel figcaption{font-size:11px;color:inherit}
/* Desktop chapter media: landscape fills its own true-ratio frame; portrait is a phone. */
.chapter-media{--hero-media-height:min(80svh,calc(100svh - var(--concept-nav-height) - 180px));overflow:visible}
.chapter-media-frame{width:min(100%,calc(var(--hero-media-height) * var(--asset-ratio)));height:auto;aspect-ratio:var(--asset-ratio);flex:none;display:block;overflow:hidden;min-height:0;background:transparent}
.chapter-media-frame :is(video,img){display:block;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:var(--asset-ratio);object-fit:contain;background:transparent;transform:none;filter:none}
.chapter-media-frame.phone-frame{width:min(calc(100% - 14px),calc((var(--hero-media-height) - 14px) * var(--asset-ratio)));box-sizing:content-box;border:7px solid #111110;border-radius:32px;box-shadow:0 14px 38px #0002}
.chapter-media-frame.phone-frame :is(video,img){border-radius:24px}
/* Mobile portrait media uses full width and its natural height. */
@media(max-width:767px){
 .film-screen{height:auto;min-height:calc(100svh - var(--concept-nav-height));grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;overflow:visible}
 .chapter-copy{grid-column:1;grid-row:1;padding:28px 20px}
 .chapter-copy h1{font-size:clamp(34px,8vw,60px)}
 .chapter-media{grid-column:1;grid-row:2;padding:8px 20px 28px;overflow:visible}
 .chapter-media-frame,.chapter-media-frame.phone-frame{width:100%;height:auto;max-height:none;flex:none;border:0;border-radius:0;box-shadow:none;box-sizing:border-box}
 .chapter-media-frame :is(video,img){width:100%;height:auto;max-height:none;max-width:100%;border-radius:0!important;object-fit:contain}
 .chapter-controls{grid-column:1;grid-row:3}
 .brand-world{grid-template-columns:1fr}
 .brand-world .world-media.portrait-world{width:100%;border:0;border-radius:0;box-shadow:none;box-sizing:border-box}
 .brand-world .world-media video{border-radius:0}
 .native-phone{width:100%;border:0;border-radius:0;box-shadow:none;box-sizing:border-box}
 .native-phone video{border-radius:0}
}
/* Media fallback space is always cream; dark phone bezels are intentional borders. */
main img,main video,.card .picture,.post-art,.chapter-media-frame,.world-media,.native-phone{background-color:#f3f0e8!important}
/* Editorial rows have a bounded media object, never a tall unbounded column. */
.editorial-row-media{--row-media-cap:460px;width:min(100%,calc(var(--row-media-cap) * var(--asset-ratio)));aspect-ratio:var(--asset-ratio);height:auto;justify-self:center;min-width:0;overflow:hidden;background:#f3f0e8;align-self:center}
.editorial-row-media :is(video,img){position:static;display:block;width:100%;height:auto;aspect-ratio:var(--asset-ratio);object-fit:contain;max-height:none;background:#f3f0e8;filter:none;transform:none}
.editorial-row-media.editorial-phone{--row-media-cap:446px;box-sizing:content-box;width:min(calc(100% - 14px),calc(var(--row-media-cap) * var(--asset-ratio)));border:7px solid #111110;border-radius:32px;box-shadow:0 14px 34px #0002}
.editorial-phone :is(video,img){border-radius:24px}
@media(min-width:768px){.editorial-row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);align-items:center}.editorial-row>div{min-width:0}.editorial-row .row-description{max-width:450px}}
@media(max-width:767px){.editorial-row{grid-template-columns:1fr;gap:25px}.editorial-row-media,.editorial-row-media.editorial-phone{width:100%;aspect-ratio:var(--asset-ratio);border:0;border-radius:0;box-shadow:none;box-sizing:border-box}.editorial-row-media :is(video,img){border-radius:0}}
/* Real reels preserve the file ratio; portrait reels have a deliberate phone bezel. */
.post-art video{display:block;width:100%;height:auto;aspect-ratio:var(--asset-ratio);object-fit:contain;background:#f3f0e8}
.post-art.post-phone,.card .picture.card-phone{box-sizing:border-box;border:6px solid #111110;border-radius:28px;box-shadow:0 10px 25px #0002;aspect-ratio:auto}
.post-phone video,.card-phone video{border-radius:20px;overflow:hidden}
.cinema-wall{width:100%;background:#f3f0e8;color:#111110;padding:26px 0 0}
.wall-heading{display:flex;justify-content:space-between;align-items:center;padding:0 4vw 24px;font-size:10px;letter-spacing:.1em;gap:20px}
.wall-heading .motion{border:1px solid #111110;padding:9px 12px;font-size:11px;letter-spacing:0}
.wall-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#c8c4ba;border-block:1px solid #c8c4ba}
.wall-tile{position:relative;aspect-ratio:16/9;min-width:0;background:#f3f0e8;overflow:hidden;isolation:isolate}
.wall-tile video{display:block;width:100%;height:100%;object-fit:contain;background:#f3f0e8}
.wall-label{position:absolute;bottom:10px;left:10px;background:#f3f0e8;color:#111110;padding:5px 7px;font-size:9px;line-height:1.2;opacity:0;transition:opacity .2s}
.wall-tile:hover .wall-label,.wall-tile:focus .wall-label{opacity:1}
.wall-tile::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .25s}
.wall-tile:hover::after,.wall-tile:focus::after{box-shadow:inset 0 0 0 1px #ff5c00,inset 0 0 22px #ff5c0026}
.wall-visible .wall-tile{animation:wallReveal .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--tile)*.12s)}
@keyframes wallReveal{from{opacity:.25;clip-path:inset(14% 0 14% 0)}to{opacity:1;clip-path:inset(0)}}
@media(max-width:767px){.wall-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.post-art.post-phone,.card .picture.card-phone{border-width:5px;border-radius:25px}.wall-label{font-size:8px}}
/* Clean device object: transparent corners, a CSS glow, never enlarged beyond 914px. */
.chapter-media-frame.device-art{position:relative;isolation:isolate;overflow:visible;width:min(914px,100%,calc(var(--hero-media-height) * var(--asset-ratio)));max-width:914px;background:transparent!important;border:0;box-shadow:none}
.chapter-media-frame.device-art::before{content:'';position:absolute;inset:-12%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 52%,#ff5c0055 0%,#ff5c0026 36%,#ff5c0000 70%);filter:blur(24px)}
main img[src$="telly_device_clean.webp"]{max-width:914px;background:transparent!important;border-radius:14px!important;box-shadow:0 12px 30px #11111024;object-fit:contain}
@media(max-width:767px){.chapter-media-frame.device-art{width:min(914px,100%);max-width:914px}.chapter-media-frame.device-art::before{inset:-8%;filter:blur(16px)}}