:root {
  --plum: #8e1a63;
  --navy: #141a33;
  --cream: #fbe9dd;
  --peach: #f7dcca;
  --gold: #f3c07a;
  --gap: clamp(0.6rem, 2.2vh, 1.8rem); /* vertical rhythm between blocks */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--navy);
  background: var(--cream);
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;               /* correct height on mobile browsers */
  display: grid;
  grid-template-columns: 48% 52%;
  background:
    radial-gradient(ellipse at 20% 20%, #fff6ef 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, #f6d6c2 0%, transparent 50%),
    linear-gradient(135deg, #fcefe5 0%, var(--peach) 100%);
}

/* ---------- Left column ---------- */
.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1rem, 3vw, 3rem);
  text-align: center;
}

/* Logo: everything sized in em, so one font-size scales the whole logo */
.logo {
  display: flex;
  align-items: flex-end;
  gap: 0.08em;
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
}

.logo-mark { position: relative; width: 1.2em; height: 1.2em; flex-shrink: 0; }
.logo-mark .ring {
  position: absolute; inset: 0;
  border: 0.085em solid var(--plum);
  border-radius: 50%;
}
.logo-mark .dot {
  position: absolute; top: 0.07em; right: 0.03em;
  width: 0.28em; height: 0.28em;
  background: var(--plum);
  border: 0.05em solid var(--cream);
  border-radius: 50%;
}
.logo-mark .plus {
  position: absolute; top: -0.32em; right: -0.25em;
  color: var(--plum); font-size: 0.42em; font-family: Arial, sans-serif;
}

.logo-text {
  font-weight: 600;
  line-height: 0.9;
  color: var(--navy);
}
.logo-text span { color: var(--plum); }

.logo-sub, .opening, .tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.logo-sub {
  margin-top: 0.8rem;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(0.7rem, 1vw, 0.95rem);
  letter-spacing: 0.45em;
  padding-left: 0.45em;             /* balances the trailing letter-spacing */
  color: var(--navy);
}

.line {
  display: inline-block;
  flex-shrink: 0;
  width: clamp(18px, 2.5vw, 36px);
  height: 1.5px;
  background: currentColor;
}
.line.long { width: clamp(24px, 5vw, 70px); }

.opening {
  margin-top: calc(var(--gap) * 1.4);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: clamp(0.2em, 0.6vw, 0.35em);
  color: var(--plum);
  white-space: nowrap;
}

/* Headline */
h1 { margin-top: calc(var(--gap) * 0.6); line-height: 0.95; font-weight: 500; }
.h-top, .h-bottom {
  display: block;
  font-size: clamp(3.2rem, 7.6vw, 8rem);
}
.h-top { color: var(--navy); }
.h-bottom { font-style: italic; color: var(--plum); }

.lead {
  margin-top: var(--gap);
  font-size: clamp(1.15rem, 1.9vw, 1.9rem);
  font-weight: 500;
  text-wrap: balance;
}

/* Map */
.map {
  width: min(100%, 520px);
  height: auto;
  margin-top: var(--gap);
  filter: drop-shadow(0 6px 10px rgba(180, 110, 100, 0.2));
}
.map .links path { filter: drop-shadow(0 0 4px #fff3c4); }
.map .halo {
  fill: #fff2c9;
  opacity: 0.8;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { r: 12; opacity: 0.6; }
  50%      { r: 18; opacity: 0.95; }
}

.tagline {
  margin-top: var(--gap);
  font-size: clamp(1.1rem, 1.8vw, 1.8rem);
  color: var(--plum);
}
.tagline em { text-wrap: balance; }
.tagline .line { width: clamp(20px, 5vw, 80px); }

/* ---------- Right column (photo) ---------- */
.photo {
  position: relative;
  overflow: hidden;
}
/* photo fills the panel; the focus point keeps both faces in view at any size */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/photo.jpg") 40% 30% / cover no-repeat;
  /* soft fade into the page background (no visible seam) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%);
          mask-image: linear-gradient(to right, transparent 0%, #000 28%);
}

/* ---------- Large screens ---------- */
@media (min-width: 1800px) {
  .content { padding-left: 5vw; }
}

/* ---------- Small laptops / tablets landscape ---------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .h-top, .h-bottom { font-size: clamp(3.2rem, 8.5vw, 6rem); }
  .lead { font-size: 1.25rem; }
  .tagline { font-size: 1.2rem; }
}

/* ---------- Tablets portrait & phones: stack photo above text ---------- */
@media (max-width: 900px) {
  :root { --gap: clamp(0.8rem, 2.5vw, 1.5rem); }

  .hero { grid-template-columns: 1fr; }

  .photo {
    order: -1;
    height: clamp(340px, 72vw, 620px);
  }
  .photo::after {
    background-position: 45% 15%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }

  .content {
    margin-top: -1rem;              /* tuck text slightly into the fade */
    padding: 0 1.5rem 2.5rem;
  }
  .logo { font-size: clamp(2.2rem, 7vw, 3.2rem); }
  .logo-sub { font-size: clamp(0.7rem, 2vw, 0.9rem); }
  .opening { font-size: clamp(0.95rem, 2.8vw, 1.3rem); }
  .h-top, .h-bottom { font-size: clamp(3rem, 13vw, 6.5rem); }
  .lead { font-size: clamp(1.1rem, 3.4vw, 1.5rem); }
  .map { width: min(100%, 460px); }
  .tagline { font-size: clamp(1.05rem, 3.2vw, 1.4rem); }
  .tagline .line, .line.long { width: clamp(16px, 6vw, 50px); }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .photo { height: 92vw; }
  .content { padding: 0 1rem 2rem; }
  .logo-sub { letter-spacing: 0.3em; padding-left: 0.3em; }
  .opening { letter-spacing: 0.18em; gap: 0.5rem; }
  .tagline { flex-direction: column; gap: 0.6rem; }
  .tagline .line { width: 50px; }
  .tagline .line:first-child { display: none; }   /* one divider below the text */
}

/* ---------- Short landscape screens (phones turned sideways) ---------- */
@media (min-width: 901px) and (max-height: 620px) {
  .hero { min-height: auto; }
  .content { padding-block: 1.5rem; }
  .h-top, .h-bottom { font-size: clamp(2.8rem, 6vw, 5rem); }
  .map { width: min(100%, 360px); }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { grid-template-columns: 45% 55%; }
  .photo { order: 0; height: auto; min-height: 100svh; position: sticky; top: 0; }
  .photo::after {
    background-position: 40% 30%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%);
            mask-image: linear-gradient(to right, transparent 0%, #000 28%);
  }
  .content { margin-top: 0; padding: 1.5rem 1rem; }
  .h-top, .h-bottom { font-size: clamp(2.4rem, 7vw, 3.6rem); }
  .map { width: min(100%, 300px); }
}

/* ---------- Accessibility: respect reduced-motion setting ---------- */
@media (prefers-reduced-motion: reduce) {
  .map .halo { animation: none; }
}