/* Compiled output of assets/css/messa.css.
   Hand-maintained: we upload the theme without running gulp, so edit BOTH files. */

/* Messa brand layer
/* ------------------------------------------------------------

Built to assets/built/messa.css and loaded after screen.css (see default.hbs).
Every Messa override lives here so upstream Casper files stay untouched and can
be replaced wholesale on a theme update.

Ported from the "Blog Template" screen in the Messa design project
(claude.ai/design → 73e2857f). That screen is authored as one tree of inline
styles, so this file is the de-inlined version of it, mapped onto the class
names Casper's templates already emit. Where a value below looks arbitrary it is
almost certainly lifted verbatim from that screen — treat the design as the
source of truth, not this file.

The design is a light, cream-paper surface: no dark variant is specified, so the
palette is deliberately mode-independent (see 11).

CAREFUL: Casper sets html { font-size: 62.5% }, so 1rem = 10px here, while the
design is authored against a 16px root. Every font-size below is already
converted (design 14px = 1.4rem in this file), and the two fluid clamps keep
their vw terms unchanged because vw is root-independent.

1.  Fonts
2.  Tokens
3.  Page shell
4.  Type
5.  Masthead — the floating glass pill
6.  Hero
7.  Post feed — cards, pills, bylines
8.  Pagination
9.  Single post & page
10. Footer
11. Colour scheme & reduced motion
12. Site Code Injection overrides (temporary — see the note there)

*/


/* 1. Fonts
/* ---------------------------------------------------------- */

