/*
  Single-page Galaxy-stack pass.
  Wide screens place the heart message under Homer and the introduction beside
  it. Narrow screens follow the visual order: Homer, actions, story, footer.
*/

.hero {
  height: 100svh;
  min-height: 680px;
  max-height: none;
}

.hero-content {
  grid-template-areas:
    "portrait heading"
    "heart intro"
    "actions actions";
  grid-template-rows: auto auto auto;
  align-content: start;
  align-items: start;
  row-gap: clamp(.55rem, .9vw, .75rem);
  padding-bottom: 4.8rem;
}

.homer-portrait { grid-area: portrait; }
.hero-heading { grid-area: heading; align-self: center; max-width: 680px; }
.hero-intro { grid-area: intro; align-self: center; max-width: 620px; margin: 0; }
.hero-heart { grid-area: heart; align-self: center; max-width: 610px; margin: 0; }
.hero-actions { grid-area: actions; }

.skip-link,
nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.hero-actions .magic-button {
  min-height: 60px;
  padding-top: .58rem;
  padding-bottom: .55rem;
}

.hero-heart {
  padding: .75rem 1rem;
  color: #e5f2ee;
  background: linear-gradient(110deg, rgba(15,65,61,.66), rgba(5,22,31,.4));
  border-left: 3px solid var(--gold);
  border-radius: 0 .9rem .9rem 0;
  font: italic .88rem/1.45 var(--display);
  box-shadow: 0 12px 24px rgba(0,0,0,.16);
}

.hero-heart p { margin-bottom: .35rem; }
.hero-heart cite { color: var(--gold-pale); font: 700 .7rem/1 var(--sans); }

.christmas-countdown {
  --countdown-accent: #58a98f;
  position: absolute;
  bottom: 4%;
  left: 50%;
  z-index: 4;
  width: max-content;
  min-width: 10rem;
  max-width: calc(100% - 1rem);
  padding: .35rem 1rem .4rem .8rem;
  color: #fffaf0;
  background:
    linear-gradient(125deg, rgba(255,255,255,.16), transparent 44%),
    linear-gradient(155deg, color-mix(in srgb, var(--countdown-accent) 55%, rgba(5,24,32,.92)), rgba(3,14,25,.88));
  border: 1px solid rgba(255,239,191,.5);
  /* The former angled polygon edge is preserved in prior revisions; this
     release uses a conventional rounded rectangle so no corner reaches into
     either subject's face. */
  border-radius: .8rem;
  filter: drop-shadow(0 9px 12px rgba(0,0,0,.35));
  text-align: left;
  transform: translateX(-50%) rotate(-1deg);
  transition: width .3s ease, padding .3s ease;
}

