/* Blog: index listing and article layout. Shares tokens with styles.css. */

.bloghead{
  background:linear-gradient(148deg,var(--ink) 4%,#5A2AA3 54%,var(--plum) 100%);
  color:#fff;padding:calc(var(--header-h) + 74px) 0 74px;
}
.bloghead h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}

.post-meta{font-size:.84rem;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tag{background:var(--lilac-2);color:var(--plum);border-radius:999px;padding:.18rem .7rem;font-weight:600;font-size:.76rem}

/* featured post */
.feature-post{
  display:grid;grid-template-columns:1.05fr 1fr;gap:0;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 26px 54px -30px rgba(42,22,112,.42);transition:.2s ease;
}
.feature-post:hover{transform:translateY(-2px);box-shadow:0 32px 60px -30px rgba(42,22,112,.5)}
.feature-post__media img{width:100%;height:100%;min-height:330px;object-fit:cover;display:block}
.feature-post__body{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.feature-post__body h2{color:var(--ink);margin:14px 0 14px;font-size:clamp(1.5rem,2.4vw,2.1rem)}
.readmore{margin-top:20px;color:var(--plum);font-weight:600}

/* grid of posts */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.post-card__media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.post-card__body{padding:22px 24px 26px}
.post-card h3{color:var(--ink);font-size:1.12rem;margin:12px 0 10px;line-height:1.3}
.post-card p{font-size:.93rem;color:var(--muted)}
/* A draft is visibly a draft, so nobody mistakes the placeholder for a published piece. */
.post-card.is-draft{opacity:.72}
.post-card.is-draft .post-card__media img{filter:saturate(.5)}

/* article */
.article-head{background:var(--lilac);padding:calc(var(--header-h) + 52px) 0 46px}
.article-head h1{color:var(--ink);max-width:19ch;margin:16px 0 18px;font-size:clamp(2rem,4.4vw,3.1rem)}
.article-head .standfirst{font-size:1.18rem;color:var(--muted);max-width:60ch;line-height:1.6}
.byline{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:.9rem;color:var(--muted)}
.byline__mark{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,var(--violet),var(--teal));display:grid;place-items:center}
.byline__mark img{width:20px;height:20px}

.article-hero img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:center 38%;display:block}

.prose{max-width:44rem;margin:0 auto;font-size:1.06rem;line-height:1.75}
.prose > * + *{margin-top:1.25em}
.prose h2{color:var(--ink);font-size:1.6rem;margin-top:2.2em}
.prose h3{color:var(--ink);font-size:1.22rem;margin-top:1.8em}
.prose blockquote{
  margin:1.8em 0;padding:4px 0 4px 26px;border-left:3px solid var(--plum);
  font-size:1.1rem;color:var(--ink);font-style:italic;
}
.prose blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:.88rem;color:var(--muted)}
.prose ul{padding-left:1.2em}
.prose li + li{margin-top:.5em}
.prose a{color:var(--plum)}
.prose .callout{
  background:var(--lilac);border-radius:14px;padding:22px 26px;font-size:1rem;
  border:1px solid var(--line);
}
.prose .callout p:first-child{margin-top:0}
.prose figure{margin:2em 0}
.prose figure img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);display:block}
.prose figcaption{margin-top:12px;font-size:.88rem;color:var(--muted);text-align:center}

.article-foot{border-top:1px solid var(--line);margin-top:56px;padding-top:30px;max-width:44rem;margin-left:auto;margin-right:auto;font-size:.92rem;color:var(--muted)}

@media (max-width:980px){
  .feature-post{grid-template-columns:1fr}
  .feature-post__media img{min-height:230px}
  .feature-post__body{padding:28px 26px}
  .postgrid{grid-template-columns:1fr}
  .article-hero img{aspect-ratio:3/2}
}