/* Chaptered story features (Repurpose Bowties, Traveling Ground, Tot Friendly
 * Homes, Arrupe Jesuit, Run by students). Builds on hackathon-story.css: each
 * chapter is a <section> in .hackathon-copy, followed by its film and photo. */
.feature-story-page .hackathon-hero h1 { font-size: clamp(2.8rem, 6.2vw, 5.6rem); }
.feature-story-page .hackathon-image-wrap .consent-media { margin: 0 auto; max-width: 900px; }
.feature-story-page .hackathon-image-wrap .consent-media img { height: 100%; width: 100%; }
.feature-story-page .hackathon-image-wrap .hackathon-film-caption { margin: .9rem auto 0; max-width: 900px; }

.fs-chapter { border-top: 1px solid #d9dedb; margin-top: 3.3rem; padding-top: .2rem; }
.fs-chapter:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.fs-chapter h2 { margin-top: 2.6rem; }
.fs-kicker { color: var(--teal); display: block; font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .13em; margin: 2.6rem 0 -.4rem; text-transform: uppercase; }

.fs-figure { margin: 2rem 0 2.2rem; }
.fs-figure img { aspect-ratio: 16 / 10; background: var(--paper); display: block; height: auto; object-fit: cover; width: 100%; }
.fs-figure--square img { aspect-ratio: 1 / 1; }
.fs-figure--tall img { aspect-ratio: 4 / 5; }
.fs-figure figcaption, .hackathon-film-caption { color: #617077; font-size: .79rem; line-height: 1.5; margin-top: .7rem; }

.fs-film { margin: 2rem 0 1.4rem; }
.fs-film .consent-media { background: var(--ink); }
.hackathon-film-caption strong { color: var(--ink); font-weight: 700; }
.hackathon-film-caption a { color: var(--ink); font-weight: 700; }

.fs-stats { border-bottom: 1px solid #d9dedb; border-top: 2px solid var(--gold); display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 3.5rem 0 1rem; padding: 1.6rem 0; }
.fs-stats div { line-height: 1.45; }
.fs-stats strong { color: var(--ink); display: block; font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(2.4rem, 4.4vw, 3.4rem); font-weight: 400; letter-spacing: -.03em; line-height: 1; margin-bottom: .45rem; }
.fs-stats span { color: #4d5f66; display: block; font-size: .86rem; }

.fs-quote { border-left: 4px solid var(--gold); margin: 2.4rem 0; padding: .2rem 0 .2rem 1.5rem; }
.fs-quote p { color: var(--ink); font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.3; margin-bottom: .8rem; }
.fs-quote footer { color: #617077; font-size: .82rem; }

.fs-list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.fs-list li { border-bottom: 1px solid #e3e7e4; padding: .7rem 0 .7rem 1.6rem; position: relative; }
.fs-list li::before { background: var(--gold); content: ""; height: 8px; left: 0; position: absolute; top: 1.42rem; width: 8px; }

.fs-path { counter-reset: fs-path; list-style: none; margin: 1.8rem 0 2rem; padding: 0; }
.fs-path li { border-top: 1px solid #d9dedb; counter-increment: fs-path; display: grid; gap: 1.1rem; grid-template-columns: 3rem 1fr; padding: 1.1rem 0; }
.fs-path li::before { color: var(--teal); content: counter(fs-path, decimal-leading-zero); font-family: 'DM Serif Display', Georgia, serif; font-size: 1.7rem; line-height: 1; }
.fs-path strong { color: var(--ink); }

.fs-profile { align-items: start; background: var(--paper); display: grid; gap: 1.5rem; grid-template-columns: 120px 1fr; margin: 2rem 0; padding: 1.5rem; }
.fs-profile img { aspect-ratio: 1 / 1; border-radius: 50%; display: block; height: auto; object-fit: cover; width: 120px; }
.fs-profile h3 { color: var(--ink); font-family: 'DM Serif Display', Georgia, serif; font-size: 1.7rem; font-weight: 400; line-height: 1.1; margin: 0 0 .35rem; }
.fs-profile p { font-size: .95rem; line-height: 1.65; margin-bottom: .9rem; }
.fs-profile p:last-child { margin-bottom: 0; }
.fs-profile .fs-profile-role { color: #4d5f66; font-size: .84rem; }

.fs-people { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 1.6rem 0 2rem; padding: 0; }
.fs-people li { align-items: center; display: grid; gap: .9rem; grid-template-columns: 56px 1fr; line-height: 1.4; }
.fs-people img { aspect-ratio: 1 / 1; border-radius: 50%; display: block; height: auto; object-fit: cover; width: 56px; }
.fs-people strong { color: var(--ink); display: block; font-size: .95rem; }
.fs-people span { color: #4d5f66; display: block; font-size: .82rem; }
.fs-people strong span { color: inherit; display: inline; font-size: inherit; }
.fs-people a { color: inherit; text-decoration: none; }
.fs-people a:hover strong, .fs-people a:focus-visible strong { color: var(--teal); }
.fs-people--lead li { grid-template-columns: 88px 1fr; }
.fs-people--lead img { width: 88px; }

.fs-reels { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 1.6rem 0 2rem; padding: 0; }
.fs-reels a { color: var(--ink); display: block; font-size: .82rem; font-weight: 600; line-height: 1.4; text-decoration: none; }
.fs-reels img { aspect-ratio: 9 / 16; display: block; height: auto; margin-bottom: .6rem; object-fit: cover; width: 100%; }
.fs-reels a:hover, .fs-reels a:focus-visible { color: var(--teal); }

.fs-note { background: var(--ink); color: rgba(255,255,255,.86); margin: 2.4rem 0 0; padding: 1.5rem; }
.fs-note p { font-size: .98rem; margin: 0; }
.fs-note strong { color: var(--gold); display: block; font-size: .7rem; letter-spacing: .13em; margin-bottom: .45rem; text-transform: uppercase; }

.story-source ul { list-style: none; margin: 0; padding: 0; }
.story-source li + li { margin-top: .7rem; }

@media (max-width: 760px) {
    .fs-reels { gap: .6rem; }
    .fs-reels a { font-size: .74rem; }
    .fs-people { grid-template-columns: 1fr; }
    .fs-profile { grid-template-columns: 1fr; }
    .fs-path li { grid-template-columns: 2.4rem 1fr; }
}