/* Bloggens prosa. Laddas bara på /blogg-sidorna, via Dc:s head-slot.
 *
 * Sajten hade ingen löpande text före bloggen — allt annat är inline-stilar
 * på korta block. Det här arket ger Markdown-utdatan (p, h2, hr, strong, em,
 * listor) samma röst som resten: Archivo i brödtext, Familjen Grotesk i
 * mellanrubriker, sajtens linjefärg i avdelarna.
 *
 * Kolumnen är 900px bred men texten håller sig till 680px; figurerna
 * (.fig, renderade av komponenterna i src/components/dc/blogg/) får hela
 * bredden och andas därmed mer än texten runt dem. */

.artikel {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.68;
  color: #2A2823;
}
.artikel > :not(.fig) {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.artikel p { margin: 0 0 1.45em; }
.artikel h2 {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: #0F0F0E;
  margin: 64px auto 20px;
}
.artikel h3 {
  font-family: Archivo, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  color: #0F0F0E;
  margin: 40px auto 12px;
}
.artikel hr {
  border: 0;
  height: 1px;
  background: #F3F2F0;
  margin: 56px auto;
}
.artikel h2 + hr, .artikel hr + h2 { margin-top: 0; }
/* Artikeln inleds på sin första mellanrubrik sedan ingången ströks: hjälten
   ovanför bär redan luften. */
.artikel > h2:first-child { margin-top: 0; }
.artikel strong { font-weight: 600; color: #0F0F0E; }
.artikel em { font-style: italic; }
.artikel a { border-bottom: 1px solid #C9C5BE; padding-bottom: 1px; }
.artikel a:hover { border-color: #C0402C; }
.artikel ul, .artikel ol { padding-left: 1.3em; margin: 0 0 1.45em; }
.artikel li { margin: 0 0 .5em; }
.artikel li::marker { color: #B4AFA7; }
.artikel blockquote {
  margin: 0 auto 1.45em;
  padding-left: 22px;
  border-left: 2px solid #E9E7E3;
  color: #56534C;
}

/* Figurerna. Varje komponent renderar <figure class="fig">; det här är
   det gemensamma skalet — ram, luft, bildtext. Innehållet stilar de själva. */
.artikel .fig {
  margin: 48px 0 52px;
  padding: 0;
}
.fig-kort {
  border: 1px solid #E9E7E3;
  border-radius: 24px;
  padding: clamp(22px, 3.4vw, 40px);
  background: #FDFCFA;
}
.fig figcaption {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 16px 6px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6E6A62;
}
.fig-n {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B4AFA7;
  position: relative;
  top: -1px;
}
.fig-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B4AFA7;
}

@media (max-width: 900px) {
  .artikel { font-size: 17px; }
  .artikel h2 { font-size: 27px; margin-top: 52px; }
  .artikel hr { margin: 44px auto; }
  .artikel .fig { margin: 36px 0 40px; }
  .fig-kort { border-radius: 18px; }
}