/* Approved static waterfront artwork; preserve the existing layout measurements. */
.smf-home-page .hero { background: #101a21; }
.smf-home-page .hero .yoshi-stage { inset: 0; width: 100%; overflow: hidden; }
.smf-home-page .hero .yoshi-hero { inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 74% 50%; transform: none; }
.smf-home-page .hero-art { background-image: linear-gradient(90deg, #101a21 0%, #101a21 43%, #101a21ed 47%, #101a2177 60%, #101a2100 74%), linear-gradient(0deg, #101a21dd 0%, #101a2100 21%); background-size: 100% 100%; background-repeat: no-repeat; }
/* Remove only the background scrim behind the existing lettering. */
.smf-home-page .hero h1::before { display: none; }
/* One continuous artwork surface, with no separate header-shaped wash. */
@media (min-width: 801px) {
  body:has(.smf-home-page) .site-header { background: transparent; }
  body:has(.smf-home-page) .site-header::after { display: none; }
}
:root[data-theme="light"] .smf-home-page .hero { background: #f2f5f5; }
/* Align the light blend to the photograph itself. It ends before the arm,
   keeping the subject and surrounding sky in the same continuous image. */
:root[data-theme="light"] .smf-home-page .hero-art { background-image: url('assets/photos/smf-light-photo-blend-20261025.svg'); background-size: cover; background-position: 74% 50%; }
@media (min-width: 801px) {
 :root[data-theme="light"] .smf-home-page .yoshi-arm-detail { display: none; }
}
@media (min-width: 1101px) {
 :root[data-theme="light"] .smf-home-page .home-proof { text-shadow: 0 1px 2px #fff, 0 0 3px #fff; }
 :root[data-theme="light"] .smf-home-page .proof-detail { color: #18272f; }
}
@media (min-width: 901px) {
 :root[data-theme="light"] body:has(.smf-home-page) .site-header .brand-logo { filter: brightness(.55); }
}
@media (max-width: 900px) {
 :root[data-theme="light"] body:has(.smf-home-page) .site-header { background: #000000f5; }
}
.smf-home-page .mission-strip {
  background-image: linear-gradient(#001018d9, #001018e6), url('assets/photos/smf-lakefront-bench-20261022-1200.webp');
}
:root[data-theme="light"] .smf-home-page .mission-strip {
  background-image: linear-gradient(#f2f5f5e8, #e6f1f3f2), url('assets/photos/smf-lakefront-bench-20261022-1200.webp');
}
@media (max-width: 800px) {
 .smf-home-page .hero .yoshi-hero { height: min(110vw, 500px); object-position: 84% 50%; }
 .smf-home-page .hero-art { background-image: linear-gradient(180deg, #101a2100 30vw, #101a214d 44vw, #101a21eb 61vw, #101a21 71vw); }
 :root[data-theme="light"] .smf-home-page .hero-art { background-image: linear-gradient(180deg, #f2f5f500 30vw, #f2f5f54d 44vw, #f2f5f5eb 61vw, #f2f5f5 71vw); background-size: 100% 100%; background-position: 0 0; }

 /* Give the label a stable contrast surface over every photo crop. */
 .smf-home-page .hero-eyebrow {
  padding: 3px 8px;
  border-radius: 4px;
  background: #101a21;
  color: #8bf5f3;
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 1.2;
  letter-spacing: .09em;
 }
 :root[data-theme="light"] .smf-home-page .hero-eyebrow {
  background: #f2f5f5;
 }
}

/* Original arm pixels above the blend, without changing the artwork crop. */
.smf-home-page .hero .yoshi-arm-detail {
 position: absolute; z-index: 2; inset: 0; width: 100%; pointer-events: none;
 background: url('assets/photos/smf-turquoise-waterfront-20261025-1672.webp') 74% 50% / cover no-repeat;
 mask-image: url('assets/photos/smf-arm-detail-mask-20261025.svg'); mask-mode: luminance; mask-size: cover; mask-position: 74% 50%; mask-repeat: no-repeat;
}
@media (max-width: 800px) {
 .smf-home-page .hero .yoshi-arm-detail { height: min(110vw, 500px); background-position: 84% 50%; mask-position: 84% 50%; }
}

/* Keep photo-backed proof text readable in narrow desktop crops. */
@media (min-width: 801px) and (max-width: 1100px) {
 :root[data-theme="light"] .smf-home-page .home-proof { color: #f4f7f7; text-shadow: 0 1px 3px #06191f, 0 0 2px #06191f; }
 :root[data-theme="light"] .smf-home-page .proof-detail { color: #f4f7f7; }
 :root[data-theme="light"] .smf-home-page .hero-description { color: #18272f; text-shadow: 0 1px 2px #fff, 0 0 2px #fff; }
}