/* ============================================================
   home2.css — alternate homepage treatment
   Loaded only by home2.php, after style.css. Every rule is scoped
   under body.h2 so no other page on the site is affected.
   ============================================================ */

body.h2 {
  --h2-ink:        #10130F;
  --h2-night:      #0A1220;
  --h2-night-deep: #060B14;
  --h2-green:      #0E3825;
  --h2-gold:       #C9A24C;
  --h2-gold-lt:    #E8C46B;
  --h2-cream:      #FAF6EC;
  --h2-cream-2:    #F3ECDC;
  --h2-rule:       rgba(201,162,76,0.35);
}

/* The original homepage's blinking bulb strip never renders here, but guard
   against it appearing via any shared include. */
body.h2 .lights { display: none; }

body.h2 .h2wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 3;
}

/* ── BUTTONS ───────────────────────────────────────────── */
body.h2 .h2btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid var(--h2-gold);
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
body.h2 .h2btn svg { width: 15px; height: 15px; }
body.h2 .h2btn--gold {
  background: var(--h2-gold); color: #1A1206; border-color: var(--h2-gold);
}
body.h2 .h2btn--gold:hover { background: var(--h2-gold-lt); border-color: var(--h2-gold-lt); }
body.h2 .h2btn--ghost {
  background: transparent; color: var(--h2-gold-lt);
}
body.h2 .h2btn--ghost:hover { background: rgba(201,162,76,0.14); }
body.h2 .h2btn--lg { padding: 18px 40px; font-size: 12px; }
/* On the cream sections the ghost button needs darker ink to stay legible. */
body.h2 .h2sec--paper .h2btn--ghost { color: #6B531C; border-color: rgba(201,162,76,0.75); }
body.h2 .h2sec--paper .h2btn--ghost:hover { background: rgba(201,162,76,0.16); }

body.h2 .h2eyebrow {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--h2-gold); margin-bottom: 26px;
}
body.h2 .h2eyebrow--center { text-align: center; }

/* ── HERO ──────────────────────────────────────────────── */
body.h2 .h2hero {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: center;
  padding: 120px 32px 96px;
  overflow: hidden;
  background: var(--h2-night-deep);
  isolation: isolate;
}
body.h2 .h2hero__bg {
  position: absolute; inset: 0;
  background: url('/assets/images/decor/hero-backdrop.jpg?v=3') center right / cover no-repeat;
  z-index: 0;
}
/* Darkens the left half so the headline always clears WCAG contrast, whatever
   the backdrop happens to be doing behind it. */
body.h2 .h2hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(6,11,20,0.95) 0%, rgba(6,11,20,0.86) 42%, rgba(6,11,20,0.30) 60%, rgba(6,11,20,0.06) 78%, rgba(6,11,20,0.02) 100%),
    linear-gradient(180deg, rgba(6,11,20,0.50) 0%, transparent 22%, transparent 70%, rgba(6,11,20,0.58) 100%);
}
/* Christmas-light swag. Vector, so it spans the FULL section width at any viewport
   and its wire stays anchored to both top corners (viewBox 1000x180 => height is
   18% of width). Sized by width, never centred at a fixed pixel width — that was
   what left the old raster string floating in mid-air. */
body.h2 .h2garland {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto;
  z-index: 2; pointer-events: none;
}
body.h2 .h2hero__inner {
  position: relative; z-index: 3;
  max-width: 1180px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 64px; align-items: center;
}
body.h2 .h2hero__title {
  font-family: var(--display); font-weight: 900; font-style: italic;
  font-size: clamp(52px, 7vw, 96px);
  line-height: 0.9; letter-spacing: -0.035em;
  color: var(--h2-cream);
  margin: 0;
  text-shadow: 0 6px 40px rgba(0,0,0,0.65);
}
body.h2 .h2hero__title span,
body.h2 .h2hero__title em { display: block; font-style: italic; }
body.h2 .h2hero__title em { color: var(--h2-gold-lt); }
body.h2 .h2hero__sub {
  margin-top: 26px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.18; color: var(--h2-cream);
  text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}