@font-face {
    font-family: "Perfectly Nineties";
    src: url("../fonts/perfectly-nineties.woff2") format("woff2"),
         url("../fonts/perfectly-nineties.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Untitled Serif";
    src: url("../fonts/untitled-serif-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Messina Sans";
    src: url("../fonts/messina-sans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* 2. Tokens
/* ---------------------------------------------------------- */

:root {
    --font-title: "Perfectly Nineties", "Untitled Serif", Georgia, serif;
    --font-body: "Messina Sans", system-ui, sans-serif;

    /* Casper reads these two everywhere; !important beats the font picker Ghost admin injects into {{ghost_head}} */
    --gh-font-heading: var(--font-title) !important;
    --gh-font-body: var(--font-body) !important;

    /* Surfaces. The page is cream paper; cards are translucent white on top of
       it, so the paper tone shows through and every card reads as one family. */
    --messa-bg: #FBF0E6;
    --messa-surface: rgba(255, 255, 255, 0.78);
    --messa-border: #E8D9C5;

    /* Card image panels. Small cards get flat sand; the featured card gets the
       sand-to-sky gradient that makes the illustration read as a horizon. */
    --messa-panel: #F2E8DA;
    --messa-panel-featured: linear-gradient(180deg, #EBE9E2 0%, #D4E3F0 100%);

    /* Ink. Three steps only: body, secondary copy, and meta/timestamps. */
    --messa-text-primary: #0A0A0B;
    --messa-text-secondary: #6E6B68;
    --messa-text-tertiary: #A3A19E;

    /* Slate blue. This is a text and tint colour — links, pills, the active nav
       chip — and the one fill it is allowed to be is the tactile CTA. It is NOT
       Ghost's --ghost-accent-color, which the theme deliberately ignores. */
    --messa-accent: #5A6B8F;
    --messa-accent-08: rgba(90, 107, 143, 0.08);
    --messa-accent-10: rgba(90, 107, 143, 0.1);
    --messa-accent-14: rgba(90, 107, 143, 0.14);
    --messa-accent-18: rgba(90, 107, 143, 0.18);
    --messa-accent-30: rgba(90, 107, 143, 0.3);
    --messa-button: #5A6B8F;

    /* Amber, for the "Featured" flag. Same recipe as a tag pill. */
    --messa-amber: #8C530A;
    --messa-amber-14: rgba(217, 146, 74, 0.14);
    --messa-amber-30: rgba(217, 146, 74, 0.3);

    --messa-radius-card: 16px;
    --messa-radius-pill: 999px;

    --messa-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
    --messa-shadow-card-featured: 0 4px 16px rgba(0, 0, 0, 0.05);
    --messa-shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.08);

    /* The glass pill: two ambient drops for lift off the paper, then two insets
       that draw the lit top edge and the shaded bottom edge of the glass. */
    --messa-shadow-nav:
        0 8px 24px -8px rgba(23, 23, 33, 0.14),
        0 2px 6px -1px rgba(23, 23, 33, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03);

    /* Tactile CTA. A 1px dark drop ABOVE the letters reads as their top edge
       being recessed, with a faint light catch from inside the recess below. */
    --messa-shadow-button:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(20, 30, 50, 0.12),
        0 4px 10px rgba(20, 30, 50, 0.1);
    --messa-textshadow-button:
        0 -1px 0 rgba(15, 25, 45, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.08);

    /* Fluid display scale, rebased to Casper's 10px root.
       Hero:     design clamp(2.75rem, 2.07rem + 2.83vw, 4.25rem) → 44px…68px
       Featured: design clamp(1.75rem, 1.4rem  + 1.4vw,  2.375rem) → 28px…38px */
    --messa-display: clamp(4.4rem, 3.31rem + 2.83vw, 6.8rem);
    --messa-featured-title: clamp(2.8rem, 2.24rem + 1.4vw, 3.8rem);
    --messa-cta-display: clamp(4rem, 3.12rem + 2.36vw, 6rem);
    --messa-heading: clamp(3.4rem, 2.77rem + 1.69vw, 4.8rem);
    --messa-subheading: clamp(2.6rem, 2.24rem + 0.93vw, 3.4rem);

    --messa-tracking-tight: -0.025em;

    /* The design's page frame: 1240px of content inside a 24px gutter. */
    --messa-page-max: 1240px;
    --messa-gutter: 24px;
}


/* 3. Page shell
/* ---------------------------------------------------------- */

html {
    background-color: var(--messa-bg);
}

body {
    font-family: var(--font-body);
    color: var(--messa-text-primary);
    background-color: var(--messa-bg);
}

/* Casper's own containers, widened to the design's 1240px frame */
.outer {
    padding: 0 var(--messa-gutter);
}

.inner {
    max-width: var(--messa-page-max);
}

a {
    color: var(--messa-text-primary);
    text-decoration: none;
}

a:hover {
    color: var(--messa-accent);
}

::selection {
    color: var(--messa-text-primary);
    background: var(--messa-accent-18);
}

/* Drifting clouds
/* ----------------------------------------------------------

Decorative only. The layer clips its own overflow because the design hangs both
clouds past the viewport edge (left: -60px / right: -30px) and an unclipped
bleed would add a horizontal scrollbar. Clipping here rather than on .viewport
keeps .viewport free of an overflow context. */

.messa-clouds {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    height: 620px;
    overflow: hidden;
    pointer-events: none;
}

.messa-cloud {
    position: absolute;
    display: block;
    height: auto;
}

.messa-cloud-a {
    top: 150px;
    left: -60px;
    width: 300px;
    opacity: 0.85;
    animation: messaCloudDriftA 16s ease-in-out infinite;
}

.messa-cloud-b {
    top: 320px;
    right: -30px;
    width: 190px;
    opacity: 0.8;
    animation: messaCloudDriftB 20s ease-in-out infinite;
}

@keyframes messaCloudDriftA {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(22px); }
}

@keyframes messaCloudDriftB {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-26px); }
}

/* Everything the reader interacts with sits above the cloud layer. */
.site-content,
.site-footer {
    position: relative;
    z-index: 5;
}


/* 4. Type
/* ---------------------------------------------------------- */

/* Perfectly Nineties ships Regular only, so faux-bold would smear the outlines
   at display sizes. Titles are pinned to 400 and synthesis is switched off —
   hierarchy comes from size and colour, never weight. Sans-serif UI chrome
   (pills, buttons, bylines) keeps its weights: synthesised 500/600 is fine at
   12-17px and is what carries the hierarchy there. */
h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.gh-head-logo,
.post-card-title,
.article-title,
.footer-cta-title,
.comments h2,
.kg-header-card-header,
.kg-toggle-heading-text {
    font-family: var(--font-title);
    font-weight: 400;
    font-synthesis-weight: none;
    letter-spacing: var(--messa-tracking-tight);
    color: var(--messa-text-primary);
}

/* Standalone section headings. In-article h2/h3 keep Casper's 2.8/2.4rem —
   the fluid scale is built for page-level titles and overwhelms body copy. */
.comments h2,
.kg-header-card-header {
    font-size: var(--messa-heading);
    line-height: 1.15;
}

.kg-toggle-heading-text {
    font-size: var(--messa-subheading);
    line-height: 1.2;
}


/* 5. Masthead — the floating glass pill
/* ----------------------------------------------------------

The design's header is a frosted pill floating on the paper, not a bar. Casper
paints .gh-head white, transparent-over-cover on the homepage, or accent-colour
on other cover pages; all three are collapsed here into one treatment, and the
pill itself is moved onto .gh-head-inner so .gh-head can stay a transparent
20px/16px frame around it. Rules are scoped to #gh-head where Casper's own
selectors are ID- or layout-qualified. */

.gh-head,
:is(.home-template, .paged, .has-cover) .gh-head,
.has-cover:not(.home-template) .gh-head {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: 10;
    height: auto;
    padding: 20px 16px 0;
    font-size: 1.4rem;
    color: var(--messa-text-primary);
    background-color: transparent;
}

#gh-head .gh-head-inner {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    height: auto;
    max-width: var(--messa-page-max);
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--messa-radius-pill);
    background: rgba(255, 255, 255, 0.55);
    box-shadow: var(--messa-shadow-nav);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
}

#gh-head .gh-head-brand {
    flex: 0 0 auto;
    height: auto;
    padding-left: 8px;
}

/* Casper hides the header wordmark on the homepage under the "Logo on cover"
   layout, because there it expects the logo to sit on the cover instead. This
   design has no cover and the pill always carries the wordmark. */
.is-head-left-logo.home-template .gh-head:not(.is-header-hidden) .gh-head-logo {
    display: block;
}

.is-head-left-logo.home-template .gh-head:not(.is-header-hidden) .gh-head-menu,
.is-head-left-logo .gh-head-menu {
    margin-right: 0;
    margin-left: 0;
}

/* Wordmark at the design's 22px */
.gh-head-logo img {
    display: block;
    max-height: none;
    height: 22px;
    width: auto;
}

