/* Fonts (SIL Open Font License; see ATTRIBUTIONS.md) */
@font-face {
  font-family: "Allan";
  src: url("/fonts/Allan-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("/fonts/Kalam-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/fonts/Oswald-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --sky: #87bfe6;      /* the original rgba(37,138,210,.55) over white */
  --pink: #e58294;
  --ink: #000;
  --shadow: #808080;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
}

/* ---------- Hero: sky band fading to white, with the photo and name on top ----------
   The composition is laid out on a 960px-wide stage that scales down with the window.
   --u is 1% of the stage width; every position below is in --u so the whole picture
   keeps its proportions at any width. */

.hero {
  container-type: inline-size;
  /* --band: where solid sky ends, as a share of the hero height */
  --band: 79.6%;
  background: linear-gradient(var(--sky) var(--band), #fff);
}

.stage {
  --u: min(1cqw, 9.6px);
  position: relative;
  width: min(960px, 100%);
  height: calc(84.69 * var(--u));   /* 647px sky + 166px fade at full size */
  margin: 0 auto;
}

.family-link {
  position: absolute;
  z-index: 3;
  top: 0;
  /* flush with the stage on wide screens, a 16px gutter once the window gets close */
  left: clamp(0px, 16px - (100cqw - 960px) / 2, 16px);
  font: 15px/2.07 "Oswald", "Arial Narrow", sans-serif;
  color: var(--ink);
  text-decoration: underline;
  text-shadow: 3px 3px 1px var(--shadow);
  animation: fade-in-right 5s ease 3s both;
}

.family-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.name {
  position: absolute;
  z-index: 1;
  top: calc(8.85 * var(--u));
  left: 42.7%;
  width: 55.4%;
  margin: 0;
  font: 400 calc(24.8 * var(--u)) / 1.6 "Allan", cursive;
  text-align: center;
  color: var(--pink);
  text-shadow: 1px 1px var(--shadow), 2px 2px var(--shadow), 3px 3px var(--shadow), 4px 4px var(--shadow);
  animation: fade-in 2s ease 2s both;
}

.photo {
  position: absolute;
  z-index: 2;
  top: calc(5.1 * var(--u));
  left: 7.08%;
  width: 64.4%;
  height: auto;
  animation: zoom-in 2s ease both;
}

/* ---------- Intro paragraph: starts on the fade, as in the original ---------- */

.intro {
  width: min(883px, 100% - 32px);
  margin: calc(-1 * min(16vw, 154px)) auto 0;
  padding-bottom: 3rem;
  position: relative;
}

.intro p {
  margin: 0;
  font: clamp(16px, 2.6vw, 25px) / 2.24 "Kalam", cursive;
  text-shadow: 1px 1px 1px var(--shadow);
  animation: fade-in 2s ease 2s both;
}

/* ---------- Phones: the original's tighter, larger-photo arrangement ----------
   Shifted down 8u so the family link has its own row above the photo. */

@media (max-width: 479px) {
  .hero { --band: 88%; }
  .stage { height: calc(85.8 * var(--u)); }   /* 216px sky + 33px fade at 320px, plus the shift */
  .name {
    top: calc(18 * var(--u));
    left: 50.3%;
    width: 49.1%;
    font-size: calc(22.5 * var(--u));
  }
  .photo {
    top: calc(9.25 * var(--u));
    left: 1.9%;
    width: 81.9%;
  }
  .intro { margin-top: 0.5rem; }
}

/* ---------- Entrance animations (kept from the original) ---------- */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: none; }
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .family-link, .name, .photo, .intro p { animation: none; }
}