/* DIVINE — Journal (oeffentliche Leseansicht).
   Setzt /brand.css voraus. Bewusst kompakt: kleine Grade, enge Abstaende,
   schmales Satzband. Mobil zuerst. */

:root { --bl-accent:#4a3a52; --bl-mute:#6b6b66; --bl-measure:33rem; }

body.bl {
  background: var(--bg-card);
  min-height: 100dvh;
  display: flex; flex-direction: column;
}

/* ---------- Uebersicht ---------- */
.bl-wrap {
  flex: 1 1 auto; width: 100%; max-width: 1120px;
  margin: 0 auto; padding: 34px 20px 56px;
}
.bl-head { margin-bottom: 34px; }
.bl-head__eyebrow {
  font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--bl-mute); margin: 0 0 10px;
}
.bl-head__title {
  font-family: "Stigsa Display", Georgia, serif; font-weight: 500;
  font-size: 27px; line-height: 1.15; margin: 0; color: var(--ink);
}
@media (min-width: 700px) { .bl-head__title { font-size: 32px; } }

.bl-grid { display: grid; grid-template-columns: 1fr; gap: 30px 24px; }
@media (min-width: 620px)  { .bl-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .bl-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.bl-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.bl-card__media {
  display: block; width: 100%; aspect-ratio: 16/10; overflow: hidden;
  background: var(--bg-card-2); margin-bottom: 12px;
}
.bl-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.bl-card:hover .bl-card__media img { transform: scale(1.03); }
.bl-card__media--empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair-soft);
}
.bl-card__initial {
  font-family: "Stigsa Display", Georgia, serif; font-weight: 400;
  font-size: 46px; line-height: 1; color: var(--hair-soft); user-select: none;
}
.bl-card__meta {
  display: flex; align-items: center;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bl-mute); margin-bottom: 7px;
}
.bl-card__sep {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--bl-mute); margin: 0 8px;
}
.bl-card__title {
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: "Stigsa Display", Georgia, serif; font-weight: 500;
  font-size: 18px; line-height: 1.28; margin: 0 0 6px;
  text-wrap: balance; transition: color .18s ease;
}
.bl-card:hover .bl-card__title { color: var(--bl-accent); }
.bl-card__excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; line-height: 1.65; color: var(--bl-mute); margin: 0;
}

/* ---------- Leerzustand ---------- */
.bl-empty { text-align: center; padding: 60px 16px; }
.bl-empty svg { width: 30px; height: 30px; display: block; margin: 0 auto 20px; }
.bl-empty h2 {
  font-family: "Stigsa Display", Georgia, serif; font-weight: 400;
  font-size: 22px; margin: 0 0 10px; color: var(--bl-accent);
}
.bl-empty p { font-size: 13px; color: var(--bl-mute); margin: 0; }

/* ---------- Artikel (Editorial, nach der Smith-Referenz) ----------
   Zentrierter, ruhiger Kopf: Datum klein oben, grosser Serif-Titel, Autorzeile.
   Der Fliesstext darunter ist linksbuendig und beginnt mit einem Initial. */
.bl-article {
  flex: 1 1 auto; width: 100%; max-width: var(--bl-measure);
  margin: 0 auto; padding: 48px 22px 60px;
}
.bl-article__head { text-align: center; margin-bottom: 40px; }
.bl-article__eyebrow {
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--bl-mute); margin: 0 0 22px;
}
.bl-article__title {
  overflow-wrap: anywhere;
  font-family: "Stigsa Display", Georgia, serif; font-weight: 400;
  font-size: 32px; line-height: 1.12; margin: 0 auto 26px;
  color: var(--ink); text-wrap: balance; max-width: 15ch;
}
@media (min-width: 700px) { .bl-article__title { font-size: 46px; } }
.bl-article__author {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
}
.bl-article__by {
  font-family: "Stigsa Display", Georgia, serif; font-weight: 500;
  font-size: 14px; letter-spacing: .04em; color: var(--bl-accent);
}
.bl-article__role {
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--bl-mute);
}

.bl-prose { font-size: 15.5px; line-height: 1.82; color: var(--ink-soft); overflow-wrap: anywhere; }
.bl-prose > p { margin: 0 0 1.15em; }
.bl-prose > p:last-child { margin-bottom: 0; }
.bl-prose strong { font-weight: 400; color: var(--ink); }
.bl-prose em { font-style: italic; }
.bl-prose a { color: var(--bl-accent); text-decoration: underline; text-underline-offset: 2px; }
.bl-prose h2 {
  font-family: "Stigsa Display", Georgia, serif; font-weight: 500;
  font-size: 22px; line-height: 1.28; margin: 1.9em 0 .5em; color: var(--ink);
}
/* Initial am ersten Absatz — das eine editoriale Signal aus der Referenz. */
.bl-prose--article > p:first-of-type::first-letter {
  float: left; font-family: "Stigsa Display", Georgia, serif; font-weight: 500;
  font-size: 3.4em; line-height: .82; padding: 4px 10px 0 0; color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) { .bl-prose--article { --x: 0; } }
.bl-prose h3 {
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 200; margin: 2em 0 .7em; color: var(--bl-mute);
}
.bl-prose ul, .bl-prose ol { margin: 0 0 1.15em; padding-left: 1.2em; }
.bl-prose li { margin-bottom: .4em; }
.bl-prose blockquote {
  margin: 1.6em 0; padding: 1px 0 1px 16px; border-left: 2px solid var(--bl-accent);
  font-family: "Stigsa Display", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 19px; line-height: 1.5; color: var(--ink);
}
.bl-prose blockquote cite {
  display: block; margin-top: 8px; font-family: inherit; font-style: normal;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--bl-mute);
}
.bl-prose figure { margin: 1.7em 0; }
/* siehe admin.css: ohne height:auto quetschen die HTML-Attribute das Bild */
.bl-prose figure img { max-width: 100%; width: auto; height: auto; max-height: 82vh; display: block; margin: 0 auto; background: var(--bg-card-2); }
.bl-prose figcaption {
  font-size: 10.5px; letter-spacing: .04em; color: var(--bl-mute);
  margin-top: 8px; line-height: 1.6;
}

.bl-article__foot {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bl-back {
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
}
.bl-back:hover { color: var(--bl-accent); }

@media (prefers-reduced-motion: reduce) {
  .bl-card__media img, .bl-card:hover .bl-card__media img { transition: none; transform: none; }
}