/* =========================================================
   Femme Rising — warm / pink cosmos palette override
   Apply via body.femme-rising. Scoped layout tweaks also live here.
   ========================================================= */

/* Readability: any text that sits OUTSIDE a glass container on FR (section heads,
   loose labels) gets a soft dark text-shadow so bright nebula peaks can't wash it out. */
body.femme-rising .fr-section__head,
body.femme-rising .mono-label,
body.femme-rising .display {
  text-shadow: 0 2px 14px rgba(26, 8, 32, 0.85), 0 0 8px rgba(26, 8, 32, 0.5);
}

/* FR pages swap the MD wordmark for the Femme Rising logo in the nav.
   FR logo is 1:1 (circular moon motif) — sized so its visual presence matches the
   new, bigger MD wordmark width (340px → ~152px effective visual mass at 1:1). */
body.femme-rising .wordmark__mark {
  background-image: url('../img/femme-rising/fr-logo.webp');
  /* The MD restructure moved background-size/repeat/position off .wordmark__mark
     (to its ::after pseudo, which carries the MD letters). FR displays the logo
     directly on .wordmark__mark, so we need to re-declare these here. */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 1 / 1;
  width: 215px;
}
body.femme-rising .wordmark__mark::before,
body.femme-rising .wordmark__mark::after {
  /* FR page has its own logo image on .wordmark__mark itself — hide both the
     MD neon-triangles (::before) AND the MD letters (::after) that ride on
     top of MD pages. */
  display: none;
  background-image: none;
}
/* Default: the FR logo radiates a persistent pink neon glow — the moon
   always looks lit. On hover the glow retreats so the interaction reads as
   "stepping closer to the moon" rather than "igniting" it. */
body.femme-rising .wordmark__mark {
  filter:
    drop-shadow(0 0 14px rgba(240, 106, 255, 0.85))
    drop-shadow(0 0 36px rgba(225, 29, 116, 0.55))
    drop-shadow(0 0 72px rgba(169, 28, 143, 0.35));
}
body.femme-rising .wordmark:hover .wordmark__mark,
body.femme-rising .wordmark:focus-visible .wordmark__mark {
  filter: none;
}
/* FR scrolled state — logo is 1:1 so it must fit vertically in the header.
   Other pages: MD wordmark 156px wide × 1/2.233 = 70px tall in a 92px header
   → 11px margin top/bottom. To match that margin on FR, the header grows to
   108px and the square logo sits at 86px. */
body.femme-rising .site-header.is-scrolled { height: 108px; }
body.femme-rising .site-header.is-scrolled .wordmark__mark { width: 86px; }
/* FR idle state — bigger header so the big square logo has breathing room. */
body.femme-rising .site-header:not(.is-scrolled) { height: 240px; }
@media (max-width: 767px) {
  body.femme-rising .wordmark__mark { width: 155px; }
  body.femme-rising .site-header.is-scrolled { height: 88px; }
  body.femme-rising .site-header.is-scrolled .wordmark__mark { width: 66px; }
  body.femme-rising .site-header:not(.is-scrolled) { height: 180px; }
}

body.femme-rising {
  /* FR palette now aligned to the rest of the site — same electric-pink
     (#ec4899) as the brand primary so the two pages feel cohesive. FR
     keeps a slightly deeper indigo backdrop for atmospheric identity. */
  --deep-stage: #0d0826;        /* a touch deeper than MD, still indigo */
  --stage-blue: #1e3a8a;        /* MD stage-blue */
  --indigo: #2d2b78;            /* MD indigo */
  --indigo-deep: #1a1755;
  --violet-dark: #1a1755;
  --electric-violet: #ec4899;   /* matches MD --electric-pink */
  --parchment: #f0ece4;         /* matches MD parchment */

  /* FR-specific atmospheric accents (used only by the nebula shader +
     a few atmospheric washes — kept warm/magenta for cosmic feel). */
  --warm-gold: #c9a96e;
  --blush: #fce7f3;             /* matches MD blush — near-white pink-100 */
  --muted-earth: #6b5b4e;
  --skin-warm: #de8f86;
  --nebula-pink: #f06aff;       /* still hot for the nebula shader peaks */
  --nebula-magenta: #a91c8f;
  --nebula-amber: #c9a227;
  --nebula-coral: #ec4899;

  /* Text tones aligned to MD */
  --text-primary: #f0ece4;
  --text-body: #d4cfe0;
  --text-secondary: #a8a3b8;
  --text-label: #f4a8c8;
  --text-quiet: #8a87a0;
  --divider: rgba(236, 72, 153, 0.18);

  --surface-overlay: rgba(13, 8, 38, 0.72);
  --surface-modal: rgba(13, 8, 38, 0.88);

  background: var(--deep-stage);
}

/* Subtle atmospheric fallback for FR (gas clouds replace this in Phase 10) */
/* Static fallback IF the WebGL nebula fails to init — painted at z-index:-2 so
   the shader canvas at -1 covers it when present. */
