/* ==========================================================================
   Layout — container, grid, act rhythm, and approved editorial patterns.
   Values come from assets/css/tokens.css.
   ========================================================================== */

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

.container--wide {
  max-width: var(--container-wide);
}

.container--prose {
  max-width: var(--container-prose);
}

/* ---- Narrative acts ---- */
.act {
  padding-block: var(--space-8);
}

@media (min-width: 1024px) {
  .act {
    padding-block: var(--space-9);
  }
}

.act--belief {
  padding-block: var(--space-9) var(--space-8);
}

@media (min-width: 1024px) {
  .act--belief {
    padding-block: var(--space-10) var(--space-9);
  }
}

.act--tinted {
  background: var(--color-accent-wash);
}

.act--dim {
  background: var(--color-paper-dim);
}

.act--dark {
  background: var(--color-ink);
  color: var(--color-paper);
}

.act--dark h1,
.act--dark h2,
.act--dark h3,
.act--dark h4 {
  color: var(--color-paper);
}

.act--dark p,
.act--dark .eyebrow {
  color: var(--color-gray);
}

.act--dark .stat {
  background: var(--color-paper-dim);
}

.act--dark .stat__value {
  color: var(--color-accent-strong);
}

.act--dark .stat__label {
  color: var(--color-ink-60);
}

.act--dark .artifact {
  background: var(--color-paper-dim);
  border-color: var(--color-line);
}

.act--dark .artifact__caption {
  color: var(--color-ink-60);
}

.act--dark .artifact code {
  color: var(--color-ink-80);
}

.act__header {
  max-width: var(--container-prose);
  margin-bottom: var(--space-7);
}

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

.act__lede {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink-80);
}

.act--dark .act__lede {
  color: var(--color-gray);
}

/* ---- Belief statement ---- */
.belief {
  max-width: var(--container-wide);
}

.belief__title {
  font-size: var(--text-h1);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

@media (min-width: 1024px) {
  .belief__title {
    font-size: var(--text-display);
  }
}

.belief__standfirst {
  max-width: var(--container-prose);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink-80);
  margin-bottom: var(--space-6);
}

/* ---- Asymmetric proof grid ---- */
.proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .proof-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-7);
  }

  .proof-grid--reverse {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .proof-grid--reverse .proof-grid__prose {
    order: 2;
  }

  .proof-grid--reverse .proof-grid__artifact {
    order: 1;
  }
}

.proof-grid__prose {
  max-width: var(--container-prose);
}

.proof-grid__prose p + p {
  margin-top: var(--space-4);
}

.proof-grid__title {
  margin-bottom: var(--space-4);
}

/* ---- Stat row (confident number callouts) ---- */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-5);
}

/* ---- Editorial list ---- */
.editorial-list {
  display: flex;
  flex-direction: column;
}

.editorial-list__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-6);
  padding-inline-start: var(--space-4);
  border-bottom: var(--border-hairline);
  border-left: 2px solid transparent;
  transition: background-color var(--motion-fast) var(--easing-standard),
    border-color var(--motion-fast) var(--easing-standard);
}

.editorial-list__row:first-child {
  border-top: var(--border-hairline);
}

.editorial-list__row:hover,
.editorial-list__row:focus-within {
  background: var(--color-accent-wash);
  border-left-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .editorial-list__row {
    transition: none;
  }
}

@media (min-width: 768px) {
  .editorial-list__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-8);
    align-items: baseline;
  }
}

.editorial-list__label {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.editorial-list__detail {
  font-size: var(--text-body);
  color: var(--color-ink-80);
}

.editorial-list__detail a {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.editorial-list__detail a:hover {
  color: var(--color-ink);
}

/* ---- Quiet contact close ---- */
.contact-close {
  max-width: var(--container-prose);
  text-align: left;
}

.contact-close__title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-4);
}

.contact-close__text {
  font-size: var(--text-lead);
  color: var(--color-ink-80);
  margin-bottom: var(--space-6);
}

/* ---- Utility clusters ---- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.visually-hidden-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}