/* About typography and gallery. */
.about-page .inner-hero { max-width: 960px; padding: 120px 24px 70px; box-sizing: border-box; }
.about-page .hero-text-container { width: 100%; }
.about-page h1 { font: 600 clamp(2.3rem,6vw,4.8rem)/1.12 'Orbitron',sans-serif; margin: 18px 0 30px; overflow-wrap: anywhere; }
.about-page p.text { font: 400 clamp(1rem,1.5vw,1.16rem)/1.75 'Space Grotesk',sans-serif; max-width: 800px; }
.about-page p.s7g-about-lead { font-size: clamp(1.2rem,2vw,1.6rem); line-height: 1.5; }
p.s7g-about-eyebrow { font: 400 .78rem/1.6 'Aldrich',sans-serif; letter-spacing: .16em; color: #f2f1ec; }
.s7g-about-gallery { display: block; padding: clamp(60px,8vw,110px) 0; background: transparent; color: #f2f1ec; }
.s7g-about-gallery > .s7g-about-gallery-shell { display: block; width: min(1180px,calc(100% - 40px)); max-width: none; margin: 0 auto; }
.s7g-about-gallery h2 { font: 500 clamp(2rem,5vw,3.7rem)/1.15 'Orbitron',sans-serif; margin: 16px 0 22px; color: #f2f1ec; }
.s7g-about-gallery-intro { max-width: 660px; font: 400 1.08rem/1.7 'Space Grotesk',sans-serif; margin-bottom: 36px; }
.s7g-about-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.s7g-about-photo { margin: 0 0 24px; break-inside: avoid; background: transparent; border-bottom: 1px solid #f808d8; }
.s7g-about-photo a { display: block; }
.s7g-about-photo a:focus-visible { outline: 3px solid #f808d8; outline-offset: 4px; }
.s7g-about-photo img { display: block; width: 100%; height: auto; }
.s7g-about-photo figcaption { padding: 16px 18px; font: 400 .95rem/1.5 'Space Grotesk',sans-serif; color: #f2f1ec; }
@media (max-width: 640px) {
 .s7g-about-photo-grid { grid-template-columns: minmax(0, 1fr); }
 .about-page .inner-hero { padding: 100px 20px 45px; }
}

/* One fixed image for the entire page, with a uniform veil for readable text. */
.s7g-about-page { position: relative; isolation: isolate; color: #f2f1ec; }
.s7g-about-page::before {
 content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
 background: linear-gradient(rgba(7,8,10,.55),rgba(7,8,10,.55)), url('../images/about-gallery/background.jpg') center center / cover no-repeat;
}
.s7g-about-page > section { background: transparent !important; mix-blend-mode: normal; }
.s7g-about-page > section::before, .s7g-about-page > section::after { background: none !important; }
.s7g-about-page .s7g-about-gallery-intro,
.s7g-about-page .s7g-about-photo figcaption { text-shadow: 0 2px 4px rgba(0,0,0,.8); }

/* Restore the original viewport sections inside the About wrapper. */
.s7g-about-page > .hero,
.s7g-about-page > #news {
 scroll-snap-align: start;
 padding-top: 65px;
 min-height: calc(100vh - 65px);
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: stretch;
}
.s7g-about-page > .hero > div,
.s7g-about-page > #news > div {
 margin: auto;
 position: relative;
 max-width: 1140px;
 width: calc(100% - 48px);
 box-sizing: border-box;
}
.s7g-about-page > .about-page > .inner-hero { max-width: 960px; }
.about-page .hero-text-container { text-align: left; max-width: 800px; margin-inline: auto; }
.about-page p.text { margin-left: 0; margin-right: 0; }
.s7g-about-page > #contact { min-height: calc(100vh - 110px); }
.s7g-about-page > #contact > .inner-hero { max-width: 750px; }
.s7g-about-page > section:has(+ .learn-more) > div { padding-bottom: 38px; }
.s7g-about-photo { min-width: 0; margin: 0; }
.s7g-about-photo img { background: transparent; }
@media (max-width: 640px) {
 .s7g-about-page > .hero > div,
 .s7g-about-page > #news > div { width: calc(100% - 32px); }
 .s7g-about-page > .about-page > .inner-hero { width: 100%; }
}

.s7g-about-photo-stack { display: grid; gap: 24px; min-width: 0; }