/* Nav links become 999px chips. The stacked layout's divider rules and fixed
   row height are neutralised so all three navigation_layout options render the
   same pill — the layout choice only moves the wordmark. */
#gh-head .gh-head-menu {
    flex: 1 1 auto;
    justify-content: flex-end;
    height: auto;
    margin: 0 0 0 auto;
    font-family: var(--font-body);
    font-weight: 400;
}

#gh-head .gh-head-menu::before,
#gh-head .gh-head-menu::after {
    display: none;
}

#gh-head .gh-head-menu .nav {
    gap: 4px;
}

#gh-head .gh-head-menu .nav a,
#gh-head .gh-head-link {
    display: inline-block;
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--messa-text-secondary);
    border-radius: var(--messa-radius-pill);
    transition: color 0.2s, background-color 0.2s;
}

#gh-head .gh-head-menu .nav a:hover,
#gh-head .gh-head-link:hover {
    opacity: 1;
    color: var(--messa-accent);
    background-color: var(--messa-accent-08);
}

#gh-head .gh-head-menu .nav-current a {
    font-weight: 500;
    color: var(--messa-accent);
    background-color: var(--messa-accent-10);
}

#gh-head .gh-head-actions {
    flex: 0 0 auto;
    gap: 4px;
}

#gh-head .gh-head-members {
    gap: 4px;
}

/* Tactile CTA — muted slate, never the accent-as-fill. Scoped to #gh-head so
   Casper's .has-cover variant can't repaint the label. */
#gh-head .gh-head-button,
.has-cover #gh-head .gh-head-button {
    height: auto;
    margin-left: 8px;
    padding: 7px 16px;
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.012em;
    /* !important because the site header Code Injection sets
       `.gh-head a, .gh-head button { color: #111827 !important }`, which paints
       this label dark. See section 12 — that whole injection should be deleted. */
    color: #FFFFFF !important;
    background: var(--messa-button);
    border: 1px solid rgba(30, 40, 60, 0.32);
    border-radius: var(--messa-radius-pill);
    box-shadow: var(--messa-shadow-button);
    text-shadow: var(--messa-textshadow-button);
    transition: filter 150ms ease, transform 80ms ease;
    -webkit-font-smoothing: antialiased;
}

#gh-head .gh-head-button:hover {
    filter: brightness(1.06);
}

#gh-head .gh-head-button:active {
    transform: translateY(0.5px);
}

/* Search sits inside the pill as a chip-sized icon button */
#gh-head .gh-icon-btn {
    width: 30px;
    height: 30px;
    color: var(--messa-text-secondary);
    border-radius: var(--messa-radius-pill);
    transition: color 0.2s, background-color 0.2s;
}

#gh-head .gh-icon-btn:hover {
    opacity: 1;
    color: var(--messa-accent);
    background-color: var(--messa-accent-08);
}

/* The search glyph is an outline, not a solid. !important because the site
   header Code Injection sets `.gh-head svg { fill: #111827 !important }`,
   which floods the circle and turns the magnifier into a black blob. See
   section 12. */
#gh-head .gh-icon-btn svg {
    fill: none !important;
    stroke: currentcolor;
}

.has-cover .gh-head-logo {
    color: var(--messa-text-primary);
}

.has-cover .gh-burger::before,
.has-cover .gh-burger::after {
    background-color: var(--messa-text-secondary);
}

/* Mobile: the closed bar keeps the pill; Casper's full-screen menu drops it and
   falls back to the flat cream sheet, because a blurred pill can't hold a
   full-height scrolling list. */
@media (max-width: 767px) {
    .gh-head,
    :is(.home-template, .paged, .has-cover) .gh-head {
        padding: 16px 12px 0;
    }

    #gh-head {
        height: auto;
    }

    #gh-head .gh-head-inner {
        gap: 0;
        padding: 8px 12px 8px 8px;
    }

    #gh-head .gh-head-brand {
        display: flex;
        flex: 1 1 auto;
        gap: 4px;
        justify-content: space-between;
        height: 40px;
        padding-left: 8px;
    }

    .gh-head-open #gh-head,
    .gh-head-open.has-cover #gh-head {
        padding: 16px 12px;
        background-color: var(--messa-bg);
    }

    .gh-head-open #gh-head .gh-head-inner,
    .gh-head-open.has-cover #gh-head .gh-head-inner {
        display: flex;
        flex-direction: column;
        /* stretch, not centre: the pill centres its row, but in the open sheet
           the rows are full-width blocks — centring here collapses .gh-head-actions
           to its content width and the CTA stops filling the sheet. */
        align-items: stretch;
        gap: 48px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }

    .gh-head-open #gh-head .gh-head-brand {
        flex: 0 0 auto;
        width: 100%;
    }

    .gh-head-open #gh-head .gh-head-menu {
        flex: 1 1 auto;
        justify-content: center;
        margin: 0;
    }

    .gh-head-open #gh-head .nav a {
        padding: 8px 16px;
        font-size: 2.2rem;
        font-weight: 400;
    }

    .gh-head-open #gh-head .gh-head-actions,
    .gh-head-open.has-cover #gh-head .gh-head-actions {
        background-color: var(--messa-bg);
    }

    .gh-head-open #gh-head .gh-head-button {
        width: 100%;
        margin-left: 0;
        font-size: 1.6rem;
    }
}


