/* Werkstattluft, emilynbrodsky.net
   Klassisches Blog-Gerüst: Kopf mit Marke und Menü, Beitragsliste mit
   Vorschaubildern, Randspalte rechts auf Übersichten, Beiträge einspaltig.
   Keine Webfonts, kein JavaScript, keine externen Requests. */

:root {
  --blatt: #fbfaf8;
  --karte: #ffffff;
  --tinte: #22201d;
  --still: #6b655d;
  --siena: #8c4a2f;
  --siena-tief: #6f3a24;
  --kante: #e7e2d9;
  --kopf-schrift: "Lucida Grande", "Segoe UI", Tahoma, Verdana, sans-serif;
  --lese-schrift: "Hoefler Text", Baskerville, Georgia, "Times New Roman", serif;
  --satz: 64ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blatt);
  color: var(--tinte);
  font-family: var(--lese-schrift);
  font-size: 18px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  color: var(--tinte);
  font-family: var(--kopf-schrift);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--siena-tief); }
a:hover { color: var(--tinte); }

:focus-visible { outline: 3px solid var(--siena); outline-offset: 2px; }

.bahn {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

.bahn-schmal { max-width: 820px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: static;
  display: inline-block;
  padding: 10px 16px;
  background: var(--tinte);
  color: var(--blatt);
}

/* ------------------------------------------------------------ Seitenkopf */

.site-head {
  background: var(--karte);
  border-bottom: 1px solid var(--kante);
}

.site-head .bahn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 26px 0;
}

.site-brand { display: block; text-decoration: none; max-width: 100%; }
.brand-mark { display: block; width: 100%; height: auto; max-width: 370px; }

.site-nav { width: 100%; margin-top: 20px; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-block;
  padding-block: 13px;
  color: var(--tinte);
  font-family: var(--kopf-schrift);
  font-size: 14px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.nav-list a:hover,
.nav-list a.is-current {
  color: var(--siena-tief);
  border-bottom-color: var(--siena);
}

/* ------------------------------------------------------------ Startseite */

.site-main { padding-block: 34px 56px; }

.lead-post {
  background: var(--karte);
  border: 1px solid var(--kante);
  padding: 0 0 26px;
  margin-bottom: 42px;
}

.lead-post img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.lead-post > :not(a) { padding-inline: 30px; }
.lead-post h1 { font-size: 32px; margin-block: 8px 0; max-width: 22ch; }

.post-cat {
  margin: 24px 0 0;
  color: var(--siena);
  font-family: var(--kopf-schrift);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.byline-row {
  margin: 9px 0 0;
  color: var(--still);
  font-family: var(--kopf-schrift);
  font-size: 13px;
}

.post-excerpt { margin: 14px 0 0; color: var(--still); max-width: var(--satz); }

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 46px;
  align-items: start;
}

.content-col, .aside-col { min-width: 0; }

.list-head {
  font-size: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--tinte);
}

.rubrik-intro { margin: -14px 0 28px; color: var(--still); max-width: var(--satz); }

.post-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0 24px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--kante);
}

.post-card:last-child { border-bottom: 0; }

.post-thumb { grid-row: 1 / span 5; }
.post-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.post-card .post-cat { margin-top: 0; }
.post-title { font-size: 21px; margin-block: 7px 0; }
.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { text-decoration: underline; }
.post-card .post-excerpt { font-size: 16px; margin-top: 10px; }

.read-on { margin: 12px 0 0; }
.read-on a {
  font-family: var(--kopf-schrift);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  border-bottom: 2px solid var(--kante);
  padding-bottom: 2px;
}
.read-on a:hover { border-bottom-color: var(--siena); }

/* ----------------------------------------------------------- Randspalte */

.widget {
  background: var(--karte);
  border: 1px solid var(--kante);
  padding: 20px 22px 22px;
  margin-bottom: 26px;
}

.widget-title {
  font-size: 12.5px;
  font-family: var(--kopf-schrift);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--still);
  margin: 0 0 12px;
}

.widget p { margin: 0; font-size: 15.5px; }
.widget ul { margin: 0; padding: 0; list-style: none; font-size: 15.5px; }
.widget li { margin-block: 9px; }
.widget a { text-decoration: none; border-bottom: 1px solid var(--kante); }
.widget a:hover { border-bottom-color: var(--siena); }

/* -------------------------------------------------------------- Beitrag */

