/* ── Hero section ── */
.home-hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("/images/cabin-hero.jpg") center center / cover no-repeat;
  filter: brightness(1.15) saturate(1.08);
  z-index: 0;
}

.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 8, 2, 0.15);
  z-index: 1;
}

.home-hero__photo-date {
  position: absolute;
  bottom: 10px;
  right: 14px;
  z-index: 2;
  margin: 0;
  font-family: var(--font-body, Lora, serif);
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.home-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
}

/* ── Masthead ── */
.masthead {
  text-align: center;
  margin-bottom: 22px;
}

.masthead__rule {
  display: none;
}

.masthead__title {
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 700;
  color: #1b2a4a;
  letter-spacing: 10px;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}

.masthead__tagline {
  font-style: italic;
  font-size: 25px;
  color: #1b2a4a;
  letter-spacing: 1.5px;
  margin-top: var(--space-sm);
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.3);
  font-weight: 700;
}

/* ── Don & Lawana oval — standalone, centered between masthead and grid ── */
.oval-card--dl {
  width: clamp(460px, 56vw, 680px);
  height: 116px;
  margin: 0 auto 22px;
  padding: 14px 60px;
  border-radius: 50%;
  background: rgba(255, 252, 245, 0.52);
  border: 2px solid rgba(200, 169, 110, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-med), border-color var(--transition-med),
    transform 0.22s, box-shadow var(--transition-med);
}

.oval-card--dl:hover {
  background: rgba(255, 252, 245, 0.68);
  border-color: var(--accent-primary);
  transform: scale(1.04);
  box-shadow: var(--shadow-heavy);
}

.oval-card--dl .oval-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 600;
  color: #1b2a4a;
  line-height: 1.2;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4);
}

.oval-card--dl .oval-card__cta {
  font-size: 12px;
  color: #1e130a;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
}

/* ── Oval card grid — 5-column staggered layout ── */
.oval-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1fr 1fr;
  grid-template-rows: 50px 130px 130px;
  column-gap: 20px;
  row-gap: 0;
  width: 100%;
  max-width: 1200px;
  padding-bottom: 20px;
}

/* ── Grid placement ── */
.oval-place--o8      { grid-column: 1; grid-row: 1 / 3; align-self: start; margin-top: -60px; }
.oval-place--o8 {
  background: rgba(255, 252, 245, 0.45);
}
.oval-place--o8 .oval-card__title {
  font-weight: 700;
}
.oval-place--o8 .oval-card__cta {
  font-weight: 600;
}
.oval-place--ann     { grid-column: 2; grid-row: 2; align-self: start; }
.oval-place--reunion { grid-column: 3; grid-row: 1 / 4; }
.oval-place--news    { grid-column: 4; grid-row: 2; align-self: start; }
.oval-place--hist    { grid-column: 5; grid-row: 1 / 3; align-self: start; margin-top: -60px; }
/* Quilt & Recipes sit in the outer columns, directly below the O-8 and
   Reunion History ovals — keeps them higher on the page so they're less
   likely to cover the background mountain scene. */
.oval-place--quilt   { grid-column: 1; grid-row: 3; align-self: start; margin-top: -47px; position: relative; left: -12px; }
.oval-place--recipes { grid-column: 5; grid-row: 3; align-self: start; margin-top: -47px; position: relative; left: 12px; }

/* ── Base oval card ── */
.oval-card {
  border-radius: 50%;
  background: var(--overlay-card);
  border: 2.5px solid rgba(90, 62, 40, 0.7);
  backdrop-filter: blur(3px);
  cursor: pointer;
  transition: background var(--transition-med), border-color var(--transition-med),
    transform 0.22s, box-shadow var(--transition-med);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.oval-card:hover {
  background: var(--overlay-card-hover);
  border-color: var(--accent-primary);
  transform: scale(1.06);
  box-shadow: var(--shadow-heavy);
}

.oval-card__icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.oval-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  color: #1a2e1b;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4);
}

.oval-card__cta {
  font-size: 13px;
  color: #1e130a;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-top: var(--space-xs);
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
}

