/* Safe Haven Village · Mockup 2026-11-11, second version
   New sections for the landing page. They sit on the existing system in site.css:
   brand colours, Cormorant Garamond, Italiana, Inter, the plate with its AI label, the buttons.
   The opening is untouched, it only gains one readable sentence on its first screen. */

/* ---------- shared ---------- */
.lp-eyebrow {
  margin: 0 0 16px;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.18em; line-height: 1.3;
  text-transform: uppercase; color: var(--muted);
}
.theme-dark .lp-eyebrow { color: var(--dawn); }
.lp-life, .lp-day, .lp-village, .lp-homes, .lp-belong, .lp-care, .lp-behind { padding-block: clamp(76px, 12.5vh, 148px); }

/* ---------- first screen of the opening: one sentence, one way in ---------- */
.op-first {
  position: absolute; left: var(--gutter); bottom: clamp(196px, 27vh, 260px); z-index: 4;
  max-width: min(35rem, 40vw);
  color: var(--ivory);
  transition: opacity 120ms linear;
}
.op-first::before {
  content: ""; position: absolute; z-index: -1;
  inset: -70px -110px -70px calc(-1 * var(--gutter));
  background: radial-gradient(ellipse at 32% 55%, rgba(22, 21, 19, 0.74), rgba(22, 21, 19, 0.38) 48%, rgba(22, 21, 19, 0) 72%);
  pointer-events: none;
}
.op-first__eyebrow {
  margin: 0 0 14px;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dawn);
}
.op-first__line {
  margin: 0;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2.3rem, 1.3rem + 2.9vw, 4.1rem); line-height: 1.02; letter-spacing: 0.005em;
  text-wrap: balance; padding-bottom: 0.06em;
}
.op-first__sub { margin: 16px 0 0; max-width: 29em; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); line-height: 1.5; color: rgba(242, 241, 236, 0.92); }
.op-first__doors { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 4px 30px; }
.op-first__doors a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--ivory); font-weight: 600; text-decoration: none;
  background-image: linear-gradient(rgba(242, 241, 236, 0.75), rgba(242, 241, 236, 0.75));
  background-size: 100% 1px; background-position: 0 80%; background-repeat: no-repeat;
}
.op-first__doors a span { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .op-first__doors a:hover span { transform: translateX(5px); } }
/* the still version of the opening already shows mark, name and line */
html:not(.motion-on) .op-first { display: none; }

/* ---------- life here: three chapters ---------- */
.lp-life { overflow-x: clip; }
.lp-chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: center; }
.lp-chapter + .lp-chapter { margin-top: clamp(76px, 13vh, 150px); }
.lp-chapter__media { grid-column: 1 / span 7; grid-row: 1; margin-left: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--maxw)) / 2))); }
.lp-chapter__media .plate__frame { aspect-ratio: 3 / 2; }
.lp-chapter__text { grid-column: 9 / -1; grid-row: 1; }
.lp-chapter--flip .lp-chapter__media { grid-column: 6 / -1; margin-left: 0; margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--maxw)) / 2))); }
.lp-chapter--flip .lp-chapter__text { grid-column: 1 / span 4; }
.lp-chapter__text .h2 { font-size: clamp(2.2rem, 1.45rem + 2.5vw, 3.7rem); }
.lp-chapter__text p:not(.lp-eyebrow) { margin: 24px 0 0; max-width: 28em; }

/* ---------- a day: four moments in one strip ---------- */
.lp-day { background: var(--ivory-bright); border-block: 1px solid var(--stone); }
.lp-day__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(36px, 6vh, 68px); }
.lp-day__hint { margin: 0 0 0.5em; color: var(--muted); font-size: 1.125rem; }
.lp-day__strip {
  list-style: none; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px);
}
.lp-moment:nth-child(even) { margin-top: clamp(28px, 6vh, 64px); }
.lp-moment .plate__frame { aspect-ratio: 4 / 5; }
.lp-moment__time { margin: 18px 0 6px; font-family: var(--f-numeral); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.75rem); line-height: 1; letter-spacing: 0.04em; color: var(--gold-deep); }
.lp-moment h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.85rem); line-height: 1.12; color: var(--pine); text-wrap: balance; }
.lp-moment__text { margin: 8px 0 0; font-size: 1.125rem; line-height: 1.5; max-width: 20em; }

