/* ===================================================================
   10.06.2026 updates (from "10.06.2026 Website Edits.pdf", pages 1–8)
   Loaded after styles.css by index-10.06.2026.html only.
   =================================================================== */

/* p1 — Header: star, note and butterfly all the same size and jade */
.site-header .wordmark { gap: 8px; }
.site-header .wordmark-mark { color: var(--primary); }
.wordmark-note { transform: none; margin-left: 0; font-size: 22px; font-weight: 600; }
svg.wordmark-butterfly { display: block; flex: none; width: 21px; height: 21px; fill: currentColor; stroke: currentColor; }
.site-header svg.wordmark-butterfly { color: var(--primary); }

/* p8 — Footer wordmark gets the same icons (white on the jade footer) */
.footer-wordmark { gap: 8px; }
.footer-wordmark .wordmark-note { font-size: 21px; }
.footer-wordmark svg.wordmark-butterfly { width: 20px; height: 20px; color: #fff; }

/* Anchor links land below the sticky header */
section[id] { scroll-margin-top: 72px; }

/* p1 — Hero frame fits snug to the photo like a real picture frame.
   The ornate frame sits on top; the photo runs just under its inner edge. */
.frame-hero {
  --frame: 42px;
  position: relative;
  border: 0;
  border-image: none;
  padding: calc(var(--frame) * .53);
}
.frame-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border: var(--frame) solid transparent;
  border-image: url("../images/frame-hero.webp") 15% round;
}
.frame-hero .hero-card { min-height: 560px; }

/* p1 — Soft blur at the bottom of the photo behind the quote (replaces the gray band) */
.photo-blur {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  pointer-events: none;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  background: linear-gradient(to bottom, rgba(250,249,245,0), rgba(250,249,245,.28));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
}
.hero-card-photo .card-quote {
  z-index: 4;
  padding: 10px 16px 14px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.hero-card-photo .card-quote span { color: rgba(255,255,255,.88); }

/* p2 — Meet Bella frame fits snug to the photo (same method as the hero) */
.frame-about {
  position: relative;
  border: 0;
  border-image: none;
  padding: 15px 24px 26px;
}
.frame-about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 30px solid transparent;
  border-image: url("../images/frame-about.webp") 14% round;
}
.frame-about img { position: relative; z-index: 1; display: block; }

/* p3 — Singer gallery in two columns, Spotify player under the right-hand photos */
.gallery-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.gallery-col { display: grid; gap: 14px; }
.gallery-col img { width: 100%; border-radius: var(--radius-lg); }
.spotify-player iframe { display: block; width: 100%; border: 0; }

/* p4 — Lyrics: fixed left / right order */
.lyric-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.lyric-col .lyric { margin-bottom: 18px; }

/* p6 — Schedule: performer names, set times, wider "coming soon" row */
.schedule-sub span { font-size: .72em; color: var(--on-dark-soft); }
.schedule-list li { grid-template-columns: 58px 1fr auto; }
.show-time { color: #a9cfa9; font-size: 13px; font-weight: 600; white-space: nowrap; text-align: right; }
.schedule-list li.show-tbd { grid-template-columns: 1fr; }
.show-tbd .show-info strong { white-space: nowrap; }

@media (max-width: 800px) {
  .gallery-cols, .lyric-cols { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wordmark-note { font-size: 19px; }
  .site-header svg.wordmark-butterfly { width: 18px; height: 18px; }
  .frame-hero { --frame: 28px; }
  .frame-hero .hero-card { min-height: 430px; }
  .schedule-list li { grid-template-columns: 58px 1fr; }
  .show-time { grid-column: 2; text-align: left; }
}
.lyric-grid.lyric-cols { columns: auto; }