.incident-log { max-inline-size: var(--content-width); margin-inline: auto; padding: var(--section-space-s) var(--site-padding); }
.incident-log__intro { text-align: center; margin-block-end: var(--space-l); }
.incident-log__heading { display: flex; align-items: center; justify-content: center; gap: var(--space-m); & h1 { font-size: clamp(var(--h2), 9vw, calc(var(--h1) * 1.7)); margin: 0; } }
.incident-log__stamp { font-family: var(--font-heading); color: var(--accent); border: var(--border-strong); border-color: var(--accent); padding: var(--space-xs); rotate: -10deg; font-size: var(--h4); }
.incident-log__tagline { font-family: Georgia, serif; font-size: var(--text-xxl); font-style: italic; margin-block: var(--space-s); &::after { content: ''; display: block; inline-size: var(--section-space-m); border-block-end: var(--border-strong); border-color: var(--accent); margin: var(--space-m) auto; } }
.incident-log__lead { max-inline-size: var(--content-width-inset); margin-inline: auto; }
.incident-log__filters { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-s); & button { text-transform: uppercase; } }
.incident-log__count { font-size: var(--text-s); color: var(--primary); margin-block: var(--space-m); }
.incident-log__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-m); }
.incident-card { border: var(--border); border-color: var(--primary); border-radius: var(--radius-m); overflow: clip; background: var(--neutral); display: flex; flex-direction: column; }
.incident-card__photo { display: block; position: relative; aspect-ratio: 1.3; overflow: hidden; & img, & svg { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } }
.incident-card__pending { display: grid; place-content: center; block-size: 100%; text-align: center; background: var(--primary-10); color: var(--primary); padding: var(--space-m); }
.incident-card__stamp { position: absolute; inset-inline-end: var(--space-s); inset-block-end: var(--space-s); background: var(--neutral); color: var(--accent); border: var(--border-strong); padding: var(--space-xxs) var(--space-xs); rotate: -7deg; font-family: var(--font-heading); }
.incident-card__copy { padding: var(--space-s); display: flex; flex-direction: column; flex: 1; & h2 { font-size: var(--h3); text-transform: uppercase; margin-block: var(--space-xs); & a { color: var(--base); text-decoration: none; } &::after { content: ''; display: block; inline-size: var(--section-space-xs); border-block-end: var(--border-strong); border-color: var(--accent); margin-block-start: var(--space-xs); } } }
.incident-card__meta { font-family: var(--font-heading); font-size: var(--text-s); color: var(--primary); margin: 0; }
.incident-card__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-block: var(--space-xs) var(--space-s); }
.incident-card__suspects { font-family: var(--font-heading); color: var(--primary); font-size: var(--text-s); text-transform: uppercase; margin-block: var(--space-xs); }
.incident-card__read { color: var(--accent); font-family: var(--font-heading); font-size: var(--text-m); margin-block-start: auto; padding-block-start: var(--space-xs); text-decoration: none; }
.incident-log__more { text-align: center; margin-block: var(--space-l); &[hidden] { display: none; } & button { font-size: var(--h4); } }
.incident-log__closing { text-align: center; border-block-start: var(--border-strong); border-color: var(--primary); padding-block-start: var(--space-s); margin-block-start: var(--space-l); font-family: var(--font-heading); color: var(--primary); }
.incident-log__empty { text-align: center; padding: var(--space-l); &[hidden] { display: none; } }
.incident-story { max-inline-size: var(--content-width); margin-inline: auto; padding: var(--section-space-s) var(--site-padding); }
.incident-story__back { color: var(--accent); font-family: var(--font-heading); }
.incident-story__header { max-inline-size: var(--content-width-inset); margin: var(--space-l) auto; text-align: center; & h1 { font-size: clamp(var(--h2),7vw,var(--h1)); text-transform: uppercase; margin-block: var(--space-s); } }
.incident-story__meta { font-family: var(--font-heading); color: var(--primary); }
.incident-story__lead { font-family: Georgia,serif; font-size: var(--text-xl); font-style: italic; }
.incident-story__hero { margin: var(--space-l) 0; & img, & svg { display: block; inline-size: 100%; max-block-size: calc(var(--content-width) / 2); object-fit: cover; } & figcaption { padding-block: var(--space-xs); } }
.incident-story__body { max-inline-size: var(--content-width-inset); margin-inline: auto; font-family: Georgia,serif; font-size: var(--text-l); & p { margin-block: var(--space-m); } }
.incident-story__evidence { margin-block: var(--space-xl); }
.incident-story__photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-m); & figure { margin: 0; } & img, & video { display: block; inline-size: 100%; block-size: auto; } & figcaption { padding-block: var(--space-xs); } }
.incident-story__related { margin-block-start: var(--space-xl); }
@media (max-width: 900px) { .incident-log__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .incident-log__stamp { font-size: var(--text-m); } }
@media (max-width: 580px) { .incident-log__grid { grid-template-columns: minmax(0,1fr); } .incident-log__heading { flex-direction: column; } .incident-log__stamp { margin-block: var(--space-xs); } .incident-log__tagline { font-size: var(--text-l); } .incident-log__filters { justify-content: flex-start; gap: var(--space-xs); } .incident-story__photos { grid-template-columns: minmax(0,1fr); } }