body.femme-rising::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(169, 28, 143, 0.35), transparent 55%),
    radial-gradient(ellipse at 78% 20%, rgba(30, 58, 138, 0.32), transparent 55%),
    radial-gradient(ellipse at 60% 85%, rgba(236, 72, 153, 0.28), transparent 55%),
    radial-gradient(ellipse at 15% 75%, rgba(225, 29, 116, 0.25), transparent 55%);
}

/* ---------- FR Hero ----------
   Hero is 100vh but the image container bleeds 28vh below so the fade can
   cross INTO the next section instead of resolving entirely inside the hero.
   On initial load the full first viewport shows the image at full strength
   (mask is solid 0-78% = first 100vh of 128vh image). As you scroll down,
   the fade zone (78%-100% of image = the bleed area) sits behind the About
   section glass card, creating a continuous cross-section transition. */
.fr-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;   /* dynamic viewport height — avoids mobile URL-bar clipping */
  min-height: 640px;
  padding: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Reserve paint behind subsequent content but above the body nebula canvas */
  z-index: 0;
}
.fr-hero__media {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 128vh;
  z-index: 0;
  pointer-events: none;
}
.fr-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.fr-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  /* Solid across the first 100vh of image (= first viewport on load), then a
     smooth multi-stop fade over the final 28vh of image bleeding into the
     next section. Many fine stops eliminate mask banding in dark areas. */
  --fr-hero-fade-mask:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 78%,
      rgba(0,0,0,0.95) 81%,
      rgba(0,0,0,0.85) 84%,
      rgba(0,0,0,0.70) 87%,
      rgba(0,0,0,0.52) 90%,
      rgba(0,0,0,0.34) 93%,
      rgba(0,0,0,0.18) 96%,
      rgba(0,0,0,0.06) 99%,
      transparent 100%
    );
  mask-image: var(--fr-hero-fade-mask);
  -webkit-mask-image: var(--fr-hero-fade-mask);
}
/* Next-section content must paint above the hero's bled-below image. The
   bled image is inside .fr-hero which is z-index: 0; following sections get
   z-index: 1 + relative so they render on top. */
.fr-hero + .fr-section {
  position: relative;
  z-index: 1;
}

/* FR logo inside the hero h1 — replaces the text title */
.fr-hero__title {
  margin: 0;
  line-height: 0;
}
.fr-hero__title picture {
  display: inline-block;
}
.fr-logo {
  width: clamp(320px, 42vw, 560px);
  height: auto;
  display: block;
  /* atmospheric shadow so the logo sits in the nebula instead of on it */
  filter: drop-shadow(0 10px 40px rgba(26, 8, 32, 0.55))
          drop-shadow(0 0 30px rgba(240, 106, 255, 0.18));
}
.fr-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  /* Soft colour wash only — NO solid fade to deep-stage at the bottom, otherwise
     the hero ends in a hard horizontal line where the section boundary is. */
  background:
    radial-gradient(ellipse at 30% 30%, rgba(240, 106, 255, 0.22), transparent 60%),
    radial-gradient(ellipse at 78% 68%, rgba(169, 28, 143, 0.22), transparent 60%);
}
.fr-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1280px;
  margin: 0 auto;
  align-items: flex-start;
}
/* Centered, uncluttered hero: only the logo + subtitle sit on the nebula */
.fr-hero__content--centered {
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.fr-hero__text {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.fr-hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--text-primary);
  margin: 0;
  text-shadow: 0 4px 30px rgba(26, 8, 32, 0.5);
}
.fr-hero__subtitle {
  font-family: var(--display-alt);   /* Fraunces italic for an editorial feel */
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--text-primary);
  max-width: 28ch;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.005em;
  /* strong soft shadow so it floats cleanly over any nebula peak without a container */
  text-shadow:
    0 2px 24px rgba(26, 8, 32, 0.9),
    0 0 10px rgba(26, 8, 32, 0.6);
}
.fr-hero__season {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--nebula-amber);
  margin-top: 0.75rem;
}
.fr-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-primary);
  align-self: flex-start;
}
.fr-hero__scroll::after { content: '↓'; font-size: 0.9rem; }

/* ---------- FR Events grid ---------- */
.fr-section {
  padding: clamp(3rem, 7vh, 5rem) 0;
}
/* The About → Events gap was especially wide (two consecutive fr-sections
   stacking their top + bottom padding). Tighten the top of the section
   immediately following .fr-about so Events pulls upward toward About. */
.fr-about + .fr-section {
  padding-top: clamp(1rem, 2.5vh, 2rem);
}
/* Match the music page's .section-head rhythm: tight gap between eyebrow
   and display heading, clamped bottom margin, larger eyebrow treatment. */
