/* ---- Practice library page ---- */
.lib-page{background:linear-gradient(180deg,#fbf0e2 0%,#f7dfc6 45%,#f4d3c0 100%);background-attachment:fixed}
.lib-page .nav{margin-bottom:calc(-1 * var(--navh,62px))}

/* banner: the sunset, with the same soft wave edge as the home page */
.lib-hero{position:relative;color:#fff;background:linear-gradient(rgba(42,23,16,.45),rgba(42,23,16,.78)),url(images/hero-poster.webp) center 30%/cover;padding:calc(var(--navh,62px) + 70px) var(--gut) 110px;overflow:hidden}
.lib-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:44px;background:#fbf0e2;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V22C240 0 480 40 720 24S1200 4 1440 24V44Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V22C240 0 480 40 720 24S1200 4 1440 24V44Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.lib-hero-in{max-width:1080px;margin:0 auto}
.lib-hero h1{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:300;text-shadow:0 2px 30px rgba(40,16,6,.5);margin-bottom:.35em}
.lib-hero h1 em{color:#ffd9a0}
.lib-hero .lead{max-width:30em;color:#fff7ec;text-shadow:0 1px 16px rgba(40,16,6,.6)}
.lib-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.lib-stats span{padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px);font-size:.9rem;font-weight:500}

.lib-body{padding:34px 0 90px;position:relative}
.lib-filters{display:grid;gap:12px;margin-bottom:10px}
.lib-body .filters{margin:0}
.lib-body .filters button{border:1.5px solid rgba(43,26,18,.2);color:var(--ink);background:rgba(255,248,239,.7);backdrop-filter:blur(4px)}
.lib-body .filters button:hover{border-color:var(--accent)}
.lib-body .filters button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.lib-body .filters.tags button{font-size:.85rem;padding:8px 14px}
.lib-count{color:var(--muted);font-size:.92rem;margin:14px 2px 22px}

/* cards */
.vgrid{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:1fr}
.vcard{background:var(--card);border-radius:28px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 22px 40px -26px rgba(70,28,10,.55);border:1px solid rgba(43,26,18,.07);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;scroll-margin-top:90px;animation:vpop .6s both}
.vcard.playable{cursor:pointer}
.vcard.playable:hover,.vcard:focus-visible{transform:translateY(-6px);box-shadow:0 30px 50px -26px rgba(70,28,10,.6)}
.vcard.flash{outline:3px solid var(--accent);outline-offset:4px}
@keyframes vpop{from{opacity:0;transform:translateY(16px)}}
.vthumb{position:relative;aspect-ratio:16/9;background:#3a1d0e;overflow:hidden}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.vcard.playable:hover .vthumb img{transform:scale(1.06)}
.vthumb.ph{background:linear-gradient(160deg,var(--c1,#ffd29f),var(--c2,#e8892f) 55%,var(--c3,#b5503a))}
.vthumb.ph::before{content:"";position:absolute;left:50%;top:62%;width:44%;aspect-ratio:1;margin-left:-22%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff7e0,#ffd9a0 55%,rgba(255,217,160,0));opacity:.9}
.vthumb.ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(0deg,rgba(60,26,12,.55),transparent),radial-gradient(120% 100% at 50% 130%,rgba(60,26,12,.55) 40%,transparent 41%)}
.vplay{position:absolute;z-index:2;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(228,100,31,.95);box-shadow:0 8px 24px rgba(40,16,6,.45);display:grid;place-items:center;transition:transform .3s}
.vplay::before{content:"";border-left:19px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.vcard.playable:hover .vplay{transform:scale(1.1)}
.vcard.soon .vplay{background:rgba(255,255,255,.28);border:2px solid rgba(255,255,255,.85);box-shadow:none}
.vmin{position:absolute;z-index:2;right:12px;bottom:12px;padding:5px 12px;border-radius:99px;background:rgba(30,12,4,.72);color:#fff;font-size:.82rem;font-weight:600;backdrop-filter:blur(4px)}
.vsoon{position:absolute;z-index:2;left:12px;top:12px;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.88);color:var(--accent-d);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.vbody{padding:20px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.vtag{align-self:flex-start;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-d);background:rgba(228,100,31,.12);padding:5px 12px;border-radius:99px}
.vbody h3{margin:0;font-size:1.35rem;line-height:1.2}
.vbody p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.55}

/* closing call to action */
.lib-cta{margin-top:70px;text-align:center;background:linear-gradient(135deg,#f08a3c,#b5503a 60%,#4a2638);color:#fff;border-radius:34px;padding:54px 28px;box-shadow:0 30px 50px -30px rgba(70,28,10,.7)}
.lib-cta h2{margin-bottom:.3em}
.lib-cta p{max-width:32em;margin:0 auto 1.4em;opacity:.95}
.lib-cta .btn{margin:6px}
.lib-cta .btn:not(.btn-ghost){background:#fff;color:var(--accent-d);border-color:#fff}
.lib-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.8)}
.lib-cta .btn-ghost:hover{background:#fff;color:var(--accent-d)}

/* video pop-up */
.player{border:0;padding:0;border-radius:28px;width:min(980px,94vw);background:#000;overflow:visible;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.player::backdrop{background:rgba(30,12,4,.82);backdrop-filter:blur(6px)}
.player iframe,.player video{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:28px}
.player-x{position:absolute;top:-54px;right:0;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(0,0,0,.3);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.toast{position:fixed;left:50%;bottom:28px;z-index:80;transform:translate(-50%,30px);opacity:0;background:#2a1710;color:#fff;padding:12px 22px;border-radius:99px;font-size:.92rem;pointer-events:none;transition:.35s}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:640px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:720px){.lib-hero{padding-bottom:130px}.lib-body{padding-top:44px}}
@media (min-width:1000px){.vgrid{grid-template-columns:repeat(3,1fr);gap:26px}.lib-filters{grid-template-columns:auto 1fr;align-items:center;gap:18px 30px}}
@media (prefers-reduced-motion:reduce){.vcard{animation:none}}