:root {
  /* Tones sampled from hero.png so the page reads as one continuous wall. */
  --wall: #e6ac6c;
  --wall-top: #dfa25f;
  --wall-seam: #e5aa69;
  --text: #141414;
  --muted: #453c30;
  --hairline: rgba(20, 20, 20, 0.16);
  --inverse-bg: #141414;
  --inverse-text: #f6f2ea;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--wall-seam);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hero {
  display: block;
  width: 100%;
}

.copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.copy-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.name {
  margin: 0;
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--text);
}

.lede {
  margin: 0;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--text);
}

.support {
  margin: 0;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
}

.cta-wrap {
  margin: 0;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.4rem;
  min-height: 2.875rem;
  border-radius: 999px;
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

@keyframes rise {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .copy-inner > * {
    animation: rise 600ms var(--ease) both;
  }

  .lede {
    animation-delay: 50ms;
  }

  .support {
    animation-delay: 100ms;
  }

  .cta-wrap {
    animation-delay: 150ms;
  }
}

/* ——————————————————————————————————————————————
   Stacked (phones, portrait tablets, narrow windows)

   The scene can't be cropped to portrait without losing either the
   couple or the wall, so the wall is *extended* upward with the same
   tones sampled from the art. Image sits at the bottom, text lives on
   the empty wall above it, and a mask hides the seam.
   —————————————————————————————————————————————— */
@media not all and (min-width: 700px) and (min-aspect-ratio: 4 / 3) {
  .copy {
    flex: 1 1 auto;
    min-height: 0;
    padding: calc(2rem + var(--safe-t)) calc(1.5rem + var(--safe-r)) 1.75rem
      calc(1.5rem + var(--safe-l));
    background: linear-gradient(to bottom, var(--wall-top), var(--wall-seam));
  }

  .hero {
    flex: 0 0 auto;
    height: clamp(15rem, 46dvh, 30rem);
    object-fit: cover;
    object-position: 8% 65%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
  }

  .name {
    font-size: clamp(3rem, 14vw, 4.5rem);
    margin-bottom: 0.7rem;
  }

  .lede {
    font-size: clamp(1.0625rem, 4.6vw, 1.375rem);
    max-width: 13em;
    margin-bottom: 0.85rem;
  }

  .support {
    font-size: clamp(0.875rem, 3.8vw, 1rem);
    line-height: 1.5;
    max-width: 26em;
    margin-bottom: 1.25rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hairline);
  }

  .cta {
    padding: 0.8rem 1.25rem;
    min-height: 2.75rem;
    font-size: 0.875rem;
  }
}

/* ——————————————————————————————————————————————
   Landscape (desktop and wide windows)

   Full-bleed art anchored so the couple stays on the left; the copy
   sits on the bare wall beside them. The scrim is the wall's own tone,
   so it is invisible over bare wall and only softens the far-right
   plant and picture frames on ultra-wide screens.
   —————————————————————————————————————————————— */
@media (min-width: 700px) and (min-aspect-ratio: 4 / 3) {
  .page {
    overflow: hidden;
  }

  .hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% center;
  }

  .page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(233, 178, 114, 0) 45%,
      rgba(233, 178, 114, 0.22) 72%,
      rgba(233, 178, 114, 0.38) 100%
    );
  }

  .copy {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    margin-inline-start: 55%;
    width: min(30rem, 36%);
    padding-block: clamp(1.5rem, 7vh, 4rem);
    padding-inline-end: max(1rem, var(--safe-r));
  }

  .name {
    font-size: clamp(3.75rem, 7.5vw, 5.75rem);
    margin-bottom: 1.15rem;
  }

  .lede {
    font-size: clamp(1.25rem, 2.1vw, 1.55rem);
    max-width: 14em;
    margin-bottom: 1rem;
  }

  .support {
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    max-width: 24em;
    margin-bottom: 2rem;
    padding-top: 1.05rem;
    border-top: 1px solid var(--hairline);
  }
}

/* Large landscape screens: let the type grow with the wall. */
@media (min-width: 1600px) and (min-aspect-ratio: 4 / 3) {
  .copy {
    width: min(36rem, 30%);
  }

  .name {
    font-size: 7rem;
  }

  .lede {
    font-size: 1.75rem;
  }

  .support {
    font-size: 1.125rem;
  }
}