.fr-section__head {
  padding: 0 var(--gutter);
  max-width: 1280px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fr-section__head .mono-label {
  font-size: 0.82rem;
  letter-spacing: 0.38em;
  color: var(--text-primary);
  text-shadow: 0 2px 12px rgba(20, 6, 36, 0.8);
}
.fr-section__head .display { margin-top: 0; }
.fr-events__grid {
  padding: 0 var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  /* Three cards sit on a single row at desktop width; collapse to 1 col
     below 900px. auto-fit would re-split oddly with 3 items, so we use
     explicit 3-col here. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
/* Legacy .event-card kept for back-compat with any other consumer, but the
   live FR page now uses the typographic .fr-event blocks below. */
.event-card {
  position: relative;
  background: rgba(26, 8, 32, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(240, 106, 255, 0.22);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow: hidden;
}

/* ---------- Typographic event blocks (new FR pattern) ----------
   Giant numeral + display title + lineup credit. Atmospheric pink/indigo
   washes vary per event for rhythm. No event-specific photos. */
.fr-events { padding: 0; }
.fr-event {
  --p: 0;
  position: relative;
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(236, 72, 153, 0.12), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(30, 58, 138, 0.18), transparent 60%);
}
.fr-event:nth-of-type(even) {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(240, 106, 255, 0.10), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(236, 72, 153, 0.14), transparent 60%);
}
.fr-event:nth-of-type(3n) {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(236, 72, 153, 0.14), transparent 55%),
    radial-gradient(ellipse at 70% 90%, rgba(169, 28, 143, 0.18), transparent 55%);
}
.fr-event + .fr-event { border-top: 1px solid rgba(236, 72, 153, 0.12); }

.fr-event__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  /* Subtle reveal on scroll into view */
  transform: translateY(calc(40px - var(--p, 0) * 40px));
  transition: transform 0.2s linear;
}
.fr-event__numeral {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(7rem, 16vw, 14rem);
  line-height: 0.85;
  color: var(--parchment);
  letter-spacing: -0.02em;
  margin: 0;
  -webkit-text-stroke: 1px rgba(236, 72, 153, 0.45);
  text-shadow:
    0 0 22px rgba(236, 72, 153, 0.35),
    0 0 60px rgba(236, 72, 153, 0.18);
}
.fr-event__numeral-meta {
  display: block;
  font-size: 0.16em;
  letter-spacing: 0.3em;
  color: var(--blush);
  -webkit-text-stroke: 0;
  text-shadow: none;
  font-family: var(--mono);
  text-transform: uppercase;
  margin-top: 1rem;
}
.fr-event__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fr-event__tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blush);
}
.fr-event__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--parchment);
  text-shadow: 0 2px 14px rgba(20, 6, 36, 0.6);
}
.fr-event__title em {
  font-family: var(--display-alt, 'Fraunces', serif);
  font-style: italic;
  color: var(--electric-pink);
  font-weight: 300;
}
.fr-event__meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--electric-pink);
}
.fr-event__venue {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-body);
}
.fr-event__lineup {
  font-family: var(--display-alt, 'Fraunces', serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--text-body);
  max-width: 50ch;
  margin: 0.25rem 0;
}
.fr-event__lineup em { color: var(--electric-pink); }
.fr-event__cta {
  align-self: flex-start;
  margin-top: 0.5rem;
  display: inline-block;
  padding: 0.95rem 1.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--parchment);
  background: rgba(236, 72, 153, 0.4);
  border: 1px solid rgba(236, 72, 153, 0.55);
  border-radius: 2px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.35s var(--ease-out-expo);
}
.fr-event__cta:hover {
  background: rgba(236, 72, 153, 0.6);
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.55);
}
.fr-event__cta--ghost {
  background: rgba(236, 72, 153, 0.12);
}
.fr-event__cta--ghost:hover {
  background: rgba(236, 72, 153, 0.32);
}

@media (max-width: 900px) {
  .fr-event__inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .fr-event__numeral { font-size: 8rem; line-height: 0.8; }
}
.event-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nebula-amber), var(--nebula-pink), var(--nebula-magenta));
}
.event-card__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 0.35rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f06aff;
  background: rgba(240, 106, 255, 0.08);
  border: 1px solid rgba(240, 106, 255, 0.28);
  border-radius: 2px;
  margin: 0 0 0.25rem 0;
}
.event-card__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.event-card__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nebula-pink);
}
.event-card__venue {
  font-weight: 300;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}
.event-card__artists {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-label);
  line-height: 1.8;
}
.event-card__artists strong {
  color: var(--nebula-amber);
  font-weight: 500;
  margin-right: 0.5rem;
}
.event-card__desc {
  color: var(--text-body);
  font-weight: 300;
  margin: 0;
}
.event-card__cta-row { margin-top: 0.5rem; }

/* ---------- FR About ----------
   Glass container (content-glass adds bg + blur + internal padding). Widened
   and centered so the card is a prominent feature rather than a lonely left-
   leaning box. Children have their browser-default margins reset so flex
   `gap` is the only vertical rhythm. */
