/*
  chronicles-art.css
  BlastVector Website

  Created by HELM Coders LLC on 2026-10-27 (Central).
  Purpose: Styles for approved Chronicles artwork, served at /chronicles-art/ in every build (copied into public/ by
           tools/build.py). Extends site.css.
           Every approved illustration shows its whole frame at its own aspect ratio (--ratio, height ÷ width, set on
           the figure by the build): never cover-cropped, capped to the viewport and letterboxed on very wide screens,
           with soft fades into the page and no text over the art.
  Change log:
   2026-10-27 — Chronicles Art Integration 001: chapter hero "plate" with the title block beneath the art.
   2026-10-27 — Chronicles Volume I Art Integration 002: --ratio instead of a fixed ratio; full-frame inline scenes
                (desktop, mobile, ultrawide); volume landing plate; illustrated contents rows; series card with the
                art above its text.
   2026-10-27 — Chronicles Volume I Final Polish: modest long-form reading refinements (measure, leading, paragraph
                rhythm, balanced/pretty wrapping, tighter title-to-text and scene spacing) and the landing introduction.
                Review-only like the rest of this file; fold into site.css when Chronicles are cleared for release.
   2026-10-27 — Chronicles Volume I Final Corrections: on Chronicles pages the sticky header is fully opaque (no story
                text showing through the translucent, blurred bar) and sits above the reading progress bar and all
                content; anchor targets scroll to just below the header (one-row header ≥641 px, two-row below).
   2026-10-31 — Launch preparation: served at /chronicles-art/ in the website build (header text only).
*/

/* ---- hero plates: chapter pages and the volume landing */
.ch-hero.has-plate, .vol-hero.has-plate { display: block; min-height: 0; overflow: visible; background: var(--bg); }
/* explicit height (not aspect-ratio + max-height, which the image's intrinsic size can push past the viewport cap) */
:is(.ch-hero, .vol-hero).has-plate > .scene-hero.is-plate { position: relative; inset: auto; z-index: 0; width: 100%; min-height: 0; overflow: hidden; margin: 0;
  height: min(calc(100vw * var(--ratio, .5628)), calc(100vh - 58px)); height: min(calc(100vw * var(--ratio, .5628)), calc(100svh - 58px));
  background: var(--p1); }
:is(.ch-hero, .vol-hero).has-plate > .scene-hero.is-plate picture { display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%); }
:is(.ch-hero, .vol-hero).has-plate > .scene-hero.is-plate img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.ch-hero.has-plate .ch-hero-shade { display: none; }
.ch-hero.has-plate .ch-hero-text { padding-top: clamp(26px, 4.5vw, 56px); padding-bottom: clamp(60px, 8vh, 92px); }
.ch-hero.has-plate h1 { text-shadow: none; }
.vol-hero.has-plate .vol-hero-text { padding-top: clamp(26px, 4.5vw, 56px); }

/* ---- inline scenes inside the prose: full width, full frame, soft top/bottom fades */
.prose .scene.has-art.is-final { aspect-ratio: auto; max-height: none; background: transparent;
  height: min(calc(100vw * var(--ratio, .5628)), 92vh); height: min(calc(100vw * var(--ratio, .5628)), 92svh); }
.prose .scene.has-art.is-final picture {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.prose .scene.has-art.is-final img { object-fit: contain; object-position: 50% 50%; }
.prose .scene.has-art.is-final { margin-top: 2.4em; margin-bottom: 2.4em; }

/* ---- volume contents: each chapter's art, whole frame */
.toc-row.has-art a { grid-template-columns: clamp(150px, 20vw, 280px) auto 1fr auto; }
.toc-art { display: block; border: 1px solid var(--line); background: var(--p1); }
.toc-art picture, .toc-art img { display: block; width: 100%; height: auto; }
.toc-row.has-art a:hover .toc-art, .toc-row.has-art a:focus-visible .toc-art { border-color: var(--p2); }

/* ---- series index card: art above the text, uncropped */
.vol-card a.has-plate { display: block; min-height: 0; }
.vol-card a.has-plate::before { display: none; }
.vol-card a.has-plate .scene-hero { position: relative; inset: auto; z-index: 0; }
.vol-card a.has-plate .scene-hero picture, .vol-card a.has-plate .scene-hero img { display: block; width: 100%; height: auto; object-fit: initial; }
.vol-card a.has-plate .vol-card-text { max-width: none; background: var(--bg-2); }

@media (max-width: 700px) {
  .prose .scene.has-art.is-final { margin-top: 1.8em; margin-bottom: 1.8em; }
  .toc-row.has-art a { grid-template-columns: auto 1fr; }
  .toc-row.has-art .toc-art { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.ch-hero, .vol-hero).has-plate > .scene-hero.is-plate img { animation: plate-in 1.4s ease-out both; }
}
@keyframes plate-in { from { opacity: 0; } }

/* ---- long-form reading refinements (Final Polish): measure, leading and rhythm */
.chronicles .prose { max-width: 33em; line-height: 1.72; text-wrap: pretty; }
.chronicles .prose p { margin-bottom: 1.05em; }
.chronicles .prose .lede { margin-bottom: 1.2em; }
.chronicles .prose .b-system { margin: 1.7em 0; }
.chronicles .prose .b-inscription { margin: 1.9em 0; }
.chronicles .reader { padding-top: clamp(22px, 4vw, 52px); }
.ch-hero.has-plate h1 { text-wrap: balance; }
.chronicles .ch-end { margin-top: 2em; }

/* ---- volume landing introduction */
.vol-intro { max-width: 36em; margin: 0 0 24px; font-family: var(--serif); font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
  line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.vol-hero.has-plate h1 { margin-bottom: 18px; }

@media (max-width: 700px) {
  .chronicles .prose { font-size: 1.08rem; line-height: 1.68; }
  .chronicles .prose p { margin-bottom: 1em; }
  .ch-hero.has-plate .ch-hero-text { padding-bottom: 84px; }
  .vol-intro { margin-bottom: 20px; }
}

/* ---- sticky header on reading pages (Final Corrections): opaque bar, correct stacking, anchor offset */
body.chronicles .site-header { background: #020409; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 70; isolation: isolate; }
body.chronicles .reader-progress { z-index: 71; }
html:has(> body.chronicles) { scroll-padding-top: 76px; }          /* 59 px header + breathing room */
@media (max-width: 640px) { html:has(> body.chronicles) { scroll-padding-top: 100px; } }   /* 85 px two-row header */