/* Home hero — Chief Nugent's portrait, with the scholarship emblem as a medallion.
   Layered on top of the compiled Astro bundle; uses the site's own tokens only.

   The photo is left in its own colour: bright Florida sky, navy SPFR cap, his
   grin. The page's brass/ember warmth is carried by the frame around it — the
   glow behind, the hairline, the grounding fade — never by a tint over his face. */

.hero__portrait {
  margin: 0;
  position: relative;
  isolation: isolate;
  animation: rise 1.4s var(--ease) 0.25s backwards;
}

/* the same slow coal-flicker the emblem had on its own */
.hero__portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14%;
  background:
    radial-gradient(circle at 52% 42%, rgba(200, 162, 74, 0.3), transparent 62%),
    radial-gradient(circle at 40% 88%, rgba(180, 64, 44, 0.24), transparent 66%);
  animation: flicker 7s ease-in-out infinite;
  pointer-events: none;
}

/* arch-topped frame — a memorial shape rather than a plain rectangle */
.hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: 46% 46% 3px 3px / 30% 30% 3px 3px;
}

.hero__frame img {
  display: block;
  width: 100%;
  /* height:auto is required — the img's height attribute is a presentational
     hint that otherwise beats aspect-ratio */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 34%;
  /* full colour, lifted a touch — no grayscale, no sepia. Brightness is left
     alone on purpose: the shirt and the sky are already near the top of the
     range and any lift there is what read as washed out. */
  filter: saturate(1.3) contrast(1.06);
}

/* a small sun flare in the corner the light already came from, and nothing
   else. Golden rather than white, and tight, so the sky stays blue. */
.hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    ellipse 42% 30% at 82% 6%,
    rgba(255, 218, 150, 0.5),
    transparent 70%
  );
}

/* grounding fade + hairline — clipped to the arch so the photo sits in the page.
   The fade is bottom-only now; no all-over vignette dulling his face. */
.hero__edge { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.hero__edge::before,
.hero__edge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hero__edge::before {
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(20, 17, 15, 0.34) 9%, transparent 26%),
    radial-gradient(ellipse 88% 82% at 50% 40%, transparent 62%, rgba(20, 8, 4, 0.34) 100%);
}
.hero__edge::after {
  border: 1px solid rgba(200, 162, 74, 0.62);
  box-shadow: inset 0 0 0 4px rgba(20, 17, 15, 0.35);
}

/* the scholarship emblem, kept on the page as a medallion over the corner */
.hero__medallion {
  position: absolute;
  right: -1%;
  bottom: 7%;
  width: clamp(5.5rem, 26%, 10.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #0a0806;
  box-shadow:
    0 0 0 1px rgba(200, 162, 74, 0.55),
    0 0 0 7px #0a0806,
    0 0 0 8px rgba(200, 162, 74, 0.22),
    0 18px 40px rgba(0, 0, 0, 0.7);
}
.hero__medallion img {
  width: 92%;
  max-width: none;
  height: auto;
  display: block;
  /* same screen blend the full-size emblem used — drops its black background */
  mix-blend-mode: screen;
  filter: contrast(1.04) saturate(1.05);
}

.hero__portrait figcaption {
  margin-top: 1.15rem;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  color: var(--brass-lo);
}

@media (max-width: 60rem) {
  .hero__portrait { order: -1; max-width: 24rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__portrait,
  .hero__portrait::before { animation: none; }
}