.fr-about {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.fr-about__text {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.fr-about__text > * { margin: 0; }
/* Larger eyebrow label to match music page's .section-head rhythm. */
.fr-about__text .mono-label {
  font-size: 0.82rem;
  letter-spacing: 0.38em;
  color: var(--text-primary);
  text-shadow: 0 2px 12px rgba(20, 6, 36, 0.8);
  margin-bottom: 0.15rem;
}
.fr-about__text h2 { margin-bottom: 0.35rem; }
.fr-about__text .body-lead {
  max-width: 68ch;
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
}
/* Justify body copy across the FR page so paragraphs read as clean blocks. */
body.femme-rising .body-lead {
  text-align: justify;
  hyphens: auto;
}

/* FR accordion gallery — pink palette variant of the home accordion. */
.fr-gallery {
  padding-top: 0;  /* follows the about section directly */
}
/* ---------- FR Past Nights marquee ----------
   Replaces the prior accordion. Same Option-F drift pattern as the home
   photo reel: cards loop infinitely, hover any card to pause + ignite
   pink glow. Each card carries its caption permanently below the photo. */
.fr-past-nights { padding-top: clamp(4rem, 8vh, 7rem); }
.fr-marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Scrollable in addition to the JS-driven auto-drift, so users can also
     swipe / wheel / drag through the past nights. ui.js setupMarquee()
     handles the auto-scroll and pauses on user interaction. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  padding: clamp(1rem, 2vh, 1.75rem) 0 clamp(2rem, 4vh, 3rem);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.fr-marquee::-webkit-scrollbar { display: none; }
.fr-marquee__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  /* Auto-scroll comes from ui.js (scrollLeft animation on .fr-marquee)
     instead of a CSS transform — that's what lets the user also scroll. */
}
.fr-marquee__card {
  flex: 0 0 auto;
  width: clamp(240px, 24vw, 340px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.fr-marquee__card img {
  width: 100%;
  height: clamp(320px, 45vh, 460px);
  object-fit: cover;
  object-position: center 20%;
  border-radius: 4px;
  display: block;
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(252, 231, 243, 0.06);
  transition:
    transform 0.5s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.5s cubic-bezier(.16, 1, .3, 1),
    border-color 0.5s cubic-bezier(.16, 1, .3, 1);
  border: 1px solid transparent;
}
.fr-marquee__card:hover img {
  transform: scale(1.04);
  border-color: rgba(236, 72, 153, 0.6);
  box-shadow:
    0 0 30px rgba(236, 72, 153, 0.4),
    0 0 70px rgba(236, 72, 153, 0.2);
}
.fr-marquee__card figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 0.25rem;
}
.fr-marquee__card figcaption strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--parchment);
}
.fr-marquee__card figcaption em {
  font-family: var(--display-alt, 'Fraunces', serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--electric-pink, #ec4899);
}
.fr-marquee__card figcaption span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blush);
  margin-top: 0.2rem;
}
@keyframes fr-marquee-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 0.75rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .fr-marquee__track { animation: none; }
}
@media (max-width: 700px) {
  .fr-marquee__card { width: clamp(220px, 70vw, 300px); }
  .fr-marquee__track { animation-duration: 45s; }
}

/* (Legacy accordion gallery — kept around for any other page that
   still uses the .gallery__accordion + .fr-gallery__accordion classes.) */
.fr-gallery__accordion {
  padding: 0 var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
  height: 62vh;
  min-height: 440px;
  /* Touching photos — no gaps, reads as a continuous strip the way the
     original gallery did before the round-2 changes. */
  gap: 0;
}
body.femme-rising .acc-item {
  border-color: rgba(240, 106, 255, 0.25);
}
body.femme-rising .acc-item:hover,
body.femme-rising .acc-item:focus-visible {
  border-color: rgba(240, 106, 255, 0.7);
  box-shadow:
    0 0 30px rgba(240, 106, 255, 0.45),
    0 0 70px rgba(169, 28, 143, 0.25);
}
@media (max-width: 767px) {
  .fr-gallery__accordion { height: auto; min-height: 0; }
}

/* ---------- FR Submissions ----------
   Two-column: CTA card on the left, descriptive paragraph on the right.
   The card carries a mouse-tracked 3D polaroid tilt (same treatment as the
   About-page portrait) so it feels alive and invites interaction. */
.fr-submit__grid {
  padding: 0 var(--gutter);
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  justify-content: center;
}
.fr-submit__card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(169, 28, 143, 0.28), rgba(30, 58, 138, 0.22)),
    rgba(26, 8, 32, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(240, 106, 255, 0.3);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  box-shadow:
    0 20px 60px rgba(20, 6, 36, 0.55),
    0 0 60px rgba(240, 106, 255, 0.12);

  /* 3D polaroid tilt — JS sets --tilt-x / --tilt-y / --tilt-lift on mousemove */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-lift: 0;
  transform: perspective(1000px)
             rotateX(var(--tilt-x))
             rotateY(var(--tilt-y))
             translateZ(calc(var(--tilt-lift) * 1px));
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-expo);
  will-change: transform;
}
.fr-submit__card.is-tilting {
  transition: transform 0.08s linear, box-shadow 0.4s var(--ease-out-expo);
  box-shadow:
    0 30px 90px rgba(20, 6, 36, 0.65),
    0 0 90px rgba(240, 106, 255, 0.22);
}
.fr-submit__card .mono-label {
  font-size: 0.82rem;
  letter-spacing: 0.38em;
  color: var(--text-primary);
  text-shadow: 0 2px 12px rgba(20, 6, 36, 0.8);
}
.fr-submit__card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.fr-submit__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 52ch;
}