/* ---------- the village ---------- */
.lp-village__plate .plate__frame { aspect-ratio: 16 / 7.6; }
.lp-village__grid { margin-top: clamp(36px, 6vh, 68px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 36px; align-items: start; }
.lp-village__head { grid-column: 1 / span 5; }
.lp-coasts { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--gold); display: inline-block; font-family: var(--f-numeral); font-size: 1.5rem; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.lp-village__text { grid-column: 7 / -1; }
.lp-village__text .lede { margin: 0; }
.lp-village__places { list-style: none; margin-top: clamp(24px, 4vh, 36px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.lp-village__places li { padding: 14px 0; border-top: 1px solid var(--stone); font-size: 1.125rem; font-weight: 500; line-height: 1.4; }

/* ---------- homes ---------- */
.lp-homes { background: var(--stone); }
.lp-homes__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; align-items: end; }
.lp-homes__head > div { grid-column: 1 / span 5; }
.lp-homes__head .lede { grid-column: 7 / -1; margin: 0; }
.lp-homes__plates { margin-top: clamp(40px, 7vh, 76px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 36px; align-items: end; }
.lp-homes__a { grid-column: 1 / span 8; }
.lp-homes__a .plate__frame { aspect-ratio: 16 / 10; }
.lp-homes__b { grid-column: 9 / -1; }
.lp-homes__b .plate__frame { aspect-ratio: 4 / 5; }
.lp-homes .caption { color: #5A5334; }

/* ---------- belonging ---------- */
.lp-belong { background: var(--pine); color: var(--ivory); }
.lp-belong__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 44px; align-items: center; }
.lp-belong__plate { grid-column: 2 / span 4; }
.lp-belong__plate .plate__frame { aspect-ratio: 4 / 5; background: var(--pine-deep); }
.lp-belong__text { grid-column: 7 / span 5; }
.lp-quote {
  margin: 0 0 30px;
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(2.1rem, 1.3rem + 2.7vw, 3.7rem); line-height: 1.1; color: var(--ivory); text-wrap: balance;
}
.lp-belong__text p:not(.lp-eyebrow) { max-width: 30em; color: rgba(242, 241, 236, 0.9); }
.lp-belong__text p:last-child { margin-bottom: 0; color: var(--ivory); font-weight: 500; }

/* ---------- care ---------- */
.lp-care__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 44px; align-items: center; }
.lp-care__text { grid-column: 1 / span 6; }
.lp-care__text .lede { margin: 24px 0 0; }
.lp-plain { list-style: none; margin: clamp(26px, 4vh, 40px) 0 0; }
.lp-plain li { padding: 16px 0; border-top: 1px solid var(--stone); font-size: 1.1875rem; font-weight: 500; line-height: 1.4; }
.lp-plain li:last-child { border-bottom: 1px solid var(--stone); }
.lp-care__close { margin: 30px 0 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.2; color: var(--pine); }
.lp-care__plate { grid-column: 8 / span 4; }
.lp-care__plate .plate__frame { aspect-ratio: 4 / 5; }

/* ---------- who is behind this ---------- */
.lp-behind { background: var(--ivory-bright); border-top: 1px solid var(--stone); }
.lp-behind__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 36px; align-items: start; }
.lp-behind__mark { grid-column: 2 / span 3; padding-top: 12px; }
.lp-behind__mark img { width: 100%; max-width: 280px; height: auto; }
.lp-letter { grid-column: 6 / span 6; }
.lp-letter__body { margin-top: 30px; }
.lp-letter__body p { margin: 0 0 0.9em; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.8rem); line-height: 1.36; color: var(--charcoal); max-width: 26em; }
.lp-letter__sign { margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--gold); display: inline-block; font-family: var(--f-numeral); font-size: 1.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }

/* ---------- join ---------- */
.lp-doors { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--ivory); padding-block: clamp(88px, 14vh, 164px) clamp(96px, 14vh, 150px); }
.lp-doors__bg { position: absolute; inset: 0; z-index: -1; }
.lp-doors__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; opacity: 0.85; }
.lp-doors__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(30, 29, 26, 0.86), rgba(30, 29, 26, 0.4) 50%, rgba(30, 29, 26, 0.05) 78%), linear-gradient(to bottom, rgba(30, 29, 26, 0.5), rgba(30, 29, 26, 0) 28%, rgba(30, 29, 26, 0.55)); }
.lp-doors__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 56px; align-items: end; }
.lp-door .h2 { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.5rem); color: var(--ivory); }
.lp-door > p:not(.lp-eyebrow) { margin: 20px 0 0; max-width: 30em; color: rgba(242, 241, 236, 0.92); }
.lp-door--live { grid-column: 1 / span 6; padding: clamp(26px, 3vw, 44px); background: rgba(30, 29, 26, 0.8); border: 1px solid rgba(242, 241, 236, 0.2); }
.lp-doors__aside { grid-column: 8 / -1; padding-bottom: clamp(26px, 3vw, 44px); }
.lp-doors__line { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1.14; color: var(--ivory); text-wrap: balance; text-shadow: 0 1px 24px rgba(22, 21, 19, 0.7); }
.lp-form { margin-top: 30px; display: grid; row-gap: 20px; }
.lp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 20px; }
.lp-field { display: grid; row-gap: 8px; align-content: start; }
.lp-field label, .lp-choice legend { font-size: 1.0625rem; font-weight: 600; }
.lp-field input {
  width: 100%; min-height: 52px; padding: 0 14px; border-radius: 2px;
  border: 1px solid rgba(242, 241, 236, 0.55); background: rgba(246, 244, 238, 0.97); color: var(--night); font-size: 1.125rem;
}
.lp-field input:focus-visible { outline: 3px solid var(--dawn); outline-offset: 2px; }
.lp-field.has-error input { border-color: var(--dawn); box-shadow: 0 0 0 2px var(--dawn); }
.lp-choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-choice legend { padding: 0; margin-bottom: 10px; }
.lp-optional { font-weight: 400; color: var(--ivory-dim); }
.lp-choice label { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 16px; border: 1px solid rgba(242, 241, 236, 0.45); border-radius: 2px; font-size: 1.0625rem; font-weight: 500; cursor: pointer; }
.lp-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--dawn); }
.lp-consent { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: start; font-size: 1.0625rem; line-height: 1.5; cursor: pointer; }
.lp-consent input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--dawn); }
.lp-consent.has-error { outline: 2px solid var(--dawn); outline-offset: 8px; border-radius: 2px; }
.lp-form .btn { justify-self: start; }
.lp-form__status { margin: 0; padding: 12px 16px; background: var(--ivory-bright); color: var(--pine); font-weight: 500; border-radius: 2px; }
.lp-doors__label { position: absolute; right: var(--gutter); bottom: 22px; margin: 0; display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; font-weight: 500; color: var(--ivory-dim); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .lp-chapter__media, .lp-chapter--flip .lp-chapter__media { grid-column: 1 / -1; grid-row: auto; margin-inline: 0; }
  .lp-chapter__text, .lp-chapter--flip .lp-chapter__text { grid-column: 1 / -1; grid-row: auto; }
  .lp-day__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .lp-moment:nth-child(even) { margin-top: 0; }
  .lp-village__head, .lp-village__text { grid-column: 1 / -1; }
  .lp-homes__head > div, .lp-homes__head .lede { grid-column: 1 / -1; }
  .lp-belong__plate { grid-column: 1 / span 5; }
  .lp-belong__text { grid-column: 6 / -1; }
  .lp-care__text { grid-column: 1 / span 7; }
  .lp-care__plate { grid-column: 8 / -1; }
  .lp-behind__mark { grid-column: 1 / span 3; }
  .lp-letter { grid-column: 5 / -1; }
  .lp-door--live, .lp-doors__aside { grid-column: 1 / -1; }
  .op-first { max-width: min(35rem, 62vw); }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .op-first { left: var(--gutter); right: var(--gutter); max-width: none; bottom: clamp(170px, 25vh, 230px); }
  .op-first::before { inset: -50px calc(-1 * var(--gutter)) -60px calc(-1 * var(--gutter)); background: linear-gradient(to bottom, rgba(22, 21, 19, 0), rgba(22, 21, 19, 0.62) 22%, rgba(22, 21, 19, 0.62) 78%, rgba(22, 21, 19, 0)); }
  .lp-day__strip {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74vw; row-gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: thin; max-width: none;
    scroll-padding-inline: var(--gutter);
  }
  .lp-moment { scroll-snap-align: start; }
  .lp-village__plate .plate__frame { aspect-ratio: 4 / 3; }
  .lp-village__places { grid-template-columns: 1fr; }
  .lp-homes__a, .lp-homes__b { grid-column: 1 / -1; }
  .lp-homes__b .plate__frame { aspect-ratio: 3 / 2; }
  .lp-belong__plate, .lp-belong__text, .lp-care__text, .lp-care__plate { grid-column: 1 / -1; }
  .lp-care__plate { max-width: 420px; }
  .lp-behind__mark { grid-column: 1 / -1; }
  .lp-behind__mark img { max-width: 150px; }
  .lp-letter { grid-column: 1 / -1; }
  .lp-row { grid-template-columns: 1fr; }
  .lp-doors__label { position: static; margin: 40px var(--gutter) 0; }
}

