/* Blog posts, German and English: one reading layout (loaded by every post, after ../site.css and ../pages.css).
   A calm column of about 68 characters: the back link, the date written out, the title, their photo, then their text
   with their photos inside it, then the same link back and the site's close (.shut, from pages.css). Posts keep their
   words in full: only the look is ours. Media rules at the END. */

.post { --measure: 44rem; /* about 68 characters of the body text; a rem, so every element, large or small type, shares one edge */ padding-bottom: clamp(48px, 6vw, 80px); }
.post__col { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }

/* the head: back link, then date and title beside their small photo */
.post__head { padding-block: clamp(28px, 4vw, 52px) clamp(8px, 2vw, 20px); }
.post__head-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'back back' 'titles thumb'; gap: clamp(18px, 3vw, 30px) clamp(20px, 4vw, 40px); align-items: end; }
.back { grid-area: back; display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--accent-ink); font-weight: 500; text-decoration: none; }
.back .mark { width: 18px; height: 18px; transition: translate 220ms var(--ease); }
.back:hover .mark, .back:focus-visible .mark { translate: -4px 0; }
.post__titles { grid-area: titles; display: grid; gap: 14px; justify-items: start; min-width: 0; }
.post__date { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.post__title { font-size: clamp(2rem, 1.45rem + 2.4vw, 3.1rem); overflow-wrap: break-word; text-wrap: balance; }
.post__thumb { grid-area: thumb; width: clamp(130px, 22vw, 184px); aspect-ratio: 1; object-fit: cover; border-radius: var(--r); }

/* the text */
.post__body { margin-top: clamp(20px, 3vw, 36px); font-size: clamp(1.0625rem, 1.01rem + 0.25vw, 1.15rem); line-height: 1.78; color: var(--ink); }
.post__body > * { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }
.post__body > * + * { margin-top: 1.1em; }
.post__body p { text-wrap: pretty; }
.post__body strong { font-weight: 500; }
.post__body em { font-style: italic; }
.post__body a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post__body a:hover { text-decoration-thickness: 2px; }
.post__body .deck { margin-top: 0; font: 300 clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem)/1.4 var(--head); color: var(--head-ink); letter-spacing: -0.01em; text-wrap: balance; }
.post__body h2 { margin-top: 2.1em; font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.85rem); text-wrap: balance; }
.post__body h2 + * { margin-top: 0.7em; }
.post__body ul { padding-left: 1.25em; }
.post__body li { padding-left: 0.2em; text-wrap: pretty; }
.post__body li + li { margin-top: 0.55em; }
.post__body li::marker { color: var(--olive); }
.post__body blockquote { padding-left: clamp(16px, 2.4vw, 26px); border-left: 2px solid var(--sand); font: 300 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.5 var(--head); color: var(--head-ink); text-wrap: pretty; }
.post__body > blockquote { margin-top: 2em; }

/* their photos inside the text: one photo as wide as the text; a tall one narrower; several in one slider */
.post__fig { margin-block: 2em; }
.post__body > .post__fig { width: min(100% - 2 * var(--gutter), var(--measure)); }
.post__fig img { width: 100%; height: auto; border-radius: var(--r); }
.post__fig--tall { width: min(100% - 2 * var(--gutter), 24rem) !important; }
.post__fig .slider { border-radius: var(--r); }
.post__fig--small { width: min(100% - 2 * var(--gutter), 27rem) !important; } /* a slider of small photos stays at the size they hold */

/* the way back */
.post__end { margin-top: clamp(36px, 5vw, 56px) !important; }

/* ═══════════ Media rules ═══════════ */
@media (max-width: 600px) {
  .post__head-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'back' 'titles' 'thumb'; }
  .post__thumb { width: 132px; }
}