/* 6. Hero
/* ----------------------------------------------------------

Centred eyebrow pill, serif display title, sans standfirst. The design's
96px/72px vertical rhythm replaces Casper's 19vmin cover padding. */

.site-header-content {
    z-index: 5;
    display: block;
    padding: 96px var(--messa-gutter) 72px;
    text-align: center;
    color: var(--messa-text-primary);
}

.site-header-content.left-aligned {
    padding-bottom: 72px;
    text-align: left;
}

.site-header-content.no-content {
    padding-top: 40px;
    padding-bottom: 24px;
}

/* Archive heroes (tag, author) sit a little tighter than the home hero. */
.site-header-content.is-archive {
    padding-top: 72px;
    padding-bottom: 56px;
}

.site-header-inner {
    position: relative;
    z-index: 5;
}

.site-header-badge {
    display: inline-block;
    margin-bottom: 20px;
    padding: 6px 16px;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.4;
    color: var(--messa-accent);
    background: var(--messa-accent-08);
    border: 1px solid var(--messa-accent-30);
    border-radius: var(--messa-radius-pill);
}

/* Tag archives tint their badge from the tag's own accent colour. */
.site-header-badge[style*="--tag-accent"] {
    color: var(--tag-accent);
    background: color-mix(in srgb, var(--tag-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--tag-accent) 30%, transparent);
}

.site-header-content .site-title {
    max-width: 760px;
    margin: 0 auto 20px;
    padding: 0;
    font-size: var(--messa-display);
    line-height: 1.05;
    text-wrap: pretty;
}

.site-header-content.left-aligned .site-title {
    margin-left: 0;
    font-size: var(--messa-display);
}

/* Standfirst under the hero title. Beats Casper's `.site-title + .site-description`
   on source order at equal specificity. */
.site-header-content .site-description {
    display: block;
    max-width: 560px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--messa-text-secondary);
    text-wrap: pretty;
}

.site-header-content.left-aligned .site-description {
    margin-left: 0;
}

/* Author archive extras */
.author-profile-pic {
    width: 96px;
    height: 96px;
    margin: 0 auto 20px;
    border: 0;
    border-radius: var(--messa-radius-pill);
    background-color: var(--messa-accent-14);
    object-fit: cover;
}

.author-profile-footer {
    margin-top: 20px;
}

.author-profile-location,
.author-profile-meta {
    justify-content: center;
    font-size: 1.4rem;
    color: var(--messa-text-tertiary);
}

.author-profile-social-link,
.author-profile-social-link:hover {
    color: var(--messa-accent);
}

/* A publication cover is not part of this design, but the setting still exists.
   When it is switched on, keep the slate wash rather than Ghost's accent colour
   so the hero stays inside the palette. */
.has-cover .site-header-content {
    min-height: 0;
    padding-top: 120px;
    padding-bottom: 96px;
    background-color: var(--messa-accent);
}

.has-cover .site-header-content .site-title,
.has-cover .site-header-content .site-description {
    color: #FFFFFF;
}

.has-cover .site-header-badge {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 767px) {
    .site-header-content {
        padding: 56px var(--messa-gutter) 48px;
    }

    /* Casper pins these two with !important at this breakpoint. */
    .site-header-content .site-title {
        font-size: var(--messa-display) !important;
    }

    .site-header-content .site-description {
        margin-top: 0 !important;
        font-size: 1.6rem !important;
    }
}


/* 7. Post feed — cards, pills, bylines
/* ----------------------------------------------------------

Layout: a 6-column grid. Normal cards span 2 (three up); the first post on the
home feed spans all 6 and becomes the two-column featured card. Casper's
`dynamic` class, which would make posts 2 and 3 half-width, is not emitted by
this theme's post-card partial. */

.site-main {
    padding-bottom: 96px;
}

.post-feed {
    gap: 28px;
    padding: 0;
}

:is(.tag-template, .author-template) .post-feed {
    margin-top: 0;
}

/* The card surface: translucent white paper, hairline sand border, 16px radius,
   and a 2px lift on hover. overflow:hidden is what makes the image panel's top
   corners follow the card radius. */
.post-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--messa-text-primary);
    background: var(--messa-surface);
    border: 1px solid var(--messa-border);
    border-radius: var(--messa-radius-card);
    box-shadow: var(--messa-shadow-card);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--messa-shadow-card-hover);
}

/* Image panel
/* ---------------------------------------------------------- */

.post-card-image-link {
    position: relative;
    overflow: hidden;
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    justify-content: center;
    height: 200px;
    margin-bottom: 0;
    padding: 0;
    background: var(--messa-panel);
}

/* Casper uses this pseudo-element for two jobs at once: an aspect-ratio spacer
   and the members-only blur. The spacer is not wanted here (the panel has a
   fixed height), so it becomes a pure overlay and only the paywalled variant
   paints anything. */
