:root {
  --story-rim: #411621;
  --story-edge: #65444b;
  --story-inset: #241016;
  --story-mobile-edge: #5c3942;
}
/* A phone-inspired 9:16 frame: preserve the complete Reel without screen letterboxing.
   Deliberately follows video proportions, not the taller physical iPhone display. */
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) {
  --reel-rim: var(--story-rim);
  --reel-edge: var(--story-edge);
  --reel-inset: var(--story-inset);
  --reel-mobile-edge: var(--story-mobile-edge);
}
html[data-reel-frame="blue"] {
  --reel-rim: #9cc8f0;
  --reel-edge: #c7e1f9;
  --reel-inset: #172435;
  --reel-mobile-edge: #b7d7f5;
}
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) :is(.real-video, .duet-video, .reel-device) {
  position: relative;
  border: 7.5px solid var(--reel-rim);
  border-radius: 31px;
  background: var(--reel-inset);
  box-shadow: 0 0 0 1px var(--reel-edge), 0 9px 22px #190a1129;
  overflow: hidden;
  isolation: isolate;
}
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) :is(.work-section, .catalog-section) .real-video,
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) .duet-video {
  box-sizing: content-box;
  width: calc(100% - 15px);
  aspect-ratio: 9 / 16 !important;
}
/* Camera island is decorative and never intercepts a tap or video controls. */
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) :is(.real-video, .duet-video, .reel-device)::before {
  content: "";
  display: block;
  position: absolute;
  inset: 9px auto auto 50%;
  width: 28%;
  max-width: 96px;
  height: auto;
  aspect-ratio: 3.5;
  border-radius: 999px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 86% 50%, #1c2733 0 2px, #111319 3px, transparent 4px), #100d10;
  box-shadow: inset 0 0 0 1px #ffffff0a;
  opacity: 1;
  animation: none;
  pointer-events: none;
  z-index: 3;
}
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) :is(.real-video, .duet-video) video {
  border-radius: 22px;
  object-fit: cover;
}
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) .real-video:hover video { transform: none; }
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) :is(.work-video-footer, .duet-label) {
  padding-inline: 17px;
  padding-bottom: 21px;
}
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) .film-player {
  padding: 20px 16px;
}
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) .reel-device {
  width: 100%;
  border-width: 9px;
  border-radius: 35px;
  flex: none;
}
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) .film-player .reel-device video {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  border-radius: 25px;
  object-fit: contain;
}
html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) .video-error { color: var(--ink); }
/* Keep sequential viewing beside the film, before the optional project reading. */
.film-player .film-navigation{width:100%;padding:0 0 12px;border-top:0;gap:8px}
.film-player .film-navigation button{min-height:44px;padding:8px 10px;font-size:13px;border:1px solid #cbb6a0;border-radius:3px;cursor:pointer}
.film-player .film-navigation button:hover{background:#e8ddce}
.film-player .film-navigation button:focus-visible{outline:2px solid #805d3f;outline-offset:3px}
.film-player .film-navigation span{font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.film-copy .film-format{font-size:13px!important}
.film-copy .metric-note{font-size:12px}
@media(max-width:760px){
 .film-dialog .film-player{width:100%;max-width:380px;margin:38px auto 0}
 html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) .film-player .reel-device{width:min(100%,calc((76dvh - 100px) * var(--media-ratio,.5625) + 15px));align-self:center}
}
/* Photo-series covers share the burgundy rim, without phone hardware. */
.photo-window,
.photo-teaser-grid img {
  border: 7.5px solid var(--story-rim);
  border-radius: 31px;
  box-shadow: 0 0 0 1px var(--story-edge), 0 9px 22px #190a1129;
}
.photo-window { background: var(--story-inset); }
.photo-window img { border-radius: 22px; }
@media (max-width: 760px) {
  .photo-window,
  .photo-teaser-grid img {
    border-width: 4.5px;
    border-radius: 21px;
    box-shadow: 0 0 0 1px var(--story-mobile-edge), 0 6px 16px #190a1124;
  }
  .photo-window img { border-radius: 15px; }
  html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) :is(.real-video, .duet-video) {
    width: calc(100% - 9px);
    border-width: 4.5px;
    border-radius: 21px;
    box-shadow: 0 0 0 1px var(--reel-mobile-edge), 0 6px 16px #190a1124;
  }
  html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) :is(.real-video, .duet-video)::before { top: 6px; }
  html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) :is(.real-video, .duet-video) video { border-radius: 15px; }
  html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) :is(.work-video-footer, .duet-label) { padding-inline: 12px; padding-bottom: 17px; }
  html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) .film-player { padding: 18px 12px 8px; }
  html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) .reel-device { border-width: 7.5px; border-radius: 30px; }
  html:is([data-reel-frame="burgundy"], [data-reel-frame="blue"]) .film-player .reel-device video { border-radius: 21px; }
}

/* Return to the chosen cover whenever a card preview is not playing. */
.real-video .work-cover{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1;pointer-events:none}
.real-video.is-previewing .work-cover{opacity:0}
.real-video :is(.real-play,.work-video-footer){z-index:2}