/* ---------- reduced motion from the system ---------- */
@media (prefers-reduced-motion: reduce) {
  .op-first__doors a span { transition: none; }
}

/* ---------- live version: no preview strip ---------- */
:root { --strip-h: 0px; }

/* ---------- care: second line of the headline ---------- */
.lp-care__claim { margin: 14px 0 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.7rem); line-height: 1.12; color: var(--gold-deep); text-wrap: balance; }

/* ---------- founder: portrait and name ---------- */
.lp-behind__portrait { grid-column: 2 / span 3; margin: 0; padding-top: 12px; }
.lp-behind__frame { aspect-ratio: 4 / 5; overflow: hidden; background: #fff; border: 1px solid var(--stone); }
.lp-behind__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.lp-letter__name { margin: 30px 0 0; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.3vw, 2.8rem); line-height: 1; color: var(--pine); }
.lp-letter .lp-letter__sign { margin: 12px 0 0; padding-top: 0; border-top: 0; }

/* ---------- footer: note on the images, legal links ---------- */
.footer__images { max-width: 46em; margin-bottom: 22px; padding: 20px 0 22px; border-block: 1px solid rgba(242, 241, 236, 0.22); }
.footer__images-head { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dawn); }
.footer__images p:last-child { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ivory); }
.footer__legal a { color: inherit; text-underline-offset: 3px; }

/* ---------- imprint and privacy ---------- */
.lp-legal { padding: calc(var(--nav-h) + clamp(56px, 9vh, 110px)) 0 clamp(76px, 12vh, 140px); }
.lp-legal__inner { max-width: 46rem; }
.lp-legal h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1.05; color: var(--pine); margin-bottom: 28px; }
.lp-legal h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.05rem); line-height: 1.15; color: var(--pine); margin: 40px 0 12px; }
.lp-legal p, .lp-legal li { font-size: 1.125rem; line-height: 1.6; }
.lp-legal ul { padding-left: 1.2em; margin: 0 0 1em; }
.lp-legal a { color: var(--pine); text-underline-offset: 3px; }
.lp-legal address { font-style: normal; font-size: 1.125rem; line-height: 1.6; margin-bottom: 1em; }

@media (max-width: 1100px) {
  .lp-behind__portrait { grid-column: 1 / span 4; }
  .lp-letter { grid-column: 6 / -1; }
}
@media (max-width: 760px) {
  .lp-behind__portrait { grid-column: 1 / -1; max-width: 240px; }
  .lp-letter { grid-column: 1 / -1; }
}

/* ---------- belonging: house rule and invitation ---------- */
.lp-belong__text .lp-belong__house { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(242, 241, 236, 0.26); }
.lp-belong__text .lp-belong__come { margin-top: 28px; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.3rem); line-height: 1.14; color: var(--dawn); text-wrap: balance; }
.lp-consent a { color: inherit; text-underline-offset: 3px; }
.lp-legal__back { margin: 0 0 22px; font-size: 1.0625rem; }
.lp-legal__back a::before { content: "\2190\00a0"; }
.lp-legal .lp-legal__inner > p:first-of-type + h1 { margin-top: 0; }

/* ---------- v8: portrait sits on the page, footer note without double rule ---------- */
.lp-behind__portrait { grid-column: 2 / span 4; max-width: 330px; }
.lp-behind__frame { background: transparent; border: 0; border-bottom: 1px solid var(--stone); }
.lp-behind__frame img { mix-blend-mode: multiply; }
.footer__images { border-top: 0; padding-top: 0; }
@media (max-width: 1100px) { .lp-behind__portrait { grid-column: 1 / span 4; } }
@media (max-width: 760px) { .lp-behind__portrait { grid-column: 1 / -1; max-width: 220px; } }

/* ---------- v9: care headline is one statement, both halves the same size ---------- */
.lp-care__title { font-size: clamp(2.1rem, 1.3rem + 2.3vw, 3.25rem); line-height: 1.1; text-wrap: balance; }
.lp-care__title em { display: block; margin-top: 0.14em; font-style: italic; font-weight: inherit; color: inherit; }

/* ---------- v10: the turn in the founder letter ---------- */
.lp-letter__body .lp-letter__turn { margin-block: 34px; font-style: italic; font-weight: 500; font-size: clamp(1.9rem, 1.45rem + 1.4vw, 2.6rem); line-height: 1.14; color: var(--gold-deep); text-wrap: balance; }
#behind-title { text-wrap: balance; }

/* Mornings: kicker before the heading, reads as one sentence */
.lp-h2-lead { display: block; font-style: italic; font-size: 0.55em; line-height: 1.2; margin-bottom: 0.15em; opacity: 0.85; }