/* ------------------------------------------------------------------
   post.css - a single blog post.

   Loads after base.css, modern.css, components.css and prose.css. The title, the
   date and the reading time are the whole hero; the cover picture overlaps its
   foot, and the body is one readable column (prose.css styles what is inside it).
   ------------------------------------------------------------------ */

/* --- the hero: a post's title is often long ----------------------------- */
.top-hero.is-post h1{max-width:980px;font-size:clamp(28px,2.8vw,36px)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;color:#bfb8ca;font-size:13px;font-weight:600}

/* --- the cover picture, overlapping the hero's foot ---------------------
   As wide as the text column, so the first lines of the article are on screen
   under it instead of a screen below. */
.post-cover{position:relative;z-index:2;max-width:760px;margin:-18px auto 0;overflow:hidden;border-radius:22px;background:#efe8f5;box-shadow:0 28px 70px rgba(59,28,73,.2)}
.post-cover img{display:block;width:100%;height:auto}

/* --- the readable column -------------------------------------------------- */
.post-body{max-width:760px;margin:0 auto;padding:52px 0 8px;font-size:18px;line-height:1.78}
.post-tail{max-width:760px;margin:8px auto 0}

/* --- previous and next ---------------------------------------------------- */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:46px auto 0}
.post-nav a{display:block;padding:19px 22px;border:1px solid #e8e0ec;border-radius:17px;background:#fff;transition:border-color .25s,transform .25s,box-shadow .25s}
.post-nav a:hover{border-color:#c9b6dc;transform:translateY(-3px);box-shadow:0 16px 38px #4a285518}
.post-nav span{display:block;margin-bottom:6px;color:#7a5bb0;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.post-nav strong{display:block;color:#261f31;font-size:15px;font-weight:740;line-height:1.4;letter-spacing:-.02em}
.post-nav-next{text-align:right}
.post-nav a:only-child{grid-column:1/-1}

@media(max-width:760px){
  .post-body{padding-top:38px;font-size:17px}
  .post-cover{margin-top:-10px;border-radius:16px}
  .post-nav{grid-template-columns:1fr}
  .post-nav-next{text-align:left}
}