/* Home page layout. The one authored motion is the approach: as the visitor scrolls,
   the view through the hero doorway draws closer, as if walking up the path (js/doorway.js). */

.section {
  padding: var(--section) var(--gutter);
}

.section--ivory {
  background: var(--ivory);
}

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
}

.lede {
  font-size: var(--step-lede);
  line-height: 1.65;
  color: var(--ink-2);
}

.body-copy {
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ---------- Hero: the lit doorway ----------
   The page is the wall and the arch is the door in it: a lantern-lit path to a glowing
   pavilion, framed by a champagne architrave. Phone stacks title, Amber's line, door,
   lede; tablet sets the words beside the door; wide screens flank it like a facade,
   what we offer on the left and Amber's voice on the right. */

.hero {
  --door-w: min(500px, calc(100vw - 72px));
  --door-h: calc(var(--door-w) * 1.56);
  --architrave: 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "voice"
    "door"
    "lede";
  justify-items: center;
  text-align: center;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(8px, 4vw, 64px);
}

.hero__title {
  grid-area: title;
  max-width: 18ch;
  font-size: clamp(2.2rem, 1.7rem + 2.2vw, 3.4rem);
  line-height: 1.08;
}

.hero__voice {
  grid-area: voice;
  margin: 20px 0 0;
  max-width: 30ch;
}

.hero__voice p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
  line-height: 1.3;
  color: var(--ink);
}

.hero__voice footer {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--step-small);
  color: var(--ink-2);
}

.hero__voice footer::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--champagne);
}

.hero__lede {
  grid-area: lede;
  max-width: 40ch;
  margin-top: 36px;
}

/* The door. The opening clips the image to a tall arch; the architrave is a hairline
   frame set a few pixels outside it, open at the foot like a real doorway. */
.doorway {
  grid-area: door;
  position: relative;
  width: var(--door-w);
  height: var(--door-h);
  margin: calc(28px + var(--architrave)) 0 0;
}

.doorway::before {
  content: "";
  position: absolute;
  inset: calc(var(--architrave) * -1) calc(var(--architrave) * -1) 0;
  border: 1px solid var(--champagne);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}

.doorway__opening {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background: #3a3530;
}

.doorway img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform-origin: 50% 62%;
}

@media (max-width: 720px) {
  .hero {
    --door-h: min(calc(var(--door-w) * 1.56), 78svh);
  }
}

/* Tablet: the words beside the door */
@media (min-width: 721px) {
  .hero {
    --door-w: clamp(320px, 42vw, 460px);
    --door-h: min(calc(var(--door-w) * 1.5), calc(100svh - 150px));
    grid-template-columns: minmax(0, 1fr) var(--door-w);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "title door"
      "lede  door"
      "voice door";
    column-gap: clamp(48px, 7vw, 96px);
    justify-items: start;
    align-items: start;
    text-align: left;
    padding-top: clamp(16px, 3vw, 32px);
  }
  .hero__title {
    max-width: 13ch;
    margin-top: clamp(24px, 9vh, 96px);
  }
  .hero__lede {
    margin-top: 28px;
    max-width: 36ch;
  }
  .hero__voice {
    align-self: end;
    margin-top: 40px;
    padding-bottom: 8px;
  }
  /* One phrase per line, the opening quote hung in the margin */
  .hero__voice p span {
    display: block;
  }
  .hero__voice p span:first-child {
    text-indent: -0.42em;
  }
  .doorway {
    margin: var(--architrave) 0 0;
    min-height: 460px;
  }
}

/* Wide: a facade, the door between what we offer and Amber's voice */
@media (min-width: 1120px) {
  .hero {
    --door-w: clamp(420px, 34vw, 500px);
    grid-template-columns: minmax(0, 1fr) var(--door-w) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "title door ."
      "lede  door ."
      ".     door voice";
    column-gap: clamp(56px, 5vw, 88px);
  }
  .hero__title {
    font-size: clamp(2.8rem, 1.6rem + 1.7vw, 3.5rem);
  }
  .hero__voice {
    max-width: none;
    margin-top: 0;
  }
  .hero__voice p {
    font-size: clamp(1.45rem, 0.9rem + 0.75vw, 1.8rem);
  }
  .hero__voice footer {
    white-space: nowrap;
  }
}

