/* Single journal post. Ported from design-src/post/page.css. */

/* ===== single post ===== */
.p-hero.article > img{object-position:50% 60%}
.p-hero.article .kicker{display:block;color:var(--gold-soft);font-size:11px;margin-bottom:6px}
.p-hero.article .kicker a:hover{color:var(--white)}
.p-hero.article h1{font-size:clamp(32px,3.6vw,52px);line-height:1.1;max-width:15em;margin:10px 0 16px}
.p-hero.article h1 em{display:inline;font-family:var(--serif);font-style:italic;font-size:1em;color:var(--white);margin:0}
.p-hero .meta{display:flex;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.85)}
.p-hero .meta span+span::before{content:"";display:inline-block;width:4px;height:4px;background:var(--gold);transform:rotate(45deg);margin:0 12px 2px}

.post-body .wrap{display:grid;grid-template-columns:minmax(0,720px) 300px;justify-content:space-between;gap:70px;align-items:start}
.prose{font-size:18px;line-height:1.8;color:var(--ink)}
.prose p{margin-bottom:22px;color:#3d312b}
.prose .lede{font-family:var(--serif);font-size:24px;line-height:1.5;color:var(--brown)}
.prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.8vw,36px);line-height:1.15;color:var(--brown);margin:52px 0 18px}
.in-short{background:var(--ivory);border-left:3px solid var(--gold);padding:22px 26px 6px;margin-bottom:34px}
.in-short .caps{color:var(--gold-deep);display:block;margin-bottom:6px}
.in-short p{font-size:17px;color:var(--brown)}
.fig-right{float:right;width:46%;margin:6px 0 18px 30px}
.fig-right img{width:100%;height:auto}
.fig-wide{margin:34px 0}
.fig-wide img{width:100%;height:auto;max-height:560px;object-fit:cover}
.fig-wide figcaption{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--gold-deep);margin-top:10px;text-align:center}
.pull{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1.3;color:var(--brown);border-top:1px solid var(--gold-soft);border-bottom:1px solid var(--gold-soft);padding:24px 0;margin:34px 0;text-align:center;clear:both}
.ticks{list-style:none;margin:0 0 24px}
.ticks li{position:relative;padding:8px 0 8px 30px;border-bottom:1px solid var(--gold-soft)}
.ticks li::before{content:"";position:absolute;left:4px;top:19px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.inline-shop{background:var(--linen);padding:26px 26px 22px;margin:36px 0}
.inline-shop > .caps{color:var(--gold-deep);display:block;margin-bottom:14px}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mini a{display:flex;flex-direction:column;line-height:1.3}
.mini img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:8px;transition:transform .5s}
.mini a:hover img{transform:translateY(-3px)}
.mini b{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--brown)}
.mini small{font-size:13px;color:var(--brown-mid)}
.author{display:flex;gap:20px;align-items:flex-start;border-top:1px solid var(--gold-soft);border-bottom:1px solid var(--gold-soft);padding:28px 0;margin-top:44px}
.avatar{flex:none;width:64px;height:64px;border-radius:50%;background:var(--linen);border:1px dashed var(--gold);display:grid;place-items:center;font-family:var(--script);font-size:34px;color:var(--gold-deep)}
.author .caps{color:var(--gold-deep);display:block}
.author b{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--brown)}
.author p{font-size:15px;color:var(--brown-mid);margin:4px 0 0}

.post-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:22px}
.toc{border-left:1px solid var(--gold-soft);display:flex;flex-direction:column}
.toc .caps{color:var(--gold-deep);padding:0 0 10px 20px}
.toc a{position:relative;padding:8px 0 8px 20px;font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--brown-mid)}
.toc a:hover,.toc a.on{color:var(--brown)}
.toc a.on::before{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;margin-top:-3px;background:var(--gold);transform:rotate(45deg)}
.side-shop{display:block;background:var(--brown);color:var(--gold-soft)}
.side-shop img{width:100%;aspect-ratio:3/2;object-fit:cover}
.side-shop div{padding:20px 22px 22px}
.side-shop .caps{color:var(--gold);display:block}
.side-shop b{display:block;font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;color:var(--white);margin:6px 0 12px}
.side-shop .go{color:var(--white);border-bottom:1px solid var(--gold);padding-bottom:2px}

.related-posts{background:var(--linen)}

@media (max-width:1060px){
  .post-body .wrap{grid-template-columns:1fr;gap:40px}
  .post-side{position:static;order:-1}
  .toc{display:none}
  .side-shop{display:none}
}
@media (max-width:640px){
  .prose{font-size:17px}
  .prose .lede{font-size:21px}
  .fig-right{float:none;width:100%;margin:0 0 22px}
  .pull{font-size:24px}
  .mini{grid-template-columns:repeat(2,1fr)}
  .inline-shop{padding:22px 16px 18px}
  .p-hero .meta{font-size:13px}
}

/* theme additions: WordPress content markup */
.prose h3{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2;color:var(--brown);margin:36px 0 14px}
.prose h4,.prose h5,.prose h6{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--brown);margin:28px 0 10px}
.prose a{color:var(--brown);border-bottom:1px solid var(--gold)}
.prose a:hover{color:var(--gold-deep)}
.prose ul,.prose ol{margin:0 0 22px 22px}
.prose li{margin:6px 0}
.prose li::marker{color:var(--gold-deep)}
.prose img{max-width:100%;height:auto}
.prose .alignright{float:right;width:auto;max-width:46%;margin:6px 0 18px 30px}
.prose .alignleft{float:left;max-width:46%;margin:6px 30px 18px 0}
.prose .aligncenter{display:block;margin:30px auto}
.prose .wp-caption{max-width:100%}
.prose .wp-caption-text{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--gold-deep);margin-top:8px}
.prose blockquote{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.35;color:var(--brown);border-left:3px solid var(--gold);padding:4px 0 4px 24px;margin:30px 0}
.prose::after{content:"";display:block;clear:both}
.p-hero.article .kicker a{color:inherit}
.mini img{height:auto}
@media (max-width:640px){.prose .alignright,.prose .alignleft{float:none;max-width:100%;margin:0 0 22px}}
.side-shop img{height:auto}