/* Page-level layout for the landing page. Component styles live in spiral.css. */

/* Keep the footer at the bottom when the content is short. */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page-main {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px var(--space-6);
}

.page-description {
  margin: 0;
  max-width: 34em;
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
}

@media (max-width: 640px) {
  .page-main { padding: 48px var(--space-4); }
  .page-description { font-size: 19px; line-height: 28px; }
}

/* Logo mark next to the wordmark, and the large mark above the description. */
.page-lockup { display: inline-flex; align-items: center; gap: 12px; }
.page-mark-sm, .page-mark-md { display: block; flex: none; }
.page-mark-sm img { display: block; width: 32px; height: 32px; }
.page-mark-md img { display: block; width: 44px; height: 44px; }
.page-mark-hero { display: block; width: 160px; height: 160px; margin-bottom: var(--space-6); }
.page-mark-hero .whirl-outline { stroke: var(--ink); }

@media (max-width: 640px) {
  .page-mark-hero { width: 140px; height: 140px; }
}

/* Team page */
.team { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-block: 32px; }
.team-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}
.team-member { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-6) var(--space-10); }
.team-photo { margin: 0; width: 200px; flex: none; }
.team-photo img { display: block; width: 200px; height: 200px; object-fit: cover; }
.team-info { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 320px; min-width: 0; max-width: 34em; }
.team-name { margin: 0 0 var(--space-1); font-size: 22px; line-height: 30px; font-weight: 500; }
.team-bio { margin: 0; font-size: 17px; line-height: 28px; color: var(--ink-muted); }
.team-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

@media (max-width: 640px) {
  .team-heading { font-size: 44px; }
}