/* ————————————————————————————————————————————————
   Malibu Meadows — landing page
   Source of truth: MM-BRAND-02-LandingPage.pdf (792 × 612 pt)
   Grid: swiss 4-corner, uniform 54.5pt margin ≈ 6.88vw
   Type: Times Now SemiLight (headline) · Suisse Intl Light (links)
   ———————————————————————————————————————————————— */

@font-face {
  font-family: "Times Now";
  src: url("assets/TimesNow-SemiLight.woff2") format("woff2");
  font-weight: 350;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("assets/SuisseIntl-Book.woff2") format("woff2");
  font-weight: 450;
  font-style: normal;
  font-display: block;
}

:root {
  --cream: #ddd9ce;          /* text / logo — from PDF */
  --dark: #332c2a;           /* ground — from PDF */
  --ground: #423e2f;         /* matches the photograph's ground; fills iOS gaps */
  --about-bg: #554d32;       /* about state */
  --margin: clamp(18px, 4.7vw, 32px);             /* tight frame — desktop halved */
  /* edges add the device safe-area inset so tight margins still
     clear the iPhone notch / home indicator (0 on desktop) */
  --edge-top: calc(var(--margin) + env(safe-area-inset-top, 0px));
  --edge-bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
  --edge-left: calc(var(--margin) + env(safe-area-inset-left, 0px));
  --edge-right: calc(var(--margin) + env(safe-area-inset-right, 0px));
  /* clearance so About copy never sits under the corner labels */
  --about-safe-top: calc(var(--edge-top) + 3.6em);
  --about-safe-bottom: calc(var(--edge-bottom) + 2.8em);
  /* very subtle scaling: shallow vw slopes pivoting on the
     PDF reference viewport (1294px), where sizes are exact */
  --type: clamp(17px, 18.1px + 0.48vw, 27px);     /* ~64% of PDF scale */
  --type-link: clamp(12px, 11px + 0.25vw, 14px);  /* slightly larger on mobile */
  --wordmark-w: clamp(77px, 81.6px + 1.87vw, 118px);
  /* baseline offset: Times Now ascent = 763/1000 em */
  --ascent: 0.763em;
}

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

html, body {
  height: 100%;
  background: var(--ground);       /* olive matches the plate — no iOS band */
  overflow: hidden;
}

