/* Website-level CSS for migrated pages. Not Sapphire: these are
   page-specific patterns the mapping (context/PHASE-2-MAPPING.md)
   confirmed stay outside the design system, plus the poster-card grid
   decision 8 keeps page-specific. Loaded alongside /assets/ksf.css,
   never instead of it. */

/* Scroll-progress thread. Structurally unchanged from the pre-migration
   site; recoloured to Brass through the Sapphire token per decision 14
   ("the default candidate is website-level chrome using a Sapphire
   token"), replacing both the old Oxide fill and Copper leading dot,
   since Sapphire has no Copper token and decision 14 asks for one
   resulting colour, not two. The track keeps a neutral tint (Walnut,
   not Evergreen) rather than reusing the ceremonial ground's own colour
   for a bar that appears on every page. No shadow, no transform, so it
   already fits the flat interaction language (decision 6) unchanged. */
.thread { position: fixed; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: color-mix(in srgb, var(--ksf-ink-primary) 12%, transparent); z-index: 60; pointer-events: none; }
.thread-fill { position: absolute; top: 0; left: 0; right: 0; height: 0%; background: var(--ksf-accent-institution); }
.thread-fill::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--ksf-accent-institution); }
@media (prefers-reduced-motion: reduce) { .thread { display: none; } }

/* Reveal on scroll. Structurally unchanged from the pre-migration site;
   a soft fade plus a small rise, which decision 6 explicitly allows
   ("soft fades and subtle transitions are allowed"), not a translate
   hover on an interactive element, which decision 6 rules out. Already
   respects prefers-reduced-motion. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Chapter poster-card grid (decision 8: page-specific, not a Sapphire
   component). Body from ksf-plate; this file only adds the grid and the
   card's own padding, link reset and hover. Colour-only hover (a
   border-colour shift to Brass), replacing the old shadow-plus-translate
   treatment the mapping (context/PHASE-2-MAPPING.md, section 3)
   explicitly says decision 6 rules out. No radius (ksf-plate is already
   zero-radius); no shadow; no transform. */
.poster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .poster-grid { grid-template-columns: 1fr; } }
.poster-card { display: block; padding: 26px; text-decoration: none; color: inherit; transition: border-color 0.15s linear; }
.poster-card:hover, .poster-card:focus-visible { border-color: var(--ksf-accent-institution); }

/* Voices grid: a plain CSS grid of ksf-testimony, page-level, not a
   dedicated component (Phase 2 mapping, section 3; already anticipated
   in testimony.stories.js's own VoicesGrid demo story, matched here
   exactly). Two columns at 760px and above, one below it, the same
   breakpoint the pre-migration voices.html used for its own .voices
   grid. */
.voices-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .voices-grid { grid-template-columns: 1fr 1fr; } }

/* Three-revolutions strip (legacy.html): page-specific composition,
   decision 12's illustration does not exist yet (decision 40). Three
   flat cells, one emphasised. Colour-only emphasis (a Brass top rule
   and Walnut heading instead of Stone), no shadow, no radius, no
   transform, matching the poster card's own flat hover treatment. */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 26px 0; }
@media (max-width: 640px) { .strip { grid-template-columns: 1fr; } }
.strip-cell { border-top: var(--ksf-size-hairline) solid var(--ksf-rule-hairline); padding-top: 14px; }
.strip-cell__year { font-family: var(--ksf-font-catalogue); font-size: 11px; letter-spacing: 0.14em; color: var(--ksf-ink-secondary); margin: 0; }
.strip-cell__name { font-family: var(--ksf-font-meta); font-size: 15px; font-weight: 600; color: var(--ksf-ink-secondary); margin: 8px 0 0; }
.strip-cell p { font-family: var(--ksf-font-meta); font-size: 13px; line-height: 1.65; color: var(--ksf-ink-secondary); margin: 8px 0 0; }
.strip-cell--emphasis { border-top-color: var(--ksf-accent-institution); border-top-width: 2px; }
.strip-cell--emphasis .strip-cell__name { color: var(--ksf-ink-primary); }