body {
  background: var(--color-paper);
}

/* Every section fills the viewport and grows past it if the content is taller. */

section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Labels */

.label {
  margin-bottom: 28px;
  text-align: center;
}

/* Menu */

#menu {
  padding-block: 0 20px;
  text-align: center;
}

.menu__nav {
  margin: auto;
}

.menu__links {
  font-family: var(--font-cardinal-fruit);
  font-size: 88px;
  line-height: 1.25;
}

.menu__scroll {
  align-self: flex-start;
}

#who-we-are {
  justify-content: center;
}

#who-we-are .rich-text {
  align-items: center;
  text-align: center;
}

/* What We Do

   The one section that is two screens tall: the reel fills the first, the
   copy fills the second. The section's own padding is dropped so the reel can
   run edge to edge, and each screen brings back what it needs -- which is why
   `.what-we-do__content` is named in the page gutter list in main.css. */

#what-we-do {
  padding: 0;
}

.what-we-do__reel,
.what-we-do__content {
  min-height: 100svh;
}

/* Cover rather than contain: the point of shipping a separate mobile cut is
   that each one already suits the shape of the screen it plays on, so there
   is nothing to letterbox. */
.what-we-do__video {
  width: 100%;
  height: 100svh;
  object-fit: cover;
}

/* Desktop-first, so the mobile cut is the one hidden here. Both are rendered
   only when both were uploaded — a single upload comes through without either
   modifier and is never hidden. */
.what-we-do__video--mobile {
  display: none;
}

.what-we-do__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 96px;
  text-align: center;
}

.services {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service__name {
  font-family: var(--font-cardinal-fruit);
  font-size: var(--type-lead-size);
  line-height: var(--type-reading-line-height);
}

.service__description {
  margin-top: 4px;
}

/* Projects */

#projects {
  text-align: center;
}

.project-list {
  margin: auto;
}

.project-list__items {
  font-family: var(--font-cardinal-fruit);
  line-height: var(--type-reading-line-height);
  text-wrap: balance;
}

/* Meet the Team */

.team-scroller,
.location-scroller {
  position: relative;
}

.team-scroller {
  margin-top: var(--header-height);
}

.team-row,
.location-row {
  display: grid;
  grid-auto-flow: column;
  /* Seven across the container until that would take a card under 200px,
     from which point they hold their width and the row scrolls instead. */
  grid-auto-columns: max(200px, calc((100% - 6 * 24px) / 7));
  grid-template-rows: auto auto auto auto;
  gap: 0 24px;
  overflow-x: auto;
  /* The arrow cues carry the affordance instead, and a persistent scrollbar
     sits on top of the last card's quote. Standard property first, then the
     pseudo-element for engines that predate it. */
  scrollbar-width: none;
}

.team-row::-webkit-scrollbar,
.location-row::-webkit-scrollbar {
  display: none;
}

.team-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: var(--focus, center);
  margin-bottom: 34px;
}

.team-card__name {
  border-top: 1px solid var(--color-text);
  padding-block: 10px;
  font-family: var(--font-cardinal-fruit);
  font-size: 18px;
  line-height: 1.2;
}

.team-card__meta {
  border-block: 1px solid var(--color-text);
  padding-block: 8px 12px;
  font-family: var(--font-graphik);
  font-size: var(--type-caption-size);
  line-height: var(--type-reading-line-height);
}

.team-card__role {
  text-transform: uppercase;
}

.team-card__contact {
  display: flex;
  /* The office is optional and the address is long: at a 200px card the two
     will not share a line, so they wrap onto their own instead of widening
     the grid column. */
  flex-wrap: wrap;
  gap: 8px;
}

.team-card__email {
  font-family: var(--font-cardinal-fruit-italic);
  /* A flex item will not shrink below an unbreakable word, and an address is
     one. Both declarations are needed to keep it inside the card. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.team-card__quote {
  padding-top: 18px;
  font-family: var(--font-cardinal-fruit-italic);
  font-size: var(--type-caption-size);
  line-height: 1.36;
}

/* Contact. Same scroller as the team row; the card carries one fewer row --
   image, name, meta -- and no quote. Unlike the team row it is centred rather
   than filling the section: there are only ever a few offices. */

#contact {
  /* The header is fixed, so reserve its height and centre in what is left.
     `safe` so a row taller than the viewport starts at the top and stays
     reachable instead of overflowing equally in both directions. */
  justify-content: safe center;
  padding-top: var(--header-height);
}

