/* ==========================================================
   糖心Vlog / 2026 viewing interface
   Media-focused layouts: compact cinematic cards, high-density
   discovery streams, resilient source-order navigation and player.
   All controls have standard HTML destinations and focus states.
   ========================================================== */
:root {
  color-scheme: dark;
  --accent: #FA3E6E;
  --hot: #FF2A6D;
  --peach: #FFA066;
  --black: #0A090E;
  --background: #121118;
  --surface: #1C1A24;
  --surface-hover: #25222e;
  --surface-deep: #15131c;
  --text: #F4EFF5;
  --muted: #9A93A6;
  --border: rgba(241,227,248,.085);
  --border-strong: rgba(241,227,248,.16);
  --shadow: 0 18px 62px rgba(0,0,0,.24);
  --radius: 11px;
  --max: 1510px;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0; background:var(--background); color:var(--text); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-size:14px; line-height:1.6; text-rendering:optimizeLegibility; }
body::before { content:""; position:absolute; z-index:-1; inset:0 0 auto; height:600px; pointer-events:none; background:radial-gradient(ellipse 63% 44% at 84% 5%,rgba(127,31,73,.16),transparent 70%); }
img { display:block; max-width:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }
button,select,input { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--peach); outline-offset:3px; }
::selection { background:var(--accent); color:#fff; }
.skip-link { position:fixed; left:20px; top:-100px; z-index:100; padding:10px 14px; background:var(--peach); color:var(--black); border-radius:5px; }
.skip-link:focus { top:12px; }
.site-shell { min-height:100vh; }
main { max-width:var(--max); padding:0 clamp(16px,3vw,50px) 84px; margin:0 auto; }
.topbar { height:84px; position:relative; z-index:10; display:flex; align-items:center; gap:clamp(16px,2.1vw,38px); max-width:var(--max); padding:0 clamp(16px,3vw,50px); margin:auto; border-bottom:1px solid var(--border); }
.brand { display:inline-flex; align-items:center; flex:none; gap:9px; min-width:186px; line-height:1.12; }
.brand img { border-radius:10px; background:var(--surface); box-shadow:0 0 24px rgba(250,62,110,.10); }
.brand strong { font-weight:850; font-size:20px; letter-spacing:-.7px; }
.brand small { display:block; margin-top:7px; letter-spacing:1.2px; font-size:9px; color:var(--muted); white-space:nowrap; }
.main-nav { display:flex; align-items:center; flex-wrap:wrap; gap:clamp(13px,1.9vw,30px); }
.main-nav a { color:#beb6c5; font-size:13px; font-weight:590; padding:12px 0; white-space:nowrap; transition:color .2s; position:relative; }
.main-nav a:hover,.main-nav a[aria-current="page"] { color:var(--text); }
.main-nav a[aria-current="page"]::after { content:""; height:2px; position:absolute; bottom:4px; left:0; right:0; border-radius:3px; background:var(--accent); }
.topbar-watch { display:flex; gap:16px; align-items:center; margin-left:auto; border-radius:8px; border:1px solid rgba(250,62,110,.25); background:rgba(250,62,110,.085); padding:10px 15px; color:#ffdce5; white-space:nowrap; font-size:12px; font-weight:650; transition:background .2s,border-color .2s; }
.topbar-watch:hover { background:rgba(250,62,110,.18); border-color:var(--accent); }
.topbar-watch span { color:var(--accent); font-size:16px; }
.menu-toggle,.mobile-nav { display:none; }
.hero { display:grid; grid-template-columns:minmax(260px,.88fr) minmax(420px,1.45fr) minmax(185px,.52fr); align-items:stretch; gap:11px; padding:25px 0 36px; min-height:420px; }
.hero-text { background:linear-gradient(140deg,#1d1722 0%,#19151f 65%,#16131c 100%); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(25px,3.1vw,49px) clamp(20px,2.6vw,40px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position:relative; overflow:hidden; }
.hero-text::after { content:""; position:absolute; width:280px; height:280px; border-radius:50%; bottom:-170px; right:-135px; pointer-events:none; background:rgba(250,62,110,.08); filter:blur(26px); }
.eyebrow,.section-kicker { display:flex; gap:9px; align-items:center; font-size:10px; font-weight:740; letter-spacing:2px; color:var(--peach); text-transform:uppercase; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--hot); box-shadow:0 0 0 5px rgba(255,42,109,.13),0 0 15px rgba(255,42,109,.6); }
.hero h1 { font-size:clamp(27px,3.2vw,49px); line-height:1.22; font-weight:830; letter-spacing:-2px; margin:21px 0 14px; }
.hero h1 em { color:var(--accent); font-style:normal; }
.hero-text>p { font-size:13px; color:#bab2bf; line-height:1.95; max-width:340px; margin:0 0 25px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:17px; padding:12px 16px; border-radius:8px; font-size:12px; font-weight:700; border:1px solid transparent; line-height:1.3; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button-main { background:linear-gradient(135deg,var(--accent),#d92c60); color:#fff; box-shadow:0 7px 30px rgba(250,62,110,.2); }
.button-main:hover { box-shadow:0 8px 36px rgba(250,62,110,.35); }
.button-ghost { border-color:var(--border-strong); background:rgba(255,255,255,.04); }
.button-ghost:hover { background:rgba(255,255,255,.1); }
.hero-note { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; padding-top:13px; color:var(--muted); font-size:10px; border-top:1px solid var(--border); }
.hero-note span::before { content:"✓"; color:var(--peach); margin-right:5px; }
.hero-screen { min-width:0; border-radius:var(--radius); overflow:hidden; background:var(--surface); border:1px solid var(--border); }
.featured-image { height:100%; min-height:390px; display:block; position:relative; isolation:isolate; overflow:hidden; }
.featured-image img { width:100%; height:100%; position:absolute; inset:0; transition:transform .55s ease; }
.featured-image:hover img { transform:scale(1.055); }
.screen-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(10,9,14,.25) 5%,transparent 34%,rgba(10,9,14,.75) 100%); }
.screen-tag { position:absolute; top:19px; left:18px; z-index:2; color:#fff; font-size:10px; font-weight:760; letter-spacing:.3px; border-radius:6px; padding:6px 10px; background:rgba(10,9,14,.62); backdrop-filter:blur(12px); }
.screen-button { display:flex; align-items:center; gap:9px; position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(250,62,110,.95); box-shadow:0 8px 36px rgba(0,0,0,.3); color:#fff; padding:14px 19px; border-radius:30px; font-size:12px; font-weight:780; white-space:nowrap; transition:background .2s,scale .2s; }
.featured-image:hover .screen-button { background:var(--hot); scale:1.03; }
.screen-caption { position:absolute; bottom:22px; left:23px; right:12px; z-index:2; display:flex; flex-direction:column; gap:5px; }
.screen-caption strong { font-size:19px; font-weight:800; line-height:1.3; }
.screen-caption small { color:#eee7ef; font-size:11px; }
.hero-side { display:flex; flex-direction:column; gap:10px; padding:15px 12px; background:var(--surface-deep); border-radius:var(--radius); border:1px solid var(--border); min-width:0; }
.side-title { display:block; font-size:12px; font-weight:770; letter-spacing:.3px; padding:3px 0 8px; }
.hero-teaser { display:flex; flex-direction:column; border-radius:8px; overflow:hidden; min-width:0; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.hero-teaser img { width:100%; aspect-ratio:2/1; transition:filter .2s; }
.hero-teaser:hover img { filter:brightness(1.15); }
.hero-teaser strong { font-size:11px; line-height:1.45; font-weight:690; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hero-teaser small { display:block; font-size:10px; color:var(--muted); margin-top:2px; }
.tiny-link { margin-top:auto; color:var(--accent); font-size:11px; font-weight:680; }
.section { margin:19px 0 39px; }
.section-heading { display:flex; gap:20px; align-items:end; justify-content:space-between; margin-bottom:17px; }
.section-heading h2 { font-size:23px; line-height:1.3; font-weight:820; letter-spacing:-.6px; margin:8px 0 5px; }
.section-heading p { font-size:12px; color:var(--muted); margin:0; }
.heading-link { font-size:12px; color:#e5c8d3; white-space:nowrap; padding:8px 0; }
.heading-link:hover { color:var(--accent); }
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(232px,1fr); gap:9px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:0 0 13px; scrollbar-color:#40333e transparent; scrollbar-width:thin; }
.rail .video-card { scroll-snap-align:start; }
.video-card { min-width:0; background:var(--surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); transition:border-color .2s,background .2s,transform .2s; }
.video-card:hover { border-color:rgba(250,62,110,.35); background:var(--surface-hover); transform:translateY(-2px); }
.poster { position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#272331,#181720); }
.poster img { width:100%; height:100%; transition:transform .5s,filter .35s; }
.video-card:hover .poster img { transform:scale(1.045); filter:saturate(1.12); }
.poster-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.32),transparent 32%,rgba(0,0,0,.26) 100%); }
.poster-label { position:absolute; left:9px; top:9px; border-radius:5px; background:rgba(10,9,14,.76); color:#fff; padding:4px 7px; font-size:10px; font-weight:710; backdrop-filter:blur(6px); }
.poster-play { position:absolute; right:10px; bottom:10px; width:34px; height:34px; display:grid; place-items:center; background:rgba(10,9,14,.7); border:1px solid rgba(255,255,255,.23); color:white; border-radius:50%; font-size:11px; padding-left:2px; transition:background .2s; }
.video-card:hover .poster-play { background:var(--accent); }
.video-copy { padding:11px 12px 13px; }
.video-copy h3 { font-size:13.5px; font-weight:760; line-height:1.55; margin:0; letter-spacing:.05px; }
.video-copy h3 a:hover { color:#ff8da9; }
.video-meta { display:flex; gap:7px; color:var(--muted); align-items:center; font-size:10px; margin:5px 0 7px; }
.video-meta span+span::before { content:'·'; margin-right:7px; }
.video-copy p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11px; color:#a9a1ae; line-height:1.65; margin:0; }
.home-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.home-grid .poster { aspect-ratio:4/3; }
.home-grid .video-card:nth-child(2) .poster,.home-grid .video-card:nth-child(4) .poster { aspect-ratio:4/3; }
.service-strip { margin:28px 0 35px; background:linear-gradient(95deg,rgba(250,62,110,.13),rgba(255,160,102,.035) 70%); border:1px solid rgba(250,62,110,.16); border-radius:11px; padding:21px 23px; display:flex; gap:21px; align-items:center; }
.strip-icon { width:52px; height:52px; display:grid; place-items:center; flex:none; border-radius:11px; background:rgba(250,62,110,.12); color:var(--accent); font-size:29px; }
.service-strip strong { font-size:14px; font-weight:780; }
.service-strip p { font-size:11px; margin:5px 0 0; line-height:1.7; color:#b9aebc; }
.service-strip a { font-size:12px; color:var(--peach); font-weight:730; white-space:nowrap; margin-left:auto; }
.service-strip a:hover { color:#fff; }
.latest-grid .poster { aspect-ratio:16/10; }
.footer { max-width:var(--max); padding:32px clamp(16px,3vw,50px) 20px; margin:auto; border-top:1px solid var(--border); }
.footer-inner { display:flex; align-items:start; justify-content:space-between; gap:25px; }
.footer-brand { font-size:21px; font-weight:860; letter-spacing:-1px; }
.brand-dot { color:var(--accent); }
.footer p { color:var(--muted); font-size:11px; margin:8px 0 0; }
.footer-nav { display:flex; gap:23px; flex-wrap:wrap; font-size:12px; color:#c0b7c7; }
.footer-nav a:hover { color:var(--accent); }
.footnote { color:#79727f; font-size:10px; margin-top:38px; padding-top:13px; border-top:1px solid var(--border); }
.catalog-head { position:relative; padding:45px 0 31px; }
.catalog-head::before { content:""; pointer-events:none; position:absolute; left:-8%; top:-30%; width:60%; height:200%; z-index:-1; opacity:.6; background:radial-gradient(ellipse,rgba(250,62,110,.14),transparent 66%); }
.catalog-head h1 { font-size:clamp(29px,3.7vw,46px); letter-spacing:-1.4px; line-height:1.2; font-weight:860; margin:12px 0 13px; }
.catalog-head p { color:#bdb5c2; max-width:660px; font-size:13px; line-height:1.9; margin:0; }
.catalog-layout { display:grid; grid-template-columns:218px minmax(0,1fr); align-items:start; gap:23px; }
.filters { background:var(--surface-deep); border:1px solid var(--border); border-radius:var(--radius); padding:17px 12px; position:sticky; top:20px; }
.filters h2 { margin:0 10px 13px; font-size:13px; font-weight:800; }
.filter-list { display:flex; flex-direction:column; gap:3px; }
.filter-list a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; border-radius:7px; font-size:12px; color:#b9b2bf; transition:background .2s,color .2s; }
.filter-list a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.filter-list a.selected { color:#fff; background:rgba(250,62,110,.17); font-weight:720; }
.filter-list a span { opacity:.52; font-variant-numeric:tabular-nums; font-size:11px; }
.filter-aside { margin:18px 8px 2px; padding:14px 9px 0; border-top:1px solid var(--border); }
.filter-aside strong { display:block; font-size:11px; color:var(--peach); }
.filter-aside p { color:var(--muted); font-size:11px; line-height:1.8; margin:8px 0 0; }
.catalog-content { min-width:0; }
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:1px 0 15px; }
.catalog-toolbar>div { display:flex; align-items:center; gap:11px; }
.catalog-toolbar strong { font-size:16px; }
.catalog-toolbar span { color:var(--muted); font-size:11px; }
.catalog-search { display:flex; align-items:center; gap:8px; }
.catalog-search label { color:var(--muted); font-size:11px; }
.catalog-search select { border-radius:7px; background:var(--surface); border:1px solid var(--border-strong); color:#fff; min-height:36px; padding:0 28px 0 10px; font-size:12px; max-width:150px; }
.catalog-search select option { background:var(--surface); }
.catalog-search button { border:1px solid rgba(250,62,110,.25); border-radius:7px; background:rgba(250,62,110,.17); color:#fff; padding:8px 13px; font-size:11px; font-weight:680; }
.catalog-search button:hover { background:var(--accent); }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.catalog-grid .poster { aspect-ratio:16/10; }
.catalog-grid .video-copy { padding:11px 12px 14px; }
.catalog-grid .video-copy p { -webkit-line-clamp:2; }
.empty-state { padding:28px; border:1px dashed var(--border); border-radius:var(--radius); color:var(--muted); }
.empty-state a { color:var(--accent); }
.watch-help { margin:36px 0 0; border-top:1px solid var(--border); padding:19px 0; }
.watch-help h2 { font-size:17px; margin:0 0 13px; }
.watch-help details { background:var(--surface); border:1px solid var(--border); border-radius:8px; margin:9px 0; padding:0 15px; }
.watch-help summary { cursor:pointer; padding:13px 0; font-size:12px; font-weight:710; }
.watch-help details[open] summary { color:#ff9ab3; }
.watch-help details p { border-top:1px solid var(--border); color:var(--muted); padding:12px 0 16px; margin:0; font-size:12px; line-height:1.85; }
.breadcrumbs { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:23px 0; color:var(--muted); font-size:11px; }
.breadcrumbs a { color:#c9c0ce; }
.breadcrumbs a:hover { color:var(--accent); }
.breadcrumbs span[aria-current="page"] { color:#a69daa; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 286px; gap:22px; align-items:start; }
.detail-main { min-width:0; }
.player-frame { background:var(--black); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:16/9; }
.player-frame video { display:block; width:100%; height:100%; background:var(--black); }
.player-unavailable { width:100%; height:100%; position:relative; overflow:hidden; }
.player-unavailable img { width:100%; height:100%; filter:brightness(.32) blur(7px); transform:scale(1.05); }
.player-unavailable::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse,transparent 10%,rgba(10,9,14,.3) 80%); }
.unavailable-message { position:absolute; z-index:1; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:20px; gap:9px; }
.unavailable-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; font-size:28px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:var(--accent); margin-bottom:3px; }
.unavailable-message strong { font-size:16px; }
.unavailable-message span:last-child { color:#cdc1cc; font-size:11px; }
.detail-heading { margin:21px 0 22px; }
.detail-heading h1 { font-size:clamp(20px,2.6vw,30px); line-height:1.4; margin:8px 0 11px; }
.detail-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:11px; color:#b4a9b9; }
.detail-meta span { padding:4px 9px; border:1px solid var(--border); background:var(--surface); border-radius:5px; }
.detail-story { padding:22px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.detail-story h2 { font-size:16px; line-height:1.5; margin:0 0 11px; }
.detail-story p { font-size:13px; line-height:2; color:#bbb2be; margin:0 0 11px; }
.detail-story p:last-child { margin-bottom:0; }
.detail-navigation { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:19px 0; font-size:12px; color:var(--peach); }
.detail-navigation a:hover { color:white; }
.related { background:var(--surface-deep); border:1px solid var(--border); border-radius:var(--radius); padding:16px 13px; }
.related h2 { font-size:15px; margin:0 0 2px; }
.related>p { font-size:11px; color:var(--muted); margin:0 0 14px; }
.related-card { display:grid; grid-template-columns:96px minmax(0,1fr); gap:9px; padding:10px 0; border-top:1px solid var(--border); }
.related-card img { width:100%; height:67px; border-radius:6px; }
.related-card strong { font-size:11px; font-weight:710; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related-card small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.related-card:hover strong { color:var(--accent); }
.error-page { text-align:center; min-height:56vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 15px; }
.error-code { font-size:clamp(80px,15vw,170px); font-weight:900; letter-spacing:-12px; line-height:1; background:linear-gradient(130deg,#ff79a0,#442335); color:transparent; background-clip:text; }
.error-page h1 { font-size:clamp(22px,3.4vw,35px); margin:15px 0 5px; }
.error-page p { color:var(--muted); line-height:1.9; font-size:13px; margin:0 0 20px; }
@media (min-width:1510px) { .hero { grid-template-columns:minmax(320px,.88fr) minmax(550px,1.45fr) minmax(200px,.5fr); } .hero-text { min-height:470px; } }
@media (max-width:1200px) {
  .hero { grid-template-columns:minmax(260px,.9fr) minmax(400px,1.4fr); }
  .hero-side { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:13px; }
  .hero-side .side-title,.hero-side .tiny-link { grid-column:1/-1; }
  .hero-teaser { display:grid; grid-template-columns:100px 1fr; padding-bottom:0; border-bottom:0; }
  .hero-teaser img { width:100px; height:72px; aspect-ratio:auto; border-radius:6px; }
  .hero-teaser strong { font-size:12px; }
  .hero-side .tiny-link { margin:2px 0 0; }
  .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .topbar { height:72px; }
  .topbar>.main-nav,.topbar-watch { display:none; }
  .menu-toggle { margin-left:auto; width:40px; height:40px; background:var(--surface); border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
  .menu-toggle span { width:17px; height:2px; border-radius:2px; background:#fff; transition:transform .2s; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .mobile-nav:not([hidden]) { display:block; position:absolute; top:72px; left:0; right:0; z-index:15; background:#1c1a24; box-shadow:0 17px 32px rgba(0,0,0,.45); padding:12px 19px 15px; }
  .mobile-nav .main-nav { flex-direction:column; align-items:stretch; gap:2px; }
  .mobile-nav .main-nav a { padding:11px 8px; }
  .mobile-nav .main-nav a[aria-current="page"]::after { width:2px; height:auto; left:-8px; bottom:9px; top:9px; }
  .hero { padding-top:17px; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); }
  .hero-text { padding:24px; }
  .hero h1 { font-size:clamp(24px,4vw,38px); letter-spacing:-1.2px; }
  .hero-text>p { font-size:12px; line-height:1.8; }
  .featured-image { min-height:365px; }
  .home-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rail { grid-auto-columns:minmax(245px,38%); }
  .detail-layout { grid-template-columns:minmax(0,1fr); }
  .related { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 14px; }
  .related h2,.related>p { grid-column:1/-1; }
  .catalog-layout { grid-template-columns:180px minmax(0,1fr); gap:14px; }
}
@media (max-width:650px) {
  html { scroll-padding-top:75px; }
  main { padding-bottom:48px; }
  .brand { min-width:0; }
  .brand strong { font-size:18px; }
  .brand small { letter-spacing:.5px; font-size:9px; }
  .hero { grid-template-columns:minmax(0,1fr); gap:9px; min-height:0; padding:13px 0 25px; }
  .hero-text { min-height:0; padding:25px 22px; }
  .hero h1 { font-size:33px; margin:17px 0 12px; }
  .hero-text>p { max-width:470px; margin-bottom:17px; }
  .hero-note { margin-top:19px; }
  .hero-screen { min-height:0; }
  .featured-image { min-height:245px; aspect-ratio:16/10; }
  .screen-caption { bottom:14px; left:14px; }
  .screen-caption strong { font-size:16px; }
  .screen-button { padding:10px 13px; font-size:11px; }
  .hero-side { display:flex; flex-direction:row; align-items:stretch; overflow-x:auto; gap:10px; }
  .hero-side .side-title { display:none; }
  .hero-teaser { display:flex; flex-direction:column; flex:0 0 145px; min-width:145px; gap:7px; }
  .hero-teaser img { width:100%; height:84px; }
  .hero-teaser strong { font-size:11px; }
  .hero-side .tiny-link { align-self:center; flex:0 0 100px; font-size:11px; }
  .section { margin:16px 0 31px; }
  .section-heading { align-items:start; }
  .section-heading h2 { font-size:19px; }
  .section-heading p { font-size:11px; line-height:1.65; }
  .section-kicker { font-size:9px; }
  .heading-link { font-size:10px; max-width:118px; white-space:normal; text-align:right; }
  .rail { grid-auto-columns:minmax(220px,72%); }
  .video-copy { padding:9px 10px 11px; }
  .video-copy h3 { font-size:12px; }
  .home-grid { gap:8px; }
  .home-grid .poster { aspect-ratio:5/4; }
  .home-grid .video-copy p { -webkit-line-clamp:2; font-size:10px; }
  .service-strip { padding:15px; gap:12px; align-items:start; flex-wrap:wrap; }
  .service-strip .strip-icon { height:40px; width:40px; font-size:24px; }
  .service-strip>div:nth-child(2) { flex:1; min-width:0; }
  .service-strip a { width:100%; margin:0 0 0 52px; }
  .footer-inner { flex-wrap:wrap; }
  .footer-nav { width:100%; gap:17px; }
  .catalog-head { padding:29px 0 23px; }
  .catalog-head h1 { font-size:29px; }
  .catalog-head p { font-size:12px; }
  .catalog-layout { display:block; }
  .filters { position:static; padding:12px; margin-bottom:18px; }
  .filters h2 { font-size:11px; margin:0 5px 8px; }
  .filter-list { flex-direction:row; overflow-x:auto; scrollbar-width:thin; padding-bottom:4px; }
  .filter-list a { flex:none; font-size:11px; border:1px solid var(--border); }
  .filter-aside { margin:12px 2px 0; padding:9px 3px 0; }
  .filter-aside p { line-height:1.65; margin-top:3px; }
  .catalog-toolbar strong { font-size:14px; }
  .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .catalog-grid .poster { aspect-ratio:5/4; }
  .catalog-grid .video-copy p { font-size:10px; }
  .player-frame { aspect-ratio:16/10; }
  .related { display:block; }
  .related-card { grid-template-columns:105px minmax(0,1fr); }
  .detail-story { padding:17px; }
  .detail-story p { font-size:12px; }
}
@media (max-width:385px) {
  .brand img { width:35px; height:35px; }
  .brand strong { font-size:16px; }
  .hero h1 { font-size:29px; }
  .button { padding:11px 12px; gap:8px; }
  .catalog-toolbar { align-items:start; flex-direction:column; }
  .catalog-search { width:100%; }
  .catalog-search select { flex:1; }
  .home-grid,.catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .video-copy p { display:none; }
  .video-copy h3 { font-size:11px; }
  .video-meta { flex-wrap:wrap; line-height:1.2; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}
@media (hover:none) {
  .video-card:hover { transform:none; }
  .button:hover { transform:none; }
}
@media print {
  body { background:#fff; color:#000; }
  .topbar,.footer,.filters,.button,.hero-side,.service-strip,.menu-toggle { display:none!important; }
  main { max-width:none; padding:0; }
  .video-card,.detail-story,.related { break-inside:avoid; background:#fff; color:#000; }
  .video-meta,.video-copy p,.detail-story p { color:#333; }
}