@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 3.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   3. LAYOUT
   ============================================================ */

.sh-container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.sh-container--sm {
  max-width: var(--container-sm);
}
.sh-container--md {
  max-width: var(--container-md);
}
.sh-container--xl {
  max-width: var(--container-xl);
}

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

.sh-section--tight {
  padding-block: var(--space-xl);
}

/* -- Bands ---------------------------------------------------
   Cream bands framing near-white reading areas — the core of
   the visual direction. Each band is separated from the page
   by a thin warm rule rather than a shadow.                    */
.band {
  background-color: var(--colour-bg-band);
  border-block: var(--border-cream);
}

.band--deep {
  background-color: var(--colour-bg-band-deep);
}

.band--wash {
  background-color: var(--colour-bg-wash);
  border-block-color: var(--colour-rule-accent);
}

.band--inverse {
  background-color: var(--colour-bg-inverse);
  border-block: 0;
  color: var(--colour-text-inverse);
}

.band--inverse h1,
.band--inverse h2,
.band--inverse h3 {
  color: var(--colour-text-inverse);
}

/* The site's burgundy focus ring is invisible on burgundy. */
.band--inverse :focus-visible {
  outline: var(--focus-ring-inverse);
}

.band--paper {
  background-color: var(--colour-bg);
}

/* -- Section head -------------------------------------------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-hairline);
}

.section-head__title {
  font-size: var(--text-fluid-h3);
  margin: 0;
}

.section-head__link {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

.section-head__link::after {
  content: ' \2192';
}

/* -- Grids --------------------------------------------------- */
.sh-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .sh-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sh-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62em) {
  .sh-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Two-column page shell: main column plus an aside rail. */
.layout-with-rail {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 62em) {
  .layout-with-rail {
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: var(--space-2xl);
  }
}