/* video.css — YouTube-style journal: gallery, watch page, home hero */
:root:not([data-theme="light"]) { --bg:#0b0d12; --paper:#0b0d12; --bg-elevated:#0b0d12; --surface:#151922; --surface-hover:#1c212c; --rule:#222834; --accent:#58c4dd; --accent-hover:#7fd3e6; --accent-soft:rgba(88,196,221,.12); --nav-bg:rgba(11,13,18,.85); --body-bg-top:#0b0d12; --body-bg-mid:#0b0d12; --body-bg-bot:#0b0d12; }
body { background: var(--bg); }

/* wide single column on journal + watch pages */
.page-journal .app, .page-post .app { grid-template-columns: minmax(0,1fr) !important; max-width: 1640px; }
.page-journal .feed, .page-post .feed { border: 0; }

/* ── video card ── */
.vcard { display:flex; flex-direction:column; gap:10px; color:var(--ink); text-decoration:none; min-width:0; }
.vcard-thumb { position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--surface); }
.vcard-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s var(--ease-out); }
.vcard:hover .vcard-thumb img { transform:scale(1.04); }
.vcard-badge { position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.82); color:#fff; font:600 .74rem/1 var(--sans); padding:4px 6px; border-radius:5px; letter-spacing:.02em; }
.vcard-badge-soon { background:rgba(20,24,32,.85); color:#c8d0db; font-family:var(--mono); font-weight:500; }
.vcard-play { position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.55); display:grid; place-items:center; opacity:0; transition:opacity .2s; }
.vcard-play svg { width:26px; fill:#fff; }
.vcard:hover .vcard-play, .vcard:focus-visible .vcard-play { opacity:1; }
.vcard-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.vcard-title { font:650 1rem/1.3 var(--sans); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vcard-hook { color:var(--muted); font-size:.86rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vcard-date { color:var(--soft); font-size:.78rem; }
.vcard-row { flex-direction:row; gap:10px; }
.vcard-row .vcard-thumb { flex:0 0 168px; border-radius:8px; }
.vcard-row .vcard-title { font-size:.9rem; }
.vcard-row .vcard-hook { font-size:.78rem; -webkit-line-clamp:2; }
.vcard-row .vcard-play { width:36px; height:36px; } .vcard-row .vcard-play svg { width:18px; }

/* ── gallery ── */
.gallery-head { padding:28px 24px 8px; }
.gallery-kicker { font:600 .72rem var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.gallery-title { font:750 clamp(1.6rem,3vw,2.3rem)/1.15 var(--sans); margin-top:6px; }
.gallery-sub { color:var(--muted); max-width:62ch; margin-top:8px; line-height:1.5; }
.vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:32px 20px; padding:20px 24px 48px; }

/* ── watch page ── */
.watch { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:24px; padding:20px 24px 48px; }
.watch-main.posts-article { padding:0; border:0; }
.watch-player { position:relative; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; }
.watch-player video, .watch-player img { width:100%; height:100%; display:block; object-fit:contain; }
.watch-player img { object-fit:cover; }
.watch-soon { position:absolute; left:16px; bottom:16px; background:rgba(0,0,0,.75); color:#fff; font:600 .8rem var(--mono); padding:6px 10px; border-radius:6px; }
.watch-title { font:700 clamp(1.25rem,2.2vw,1.6rem)/1.25 var(--sans); margin:16px 0 10px; }
.watch-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.watch-meta { display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--muted); line-height:1.3; }
.watch-meta strong { color:var(--ink); font-size:.92rem; }
.watch-avatar { border-radius:50%; }
.watch-bar .posts-share { margin:0; }
.watch-desc { background:var(--surface); border-radius:12px; padding:14px 16px; margin-top:14px; line-height:1.55; font-size:.94rem; }
.watch-desc p + p { margin-top:8px; }
.watch-caption { color:var(--muted); }
.watch-tags .posts-tag { margin-right:4px; }
.watch-appendix { margin-top:16px; border:1px solid var(--rule); border-radius:12px; }
.watch-appendix > summary { cursor:pointer; padding:14px 16px; font-weight:650; list-style:none; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.watch-appendix > summary::-webkit-details-marker { display:none; }
.watch-appendix > summary::before { content:"▸"; color:var(--accent); transition:transform .2s; }
.watch-appendix[open] > summary::before { transform:rotate(90deg); }
.watch-appendix > summary span { color:var(--muted); font-weight:400; font-size:.85rem; }
.watch-appendix .posts-article-body { padding:0 16px 20px; max-width:none; }
.watch-next { display:flex; flex-direction:column; gap:14px; min-width:0; }
.watch-next-title { font:650 1rem var(--sans); }
.watch-all { color:var(--accent); text-decoration:none; font-size:.9rem; }

/* ── home hero ── */
.home-hero { padding:16px; border-bottom:1px solid var(--rule); }
.home-hero-player { aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 0 0 1px var(--rule); }
.home-hero-player video { width:100%; height:100%; display:block; }
.home-hero-copy { padding:12px 2px 0; }
.home-hero-kicker { font:600 .72rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.home-hero-title { font:750 1.35rem/1.25 var(--sans); margin-top:4px; }
.home-hero-title a { color:var(--ink); text-decoration:none; } .home-hero-title a:hover { color:var(--accent); }
.home-hero-dek { color:var(--muted); margin-top:4px; line-height:1.45; }
.home-hero-cta { display:inline-block; margin-top:10px; color:var(--accent); font-weight:600; text-decoration:none; }
.aside-vlist { display:flex; flex-direction:column; gap:12px; padding:4px 0; }
.aside-vlist .vcard-row .vcard-thumb { flex-basis:120px; }
.aside-vlist .vcard-hook { display:none; }

@media (max-width: 1100px) {
  .watch { grid-template-columns:1fr; }
}
@media (max-width: 688px) {
  .vgrid { grid-template-columns:1fr; padding:12px 0 40px; gap:24px; }
  .vgrid .vcard-body { padding:0 12px; }
  .vgrid .vcard-thumb { border-radius:0; }
  .gallery-head { padding:20px 12px 4px; }
  .watch { padding:0 0 40px; gap:16px; }
  .watch-player { border-radius:0; }
  .watch-main > :not(.watch-player) { margin-left:12px; margin-right:12px; }
  .watch-next { padding:0 12px; }
  .vcard-row .vcard-thumb { flex-basis:150px; }
  .home-hero { padding:10px; }
}
.vcard-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s; pointer-events:none; }
.vcard-preview.is-on { opacity:1; }
.vcard-thumb .vcard-badge { z-index:1; }