/* ---------- FR Community collaborators ---------- */
.fr-collaborators__grid {
  padding: 0 var(--gutter);
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.fr-collaborator {
  padding: 1.25rem 1rem;
  border: 1px solid rgba(240, 106, 255, 0.18);
  background: rgba(26, 8, 32, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  border-radius: 3px;
  transition: border-color var(--dur-micro) var(--ease-out-expo),
              color var(--dur-micro) var(--ease-out-expo),
              transform var(--dur-micro) var(--ease-out-expo);
}
.fr-collaborator:hover {
  border-color: var(--nebula-pink);
  color: var(--nebula-pink);
  transform: translateY(-2px);
}
@media (max-width: 700px) {
  .fr-collaborators__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- FR Sponsors ---------- */
.fr-sponsors__grid {
  padding: 0 var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.fr-sponsors__grid--three {
  /* Three real partner logos — bigger cells, centred, breathing room. */
  max-width: 880px;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.fr-sponsor {
  aspect-ratio: 2/1;
  border: 1px solid rgba(240, 106, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(26, 8, 32, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--dur-micro) var(--ease-out-expo),
              color var(--dur-micro) var(--ease-out-expo);
  padding: 1rem 1.25rem;
}
.fr-sponsor img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Use the original logo colors against the transparent dark glass —
     no invert, no opacity dim. Lets each partner's brand show as-is. */
  filter: none;
  transition: filter var(--dur-micro) var(--ease-out-expo),
              transform var(--dur-micro) var(--ease-out-expo);
}
.fr-sponsor:hover {
  border-color: var(--electric-violet);
}
.fr-sponsor:hover img {
  /* Subtle pink glow + tiny lift on hover — keeps original logo colors. */
  filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.5));
  transform: scale(1.03);
}

/* ---------- FR button override tint ---------- */
body.femme-rising .btn-primary {
  background: var(--nebula-pink);
  color: #2a0f1e;
  border-color: var(--nebula-pink);
}
body.femme-rising .btn-primary:hover {
  background: transparent;
  color: var(--nebula-pink);
}
body.femme-rising .btn-ghost {
  color: var(--text-primary);
  border-color: rgba(240, 106, 255, 0.38);
}
body.femme-rising .btn-ghost:hover {
  border-color: var(--nebula-pink);
  color: var(--nebula-pink);
}

/* ---------- FR magazine treatment ----------
   FR page now uses the about-magazine layout patterns (.hero-pin,
   .reading, .quote-pin). These overrides extend that DNA with FR-
   specific accents — pink-offset frame + triangle accent on the
   reading image, slightly different scrim feel. */

/* Tilted reading image with offset pink frame + triangle corner accent.
   Same DNA as the about page FR trailer treatment, applied to a still. */
body.femme-rising .reading__image-frame { height: auto; }
body.femme-rising .reading__image.fr-tilted-image {
  position: relative;
  transform: rotate(-3deg);
  transition: transform 0.6s var(--ease-out-expo);
  aspect-ratio: 4 / 5;
  height: auto;
  max-height: 70vh;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(244, 168, 200, 0.25);
}
body.femme-rising .reading__image.fr-tilted-image:hover { transform: rotate(-1.5deg); }
body.femme-rising .reading__image.fr-tilted-image::before {
  content: '';
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 2px solid var(--electric-pink, #ec4899);
  border-radius: 2px;
  z-index: -1;
  box-shadow: 0 0 24px rgba(236, 72, 153, 0.45);
  pointer-events: none;
}
body.femme-rising .reading__image.fr-tilted-image::after {
  content: '';
  position: absolute;
  top: -14px;
  left: -14px;
  width: 32px;
  height: 32px;
  background: var(--electric-pink, #ec4899);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.6);
  pointer-events: none;
}

/* Event body sits on a soft frosted glass — backdrop-filter blurs the
   nebula peaks behind without leaving a visible grey scrim, and no
   text-shadows are needed because the blur quiets the busy background. */
body.femme-rising .fr-event__body {
  padding: 2rem;
  background: rgba(15, 12, 38, 0.18);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-radius: 4px;
}

/* FR hero overlay copy: aligned to the bottom-right instead of the
   default bottom-left so the singer's face on the left side of the
   photo stays unobscured. */
body.femme-rising .hero-pin__content {
  left: auto;
  right: 0;
  text-align: right;
  margin-left: auto;
}
body.femme-rising .hero-pin__title,
body.femme-rising .hero-pin__lead {
  margin-left: auto;
}

/* FR-page hero copy uses brighter italic accent + soft dark glow so
   the type holds up against bright pink stage photo. */
body.femme-rising .hero-pin__title em {
  color: var(--electric-pink, #ec4899);
  text-shadow:
    0 0 12px rgba(236, 72, 153, 0.9),
    0 0 28px rgba(236, 72, 153, 0.7),
    0 0 60px rgba(236, 72, 153, 0.5),
    0 2px 6px rgba(10, 8, 32, 0.85);
}
body.femme-rising .hero-pin__eyebrow {
  color: var(--electric-pink, #ec4899);
  text-shadow:
    0 0 6px rgba(236, 72, 153, 0.95),
    0 0 18px rgba(236, 72, 153, 0.75),
    0 0 36px rgba(236, 72, 153, 0.55),
    0 1px 3px rgba(10, 8, 32, 0.9);
}

/* ---------- FR Past Nights gallery captions ----------
   Each .acc-item is a <figure>; its <figcaption> only appears when the
   item is hovered/focused (i.e. expanded via flex:5). Pink kicker name +
   italic group-name + mono show line. */
body.femme-rising .acc-item {
  position: relative;
  overflow: hidden;
}
body.femme-rising .acc-item__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1rem, 2.5vh, 1.75rem);
  background: linear-gradient(to top, rgba(13, 8, 38, 0.92) 0%, rgba(13, 8, 38, 0.5) 65%, transparent 100%);
  color: var(--parchment);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out-expo, ease), transform 0.4s var(--ease-out-expo, ease);
  pointer-events: none;
}
body.femme-rising .acc-item:hover .acc-item__caption,
body.femme-rising .acc-item:focus-visible .acc-item__caption {
  opacity: 1;
  transform: translateY(0);
}
body.femme-rising .acc-item__caption strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  color: var(--parchment);
  letter-spacing: 0.005em;
}
body.femme-rising .acc-item__caption em {
  font-family: var(--display-alt, 'Fraunces', serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--electric-pink, #ec4899);
}
body.femme-rising .acc-item__caption span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blush);
  margin-top: 0.35rem;
}
@media (max-width: 767px) {
  /* On mobile the accordion stacks vertically with no hover state —
     captions are always visible at the bottom of each item. */
  body.femme-rising .acc-item__caption { opacity: 1; transform: none; }
}

/* ---------- FR In the Round — its own full-bleed hero moment ----------
   A full-viewport break in the page with a darker backdrop so the
   intimate songwriter-round series reads as its OWN program, not a
   secondary list under the big shows. Content sits asymmetrically:
   eyebrow/title/intro pinned to the LEFT, the dated list anchored
   RIGHT. Pink hairline runs vertically between them. */
.fr-rounds {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 100vh;
  padding: clamp(5rem, 10vh, 8rem) clamp(2rem, 7vw, 6rem);
  background:
    radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.08), transparent 55%),
    radial-gradient(ellipse at 15% 80%, rgba(30, 58, 138, 0.12), transparent 55%),
    rgba(7, 5, 22, 0.85);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* Subtle pink hairline vertical divider between the two columns. */
.fr-rounds::before {
  content: '';
  position: absolute;
  top: 18%; bottom: 18%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(236, 72, 153, 0.4), transparent);
  pointer-events: none;
}
@media (max-width: 900px) {
  .fr-rounds { grid-template-columns: 1fr; min-height: auto; padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 5vw, 3rem); }
  .fr-rounds::before { display: none; }
}
.fr-rounds .fr-section__head { padding: 0; }
.fr-rounds__intro {
  font-family: var(--body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--parchment);
  max-width: 44ch;
  margin: 0.75rem 0 0;
}
.fr-rounds__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fr-round {
  display: grid;
  /* Date column sized just to its content (no fractional fill) so the
     venue + lineup sit tight against the date, not pushed far right by
     a wide date column. */
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: 1.75rem clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(252, 231, 243, 0.12);
  transition: background-color 0.35s var(--ease-out-expo, ease),
              border-color 0.35s var(--ease-out-expo, ease),
              transform 0.35s var(--ease-out-expo, ease);
  position: relative;
}
.fr-round:last-child { border-bottom: 1px solid rgba(252, 231, 243, 0.12); }
.fr-round:hover {
  background: rgba(236, 72, 153, 0.07);
  border-color: rgba(236, 72, 153, 0.45);
  transform: translateX(6px);
}
/* Date cell — oversized display numeral + italic month accent. Reads
   as a graphic element, not just text. */
