/* Hallmark · genre: atmospheric · macrostructure: Long Document · design-system: design.md · designed-as-app
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 */
@import url("../tokens.css");
@import url("styles.css");

.page-main {
  width: 100%;
  min-height: 70svh;
  padding-bottom: var(--space-2xl);
}

.page-header {
  position: relative;
  isolation: isolate;
  overflow: clip;
  max-width: none;
  min-height: clamp(19rem, 48vw, 32rem);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--masthead-h) + var(--space-xl)) max(var(--space-m), calc((100vw - var(--content)) / 2 + var(--space-m))) var(--space-xl);
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--hero-shade-faint) 18%, var(--hero-shade-medium) 62%, var(--bg) 100%);
}

.page-header-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.72) contrast(1.06);
}

.page-header h1 {
  max-width: 18ch;
  min-width: 0;
  margin: 0;
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.page-content {
  width: min(100%, var(--content));
  max-width: 72ch;
  margin-inline: auto;
  padding-inline: var(--space-m);
  padding-block: clamp(3rem, 7vw, 6rem);
}

.page-content > :first-child { margin-top: 0; }
.page-content h2 { margin: 2.5em 0 0.6em; font-size: clamp(1.75rem, 3vw, 2.6rem); }
.page-content h3 { margin: 2em 0 0.5em; font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--teal); }
.page-content p + p { margin-top: 1.2em; }
.page-content a { overflow-wrap: anywhere; }
.page-content .iop-list { margin-block: 1.25rem 2rem; }

.page-content .iop-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s);
  width: min(100vw - 2 * var(--space-m), var(--content));
  max-width: var(--content);
}

.page-content .iop-person { margin: 0; }
.page-content .iop-person img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.page-content .iop-person img.portrait-fallback {
  padding: 25%;
  object-fit: contain;
  background: var(--bg-raised);
  opacity: 0.3;
}
.page-content .iop-person figcaption { margin-top: 0.55rem; color: var(--ink); font-size: var(--step--1); }

@media (max-width: 767px) {
  .page-header { min-height: 25rem; padding: calc(var(--masthead-h) + var(--space-l)) var(--space-s) var(--space-l); }
  .page-header-photo { object-position: 54% center; }
  .page-content { padding: 3rem var(--space-s); }
  .page-content .iop-people { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .page-content .iop-person img { aspect-ratio: 16 / 10; object-position: center 22%; }
}