/* =========================================================================
   onehillside.com — a calm coastal "hello".
   One image, one line of type, a tunable legibility scrim. Standalone.
   Design direction: Lynne (Owner's Inbox/2026-07-01-onehillside-design.md)
   Build: Kit.

   TUNING NOTES
   - Scrim (legibility): edit --scrim-base / the .scrim gradient stops below.
     It is CSS-only, never baked into the photo, so it stays adjustable.
   - Text placement: --words-bottom controls how high off the bottom the
     copy sits (lands on the open wet sand).
   ========================================================================= */

/* ---- Self-hosted font (variable, latin subset, wght 300–700) ------------ */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;                 /* variable axis; we use 400 + 500 */
  font-display: swap;
  src: url('/fonts/cormorant-garamond-var.woff2') format('woff2');
}

/* ---- Palette (from the photo, per spec) --------------------------------- */
:root {
  --text:        #F4F1EC;   /* warm off-white — greeting & signature       */
  --scrim-base:  #26282C;   /* cool near-black slate — anchors the scrim   */
  --ground:      #3C4048;   /* page ground behind the image / letterbox    */

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --words-bottom: 14vh;     /* text sits in the lower third, on the sand    */
  --fade-duration: 1.6s;
}

/* ---- Reset-ish ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--serif);
  overflow: hidden;                     /* no scroll — it's a window        */
  -webkit-font-smoothing: antialiased;
}

/* ---- The scene: full-bleed, fills the viewport, no chrome --------------- */
.scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;                        /* fallback */
  height: 100dvh;                       /* dynamic vh so mobile chrome
                                            doesn't crop the frame          */
  overflow: hidden;
  background: var(--ground);
}

/* The photograph — a real <img> for meaningful alt + accessibility ------- */
.hero { display: block; }
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* ---- Legibility scrim ---------------------------------------------------
   Bottom-up gradient anchored to a FIXED dark slate (not the photo), so AA
   holds regardless of how the sand renders on a given panel. Darkens only
   the lower ~45%; fades to nothing before the horizon; never touches sky. */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(38, 40, 44, 0.72) 0%,
    rgba(38, 40, 44, 0.60) 18%,
    rgba(38, 40, 44, 0.38) 34%,
    rgba(38, 40, 44, 0.00) 52%
  );
}

/* ---- The words: lower third, centred ----------------------------------- */
.words {
  position: absolute;
  left: 50%;
  bottom: var(--words-bottom);
  transform: translateX(-50%);
  width: 100%;
  padding: 0 1.5rem;                    /* type never kisses the edge       */
  text-align: center;
  z-index: 1;
}

.greeting,
.signature {
  margin: 0;
  color: var(--text);
  /* belt-and-braces on descenders; the scrim does the real work */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.greeting {
  font-weight: 500;
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 1;
  letter-spacing: normal;
  text-transform: lowercase;
}

.signature {
  font-weight: 400;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  letter-spacing: 0.18em;
  text-transform: lowercase;
  margin-top: 0.4em;                    /* quiet gap beneath the greeting   */
  /* offset the trailing letter-spacing so the block stays visually centred */
  text-indent: 0.18em;
}

/* ---- Responsive: tall narrow phones ------------------------------------
   Two safeguards. (1) When we fall back to the wide frame on a portrait
   screen, shift the crop down to the shoreline/sand. (2) The <picture>
   already swaps in the dedicated portrait crop at (portrait, <=820px);
   for that crop, keep it centred. */
@media (orientation: portrait) {
  .hero__img { object-position: 50% 70%; }   /* favour shoreline/sand      */
}
@media (orientation: portrait) and (max-width: 820px) {
  /* dedicated portrait crop is already focal-correct — centre it */
  .hero__img { object-position: 50% 50%; }
}

/* ---- Motion: one slow fade-in of the whole scene on load --------------- */
.scene {
  opacity: 0;
  animation: fade-in var(--fade-duration) ease-out forwards;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scene {
    animation: none;
    opacity: 1;                          /* simply present, no fade         */
  }
}