/* Home (front-page.php): hero, statement, selected rooms, method, quote, journal teaser */

/* ---------- Hero: copy on the start side, the live plate on the end side */
.hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
.hero__inner { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.hero__title { font-size: clamp(2.75rem, 0.6rem + 5.4vw, 6.5rem); }
.hero__text { max-inline-size: 34ch; margin-block-start: clamp(1.25rem, 2.2vw, 2rem); font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); }
.hero__plate { max-inline-size: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: clamp(1.5rem, 2.6vw, 2.25rem); }

@media (min-width: 56.25rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    min-block-size: calc(100dvh - var(--header-h) - 6.5rem);
  }
  /* The plate is as large as the viewport height allows, so the whole hero fits on one screen. */
  .hero__plate { justify-self: end; inline-size: min(100%, calc(100dvh - var(--header-h) - 11rem)); min-inline-size: 16rem; max-inline-size: none; }
}

/* ---------- Statement: one paragraph, read at scroll speed */
.statement { padding-block: var(--section); }
.statement__text {
  max-inline-size: 23em;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.6rem, 1rem + 2.5vw, 3.35rem);
  font-stretch: 112%;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.16;
  text-wrap: balance;
}

/* ---------- Selected rooms: a swipe row by default, a pinned pan when motion.js takes over */
/* The row bleeds to the screen edges, but its first and last photos line up with the page container.
   --edge is the distance from the section's edge to the container's content edge. */
.rooms { padding-block: clamp(3rem, 6vw, 5rem) var(--section); overflow: clip; container-type: inline-size; }
.rooms__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-block-end: clamp(1.75rem, 3.5vw, 3rem); }
.rooms__track {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.5rem);
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  --edge: max(var(--gutter), calc((100cqi - var(--max)) / 2 + var(--gutter)));
  padding-inline: var(--edge);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rooms__track::-webkit-scrollbar { display: none; }
.room { flex: none; inline-size: 84vw; scroll-snap-align: start; }
.room__link { display: block; text-decoration: none; }
.room__media { aspect-ratio: 16 / 10; }
.room__title { margin-block-start: 1rem; font-family: var(--font-display); font-stretch: 125%; font-weight: 560; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.1; }
.room__meta { margin-block-start: 0.25rem; color: var(--ink-2); }

@media (min-width: 56.25rem) {
  /* Every photo shares one height; the width follows from its ratio. */
  .room, .room--tall { inline-size: auto; }
  .room__media { block-size: min(58dvh, 38rem); inline-size: auto; }
  .room--tall .room__media { aspect-ratio: 3 / 4; }

  .rooms.is-pinned { display: flex; flex-direction: column; justify-content: center; block-size: calc(100dvh - var(--header-h)); padding-block: 0; }
  .rooms.is-pinned .rooms__track { inline-size: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; }
}

/* ---------- Method: one photo, three verbs */
.method { padding-block: var(--section); }
.method__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem) var(--gap); align-items: center; }
.method__media { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.method__copy { grid-column: 7 / -1; }
.method__title { max-inline-size: 13em; }
.method__steps { margin-block: clamp(2rem, 4vw, 3.5rem) 2rem; }
.method__step { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 1rem; padding-block: 1.25rem; border-block-start: 1px solid var(--line); }
.method__verb { font-size: var(--fs-h3); font-stretch: 112%; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.method__step p { max-inline-size: 40ch; color: var(--ink-2); }
[data-parallax] img { transition: none; }

@media (max-width: 56.24rem) {
  .method__media, .method__copy { grid-column: 1 / -1; }
  .method__media { aspect-ratio: 16 / 11; }
}
@media (max-width: 30rem) {
  .method__step { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
}

/* ---------- Quote */
.quote { padding-block: var(--section); background: var(--bg-2); }
.quote__figure { display: grid; text-align: center; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) var(--gap); }
.quote__text { grid-column: 2 / span 10; text-wrap: balance; font-size: clamp(1.6rem, 1rem + 2.7vw, 3.6rem); font-stretch: 112%; font-weight: 500; letter-spacing: -0.025em; line-height: 1.14; }
.quote__by { grid-column: 1 / -1; color: var(--ink-2); }
.quote__by strong { color: var(--ink); font-weight: 600; }
@media (max-width: 56.24rem) {
  .quote__text, .quote__by { grid-column: 1 / -1; }
}

/* ---------- Journal teaser */
.journal-teaser { padding-block: var(--section); }
.journal-teaser__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-block-end: clamp(2rem, 4vw, 3.5rem); }