body.h2 .h2hero__bio {
  margin-top: 20px; max-width: 480px;
  font-family: var(--serif); font-size: 16.5px; line-height: 1.65;
  color: rgba(250,246,236,0.86);
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
body.h2 .h2hero__actions {
  margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px;
}
body.h2 .h2hero__side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 22px;
}

/* Countdown plaque */
body.h2 .h2count {
  position: relative;
  padding: 13px 24px 14px;
  text-align: center;
  background: rgba(250,246,236,0.96);
  border: 3px solid var(--h2-gold);
  border-radius: 3px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
body.h2 .h2count::before {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid rgba(14,56,37,0.32); border-radius: 2px; pointer-events: none;
}
body.h2 .h2count__label {
  display: block;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #8A6A22; margin-bottom: 7px;
}
body.h2 .h2count__nums { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
body.h2 .h2count__today {
  display: block;
  font-family: var(--display); font-weight: 900; font-style: italic;
  font-size: 24px; line-height: 1; color: var(--cranberry);
}

/* Portrait */
body.h2 .h2portrait {
  position: relative; margin: 0;
  width: 100%; max-width: 400px;
  padding: 14px;
  background: linear-gradient(160deg, #F6EFDF 0%, #E6D8B8 100%);
  border: 1px solid rgba(201,162,76,0.9);
  border-radius: 3px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.62);
}
body.h2 .h2portrait img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover; object-position: center 25%;
  border-radius: 2px;
}

/* ── SECTIONS ──────────────────────────────────────────── */
body.h2 .h2sec { position: relative; padding: 104px 32px; z-index: 3; }
/* Must follow .h2sec — same specificity, and .h2sec's `padding` shorthand would
   otherwise reset this back to 104px and let the swag overlap the heading. */
/* The swag is 18% as tall as it is wide, and it spans the viewport — so the
   clearance has to scale with the viewport too, or it overlaps on wide screens. */
body.h2 .h2sec--garland { padding-top: max(120px, calc(18vw + 44px)); }
body.h2 .h2sec--paper {
  background: var(--h2-cream) url('/assets/images/decor/paper-texture.jpg?v=2') center / 600px auto repeat;
  color: var(--h2-ink);
}
body.h2 .h2sec--dark {
  background: var(--h2-night);
  color: var(--h2-cream);
}
body.h2 .h2sec--dark::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,162,76,0.10), transparent 62%);
  pointer-events: none;
}

