/* =========================================================================
   chrille.nu - Om Chrille
   Sidan ligger på sajtens mörka skal. Kapitlen bär universe-klasser, men
   BARA för accentfärgens skull. Bakgrund och brödtext sätts explicit här,
   annars skulle universe-vard göra kapitlet vitt mitt på det mörka skalet.
   ========================================================================= */

.c-om {
  background: var(--c-ink-800);
  color: var(--c-green-300);
  padding: var(--s-9) var(--s-7);
}
.c-om__inner {
  max-width: var(--wrap);
  margin-inline: auto;
}

.c-om__prompt {
  margin: 0 0 var(--s-6);
  font: 500 13px/1.6 var(--f-mono);
  color: var(--c-green-500);
}

.c-om__headline {
  margin: 0 0 var(--s-5);
  font-family: var(--f-serif);
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.05;
  font-weight: 700;
  color: var(--c-paper);
}
.c-om__line { display: block; }
.c-om__line:last-child { color: var(--c-green-100); }

.c-om__lead {
  margin: 0 0 var(--s-8);
  max-width: 60ch;
  font: var(--t-lead);
  color: var(--c-green-300);
}

/* --- Kapitlen ------------------------------------------------------------ */
.c-om__chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Fyra kapitel i 2x2. auto-fit gav 3+1 med ett tomt hål, och fyra i rad
     blir för smala spalter för texten. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}
@media (max-width: 760px) {
  .c-om__chapters { grid-template-columns: 1fr; }
}

.c-chapter {
  /* Explicit botten och text. Universe-klassen får bara styra accenten. */
  background: var(--c-ink-700);
  color: var(--c-green-300);
  padding: var(--s-5);
  border-radius: var(--radius);
  border-top: 3px solid var(--u-accent);
}

.c-chapter__label {
  margin: 0 0 var(--s-3);
  font: var(--t-label);
  letter-spacing: .12em;
  color: var(--u-accent);
}

.c-om .c-chapter__title {
  margin: 0 0 var(--s-3);
  font: 700 24px/1.2 var(--f-sans);
  color: var(--c-paper);
}

.c-chapter__text {
  margin: 0;
  font: 400 15px/1.6 var(--f-sans);
  color: var(--c-green-300);
}

/* Vårdens larmröda och utbildningens mörkgröna är valda för ljusa bottnar.
   På det mörka skalet behövs ljusare varianter för att klara AA. */
.c-om .c-chapter.universe-vard { --u-accent: #e8654f; }
.c-om .c-chapter.universe-utbildning { --u-accent: var(--c-green-500); }
.c-om .c-chapter.universe-foretagande { --u-accent: var(--c-green-700); }

/* --- Foten --------------------------------------------------------------- */
.c-om__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-soft);
}
.c-om__ask {
  margin: 0 0 var(--s-4);
  font: var(--t-lead);
  color: var(--c-paper);
}
.c-om__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}
.c-om .u-link { color: var(--c-green-100); font-size: 16px; }

@media (max-width: 900px) {
  .c-om { padding: var(--s-8) var(--s-5); }
}