html[data-season-accent="gold"] .christmas-countdown { --countdown-accent: #d9aa47; }
html[data-season-accent="cranberry"] .christmas-countdown { --countdown-accent: #bc4854; }
html[data-season-accent="winter"] .christmas-countdown { --countdown-accent: #5b9eaf; }

.countdown-message {
  margin: 0 0 .12rem;
  color: var(--gold-pale);
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.countdown-year {
  display: none;
  margin: 0 0 .3rem;
  color: rgba(255,255,255,.76);
  font-size: .45rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.countdown-values {
  display: flex;
  align-items: end;
  gap: .38rem;
  width: max-content;
  max-width: 100%;
}

.countdown-unit {
  display: none;
  align-items: baseline;
  gap: .25rem;
  min-width: 1.55rem;
}

.countdown-unit strong {
  display: block;
  color: white;
  font: 700 1rem/.9 var(--display);
  text-shadow: 0 3px 10px rgba(0,0,0,.55);
}

.countdown-unit small {
  display: block;
  margin-top: 0;
  color: rgba(255,255,255,.68);
  font-size: .38rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.christmas-countdown[data-urgency="far"] .countdown-days,
.christmas-countdown[data-urgency="near"] .countdown-days,
.christmas-countdown[data-urgency="near"] .countdown-hours,
.christmas-countdown[data-urgency="near"] .countdown-minutes,
.christmas-countdown[data-urgency="final-week"] .countdown-unit,
.christmas-countdown[data-urgency="final-day"] .countdown-hours,
.christmas-countdown[data-urgency="final-day"] .countdown-minutes,
.christmas-countdown[data-urgency="final-day"] .countdown-seconds {
  display: flex;
}

.christmas-countdown[data-urgency="far"] .countdown-days strong { font-size: 1.45rem; }
.christmas-countdown[data-urgency="final-day"] .countdown-unit strong { color: var(--gold-pale); }
.christmas-countdown[data-urgency="christmas"] .countdown-year,
.christmas-countdown[data-urgency="christmas"] .countdown-values { display: none; }
.christmas-countdown[data-urgency="christmas"] .countdown-message { margin: .5rem 0; font-size: .72rem; }

.hero-footer {
  position: absolute;
  right: max(2.5vw, calc((100vw - 1200px) / 2));
  bottom: .25rem;
  left: max(2.5vw, calc((100vw - 1200px) / 2));
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0 .5rem;
  color: #b9cbcf;
  background: rgba(2, 9, 20, .9);
  font-size: .68rem;
}

.hero-footer p { margin: 0; }
.hero-footer a {
  min-height: 44px;
  color: var(--gold-pale);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 980px) {
  .christmas-countdown {
    min-width: 9.5rem;
    padding: .3rem .9rem .35rem .7rem;
  }

  .countdown-message { font-size: .42rem; }
  .countdown-unit strong { font-size: .82rem; }
}

@media (max-width: 720px) {
  .hero {
    height: auto;
    min-height: 100svh;
  }

  .hero-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "portrait"
      "actions"
      "heading"
      "intro"
      "heart";
    row-gap: .55rem;
    width: min(94vw, 560px);
    min-height: auto;
    padding: 4.8rem 0 1rem;
    text-align: center;
  }

  .homer-portrait {
    justify-self: center;
  }

  .hero-actions {
    justify-self: center;
  }

  .hero-heading {
    justify-self: center;
    max-width: 540px;
    text-align: center;
  }

  .hero-intro {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .hero-heart {
    margin-right: auto;
    margin-left: auto;
    border-left: 0;
    border-top: 2px solid var(--gold);
    border-radius: .8rem;
  }

  .christmas-countdown {
    bottom: 3%;
    left: 50%;
    min-width: 9rem;
    padding: .25rem .8rem .3rem .58rem;
    transform: translateX(-50%) rotate(-1deg);
  }

  .countdown-message { font-size: .36rem; letter-spacing: .05em; }
  .countdown-year { font-size: .33rem; }
  .countdown-values { gap: .22rem; }
  .countdown-unit { min-width: 1.2rem; }
  .countdown-unit strong { font-size: .72rem; }
  .countdown-unit small { font-size: .3rem; }
  .christmas-countdown[data-urgency="far"] .countdown-days strong { font-size: 1rem; }

  .hero-footer {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    padding: .75rem 5vw 1rem;
    text-align: center;
  }

  .hero-footer .footer-contact {
    flex-direction: row;
    gap: 1rem;
  }
}

@media (max-width: 440px) and (max-height: 680px) {
  .hero-content {
    row-gap: .35rem;
    padding-top: 3.9rem;
  }

  .hero-heart {
    padding: .55rem .65rem;
    font-size: .72rem;
  }

  .christmas-countdown {
    min-width: 8.5rem;
    padding-top: .2rem;
    padding-bottom: .25rem;
  }
}

@supports not (background: color-mix(in srgb, white, black)) {
  .christmas-countdown {
    background: linear-gradient(155deg, rgba(31,101,89,.94), rgba(3,14,25,.9));
  }
}

@media (prefers-reduced-motion: reduce) {
  .christmas-countdown {
    filter: none;
  }
}