body.h2 .h2divider {
  display: block; width: 300px; max-width: 62%;
  height: auto; margin: 0 auto 30px;
  opacity: 0.9;
}
body.h2 .h2sec__title {
  font-family: var(--display); font-weight: 900; font-style: italic;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.02; letter-spacing: -0.025em;
  text-align: center; color: var(--h2-green); margin: 0;
}
body.h2 .h2sec__title em { color: #8A6A22; font-style: italic; }
body.h2 .h2sec__title--light { color: var(--h2-cream); }
body.h2 .h2sec__title--light em { color: var(--h2-gold-lt); }
body.h2 .h2sec__lede {
  max-width: 660px; margin: 24px auto 0;
  text-align: center;
  font-family: var(--serif); font-size: 17.5px; line-height: 1.7;
  color: rgba(16,19,15,0.78);
}

/* Credentials */
body.h2 .h2creds {
  margin: 64px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px;
  list-style: none; padding: 0;
}
body.h2 .h2cred { text-align: center; }
body.h2 .h2cred__mark {
  display: block; height: 92px; width: auto; margin: 0 auto 20px;
  opacity: 0.92;
}
body.h2 .h2cred h3 {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  color: var(--h2-green); margin: 0 0 10px;
}
body.h2 .h2cred p {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.6;
  color: rgba(16,19,15,0.7); margin: 0;
}

/* Gallery preview */
body.h2 .h2shots {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
body.h2 .h2shot {
  display: block; overflow: hidden;
  border: 1px solid rgba(201,162,76,0.4);
  border-radius: 2px;
  background: #000;
}
body.h2 .h2shot img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform 0.5s ease, opacity 0.3s;
  opacity: 0.94;
}
body.h2 .h2shot:hover img { transform: scale(1.05); opacity: 1; }
body.h2 .h2more { margin-top: 44px; text-align: center; }

/* Testimonials */
body.h2 .h2quotes {
  margin-top: 52px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
body.h2 .h2quote {
  margin: 0; padding: 34px 30px;
  background: rgba(255,255,255,0.62);
  border: 1px solid var(--h2-rule);
  border-radius: 3px;
  display: flex; flex-direction: column;
}
body.h2 .h2quote__stars {
  color: var(--h2-gold); font-size: 15px; letter-spacing: 3px;
  margin-bottom: 16px;
}
body.h2 .h2quote blockquote {
  margin: 0 0 22px;
  font-family: var(--serif); font-size: 16.5px; line-height: 1.68;
  color: rgba(16,19,15,0.84); flex: 1;
}
body.h2 .h2quote blockquote::before { content: '\201C'; }
body.h2 .h2quote blockquote::after  { content: '\201D'; }
body.h2 .h2quote figcaption {
  border-top: 1px solid var(--h2-rule); padding-top: 16px;
}
body.h2 .h2quote__name {
  display: block;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--h2-green); font-weight: 700;
}
body.h2 .h2quote__event {
  display: block; margin-top: 6px;
  font-family: var(--serif); font-size: 13.5px; font-style: italic;
  color: rgba(16,19,15,0.55);
}

/* ── CTA BAND ──────────────────────────────────────────── */
body.h2 .h2cta {
  position: relative; z-index: 3;
  padding: 120px 32px;
  overflow: hidden;
  background: var(--h2-night-deep);
  text-align: center;
  isolation: isolate;
}
body.h2 .h2cta__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('/assets/images/decor/cta-backdrop.jpg?v=2') center / cover no-repeat;
}
body.h2 .h2cta__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,11,20,0.74) 0%, rgba(6,11,20,0.52) 48%, rgba(6,11,20,0.82) 100%);
}
body.h2 .h2cta__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
body.h2 .h2cta__title {
  font-family: var(--display); font-weight: 900; font-style: italic;
  font-size: clamp(38px, 5vw, 62px); line-height: 1;
  color: var(--h2-cream); margin: 0;
  text-shadow: 0 6px 34px rgba(0,0,0,0.7);
}
body.h2 .h2cta__title em { color: var(--h2-gold-lt); font-style: italic; }
body.h2 .h2cta__sub {
  margin: 22px auto 38px; max-width: 540px;
  font-family: var(--serif); font-size: 18px; line-height: 1.6;
  color: rgba(250,246,236,0.86);
}
body.h2 .h2cta__contact {
  margin-top: 30px;
  font-family: var(--serif); font-size: 15px;
  color: rgba(250,246,236,0.7);
}
body.h2 .h2cta__contact a { color: var(--h2-gold-lt); }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.h2 .h2hero { min-height: 0; padding: 96px 24px 80px; }
  body.h2 .h2hero__inner { grid-template-columns: 1fr; gap: 48px; }
  body.h2 .h2hero__side { align-items: center; }
  body.h2 .h2hero__bio { max-width: none; }
  body.h2 .h2creds { grid-template-columns: 1fr; gap: 40px; max-width: 460px; margin-inline: auto; }
  body.h2 .h2quotes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  body.h2 .h2shots { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  body.h2 .h2sec, body.h2 .h2cta { padding: 76px 22px; }
  /* Must come after the shorthand above, or it is reset and the swag overlaps. */
  body.h2 .h2sec--garland { padding-top: max(110px, calc(18vw + 34px)); }
  body.h2 .h2wrap { padding: 0 4px; }
  body.h2 .h2hero { padding: 84px 22px 68px; }
  body.h2 .h2hero__actions .h2btn { flex: 1 1 100%; justify-content: center; }
  body.h2 .h2portrait { max-width: 330px; }
  body.h2 .h2cred__mark { height: 76px; }
  body.h2 .h2divider { width: 220px; }
  /* The backdrop is a wide landscape crop; anchor it so the lit trees stay in frame. */
  body.h2 .h2hero__bg { background-position: 72% center; }
}

@media (prefers-reduced-motion: reduce) {
  body.h2 .h2shot img { transition: none; }
}