/* Page content below the hero — ported from ref.html.

   Everything here is scoped under .site. The source styled bare `header`,
   `main` and `footer`, used a `*` reset, set colour on `body`, and had its own
   `.hero` class — all of which collide with the hero above (our masthead is a
   <header>, and our copy is white on the gradient). Scoping keeps the two
   independent. The only rename is .hero -> .site-hero, since leaving two
   different .hero rules in one stylesheet is a trap for later editing. */

.site {
  --bg: #fbf3ec;
  --fg: var(--ink-dark);
  --border: rgba(21, 21, 21, 0.15);
  --spacing-section: 8vw;
  /* Hoisted so the optical-alignment rules below can reference them. */
  --headline-size: clamp(2.5rem, 5vw, 4.5rem);
  --name-size: clamp(4rem, 9vw, 12rem);
  /* --edge and --gutter come from styles.css, shared with the hero. The
     original's own 4vw edge is gone: it put this half of the page on a
     different grid to the hero. */

  position: relative;
  z-index: 4;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---- Type ----
   Grain (the logo's typeface) carries labels, indices and all display type.
   Mafra carries anything set in sentences. */
.site .text-label,
.site .text-nav,
.site .text-meta,
.site .text-headline,
.site .text-massive,
.site .roster-index {
  font-family: var(--font-mono);
}

.site .text-logo {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site .text-nav {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--fg);
}

.site .text-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.site .text-headline {
  font-size: var(--headline-size);
  font-weight: 700;
  /* Retuned for Grain. The old -0.04em was set against a monospace, whose
     fixed pitch left gaps to close; Grain is already tightly fitted and that
     much negative tracking pulled the words together. */
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 14ch;
}

.site .text-body {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.35;
  /* Both left at normal. The old word-spacing existed to open up Supply Sans,
     whose word space was unusually narrow; Mafra is a text serif drawn with a
     proper word space and the extra just made it gappy. */
  letter-spacing: 0;
  word-spacing: normal;
  max-width: 38ch;
}

.site .text-massive {
  font-size: var(--name-size);
  /* ExtraBold rather than Black — one step down. Black read as a slab at this
     size in Grain, which is much heavier than the mono it replaced. */
  font-weight: 800;
  /* Was -0.05em, which under Grain Black actually collided the "a" and "t"
     of Father. */
  letter-spacing: -0.015em;
  line-height: 0.75;
  text-transform: capitalize;
}

.site .text-meta {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- Layout ---- */
.site .container {
  width: 100%;
  padding: 0 var(--edge);
}

/* Stands in for the removed top bar. Measured off the original at 1440: 3vw
   top padding + a 24px logo line-box + 6vw bottom padding = 153.58px. */
.site .top-space {
  height: calc(9vw + 1.5rem);
}

/* ---- Studio overview ---- */
.site .site-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  margin-bottom: var(--spacing-section);
  align-items: flex-start;
}

/* Column 2, to sit on the same line as the roster photos.

   The grid aligns box tops, but the two share no cap line: the headline at
   line-height 1.05 drops its caps 0.1667em below its box top, while the
   0.65rem label at line-height 1.2 drops its own 0.1923em. Both were measured
   off the render with this padding zeroed, so they describe Grain — a
   different typeface will need them re-derived. */
.site .hero-label {
  grid-column: 2 / 4;
  padding-top: calc(0.1667 * var(--headline-size) - 0.1923 * 0.65rem);
}

.site .hero-headline {
  grid-column: 4 / 9;
}

.site .hero-copy {
  grid-column: 9 / 13;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 0.5rem;
}

.site .rule {
  width: 100%;
  height: 1px;
  background-color: var(--border);
}

/* ---- Roster ---- */
.site .roster {
  width: 100%;
}

.site .roster-item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  padding: 4vw 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.site .roster-indent {
  grid-column: 1 / 2;
}

/* Pushed left into the indent so the portrait, the index and the name each get
   air. Starts flush on column line 2. */
.site .roster-image-col {
  grid-column: 2 / 4;
  display: flex;
  justify-content: flex-start;
}

.site .roster-image {
  width: clamp(80px, 8vw, 140px);
  /* Required alongside the width/height attributes on the img. Those are
     presentational hints that set a real height, which would otherwise
     override aspect-ratio and stretch the picture to its natural 800px. */
  height: auto;
  aspect-ratio: 1;
  border-radius: clamp(12px, 1.5vw, 24px);
  object-fit: cover;
  filter: contrast(1.1) saturate(1.2);
}

/* The original padded this 1vw, so the roster name started just off the
   column-4 line that the headlines above sit on. Removed, and the index is
   hung into the gutter instead so the name itself is flush to the line. */
/* Ends at line 9, where the bio begins. It previously ran 4/10, which claimed
   column 9 as well — grid auto-placement then bumped the bio onto a second
   row, which is what dropped it below the portrait and name. */
.site .roster-name-col {
  grid-column: 4 / 9;
  display: flex;
  align-items: flex-end;
  position: relative;
}

/* Baseline-matched to the name beside it. Two offsets to undo: the name's
   baseline sits 0.0309em ABOVE its own box bottom, and the index's sits
   0.385em above its own. Note the first term is now positive — under Fraktion
   the name's ink hung BELOW its box, under Grain it falls short of it, so the
   correction reverses direction. Measured with this offset zeroed. */
.site .roster-index {
  position: absolute;
  right: 100%;
  margin-right: 0.75vw;
  bottom: calc(0.0309 * var(--name-size) - 0.385 * 0.65rem);
}

/* Was column 10 with a 2vw pad, which put it on neither the column-9 line the
   studio copy uses nor the column-10 line. Now shares column 9 with the
   studio copy above and the footer's third column below. */
.site .roster-bio-col {
  grid-column: 9 / 13;
}

.site .roster-bio-text {
  font-size: 0.8rem;
  line-height: 1.3;
  /* Same rendered measure as .text-body above, which is 38ch. ch resolves
     against each element's own font-size, and this runs at 0.8rem against that
     rule's 0.9rem — so the character count is scaled by 0.9/0.8 to land on the
     same width. Expressed this way rather than as a fixed px value so the two
     stay matched when the typeface changes. */
  max-width: calc(38ch * (0.9 / 0.8));
}

/* The name lifts out of the sentence on two axes — typeface and weight — so it
   still separates in the all-one-typeface options, where the typeface contrast
   disappears and weight is all that is left. */
.site .roster-bio-text strong {
  font-family: var(--font-mono);
  font-weight: 700;
}

/* Links inherit completely — the browser default would colour this blue and
   underline it. The only cue left is the pointer cursor on hover, which is the
   UA behaviour and not a style change. */
.site a {
  color: inherit;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
}

/* ---- Footer ---- */
/* The footer sits inside .container, which already applies the page edge, so
   the original's own horizontal padding was doubling it — the whole footer was
   inset one extra --edge from every other row on the page. */
.site footer {
  padding: var(--spacing-section) 0 4vw;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.site .footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site .footer-col.c1 { grid-column: 2 / 4; } /* matches the labels and photos */
.site .footer-col.c2 { grid-column: 4 / 7; }
.site .footer-col.c3 { grid-column: 9 / 13; }

@media (max-width: 1024px) {
  .site .hero-headline { grid-column: 3 / 8; }
  .site .hero-copy { grid-column: 8 / 13; }

  /* The photos move to column 1 here, so the labels and footer follow them
     back. Leaving them on column 2 would also have collided with the headline
     below, which starts at 3 at this width. */
  .site .hero-label { grid-column: 1 / 3; }
  .site .footer-col.c1 { grid-column: 1 / 3; }

  .site .roster-indent { display: none; }
  .site .roster-image-col { grid-column: 1 / 3; justify-content: flex-start; }
  .site .roster-name-col { grid-column: 3 / 9; }
  .site .roster-bio-col { grid-column: 9 / 13; }
}

@media (max-width: 768px) {
  .site .site-hero { display: flex; flex-direction: column; gap: 3rem; }
  .site .hero-label { margin-bottom: -1.5rem; }

  /* Stacked, --spacing-section works out to ~31px here — barely more than the
     28px between two body paragraphs, so STUDIO OVERVIEW read as another
     paragraph rather than a new section. 4rem clears the 3rem gap used inside
     a section, which is what makes the break legible. Adjacent margins
     collapse, so this is the whole gap, not an addition to the one below.
     Scoped to a following sibling: the first section's top space is set by
     .top-space, and the footer keeps --spacing-section. */
  .site .site-hero + .site-hero { margin-top: 4rem; }

  .site .roster-item {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 3rem 0;
  }
  .site .roster-image-col { width: 100%; margin-bottom: 1rem; }
  .site .roster-bio-col { width: 100%; padding-left: 0; margin-top: 1rem; }

  /* Index stacked above the name rather than inline beside it, and both flush
     left so the name starts on the same edge as the portrait above it. The
     column was row-flex + align-items:flex-end for the desktop baseline trick;
     neither applies once it stacks. */
  .site .roster-name-col {
    width: 100%;
    padding-left: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Stacked, there is no gutter to hang the index in. */
  .site .roster-index {
    position: static;
    margin: 0 0 0.5rem;
  }

  /* Full measure on a phone — the container's edge padding is the gutter, so
     a ch-based max-width on top of it just wastes the width. */
  .site .text-body,
  .site .roster-bio-text {
    max-width: none;
  }
  .site .text-body { font-size: 1rem; }
  .site .roster-bio-text { font-size: 0.95rem; }

  .site footer { display: flex; flex-direction: column; gap: 3rem; }
}