/* ==========================================================================
   layout.css — shells, sections and the grid the page is built on.
   All vertical rhythm lives here so component files never fight over it.
   ========================================================================== */

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

.shell--wide { max-width: 1560px; }
.shell--narrow { max-width: 940px; }

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg);
}

.section--flush-top { padding-block-start: 0; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Section headers share one structure across the page. */
.section-head {
  display: grid;
  gap: var(--s-5);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--s-8);
  }
}

.grid { display: grid; gap: var(--s-5); }

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

/* The hairline that separates daylight from night. */
.section + .section { border-top: 1px solid var(--line); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin-block: var(--s-6);
}