/* ============================================================
   layout.css — page frame, header, sections, footer
   (DESIGN.md §4, §5.1, §5.3, §5.6)
   ============================================================ */

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* ---------- Header (DESIGN.md §5.1) ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-height);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--hairline);
}

/* 3-column grid keeps the nav dead-center regardless of wordmark width
   (DESIGN.md §5.1) */
.site-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
}

.wordmark {
  display: flex;
  align-items: center;
}

.wordmark__text strong {
  color: var(--color-text);
  font-weight: 400;
}

.site-nav {
  display: flex;
  gap: var(--space-6);
  justify-self: center;
}

.site-nav a {
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease);
  padding-block: var(--space-2);
}

.site-nav a:hover {
  color: var(--color-accent);
}

.site-nav a.is-active {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

@media (max-width: 639px) {
  .site-nav {
    gap: var(--space-4);
  }

  .wordmark__suffix {
    display: none; /* name-only wordmark on mobile, keeps room for the nav */
  }
}

/* ---------- Main & sections ---------- */

main {
  padding-top: var(--header-height);
}

.section {
  border-top: var(--hairline);
  padding-block: var(--space-9) var(--space-10);
}

/* Section header pattern (DESIGN.md §5.3) */
.section__index {
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

.section__title {
  font-size: var(--type-h2);
  font-weight: 800;
  letter-spacing: var(--tracking-h2);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}

/* Simple responsive grid used inside sections */
.grid {
  display: grid;
  gap: var(--space-7) var(--grid-gutter);
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Footer status bar (DESIGN.md §5.6) ---------- */

.site-footer {
  border-top: var(--hairline);
}

.site-footer__inner {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  color: var(--color-muted);
}

@media (max-width: 639px) {
  .site-footer__section {
    display: none;
  }
}