.fr-round__date {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  line-height: 1;
  align-items: flex-start;
}
.fr-round__day {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3rem, 5.5vw, 4.75rem);
  color: var(--electric-pink, #ec4899);
  letter-spacing: -0.04em;
  line-height: 0.85;
  /* Pink glow halo so the numeral feels luminous rather than flat. */
  text-shadow:
    0 0 18px rgba(236, 72, 153, 0.5),
    0 0 38px rgba(236, 72, 153, 0.25);
}
.fr-round__month {
  font-family: var(--display-alt, 'Fraunces', serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  color: var(--blush);
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
}
/* Venue line — bigger, with a small electric-pink leading dot to feel
   marked / placed, like a map pin. */
.fr-round__venue {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  color: var(--parchment);
  margin: 0 0 0.5rem;
  line-height: 1.15;
  position: relative;
}
.fr-round__venue::before {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--electric-pink, #ec4899);
  border-radius: 50%;
  margin-right: 0.65rem;
  vertical-align: 0.18em;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.7);
}
.fr-round__lineup {
  font-family: var(--display-alt, 'Fraunces', serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}
.fr-round__lineup em { color: var(--electric-pink, #ec4899); }
@media (max-width: 600px) {
  .fr-round { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.5rem 0.75rem; }
  .fr-round:hover { transform: none; }
  .fr-round__day { font-size: 2.75rem; }
}

/* ---------- FR cinematic call (Submit) + masthead card ----------
   Submit lives in a full-bleed cinematic moment (same DNA as .fr-pin),
   then a single contained dark card holds collaborators + sponsors. */

/* Call section media + scrim (re-using .fr-pin shell from main.css). */
/* Call for Artists — full viewport hero, photo fills width and height. */
.fr-pin--call {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 100vh;
  min-height: 720px;
}
.fr-pin--call .fr-pin__sticky {
  background-color: var(--deep-stage, #0d0826);
  height: 100%;
}
.fr-call__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-color: var(--deep-stage, #0d0826);
}
.fr-call__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10, 8, 32, 0.45) 0%,
      rgba(10, 8, 32, 0.35) 30%,
      rgba(10, 8, 32, 0.7) 100%),
    radial-gradient(ellipse at 30% 45%, rgba(10, 8, 32, 0.55) 0%, transparent 60%);
}
.fr-call__content {
  align-items: flex-start !important;
  text-align: left !important;
  max-width: 760px;
  padding: 0 clamp(2rem, 8vw, 6rem) !important;
}
.fr-call__cta {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 1rem 1.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: rgba(236, 72, 153, 0.55);
  border: 1px solid var(--electric-pink, #ec4899);
  border-radius: 2px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
}
.fr-call__cta:hover {
  background: rgba(236, 72, 153, 0.8);
  box-shadow: 0 0 30px rgba(236, 72, 153, 0.55);
}
/* Secondary call CTA — ghost outline. Paired with the primary CTA in
   .fr-call__cta-row so artists OR community collaborators each have a
   clear submission path. */
.fr-call__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.5rem;
}
.fr-call__cta--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(252, 231, 243, 0.5);
}
.fr-call__cta--ghost:hover {
  background: rgba(252, 231, 243, 0.08);
  border-color: var(--electric-pink, #ec4899);
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.3);
}
/* Secondary lead line under the primary one — slightly muted so the
   primary call still leads the eye. */