/* ---------- How women find us ---------- */

.find-us {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}

.find-us__intro .lede {
  margin-top: 28px;
  max-width: 34ch;
}

.path {
  list-style: none;
  position: relative;
  counter-reset: none;
}

.path::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(to bottom, var(--champagne), var(--champagne-soft));
}

.path__step {
  position: relative;
  padding-left: 48px;
}

.path__step + .path__step {
  margin-top: 48px;
}

.path__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--pearl);
  border: 1px solid var(--champagne);
  box-shadow: inset 0 0 0 3px var(--pearl), inset 0 0 0 8px var(--champagne-soft);
}

.path__step:last-child::before {
  background: var(--champagne);
  box-shadow: inset 0 0 0 3px var(--pearl);
}

.path__step p {
  margin-top: 10px;
  color: var(--ink-2);
  max-width: 46ch;
}

@media (max-width: 860px) {
  .find-us {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ---------- What the days hold ---------- */

.days {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas:
    "media intro"
    "media pillars";
  grid-template-rows: auto 1fr;
  column-gap: clamp(48px, 8vw, 120px);
  align-items: start;
}

.days__media {
  grid-area: media;
  position: sticky;
  top: 32px;
  margin: 0;
}

.days__intro {
  grid-area: intro;
}

.days__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: var(--shadow-soft);
}

.days__intro .lede {
  margin-top: 28px;
  max-width: 46ch;
}

.pillars {
  grid-area: pillars;
  list-style: none;
  margin-top: 48px;
  border-top: 1px solid var(--line);
}

.pillar {
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--line);
}

.pillar h3 {
  font-size: 1.6rem;
}

.pillar p {
  margin-top: 8px;
  color: var(--ink-2);
  max-width: 52ch;
}

@media (max-width: 860px) {
  .days {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "media"
      "pillars";
    grid-template-rows: auto;
    row-gap: 40px;
  }
  .days__media {
    position: static;
  }
  .pillars {
    margin-top: 0;
  }
}

/* ---------- The land ---------- */

.land-image {
  margin: 0;
  height: clamp(320px, 62vh, 720px);
  overflow: hidden;
}

.land-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

.land {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
}

.land__copy .body-copy {
  margin-top: 28px;
}

.facts {
  margin: 0;
  border-top: 1px solid var(--line);
}

.facts div {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--ink);
}

.facts dd {
  margin: 4px 0 0;
  font-size: var(--step-small);
  color: var(--ink-3);
}

@media (max-width: 860px) {
  .land {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---------- The founding circle ---------- */

.circle {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.circle__copy .body-copy {
  margin-top: 28px;
}

.quote {
  margin: 48px 0 0;
  padding: 0;
}

.quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.55rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1.32;
  color: var(--ink);
  max-width: 30ch;
}

.quote footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--step-small);
  color: var(--ink-2);
}

.quote footer::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--champagne);
}

.circle__note {
  margin-top: 40px;
  font-size: var(--step-small);
  color: var(--ink-3);
  max-width: 48ch;
}

.circle__media {
  margin: 0;
}

.circle__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 860px) {
  .circle {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .circle__media {
    max-width: 520px;
  }
}

/* ---------- Privacy. Consent. Safety. ---------- */

.promise h2 {
  text-align: center;
}

.promise__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(32px, 5vw, 72px);
  margin-top: 64px;
}

.promise__item {
  padding-top: 24px;
  border-top: 1px solid var(--champagne);
}

.promise__item p {
  margin-top: 12px;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .promise__list {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }
}

/* ---------- By invitation ---------- */

.invitation {
  text-align: center;
}

.invitation .mark {
  width: 64px;
  margin: 0 auto 32px;
}

.invitation .lede {
  max-width: 48ch;
  margin: 28px auto 0;
}

.invitation__actions {
  margin-top: 44px;
}

.invitation__alt {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  color: var(--ink-2);
}


.invitation__note {
  margin-top: 36px;
  font-size: var(--step-small);
  color: var(--ink-3);
}