/* Hallmark · macrostructure: Marquee Hero · tone: editorial luxury · anchor hue: muted gold
 * theme: studied-DNA (source: image) · paper oklch(97.4% 0.009 75) · accent oklch(73% 0.085 86)
 * display: geometric grotesque · body: neutral grotesque · enrichment: Tier-A CSS foliage
 * studied: yes · DNA-source: user reference · contrast: pass (40–41)
 * chrome: masthead + brief-locked empty footer · tokens: pass (48) · mobile: pass (34, 49–57)
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--color-ink);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: clip;
}

p,
h1 {
  margin: 0;
}

.page {
  display: grid;
  grid-template-rows: var(--header-height) minmax(0, 1fr) var(--footer-height);
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
  background: var(--color-paper);
}

.site-header,
.site-footer {
  position: relative;
  z-index: 3;
  width: 100%;
  background: var(--color-ink);
}

.site-header {
  display: grid;
  place-items: center;
  min-height: var(--header-height);
  padding-top: env(safe-area-inset-top);
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right));
}

.site-header__wordmark {
  padding-inline-start: clamp(0.18em, 0.36vw, 0.25em);
  color: var(--color-on-ink);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 3rem);
  font-weight: 500;
  letter-spacing: clamp(0.18em, 0.36vw, 0.25em);
  line-height: 1;
  white-space: nowrap;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(2rem, 6vh, 6rem) max(var(--page-gutter), env(safe-area-inset-left)) clamp(2.25rem, 5vh, 5rem) max(var(--page-gutter), env(safe-area-inset-right));
  overflow: clip;
  background: var(--color-paper);
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 74rem);
  text-align: center;
  transform: translateY(clamp(0.25rem, 1.2vh, 1rem));
}

.hero__monogram {
  display: block;
  width: clamp(8.75rem, 21vw, 15.75rem);
  height: auto;
  flex: 0 0 auto;
}

.hero__wordmark {
  max-width: 100%;
  margin-top: clamp(1.05rem, 2.1vh, 1.9rem);
  padding-inline-start: clamp(0.09em, 0.4vw, 0.17em);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  letter-spacing: clamp(0.09em, 0.4vw, 0.17em);
  line-height: 1;
  white-space: nowrap;
}

.hero__divider {
  display: block;
  width: clamp(3.4rem, 6vw, 5.75rem);
  height: var(--rule-thin);
  margin-block: clamp(1.35rem, 3vh, 2.5rem) clamp(1.25rem, 2.7vh, 2.25rem);
  background: var(--color-accent);
}

.hero__title {
  min-width: 0;
  max-width: 100%;
  padding-inline-start: clamp(0.18em, 0.55vw, 0.42em);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.9rem);
  font-weight: 400;
  letter-spacing: clamp(0.18em, 0.55vw, 0.42em);
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(100%, 48rem);
  margin-top: clamp(1.15rem, 2.6vh, 2rem);
  padding-inline-start: clamp(0.07em, 0.22vw, 0.2em);
  color: var(--color-text);
  font-size: clamp(0.625rem, 0.72vw, 0.86rem);
  font-weight: 400;
  letter-spacing: clamp(0.08em, 0.22vw, 0.2em);
  line-height: 1.7;
}

.hero__copy span {
  display: block;
}

.site-footer {
  min-height: var(--footer-height);
  padding-bottom: env(safe-area-inset-bottom);
}

.palm-shadow {
  position: absolute;
  z-index: 1;
  width: clamp(30rem, 64vw, 72rem);
  aspect-ratio: 1.2;
  opacity: 0.09;
  filter: blur(clamp(8px, 0.75vw, 14px));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.palm-shadow--top {
  top: clamp(-22rem, -19vw, -8rem);
  left: clamp(-34rem, -25vw, -11rem);
  transform: rotate(-10deg) scaleX(1.05);
}

.palm-shadow--bottom {
  right: clamp(-36rem, -27vw, -12rem);
  bottom: clamp(-25rem, -20vw, -9rem);
  transform: rotate(174deg) scaleX(1.08);
}

.palm-frond {
  position: absolute;
  display: block;
  top: 50%;
  left: 5%;
  width: 90%;
  height: 3.2%;
  border-radius: 50%;
  background: var(--color-foliage-shadow);
  transform-origin: 5% 50%;
}

.palm-frond--one { transform: rotate(-18deg) scaleX(0.94); }
.palm-frond--two { transform: rotate(4deg) scaleX(1.02); }
.palm-frond--three { transform: rotate(27deg) scaleX(0.86); }

.palm-frond i {
  position: absolute;
  display: block;
  width: 30%;
  height: 270%;
  background: var(--color-foliage-shadow);
  clip-path: polygon(0 48%, 31% 18%, 100% 28%, 87% 50%, 100% 72%, 31% 82%);
  transform-origin: 4% 50%;
}

.palm-frond i:nth-child(1) { left: 13%; top: -235%; transform: rotate(-60deg) scaleX(0.62); }
.palm-frond i:nth-child(2) { left: 27%; top: -245%; transform: rotate(-49deg) scaleX(0.78); }
.palm-frond i:nth-child(3) { left: 41%; top: -255%; transform: rotate(-39deg) scaleX(0.92); }
.palm-frond i:nth-child(4) { left: 56%; top: -255%; transform: rotate(-31deg) scaleX(1.02); }
.palm-frond i:nth-child(5) { left: 71%; top: -235%; transform: rotate(-22deg) scaleX(0.9); }
.palm-frond i:nth-child(6) { left: 15%; top: 25%; transform: rotate(59deg) scaleX(0.66); }
.palm-frond i:nth-child(7) { left: 29%; top: 28%; transform: rotate(49deg) scaleX(0.82); }
.palm-frond i:nth-child(8) { left: 44%; top: 28%; transform: rotate(39deg) scaleX(0.96); }
.palm-frond i:nth-child(9) { left: 59%; top: 24%; transform: rotate(30deg) scaleX(1.03); }
.palm-frond i:nth-child(10) { left: 74%; top: 18%; transform: rotate(21deg) scaleX(0.86); }

@media (max-width: 430px) {
  :root {
    --header-height: clamp(4rem, 13vh, 5.25rem);
    --footer-height: clamp(2.75rem, 8vh, 3.75rem);
  }

  .site-header__wordmark {
    font-size: clamp(1.2rem, 5.6vw, 1.5rem);
  }

  .hero {
    padding-block: clamp(1.5rem, 4vh, 2.5rem);
  }

  .hero__monogram {
    width: clamp(7.75rem, 38vw, 10rem);
  }

  .hero__wordmark {
    margin-top: clamp(0.9rem, 2.4vh, 1.25rem);
    font-size: clamp(1.55rem, 7.9vw, 2.1rem);
    letter-spacing: clamp(0.055em, 1.35vw, 0.1em);
  }

  .hero__divider {
    margin-block: clamp(1.15rem, 3vh, 1.6rem);
  }

  .hero__title {
    font-size: clamp(0.88rem, 4.1vw, 1.05rem);
    letter-spacing: clamp(0.12em, 2.4vw, 0.22em);
  }

  .hero__copy {
    max-width: 21rem;
    margin-top: clamp(0.9rem, 2.6vh, 1.25rem);
    font-size: clamp(0.59rem, 2.55vw, 0.69rem);
    letter-spacing: clamp(0.04em, 1vw, 0.1em);
    line-height: 1.65;
  }

  .palm-shadow {
    width: clamp(28rem, 125vw, 38rem);
    opacity: 0.085;
    filter: blur(8px);
  }

  .palm-shadow--top {
    top: -12rem;
    left: -18rem;
  }

  .palm-shadow--bottom {
    right: -19rem;
    bottom: -13rem;
  }
}

@media (max-height: 700px) {
  :root {
    --header-height: clamp(3.5rem, 12vh, 4.75rem);
    --footer-height: clamp(2.25rem, 7vh, 3.25rem);
  }

  .hero {
    padding-block: clamp(1rem, 2.4vh, 1.5rem);
  }

  .hero__content {
    transform: none;
  }

  .hero__monogram {
    width: clamp(6.25rem, 22vh, 9rem);
  }

  .hero__wordmark {
    margin-top: clamp(0.55rem, 1.5vh, 0.85rem);
  }

  .hero__divider {
    margin-block: clamp(0.7rem, 2vh, 1rem);
  }

  .hero__copy {
    margin-top: clamp(0.65rem, 1.8vh, 0.9rem);
    line-height: 1.55;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-height: 3.25rem;
    --footer-height: 2rem;
  }

  .hero {
    padding-block: 0.75rem;
  }

  .hero__content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "logo wordmark"
      "logo divider"
      "logo title"
      "logo copy";
    column-gap: clamp(1.25rem, 4vw, 3rem);
    width: min(100%, 56rem);
    text-align: left;
  }

  .hero__monogram { grid-area: logo; width: clamp(5.75rem, 27vh, 8.5rem); }
  .hero__wordmark { grid-area: wordmark; margin-top: 0; font-size: clamp(1.5rem, 4vw, 2.5rem); }
  .hero__divider { grid-area: divider; justify-self: start; margin-block: 0.5rem; }
  .hero__title { grid-area: title; padding-inline-start: 0; font-size: clamp(0.8rem, 2vw, 1rem); }
  .hero__copy { grid-area: copy; align-items: flex-start; margin-top: 0.45rem; padding-inline-start: 0; font-size: clamp(0.52rem, 1.35vw, 0.68rem); }
}

@media (min-width: 2200px) {
  .hero__content {
    width: min(100%, 92rem);
  }

  .palm-shadow {
    opacity: 0.078;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}