/* Reference interaction layer. Reading/editor surfaces keep their own layout. */
.site-header{background:rgba(17,17,19,.7);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.article-card,.series-card,.chapter-row,.timeline-item,.chronicle-banner{background:rgba(17,17,19,.7);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.series-card{border-radius:16px;transition:transform .3s,border-color .3s,color .2s}
.series-card .cover{height:auto;aspect-ratio:21/9}
.series-card.compact-series{border-radius:12px}
.series-card.compact-series .cover{height:auto;aspect-ratio:auto}
.series-card h3,.chapter-row h3,.timeline-item h3{transition:color .2s}
.series-card .read>.icon,.chapter-row>.icon{transition:transform .25s,color .2s}
.chapter-row,.timeline-item{transition:transform .3s,border-color .3s,color .2s}
.chapter-row .number{color:color-mix(in srgb,var(--primary) 30%,transparent);transition:color .2s}
.chapter-row>.icon{flex-shrink:0;color:var(--muted)}
.timeline-image{opacity:.8;transition:opacity .3s}
.hero-glow{top:0}
.hero-char{transition:transform .35s cubic-bezier(.2,.8,.2,1),color .35s}

/* The art fades into the page vertically; the fixed glass above it blurs on scroll. */
.series-visual{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.series-visual>img{width:100%;height:100%;object-fit:cover;opacity:.25;filter:blur(10px);transform:scale(1.03);transition:filter .65s,transform .65s}
.series-visual>img.image-ready{filter:blur(0);transform:scale(1)}
.series-visual>img.image-error{opacity:0}
.series-shade{position:absolute;inset:0;background:linear-gradient(to top,var(--bg),color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 40%,transparent))}
.series-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(39,39,42,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(39,39,42,.35) 1px,transparent 1px);background-size:48px 48px;opacity:.3;pointer-events:none}
.chapter-entry{scroll-margin-top:112px}
.chapter-map a{transition:color .2s,border-color .2s,background-color .2s}
.chapter-map a[aria-current="location"]{color:var(--primary);border-left-color:var(--primary);background:color-mix(in srgb,var(--primary) 4%,transparent)}
.month{position:sticky;top:96px;z-index:3;pointer-events:none}
.month span{background:rgba(17,17,19,.7);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}

/* Individual translate leaves each card's hover transform independent of its entrance. */
.motion-reveal{opacity:0;translate:var(--reveal-x,0px) var(--reveal-y,24px);transition:opacity var(--reveal-duration,.5s) ease var(--reveal-delay,0s),translate var(--reveal-duration,.5s) cubic-bezier(.2,.65,.3,1) var(--reveal-delay,0s),transform .3s,border-color .3s,color .2s}
.motion-reveal.is-revealed{opacity:1;translate:0 0}
.motion-reveal:focus-visible,.motion-reveal:focus-within{opacity:1;translate:0 0}

@media(hover:hover) and (pointer:fine){
  .series-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--primary) 60%,transparent)}
  .series-card:hover h3,.chapter-row:hover h3,.chapter-row:hover .number,.chapter-row:hover>.icon,.timeline-item:hover h3{color:var(--primary)}
  .series-card:hover .read>.icon,.chapter-row:hover>.icon{transform:translateX(4px)}
  .chapter-row:hover,.timeline-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 60%,transparent);color:var(--fg)}
  .timeline-item:hover .timeline-image{opacity:1}
}
@media(max-width:767px){
  .motion-reveal{--reveal-x:0px!important}
  .month{top:80px}
}
@media(prefers-reduced-motion:reduce){
  .motion-reveal{opacity:1;translate:none;transition:none}
  .series-visual>img{filter:none;transform:none;transition:none}
}