/* ================================
   Global fonts & basic styling
   ================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&family=Merriweather:wght@400;700&display=swap');

/* Global fonts */
body {
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
}

/* Links */
:root { --link-color: #005a9c; }
a { color: var(--link-color); }

/* Navbar / footer tweaks */
.navbar-brand, .navbar-brand:hover { font-weight: 700; }
.page-footer { font-size: 0.95rem; }

/* ================================
   (Optional) Old left-hero layout
   NOTE: Don't use this together with the inset portrait.
   ================================ */
.home-hero {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  grid-template-columns: 140px 1fr;
}
.home-hero img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

/* ================================
   Inset portrait (right float)
   Works whether the class is on IMG or on FIGURE.
   Circle by default; add .oval for an ellipse crop.
   ================================ */

/* Container sizing + text wrap */
.inset-right,
figure.inset-right {
  float: right;
  /* ~20–25% larger than the original 220px */
  width: 280px !important;     /* force size over Quarto defaults */
  max-width: 45vw;             /* can scale on very wide screens */
  margin: 0 0 1rem 1.5rem;     /* top right bottom left */
  /* Let text wrap around the circular shape */
  shape-outside: circle(50% at 50% 50%);
}

/* If the class is applied directly to the <img> */
.inset-right {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  border: 2px solid rgba(0,0,0,.06);
}

/* If Quarto wraps it in a <figure class="inset-right"> */
figure.inset-right > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  border: 2px solid rgba(0,0,0,.06);
}
figure.inset-right figcaption {
  text-align: center;
  font-size: 0.9rem;
}

/* Oval variant */
.inset-right.oval,
figure.inset-right.oval {
  /* Wrap text to an ellipse instead of a circle */
  shape-outside: ellipse(50% 40% at 50% 50%);
}
.inset-right.oval {
  aspect-ratio: 4 / 5;
  border-radius: 50% / 40%;
  clip-path: ellipse(50% 40% at 50% 50%);
}
figure.inset-right.oval > img {
  aspect-ratio: 4 / 5;
  border-radius: 50% / 40%;
  clip-path: ellipse(50% 40% at 50% 50%);
}

/* ================================
   Responsive adjustments
   ================================ */
@media (max-width: 1024px) {
  .inset-right,
  figure.inset-right {
    width: 260px !important;
    max-width: 42vw;
  }
}
@media (max-width: 800px) {
  .inset-right,
  figure.inset-right {
    width: 240px !important;
    max-width: 50vw;
  }
}
@media (max-width: 640px) {
  .inset-right,
  figure.inset-right {
    float: none;
    display: block;
    margin: 0 auto 1rem auto;
    width: 60vw !important;
    max-width: 240px;
  }
}