/* ==========================================================
   Case-study reels - an 18-second silent reel per case study
   (made in motion/, web encodes in /media/reels/).
   Used by the portfolio hero (with a switch between the three)
   and by each case study, under its Key outcomes band.
   Nothing downloads until play is pressed: preload="none" and
   no src until then, see /js/reel.js.
   ========================================================== */
.reel { margin:0; display:flex; flex-direction:column; gap:.875rem; }
.reel-frame { position:relative; aspect-ratio:4/5; border-radius:10px; overflow:hidden;
  background:var(--bg-sunken); outline:1px solid var(--img-edge); outline-offset:-1px; }
.reel-video { display:block; width:100%; height:100%; object-fit:cover; cursor:pointer; }

/* The play control sits on the video, whose covers are light (opening
   frame) or dark (outcome frame), so it is dark ink with a light ring:
   readable on both, and not themed. */
.reel-play { position:absolute; right:16px; bottom:16px; display:inline-flex; align-items:center; gap:.5rem;
  height:48px; padding:0 1.125rem 0 .875rem; border-radius:999px; border:2px solid #F5F1EA;
  background:#1A1815; color:#F5F1EA; font-family:var(--font-mono); font-size:.875rem; letter-spacing:.06em;
  cursor:pointer; transition:transform .15s ease; }
.reel-play:hover { transform:scale(1.04); }
.reel-play[hidden] { display:none; }
.reel-play:focus-visible, .reel-tab:focus-visible, .reel-link:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

.reel-tabs { display:flex; flex-wrap:wrap; gap:.375rem; }
.reel-tab { flex:1 1 auto; font-family:var(--font-sans); font-size:.875rem; font-weight:500; color:var(--fg-2); white-space:nowrap;
  background:none; border:1px solid var(--rule); border-radius:999px; padding:.5rem .625rem; cursor:pointer; }
.reel-tab:hover { color:var(--fg-1); border-color:var(--fg-2); }
.reel-tab[aria-pressed="true"] { color:var(--fg-1); background:var(--bg-sunken); border-color:var(--fg-2); }

/* The case-study link names its case study, so it is clear which one it opens.
   A text link, not a button: third in line after play and the switch. */
.reel-link { align-self:flex-start; display:inline-flex; align-items:baseline; gap:.375rem; color:var(--fg-accent);
  text-decoration:none; font-size:.875rem; font-weight:500; }
.reel-link:hover { color:var(--fg-accent-hover); text-decoration:underline; text-underline-offset:3px; }

/* Case-study block: reel beside a short intro */
.reel-row { display:flex; align-items:center; gap:56px; max-width:1200px; margin:0 auto; }
.reel-row .reel { flex:0 0 300px; }
.reel-text { max-width:34rem; }
.reel-text .h2 em { font-style:italic; color:var(--fg-accent); }
@media (max-width:720px) {
  .reel-row { flex-direction:column; align-items:stretch; gap:28px; }
  .reel-row .reel { flex:none; width:100%; max-width:340px; }
}