/* pages.css: page-level layout: home, legal article, 404 (spec §8.5) */

/* ---- Home: hero ---- */

.hero {
  padding-block: clamp(3.5rem, 10vh, 6.5rem) var(--space-section);
}

.hero__grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 56rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

.hero h1 {
  margin-top: var(--space-3);
  max-width: 16ch;
}

.hero__support {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: var(--space-4);
}

.hero__motif {
  justify-self: center;
  width: min(100%, 22rem);
}

/* ---- Home: sections ---- */

.section {
  border-top: 1px solid var(--color-hairline);
  /* Optical balance (owner decision 2026-08-09): the gap above a section's
     text is 6.7% smaller than the gap below it, before the next hairline. */
  padding-block: calc(var(--space-section) * 0.933) var(--space-section);
}

/* Alternating dimmed bands (owner decision 2026-08-08): even sections
   (About, Projects, Contact) sit on a 66% black veil, so the star-dust
   reads fainter there than in the clear bands (hero, Principles,
   Newsletter). nth-of-type counts the hero as section 1. */
.section:nth-of-type(even) {
  background: rgba(0, 0, 0, 0.66);
}

.section-head {
  margin-bottom: var(--space-4);
}

.section-head .eyebrow {
  margin-bottom: var(--space-2);
}

.section-intro {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  max-width: var(--measure);
}

/* Two-column split: heading aside, text body (never more than two columns) */

.split {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-5);
  }
}

.lead {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

@media (min-width: 56rem) {
  .principle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-5);
  }
}

/* ---- Projects ---- */

.projects-grid {
  display: grid;
  gap: var(--space-3);
  /* two columns maximum at the 1120px content width (spec §8.5);
     cards cap at 30rem so a single card reads as a card, not a banner */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 30rem));
  margin-top: var(--space-4);
}

/* ---- Newsletter ---- */

.newsletter-form {
  margin-top: var(--space-4);
}

.newsletter-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.newsletter-form__row .field {
  flex: 1 1 16rem;
  margin-bottom: 0;
}

.newsletter-fallback {
  margin-top: var(--space-4);
}

.newsletter-fallback p {
  color: var(--color-text-secondary);
}

/* ---- Contact ---- */

.contact-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 56rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-5);
  }
}

.contact-grid > div > p {
  color: var(--color-text-secondary);
}

/* ---- Legal / privacy article layout ---- */

.article {
  max-width: var(--measure);
  padding-block: var(--space-section);
}

.article > header {
  margin-bottom: var(--space-5);
}

.article > header .eyebrow {
  margin-bottom: var(--space-2);
}

.article h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.article h1 + p,
.article h2 + p {
  margin-top: 0;
}

.article p,
.article ul {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.article ul {
  padding-left: var(--space-3);
  list-style: disc;
}

.article li + li {
  margin-top: 0.375rem;
}

.article .draft-banner {
  margin-bottom: var(--space-4);
}

/* ---- 404 / thanks ---- */

.page-note {
  padding-block: var(--space-section);
}

.page-note h1 {
  margin-block: var(--space-3) var(--space-2);
  max-width: 20ch;
}

.page-note p {
  color: var(--color-text-secondary);
}

.page-note .button {
  margin-top: var(--space-4);
}

.page-note .motif {
  width: min(100%, 12rem);
}