/* ==========================================================================
   MBH — layout.css
   Container, section rhythm, grids, and the brand slash motif
   ========================================================================== */

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

.container--narrow { max-width: 980px; }

/* --------------------------------------------------------- sections */
.section {
  position: relative;
  padding-block: var(--section);
}

.section--tight { padding-block: clamp(56px, 6vw, 90px); }

.section--bone { background: var(--bone); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--green-900); }

.section-head { margin-bottom: clamp(40px, 4.5vw, 64px); }

.section-head--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
  }
  .section-head--split .lead { padding-bottom: 6px; }
}

/* --------------------------------------------------------- grids */
.grid { display: grid; gap: 0; }

.grid-2 { display: grid; gap: 24px; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 24px; grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: 20px; grid-template-columns: 1fr; }

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

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

/* --------------------------------------------------------- slash motif
   The double slash from the logo, used as a large architectural marker on
   dark bands. Purely decorative — hidden from assistive tech.            */
.slashes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.slashes span {
  position: absolute;
  top: -20%;
  height: 140%;
  width: clamp(48px, 7vw, 104px);
  transform: skewX(-19deg);
  will-change: transform;
}

.slashes span:nth-child(1) {
  right: clamp(88px, 11vw, 200px);
  background: rgba(89, 141, 41, 0.30);
}

.slashes span:nth-child(2) {
  right: clamp(8px, 3vw, 60px);
  background: rgba(89, 141, 41, 0.16);
}

/* Light-surface variant */
.slashes--light span:nth-child(1) { background: rgba(89, 141, 41, 0.10); }
.slashes--light span:nth-child(2) { background: rgba(6, 39, 28, 0.05); }

.slashes + * { position: relative; z-index: 1; }

@media (max-width: 700px) {
  .slashes span:nth-child(1) { right: 40px; }
}