/* ONLY GLOBAL TV on a cork board: episodes as 16:9 prints, highlights as square
   crops of the vertical clips. Muted previews on hover; tap opens the player.
   Tokens and materials come from atelier.css. */
.pv-wall{display:flex;flex-direction:column;flex:1;min-height:0}
.pv-intro{flex:none;margin:0 0 12px 140px;color:var(--chalk-2);font-size:13px;line-height:1.45}
.pv-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,212,130,.35) transparent;
  border:var(--frame) solid #2a0603;border-image:url("graphic/rahmen-merlot.webp") 23 / var(--frame) stretch;
  box-shadow:0 34px 60px -22px rgba(0,0,0,.78),0 10px 22px rgba(0,0,0,.42),inset 0 4px 9px rgba(22,0,0,.5);
  background:radial-gradient(130% 110% at 50% 45%,transparent 48%,rgba(26,3,0,.58)),linear-gradient(rgba(36,6,0,.26),rgba(36,6,0,.26)),url("graphic/kork-kachel.webp") 0 0/330px auto;
  background-color:#8a6447;background-attachment:scroll,scroll,local;
  padding:clamp(22px,4cqh,40px) clamp(14px,3cqi,40px) 52px;container-type:inline-size}
.pv-scroll:focus-visible{outline:2px solid var(--lamp);outline-offset:-4px}
.pv-group+.pv-group{margin-top:clamp(30px,6cqh,52px)}
.pv-group-title{--tape:var(--tape-videos);display:inline-block;margin:0 0 22px;padding:7px 15px 8px;color:var(--ink);font:700 13.5px/1.2 var(--font);letter-spacing:-.01em;
  background:var(--tape-skin),color-mix(in srgb,var(--tape) var(--tape-alpha),transparent);clip-path:var(--tape-end);rotate:-2deg}
.pv-group:nth-child(2) .pv-group-title{rotate:1.5deg}
.pv-pile{display:grid;gap:clamp(24px,5cqi,40px) clamp(14px,3cqi,30px);align-items:start}
.pv-pile-episode{grid-template-columns:1fr;max-width:780px;margin:0 auto;gap:clamp(34px,7cqh,64px)}
.pv-card{--tape:var(--tape-videos);position:relative;display:block;width:100%;padding:clamp(5px,1cqi,8px);color:var(--ink);text-align:left;
  background:var(--paper-fill);
  box-shadow:0 1px 1px rgba(0,0,0,.28),0 12px 20px -10px rgba(0,0,0,.65);rotate:var(--pv-angle,0deg)}
.pv-card::before{content:'';position:absolute;z-index:3;top:-9px;left:50%;width:clamp(30px,30%,74px);height:17px;translate:-50% 0;rotate:-4deg;opacity:.86;pointer-events:none;
  background:var(--tape-skin),color-mix(in srgb,var(--tape) var(--tape-alpha),transparent);clip-path:var(--tape-end)}
.pv-card:nth-child(even)::before{left:34%;rotate:6deg}
.pv-card:hover,.pv-card:focus-visible{rotate:0deg;scale:1.015;z-index:3}
.pv-card:focus-visible{outline:2px solid var(--lamp);outline-offset:4px}
/* the preview player sits exactly over the cover, so hovering never changes the layout */
.pv-frame{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--deep)}
.pv-cover{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.pv-preview{position:absolute;left:0;top:0;width:100%;height:100%;border:0;pointer-events:none;background:#000}
.is-previewing .pv-cover{opacity:0}
/* the videos are the focus: two large prints, gently offset */
.pv-card-episode{width:min(100%,92%)}
.pv-card-episode:nth-child(even){justify-self:end}
.pv-card-episode .pv-card-title{font-size:clamp(15px,2.3cqi,21px);letter-spacing:-.03em}
.pv-card-episode .pv-play{--size:clamp(52px,15%,96px);--depth:1.6px;position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;pointer-events:none;transition:opacity .25s,scale .3s var(--ease)}
.pv-play .icon3d>svg{stroke-width:1.4}
.pv-card:hover .pv-play{scale:1.1}
.is-previewing .pv-play{opacity:0}
.pv-muted{position:absolute;right:7px;top:7px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(16,18,24,.6);opacity:0;transition:opacity .25s}
.pv-muted svg{width:15px;height:15px}
.is-previewing .pv-muted{opacity:1}
.pv-caption{display:block;padding:.65em .25em .15em}
.pv-card-title{display:block;font-size:clamp(12.5px,1.5cqi,15px);line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.pv-card-label{display:block;margin-top:3px;color:var(--ink-2);font-size:11px;line-height:1.3}

/* player dialog */
.pv-dialog{position:fixed;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);width:min(980px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 28px));max-width:none;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 28px);margin:auto;padding:0;border:0;color:var(--ink);overflow:visible;
  background:var(--paper-fill);box-shadow:0 30px 70px rgba(0,0,0,.75)}
.pv-dialog[open]{display:flex;flex-direction:column}
.pv-dialog::backdrop{background:rgba(26,0,0,.88)}
.pv-dialog-top{display:flex;align-items:center;gap:14px;padding:14px 16px 10px 20px}
.pv-dialog-title{flex:1;min-width:0;font-size:clamp(18px,2.4vw,24px);line-height:1.15;letter-spacing:-.035em}
.pv-close{--tape:var(--tape-videos);flex:none;display:grid;place-items:center;width:52px;min-height:44px;color:var(--ink);
  background:var(--tape-skin),color-mix(in srgb,var(--tape) var(--tape-alpha),transparent);clip-path:var(--tape-end);rotate:-2deg}
.pv-close svg{width:18px;height:18px}
.pv-close:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
.pv-dialog-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 16px 18px}
.pv-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.pv-player-short{width:min(100%,calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 320px) * .5625));aspect-ratio:9/16;margin:0 auto}
.pv-player-poster,.pv-dialog-media{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.pv-dialog-detail{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 4px 0;max-width:64ch}
.pv-description{font-size:14.5px;line-height:1.6}
.pv-detail-credits{color:var(--ink-2);font-size:13px;line-height:1.5}
.pv-original{--tape:var(--tape-videos);margin-top:4px}
.pv-fallback{color:var(--ink-2);font-size:12px;line-height:1.45}

@media (max-width:760px){
  .pv-scroll{background-attachment:scroll}
  .pv-intro{margin:0 0 10px;text-align:center;font-size:12.5px}
  .pv-card-episode{width:100%}
}
@media (prefers-reduced-motion:reduce){.pv-wall *{transition:none!important}}