.post-card-image-link::after {
    position: absolute;
    inset: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.post-card[class*="post-access-"] .post-card-image-link::after {
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
}

/* Feature images fill the whole panel edge to edge, in both card styles. Most
   Messa artwork already ships with its own tinted background, so containing it
   on the sand panel just framed one rectangle inside another. */
.post-card-image {
    position: static;
    inset: auto;
    width: 100%;
    max-width: none;
    height: 100%;
    background: transparent;
    object-fit: cover;
}

/* Posts with no feature image still get a panel. The four bundled Messa
   illustrations rotate by position so a run of image-less posts doesn't repeat
   the same drawing twice in a row. */
.post-card-image-fallback {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: center bottom;
    background-size: contain;
}

.post-card:nth-child(4n+1) .post-card-image-fallback {
    background-image: url("../images/lighthouse-md.webp");
}

.post-card:nth-child(4n+2) .post-card-image-fallback {
    background-image: url("../images/notes.webp");
}

.post-card:nth-child(4n+3) .post-card-image-fallback {
    background-image: url("../images/chalk-md.webp");
}

.post-card:nth-child(4n+4) .post-card-image-fallback {
    background-image: url("../images/calendar-md.webp");
}

.post-card-access {
    font-family: var(--font-body);
    font-size: 1.3rem;
}

/* Card body
/* ---------------------------------------------------------- */

.post-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
}

.post-card-content-link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--messa-text-primary);
}

.post-feed .no-image .post-card-content-link,
.post-card-content-link:hover {
    padding: 0;
    color: var(--messa-text-primary);
}

.post-card-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

/* Tag pill
/* ----------------------------------------------------------

The pill tints itself from --tag-accent, which post-card.hbs sets inline from
the tag's accent colour in Ghost admin. Set a tag's colour there to reproduce
the design's green "Process" and amber "Operations" pills; unset tags stay
slate. The flat rgba declarations are the fallback for engines without
color-mix(). */

.post-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.4;
    color: var(--messa-text-secondary);
}

.post-card-primary-tag {
    --tag-accent: var(--messa-accent);

    display: inline-block;
    padding: 3px 10px;
    color: var(--tag-accent);
    background: var(--messa-accent-08);
    background: color-mix(in srgb, var(--tag-accent) 12%, transparent);
    border: 1px solid var(--messa-accent-30);
    border-color: color-mix(in srgb, var(--tag-accent) 32%, transparent);
    border-radius: var(--messa-radius-pill);
}

.post-card-primary-tag a {
    color: inherit;
}

/* Casper offsets this by 18px to make room for an absolutely-positioned flame
   glyph; inside a pill the glyph goes back in the flow. */
.post-card-featured {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 3px 10px;
    color: var(--messa-amber);
    background: var(--messa-amber-14);
    border: 1px solid var(--messa-amber-30);
    border-radius: var(--messa-radius-pill);
}

.post-card-featured svg {
    position: static;
    width: 12px;
    height: 12px;
}

.post-card-title {
    margin: 0;
    font-size: 2.2rem;
    line-height: 1.2;
    text-wrap: pretty;
}

.post-card-content-link:hover .post-card-title {
    opacity: 1;
    color: var(--messa-accent);
}

.post-card-excerpt {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--messa-text-secondary);
    text-wrap: pretty;
}

/* Byline
/* ----------------------------------------------------------

One line of meta, pinned to the bottom of the card so cards of unequal excerpt
length still align. Casper draws its separators as 2px dots; the design uses a
middot, so the pseudo-element is repurposed rather than duplicated. */

.post-card-meta {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    font-family: var(--font-body);
    font-size: 1.3rem;
    color: var(--messa-text-tertiary);
}

/* Wrap between the items, never inside them. Without this a narrow card breaks
   an author or a date mid-value ("Diego / Sternberg · Aug 4, / 2026") and the
   middot separators stop lining up with what they separate. */
.post-card-meta > * {
    white-space: nowrap;
}

.post-card-meta > * + *:not(script)::before {
    width: auto;
    height: auto;
    content: "·";
    color: var(--messa-text-tertiary);
    background-color: transparent;
    border-radius: 0;
}

.post-card-meta-author {
    gap: 6px;
}

/* The avatar only appears on the featured card — small cards are a single line
   of text in the design. */
.post-card-avatar {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 32px;
    height: 32px;
    color: var(--messa-accent);
    background: var(--messa-accent-14);
    border-radius: var(--messa-radius-pill);
}

.post-card-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The bundled avatar icon hard-codes fill="#FFF" on its path. */
.post-card-avatar svg {
    width: 18px;
    height: 18px;
}

.post-card-avatar svg path {
    fill: currentcolor;
}

/* "Read article →" — featured card only. */
.post-card-cta {
    display: none;
}

/* Featured card
/* ----------------------------------------------------------

Two equal columns, copy left and artwork right. The DOM order is
image-then-content (Casper's partial order), so the columns are swapped with
`order`. 1001px is Casper's own breakpoint for the large card. */

