/* Maria and Rett — minimal styling on top of Bootstrap + Bootswatch Pulse. */
:root { --bs-primary: #65318a; --bs-primary-rgb: 101, 49, 138; }
html { scroll-behavior: smooth; }
body { background: #fff; }
.section-lavender { background-color: #eee2f5; }
.section-white { background-color: #fff; }
h1, h2, .card-title { color: #512274; }
/* Circular crop and two fine borders, adapted from Stellar's spotlight. */
.portrait-outer {
  width: min(19rem, 100%);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  padding: .5rem;
  border: 2px solid #b98bd1;
  border-radius: 50%;
}
.portrait-inner {
  height: 100%; width: 100%; border-radius: 50%;
  padding: .35rem; border: 1px solid #e3c8ee;
}
.portrait-img {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; object-position: 50% 42%;
}
/* Feature cards remain native Bootstrap; only their icon presentation is custom. */
.feature-icon {
  width: 3.75rem; height: 3.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #a973c9; outline: 1px solid #dcc1eb;
  outline-offset: 4px; border-radius: 50%;
  color: #65318a; font-size: 1.6rem;
  margin: 0 0 1.25rem 4px;
}
.card { border-color: #dfcaeb; }
.btn-primary {
  --bs-btn-bg: #65318a; --bs-btn-border-color: #65318a;
  --bs-btn-hover-bg: #50236d; --bs-btn-hover-border-color: #50236d;
  --bs-btn-active-bg: #50236d;
}
.btn-outline-primary {
  --bs-btn-color: #65318a; --bs-btn-border-color: #65318a;
  --bs-btn-hover-bg: #65318a; --bs-btn-hover-border-color: #65318a;
}
footer { color: #6b6072; }
@media (max-width: 991.98px) {
  .portrait-outer { width: min(17rem, 76vw); }
}

/* V7: responsive, single-purpose brand bar; no extra navigation components. */
.site-brand { color: #fff !important; white-space: normal; font-size: clamp(1.05rem, 2.5vw, 1.4rem); line-height: 1.3; }
.site-brand:hover, .site-brand:focus { color: #fff !important; }
/* Editorial-style details: normal Bootstrap typography, not another card system. */
.maria-details dt { color: #512274; font-weight: 700; margin-bottom: .2rem; }
.maria-details dd { margin-bottom: 1rem; }
.maria-details dd:last-child { margin-bottom: 0; }

/* V8: no separate layout rules required; Bootstrap row order makes the portrait appear first on mobile. */