/* =========================================
   VIRIDIA STUDIO — LANDING PAGE
   ========================================= */

@font-face {
  font-family: 'Viridia Caps';
  src: url('assets/V_caps_bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background-color: #123638;

  /* Primary illustration controls: adjust these, not top/width percentages. */
  --art-height: 750px;
  --art-overlap: 300px;
}

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

html {
  min-height: 100%;
  background-color: #123638;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: #123638;
  color: #dffff4;
  font-family: 'century-gothic', 'Century Gothic', 'Avenir Next', Avenir, sans-serif;
}

/* Page frame: background remains full-width; content stops at 1500px. */
.landing {
  width: 100%;
  max-width: 1500px;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: #123638;
}

/* Wordmark */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: clamp(28px, 5.2vh, 62px) 28px 0;
}

.wordmark {
  display: block;
  width: min(42vw, 660px);
  min-width: 225px;
  height: auto;
}

/* The grid has two real rows:
   1. Message: naturally sized by its text and button.
   2. Illustrations: reserves space at a controlled height.
   The second row follows the first as text wraps. */
.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  width: 100%;
  margin-top: 10%;
}

.message {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 38px));
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
}

h1 {
  margin: 0;
  font-family: 'Viridia Caps', sans-serif;
  font-weight: 700;
  font-size: clamp(31px, 3.25vw, 53px);
  line-height: 1.42;
  letter-spacing: .01em;
  color: #f7fcfa;
}

.message p {
  max-width: 650px;
  margin: 23px auto 17px;
  font-size: clamp(20px, 2.12vw, 35px);
  line-height: 1.38;
  font-weight: 400;
  color: #dffff4;
}

.hello-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 56px;
  padding: 7px 20px 9px;
  border: 2px solid #fcf3ff;
  border-radius: 8px;
  background: transparent;
  color: #fcf3ff;
  font-family: inherit;
  font-size: clamp(20px, 1.6vw, 27px);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .18s ease, color .18s ease;
}

.hello-button:hover,
.hello-button:focus-visible {
  background-color: #fcf3ff;
  color: #123638;
}

.hello-button:focus-visible {
  outline: 2px solid #dffff4;
  outline-offset: 4px;
}

.wave {
  font-family: system-ui, sans-serif;
  font-size: .86em;
  line-height: 1;
}

/* The PNGs remain full transparent canvases, as authored.
   HEIGHT controls their scale. Width is always automatic.
   Negative margin pulls this real grid row behind the message,
   WITHOUT disconnecting it from content flow. */
.illustrations {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  z-index: 1;
  width: 100%;
  height: var(--art-height);

  pointer-events: none;
}

.illustrations img {
  position: absolute;
  top: 0;
  display: block;
  height: var(--art-height);
  width: auto;
  max-width: none;
}

.bird {
  left: 0;
}

.portrait {
  right: 0;
}


@media (max-width: 1500px) {
  :root {
    --art-height: 650px;
    --art-overlap: 300px;
  }

  .site-header {
    padding-top: 5%;
  }

  .wordmark {
    width: min(82vw, 440px);
    min-width: 0;
  }

  .hero-content {
    margin-top: 10%;
  }

  .message {
    width: min(94%, 490px);
  }

  h1 {
    font-size: clamp(26px, 6vw, 41px);
    line-height: 1.32;
  }

  .desktop-break {
    display: none;
  }

  .message p {
    max-width: 360px;
    margin: 20px auto;
    font-size: clamp(17px, 4vw, 23px);
  }

  .hello-button {
    min-height: 49px;
    font-size: 19px;
  }
}

/* Phone */
@media (max-width: 800px) {
  :root {
    --art-height: 500px;
    --art-overlap: 10%;
  }

  .hero-content {
    margin-top: 20%;
  }

  h1 {
    max-width: 80%;
    margin-inline: auto;
    font-size: 2rem;
  }

  .message p {
    max-width: 60%;
    font-size: 1.2rem;
  }

.bird {
  left: -30px;
}

.portrait {
  right: -30px;
}
}

/* Narrow Phone */
@media (max-width: 499px) {
  :root {
    --art-height: 460px;
    --art-overlap: -10%;
  }
}

@media (max-width: 390px) {
  :root {
    --art-height: 350px;
    --art-overlap: -10%;
  }

  h1 {
    font-size: 2rem;
  }

  .message p {
    font-size: 1.07rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hello-button {
    transition: none;
  }
}