/* ==========================================================================
   Video player — pairs with js/player.js
   Dark "screening" surface on every ground; accent follows the platform
   (override per player with --vp-accent, or opts.accent).
   ========================================================================== */
.vp{
  --vp-accent:var(--fern-500, #549864);
  --vp-accent-2:var(--petrol-300, #94C7E5);
  --vp-ink:#021D2A;
  --vp-p:0%; --vp-b:0%;
  position:relative; width:100%; margin-inline:auto;
  border-radius:var(--r-2xl, 20px);
  background:#000; color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -18px rgba(2,29,42,.55), 0 4px 12px rgba(2,29,42,.18);
  font-family:inherit; line-height:1.4;
  outline:none; -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
}
.vp:focus-visible{box-shadow:0 0 0 3px var(--s-surface, #fff), 0 0 0 5px var(--vp-accent)}
.vp.is-tall{max-width:min(100%, 26rem)}

/* Width: a landscape film always spans the full content column (same width as
   the context card under it). Only portrait films are capped so they do not
   become taller than the screen. */
.vp.is-tall{--vp-maxh:max(260px, calc(100dvh - var(--header-h, 64px) - 160px)); max-width:min(26rem, calc(var(--vp-maxh) * var(--vp-arn, .5625)))}

.vp-frame{
  position:relative; width:100%;
  aspect-ratio:var(--vp-ar, 16 / 9);
  border-radius:inherit; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 120% at 20% 0%, #0B3A55 0%, var(--vp-ink) 62%);
  cursor:pointer;
}
.vp-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:#000; display:block;
}
.vp-video::cue{background:rgba(2,29,42,.78); color:#fff; font-size:1.1em; line-height:1.5}

/* --- shading, cover ----------------------------------------------------- */
.vp-shade{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(to top, rgba(2,29,42,.88) 0%, rgba(2,29,42,.38) 22%, rgba(2,29,42,0) 46%),
    linear-gradient(to bottom, rgba(2,29,42,.38) 0%, rgba(2,29,42,0) 20%);
  transition:opacity .35s var(--ease, ease);
}
.vp.is-fresh .vp-shade{
  background:
    linear-gradient(to top, rgba(2,29,42,.9) 0%, rgba(2,29,42,.45) 38%, rgba(2,29,42,.12) 70%),
    linear-gradient(to bottom, rgba(2,29,42,.4) 0%, rgba(2,29,42,0) 24%);
}
.vp-cover{
  position:absolute; left:0; right:0; bottom:92px; z-index:3; pointer-events:none;
  padding:0 clamp(16px, 3vw, 28px);
  display:flex; flex-direction:column; gap:4px;
  transition:opacity .3s, transform .3s var(--ease, ease);
}
.vp-cover-t{margin:0; font-size:clamp(1.05rem, 2.4vw, 1.4rem); font-weight:600; letter-spacing:.005em; text-shadow:0 1px 10px rgba(2,29,42,.6)}
.vp-cover-d{margin:0; font-size:var(--fs-caption, .8rem); color:rgba(255,255,255,.82)}
.vp:not(.is-fresh) .vp-cover{opacity:0; transform:translateY(6px)}

/* --- centre button ------------------------------------------------------ */
.vp-big{
  position:absolute; z-index:5; top:50%; left:50%;
  width:clamp(64px, 11vw, 88px); aspect-ratio:1; margin:calc(clamp(64px, 11vw, 88px) / -2) 0 0 calc(clamp(64px, 11vw, 88px) / -2);
  display:grid; place-items:center; padding:0 0 0 4px;
  border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.16); color:#fff; cursor:pointer;
  -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 10px 30px rgba(2,29,42,.4);
  transition:transform .25s var(--ease-spring, ease), opacity .2s, background .2s;
}
.vp-big svg{width:40%; height:40%}
.vp-big::before{
  content:''; position:absolute; inset:-9px; border-radius:50%;
  border:2px solid var(--vp-accent); opacity:0;
}
.vp.is-fresh .vp-big::before{animation:vp-pulse 2.4s ease-out infinite}
.vp-big:hover{background:var(--vp-accent); border-color:transparent; transform:scale(1.06)}
.vp-big:focus-visible{outline:3px solid #fff; outline-offset:3px}
.vp.is-playing .vp-big, .vp.is-ended .vp-big, .vp.is-error .vp-big, .vp.is-wait .vp-big{opacity:0; pointer-events:none; transform:scale(.7)}
.vp:not(.is-fresh):not(.is-playing) .vp-big{width:60px; margin:-30px 0 0 -30px; background:rgba(2,29,42,.5)}
@keyframes vp-pulse{0%{opacity:.75; transform:scale(.9)} 80%,100%{opacity:0; transform:scale(1.35)}}

/* --- spinner, hint, seek bursts ---------------------------------------- */
.vp-spin{
  position:absolute; z-index:4; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:#fff;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.vp.is-wait .vp-spin{opacity:1; animation:vp-spin .8s linear infinite}
@keyframes vp-spin{to{transform:rotate(360deg)}}
.vp-hint{
  position:absolute; z-index:6; top:14px; left:50%; transform:translate(-50%, -6px);
  padding:6px 14px; border-radius:var(--r-full, 999px);
  background:rgba(2,29,42,.78); font-size:var(--fs-caption, .8rem); font-weight:500; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
.vp-hint.is-on{opacity:1; transform:translate(-50%, 0)}
.vp-seek{
  position:absolute; z-index:6; top:50%; margin-top:-34px; width:68px; height:68px; border-radius:50%;
  display:grid; place-items:center; text-align:center; padding:6px;
  background:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:.78rem; font-weight:600; line-height:1.25; pointer-events:none; opacity:0;
}
.vp-seek.is-l{left:12%}
.vp-seek.is-r{right:12%}
.vp-seek.is-on{animation:vp-burst .7s ease-out}
@keyframes vp-burst{0%{opacity:0; transform:scale(.7)} 25%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(1.08)}}

/* --- error / end -------------------------------------------------------- */
.vp-err, .vp-end{
  position:absolute; inset:0; z-index:7; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px;
  background:rgba(2,29,42,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.vp.is-error .vp-err, .vp.is-ended .vp-end{display:flex}
.vp.is-ended .vp-end{background:linear-gradient(to top, rgba(2,29,42,.85), rgba(2,29,42,.35))}
.vp-err svg{color:#F3B27A}
.vp-err-t{margin:0; font-size:1rem; font-weight:600}
.vp-err-s{margin:0 0 6px; font-size:var(--fs-caption, .8rem); color:rgba(255,255,255,.8)}
.vp-pill{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px;
  border-radius:var(--r-full, 999px); border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.14); color:#fff; font:inherit; font-size:.9rem; font-weight:500; cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s var(--ease-spring, ease);
}
.vp-pill.is-lg{height:48px; padding:0 24px; font-size:1rem; background:var(--vp-accent); border-color:transparent}
.vp-pill:hover{background:rgba(255,255,255,.26); transform:translateY(-1px)}
.vp-pill.is-lg:hover{background:var(--vp-accent); filter:brightness(1.1)}
.vp-pill:focus-visible{outline:3px solid #fff; outline-offset:3px}

/* --- control bar -------------------------------------------------------- */
.vp-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:8;
  padding:0 clamp(8px, 1.6vw, 16px) clamp(6px, 1vw, 12px);
  transition:opacity .3s var(--ease, ease), transform .3s var(--ease, ease);
  cursor:default;
}
.vp.is-idle.is-playing .vp-bar{opacity:0; transform:translateY(8px); pointer-events:none}
.vp.is-idle.is-playing .vp-shade{opacity:0}
.vp.is-idle.is-playing .vp-frame{cursor:none}
.vp.is-fresh .vp-bar{opacity:.0; pointer-events:none}
.vp.is-fresh:hover .vp-bar, .vp.is-fresh:focus-within .vp-bar{opacity:1; pointer-events:auto}

.vp-scrub{
  --vp-tip:0%;
  position:relative; height:22px; display:flex; align-items:center; cursor:pointer; touch-action:none; outline:none;
}
.vp-track{
  position:relative; width:100%; height:4px; border-radius:var(--r-full, 999px);
  background:rgba(255,255,255,.26); overflow:hidden;
  transition:height .15s var(--ease, ease);
}
.vp-scrub:hover .vp-track, .vp-scrub:focus-visible .vp-track, .vp.is-scrubbing .vp-track{height:7px}
.vp-buf, .vp-played{position:absolute; left:0; top:0; bottom:0; border-radius:inherit}
.vp-buf{width:var(--vp-b); background:rgba(255,255,255,.34)}
.vp-played{width:var(--vp-p); background:linear-gradient(90deg, var(--vp-accent), var(--vp-accent-2))}
.vp-thumb{
  position:absolute; top:50%; left:var(--vp-p); width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--vp-accent), 0 2px 8px rgba(2,29,42,.5);
  transform:scale(0); transition:transform .15s var(--ease-spring, ease); pointer-events:none;
}
.vp-scrub:hover .vp-thumb, .vp-scrub:focus-visible .vp-thumb, .vp.is-scrubbing .vp-thumb{transform:scale(1)}
.vp-scrub:focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:6px}
.vp-tip{
  position:absolute; bottom:calc(100% + 2px); left:var(--vp-tip); transform:translateX(-50%);
  padding:3px 8px; border-radius:6px; background:rgba(2,29,42,.9); font-size:.75rem; font-weight:500;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s;
}
.vp-scrub:hover .vp-tip, .vp.is-scrubbing .vp-tip{opacity:1}

.vp-row{display:flex; align-items:center; justify-content:space-between; gap:6px}
.vp-grp{display:flex; align-items:center; gap:2px; min-width:0}
.vp-btn{
  flex:none; display:inline-grid; place-items:center; width:40px; height:40px; padding:0;
  border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer; font:inherit;
  transition:background .15s, transform .15s var(--ease-spring, ease), color .15s;
}
.vp-btn:hover{background:rgba(255,255,255,.16)}
.vp-btn:active{transform:scale(.92)}
.vp-btn:focus-visible{outline:2px solid #fff; outline-offset:-2px}
.vp-btn.is-on{color:var(--vp-accent-2)}
.vp-play{width:44px; height:44px}
.vp-time{
  margin-inline-start:6px; font-size:.82rem; font-variant-numeric:tabular-nums; white-space:nowrap;
  color:rgba(255,255,255,.95);
}
.vp-t-sep, .vp-t-all{color:rgba(255,255,255,.7)}

.vp-vol{display:flex; align-items:center}
.vp-range{
  -webkit-appearance:none; appearance:none; width:0; height:4px; margin:0; padding:0; opacity:0; cursor:pointer;
  border-radius:var(--r-full, 999px); outline:none;
  background:linear-gradient(90deg, #fff var(--vp-v, 100%), rgba(255,255,255,.3) var(--vp-v, 100%));
  transition:width .2s var(--ease, ease), opacity .2s, margin .2s;
}
.vp-vol:hover .vp-range, .vp-vol:focus-within .vp-range{width:84px; opacity:1; margin:0 10px 0 2px}
.vp-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; border:0; box-shadow:0 1px 6px rgba(2,29,42,.5)}
.vp-range::-moz-range-thumb{width:13px; height:13px; border-radius:50%; background:#fff; border:0; box-shadow:0 1px 6px rgba(2,29,42,.5)}
.vp-range:focus-visible{outline:2px solid #fff; outline-offset:4px}

.vp-speed{position:relative}
.vp-rate{width:auto; min-width:46px; padding:0 10px; border-radius:var(--r-full, 999px); font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums}
.vp-menu{
  position:absolute; right:0; bottom:calc(100% + 10px); width:9.5rem; padding:6px;
  border-radius:14px; background:rgba(2,29,42,.94); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 16px 36px rgba(2,29,42,.5);
  animation:vp-menu .16s var(--ease, ease);
}
.vp-menu[hidden]{display:none}
@keyframes vp-menu{from{opacity:0; transform:translateY(6px)}}
.vp-mi{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; height:38px; padding:0 12px;
  border:0; border-radius:9px; background:transparent; color:#fff; font:inherit; font-size:.88rem; cursor:pointer; text-align:start;
}
.vp-mi:hover, .vp-mi:focus-visible{background:rgba(255,255,255,.14); outline:none}
.vp-mi.is-on{color:var(--vp-accent-2); font-weight:600}
.vp-mi.is-on::after{content:'✓'; font-size:.9rem}

/* --- fullscreen --------------------------------------------------------- */
.vp:fullscreen, .vp.is-fs{border-radius:0; max-width:none; width:100%; height:100%; background:#000}
.vp:fullscreen .vp-frame, .vp.is-fs .vp-frame{height:100%; max-height:none; aspect-ratio:auto; border-radius:0}
.vp:-webkit-full-screen{border-radius:0; max-width:none; width:100%; height:100%; background:#000}
.vp:-webkit-full-screen .vp-frame{height:100%; max-height:none; aspect-ratio:auto; border-radius:0}

/* --- small screens / touch --------------------------------------------- */
@media(max-width:560px){
  .vp-frame{border-radius:var(--r-xl, 16px)}
  .vp{border-radius:var(--r-xl, 16px)}
  .vp-cover{bottom:84px}
  .vp-btn{width:38px; height:38px}
  .vp-play{width:42px; height:42px}
  .vp-pip, .vp-range{display:none}
  .vp-time{font-size:.76rem; margin-inline-start:2px}
  .vp-rate{min-width:40px; padding:0 6px}
  .vp-vol:hover .vp-range{width:0; margin:0}
}
@media(max-width:380px){ .vp-skip{display:none} }

/* short laptop screens: lighter chrome so the picture stays the hero */
@media(min-width:561px) and (max-height:760px){
  .vp-cover{bottom:80px}
  .vp-cover-t{font-size:clamp(1rem, 1.8vw, 1.2rem)}
  .vp-btn{width:38px; height:38px}
  .vp-play{width:42px; height:42px}
  .vp-big{width:72px; margin:-36px 0 0 -36px}
  .vp:not(.is-fresh):not(.is-playing) .vp-big{width:56px; margin:-28px 0 0 -28px}
}
@media(hover:none){ .vp-range{display:none} .vp.is-fresh .vp-bar{opacity:1; pointer-events:auto} }

@media(prefers-reduced-motion:reduce){
  .vp *{animation:none !important; transition:none !important}
}

/* ==========================================================================
   Scene context note — sits under the film
   ========================================================================== */
.vscene-note{
  margin:18px 0 0; padding:18px 22px 20px;
  background:var(--s-elev, #fff);
  border:1px solid var(--s-line-mid, rgba(0,59,83,.16));
  border-inline-start:4px solid var(--petrol-600, #2F789B);
  border-radius:var(--r-lg, 12px);
  box-shadow:var(--e1, 0 1px 2px rgba(0,59,83,.06));
  text-align:start;
}
.vscene-note-head{display:flex; align-items:center; gap:10px; margin:0 0 8px}
.vscene-note-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:none; border-radius:var(--r-full, 999px);
  background:var(--petrol-50, #ECF4F9); color:var(--petrol-700, #1A5876);
}
.vscene-note-badge svg{width:15px; height:15px}
.vscene-note-label{
  margin:0; font-size:var(--fs-caption, 13px); line-height:1.4; font-weight:600;
  letter-spacing:.02em; color:var(--petrol-700, #1A5876);
}
.vscene-note-text{
  margin:0; font-size:var(--fs-body, 16px); line-height:var(--lh-body, 1.8);
  color:var(--paper-800, #343E43); max-width:62ch;
}
@media (max-width:560px){
  .vscene-note{padding:14px 16px 16px; margin-top:14px}
  .vscene-note-text{font-size:var(--fs-small, 15px)}
}