/* production shims — baked <img>/<video> where <image-slot> used to be */
img.brand-logo{width:30px;height:30px;flex:none;display:block;object-fit:cover}
.logo-mask{display:block;background:#ffffff;
  -webkit-mask:url(assets/ar-logo.svg) no-repeat center/contain;
  mask:url(assets/ar-logo.svg) no-repeat center/contain}
html[data-theme="light"] .logo-mask{background:#131311}
.brand .logo-mask{width:30px;height:30px;flex:none}
.cs-media img,.cs-media video{width:100%;height:auto;display:block;background:var(--bg2)}
.cs-media img.portrait{width:min(440px,80vw);margin:0 auto;background:none}
.cs-chapter-group .cs-media:has(img.portrait){padding:clamp(24px,4vw,56px) 0 0}
.cs-gallery img{width:100%;height:auto;display:block;background:var(--bg2)}
.cs-gallery--phones img{aspect-ratio:9/16;height:auto;object-fit:cover}
.about-media img{width:100%;height:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.ph-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;aspect-ratio:16/10;border:1.5px dashed color-mix(in oklab,var(--ink) 28%,transparent);border-radius:12px;background:color-mix(in oklab,var(--ink) 3%,transparent);color:var(--muted);padding:20px;box-sizing:border-box;text-align:center}
.ph-slot span{font-size:13px;line-height:1.5;max-width:42ch;text-wrap:pretty}
.ph-slot code{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;opacity:.65}
.cs-gallery--phones .ph-slot{aspect-ratio:9/16}
.reel-item .ph-slot{height:100%;aspect-ratio:auto;border-radius:0}
.g-media .ph-slot{aspect-ratio:4/3}
.brand a .ph-slot,.brand .ph-slot{width:30px;height:30px;aspect-ratio:1;padding:0;border-radius:6px}
.brand .ph-slot span,.brand .ph-slot code{display:none}
.cs-chapter-group .cs-media:not(.cs-hero-phone)>video{border-radius:0}
.cs-media .cs-video-frame video{width:100%;height:auto;display:block;border-radius:8px}
.cs-media.cs-hero-phone{flex-direction:column;align-items:center}
.cs-media.cs-hero-phone video{width:min(440px,80vw);height:auto;margin:0 auto;border-radius:24px;background:none}
.cs-media.cs-hero-phone figcaption{align-self:stretch}