/* ==========================================================================
   03 · LAYOUT
   Containers, section rhythm, grids, breadcrumbs.
   ========================================================================== */

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

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

.container-fluid { width: 100%; }

.site-main { display: block; }


/* --- Sections ------------------------------------------------------------- */

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

/* Paper is the body ground, so this looks redundant — but it must be explicit.
   Choosing "Papir" in the admin has to be an instruction, not a no-op that
   happens to look right because nothing overrode it. */
.section--bg-paper { background: var(--paper); }

.section--bg-linen { background: var(--linen); }

.section--bg-ink {
  background: var(--ink);
  color: var(--on-dark);
}

.section--bg-ink .section__intro,
.section--bg-ink .prose { color: var(--on-dark-2); }

.section--bg-ink .eyebrow { color: var(--gilt); }

/* Two sections on the same ground read as one band, so drop the seam. */
.section--bg-linen + .section--bg-linen,
.section--bg-ink + .section--bg-ink { padding-top: 0; }


/* --- Grid ----------------------------------------------------------------- */

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

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

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

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


/* --- Breadcrumbs ---------------------------------------------------------- */

.breadcrumbs { margin-bottom: var(--s-5); }

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  color: var(--ink-3);
  font-size: var(--fs-200);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--rule);
}

.breadcrumbs a:hover { color: var(--mulberry); }


/* --- Announcement bar ----------------------------------------------------- */

.announcement {
  padding: var(--s-2) 0;
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--fs-200);
  letter-spacing: 0.04em;
  text-align: center;
}