/* Liquidguru theme — dark navy contact sheet */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/open-sans-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:300 800;font-display:swap;src:url(../fonts/open-sans-italic.woff2) format("woff2")}

:root{--bg:#040316;--surface:#0c0b2b;--line:#1c1b4a;--text:#e6e8f5;--body:#cfd2ea;--muted:#8c90b8;--accent:#5cc8e0;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 "Open Sans",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#04101a;padding:8px 14px;border-radius:6px;z-index:20}
.skip:focus{left:8px}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:14px 24px}
.top .logo img{height:52px;width:auto;display:block}
.top .tag{color:var(--muted);font-size:.9rem;margin-right:auto}
.links{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.9rem;color:var(--muted)}
.links a:hover,.links a[aria-current]{color:var(--accent)}

/* filter bar */
.bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 24px;background:rgba(4,3,22,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-block:1px solid var(--line)}
.admin-bar .bar{top:32px}
.bar form.search{margin:0;display:contents}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-right:auto}
.chip{display:inline-block;border:1px solid var(--line);background:transparent;color:var(--muted);padding:6px 14px;border-radius:999px;font:inherit;font-size:.88rem;cursor:pointer}
.chip small{opacity:.6;margin-left:6px}
.chip:hover{color:var(--text);border-color:var(--accent)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#04101a}
.bar input[type=search]{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:7px 16px;font:inherit;font-size:.9rem;width:min(260px,100%)}
.rand,.comments .submit{display:inline-block;line-height:1.5;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:7px 16px;font:inherit;font-size:.9rem;cursor:pointer}
.rand:hover,.comments .submit:hover{border-color:var(--accent)}
.sort select{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:7px 14px;font:inherit;font-size:.9rem;cursor:pointer}
.sort select:hover{border-color:var(--accent)}
:where(a,button,input,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html:not(.js) .chips button,html:not(.js) .rand{display:none}

/* back to top */
.to-top{position:fixed;right:20px;bottom:20px;z-index:9;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(12,11,43,.92);color:var(--text);cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s,border-color .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 18px rgba(0,0,0,.45)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:600px){.to-top{right:14px;bottom:14px}}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* grid */
.sheet{padding:20px 24px 60px}
.archive-title{margin:0 0 4px;font-size:1.5rem;font-weight:600}
.intro{max-width:72ch;margin:34px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.intro p{margin:0 0 .4em;color:var(--muted);font-size:.85rem}
.count{color:var(--muted);font-size:.85rem;margin:0 0 14px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.card{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--surface);isolation:isolate;transition:transform .25s,box-shadow .25s}
.card img,.card iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.card iframe{pointer-events:none;opacity:0;transition:opacity .4s}
.card.live iframe{opacity:1}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,3,22,.92) 0%,rgba(4,3,22,.35) 38%,transparent 62%);pointer-events:none}
.card .meta{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;z-index:2}
.card .name{display:block;margin:0;font-size:1rem;font-weight:600;line-height:1.25}
.card em{display:block;color:#b9bfe6;font-size:.82rem}
.card .dur{position:absolute;top:8px;right:8px;z-index:2;background:rgba(4,3,22,.7);font-size:.72rem;padding:2px 7px;border-radius:4px}
@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 0 1px var(--accent)}}
/* thumbnail shapes: Customizer → Liquidguru look → Thumbnail shape (rounded corners is the default and needs no extra rules) */
.lg-shape-soft .card{border-radius:28px}
.lg-shape-sharp .card{border-radius:0}
.lg-shape-square .card{aspect-ratio:1/1}
.lg-shape-circle .card{aspect-ratio:1/1;border-radius:50%}
.lg-shape-oval .card{aspect-ratio:4/3;border-radius:50%}
.lg-shape-cut .card{border-radius:0;clip-path:polygon(7% 0,93% 0,100% 12%,100% 88%,93% 100%,7% 100%,0 88%,0 12%)}
.lg-shape-wavy .card{border-radius:0;clip-path:polygon(0% 2.2%,2.5% 4%,5% 4.3%,7.5% 2.9%,10% 0.9%,12.5% 0%,15% 0.9%,17.5% 2.9%,20% 4.3%,22.5% 4%,25% 2.2%,27.5% 0.4%,30% 0.1%,32.5% 1.5%,35% 3.5%,37.5% 4.4%,40% 3.5%,42.5% 1.5%,45% 0.1%,47.5% 0.4%,50% 2.2%,52.5% 4%,55% 4.3%,57.5% 2.9%,60% 0.9%,62.5% 0%,65% 0.9%,67.5% 2.9%,70% 4.3%,72.5% 4%,75% 2.2%,77.5% 0.4%,80% 0.1%,82.5% 1.5%,85% 3.5%,87.5% 4.4%,90% 3.5%,92.5% 1.5%,95% 0.1%,97.5% 0.4%,100% 2.2%,97.8% 0%,96.8% 2.5%,96% 5%,95.6% 7.5%,95.7% 10%,96.2% 12.5%,97.1% 15%,98.1% 17.5%,99.1% 20%,99.8% 22.5%,100% 25%,99.8% 27.5%,99.1% 30%,98.1% 32.5%,97.1% 35%,96.2% 37.5%,95.7% 40%,95.6% 42.5%,96% 45%,96.8% 47.5%,97.8% 50%,98.8% 52.5%,99.6% 55%,100% 57.5%,99.9% 60%,99.4% 62.5%,98.5% 65%,97.5% 67.5%,96.5% 70%,95.8% 72.5%,95.6% 75%,95.8% 77.5%,96.5% 80%,97.5% 82.5%,98.5% 85%,99.4% 87.5%,99.9% 90%,100% 92.5%,99.6% 95%,98.8% 97.5%,97.8% 100%,100% 97.8%,97.5% 99.6%,95% 99.9%,92.5% 98.5%,90% 96.5%,87.5% 95.6%,85% 96.5%,82.5% 98.5%,80% 99.9%,77.5% 99.6%,75% 97.8%,72.5% 96%,70% 95.7%,67.5% 97.1%,65% 99.1%,62.5% 100%,60% 99.1%,57.5% 97.1%,55% 95.7%,52.5% 96%,50% 97.8%,47.5% 99.6%,45% 99.9%,42.5% 98.5%,40% 96.5%,37.5% 95.6%,35% 96.5%,32.5% 98.5%,30% 99.9%,27.5% 99.6%,25% 97.8%,22.5% 96%,20% 95.7%,17.5% 97.1%,15% 99.1%,12.5% 100%,10% 99.1%,7.5% 97.1%,5% 95.7%,2.5% 96%,0% 97.8%,2.2% 100%,1.2% 97.5%,0.4% 95%,0% 92.5%,0.1% 90%,0.6% 87.5%,1.5% 85%,2.5% 82.5%,3.5% 80%,4.2% 77.5%,4.4% 75%,4.2% 72.5%,3.5% 70%,2.5% 67.5%,1.5% 65%,0.6% 62.5%,0.1% 60%,0% 57.5%,0.4% 55%,1.2% 52.5%,2.2% 50%,3.2% 47.5%,4% 45%,4.4% 42.5%,4.3% 40%,3.8% 37.5%,2.9% 35%,1.9% 32.5%,0.9% 30%,0.2% 27.5%,0% 25%,0.2% 22.5%,0.9% 20%,1.9% 17.5%,2.9% 15%,3.8% 12.5%,4.3% 10%,4.4% 7.5%,4% 5%,3.2% 2.5%,2.2% 0%)}
/* a clipped shape has no room for the outline shadow, so lift and brighten instead */
@media (hover:hover){.lg-shape-cut .card:hover,.lg-shape-wavy .card:hover{box-shadow:none;filter:brightness(1.12)}}
/* hover previews are 16:9; in a squarer shape fill the tile by widening the player so it crops instead of letterboxing */
.lg-shape-square .card iframe,.lg-shape-circle .card iframe{left:50%;width:177.78%;transform:translateX(-50%)}
.lg-shape-oval .card iframe{left:50%;width:133.34%;transform:translateX(-50%)}
/* round shapes: centre the title and keep the length badge inside the curve */
.lg-shape-circle .card .meta,.lg-shape-oval .card .meta{text-align:center;padding:0 13% 10%}
.lg-shape-circle .card .dur,.lg-shape-oval .card .dur{top:11%;right:auto;left:50%;transform:translateX(-50%)}
.lg-shape-cut .card .meta,.lg-shape-wavy .card .meta{padding:12px 9% 16px}
.empty{color:var(--muted);padding:60px 0;text-align:center}

