/* SayRaye v4.0.5 — targeted user-requested fixes only */

/* Keep Raye's original photo unchanged; visually dissolve the room into the existing black design. */
.hero-photo-card {
  background:#070707 !important;
  overflow:hidden !important;
}
.hero-photo-card .hero-photo {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:62% 42% !important;
  display:block !important;
  -webkit-mask-image: radial-gradient(ellipse 72% 88% at 64% 49%, #000 0 56%, rgba(0,0,0,.96) 65%, rgba(0,0,0,.62) 76%, transparent 96%);
  mask-image: radial-gradient(ellipse 72% 88% at 64% 49%, #000 0 56%, rgba(0,0,0,.96) 65%, rgba(0,0,0,.62) 76%, transparent 96%);
}

/* About portrait: preserve existing framed black panel, monogram upper-left, copy directly beneath it, photo on right. */
.about-monogram-panel.about-photo-panel {
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(16rem,.42fr) minmax(20rem,.58fr) !important;
  min-height:36rem !important;
  overflow:hidden !important;
  background:#070707 !important;
  padding:clamp(2rem,4vw,4rem) !important;
  align-items:start !important;
}
.about-monogram-panel.about-photo-panel:before {
  content:"" !important;
  position:absolute !important;
  inset:1.5rem !important;
  border:1px solid rgba(213,189,140,.24) !important;
  pointer-events:none !important;
  z-index:4 !important;
}
.about-photo-copy {
  position:relative !important;
  z-index:5 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:.75rem !important;
  padding-top:.25rem !important;
}
.about-photo-copy .about-monogram {
  width:min(18rem,78%) !important;
  height:auto !important;
  max-width:none !important;
  margin:0 0 1.25rem !important;
  position:static !important;
  filter:none !important;
}
.about-monogram-panel.about-photo-panel .about-photo-copy small,
.about-monogram-panel.about-photo-panel .about-photo-copy p {
  position:static !important;
  left:auto !important;
  bottom:auto !important;
  margin:0 !important;
  text-shadow:none !important;
  text-align:left !important;
}
.about-monogram-panel.about-photo-panel .about-photo-copy small {
  color:var(--gold-light) !important;
  font:.72rem var(--font-sans) !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
.about-monogram-panel.about-photo-panel .about-photo-copy p {
  color:var(--paper) !important;
  font:clamp(1.2rem,1.7vw,1.6rem)/1.35 var(--font-sans) !important;
  max-width:24rem !important;
}
.about-monogram-panel.about-photo-panel .about-raye-photo {
  position:absolute !important;
  z-index:2 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:64% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:59% 42% !important;
  filter:none !important;
  -webkit-mask-image: linear-gradient(to left,#000 0 68%,rgba(0,0,0,.9) 77%,rgba(0,0,0,.35) 90%,transparent 100%);
  mask-image: linear-gradient(to left,#000 0 68%,rgba(0,0,0,.9) 77%,rgba(0,0,0,.35) 90%,transparent 100%);
}

/* Contact closing line should use the same elegant display serif as the rest of the site. */
.conversation-closing > div:last-child > p {
  font:clamp(1.7rem,3vw,3rem)/1.08 var(--font-display) !important;
  letter-spacing:0 !important;
}

@media (max-width:760px) {
  .about-monogram-panel.about-photo-panel {
    grid-template-columns:1fr !important;
    min-height:38rem !important;
    padding:1.5rem !important;
  }
  .about-photo-copy { max-width:70% !important; }
  .about-photo-copy .about-monogram { width:min(13rem,70%) !important; }
  .about-monogram-panel.about-photo-panel .about-raye-photo {
    width:82% !important;
    object-position:62% 45% !important;
    opacity:.92 !important;
  }
}

/* v4.0.6 — screenshot corrections only; no design/content changes */
/* Hero portrait frame: reduce oversized card and guarantee the photo never spills outside it. */
.hero-art .hero-photo-card {
  width:min(27rem,72vw) !important;
  aspect-ratio:4/5 !important;
  min-height:0 !important;
  max-height:34rem !important;
  overflow:hidden !important;
}
.hero-art .hero-photo-card .hero-photo {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  object-position:58% 40% !important;
}

/* Listener-question card: restore deliberate editorial hierarchy and spacing. */
.ask-raye {
  display:grid !important;
  grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr) !important;
  gap:clamp(2rem,6vw,6rem) !important;
  align-items:end !important;
}
.question-card {
  padding:clamp(1.5rem,3vw,2.5rem) !important;
  border-left:1px solid rgba(213,189,140,.34) !important;
}
.question-card p {
  margin:0 0 .85rem !important;
  max-width:34rem !important;
  font:clamp(1.45rem,2.1vw,2.2rem)/1.2 var(--font-display) !important;
  letter-spacing:-.015em !important;
}
.question-card span {
  display:block !important;
  font:.66rem/1.4 var(--font-sans) !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:var(--gold-light) !important;
}

/* About: make the portrait panel shorter and keep the real photo clipped inside the frame. */
.about-monogram-panel.about-photo-panel {
  min-height:30rem !important;
  height:min(34rem,72vh) !important;
}
.about-monogram-panel.about-photo-panel .about-raye-photo {
  inset:0 0 0 auto !important;
  width:62% !important;
  height:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  object-position:58% 40% !important;
}

/* About quote: retain the existing black section but use the site's display face. */
.about-page .pull-quote {
  background:#0b0b0b !important;
  color:var(--paper) !important;
  padding-block:clamp(3.5rem,5vw,5rem) !important;
}
.about-page .pull-quote blockquote {
  max-width:72rem !important;
  margin:0 auto !important;
  text-align:center !important;
  font:clamp(1.8rem,3.2vw,3.3rem)/1.2 var(--font-display) !important;
  letter-spacing:-.015em !important;
}

/* Footer: force the intended grid and brand colors; never browser-default blue/purple links. */
.site-footer {
  display:grid !important;
  grid-template-columns:minmax(15rem,1.2fr) minmax(9rem,.7fr) minmax(9rem,.7fr) minmax(14rem,1fr) !important;
  gap:clamp(2rem,5vw,5rem) !important;
  align-items:start !important;
  padding:clamp(3.5rem,5vw,5rem) var(--pad) 2rem !important;
  background:#0b0b0b !important;
  color:var(--paper) !important;
}
.site-footer a,
.site-footer a:visited {
  color:#d9c18c !important;
  text-decoration:none !important;
  display:block !important;
  margin:.3rem 0 !important;
}
.site-footer a:hover { color:#fff4d6 !important; }
.footer-brand strong { display:block !important; margin-top:.65rem !important; }
.footer-brand p { margin-top:.5rem !important; }
.footer-nav p,.footer-social p {
  margin:0 0 .8rem !important;
  font:.68rem var(--font-sans) !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:var(--paper) !important;
}
.footer-legal {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.75rem 1rem !important;
  align-self:end !important;
}
.footer-legal a { display:inline-block !important; margin:0 !important; }

@media (max-width:900px) {
  .ask-raye { grid-template-columns:1fr !important; }
  .question-card { border-left:0 !important; border-top:1px solid rgba(213,189,140,.34) !important; }
  .site-footer { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .about-monogram-panel.about-photo-panel { height:auto !important; min-height:30rem !important; }
}
@media (max-width:600px) {
  .site-footer { grid-template-columns:1fr !important; }
  .hero-art .hero-photo-card { width:min(24rem,88vw) !important; }
}