/* ============================================================
   The Askpilot blog.
   ------------------------------------------------------------
   Two page types, one file: the index (featured post, card grid,
   pagination) and the post (a prose column in the site's type).
   Everything leans on the v8 tokens with literal fallbacks, so a
   blog page never renders unstyled even if v8.css moves under it.
   Generated pages come from tools/build-blog.py.
   ============================================================ */

/* ---------- shared ---------- */

/* A white reading ground on POST pages only: long-form text earns the extra
   contrast there, while the index keeps the site's cream so its cards sit in
   the same world as the rest of the site. The generator stamps is-post on
   post bodies. */
body.is-post { background: #fff; }
/* the reading ground stops where the site resumes: the footer keeps the
   same cream it has on every other page */
body.is-post .foot { background: var(--cream, #FCF9F7); }

.blog-main { padding: 56px 0 96px; }

.blog-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--pink-deep, #D53BD5);
}

/* the category chip and date that open every card and every post */
.blog-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.8125rem; font-weight: 600; color: var(--muted, #8B8492);
}
.blog-tag-chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    /* blue, not the brand magenta: tags are wayfinding, and the magenta is
       reserved for actions */
    background: #EDF1FF;
    border: 1px solid #CBD7FB;
    color: #3D5BD9;
    font-size: 0.75rem; font-weight: 700; text-decoration: none;
    white-space: nowrap;
}
a.blog-tag-chip:hover { background: #DDE6FE; }

/* on a post the eyebrow is the way back, not a label */
a.blog-eyebrow-back {
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
}
a.blog-eyebrow-back svg { transition: transform 0.2s ease; }
a.blog-eyebrow-back:hover svg { transform: translateX(-3px); }

/* ---------- index: masthead, lead, list ---------- */

/* Everything on one measure, ranged left: a compact masthead row, the
   newest post at display size, then the ruled list of the rest. */
.blog-mast, .idx-lead, .idx-rule, .idx-list, .blog-pages, .blog-rss {
    max-width: 880px; margin-left: auto; margin-right: auto;
}
.blog-mast {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 10px 20px;
    margin-bottom: 48px;
}
.blog-mast h1 {
    margin: 0;
    font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em;
    color: var(--ink, #16121A);
}
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* the chips inside a post's meta row, as their own group */
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

/* the newest post, stepped out of the list at display size */
.idx-lead { display: block; text-decoration: none; margin-bottom: 72px; }
.idx-lead-eyebrow {
    margin: 0 0 14px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted, #8B8492);
}
.idx-lead-eyebrow span { color: #3D5BD9; }
.idx-lead h2 {
    margin: 0 0 14px;
    font-size: clamp(2.25rem, 5.4vw, 3.75rem);
    font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;
    color: var(--ink, #16121A);
    transition: color 0.2s ease;
}
.idx-lead:hover h2 { color: var(--pink-deep, #D53BD5); }
.idx-lead-sub {
    margin: 0 0 16px; max-width: 720px;
    font-size: 1.25rem; line-height: 1.55; color: var(--body, #4E4854);
}
/* the featured object: tinted text panel left, artwork right, no border —
   one soft rounded card carried by its elevation (the Contentful grammar) */
.idx-lead.is-split {
    display: grid; grid-template-columns: 1fr 1fr;
    /* white panel: on the cream page the card lifts by shadow, and the
       artwork's own warm ground gives the right half its tone */
    background: #fff;
    border: 1px solid #E3E6EC;
    border-radius: 28px; overflow: hidden;
    box-shadow: 0 2px 4px rgba(22, 18, 26, 0.04), 0 32px 64px -40px rgba(22, 18, 26, 0.28);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.idx-lead.is-split:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(22, 18, 26, 0.05), 0 40px 76px -42px rgba(22, 18, 26, 0.36);
}
.idx-lead-text {
    display: flex; flex-direction: column; justify-content: center;
    padding: 44px 46px;
}
.idx-lead.is-split h2 { font-size: clamp(1.625rem, 3.2vw, 2.375rem); }
.idx-lead.is-split .idx-lead-sub { font-size: 1.0625rem; }
/* The artwork carries no ground of its own, so the panel supplies one: a
   warm tint strong enough to read as a deliberate surface against the page.
   The illustration is fitted whole at its own ratio rather than cropped. */
/* The panel centres the artwork and the artwork keeps its own ratio:
   height:100% on the image cannot resolve against an auto-height panel, so
   when the card stacks on a phone the box balloons instead of hugging the
   illustration. */
.idx-lead-art {
    display: grid; place-items: center;
    min-height: 340px;
    border-left: 1px solid #E3E6EC; background: linear-gradient(120deg, #F4F7FF 0%, #F8F5FF 52%, #FDF3FB 100%);
    padding: 20px;
}
.idx-lead-art img {
    width: 100%; height: auto; max-height: 100%; display: block;
    object-fit: contain;
}
@media (max-width: 760px) {
    .idx-lead.is-split { grid-template-columns: 1fr; }
    /* stacked: the divider runs under the artwork instead of beside it */
    /* stacked: the panel hugs the illustration, no forced aspect box */
    .idx-lead-art { order: -1; min-height: 0; padding: 16px;
                    border-left: 0; border-bottom: 1px solid #E3E6EC; }
    .idx-lead-text { padding: 26px 24px 30px; }
}

/* the labelled hairline that opens the list */
.idx-rule {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 44px;
}
.idx-rule span {
    flex: none;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted, #8B8492);
}
.idx-rule::after { content: ""; flex: 1; height: 1px; background: #E7DFDA; }

.idx-list { display: flex; flex-direction: column; gap: 60px; }
.idx-link.has-thumb { display: flex; gap: 36px; align-items: flex-start; }
.idx-link.has-thumb .idx-text { flex: 1; min-width: 0; }
.idx-thumb {
    display: block; flex: none;
    width: 200px; aspect-ratio: 3 / 2;
    border: 1px solid #E3E6EC; border-radius: 14px; overflow: hidden;
}
.idx-thumb { background: linear-gradient(120deg, #F4F7FF 0%, #F8F5FF 52%, #FDF3FB 100%); }
.idx-thumb img {
    width: 100%; height: 100%; display: block;
    object-fit: contain;
}
@media (max-width: 620px) {
    .idx-link.has-thumb { gap: 18px; }
    .idx-thumb { width: 100px; aspect-ratio: 1; }
}
.idx-item { max-width: 780px; }
.idx-link { display: block; text-decoration: none; }
.idx-link h2 {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800; line-height: 1.15; letter-spacing: -0.025em;
    color: var(--ink, #16121A);
    transition: color 0.2s ease;
}
.idx-link:hover h2 { color: var(--pink-deep, #D53BD5); }
.idx-link p {
    margin: 0;
    font-size: 1.0625rem; line-height: 1.6; color: var(--body, #4E4854);
}
.idx-meta {
    margin: 14px 0 0;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted, #8B8492);
}
.idx-date { color: #3D5BD9; }

/* ---------- index: featured latest ---------- */

.blog-featured {
    display: block; position: relative;
    max-width: 980px; margin: 0 auto 28px;
    padding: 34px 38px;
    background: #fff;
    border: 1.5px solid var(--ink, #16121A); border-radius: 22px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 18px 44px -26px rgba(22, 18, 26, 0.20);
    text-decoration: none;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.blog-featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.05), 0 26px 56px -28px rgba(22, 18, 26, 0.28);
}
.blog-featured h2 {
    margin: 14px 0 10px;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 780; line-height: 1.15; letter-spacing: -0.02em;
    color: var(--ink, #16121A); text-wrap: balance;
}
.blog-featured p {
    margin: 0; max-width: 640px;
    font-size: 1.0625rem; line-height: 1.6; color: var(--body, #4E4854);
}
.blog-featured .blog-read {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 18px;
    font-size: 0.9375rem; font-weight: 700; color: var(--pink-deep, #D53BD5);
}

/* ---------- covers ---------- */

/* the featured card's cover bleeds to the card's edges, above the text */
.blog-featured { overflow: hidden; }
.blog-featured-media {
    display: block; margin: -34px -38px 26px;
    aspect-ratio: 21 / 9; overflow: hidden;
    border-bottom: 1.5px solid var(--ink, #16121A);
}
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card { overflow: hidden; }
.blog-card-media {
    display: block; margin: -24px -24px 16px;
    aspect-ratio: 16 / 9; overflow: hidden;
    border-bottom: 1.5px solid var(--ink, #16121A);
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the post's cover sits between the hero and the prose, wider than both */
.post-cover { max-width: 900px; margin: 0 auto 44px; }
.post-cover img {
    /* height:auto is load-bearing: the width/height attributes that prevent
       layout shift otherwise fix the rendered height at 540px, so a phone
       showed a 343x540 letterbox instead of the illustration's own ratio */
    width: 100%; height: auto; display: block;
    /* the illustration is transparent; this is its surface */
    background: linear-gradient(120deg, #F4F7FF 0%, #F8F5FF 52%, #FDF3FB 100%);
    border: 1px solid #E3E6EC; border-radius: 22px;
    box-shadow: 0 2px 4px rgba(22, 18, 26, 0.04), 0 30px 60px -38px rgba(22, 18, 26, 0.30);
}

/* ---------- index: the grid ---------- */

.blog-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    max-width: 980px; margin: 0 auto;
}
.blog-card {
    display: flex; flex-direction: column;
    padding: 24px 24px 22px;
    background: #fff;
    border: 1.5px solid var(--ink, #16121A); border-radius: 22px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 18px 44px -26px rgba(22, 18, 26, 0.16);
    text-decoration: none;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.05), 0 24px 52px -28px rgba(22, 18, 26, 0.26);
}
.blog-card h3 {
    margin: 12px 0 8px;
    font-size: 1.1875rem; font-weight: 760; line-height: 1.3;
    letter-spacing: -0.01em; color: var(--ink, #16121A);
}
.blog-card p {
    margin: 0 0 16px; flex: 1;
    font-size: 0.9375rem; line-height: 1.55; color: var(--body, #4E4854);
}
.blog-card .blog-card-foot {
    font-size: 0.8125rem; font-weight: 600; color: var(--muted, #8B8492);
}

/* ---------- index: pagination ---------- */

.blog-pages {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 44px;
}
.blog-pages a, .blog-pages span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border-radius: 999px; border: 1px solid transparent;
    font-size: 0.9375rem; font-weight: 700; text-decoration: none;
    color: var(--body, #4E4854);
}
.blog-pages a:hover { border-color: var(--ink, #16121A); color: var(--ink, #16121A); }
.blog-pages .is-here {
    background: var(--ink, #16121A); color: #fff;
}

/* the quiet RSS line under the pagination */
.blog-rss {
    margin-top: 26px; text-align: center;
    font-size: 0.8125rem; font-weight: 600; color: var(--muted, #8B8492);
}
.blog-rss a { color: inherit; }

/* ---------- post ---------- */

.post-byline {
    margin: 14px 0 0;
    font-size: 0.9375rem; font-weight: 600; color: var(--muted, #8B8492);
}
.post-byline a { color: var(--ink, #16121A); text-decoration: none; font-weight: 700; }
.post-byline a:hover { color: #3D5BD9; }

.author-bio {
    max-width: 58ch; font-size: 1.125rem; margin: -24px auto 44px;
    line-height: 1.6; color: var(--body, #4E4854);
}


/* Editorial, not ceremonial: everything ranged left on the prose column's
   own left edge, the headline big and set tight across the full measure. */
/* The hero shares the body's font size so its 58ch is the same 58ch: both
   columns resolve to the same width and their left edges align exactly. */
.post-hero { max-width: 58ch; font-size: 1.125rem; margin: 0 auto 36px; text-align: left; }
.post-hero .blog-meta {
    justify-content: flex-start;
    flex-wrap: wrap; gap: 8px 10px;
}
/* "17 August 2026" and "6 min read" are single units, never broken in two */
.post-hero .blog-meta > span { white-space: nowrap; }
/* the tags are their own row under the date, not a neighbour of it, so a
   long list of them runs wide instead of shoving the date to the edge */
.post-hero-tags { margin-top: 12px; }
.post-hero h1 {
    margin: 18px 0 16px;
    font-size: clamp(2rem, 4.8vw, 3.25rem);
    font-weight: 800; line-height: 1.06; letter-spacing: -0.032em;
    color: var(--ink, #16121A);
}
.post-hero .post-lede {
    margin: 0; font-size: 1.1875rem; line-height: 1.6;
    color: var(--body, #4E4854);
}

.post-body {
    /* Measured, not assumed: Manrope is compact, so generic 70ch guidance
       still gave 81 real characters per line — over Baymard's 50-75 band and
       WCAG's 80 cap. 18px type at 58ch lands ~75 characters in a ~636px
       column, the Linear/Resend width with Medium-class reading size. */
    max-width: 58ch; margin: 0 auto;
    font-size: 1.125rem; line-height: 1.7; color: var(--body, #4E4854);
}
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 {
    margin-top: 2em;
    font-size: 1.5rem; font-weight: 780; line-height: 1.25;
    letter-spacing: -0.015em; color: var(--ink, #16121A);
}
.post-body h3 {
    margin-top: 1.7em;
    font-size: 1.1875rem; font-weight: 750; color: var(--ink, #16121A);
}
/* editorial blue, matching the tags and dates: inside prose, magenta stays
   reserved for product actions */
.post-body a { color: #3D5BD9; text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: #2A44B8; }
.post-body strong { color: var(--ink, #16121A); font-weight: 700; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body li + li { margin-top: 0.45em; }
/* A thesis statement: the line the article exists to land. Same family as
   a pull-quote so it reads as "quoted", one step larger, and set on the
   blue that means reading rather than the magenta that means action. */
.post-body .post-statement {
    margin: 2em 0;
    padding: 4px 0 6px 24px;
    border-left: 4px solid #3D5BD9;
    font-size: 1.375rem; font-weight: 760; line-height: 1.42;
    letter-spacing: -0.018em; color: var(--ink, #16121A);
}
@media (max-width: 620px) {
    .post-body .post-statement { font-size: 1.1875rem; padding-left: 18px; }
}

/* a quote is a pull-quote: a bold statement on a heavy accent bar */
.post-body blockquote {
    margin: 1.8em 0; padding: 6px 0 6px 22px;
    border-left: 4px solid #3D5BD9;
}
.post-body blockquote p {
    margin: 0;
    font-size: 1.25rem; font-weight: 720; line-height: 1.45;
    letter-spacing: -0.015em; color: var(--ink, #16121A);
}
.post-body code {
    padding: 1px 6px; border-radius: 6px;
    background: #F6F1EE; border: 1px solid #EAE2DD;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em; color: var(--ink, #16121A);
}
.post-body pre {
    padding: 18px 20px; border-radius: 14px;
    background: #F6F1EE; border: 1px solid #EAE2DD;
    overflow-x: auto;
}
.post-body pre code { padding: 0; border: 0; background: none; font-size: 0.875rem; line-height: 1.65; }
.post-body img {
    max-width: 100%; border-radius: 14px; border: 0;
    box-shadow: 0 1px 3px rgba(22, 18, 26, 0.05), 0 20px 40px -28px rgba(22, 18, 26, 0.24);
}
/* images answer the cursor with a soft lift; bare images stay untouched */
.post-body img:not(.is-bare), .post-cover img {
    transition: box-shadow 0.24s ease;
}
.post-body img { height: auto; }
.post-body img:not(.is-bare):hover, .post-cover img:hover {
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.05), 0 22px 46px -24px rgba(22, 18, 26, 0.28);
}

/* #bare on the image URL: no border, no radius, no ground — for transparent
   diagrams and screenshots that carry their own chrome */
.post-body img.is-bare { border: 0; border-radius: 0; background: none; }
.post-body figure { margin: 1.8em 0; }
.post-body figure img { display: block; width: 100%; }
.post-body figcaption {
    margin-top: 10px; text-align: center;
    font-size: 0.8125rem; font-weight: 600; color: var(--muted, #8B8492);
}
.post-body hr {
    border: 0; height: 1px; margin: 2.2em auto; width: 120px;
    background: repeating-linear-gradient(90deg, #C6BBB6 0 7px, transparent 7px 14px);
}

/* comparison tables: readable rows, and a wrapper that scrolls sideways on
   a phone instead of crushing the columns */
.post-table { margin: 1.8em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-body table {
    width: 100%; border-collapse: collapse;
    font-size: 0.9375rem; line-height: 1.5;
}
.post-body th, .post-body td {
    text-align: left; vertical-align: top;
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid #EAE2DD;
}
.post-body thead th {
    font-weight: 750; color: var(--ink, #16121A);
    border-bottom: 2px solid #D8CFC9;
    white-space: nowrap;
}
.post-body tbody td:first-child {
    font-weight: 650; color: var(--ink, #16121A);
    min-width: 150px;
}
.post-body tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 620px) {
    .post-body table { font-size: 0.875rem; min-width: 520px; }
}

/* ---------- post: the one door ---------- */

/* A full-bleed band, not a card: it runs the whole screen width, held by
   hairlines above and below. The rings ground stays (the layer the CTA
   sells); the magenta haze is gone so nothing reads as a shadow. The 50vw
   bleed overshoots by a scrollbar in some browsers, so the post body clips
   horizontal overflow. */
:root:has(body.is-post) { overflow-x: clip; }
body.is-post { overflow-x: clip; }
.post-cta {
    margin: 72px calc(50% - 50vw) 0; padding: 64px 24px 60px;
    text-align: center;
    background:
        repeating-radial-gradient(circle at 50% 0,
            transparent 0 42px, rgba(22, 18, 26, 0.03) 42px 43px),
        #FEFCFB;
    border: 0;
    border-top: 1px solid #EAE2DD; border-bottom: 1px solid #EAE2DD;
    border-radius: 0;
}
.post-cta-marks {
    display: inline-flex; align-items: center; gap: 9px;
    margin-bottom: 16px;
}
.post-cta-marks img { width: 24px; height: 24px; display: block; }
.post-cta-marks i {
    font-style: normal; font-size: 0.9375rem; font-weight: 700;
    color: var(--muted, #8B8492);
}
.post-cta h2 {
    max-width: 640px; margin: 0 auto 8px;
    font-size: 1.5rem; font-weight: 780; letter-spacing: -0.015em;
    color: var(--ink, #16121A); text-wrap: balance;
}
.post-cta p { max-width: 640px; margin: 0 auto 20px; font-size: 1rem; color: var(--body, #4E4854); }
.post-cta .hero-cta-note { margin-top: 12px; }

/* ---------- post: newer / older pager ---------- */

/* the membrane's dashes, separating the article from its navigation */
.post-divider {
    max-width: 58ch; height: 1px; margin: 56px auto 0;
    font-size: 1.125rem;
    background: repeating-linear-gradient(90deg, #C6BBB6 0 7px, transparent 7px 14px);
}
.post-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    max-width: 58ch; font-size: 1.125rem; margin: 30px auto 0;
}
/* bare text, no card: a quiet step to the neighbouring post */
.post-nav-cell {
    display: flex; flex-direction: column; gap: 8px;
    text-decoration: none;
}
.post-nav-cell.is-older { text-align: right; align-items: flex-end; }
.post-nav-cell.is-empty { visibility: hidden; }
a.post-nav-cell:hover .post-nav-title { color: var(--pink-deep, #D53BD5); }
a.post-nav-cell.is-newer:hover .post-nav-label svg { transform: translateX(-3px); }
a.post-nav-cell.is-older:hover .post-nav-label svg { transform: translateX(3px); }
.post-nav-label svg { transition: transform 0.2s ease; }
.post-nav-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted, #8B8492);
}
.post-nav-title {
    font-size: 1rem; font-weight: 740; line-height: 1.35;
    letter-spacing: -0.008em; color: var(--ink, #16121A);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
@media (max-width: 620px) {
    .post-nav { grid-template-columns: 1fr; }
    .post-nav-cell.is-empty { display: none; }
}

/* ---------- post: more from the blog (retired) ---------- */

.post-more { max-width: 980px; margin: 64px auto 0; }
.post-more-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 18px;
}
.post-more-head h2 {
    margin: 0;
    font-size: 1.25rem; font-weight: 780; letter-spacing: -0.01em;
    color: var(--ink, #16121A);
}
.post-more-all {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.875rem; font-weight: 700; text-decoration: none;
    color: var(--pink-deep, #D53BD5);
}
.post-more-all svg { transition: transform 0.2s ease; }
.post-more-all:hover svg { transform: translateX(3px); }

/* Compact reading tiles: cover, headline, date. The reader is done with one
   article and picks the next by headline, so the excerpt bulk is gone. */
.more-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.more-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff;
    border: 1.5px solid var(--ink, #16121A); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 14px 34px -24px rgba(22, 18, 26, 0.16);
    text-decoration: none;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.more-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.05), 0 22px 46px -26px rgba(22, 18, 26, 0.26);
}
.more-card:hover .more-title { color: var(--pink-deep, #D53BD5); }
.more-media {
    display: block; aspect-ratio: 5 / 3; overflow: hidden;
    border-bottom: 1.5px solid var(--ink, #16121A);
}
.more-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a coverless post still gets a ground: the layer's rings, quietly */
.more-media.is-bare {
    background:
        repeating-radial-gradient(circle at 50% 0,
            transparent 0 26px, rgba(22, 18, 26, 0.05) 26px 27px),
        #FBF6F2;
}
.more-body { display: flex; flex-direction: column; gap: 7px; padding: 15px 17px 17px; }
.more-title {
    font-size: 1rem; font-weight: 740; line-height: 1.35;
    letter-spacing: -0.008em; color: var(--ink, #16121A);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.more-meta { font-size: 0.8125rem; font-weight: 600; color: var(--muted, #8B8492); }

/* ---------- the weekly digest box ---------- */

/* The SUBCARD: the design system's second card tier. Where the primary card
   is white with the 1.5px ink border (raised, "act here"), the subcard is a
   recessed panel: the tab tray's warm fill, no border, no shadow. Same
   radius family, one step quieter. Use it for secondary asks and asides so
   they never compete with an ink-border card on the same page. */
.blog-sub {
    max-width: 640px; margin: 64px auto 0; padding: 26px 30px;
    background: #F4EDE9;
    border: 0; border-radius: 22px;
}
.blog-sub h2 {
    margin: 0 0 6px;
    font-size: 1.25rem; font-weight: 780; letter-spacing: -0.015em;
    color: var(--ink, #16121A);
}
.blog-sub p {
    margin: 0 0 16px;
    font-size: 0.9375rem; color: var(--body, #4E4854);
}
.blog-sub form { display: flex; gap: 10px; }
.blog-sub input[type="email"] {
    flex: 1; min-width: 0;
    padding: 11px 14px;
    font: inherit; font-size: 0.9375rem; color: var(--ink, #16121A);
    background: #fff;
    /* borderless field on the tinted panel: the white fill is the affordance */
    border: 0; border-radius: 12px;
}
.blog-sub input[type="email"]:focus {
    outline: 2px solid #4C6BEE; outline-offset: 1px; border-color: transparent;
}
@media (max-width: 480px) {
    .blog-sub form { flex-direction: column; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .blog-main { padding: 40px 0 72px; }
    /* every tag stays reachable on a phone: the chips become a rail that
       scrolls sideways rather than wrapping into a wall or being hidden */
    .blog-chips, .blog-tags {
        flex-wrap: nowrap; overflow-x: auto;
        scrollbar-width: none; -ms-overflow-style: none;
        /* the rail bleeds to the screen edges so the last chip is never
           clipped in mid-air; padding keeps the first chip aligned */
        margin-inline: -20px; padding-inline: 20px;
        overscroll-behavior-x: contain;
    }
    .blog-chips::-webkit-scrollbar, .blog-tags::-webkit-scrollbar { display: none; }
    .blog-chips > a, .blog-tags > a { flex: none; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-featured { padding: 26px 22px; }
    .blog-featured-media { margin: -26px -22px 20px; aspect-ratio: 16 / 9; }
    .post-body { font-size: 1rem; }
    .post-cta { padding: 28px 22px; }
}