/* Layout B, "Field and Rail".
   The photographs are the entire background, as the brief describes the Bruin
   first screen. Type sits in one calm rail down the left, carried on a scrim
   rather than in a box, and the portfolio banner rides the bottom edge. */

/* Three bands stacked down the page: photographs, then the contact footer, then
   the portfolio. The page is a flex column one viewport tall and the photographs
   take whatever the other two bands leave, so nothing depends on their heights
   being guessed correctly. */
body {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
}

.stage {
  position: relative;
  width: 100%;
  min-height: 380px;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--ground);
}

.site-foot,
.portfolio {
  flex: 0 0 auto;
}

.field {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr);
  grid-template-rows: minmax(0, 7fr) minmax(0, 5fr);
}

.field .shot {
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.field-1 { grid-column: 1; grid-row: 1 / 3; }
.field-2 { grid-column: 2 / 4; grid-row: 1; }
.field-3 { grid-column: 2; grid-row: 2; }
.field-4 { grid-column: 3; grid-row: 2; }

/* Carries the type. Without it the statement would sit on photographs and fail
   contrast, which no amount of text shadow fixes honestly. */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(25, 29, 31, 0.80) 0%,
      rgba(25, 29, 31, 0.74) 26%,
      rgba(25, 29, 31, 0.54) 44%,
      rgba(25, 29, 31, 0.14) 62%,
      rgba(25, 29, 31, 0) 74%
    ),
    linear-gradient(
      0deg,
      rgba(25, 29, 31, 0.45) 0%,
      rgba(25, 29, 31, 0) 18%
    );
}

.rail {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: min(46%, 660px);
  padding: clamp(1.6rem, 3.4vw, 3.6rem) var(--inset);
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 3rem);
}

/* logo holds the top, the statement settles low in the frame */
.rail .statement {
  margin-top: auto;
}

.rail .brand img {
  width: clamp(118px, 12vw, 176px);
}

.rail .statement {
  font-size: clamp(1.75rem, 3.05vw, 3.7rem);
}

.rail-foot {
  display: grid;
  gap: clamp(0.7rem, 1.2vw, 1.15rem);
}

.rail-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(0.6rem, 1.1vw, 1rem);
  border-top: 1px solid var(--rule);
}

.site-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: var(--foot, 68px);
  padding: clamp(0.9rem, 1.5vw, 1.35rem) var(--inset);
  background: var(--ground);
}

.foot-meta {
  display: flex;
  align-items: baseline;
  gap: clamp(0.85rem, 2.2vw, 2.2rem);
}

/* The footer reads as one line for as long as the words will physically fit.
   Between 600 and 1023 the type steps down and Nairobi tucks in closer to the
   copyright rather than the line breaking in two. */
@media (max-width: 1023px) {
  .site-foot {
    gap: 1rem;
  }

  .site-foot .contact {
    font-size: clamp(0.72rem, 1.55vw, 0.84rem);
    letter-spacing: 0.035em;
    white-space: nowrap;
  }

  .site-foot .place {
    font-size: clamp(0.6rem, 1.15vw, 0.72rem);
    letter-spacing: 0.18em;
  }

  .site-foot .copyright {
    font-size: clamp(0.6rem, 1.15vw, 0.72rem);
  }

  .foot-meta {
    gap: clamp(0.7rem, 1.8vw, 1.4rem);
  }
}

/* Below this the sentence genuinely cannot fit, so it stacks rather than
   shrinking into something unreadable. */
@media (max-width: 519px) {
  .site-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.1rem var(--inset) 1.25rem;
  }

  .site-foot .contact {
    white-space: normal;
  }

  .foot-meta {
    justify-content: space-between;
    width: 100%;
  }
}

.portfolio {
  min-height: var(--banner, 132px);
}

/* ---------------------------------------------------------------
   Tablet: the rail widens and the field simplifies behind it
   --------------------------------------------------------------- */

@media (max-width: 1023px) and (min-width: 768px) {
  .field {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
  }

  .field-1 { grid-column: 1; grid-row: 1 / 3; }
  .field-2 { grid-column: 2; grid-row: 1; }
  .field-3 { grid-column: 2; grid-row: 2; }
  .field-4 { display: none; }

  .rail {
    width: min(62%, 560px);
  }

  .scrim {
    background:
      linear-gradient(
        100deg,
        rgba(25, 29, 31, 0.97) 0%,
        rgba(25, 29, 31, 0.94) 44%,
        rgba(25, 29, 31, 0.6) 64%,
        rgba(25, 29, 31, 0) 84%
      ),
      linear-gradient(0deg, rgba(25, 29, 31, 0.5) 0%, rgba(25, 29, 31, 0) 20%);
  }
}

/* ---------------------------------------------------------------
   Mobile: one photograph fills the screen, the scrim turns vertical and
   the type sits along the bottom edge above the banner
   --------------------------------------------------------------- */

@media (max-width: 767px) {
  .field {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .field-1 { grid-column: 1; grid-row: 1; }
  .field-2,
  .field-3,
  .field-4 { display: none; }

  .scrim {
    background: linear-gradient(
      0deg,
      rgba(25, 29, 31, 0.96) 0%,
      rgba(25, 29, 31, 0.9) 30%,
      rgba(25, 29, 31, 0.58) 46%,
      rgba(25, 29, 31, 0.12) 66%,
      rgba(25, 29, 31, 0.5) 100%
    );
  }

  .rail {
    width: 100%;
    padding: 1.1rem var(--inset) 1.4rem;
    justify-content: flex-end;
    gap: 1.2rem;
  }

  .rail .brand {
    margin-bottom: auto;
  }

  .rail .brand img { width: 112px; }

  .rail .statement {
    font-size: clamp(1.5rem, 6.6vw, 2.15rem);
  }
}