.hero {
  position: relative;
  height: 100svh;
  height: 100dvh;                  /* fill under iOS Safari's dynamic toolbars */
  overflow: hidden;
  background: var(--ground);
  color: var(--cream);
  font-family: "Times Now", "Times New Roman", serif;
  font-weight: 350;
  /* match the PDF's softer print-like rendering of light-on-dark type */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* —— image · desktop crop matches PDF exactly (52% / 96%) —— */

.flower {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 96%;
  animation: settle 6s cubic-bezier(0.22, 1, 0.36, 1) both,
             appear 1.8s ease both;
  transition: opacity 0.7s ease;
}

/* wide screens: swap to the side-extended plate (see <picture>) and
   lock the flower to the same scale as the reference crop, letting
   the synthesized ground fill the extra width */
@media (min-aspect-ratio: 2311/1761) {
  .hero { background: var(--ground); }   /* ground tone past the plate */
  .flower {
    inset: auto;
    top: -73.88svh;                      /* window top 1301/1761 of svh */
    left: calc(50vw - 119.25svh);        /* center the 238.5svh-wide plate */
    width: auto;
    height: 176.94svh;                   /* 3116/1761 */
  }
}

/* —— corners · swiss grid, one element per corner —— */

.corner { position: absolute; z-index: 3; }
.corner-tl { left: var(--edge-left); top: var(--edge-top); }
.corner-tr { right: var(--edge-right); top: var(--edge-top); }

/* both bottom labels share one bar so their baselines always match,
   regardless of button-vs-anchor rendering quirks (Safari) */
.corner-bottom {
  left: var(--edge-left);
  right: var(--edge-right);
  bottom: var(--edge-bottom);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  pointer-events: none;            /* empty middle still closes the panel */
}
.corner-bottom .link { pointer-events: auto; }

.monogram { width: clamp(30px, 31.6px + 0.75vw, 44px); }     /* ~57% of PDF scale */
.wordmark { width: var(--wordmark-w); }                      /* ~68% of PDF scale */
.monogram svg, .wordmark svg { display: block; width: 100%; height: auto; }

.corner-tl { animation: appear 1.6s ease 0.25s both; }
.corner-tr { animation: appear 1.6s ease 0.45s both; }
.corner-bottom { animation: appear 1.6s ease 1.85s both; }

/* —— links · Suisse Light, all caps —— */

.link {
  display: block;                  /* button + anchor share one box model */
  font-family: "Suisse Intl", "Helvetica Neue", Arial, sans-serif;
  font-weight: 450;
  font-size: var(--type-link);
  line-height: 1;                  /* identical baseline for CLOSE & handle */
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  background: none;
  border: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0.4em 0;                /* generous hit area, invisible */
  transition: opacity 0.3s ease;
}

.link:hover { opacity: 0.6; }

/* —— headline · staggered on the grid, baselines from PDF —— */

.headline {
  font-size: var(--type);
  font-weight: 350;
  line-height: 1;
}

.cluster {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  z-index: 2;
}

/* baselines: 180pt of 612pt page; the closing line sits clear
   of the bottom link row */
.cluster-a   { top: calc(29.41svh - var(--ascent)); }
.cluster-mid { top: calc(42svh - var(--ascent)); }
.cluster-b   { top: calc(58svh - var(--ascent)); }

.line {
  display: block;
  white-space: nowrap;
  opacity: 0;
  animation: rise 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: opacity 0.5s ease;
}

/* left edges + baseline gaps (in em) measured from the PDF;
   l3 anchors right where the PDF's third line ended */
.l1 { margin-left: 26.77%; }
.l2 { margin-left: min(67.17%, 100% - var(--edge-right) - 6.6em); }
.l3 { margin-left: auto; margin-right: 10.8%; width: fit-content; margin-top: 0.459em; }
/* start of the line aligns with the A of MEADOWS (28.4% into the mark) */
.l4 { margin-left: calc(var(--edge-left) + 0.284 * var(--wordmark-w)); }

.l1 { animation-delay: 0.8s; }
.l2 { animation-delay: 0.95s; }
.l3 { animation-delay: 1.1s; }
.l4 { animation-delay: 1.3s; }

/* —— about · solid ground, two sentences —— */

.about-panel {
  position: fixed;                 /* cover the FULL screen incl. iOS safe areas */
  inset: 0;
  z-index: 1;
  background: var(--about-bg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;                 /* click / tap anywhere to close */
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

/* copy scrolls within a safe band; fade edges dissolve it into the
   corner-label zones instead of colliding with them */
.about-panel::before,
.about-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;
}
.about-panel::before {
  top: 0;
  height: var(--about-safe-top);
  background: linear-gradient(var(--about-bg) 45%, transparent);
}
.about-panel::after {
  bottom: 0;
  height: var(--about-safe-bottom);
  background: linear-gradient(transparent, var(--about-bg) 55%);
}

.about-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;              /* only ever scroll vertically */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.about-inner p { overflow-wrap: break-word; }

.about-inner {
  min-height: 100%;
  box-sizing: border-box;
  padding: var(--about-safe-top) var(--edge-right) var(--about-safe-bottom) var(--edge-left);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: center;           /* fallback for older engines */
  align-content: safe center;      /* center when it fits, else top-align + scroll */
  gap: 3em 10%;
  font-size: calc(var(--type) * 0.76);
  line-height: 1.25;
}

.about-main {
  flex: 1 1 21em;
  min-width: 0;                    /* allow shrink below content width */
  max-width: min(24em, 100%);
  display: grid;
  gap: 1.5em;
}

.about-lead {
  font-size: calc(var(--type) * 0.92);
  line-height: 1.25;
  text-wrap: balance;
}

.about-notes {
  flex: 1 1 20em;
  min-width: 0;                    /* allow shrink below content width */
  max-width: min(28em, 100%);
  display: grid;
  gap: 1.2em;
  align-content: start;
}

.about-notes-title {
  font-family: "Suisse Intl", "Helvetica Neue", Arial, sans-serif;
  font-weight: 450;
  font-size: var(--type-link);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* once the user interacts, intro animations are pinned so
   transitions can take over */
.settled .flower, .settled .line, .settled .corner {
  animation: none;
  opacity: 1;
  transform: none;
}

.about-open .flower { opacity: 0; }
.about-open .line { opacity: 0; }
.about-open .headline { pointer-events: none; }
.about-open .about-panel {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}

/* —— motion · extremely subtle —— */

@keyframes appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.35em); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes settle {
  from { transform: scale(1.035); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .flower, .corner, .line {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .about-open .flower, .about-open .line { opacity: 0; }
  .flower, .line, .about-panel, .link { transition: none; }
}

::selection {
  background: var(--cream);
  color: var(--dark);
}