.fr-pin__lead--secondary {
  opacity: 0.82;
  font-size: 1rem;
  margin-top: -0.5rem;
}

/* Masthead — single contained dark card grounding the page closing. */
.fr-masthead {
  padding: clamp(5rem, 10vh, 8rem) clamp(1.5rem, 5vw, 3.5rem);
  max-width: 1180px;
  margin: 0 auto;
}
.fr-masthead__card {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2.5rem, 5vh, 4rem) clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse at 20% 20%, rgba(236, 72, 153, 0.1), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(30, 58, 138, 0.15), transparent 55%),
    rgba(13, 8, 38, 0.78);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 4px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(236, 72, 153, 0.15),
    inset 0 1px 0 rgba(244, 168, 200, 0.12);
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Pink hairline accent across the top of the card. */
.fr-masthead__card::before {
  content: '';
  position: absolute;
  top: -1px; left: clamp(2rem, 5vw, 4rem); right: clamp(2rem, 5vw, 4rem);
  height: 2px;
  background: linear-gradient(to right, transparent, var(--electric-pink, #ec4899), transparent);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
}

.fr-masthead__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1.25rem;
}
.fr-masthead__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1.5rem;
}
.fr-masthead__list li {
  font-family: var(--display-alt, 'Fraunces', serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--parchment);
  line-height: 1.4;
  position: relative;
  padding-left: 1rem;
}
.fr-masthead__list li a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.fr-masthead__list li a:hover,
.fr-masthead__list li a:focus-visible {
  color: var(--electric-pink, #ec4899);
  border-bottom-color: var(--electric-pink, #ec4899);
}
.fr-masthead__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--electric-pink, #ec4899);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.7);
}

/* Vertical divider between collaborators + sponsors. */
.fr-masthead__divider {
  width: 1px;
  height: 100%;
  min-height: 160px;
  background: linear-gradient(to bottom, transparent, rgba(236, 72, 153, 0.5), transparent);
}

/* Collaborator invitation — copy + CTA tucked under the "In collaboration
   with" column. Per Melissa's round-3 feedback this lives with the
   collaborator list, NOT in the Send-Your-Sound section. */
.fr-masthead__collab-copy {
  font-family: var(--body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-body);
  margin: 1.5rem 0 1rem;
  max-width: 36ch;
}
/* Umbrella invite — a prominent glass CTA panel above the collaborators/
   sponsors card. Self-contained card (border + pink glow + backdrop blur)
   so it reads as a clear call to action, not floating body text. */
.fr-masthead__invite {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(2.25rem, 4.5vw, 3.25rem) clamp(1.5rem, 4vw, 3.5rem);
  background: rgba(20, 6, 36, 0.55);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(240, 106, 255, 0.38);
  border-radius: 12px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.5),
    0 0 90px rgba(240, 106, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Corner glow on a ::before so it can't clip content */
.fr-masthead__invite::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(240, 106, 255, 0.22), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(225, 29, 116, 0.18), transparent 42%);
  z-index: 0;
}
.fr-masthead__invite > * { position: relative; z-index: 1; }
.fr-masthead__invite-eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--neon-pink, #f06aff);
  margin: 0;
}
.fr-masthead__invite-title {
  font-family: var(--display, 'Fraunces', serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-primary, #fff);
  margin: 0;
  max-width: 22ch;
}
.fr-masthead__invite-copy {
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
  max-width: 52ch;
}
.fr-masthead__invite-ctas { margin-top: 0.5rem; }
.fr-masthead__invite-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}
/* First CTA = solid pink (primary). Second = ghost (already default style). */
.fr-masthead__invite-ctas .fr-masthead__collab-cta:not(.fr-masthead__collab-cta--ghost) {
  background: var(--electric-pink, #ec4899);
  border-color: var(--electric-pink, #ec4899);
  color: #2a0f1e;
}
.fr-masthead__invite-ctas .fr-masthead__collab-cta:not(.fr-masthead__collab-cta--ghost):hover,
.fr-masthead__invite-ctas .fr-masthead__collab-cta:not(.fr-masthead__collab-cta--ghost):focus-visible {
  background: var(--neon-pink, #f06aff);
  border-color: var(--neon-pink, #f06aff);
  color: #2a0f1e;
  box-shadow: 0 0 24px rgba(240, 106, 255, 0.45);
}
.fr-masthead__collab-cta {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: transparent;
  border: 1px solid rgba(252, 231, 243, 0.45);
  border-radius: 2px;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.fr-masthead__collab-cta:hover,
.fr-masthead__collab-cta:focus-visible {
  border-color: var(--electric-pink, #ec4899);
  background: rgba(236, 72, 153, 0.18);
  color: #fff;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.35);
  outline: none;
}

.fr-masthead__logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2rem);
}
/* Each logo is wrapped in an anchor "chip". The chip owns the background
   + padding + size; the img inside is just the artwork rendered at the
   chip's content height. (Prior version put bg+padding on the img itself,
   which collapsed the visible content area when max-width clamped narrow.) */
.fr-masthead__logos a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: clamp(72px, 9vw, 96px);
  padding: 14px 20px;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fr-masthead__logos a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(236, 72, 153, 0.35);
}
.fr-masthead__logos a:focus-visible {
  outline: 2px solid var(--electric-pink, #ec4899);
  outline-offset: 4px;
}
/* Parchment chip for dark-ink logos. */
.fr-masthead__logos a[aria-label*="Hamilton City"],
.fr-masthead__logos a[aria-label*="Women in Music"] {
  background: var(--parchment, #f0ece4);
}
/* Dark stage chip for Groundwork's neon-yellow ink. */
.fr-masthead__logos a[aria-label*="Groundwork"] {
  background: var(--deep-stage, #0d0826);
}
.fr-masthead__logos img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.95;
  transition: opacity 0.3s ease;
}
.fr-masthead__logos a:hover img { opacity: 1; }

/* Mobile — stack the masthead card vertically */
@media (max-width: 760px) {
  .fr-masthead__card {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .fr-masthead__divider {
    width: 100%;
    height: 1px;
    min-height: 0;
    background: linear-gradient(to right, transparent, rgba(236, 72, 153, 0.5), transparent);
  }
  .fr-masthead__list { grid-template-columns: 1fr; }
  .fr-call__content { padding: 0 1.5rem !important; }
}

/* ---------- FR responsive ---------- */
@media (max-width: 1024px) {
  .fr-events__grid { grid-template-columns: 1fr; }
  .fr-about__grid,
  .fr-submit__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .fr-about__media { max-width: 440px; margin: 0 auto; }
  .fr-sponsors__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .fr-sponsors__grid,
  .fr-sponsors__grid--three { grid-template-columns: repeat(2, 1fr); }
}