/* ==========================================================================
   FOREIGN GROUNDS — PAGES
   home · page header · services · about · legal
   ========================================================================== */

/* ---------- HOME: opening screen --------------------------------------- */

.hero {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-5);
  padding-inline: var(--page-gutter);
  padding-bottom: var(--hero-peek);         /* the image below already reaches in */
  text-align: center;
}
/* The line over the wordmark: brand red, a little larger, with room below it */
.hero__kicker {
  font-size: var(--text-kicker);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  transform: translateY(calc(-1 * var(--space-4)));
}
.hero__brand { font-size: var(--text-wordmark); }
.hero__claim { margin-top: var(--space-3); font-size: var(--text-lead); line-height: var(--leading-normal); letter-spacing: var(--tracking-statement); }

/* The opening image: starts inside the first screen and invites the scroll */
.hero-image {
  margin-top: calc(-1 * var(--hero-peek));
}
/* The opening video is portrait (Instagram 9:16): shown whole, never cropped */
.hero-image .ph {
  --ratio: 9 / 16;
  width: auto;
  height: min(var(--hero-video-height), calc((100vw - 2 * var(--page-gutter)) * 16 / 9));
  margin-inline: auto;
}

/* ---------- HOME: intro statement -------------------------------------- */

.intro { display: grid; justify-items: center; gap: var(--space-6); text-align: center; }

/* ---------- PAGE HEADER (all inner pages) ------------------------------ */

.page-head {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  text-align: center;
  padding-top: clamp(7rem, 18vw, 12rem);
  padding-bottom: var(--space-section-tight);
}

/* Anchor links under the services header */
.subnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}
.subnav a { transition: color var(--duration-fast) var(--ease-out); }
.subnav a:hover { color: var(--color-accent); }

/* ---------- SERVICES --------------------------------------------------- */

.service { padding-top: var(--space-section); scroll-margin-top: var(--space-6); }
.service__head {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: baseline;
  margin-bottom: var(--space-7);
}
.service__title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-statement);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-statement);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
.service__image { margin-bottom: var(--space-7); }

/* prose left, facts right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.split .lead { margin-bottom: var(--space-6); }
@media (max-width: 48em) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .service__head { grid-template-columns: 2rem minmax(0, 1fr); }
}

/* ---------- ABOUT ------------------------------------------------------ */

.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}
.about__portrait { position: sticky; top: var(--space-7); }
.about__portrait figcaption { margin-top: var(--space-caption); }
.about__text .lead { margin-bottom: var(--space-7); }
.about__meta { display: grid; gap: var(--space-2); margin-top: var(--space-7); }
@media (max-width: 48em) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .about__portrait { position: static; width: 78%; }
}

/* A row of small images between about sections */
.strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid);
  align-items: start;
}
.strip > :nth-child(2) { margin-top: clamp(2rem, 6vw, 5rem); }

/* ---------- LEGAL ------------------------------------------------------ */

.legal { max-width: var(--text-max); margin-inline: auto; }
.legal h2 { font-size: var(--text-title); font-weight: var(--font-weight-medium); line-height: var(--leading-snug); margin: var(--space-7) 0 var(--space-3); }
.legal p + p { margin-top: var(--space-3); }
.legal .todo { background: var(--color-paper-2); padding: 0 var(--space-1); }

/* ---------- CASE STUDY PAGE ------------------------------------------ */

.case__title {
  font-size: clamp(2.5rem, 6.5vw, 6rem);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-logo);
  text-wrap: balance;
}
.case__body { padding-bottom: 0; }

/* Customer voice: centred, one breath between text and pictures */
.case__quote figure {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: var(--statement-max);
  margin-inline: auto;
  text-align: center;
}
.case__quote blockquote { margin: 0; }

/* Not filled in yet (js/data.js) — visible while building, quiet */
.is-pending { color: var(--color-ink-2); }

.case__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-grid);
}
.case__gallery > :nth-child(2) { margin-top: clamp(3rem, 8vw, 7rem); }
.case__gallery > :nth-child(3) { grid-column: 1 / -1; margin-top: var(--space-section-tight); }

/* Next project: one hairline, the next name large */
.case__next {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  margin-top: var(--space-section);
  padding-top: var(--space-section);
  border-top: var(--rule-width) solid var(--color-rule);
  text-align: center;
}
.case__next-link { display: grid; gap: var(--space-3); justify-items: center; }
.case__next-name {
  font-size: var(--text-statement);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-statement);
  transition: transform var(--duration-base) var(--ease-out);
}
.case__next-link:hover .case__next-name { transform: translateY(calc(-1 * var(--space-1))); }