/* video / page */
.watch{max-width:1200px;margin:0 auto;padding:20px 24px 60px}
.watch.page{max-width:820px}
.crumbs{color:var(--muted);font-size:.85rem;margin-bottom:14px}
.crumbs a:hover{color:var(--accent)}
.player{aspect-ratio:16/9;width:100%;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.player iframe{width:100%;height:100%;border:0;display:block}
.watch h1{margin:22px 0 0;font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:600;line-height:1.2}
.watch.page h1{margin-top:8px}
.latin{font-style:italic;color:#b9bfe6;font-size:1.1rem;margin:2px 0 0}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.facts li{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.facts a:hover{color:var(--accent)}
.story{max-width:68ch;margin-top:22px;color:var(--body)}
.page .story{max-width:none}
.story p{margin:0 0 1em}
.story a{color:var(--accent)}
.story img{border-radius:8px}
.story .aligncenter{display:block;margin:0 auto}
.watch h3{margin:44px 0 14px;font-size:1.05rem;font-weight:600}
.watch .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:36px;font-size:.9rem;color:var(--muted)}
.pn a:hover{color:var(--accent)}

/* comments */
.comments{max-width:68ch}
.comment{border-top:1px solid var(--line);padding:14px 0}
.comment .comment{margin-left:24px;margin-top:14px}
.comment b{font-weight:600}.comment small{color:var(--muted);margin-left:8px}
.comment p{margin:4px 0 0;color:var(--body)}
.comment-form label,.contact label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:12px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea,.contact input,.contact textarea,.contact select{display:block;width:100%;margin-top:4px;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 12px;font:inherit}
.comment-form-cookies-consent{font-size:.85rem;color:var(--muted)}
.contact{max-width:520px;margin-top:28px}
.contact .hp{position:absolute;left:-9999px}
.notice{max-width:520px;padding:12px 16px;border-radius:8px;margin-top:28px}
.notice.ok{background:#0c2b2b;border:1px solid #1c5a4a}
.notice.err{background:#2b0c18;border:1px solid #5a1c30}

.foot{padding:36px 24px 28px;color:var(--muted);font-size:.88rem;border-top:1px solid var(--line);background:#03020f}
.foot-cols{display:grid;gap:28px 36px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:1400px;margin:0 auto}
.foot h3{margin:0 0 8px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.foot p{margin:0 0 .7em}
.foot .muted{margin-top:-4px;opacity:.8}
.foot ul{margin:0;padding:0;list-style:none}.foot li{margin:0 0 4px}
.foot a{color:#b9bfe6}.foot a:hover{color:var(--accent)}
.foot-cloud{grid-column:1/-1}
.cloud{line-height:2;margin:0}
.cloud a{margin-right:12px;white-space:nowrap}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;max-width:1400px;margin:28px auto 0;padding-top:18px;border-top:1px solid var(--line)}
.social,.foot-links{display:flex;gap:18px}
.social a:hover{color:var(--accent)}

@media (max-width:600px){
  .top,.bar,.sheet,.watch,.foot{padding-inline:14px}
  .foot-cols{grid-template-columns:1fr}
  .grid{gap:10px}
  .top .tag{flex-basis:100%;order:3}
  .bar{gap:8px;padding-block:8px}
  .chips{flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;margin:0;padding-bottom:4px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;white-space:nowrap}
  .bar input[type=search]{flex:1;min-width:0;width:auto}
  .rand{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}