/* Homepage styles scoped to the prototype geometry. */
.home-01 { min-width:0; color:var(--text); }
.home-01 a { color:inherit; text-decoration:none; }
.home-01 ul { list-style:none; padding:0; margin:0; }
.home-01 img { display:block; max-width:100%; }
/* Keep the wide fallback logo complete in both covers and circular avatars. */
.home-01 :is(.home-01__cover, .home-01__hero-cover, .home-01__avatar) img[src*="/themes/haijiao/static/images/loading.png"] {
  object-fit:contain;
  object-position:center;
  box-sizing:border-box;
  padding:4px;
  background:#fff;
  transform:none;
}
/* Legacy common.css colors every SVG blue; controls use their own foreground. */
.home-01 svg { color:inherit; flex-shrink:0; }
.home-01 button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.home-01 a:focus-visible,.home-01 button:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
.home-01__intro { padding:clamp(18px,2.6vw,26px) 0 clamp(14px,1.8vw,18px); position:relative; z-index:1; }
.home-01__intro h1 { margin:0 0 10px; font-size:clamp(21px,2.6vw,29px); line-height:1.28; font-weight:800; letter-spacing:-.02em; overflow-wrap:anywhere; }
.home-01__intro h1 em { font-style:normal; background:linear-gradient(120deg,var(--brand-soft),#8ee6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.home-01__intro p { margin:0; color:var(--text-dim); font-size:clamp(13.5px,1.2vw,15px); }
.home-01__slider { --hero-split:63%; position:relative; overflow:hidden; margin-bottom:clamp(26px,3.4vw,40px); z-index:1; border-radius:20px; background:var(--surface); box-shadow:0 24px 60px -28px rgba(0,0,0,.9); touch-action:pan-y; }
.home-01__track { position:relative; }
.home-01__slide { position:absolute; inset:0; opacity:1; visibility:visible; transition:opacity .5s; }
.home-01__slide[hidden] { display:block; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .5s,visibility .5s; }
.home-01__slide:first-child { position:relative; }
.home-01__slide-link { display:grid; grid-template-columns:var(--hero-split) minmax(0,1fr); position:relative; }
.home-01 .home-01__slide-link:focus-visible { outline-offset:-4px; }
.home-01__slide-link:focus-visible::after { content:''; position:absolute; inset:4px; z-index:4; border:2px solid var(--brand-soft); border-radius:16px; pointer-events:none; }
.home-01__backdrop { position:absolute; inset:0; z-index:0; filter:blur(42px) saturate(1.4); transform:scale(1.18); opacity:.85; background:radial-gradient(60% 70% at 15% 18%,#215c8c99,transparent 60%),radial-gradient(55% 65% at 82% 28%,#4b27697a,transparent 62%),linear-gradient(140deg,#152636,#11151f); }
.home-01__backdrop img { width:100%; height:100%; object-fit:cover; }
.home-01__hero-cover,.home-01__cover { position:relative; overflow:hidden; background:var(--surface-2); aspect-ratio:16 / 9; }
.home-01__hero-cover { z-index:1; }
.home-01__hero-cover img,.home-01__cover img { width:100%; height:100%; object-fit:cover; }
.home-01__slide--ad .home-01__hero-cover img,.home-01__card--ad .home-01__cover img { object-fit:contain; background:var(--bg-elev,#141419); }
.home-01__slide--ad .home-01__hero-cover img { animation:none; }
.home-01__hero-cover img { animation:home-01-kenburns 16s var(--ease) infinite alternate; }
@keyframes home-01-kenburns { from { transform:scale(1); } to { transform:scale(1.07); } }
.home-01__placeholder { position:absolute; inset:0; display:grid; place-items:center; color:var(--text-faint); font-size:13px; }
.home-01__ad-creative { position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; overflow-wrap:anywhere; font-size:clamp(20px,3vw,36px); color:var(--brand-soft); background:var(--surface-2); }
.home-01__hero-body { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; min-width:0; padding:clamp(22px,2.4vw,40px); background:rgba(9,9,13,.3); backdrop-filter:blur(16px) saturate(145%); -webkit-backdrop-filter:blur(16px) saturate(145%); }
.home-01__hero-body h3 { margin:0 0 10px; font-size:clamp(20px,2.6vw,30px); font-weight:800; letter-spacing:-.02em; line-height:1.24; text-shadow:0 2px 20px rgba(0,0,0,.5); overflow-wrap:anywhere; }
.home-01__hero-tags { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.home-01__hero-tags span { font-size:11.5px; font-weight:600; letter-spacing:.04em; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px); }
.home-01__hero-tags span:first-child { background:linear-gradient(135deg,var(--brand),#38d0ff); border-color:transparent; color:#fff; }
.home-01__summary { margin:0 0 12px; color:rgba(255,255,255,.78); font-size:clamp(13px,1.4vw,15.5px); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.home-01__hero-meta { margin:0 0 18px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12.5px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.75); }
.home-01__cta { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; height:44px; padding:0 26px; border-radius:999px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--brand),#1c7ef0); box-shadow:0 10px 30px rgba(30,160,248,.35); transition:transform .22s,box-shadow .22s; }
.home-01__slide-link:hover .home-01__cta { transform:translateY(-2px); box-shadow:0 16px 38px rgba(30,160,248,.35); }
.home-01__type { position:absolute; right:12px; top:12px; z-index:3; padding:3px 9px; border-radius:6px; font-size:12px; font-weight:600; line-height:1.5; background:rgba(255,255,255,.92); color:#14141a; }
.home-01__type--post { background:linear-gradient(135deg,var(--brand),#38d0ff); color:#fff; }
.home-01 .home-01__slider-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgba(10,10,14,.55); border:1px solid rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(8px); opacity:0; transition:opacity .25s,background .2s; }
.home-01__slider:hover .home-01__slider-nav,.home-01 .home-01__slider-nav:focus-visible { opacity:1; }
.home-01 .home-01__slider-nav:hover { background:var(--brand); border-color:var(--brand); }
.home-01__slider-nav--prev { left:16px; }
.home-01__slider-nav--next { right:calc(100% - var(--hero-split) + 16px); }
.home-01__dots { position:absolute; z-index:3; bottom:18px; right:clamp(18px,3.4vw,46px); display:flex; gap:8px; }
.home-01__dots button { padding:6px 0; }
.home-01__dots button::after { content:''; display:block; width:22px; height:3px; border-radius:2px; background:rgba(255,255,255,.3); transition:background .25s,width .25s; }
.home-01__dots button[aria-pressed='true']::after { width:34px; background:linear-gradient(90deg,var(--brand),#38d0ff); }
.home-01__dots button:hover::after { background:rgba(255,255,255,.6); }
/* Keyboard-accessible pause does not add a permanent visual control. */
.home-01 .home-01__pause { position:absolute; z-index:4; top:12px; right:12px; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.home-01 .home-01__pause:focus-visible { width:auto; height:auto; clip-path:none; padding:5px 10px; border-radius:6px; background:rgba(10,10,14,.8); }
.home-01__section { margin-bottom:clamp(34px,5vw,56px); position:relative; z-index:1; }
.home-01__head { display:flex; align-items:flex-end; gap:14px; margin-bottom:16px; }
.home-01__head h2 { display:flex; align-items:center; gap:10px; margin:0; font-size:clamp(17px,2vw,21px); font-weight:750; letter-spacing:-.01em; white-space:nowrap; }
.home-01__head h2::before { content:''; width:4px; height:19px; border-radius:3px; background:linear-gradient(180deg,var(--brand),#38d0ff); }
.home-01__head > span { color:var(--text-faint); font-size:13px; padding-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.home-01__head > a { margin-left:auto; display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font-size:13px; color:var(--text-dim); }
.home-01__head > a:hover { color:var(--brand-soft); }
.home-01__bloggers { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:18px; }
.home-01__blogger { display:flex; align-items:center; flex-direction:column; gap:4px; text-align:center; min-width:0; padding:16px 8px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); transition:border-color .2s,transform .2s; }
.home-01__blogger:hover { border-color:rgba(30,160,248,.45); transform:translateY(-2px); }
.home-01__avatar { display:grid; place-items:center; overflow:hidden; width:60px; height:60px; flex-shrink:0; border-radius:50%; margin-bottom:6px; font-size:24px; font-weight:700; color:#fff; background:linear-gradient(135deg,#1ea0f8,#2860a1); box-shadow:0 0 0 3px var(--bg-elev),0 0 0 4px var(--line-strong); }
.home-01__avatar img { width:100%; height:100%; object-fit:cover; }
.home-01__blogger strong { max-width:100%; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-01__blogger > span:last-child { font-size:12px; color:var(--text-faint); }
.home-01__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.home-01__card { min-width:0; position:relative; }
.home-01__card-link { display:block; }
.home-01__cover { border-radius:var(--radius); }
.home-01__cover::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--line); pointer-events:none; }
.home-01__cover img { transition:transform .45s,opacity .3s; }
.home-01__card--ad .home-01__card-link:hover .home-01__cover img { transform:none; }
.home-01__card-link:hover img { transform:scale(1.06); }
.home-01__card-link:hover .home-01__cover::after { box-shadow:inset 0 0 0 1px rgba(30,160,248,.55); }
.home-01__card h3, .home-01__card .home-01__ad-title { margin:10px 0 8px; font-size:14px; font-weight:550; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; transition:color .2s; }
.home-01__card-link:hover h3, .home-01__card-link:hover .home-01__ad-title { color:var(--brand-soft); }
.home-01__card-meta { display:flex; align-items:center; gap:8px; color:var(--text-faint); font-size:12px; margin:12px 0; }
.home-01__card-meta > span:last-child { white-space:nowrap; }
.home-01__card-meta > .home-01__dot { flex-shrink:1; }
.home-01__dot { width:3px; height:3px; flex-shrink:0; border-radius:50%; background:currentColor; opacity:.6; }
.home-01__tags { margin:0; display:flex; gap:6px; white-space:nowrap; overflow:hidden; }
.home-01__tags a { flex:0 0 auto; padding:3px 9px; border-radius:6px; font-size:11.5px; line-height:1.5; color:var(--text-faint); background:var(--surface); border:1px solid var(--line); transition:color .18s,border-color .18s,background .18s; }
.home-01__tags a:hover { color:#fff; background:rgba(30,160,248,.14); border-color:rgba(30,160,248,.45); }
.home-01__badge { position:absolute; z-index:2; right:7px; top:7px; font-size:11px; line-height:1; padding:4px 7px; border-radius:6px; font-weight:600; background:rgba(6,6,9,.78); backdrop-filter:blur(4px); color:#fff; }
.home-01__badge--type { left:7px; right:auto; background:rgba(255,255,255,.92); color:#14141a; }
.home-01__badge--post { background:linear-gradient(135deg,var(--brand),#38d0ff); color:#fff; }
.home-01__play { position:absolute; inset:0; display:grid; place-items:center; background:rgba(8,8,12,.34); opacity:0; transition:opacity .25s; }
.home-01__play > span { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(30,160,248,.92); transform:scale(.82); transition:transform .25s; box-shadow:0 6px 20px rgba(0,0,0,.4); }
.home-01__card-link:hover .home-01__play,.home-01__card-link:focus-visible .home-01__play { opacity:1; }
.home-01__card-link:hover .home-01__play > span,.home-01__card-link:focus-visible .home-01__play > span { transform:scale(1); }
.home-01__grid--portrait { grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px 14px; }
.home-01__grid--portrait .home-01__card { overflow:hidden; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease); }
.home-01__grid--portrait .home-01__card:hover { transform:translateY(-4px); border-color:rgba(30,160,248,.4); box-shadow:0 10px 28px rgba(0,0,0,.45); }
.home-01__grid--portrait .home-01__cover { aspect-ratio:9 / 16; border-radius:0; }
.home-01__grid--portrait .home-01__card-link { padding-bottom:12px; }
.home-01__grid--portrait .home-01__cover::after { background:linear-gradient(transparent 55%,rgba(0,0,0,.62)); box-shadow:none; }
.home-01__grid--portrait .home-01__card-link:hover img { transform:none; }
.home-01__grid--portrait .home-01__card h3 { margin:10px 11px 0; font-weight:600; line-height:1.6; white-space:nowrap; text-overflow:ellipsis; display:block; }
.home-01__grid--portrait .home-01__card-meta { margin:5px 11px 0; font-size:11.5px; justify-content:space-between; gap:6px; white-space:nowrap; }
.home-01__grid--portrait .home-01__card-meta > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.home-01__drama-tag { position:absolute; left:8px; top:8px; z-index:2; min-width:39px; padding:4px 8px; border-radius:6px; text-align:center; font-size:11.5px; font-weight:700; line-height:1; color:#fff; background:linear-gradient(135deg,var(--brand),#38d0ff); box-shadow:0 3px 10px rgba(30,160,248,.35); }
.home-01__drama-eps { position:absolute; left:9px; bottom:8px; z-index:2; font-size:11.5px; font-weight:650; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.home-01__drama-score { color:var(--accent); font-weight:700; flex-shrink:0; }
.home-01__grid--portrait .home-01__play { z-index:3; background:transparent; }
.home-01__grid--portrait .home-01__play > span { transform:scale(.85); }
.home-01__grid--portrait .home-01__card-link:hover .home-01__play > span,.home-01__grid--portrait .home-01__card-link:focus-visible .home-01__play > span { transform:scale(1); }
.home-01__empty { margin:0; padding:34px 16px; text-align:center; font-size:14px; color:var(--text-faint); border:1px dashed var(--line-strong); border-radius:var(--radius); }
.home-01__card--ad .home-01__card-link { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:0; }
.home-01__card--ad .home-01__cover { border-radius:0; }
.home-01__card--ad .home-01__cover::after { display:none; }
.home-01__ad-foot { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.home-01__ad-logo { flex-shrink:0; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--brand),#38d0ff); color:#fff; font-size:15px; font-weight:800; }
.home-01__ad-text { flex:1; min-width:0; }
.home-01__card--ad .home-01__ad-title { display:block; margin:0; font-size:14px; font-weight:650; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-01__ad-text p { margin:2px 0 0; font-size:12px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-01__ad-cta { flex-shrink:0; padding:6px 12px; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--brand),#1c7ef0); font-size:12px; font-weight:700; }
.home-01__grid--portrait .home-01__card--ad { border:0; }
.home-01__grid--portrait .home-01__card--ad .home-01__card-link { padding:0; }
.home-01__grid--portrait .home-01__ad-foot { gap:8px; padding:9px 10px; }
.home-01__grid--portrait .home-01__ad-logo { width:28px; height:28px; border-radius:8px; font-size:13px; }
.home-01__grid--portrait .home-01__ad-cta { display:none; }
@media (max-width:719px) { .home-01__ad-cta { display:none; } }
@media (max-width:1099px) {
.home-01__bloggers { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-right:calc(-1 * clamp(12px,3vw,28px)); padding-right:clamp(12px,3vw,28px); gap:12px; }
.home-01__bloggers::-webkit-scrollbar { display:none; }
.home-01__bloggers > li { flex:0 0 108px; scroll-snap-align:start; }
.home-01__avatar { width:52px; height:52px; font-size:21px; }
}
@media (max-width:1199px) and (min-width:560px) {
.home-01__grid--portrait { grid-template-columns:repeat(4,minmax(0,1fr)); }
.home-01__grid--portrait > :nth-child(n+9) { display:none; }
}
@media (max-width:899px) { .home-01__grid:not(.home-01__grid--portrait) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:759px) {
.home-01__slide-link { display:block; }
.home-01__hero-body { padding:16px 16px 42px; min-height:206px; background:rgba(9,9,13,.34); backdrop-filter:blur(14px) saturate(140%); }
.home-01__hero-body h3 { font-size:20px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.home-01__summary { -webkit-line-clamp:2; }
.home-01 .home-01__slider-nav { display:none; }
.home-01__dots { left:0; right:0; justify-content:center; bottom:14px; }
}
@media (max-width:719px) { .home-01__head > span { display:none; } .home-01__grid:not(.home-01__grid--portrait) { gap:10px; } }
@media (max-width:559px) { .home-01__grid--portrait { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { .home-01 *,.home-01 *::after { transition:none; } .home-01__hero-cover img { animation:none; } }

.home-01__badge--time { top:auto; bottom:7px; font-variant-numeric:tabular-nums; }