/* ── Small ovals ── */
.oval-card--sm {
  width: 115%;
  height: 130px;
  padding: var(--space-sm) var(--space-lg);
  margin-left: -7.5%;
  border-radius: 50%;
}

.oval-card--sm .oval-card__icon {
  font-size: 26px;
  margin-bottom: 4px;
}

.oval-card--sm .oval-card__title {
  font-size: 16px;
  margin-bottom: 2px;
}

.oval-card--sm .oval-card__cta {
  font-size: 11px;
  margin-top: 2px;
}

/* ── Future section placeholder ovals ── */
.oval-card--future {
  opacity: 0.42;
  border: 2.5px dashed rgba(90, 62, 40, 0.5);
  cursor: default;
}

.oval-card--future:hover {
  transform: none;
  background: var(--overlay-card);
  border-color: rgba(200, 169, 110, 0.85);
  box-shadow: none;
}

.oval-card--future .oval-card__title {
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
}

/* ── Large reunion oval ── */
.oval-card--reunion {
  width: 100%;
  height: 100%;
  border: 3px solid rgba(90, 62, 40, 0.75);
  background: var(--overlay-reunion);
  padding: 18px 40px;
}

.oval-card--reunion::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(200, 169, 110, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.reunion-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

/* ── Reunion medallion ── */
.reunion-medallion {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--accent-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(200, 169, 110, 0.25);
}

.reunion-medallion__number {
  font-family: var(--font-display);
  font-size: 51px;
  font-weight: 700;
  color: var(--surface-dark);
  line-height: 1;
}

.reunion-medallion__label {
  font-size: 10px;
  margin-top: 6px;
  font-weight: 600;
  color: var(--surface-mid);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Reunion text ── */
.reunion-text__title {
  font-family: var(--font-display);
  font-size: 28px;
  color: #1a2e1b;
  margin-bottom: var(--space-xs);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4);
}

.reunion-text__when {
  color: #243d25;
  font-style: italic;
  font-size: 16px;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
  margin-bottom: 12px;
}

/* ── Countdown ── */
.countdown {
  display: flex;
  gap: 16px;
}

.countdown__unit {
  text-align: center;
}

.countdown__number {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: #1a2e1b;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4);
}

.countdown__label {
  display: block;
  font-size: 11px;
  color: #243d25;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 3px;
}

.countdown__sep {
  font-size: 22px;
  color: rgba(200, 169, 110, 0.5);
  align-self: flex-start;
  padding-top: 2px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .oval-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    row-gap: 16px;
    max-width: 480px;
  }

  .oval-card--dl {
    width: clamp(280px, 84%, 440px);
    height: 92px;
  }

  .oval-place--reunion { grid-column: 1 / 3; grid-row: 1; height: auto; }
  .oval-place--ann     { grid-column: 1; grid-row: 2; }
  .oval-place--news    { grid-column: 2; grid-row: 2; }
  .oval-place--o8      { grid-column: 1; grid-row: 3; }
  .oval-place--hist    { grid-column: 2; grid-row: 3; }
  .oval-place--quilt   { grid-column: 1; grid-row: 4; margin-top: 0; }
  .oval-place--recipes { grid-column: 2; grid-row: 4; margin-top: 0; }

  .oval-card--reunion {
    height: auto;
    padding: 22px 28px;
    border-radius: 20%;
  }

  .oval-card--sm {
    width: 100%;
    height: 120px;
    margin-left: 0;
    border-radius: 18%;
    padding: var(--space-sm) var(--space-md);
  }

  .oval-card--dl {
    border-radius: 20%;
    height: 100px;
    padding: 20px 40px;
  }
}

@media (max-width: 540px) {
  .masthead__title {
    font-size: 36px;
    letter-spacing: 5px;
  }

  .oval-card--sm {
    border-radius: 15%;
  }

  .oval-card--dl {
    border-radius: 17%;
    height: 96px;
    padding: 22px 30px;
  }

  .oval-card--reunion {
    border-radius: 14%;
  }
}