/* videos.css · 2026-10-20 · 视频页：一段一屏，画在左、字在右；窄屏上下排。 */
.video-page{max-width:1040px;margin:0 auto;padding:0 40px 40px}
.video-intro{padding:60px 0 34px;border-bottom:1px solid var(--line)}
.video-eyebrow{margin:0 0 10px;font:12px/1.8 var(--font-sans);letter-spacing:.12em;color:var(--muted)}
.video-intro h1{margin:0;font:400 48px/1.5 var(--font-title);letter-spacing:.1em}
.video-intro>p:last-child{margin:12px 0 0;font-size:14px;color:var(--muted)}

.video-reel{list-style:none;margin:0;padding:0}
.video-piece{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:56px;padding:44px 0;border-bottom:1px solid var(--line)}
.video-piece:last-child{border-bottom:0}
.video-frame{position:relative;line-height:0}
.video-piece.is-portrait .video-frame{width:min(380px,calc(78vh * 9 / 16))}
.video-piece:not(.is-portrait){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.video-frame video{display:block;width:100%;height:auto;border-radius:3px;background:#1c2024;box-shadow:0 12px 32px rgba(46,52,45,.12)}
.video-piece.is-portrait .video-frame video{aspect-ratio:9/16;object-fit:cover}
/* 画框左下一方小印，与站内朱印同调 */
.video-frame::after{
  content:"藏";position:absolute;left:-9px;bottom:22px;display:grid;place-items:center;width:22px;height:25px;
  background:var(--cinnabar);color:var(--paper);font:13px/1 var(--font-kai);border-radius:2px 3px 2px 3px;transform:rotate(-4deg);opacity:.9;pointer-events:none;
}

.video-copy{max-width:30em}
.video-no{display:block;font:400 15px/1 var(--font-title);letter-spacing:.12em;color:var(--cinnabar)}
.video-copy h2{margin:14px 0 6px;font:400 34px/1.5 var(--font-title);letter-spacing:.12em}
.video-meta{display:flex;gap:16px;margin:0 0 20px;font:12px/1.8 var(--font-sans);color:var(--muted);letter-spacing:.06em}
.video-copy>p:not(.video-meta){margin:0;font-size:15px;line-height:2;color:var(--ink-2)}
.video-copy blockquote{margin:26px 0 0;padding:4px 0 4px 18px;border-left:2px solid var(--line-ink);font:16px/2 var(--font-kai);color:var(--ink-2);letter-spacing:.06em}
.video-copy cite{display:block;margin-top:6px;font:normal 12px/1.8 var(--font-sans);color:var(--muted);letter-spacing:.04em}
.video-copy cite::before{content:"—— "}

:root[data-theme=dark] .video-frame video{box-shadow:0 12px 32px rgba(0,0,0,.25)}

@media (max-width:760px){
  .video-page{padding:0 24px 28px}
  .video-intro{padding:38px 0 25px}
  .video-intro h1{font-size:39px}
  .video-piece,.video-piece:not(.is-portrait){grid-template-columns:1fr;gap:26px;padding:30px 0}
  .video-piece.is-portrait .video-frame{width:min(100%,420px);margin:0 auto}
  .video-frame::after{left:-7px;bottom:16px;width:19px;height:22px;font-size:11px}
  .video-copy h2{font-size:28px;margin-top:10px}
  .video-copy>p:not(.video-meta){font-size:15px}
}