.location-row {
  grid-template-rows: auto auto auto;
  /* Half again the team card's width. Both terms scale, not just the floor:
     the floor is what actually applies below roughly 1600px, and the fluid
     term above it, so changing one alone would step at that width. */
  grid-auto-columns: max(300px, calc((100% - 6 * 24px) / 7 * 1.5));
  /* Centred while the cards fit. `safe` drops back to start alignment as soon
     as the row overflows, so the first card never sits behind the scroll
     origin where it cannot be reached. Overflow then scrolls as it already
     does, at the same min card width. */
  justify-content: safe center;
}

.location-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

.location-card__image {
  width: 100%;
  /* Landscape, unlike the portrait team photo above. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: var(--focus, center);
  margin-bottom: 34px;
}

.location-card__name {
  border-top: 1px solid var(--color-text);
  padding-block: 10px;
  font-family: var(--font-cardinal-fruit);
  font-size: 18px;
  line-height: 1.2;
}

.location-card__meta {
  border-block: 1px solid var(--color-text);
  padding-block: 8px 12px;
  font-family: var(--font-graphik);
  font-size: var(--type-caption-size);
  line-height: var(--type-reading-line-height);
}

.location-card__contact {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.location-card__email {
  font-family: var(--font-cardinal-fruit-italic);
}

/* Short viewports */

@media (min-width: 769px) and (max-height: 686px) {
  .team-scroller,
  .location-scroller {
    zoom: 0.7;
  }
}

/* Mobile */

@media (max-width: 768px) {
  .menu__links {
    font-size: var(--type-heading-size);
    line-height: 1.5;
  }

  .menu__scroll {
    display: none;
  }

  #who-we-are,
  #projects {
    padding-inline: 30px;
  }

  #who-we-are .label {
    position: static;
    width: auto;
    height: auto;
    margin-block-start: 0;
    margin-inline: 0;
    overflow: visible;
    clip: auto;
  }

  #projects {
    padding-top: calc(96px + var(--header-height));
  }

  .what-we-do__video--desktop {
    display: none;
  }

  .what-we-do__video--mobile {
    display: block;
  }

  /* `--type-lead-size` goes up to 32px on mobile for the one-per-screen copy
     it was sized for. A stack of service names is the opposite case -- the
     list has to stay readable as a list -- so it drops to the body size. */
  .service__name {
    font-size: var(--type-body-size);
  }

  /* No right gutter, so the row runs off the edge of the screen rather than
     stopping short of it. */
  #meet-the-team {
    padding-bottom: 60px;
    padding-right: 0;
  }

  .team-scroller {
    margin-top: 32px;
  }

  /* Stacked, so there is nothing to centre and nothing to scroll. */
  #contact {
    padding-block: calc(32px + var(--header-height)) 60px;
  }

  .location-row {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-rows: none;
    gap: 60px;
    overflow-x: visible;
  }

  .location-card {
    display: block;
    grid-row: auto;
  }

  .team-scroller .scroll-cue,
  .location-scroller .scroll-cue {
    display: none;
  }

  /* One card at a time, with the next one showing past the screen edge. */
  .team-row {
    grid-auto-columns: calc(100vw - 90px);
  }

  .team-card__photo {
    aspect-ratio: 1/1.271;
    margin-bottom: 50px;
  }

  .location-card__image {
    margin-bottom: 50px;
  }

  .team-card__name,
  .location-card__name {
    font-size: 24px;
    padding-block: 18px;
  }

  .team-card__role {
    margin-bottom: 14px;
  }

  .team-card__office {
    display: none;
  }

  .team-card__meta,
  .location-card__meta {
    font-size: 20px;
    padding-block: 16px;
  }

  .team-card__quote {
    font-size: 20px;
    border-bottom: 1px solid var(--color-text);
    padding-top: 10px;
    padding-bottom: 19px;
  }
}