@media (min-width: 1001px) {
    .post-card-large {
        grid-column: span 6;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0;
        align-items: stretch;
        border-top: 0;
        box-shadow: var(--messa-shadow-card-featured);
    }

    .post-card-large:hover {
        box-shadow: var(--messa-shadow-card-hover);
    }

    .post-card-large .post-card-image-link {
        order: 2;
        grid-column: auto;
        align-items: stretch;
        height: auto;
        min-height: 380px;
        margin-bottom: 0;
        padding: 0;
        background: var(--messa-panel-featured);
    }

    .post-card-large .post-card-image {
        width: 100%;
        max-width: none;
        height: 100%;
    }

    .post-card-large .post-card-image-fallback {
        width: 100%;
        height: 100%;
        padding: 32px;
    }

    .post-card-large .post-card-content,
    .post-card-large.no-image .post-card-content {
        order: 1;
        grid-column: auto;
        gap: 16px;
        justify-content: center;
        padding: 48px;
    }

    .post-card-large .post-card-content-link,
    .post-card-large .post-card-header {
        gap: 16px;
    }

    .post-card-large .post-card-tags {
        margin-bottom: 0;
        font-size: 1.3rem;
    }

    .post-card-large .post-card-primary-tag,
    .post-card-large .post-card-featured {
        padding: 4px 12px;
    }

    .post-card-large .post-card-title {
        margin-top: 0;
        font-size: var(--messa-featured-title);
        line-height: 1.15;
    }

    .post-card-large .post-card-excerpt {
        margin-top: 0;
        font-size: 1.6rem;
        line-height: 1.65;
    }

    .post-card-large .post-card-meta {
        gap: 10px;
        margin-top: 4px;
        padding-top: 0;
        font-size: 1.4rem;
    }

    .post-card-large .post-card-meta-author {
        gap: 10px;
    }

    .post-card-large .post-card-avatar {
        display: inline-flex;
    }

    .post-card-large .post-card-author-name {
        color: var(--messa-text-primary);
    }

    /* The author already ends in a 10px gap; a middot there would crowd it. */
    .post-card-large .post-card-meta > .post-card-meta-author + *:not(script)::before {
        display: none;
    }

    .post-card-large .post-card-cta {
        display: inline-block;
        margin-top: 4px;
        font-family: var(--font-body);
        font-size: 1.4rem;
        font-weight: 500;
        color: var(--messa-accent);
    }

    .post-card-large .post-card-cta::after {
        content: " →";
    }
}

/* Feed breakpoints: three up, two up, one up. Casper drops straight from three
   to one at 991px, which leaves the 768-991px range far too sparse. */
@media (max-width: 1000px) {
    .post-feed {
        grid-template-columns: repeat(4, 1fr);
    }

    .post-card {
        grid-column: span 2;
    }

    .post-card-large {
        grid-column: span 4;
    }

    /* Stacked, the featured card keeps its display title and gets a deeper
       panel — a full-width 200px band leaves the artwork stranded. */
    .post-card-large .post-card-image-link {
        height: 260px;
        background: var(--messa-panel-featured);
    }

    .post-card-large .post-card-image-fallback {
        padding: 24px;
    }

    .post-card-large .post-card-title {
        font-size: var(--messa-featured-title);
        line-height: 1.15;
    }

    .post-card-large .post-card-excerpt {
        font-size: 1.6rem;
        line-height: 1.65;
    }
}

@media (max-width: 700px) {
    .post-feed {
        grid-template-columns: 1fr;
        grid-gap: 24px;
    }

    .post-card,
    .post-card-large {
        grid-column: span 1;
    }

    .post-card-content {
        padding: 20px;
    }
}

/* Read more
/* ----------------------------------------------------------

96px of foot, matching the home feed's, so the cards clear the footer's hairline
rule instead of butting into it. .site-main's own bottom padding sits above this
block, never below it, so this block has to pay for its own gap. */

.read-more-wrap {
    padding-bottom: 96px;
}

.read-more-title {
    margin: 0 0 28px;
    font-size: var(--messa-subheading);
    line-height: 1.2;
}

/* Casper already drops the tag pill on these cards, so the byline follows suit
   and keeps just the date and reading time. Three-up on a tablet leaves ~220px
   per card, where the author name is the first thing to wrap. */
.read-more .post-card-meta-author {
    display: none;
}

/* That leaves the date as the first visible item, but Casper's `* + *` separator
   still fires on it — display:none removes a box, not a sibling relationship —
   so the line would open with a stray middot. Same suppression the featured
   card's byline uses. */
.read-more .post-card-meta > .post-card-meta-author + *:not(script)::before {
    display: none;
}

.read-more {
    grid-gap: 28px;
}

/* Casper hides the third related post under 1000px and the second under 700px,
   so a phone gets one card out of three. Stack them instead: a related-posts
   block that silently drops two thirds of itself is worse than a taller one.
   display:flex, not block — that is what .post-card is in section 7.

   Between 700 and 1000px the row is held at three, overriding Casper's drop to
   a 4-column grid. The feed wraps to 2-up there, but the feed has a variable
   number of posts while this block is always exactly three — so Casper's 2 + 1
   would strand the third card in an empty half-row on every single post page,
   rather than occasionally. Narrower cards beat a guaranteed orphan. */
@media (max-width: 1000px) {
    .read-more {
        grid-template-columns: repeat(6, 1fr);
    }

    .read-more .post-card {
        grid-column: span 2;
    }

    .read-more .post-card:nth-child(3) {
        display: flex;
    }
}

@media (max-width: 700px) {
    .read-more {
        grid-template-columns: 1fr;
        grid-gap: 24px;
    }

    .read-more .post-card,
    .read-more .post-card:nth-child(2),
    .read-more .post-card:nth-child(3) {
        display: flex;
        grid-column: span 1;
    }
}


/* 8. Pagination
/* ---------------------------------------------------------- */

.pagination {
    margin-top: 64px;
    font-family: var(--font-body);
}