.trail {
  margin: 0 0 22px;
  color: var(--still);
  font-family: var(--kopf-schrift);
  font-size: 13px;
}
.trail a { text-decoration: none; border-bottom: 1px solid var(--kante); }

.single-head h1 { font-size: 34px; margin-block: 8px 0; }

.single-figure { margin: 26px 0 0; }
.single-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.single-figure figcaption {
  margin-top: 9px;
  color: var(--still);
  font-family: var(--kopf-schrift);
  font-size: 13px;
}

.jump-box {
  margin: 30px 0 0;
  padding: 18px 22px 20px;
  background: var(--karte);
  border: 1px solid var(--kante);
  border-left: 4px solid var(--siena);
}

.jump-list { margin: 0; padding-left: 20px; font-size: 16px; }
.jump-list li { margin-block: 6px; }
.jump-list a { text-decoration: none; border-bottom: 1px solid var(--kante); }
.jump-list a:hover { border-bottom-color: var(--siena); }

.single-text { margin-top: 30px; }
.single-text h2 { font-size: 24px; margin-block: 42px 12px; }
.single-text h3 { font-size: 19px; margin-block: 30px 10px; }
.single-text p { margin-block: 0 19px; }
.single-text a { text-decoration: underline; text-underline-offset: 2px; }
.single-text ul, .single-text ol { margin-block: 0 20px; padding-left: 26px; }
.single-text li { margin-block: 8px; }

.rollbox { overflow-x: auto; margin-block: 0 24px; }
.single-text table { border-collapse: collapse; min-width: 100%; font-size: 16px; }
.single-text th, .single-text td {
  border-bottom: 1px solid var(--kante);
  padding: 10px 16px 10px 0;
  text-align: left;
  vertical-align: top;
}
.single-text th {
  font-family: var(--kopf-schrift);
  font-size: 14px;
  border-bottom-color: var(--tinte);
  white-space: nowrap;
}

.more-posts { margin-top: 56px; padding-top: 10px; }
.card-row .post-card { grid-template-columns: 1fr; }
.card-row .post-thumb { grid-row: auto; }
.card-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.card-row .post-card { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.card-row .post-thumb img { aspect-ratio: 3 / 2; }
.card-row .post-title { font-size: 18px; }

/* ----------------------------------------------------------- Seitenfuss */

.site-foot {
  background: var(--tinte);
  color: #cfc9c0;
  padding-block: 44px 26px;
}

.foot-cols { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap: 36px; }
.foot-cols section { min-width: 0; }

.foot-cols h2 {
  font-size: 12.5px;
  font-family: var(--kopf-schrift);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #9a938a;
  margin-bottom: 12px;
}

.foot-cols p { margin: 0; font-size: 15px; }
.foot-cols ul { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.foot-cols li { margin-block: 8px; }

.site-foot a { color: #ece7df; text-decoration: none; border-bottom: 1px solid #45403a; }
.site-foot a:hover { border-bottom-color: #9a938a; }

.foot-note {
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 1px solid #3a3530;
  font-family: var(--kopf-schrift);
  font-size: 12.5px;
  color: #9a938a;
}

/* --------------------------------------------------------- Breakpoints */

@media (max-width: 900px) {
  .layout-split { grid-template-columns: 1fr; gap: 40px; }
  .card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-post h1 { font-size: 28px; }
  .single-head h1 { font-size: 29px; }
}

@media (max-width: 680px) {
  body { font-size: 17px; }
  .post-card { grid-template-columns: 1fr; }
  .post-thumb { grid-row: auto; margin-bottom: 14px; }
  .post-thumb img { aspect-ratio: 16 / 9; }
  .lead-post img { aspect-ratio: 3 / 2; }
  .lead-post h1, .single-head h1 { font-size: 25px; max-width: none; }
  .single-text h2 { font-size: 21px; }
  .foot-cols { grid-template-columns: 1fr; gap: 28px; }
  .card-row { grid-template-columns: 1fr; }
  .nav-list { gap: 0 22px; }
}

@media (max-width: 420px) {
  .bahn { padding-inline: 16px; }
  .lead-post > :not(a) { padding-inline: 18px; }
  .widget { padding: 16px 18px 18px; }
  .jump-box { padding: 15px 18px 16px; }
}

@media (hover: none) {
  .nav-list a { padding-block: 15px; }
  .widget li, .foot-cols li { margin-block: 12px; }
}

@media print {
  .site-nav, .jump-box, .more-posts, .aside-col { display: none; }
}