/* ============================================================ Athletic Story — scoped refinements Linked AFTER styles.css. Scoped via .story-page on . ============================================================ */ /* ---- 1. Hero band → hero text continuity ------------------ */ /* Pull the headline section up under the band so the photo and the title read as one editorial spread, not two stacked marketing blocks. */ .story-page .hero-band { /* keep tone; tweak crop slightly to favor horizon line */ } .story-page .hero-band + .hero--light { margin-top: clamp(-72px, -8vw, -48px); position: relative; z-index: 2; padding-top: clamp(2.5rem, 6vw, 4rem); background: linear-gradient( to bottom, rgba(245, 243, 238, 0) 0%, var(--bone) 28%, var(--bone) 100% ); } .story-page .hero--light .hero__title { font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.022em; line-height: 1.04; font-weight: 400; max-width: 22ch; } .story-page .hero--light .hero__lead { font-family: var(--serif); font-weight: 300; font-style: normal; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.55; max-width: 46ch; color: var(--text); } /* ---- 2. Chapter eyebrow numerals --------------------------- */ /* Prefix each story chapter eyebrow with a leading-zero numeral so the page reads like a long-form essay with sections, not a stack of generic "section" blocks. */ .story-page .story-text .eyebrow, .story-page .story-band__caption .eyebrow { display: inline-flex; align-items: baseline; gap: 0.65rem; } .story-page .story-text .eyebrow::before, .story-page .story-band__caption .eyebrow::before { font-family: var(--ff-mono); font-weight: 500; letter-spacing: 0.08em; color: var(--oxblood); font-size: 0.82em; /* Per-section content set below */ } /* Chapter counters — visual aid; set on each section in HTML via a data-attr. We hardcode numerals here for clarity. */ .story-page .ch-01 .eyebrow::before { content: "I."; } .story-page .ch-02 .eyebrow::before { content: "II."; } .story-page .ch-03 .eyebrow::before { content: "III."; } .story-page .ch-04 .eyebrow::before { content: "IV."; } .story-page .ch-05 .eyebrow::before { content: "V."; } .story-page .ch-06 .eyebrow::before { content: "VI."; } /* ---- 3. Drop cap on opening narrative ---------------------- */ .story-page .story-text--open p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.4em; font-weight: 400; font-style: normal; float: left; line-height: 0.86; margin: 0.06em 0.12em 0 -0.04em; color: var(--oxblood); } /* Slightly lift the first paragraph after a chapter heading */ .story-page .story-text > p:first-of-type { font-size: 1.08rem; } /* ---- 4. Body rhythm — tighter line length, larger leading -- */ .story-page .story-text p { font-size: 1.05rem; line-height: 1.78; max-width: 54ch; color: var(--text-2); } .story-page .story-text p + p { margin-top: 1.1rem; } .story-page .story-text__title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; margin-top: 1.25rem; margin-bottom: 1.5rem; max-width: 18ch; } /* ---- 5. "What happened" / "What it means" — dichotomy spread */ /* Replace card-y feel with editorial chapter spread: left column = serif narrative, right column = mono takeaways. */ .story-page .reckoning-section .split { align-items: start; gap: clamp(3rem, 6vw, 5rem); } .story-page .reckoning-narrative, .story-page .reckoning-takeaways { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; transition: none; } .story-page .reckoning-narrative:hover, .story-page .reckoning-takeaways:hover { transform: none; box-shadow: none; } .story-page .reckoning-narrative h3, .story-page .reckoning-takeaways h3 { font-family: var(--ff-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--stone); font-weight: 500; margin: 0 0 1.25rem 0; display: flex; align-items: center; gap: 0.75rem; } .story-page .reckoning-narrative h3::before, .story-page .reckoning-takeaways h3::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--oxblood); } .story-page .reckoning-narrative p { font-family: var(--serif); font-size: 1.08rem; font-weight: 300; line-height: 1.7; color: var(--ink); max-width: 52ch; } .story-page .reckoning-narrative p + p { margin-top: 1.1rem; } .story-page .reckoning-narrative p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.2em; font-weight: 400; float: left; line-height: 0.85; margin: 0.06em 0.12em 0 -0.04em; color: var(--oxblood); } /* Takeaways: editorial numbered rows, not a checklist of card bullets */ .story-page .reckoning-takeaways .check-list { list-style: none; padding: 0; margin: 0; counter-reset: take; } .story-page .reckoning-takeaways .check-list li { display: grid; grid-template-columns: 32px 1fr; column-gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--whisper); font-family: var(--serif); font-size: 1.05rem; font-weight: 400; line-height: 1.5; color: var(--ink); padding-left: 0; } .story-page .reckoning-takeaways .check-list li::before { content: counter(take, decimal-leading-zero); counter-increment: take; position: static; width: auto; height: auto; background: none; border-radius: 0; display: inline-block; font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; color: var(--oxblood); margin: 0; top: auto; left: auto; } .story-page .reckoning-takeaways .check-list li:first-child { border-top: 1px solid var(--whisper); } /* ---- 6. Pull-quote — quiet editorial moment --------------- */ .story-page .story-pullquote { max-width: 720px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 0 var(--gutter); text-align: left; } .story-page .story-pullquote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 300; font-style: italic; line-height: 1.32; color: var(--ink); letter-spacing: -0.005em; position: relative; padding-left: clamp(1rem, 2vw, 1.5rem); border-left: 1px solid var(--oxblood); } .story-page .story-pullquote cite { display: block; margin-top: 1rem; padding-left: clamp(1rem, 2vw, 1.5rem); font-family: var(--ff-mono); font-style: normal; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--stone); } /* ---- 7. Margin notes — refine the recovery section -------- */ .story-page .editorial-grid__margin { position: relative; } .story-page .editorial-grid__margin::before { content: ""; display: block; width: 22px; height: 1px; background: var(--oxblood); margin-bottom: 1rem; opacity: 0.7; } /* ---- 8. Closing rest before the spread -------------------- */ /* A small breathing pause between the final story-band and the closing-spread to give the reader a chapter-end rest. */ .story-page .story-band + .closing-spread { padding-top: clamp(7rem, 13vw, 13rem); } /* ---- 9. Eyebrow polish for hero section ------------------- */ .story-page .hero--light .eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; } .story-page .hero--light .eyebrow::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--oxblood); } /* ---- 10. Reduced motion safe --------------------------- */ @media (prefers-reduced-motion: reduce) { .story-page .hero-band + .hero--light { margin-top: 0; } } /* Finish-line band (STO-007): shift the crop toward the top of the source so the image content sits lower in the frame — more sky/upper body visible, subject anchored toward the bottom of the band. */ .story-page .story-band__media > img[data-slot="STO-007"] { object-position: center 15%; } /* ---- 11. Responsive ---------------------------------------- */ @media (max-width: 860px) { .story-page .hero-band + .hero--light { margin-top: 0; background: var(--bone); } .story-page .reckoning-narrative p:first-of-type::first-letter, .story-page .story-text--open p:first-of-type::first-letter { font-size: 2.6em; } }