.pagination a {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--messa-accent);
}

.pagination .page-number {
    font-size: 1.4rem;
    color: var(--messa-text-tertiary);
}


/* 9. Single post & page
/* ----------------------------------------------------------

The design does not specify an article page, so this is the blog surface carried
through: same cream paper, same pills, same slate links, serif display title. */

.article-title {
    font-size: var(--messa-display);
    line-height: 1.05;
    text-wrap: pretty;
}

.article-excerpt {
    font-family: var(--font-body);
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--messa-text-secondary);
    text-wrap: pretty;
}

.article-tag.post-card-tags {
    margin-bottom: 16px;
}

.gh-canvas .article-image img,
.kg-image-card img {
    border-radius: var(--messa-radius-card);
}

.article-byline-meta {
    font-family: var(--font-body);
    color: var(--messa-text-tertiary);
}

.article-byline-meta .author-name {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--messa-text-primary);
}

.author-avatar {
    border-color: var(--messa-bg);
    background-color: var(--messa-accent-14);
}

.author-avatar.author-profile-image path {
    fill: var(--messa-accent);
}

.gh-button-share {
    font-family: var(--font-body);
    color: var(--messa-accent);
    border-color: var(--messa-accent-30);
}

.gh-button-share:hover {
    border-color: var(--messa-accent);
}

.gh-content a {
    color: var(--messa-accent);
}

.gh-content > blockquote:not([class])::before {
    background: var(--messa-accent);
}

/* Members CTA under a post, restyled as one of the design's cards. */
.footer-cta {
    padding: 56px var(--messa-gutter);
}

/* With no related posts to show, the CTA is the last block before the footer and
   inherits the read-more block's job of paying for the 96px gap. */
.site-content > .footer-cta:last-child {
    padding-bottom: 96px;
}

.footer-cta .inner {
    max-width: 720px;
    padding: 48px 40px;
    background: var(--messa-surface);
    border: 1px solid var(--messa-border);
    border-radius: var(--messa-radius-card);
    box-shadow: var(--messa-shadow-card-featured);
}

.footer-cta-title {
    font-size: var(--messa-cta-display);
    line-height: 1.1;
}

.footer-cta-button {
    font-family: var(--font-body);
    color: var(--messa-text-secondary);
    background: #FFFFFF;
    border-color: var(--messa-border);
    border-radius: var(--messa-radius-pill);
    padding: 5px 5px 5px 18px;
}

.footer-cta-button:hover {
    border-color: var(--messa-accent-30);
}

.footer-cta-button span {
    padding: 8px 18px;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.012em;
    color: #FFFFFF !important;
    background: var(--messa-button);
    border: 1px solid rgba(30, 40, 60, 0.32);
    border-radius: var(--messa-radius-pill);
    box-shadow: var(--messa-shadow-button);
    text-shadow: var(--messa-textshadow-button);
}

.comments {
    border-top: 1px solid var(--messa-border);
}


/* 10. Footer
/* ----------------------------------------------------------

Cream, not Casper's near-black. A hairline rule, a brand column on the left and
the two navigation menus as link columns on the right. */

.site-footer {
    margin-top: 0;
    padding: 96px var(--messa-gutter) 16px;
    color: var(--messa-text-secondary);
    background: transparent;
    border-top: 1px solid var(--messa-border);
}

.page-template .site-footer {
    margin-top: 0;
}

.site-footer .inner {
    display: block;
    grid-gap: 0;
    font-family: var(--font-body);
    font-size: 1.3rem;
    color: var(--messa-text-secondary);
}

.site-footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    margin-bottom: 40px;
}

.site-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.site-footer-logo img {
    display: block;
    height: 24px;
    width: auto;
}

.site-footer-tagline {
    margin: 0;
    font-size: 1.4rem;
    color: var(--messa-text-secondary);
}

.site-footer .site-footer-social-links {
    gap: 16px;
    margin-top: 4px;
}

/* No social accounts configured — collapse rather than leave a 16px gap. */
.site-footer-social-links:empty {
    display: none;
}

.site-footer .site-footer-social-links a {
    color: var(--messa-text-secondary);
}

.site-footer .site-footer-social-links a:hover {
    color: var(--messa-accent);
}

.site-footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
}

.site-footer-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.site-footer-column-title {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--messa-text-primary);
}

/* Ghost's {{navigation}} emits <ul class="nav"> with its own list styling. */
.site-footer-column .nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-column .nav li {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.site-footer-column .nav a {
    width: fit-content;
    font-size: 1.4rem;
    color: rgba(10, 10, 11, 0.8);
}

.site-footer-column .nav a:hover {
    color: var(--messa-accent);
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
}

.site-footer .copyright,
.site-footer .copyright a {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--messa-text-secondary);
}

.site-footer .copyright a:hover {
    color: var(--messa-accent);
}

.site-footer a {
    color: var(--messa-text-secondary);
}

.site-footer a:hover {
    color: var(--messa-accent);
    text-decoration: none;
}

.gh-powered-by a {
    font-size: 1.3rem;
    color: var(--messa-text-tertiary);
}

