/* Blog archive (hidden, noindex). Sits on top of ../styles.css; only blog-specific rules here. */
.blog-head{padding-top:calc(var(--top) + 96px);padding-bottom:clamp(56px,8vh,96px)}
.blog-head .lead{margin-top:26px}
.blog-head .kicker a{text-decoration:none}
.blog-head .kicker a:hover{color:var(--cream)}
.post-head .h2{max-width:900px}
.tags{margin-top:22px;font:500 11px/1.8 "Montserrat",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--small);max-width:760px}
.blog-list{padding-top:clamp(40px,6vh,72px)}
.posts{list-style:none;margin:0 auto;padding:0;max-width:860px}
.posts li+li{margin-top:12px}
.posts a{display:block;text-decoration:none;padding:30px 0 34px;border-radius:2px;transition:transform .3s}
.posts a:hover .h3,.posts a:focus-visible .h3{color:var(--amber)}
.posts time{display:block;font:600 11px/1.6 "Montserrat",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.posts .h3{transition:color .25s}
.posts p{margin-top:14px;max-width:none}
.posts .more{display:inline-block;margin-top:16px}
.post-body{padding-top:clamp(24px,4vh,48px);padding-bottom:clamp(64px,10vh,112px)}
.post{max-width:700px;margin:0 auto}
.post p{max-width:none;font-size:16.5px;line-height:1.9;color:rgba(243,234,217,.9)}
.post p+p{margin-top:1.15em}
.post a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.post em{font-style:italic}
.post strong{font-weight:600;color:var(--cream)}
.post figure{margin:44px 0}
.post p+figure,.post figure+p{margin-top:44px}
.post figure+figure{margin-top:20px}
.post img{display:block;max-width:min(100%,calc(82vh * var(--ar,1)));height:auto;margin:0 auto;border-radius:2px}
.post figcaption{margin-top:14px;text-align:center;font-size:13px;line-height:1.6;color:var(--small);font-style:italic}
.post-foot{padding-top:0;padding-bottom:clamp(48px,8vh,96px)}
.post-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:start;max-width:860px}
.post-nav a{text-decoration:none;font-family:"Bodoni Moda",serif;font-size:20px;line-height:1.3;color:var(--cream)}
.post-nav a span{display:block;font:600 11px/1.6 "Montserrat",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.post-nav .next{text-align:right}
.post-nav .all{font:600 11px/1.6 "Montserrat",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--small);padding-top:2px}
.post-nav a:hover{color:var(--amber)}
@media (max-width:760px){
 .blog-head{padding-top:calc(var(--top) + 48px)}
 .post p{font-size:16px;line-height:1.85}
 .post figure{margin:32px -8px}
 .post-nav{grid-template-columns:1fr 1fr}
 .post-nav .all{grid-column:1/-1;grid-row:1;text-align:center}
 .post-nav a{font-size:17px}
}

/* v19 (30 Oct): pictures sit inside the text, near the paragraph they belong to, instead of stacked at the end */
.post{max-width:740px}
.post::after{content:"";display:block;clear:both}
.post figure.fl-l,.post figure.fl-r{width:48%;margin-top:.45em;margin-bottom:22px;clear:both}
.post figure.fl-l.port,.post figure.fl-r.port{width:38%}
.post figure.fl-l{float:left;margin-left:0;margin-right:30px}
.post figure.fl-r{float:right;margin-right:0;margin-left:30px}
.post p+figure.fl-l,.post p+figure.fl-r,.post figure.fl-l+p,.post figure.fl-r+p{margin-top:.45em}
.post figure.fl-l+p,.post figure.fl-r+p{margin-top:1.15em}
.post figure.fl-l img,.post figure.fl-r img,.post .pair img{max-width:100%;width:100%}
.post figure.fl-l figcaption,.post figure.fl-r figcaption{margin-top:10px;font-size:12.5px;line-height:1.55;text-align:left}
.post figure.wide{clear:both}
.post .pair{clear:both;display:flex;gap:16px;align-items:flex-start;margin:40px 0}
.post .pair figure{flex:var(--fg,1) 1 0;min-width:0;margin:0}
.post .pair figcaption{font-size:12.5px;margin-top:10px}
.post p+.pair,.post .pair+p{margin-top:40px}
@media (max-width:760px){
 .post figure.fl-l,.post figure.fl-r,.post figure.fl-l.port,.post figure.fl-r.port{float:none;width:auto;margin:30px 0}
 .post figure.fl-l+p,.post figure.fl-r+p{margin-top:0}
 .post figure.fl-l figcaption,.post figure.fl-r figcaption{text-align:center}
 .post .pair{flex-direction:column;gap:30px;margin:30px 0}
 .post .pair figure{flex:none;width:100%}
 .post p+.pair,.post .pair+p{margin-top:30px}
}

.post figure.mid{clear:both;width:62%;margin:40px auto}
.post figure.mid.port{width:46%}
.post figure.mid img{max-width:100%;width:100%}
@media (max-width:760px){.post figure.mid,.post figure.mid.port{width:auto;margin:30px 0}}

/* v21 (7 Nov): text wraps around the photos inside posts on desktop. Photos alternate right/left at ~45% of the column
   (40% square, 36% portrait), panoramas (2:1 and wider) stay full width, photos with too little text left beside them
   sit in a row or centred; floats are cleared before headings, rows and at the end of the post. Phones (<640px): no float. */
.post figure.flt{clear:both;margin:.4em 0 22px}
.post figure.flt.land{width:45%}
.post figure.flt.sq{width:40%}
.post figure.flt.port{width:36%}
.post figure.flt-r{float:right;margin-left:32px}
.post figure.flt-l{float:left;margin-right:32px}
.post p+figure.flt{margin-top:.4em}
.post figure.flt+p{margin-top:1.15em}
.post figure.flt img{max-width:100%;width:100%}
.post figure.flt figcaption{margin-top:10px;font-size:12.5px;line-height:1.55;text-align:left}
.post h2,.post h3,.post h4,.post hr,.post blockquote,.post ul,.post ol{clear:both}
@media (max-width:639.98px){
 .post figure.flt,.post p+figure.flt,.post figure.flt.land,.post figure.flt.sq,.post figure.flt.port{float:none;width:auto;margin:30px 0}
 .post figure.flt figcaption{text-align:center}
}

/* v22 (7 Nov, Alexandra: "spacing even all around the photos"): the same ~28px visible gap between a photo (or its caption)
   and the text above, below and beside it. Text lines carry ~6px of leading, so the margins are 22px above and 20px below
   (captions have ~2px leading of their own); blog.js then nudges each wrapped photo's height (a few px, centre-cropped) so the
   first full-width line under it also sits 28px below. Phones (<640px) keep the full-width layout. */
@media (min-width:640px){
 .post figure,.post .pair{margin-top:22px;margin-bottom:20px}
 .post p+figure,.post p+.pair,.post figure+p,.post .pair+p{margin-top:22px}
 .post figure:has(figcaption)+p,.post .pair+p{margin-top:20px}
 .post figure+figure{margin-top:22px}
 .post figure.mid,.post figure.mid.port,.post p+figure.mid,.post figure+figure.mid{margin:22px auto 20px}
 .post figure.flt,.post p+figure.flt{margin-top:22px;margin-bottom:20px}
 .post figure.flt+p{margin-top:1.15em}
 .post figure.flt-r{margin-left:28px}
 .post figure.flt-l{margin-right:28px}
}