/* Paperi "video-like" player. Inherits the site tokens (--ink, --paper, --amber, …)
   and Fraunces/Spline Sans from base.html. Scoped to .vp so it can sit in a page. */
.vp { --vp-a:var(--amber,#f0b34a); --vp-b:#5a96ff; --vp-c:#ff5d5d; --vp-d:#3fd6c0; --vp-block:#7d8694; }
.vp:focus, .vp:focus-visible { outline:none; }
.vp-stage { position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden;
            border-radius:var(--radius,16px); border:1px solid var(--line,#24232e); box-shadow:0 10px 50px #0009; }
.vp-layer { position:absolute; inset:0; z-index:1; transform-origin:0 0; will-change:transform; }
.vp-layer img { position:absolute; left:0; top:0; display:block; opacity:0; z-index:0;
                backface-visibility:hidden; transform:translateZ(0);
                transition:none; }
.vp-layer img.vp-page-on, .vp-layer img.vp-page-prev { opacity:1; }
.vp-boxes { position:absolute; left:0; top:0; z-index:100; }
/* joined highlight: the per-line box look (thin border, rounded corners, translucent
   fill) as ONE connected text-hugging outline. Corners are rounded in the path geometry;
   stroke painted first so the fill sits over its inner half. Colors per token below. */
.vp-hl { position:absolute; left:0; top:0; overflow:visible; pointer-events:none;
         transition:opacity .32s cubic-bezier(.16, 1, .3, 1); }
/* highlights fade both ways: .vp-in = pre-reveal (waiting out the pan), .vp-out = leaving */
.vp-hl.vp-in, .vp-box.vp-in, .vp-hl.vp-out, .vp-box.vp-out { opacity:0; }
.vp-hl path { fill:none; stroke-width:2; paint-order:stroke; stroke-linejoin:round; stroke-linecap:round; }
.vp-hl path.a { stroke:var(--vp-a); fill:rgba(240,179,74,.13) }
.vp-hl path.b { stroke:var(--vp-b); fill:rgba(90,150,255,.13) }
.vp-hl path.c { stroke:var(--vp-c); fill:rgba(255,93,93,.13) }
.vp-hl path.d { stroke:var(--vp-d); fill:rgba(63,214,192,.13) }
.vp-hl path.block { stroke:var(--vp-block); fill:rgba(125,134,148,.13) }
/* legacy per-line look (VP_HL_STYLE=perline): a separate box per line */
.vp-box { position:absolute; border:2px solid var(--vp-a); border-radius:6px; background:#f0b34a22;
          transition:opacity .32s cubic-bezier(.16, 1, .3, 1); }
.vp-box.a{border-color:var(--vp-a);background:#f0b34a22} .vp-box.b{border-color:var(--vp-b);background:#5a96ff22}
.vp-box.c{border-color:var(--vp-c);background:#ff5d5d22} .vp-box.d{border-color:var(--vp-d);background:#3fd6c022}
.vp-box.block{border-color:var(--vp-block);background:#7d869422}
/* cards */
.vp-card { position:absolute; inset:0; z-index:3; display:none; align-items:center; justify-content:center;
           gap:5%; padding:7% 8%; text-align:center;
           background:radial-gradient(80% 100% at 80% 16%, rgba(232,93,154,.12), transparent 58%),
                      radial-gradient(70% 90% at 90% 30%, rgba(76,201,240,.08), transparent 60%), var(--ink-2,#111119); }
.vp-ctext { display:flex; flex-direction:column; gap:.7em; max-width:680px; }
.vp-card h1 { font-family:"Fraunces",serif; font-weight:600; line-height:1.13; margin:0;
              color:var(--paper,#f3efe4); font-size:clamp(21px,3.6vw,40px); }
.vp-card p { margin:0; color:var(--muted,#8a8898); font-weight:400; letter-spacing:.06em;
             font-family:"Spline Sans Mono",monospace; font-size:clamp(11px,1.35vw,15px); }
.vp-hero { display:none; max-width:34%; max-height:78%; border-radius:9px; background:#fff; box-shadow:0 10px 50px #000a; }
.vp-card.has-hero { justify-content:space-between; text-align:left; }
.vp-card.has-hero .vp-hero { display:block; }
.vp-card:not(.has-hero) .vp-ctext { max-width:900px; }
.vp-card:not(.has-hero) h1 { font-size:clamp(17px,2.5vw,30px); line-height:1.28; }
/* captions (Apple TV: one translucent rounded box hugging the text); they ride higher
   (bottom:70px) only while the controls are shown, to clear the control bar. */
.vp-cap { position:absolute; left:0; right:0; bottom:18px; padding:0 6%; text-align:center; pointer-events:none;
          z-index:4; font-weight:600; font-size:clamp(15px,2.2vw,23px); letter-spacing:.01em;
          transition:bottom .24s ease; }
.vp:not(.hide-ui) .vp-cap { bottom:70px; }
.vp-cap span { display:inline-block; max-width:88%; color:var(--paper,#f3efe4); background:rgba(0,0,0,.62);
               padding:.22em .62em; border-radius:.5em; line-height:1.32; }
.vp-cap span:empty { display:none; }
/* free-tier watermark — tucked top-left, out of the control bar's way */
.vp-wm { position:absolute; left:max(14px,4%); top:max(12px,env(safe-area-inset-top)); z-index:4;
         font-family:"Fraunces",serif; font-weight:600; font-size:clamp(13px,1.7vw,20px);
         color:#fff9; text-shadow:0 1px 6px #000a; pointer-events:none; letter-spacing:.01em; display:none; }
.vp.is-watermarked .vp-wm { display:block; }
/* Draft surfaces (Studio editor preview + co-author review page) use this same
   corner label — the deterrent is the diagonal stamp BAKED into the page pixels
   (studio._stamp_draft_pages), which devtools can't strip and fullscreen can't
   lose. A big live DRAFT banner used to sit on top too; dropped as redundant
   doubling. Published manifests carry watermark:false → no label at all. */

/* end state: a soft scrim + a Replay affordance so the video lands instead of just
   freezing on the last frame. Shown only once playback has ended (.vp-ended). */
.vp-end { position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
          opacity:0; pointer-events:none; transition:opacity .3s ease;
          background:radial-gradient(60% 60% at 50% 45%, rgba(7,7,11,.5), rgba(7,7,11,.78)); }
.vp.vp-ended .vp-end { opacity:1; pointer-events:auto; }
.vp-replay { display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
             padding:.62em 1.15em; border-radius:999px; color:var(--paper,#f3efe4);
             background:rgba(20,19,26,.72); border:1.5px solid #ffffff40; backdrop-filter:blur(6px);
             font:600 15px/1 "Spline Sans",system-ui,sans-serif; letter-spacing:.01em;
             -webkit-tap-highlight-color:transparent; transition:border-color .2s ease, transform .1s ease; }
.vp-replay svg { width:20px; height:20px; }
.vp-replay:hover { border-color:var(--amber,#f0b34a); }
.vp-replay:active { transform:scale(.97); }
.vp-replay:focus-visible { outline:2px solid var(--amber,#f0b34a); outline-offset:3px; }
/* "Read the paper" — the conversion action at video end, so it takes the amber and
   Replay stays quiet. Class ON .vp internals (fullscreen re-parents .vp to <body>;
   ancestor-scoped styles die there). */
.vp-end { gap:.8rem; flex-wrap:wrap; padding:0 1rem; }
.vp-paper { display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
            padding:.62em 1.15em; border-radius:999px; color:#15131a; text-decoration:none;
            background:var(--amber,#f0b34a); border:1.5px solid transparent;
            font:700 15px/1 "Spline Sans",system-ui,sans-serif; letter-spacing:.01em;
            -webkit-tap-highlight-color:transparent; transition:filter .2s ease, transform .1s ease; }
.vp-paper svg { width:16px; height:16px; }
.vp-paper:hover { filter:brightness(1.08); }
.vp-paper:active { transform:scale(.97); }
.vp-paper:focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* ---- custom control bar (the <audio> element is hidden; JS drives it) ---------
   One Paperi-styled bar over the stage bottom: play · time · scrubber · CC · full-
   screen. Auto-hides during playback (.hide-ui); the spectrum fill is the signature. */
.vp-audio { display:none; }
html.vp-fs-open { overflow:hidden; }   /* no background scroll while a player is fullscreen */

.vp-controls { position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center;
               gap:12px; -webkit-user-select:none; user-select:none;
               padding:30px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));
               background:linear-gradient(to top, rgba(7,7,11,.86), rgba(7,7,11,.46) 46%, transparent);
               transition:opacity .26s ease, transform .26s ease; }
.vp.hide-ui .vp-controls { opacity:0; transform:translateY(8px); pointer-events:none; }

.vp-play, .vp-speed, .vp-cc, .vp-fs { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
                                      background:none; border:0; padding:0; cursor:pointer; color:var(--paper,#f3efe4);
                                      -webkit-tap-highlight-color:transparent; }
.vp-play { width:34px; height:34px; }
.vp-play svg { width:30px; height:30px; display:block; filter:drop-shadow(0 1px 3px #0009); }
.vp-fs { width:30px; height:30px; }
.vp-fs svg { width:21px; height:21px; display:block; filter:drop-shadow(0 1px 3px #0009); }
.vp-speed { height:24px; min-width:38px; padding:0 7px; border-radius:6px; border:1.5px solid #ffffff36;
            font:650 11px/1 "Spline Sans Mono",monospace; letter-spacing:.02em; text-shadow:0 1px 3px #0009; }
.vp-speed.on { color:#15131a; background:var(--paper,#f3efe4); border-color:transparent; text-shadow:none; }
.vp-cc { height:24px; min-width:30px; padding:0 6px; border-radius:6px; border:1.5px solid #ffffff5c;
         font:650 11px/1 "Spline Sans Mono",monospace; letter-spacing:.09em; text-shadow:0 1px 3px #0009; }
.vp-cc.on { color:#15131a; background:var(--amber,#f0b34a); border-color:transparent; text-shadow:none; }
.vp-play:focus-visible, .vp-speed:focus-visible, .vp-cc:focus-visible, .vp-fs:focus-visible {
  outline:2px solid var(--amber,#f0b34a); outline-offset:3px; border-radius:5px; }

/* popovers above the control bar. They sit inside the stage and reuse the same inked
   glass panel so speed and captions feel like one control family. */
.vp-menu { position:absolute; bottom:56px; z-index:6;
           display:none; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch;
           padding:6px; border-radius:12px; background:rgba(14,13,20,.93);
           border:1px solid #ffffff26; box-shadow:0 12px 40px #000b; backdrop-filter:blur(10px); }
.vp-menu.open { display:flex; }
.vp-menu button { appearance:none; background:none; border:0; cursor:pointer; text-align:left; position:relative;
                  color:var(--paper,#f3efe4); font:500 14px/1.2 "Spline Sans",system-ui,sans-serif;
                  letter-spacing:.01em; padding:8px 30px 8px 12px; border-radius:8px; white-space:nowrap;
                  -webkit-tap-highlight-color:transparent; }
.vp-menu button[dir="rtl"] { text-align:right; padding:8px 12px 8px 30px; }
.vp-menu button:hover { background:#ffffff14; }
.vp-menu button.on { color:var(--amber,#f0b34a); }
.vp-menu button.on::after { content:"✓"; position:absolute; right:11px; }
.vp-menu button[dir="rtl"].on::after { right:auto; left:11px; }
.vp-cc-menu { right:max(14px,env(safe-area-inset-right)); min-width:150px; max-height:min(60%,320px); }
.vp-speed-menu { right:82px; min-width:96px; max-height:min(60%,260px); }
.vp-speed-menu button { font-family:"Spline Sans Mono",monospace; font-size:13px; }
.vp-cc-menu button.loading::after { content:""; position:absolute; right:12px; top:50%; margin-top:-6px;
  width:12px; height:12px; border:2px solid #ffffff40; border-top-color:var(--amber,#f0b34a);
  border-radius:50%; animation:vp-spin .7s linear infinite; }
.vp-cc-menu button[dir="rtl"].loading::after { right:auto; left:12px; }
@keyframes vp-spin { to { transform:rotate(360deg); } }
.vp-cc.loading { animation:vp-cc-pulse 1.1s ease-in-out infinite; }   /* a track is translating */
@keyframes vp-cc-pulse { 50% { opacity:.4; } }

.vp-time { flex:0 0 auto; white-space:nowrap; font:500 12px/1 "Spline Sans Mono",monospace;
           color:var(--paper,#f3efe4); letter-spacing:.02em; font-variant-numeric:tabular-nums;
           text-shadow:0 1px 3px #0009; }

/* scrubber: a thin track, the spectrum gradient as the played fill, a thumb on hover/drag */
.vp-scrub { position:relative; flex:1 1 auto; height:18px; display:flex; align-items:center;
            cursor:pointer; touch-action:none; }
.vp-scrub::before { content:""; position:absolute; left:0; right:0; height:4px; border-radius:4px;
                    background:rgba(255,255,255,.24); }
.vp-buf  { position:absolute; left:0; right:0; height:4px; border-radius:4px; background:none; }
.vp-fill { position:absolute; left:0; height:4px; width:0; border-radius:4px;
           background:linear-gradient(90deg,var(--vp-c) 0%,var(--vp-a) 38%,var(--vp-d) 70%,var(--vp-b) 100%); }
.vp-marks { position:absolute; left:0; right:0; height:12px; pointer-events:none; }
.vp-mark { position:absolute; top:3px; width:2px; height:6px; border-radius:2px;
           background:rgba(243,239,228,.58); box-shadow:0 1px 3px #0009; transform:translateX(-1px); }
.vp-mark.segment { top:2px; height:8px; background:rgba(240,179,74,.82); }
.vp-thumb { position:absolute; top:50%; left:0; width:13px; height:13px; margin-left:-6.5px; border-radius:50%;
            background:var(--paper,#f3efe4); box-shadow:0 1px 5px #000b; transform:translateY(-50%) scale(0);
            transition:transform .12s ease; }
.vp-scrub:hover .vp-thumb, .vp.vp-drag .vp-thumb { transform:translateY(-50%) scale(1); }
.vp-tip { position:absolute; left:0; bottom:42px; z-index:7; min-width:78px; max-width:min(260px,72vw);
          padding:7px 9px; border-radius:8px; background:rgba(14,13,20,.94);
          border:1px solid #ffffff24; box-shadow:0 10px 32px #000b; color:var(--paper,#f3efe4);
          font:500 12px/1.25 "Spline Sans",system-ui,sans-serif; opacity:0; pointer-events:none;
          transform:translate(-50%,4px); transition:opacity .14s ease, transform .14s ease; backdrop-filter:blur(8px); }
.vp-tip.on { opacity:1; transform:translate(-50%,0); }
.vp-tip b { display:block; font:600 11px/1 "Spline Sans Mono",monospace; color:var(--amber,#f0b34a); margin-bottom:3px; }
.vp-tip.compact b { margin-bottom:0; }
.vp-tip span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--paper,#f3efe4); }
.vp-tip span:empty { display:none; }

@media (max-width:520px) {
  .vp-controls { gap:5px; flex-wrap:nowrap; padding:26px max(9px,env(safe-area-inset-right)) 9px max(9px,env(safe-area-inset-left)); }
  .vp-play { width:30px; height:30px; }
  .vp-play svg { width:27px; height:27px; }
  .vp-fs { width:28px; height:28px; }
  .vp-fs svg { width:20px; height:20px; }
  .vp-scrub { flex:1 1 76px; min-width:72px; order:0; }
  .vp-time { font-size:11px; }
  .vp-speed { min-width:32px; padding:0 4px; }
  .vp-cc { min-width:28px; padding:0 5px; }
  .vp-speed-menu { right:64px; }
  .vp-tip { bottom:42px; max-width:66vw; font-size:11px; }
  .vp:not(.hide-ui) .vp-cap { bottom:66px; }
}

/* fullscreen: the stage fills the viewport; the control bar already clears the iOS
   notch / home-indicator via its safe-area padding. Captions lift a little higher. */
.vp.fs { position:fixed; inset:0; z-index:9999; height:100dvh; background:#000; }
.vp.fs .vp-stage { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; border:0; }
.vp.fs .vp-controls { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.vp.fs .vp-cap { bottom:calc(20px + env(safe-area-inset-bottom)); }
.vp:not(.hide-ui).fs .vp-cap { bottom:calc(80px + env(safe-area-inset-bottom)); }