@media (max-width: 767px) {
    .site-footer {
        padding: 64px var(--messa-gutter) 16px;
    }

    .site-footer .inner {
        max-width: none;
        text-align: left;
    }

    .site-footer-top {
        gap: 32px;
    }

    .site-footer-columns {
        gap: 48px;
    }

    .site-footer .copyright,
    .site-footer .copyright a {
        margin-bottom: 0;
        font-size: 1.3rem;
    }
}


/* 11. Colour scheme & reduced motion
/* ----------------------------------------------------------

The design specifies one surface — cream paper — and no dark counterpart, so the
"Dark"/"Auto" colour_scheme options are held to the light palette rather than
half-inheriting Casper's dark mode. Revisit if a dark Messa surface is designed.
Casper's dark rules are qualified with html.dark-mode, which outranks the plain
selectors in sections 3-10, so these have to be restated. */

html.dark-mode {
    background-color: var(--messa-bg);
}

html.dark-mode body {
    color: var(--messa-text-primary);
    background: var(--messa-bg);
}

html.dark-mode img {
    opacity: 1;
}

html.dark-mode body:not(.has-cover) .gh-head {
    background-color: transparent;
}

html.dark-mode .gh-burger::before,
html.dark-mode .gh-burger::after {
    background-color: var(--messa-text-secondary);
}

html.dark-mode .site-header-content {
    color: var(--messa-text-primary);
}

html.dark-mode .post-card-image {
    background: transparent;
}

html.dark-mode :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content, .pagination .page-number) {
    color: var(--messa-text-tertiary);
}

html.dark-mode .post-card-featured {
    color: var(--messa-amber);
}

html.dark-mode :is(.post-card-title, .article-title, .footer-cta-title, .gh-content > [id]) {
    color: var(--messa-text-primary);
}

html.dark-mode :is(.post-card-excerpt, .article-excerpt) {
    color: var(--messa-text-secondary);
}

html.dark-mode .pagination a {
    color: var(--messa-accent);
}

html.dark-mode .author-avatar {
    border-color: var(--messa-bg);
    background-color: var(--messa-accent-14);
}

html.dark-mode .author-profile-image path {
    fill: var(--messa-accent);
}

html.dark-mode .gh-button-share {
    color: var(--messa-accent);
    border-color: var(--messa-accent-30);
}

/* The clouds drift for character, not information — they are the first thing to
   go when the reader has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .messa-cloud {
        animation: none;
    }

    .post-card {
        transition: box-shadow 0.2s ease-out;
    }

    .post-card:hover {
        transform: none;
    }
}

/* The clouds are sized for a desktop hero; below the tablet break they would
   sit under the copy instead of beside it. */
@media (max-width: 767px) {
    .messa-clouds {
        height: 420px;
    }

    .messa-cloud-a {
        top: 120px;
        left: -80px;
        width: 200px;
        opacity: 0.5;
    }

    .messa-cloud-b {
        top: 240px;
        right: -50px;
        width: 130px;
        opacity: 0.45;
    }
}


/* 12. Site Code Injection overrides — DELETE THIS WHOLE SECTION once the
/* injection below is removed from Ghost admin
/* ----------------------------------------------------------

Settings → Code injection → Site header currently contains:

    @import url('...DM+Sans...');
    html, body { font-family: 'DM Sans', ... }

    /* Force header to white so logo stays readable *(/)
    .gh-head,
    .gh-head-inner { background-color: #ffffff !important; }

    .gh-head a,
    .gh-head button,
    .gh-head svg { color: #111827 !important; fill: #111827 !important; }

It predates this design, when the masthead really was a white bar. Against the
floating pill it paints an opaque white band behind the header, flattens every
nav link to #111827, and swaps the body face to DM Sans — which the Messa design
system reserves for the wordmark and explicitly bars from UI copy.

The right fix is deleting that injection; these rules only exist to win against
it in the meantime, and !important is the only thing that can. Each one restates
a value already set in sections 3-5, so delete this section rather than editing
it — otherwise the two copies will drift. */

html,
body {
    font-family: var(--font-body) !important;
}

/* Transparent, so the cream page shows through behind the pill.
   Keyed on the ID, not .gh-head: the injection's own selector is .gh-head, so a
   class-only override ties it on specificity and then loses on source order —
   messa.css is linked before {{ghost_head}}, which is where the injection lands. */
#gh-head {
    background-color: transparent !important;
}

#gh-head .gh-head-inner {
    background-color: rgba(255, 255, 255, 0.55) !important;
}

#gh-head .gh-head-menu .nav a,
#gh-head .gh-head-link,
#gh-head .gh-icon-btn {
    color: var(--messa-text-secondary) !important;
}

#gh-head .gh-head-menu .nav a:hover,
#gh-head .gh-head-link:hover,
#gh-head .gh-icon-btn:hover,
#gh-head .gh-head-menu .nav-current a {
    color: var(--messa-accent) !important;
}

/* The open mobile sheet drops the pill and goes flat cream, so it has to beat
   the rules above as well as the injection. */
@media (max-width: 767px) {
    .gh-head-open #gh-head,
    .gh-head-open.has-cover #gh-head,
    .gh-head-open #gh-head .gh-head-actions,
    .gh-head-open.has-cover #gh-head .gh-head-actions {
        background-color: var(--messa-bg) !important;
    }

    .gh-head-open #gh-head .gh-head-inner,
    .gh-head-open.has-cover #gh-head .gh-head-inner {
        background-color: transparent !important;
    }
}