/* Additions layered on top of the main style.css.
   Reuses the site's CSS variables (--ink, --navy, --navy-2, --mist-2, --muted, --paper, --sky). */

/* Plain navy hero for the blog index and 404 (no background photo needed) */
.phero-plain{
  min-height:auto;
  padding:118px 0 44px;
  background:linear-gradient(180deg,var(--ink),var(--navy));
}
.phero-plain .crumb,
.phero-plain h1,
.phero-plain p{position:relative;z-index:1}
.phero-plain p{max-width:60ch;margin-top:.6rem;color:var(--sky)}

/* Cards reuse the site .cards/.card grid. Keep media consistent. */
.card .card-media{aspect-ratio:16/10;overflow:hidden;background:var(--mist-2)}
.card .card-media img{width:100%;height:100%;object-fit:cover;display:block}

/* Article body: style the default Kirby block markup to match the site article */
.article-body>*:first-child{margin-top:0}
.article-body h2{margin:1.7em 0 .5em}
.article-body h3{margin:1.4em 0 .4em}
.article-body p{margin:0 0 1.15em}
.article-body ul,
.article-body ol{margin:0 0 1.2em 1.25em}
.article-body li{margin:.3em 0}
.article-body a{color:var(--navy-2);text-decoration:underline;text-underline-offset:2px}
.article-body figure.image{margin:1.8em 0}
.article-body figure.image img{width:100%;border-radius:14px;display:block}
.article-body figure.image figcaption{margin-top:.55em;font-size:.9rem;color:var(--muted)}
.article-body blockquote{margin:1.8em 0;padding:0;border:0}
.article-body blockquote p{
  font-family:"Newsreader",Georgia,serif;font-style:italic;
  font-size:1.4rem;line-height:1.5;color:var(--navy);margin:0;
}
.article-body hr{border:0;border-top:1px solid var(--mist-2);margin:2.2em 0}