/* Shared layout for the collection. Custom diagrams live in scoped stylesheets. */
.story-collection { --story-space: clamp(3rem, 7vw, 6rem); }
.story-collection .story-title { font-size: clamp(2.8rem, 6.4vw, 5.5rem); font-weight: 700; letter-spacing: -.045em !important; overflow-wrap: anywhere; }
.story-collection .story-hero { padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem) !important; }
.story-collection .story-section { padding-block: var(--story-space) !important; }
.story-collection figure.story-shell { margin-inline: auto; }
.story-collection .story-lede { max-width: 72ch; }
.story-collection .story-meta { font-size: .76rem; padding-bottom: 0; }
.story-collection .story-caption { font-size: .8rem; }
.story-collection .story-section + .story-section { padding-top: 0 !important; }
.story-collection :is(h1, h2, h3) { text-wrap: pretty; }
.story-collection .story-section-heading { font-size: clamp(1.8rem, 3.5vw, 3.2rem); }
.story-collection h3 { margin: 0 0 .75rem; font-size: 1.12rem; line-height: 1.4; }
.story-feature { overflow: hidden; }
.story-feature img { width: 100%; height: auto; max-height: 700px; object-fit: contain; background: var(--pf-surface-soft); border-radius: 6px; }
.story-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.story-split > *, .story-columns > *, .story-gallery > * { min-width: 0; }
.story-split:has(> .story-notes) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.story-split .story-notes > div { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.story-split > .story-process { grid-template-columns: minmax(0, 1fr); }
.story-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; }
.story-notes { margin: 0; }
.story-notes > div { display: grid; grid-template-columns: minmax(8rem, .3fr) minmax(0, 1fr); gap: 1rem 2.5rem; padding-block: 1.5rem; border-top: 1px solid var(--pf-line); }
.story-notes dt { font-weight: 650; line-height: 1.6; }
.story-notes dd { margin: 0; color: var(--pf-muted); line-height: 1.75; }
.story-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.story-process li { padding-block: 1rem; border-top: 2px solid var(--project-accent); min-width: 0; }
.story-process strong { display: block; margin-bottom: .6rem; font-size: 1.05rem; }
.story-process span { display: block; color: var(--pf-muted); line-height: 1.7; }
.story-diagram { padding: clamp(1.4rem, 4vw, 3.5rem); background: color-mix(in srgb, var(--project-accent) 6%, var(--pf-surface-soft)); border-radius: 6px; }
.story-diagram svg { display: block; width: 100%; height: auto; }
.story-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.story-gallery img { width: 100%; height: auto; border-radius: 5px; }
.story-gallery a { display: block; }
.story-collection .story-feature.gallery-card { padding: 0 !important; background: transparent; border: 0; box-shadow: none; }
.story-collection .story-feature.gallery-card img { aspect-ratio: auto; object-fit: contain; }
.story-collection .story-feature.gallery-card figcaption { padding: 0; }
.story-collection .story-feature.gallery-card:is(:hover, :focus-visible) img { transform: none; }
.story-section > :not(.story-section-heading, .story-kicker) + :is(.story-gallery, .story-process, .project-video-frame) { margin-top: 2.5rem; }
.story-code { padding: 1.5rem; margin: 0; background: var(--pf-surface-soft); border-radius: 6px; overflow-x: auto; font-family: var(--project-mono); font-size: .85rem; line-height: 1.8; color: var(--pf-ink); }
.story-collection .project-video-frame { border-radius: 6px; }
.story-collection .story-end { margin-top: 1rem; }
@media (max-width: 960px) {
  .story-split, .story-split:has(> .story-notes) { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 760px) {
  .story-columns { grid-template-columns: minmax(0, 1fr); }
  .story-notes > div { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
}
@media (max-width: 540px) {
  .story-gallery { grid-template-columns: minmax(0, 1fr); }
  .story-collection .story-title { font-size: clamp(2.5rem, 11vw, 3.8rem); }
}