/* Miraki Mind · Beiträge (Video, Text und Bild, Skill). Alle Beiträge haben denselben Aufbau:
   Kopf (Art, Titel, Vorspann, Autor), grosses Medium, Text in einer Lesespalte, beim Skill zusätzlich der Skill
   zum Kopieren und die Schritte. Graue Felder (.slot) sind Platzhalter. */
.post{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
/* Kopf: Art und Titel oben, darunter links Vorspann und Autor, rechts das Medium (Film oder Bild) */
.post-h{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto 1fr;row-gap:20px;padding-block:clamp(72px,9vw,140px) 0}
.post-h .lbl{grid-column:1/span 4;padding-top:14px;align-self:start}
.post-h h1{grid-column:5/span 8;font-size:clamp(40px,5.2vw,84px);line-height:1;letter-spacing:-.04em}
.post-h .lead{grid-column:1/span 4;grid-row:2;margin-top:clamp(16px,2vw,32px);font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--grey);max-width:30ch}
.by{grid-column:1/span 4;grid-row:3;align-self:start;display:flex;align-items:center;gap:14px;margin-top:8px}
.by .av{width:48px;height:48px;border-radius:50%;padding:0;flex:none;background:var(--surface) center 20%/cover no-repeat}
.by b{display:block;font-weight:400;font-size:16px}
.by span span{display:block;font-size:14px;color:var(--grey)}
.slot{display:grid;place-items:center;background:var(--surface);border-radius:0 0 41px 0;color:var(--grey);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:12px}
.pic{background:var(--surface) center/cover no-repeat;border-radius:0 0 41px 0}
.hero{grid-column:5/span 8;grid-row:2/span 2;margin-top:clamp(16px,2vw,32px);aspect-ratio:16/9}
.hero.img{aspect-ratio:3/2}
/* Video-Beitrag: Standbild mit Kapsel, ein Klick öffnet den Film im Miraki-Player (mk-player.js, Vimeo oder lokale Kopie) */
.film{position:relative;display:block;text-decoration:none;color:var(--black)}
.play{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);display:inline-flex;align-items:center;gap:16px;background:var(--white);border-radius:999px;padding:5px 5px 5px 22px;font-size:16px;line-height:1.15}
.play i{width:44px;height:44px;border-radius:50%;background:var(--black);display:grid;place-items:center}
.play svg{width:12px;height:12px;margin-left:2px}
.play path{fill:var(--white)}
.play:hover i{background:#333}
/* Text: eine Lesespalte (Spalte 5 bis 11). Bilder, Filme und Zitate dürfen breiter werden, ein «wide»-Bild über die ganze Breite. */
.body{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:22px;padding-top:clamp(48px,6vw,88px)}
.body > *{grid-column:5/span 7;margin:0}
.body > .fig,.body > .gallery,.body > .film-b,.body > blockquote,.body > .skill{grid-column:5/span 8}
.body > .wide{grid-column:1/-1}
.body p,.body li{font-size:19px;line-height:1.6;max-width:36em}
.body h2{font-size:clamp(24px,2.2vw,30px);line-height:1.2;letter-spacing:-.02em;margin-top:18px}
.body h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;margin-top:8px}
.body a{color:var(--black);text-decoration:none;border-bottom:1px solid var(--line)}
.body a:hover{border-color:var(--black)}
.body ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.body ul li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--black);margin-right:12px;vertical-align:.22em}
.body code{font:.9em ui-monospace,"SF Mono",Menlo,Consolas,monospace;background:var(--surface);padding:1px 5px;border-radius:4px}
.body pre.code{padding:24px 26px;background:var(--surface);border-radius:0 0 24px 0;overflow-x:auto;font:14px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.body pre code{background:none;padding:0}
.body ol{margin:0;padding-left:1.2em;display:grid;gap:10px}
.body figure{margin:20px 0}
.body figure .slot,.body figure .pic{aspect-ratio:3/2}
/* Bilder im eigenen Seitenverhältnis (--ar aus build-mind.py), Hochformat höchstens 4:5, damit nichts Wichtiges abgeschnitten wird */
.body .fig .pic{aspect-ratio:max(var(--ar,1.5),.8)}
/* Bild über die ganze Breite, im Kinoformat */
.body .wide .pic{aspect-ratio:2.39/1}
.body .wide figcaption{max-width:60ch}
/* Bildreihe: zwei oder drei Bilder nebeneinander (zwei quer, drei hoch) */
.body .gallery{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:24px;align-items:start}
.body .gallery .pic{aspect-ratio:var(--ar,3/2)}
.body .gallery figcaption{grid-column:1/-1;margin-top:-10px}
/* Film im Text: Standbild 16:9 mit der Kapsel, ein Klick öffnet den Miraki-Player */
.body .film-b{aspect-ratio:16/9;margin:20px 0}
/* Zitat: gross, mit Blur-Reveal wie die grossen Zeilen */
.body blockquote{margin:28px 0;padding:0}
.body blockquote p{font-size:clamp(28px,3.2vw,48px);line-height:1.12;letter-spacing:-.03em;max-width:22ch}
.body blockquote cite{display:block;margin-top:16px;font-style:normal;font-size:14px;color:var(--grey)}
.body figcaption{margin-top:10px;font-size:14px;color:var(--grey)}
.skill{display:grid;gap:12px;margin:12px 0}
.skill-h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.skill-h .w{font-size:14.5px;color:var(--grey)}
.skill pre{margin:0;padding:24px 26px;background:var(--surface);border-radius:0 0 24px 0;overflow-x:auto;font:14px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;white-space:pre-wrap}
.copy{font:inherit;font-size:14px;border:0;border-radius:999px;padding:8px 16px;background:var(--black);color:var(--white);cursor:pointer}
.copy:hover{background:#333}
.post-h .lbl a{color:inherit;text-decoration:none}
.post-h .lbl a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* Unter dem Beitrag: neuerer und älterer Beitrag */
.pager{grid-column:5/span 7;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.pager a{display:grid;gap:6px;align-content:start;text-decoration:none;color:var(--black)}
.pager .ol{justify-items:end;text-align:right}
.pager small{font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.pager b{font-weight:400;font-size:clamp(19px,1.6vw,22px);line-height:1.25;letter-spacing:-.01em;max-width:28ch}
.pager a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.post-f{grid-column:5/span 7;display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-top:clamp(64px,8vw,110px);padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:900px){
  .post-h .lbl,.post-h h1,.post-h .lead,.by,.hero,.body,.post-f,.pager{grid-column:1/-1;grid-row:auto}
  .body > *,.body > .fig,.body > .gallery,.body > .film-b,.body > blockquote,.body > .skill,.body > .wide{grid-column:1/-1}
  .body .wide .pic{aspect-ratio:3/2}
  .body .gallery{gap:12px}
  .body .gallery[style*="--n:3"]{grid-template-columns:1fr 1fr}
  .body .gallery[style*="--n:3"] .pic:first-child{grid-column:1/-1}
  .post-h .lead{max-width:none;margin-top:0}
  .hero{margin-top:12px}
  .post-h{row-gap:14px}
  .slot{border-radius:0 0 24px 0;font-size:11px}
  .pic{border-radius:0 0 24px 0}
  .body p,.body li{font-size:17px}
}