/* ============================================================
   INFO — the opening sentence, the bio alone, then the rest set
   like film end credits: roles right-aligned to one side of the
   red line, names left-aligned to the other.
   Requires foundation.css + nav.css.
   ============================================================ */

body.info {
  --wall: #e6e6e3;
  --ink: #141414;
  --ink-dim: rgba(20, 20, 20, 0.55);
  --ink-faint: rgba(20, 20, 20, 0.28);
  --spine: 44%;
  --gap: 1.25rem;              /* space either side of the red line */
  position: relative;
  min-height: 100vh;
  background: var(--wall);
  color: var(--ink);
}

body.info .site-nav__mark { color: var(--ink); }
body.info .site-nav__links a { color: rgba(20, 20, 20, 0.5); }
body.info .site-nav__links a[aria-current="page"] { color: var(--ink); }

.spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--spine);
  width: 1px;
  background: var(--color-red);
  opacity: 0.85;
  pointer-events: none;
}

/* ---- The opening sentence ---- */
.statement {
  position: relative;
  margin: 0;
  padding: 6rem 1.75rem 0;
  max-width: 20em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

/* ---- The bio, alone, to the right of the line ---- */
.bio {
  margin: 6rem 0 0 calc(var(--spine) + 2.5rem);
  padding-right: 1.75rem;
  max-width: 34em;
  font-size: var(--size-body);
  line-height: 1.55;
}

.bio p { margin: 0 0 1em; }
.bio p:last-child { margin-bottom: 0; }

/* ---- End credits ---- */
.credits {
  margin: 9rem 0 0;
  padding: 0;
}

.credits__group {
  display: grid;
  grid-template-columns: var(--spine) 1fr;
  margin: 0 0 2.25rem;
}

.credits__role {
  margin: 0;
  padding-right: var(--gap);
  text-align: right;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1.95;            /* sits on the first name's line */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.credits__names {
  margin: 0;
  padding: 0 1.75rem 0 var(--gap);
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.6;
}

.credits__names li { margin: 0 0 0.2em; color: var(--ink); }

.credits__names .where { color: var(--ink-dim); }

.credits__names a {
  color: var(--ink);
  transition: color 0.2s var(--ease);
}

.credits__names a:hover,
.credits__names a:focus-visible { color: var(--color-red); }

/* ---- Footer ---- */
.info-footer {
  position: relative;
  z-index: 1;
  background: var(--wall);
  margin: 0;
  padding: 7rem 1.75rem 1.5rem;
  font-size: 0.75rem;
}

.info-footer a { color: var(--ink-dim); }
.info-footer a:hover,
.info-footer a:focus-visible { color: var(--color-red); }

@media (max-width: 720px) {
  body.info { --spine: calc(100% - 0.5rem); }
  .statement { padding: 5rem 3rem 0 1rem; font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .bio { margin: 3.5rem 3rem 0 1rem; padding: 0; }
  .credits { margin-top: 5rem; }
  .credits__group { grid-template-columns: 1fr; margin-bottom: 2rem; }
  .credits__role { text-align: left; padding: 0 3rem 0.2rem 1rem; line-height: 1.6; }
  .credits__names { padding: 0 3rem 0 1rem; }
  .info-footer { padding: 5rem 1rem 1rem; }
}