/* Video pages (/video/, /video/<slug>/): they load the homepage's own stylesheet (site.css — stage, header, .yt tiles, .btn, .share, .pill, footer),
   so this file only adds what is specific to these pages. */
.vp-section{padding-top:clamp(96px,16vh,150px);min-height:70vh}
.sec-head h1{margin:0;font-weight:800;font-stretch:114%;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.03em}
html[dir="rtl"] .sec-head h1,html[dir="rtl"] .vp-title{font-stretch:100%}

/* hub: category chips + groups */
.vp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(28px,4vw,44px)}
.vp-chips .pill{background:rgba(6,8,14,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vp-chips .pill i{font-style:normal;font-family:var(--serif);color:var(--gold)}
.vp-chips .pill.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.vp-chips .pill.on i{color:#8a5a12}
.vp-group{margin-top:clamp(32px,5vw,56px);scroll-margin-top:90px}
.vp-group[hidden]{display:none}
.vp-note{margin:-4px 0 18px;max-width:60ch;font-size:.92rem}
.vp-group-audio .vgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.vp-group-audio .yt .play{display:none}
.vp-group-audio .yt .cap b{font-size:.95rem}

/* single video */
.vp-crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.8rem;color:var(--haze);margin:0 0 18px}
.vp-crumbs a{text-decoration:none}.vp-crumbs a:hover{color:var(--paper)}
.vp-player{cursor:default}
.vp-player.playing::before{display:none}
.vp-player .play{border:0;padding:0;cursor:pointer;font:inherit}
.vp-yt{position:absolute;inset-inline:0;bottom:16px;text-align:center;z-index:3}
.vp-body{display:grid;gap:clamp(28px,4vw,48px);margin-top:clamp(28px,4vw,44px)}
@media (min-width:920px){.vp-body{grid-template-columns:minmax(0,1fr) 380px;align-items:start}}
.vp-title{margin:10px 0 0;font-weight:900;font-stretch:118%;font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:.98;letter-spacing:-.035em}
.vp-meta{margin:16px 0 0;font-size:.92rem}
.vp-desc{margin:18px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.35;color:#F7EFE4;max-width:38em}
html[dir="rtl"] .vp-desc{font-family:var(--heb);font-style:normal;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.7}
.vp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.vp-share{border:1px solid var(--rule);border-radius:16px;padding:22px 22px 18px;background:rgba(8,12,22,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vp-toast{margin:12px 0 0;font-size:.85rem;color:var(--gold)}
.vp-more{margin-top:clamp(48px,7vw,80px)}
.sh-native{order:8}
@media (prefers-reduced-motion:reduce){.vp-player .play{transition:none}}
.sh[hidden]{display:none}

/* Video pages: no photo, a smooth ash-and-sand backdrop (warm charcoal with a soft glow of sand light) — quiet, premium, and clearly its own room next to the homepage */
.vp .stage{background:radial-gradient(1100px 680px at 14% -6%,rgba(222,196,152,.24),transparent 62%),radial-gradient(900px 620px at 96% 34%,rgba(176,154,126,.14),transparent 66%),linear-gradient(180deg,#2d2924 0%,#1e1b17 52%,#151310 100%)}
.vp .stage img,.vp .stage .grade,.vp .stage .stars,.vp .stage .vignette{display:none}
.vp-chips .pill{background:rgba(22,19,16,.5)}

/* "back to site" button */
.vp-back{display:inline-flex;align-items:center;gap:9px;margin:0;padding:9px 18px;border:1px solid rgba(245,241,234,.32);border-radius:999px;background:rgba(20,17,14,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--paper-2);font-size:.82rem;font-weight:700;text-decoration:none;transition:color .25s,border-color .25s,background .25s,transform .3s var(--ease)}
.vp-back::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
html[dir="rtl"] .vp-back{flex-direction:row-reverse}
.vp-back:hover,.vp-back:focus-visible{color:#fff;border-color:#fff;background:rgba(255,255,255,.1);transform:translateX(-3px)}
@media (prefers-reduced-motion:reduce){.vp-back:hover{transform:none}}
/* the back button sits on the row of the title/breadcrumbs, at the opposite end (left in Hebrew, right in English) */
.sec-head .vp-back{margin-inline-start:auto;align-self:center}
.vp-toprow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;margin:0 0 18px}
.vp-toprow .vp-crumbs{margin:0}
.vp-section .sec-head .desc{flex:0 0 100%;max-width:none;padding-inline-end:max(0px,calc(100% - 56ch))}