/**
 * Single blog post. Built to the blog-post.html mock.
 *
 * Scoped under .cul-post so nothing here can reach the listing page, the home
 * page or the Best Of template, all of which share this document's chrome.
 *
 * The mock's palette is mapped onto the theme's own tokens rather than copied
 * as hex. One exception is declared below: the mock's teal link colour has no
 * equivalent token in the theme, so it is defined here, once, instead of being
 * sprinkled through the file as a literal.
 */

.cul-post {
    /* Mapped from the theme, not from the mock's hex values. */
    --p-navy:       var(--cul-brand, #1B3A5C);
    --p-navy-dk:    var(--cul-brand-hover, #152e4a);
    --p-orange:     var(--cul-accent, #E87722);
    --p-orange-dk:  #CF5F0A;
    --p-orange-wash:#FFF6EC;
    --p-orange-line:#F2D3B4;
    --p-head:       var(--cul-brand, #1B3A5C);
    --p-ink:        #2C3E50;
    --p-ink-soft:   #64798C;
    --p-line:       #E3E9EF;
    --p-page:       var(--cul-g50, #EEF4FB);
    --p-surface:    #fff;
    --p-green:      #2F9E63;

    /* The theme has no teal. It is the mock's link/affordance colour and is
       distinct from the orange, which on this site means "claimable offer" and
       must not be spent on ordinary links. Declared once, here. */
    --p-link:       #0F6B7B;

    /* 5px, matching the home page and listing page rebuilds — NOT
       --cul-radius-card (12px), which predates that design language. */
    --p-r: 5px;

    /* The site's shared width token, not the mock's 1280. Read from
       --cul-content-w rather than hardcoded so this page cannot drift from
       the header, the home page and the listing page the way it just did —
       change that one token and all four move together. The gutter is taken
       from --cul-gutter for the same reason: the header pads 24px, so the
       article's left edge lands on the wordmark's at 84px, not 82. */
    --p-col: var(--cul-content-w, 1160px);
    --p-gutter: var(--cul-gutter, 24px);
    --p-tap: 44px;

    font-family: var(--cul-font, 'DM Sans', system-ui, sans-serif);
    color: var(--p-ink);
    background: var(--p-page);
}
.cul-post *, .cul-post *::before, .cul-post *::after { box-sizing: border-box; }
.cul-post h1, .cul-post h2, .cul-post h3, .cul-post h4 {
    color: var(--p-head); letter-spacing: -0.015em; margin: 0;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
}
.cul-post__col { max-width: var(--p-col); margin: 0 auto; padding: 0 var(--p-gutter); }

/* ── hero ──────────────────────────────────────────────────────────── */
.cul-post__hero {
    position: relative; height: 400px;
    display: flex; align-items: flex-end; overflow: hidden;
    background: linear-gradient(135deg, rgba(22,50,79,0.07) 25%, transparent 25%) 0 0/16px 16px, #B9C8D6;
    background-size: cover; background-position: center;
}
.cul-post__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background:
        /* Left-to-right wash, layered over the vertical one. The copy in this
           hero is left-aligned, but the photo behind it is whatever the post
           happens to have — the McBean Park hero puts a bright carved sign
           directly behind the headline. Darkening the left third guarantees
           the headline and byline have a field to sit on no matter what the
           photograph is doing, and it fades out well before the right edge so
           the image is still the image. */
        linear-gradient(90deg, rgba(10,24,38,0.55) 0%, rgba(10,24,38,0.28) 38%, rgba(10,24,38,0) 68%),
        linear-gradient(180deg, rgba(10,24,38,0.34) 0%, rgba(10,24,38,0.16) 26%, rgba(10,24,38,0.62) 62%, rgba(10,24,38,0.90) 100%);
}
/* No featured image. 145 of 173 posts are in this state, so it is the primary
   look of this template rather than a fallback: brand gradient, no scrim. */
.cul-post__hero--noimg {
    background:
        radial-gradient(760px 300px at 12% 8%, rgba(232,119,34,0.34), transparent 62%),
        radial-gradient(620px 320px at 88% 100%, rgba(232,119,34,0.16), transparent 60%),
        linear-gradient(160deg, #1E4266, #122C46);
}
.cul-post__hero--noimg .cul-post__scrim { display: none; }
.cul-post__hero-inner {
    position: relative; z-index: 2; width: 100%;
    max-width: var(--p-col); margin: 0 auto; padding: 0 var(--p-gutter) 42px;
}
.cul-post__title {
    color: #fff !important; font-size: 46px; line-height: 1.12;
    margin: 0 0 14px; max-width: 26ch; font-weight: 700;
}
/* Lede + byline moved out of the hero and into the top of the article, so
   both are now on white rather than over a photo — the colours change with
   them. The hero keeps only the breadcrumb and the headline. */
.cul-post__lede {
    font-size: 19px; line-height: 1.55; color: var(--p-head);
    font-weight: 500; margin: 0 0 14px; max-width: 62ch;
}
/* Byline now sits in the hero, in the slot the breadcrumb used to hold, so it
   is back on the photo and takes hero colours. The in-article variant (white
   background, divider rule) is gone with it. */
.cul-post__byline--hero {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 13.5px; margin: 0 0 14px;
    /* Near-white plus a soft shadow rather than the old #C3D6E6: this line now
       sits higher in the hero than the headline does, where the scrim has not
       yet built up, so it has to hold its own against a bright photo. The
       shadow costs nothing on a dark one. */
    color: #EAF2F8;
    text-shadow: 0 1px 3px rgba(10,24,38,0.65);
    font-weight: 500;
}
.cul-post__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.65); }

/* The hero's own copy block now ends at the headline, so the headline carries
   the bottom spacing the standfirst used to provide. */
.cul-post__hero .cul-post__title { margin-bottom: 0; }

/* ── two column ────────────────────────────────────────────────────── */
.cul-post__two {
    display: grid;
    /* Back to 340. The 365 rail was set while this page was still 1280 wide,
       where it cost the article nothing worth noticing. At the site's 1160 it
       took the measure down to 56 characters, so the 25px goes back to the
       column that reads. */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px; align-items: start; padding: 22px 0 60px;
}
.cul-post__rail { position: sticky; top: 18px; display: grid; gap: 14px; }

/* ── in this story ─────────────────────────────────────────────────── */
.cul-post__story {
    background: var(--p-surface); border: 1px solid var(--p-line);
    border-radius: var(--p-r); padding: 16px 18px; margin: 14px 0 0;
}
.cul-post__story h2 {
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--p-ink-soft); margin: 0 0 12px;
}
.cul-post__biz2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* A single tagged business spans the row — a lone half-width card next to
   dead space reads as a missing second card. */
.cul-post__biz2--one { grid-template-columns: 1fr; }
.cul-post__bcard {
    display: flex; gap: 12px; align-items: center; min-width: 0;
    border: 1px solid var(--p-line); border-radius: var(--p-r);
    padding: 11px 13px; text-decoration: none !important;
}
.cul-post__bcard:hover { border-color: #C9D5DE; background: #FAFCFD; }
.cul-post__bcard-th {
    width: 52px; aspect-ratio: 4 / 3; border-radius: 4px; flex: 0 0 auto;
    background: linear-gradient(135deg, rgba(22,50,79,0.07) 25%, transparent 25%) 0 0/10px 10px, #D7E0E9;
    background-size: cover; background-position: center top;
}
.cul-post__bcard-t { min-width: 0; flex: 1; }
.cul-post__bcard-t h3 { font-size: 14.5px; font-weight: 700; margin: 0; line-height: 1.3; }
.cul-post__bcard-c { display: block; font-size: 12.5px; color: var(--p-ink-soft); margin-top: 2px; }
.cul-post__bcard-go { font-size: 13px; font-weight: 650; color: var(--p-link); white-space: nowrap; }
.cul-post__bcard--offer { border-color: var(--p-orange-line); background: var(--p-orange-wash); }
.cul-post__bcard--offer:hover { background: #FFF6EC; }
.cul-post__bcard-deal {
    display: block; font-size: 12.5px; font-weight: 700;
    color: var(--p-orange-dk); margin-top: 2px;
}
.cul-post__bcard-claim {
    display: inline-flex; align-items: center; white-space: nowrap;
    background: var(--p-orange); color: #fff !important; border-radius: var(--p-r);
    min-height: 36px; padding: 0 14px; font-size: 13px; font-weight: 700;
}
.cul-post__bcard-claim:hover { background: var(--p-orange-dk); }

/* ── article ───────────────────────────────────────────────────────── */
.cul-post__article {
    background: var(--p-surface); border: 1px solid var(--p-line);
    border-radius: var(--p-r); padding: 34px 38px;
}
.cul-post__article p { font-size: 17px; line-height: 1.7; margin: 0 0 20px; color: var(--p-ink); max-width: 72ch; }
.cul-post__article p:last-of-type { margin-bottom: 0; }
.cul-post__article a {
    color: var(--p-link) !important; font-weight: 600;
    border-bottom: 1px solid rgba(15,107,123,0.3); text-decoration: none !important;
}
.cul-post__article a:hover { border-bottom-color: var(--p-link); }
.cul-post__article h2 { font-size: 26px; font-weight: 700; margin: 34px 0 12px; line-height: 1.25; max-width: 34ch; }
.cul-post__article h2:first-child { margin-top: 0; }
.cul-post__article h3 { font-size: 20px; font-weight: 700; margin: 28px 0 10px; line-height: 1.3; max-width: 40ch; }
.cul-post__article ul, .cul-post__article ol { margin: 0 0 20px; padding-left: 22px; max-width: 72ch; }
.cul-post__article li { font-size: 17px; line-height: 1.7; margin: 0 0 8px; }
.cul-post__article li::marker { color: var(--p-link); }
.cul-post__article blockquote {
    margin: 28px 0; padding: 4px 0 4px 22px;
    border-left: 3px solid var(--p-orange); max-width: 64ch;
}
/* The quote typography sits on the blockquote itself, not only on a child
   <p>. Existing posts write blockquotes both ways — the classic editor emits
   bare text — and a rule scoped to `blockquote p` silently misses every bare
   one, leaving it at whatever size it inherited (26px, in practice). */
.cul-post .cul-post__article blockquote,
.cul-post .cul-post__article blockquote p {
    font-size: 21px; line-height: 1.45; color: var(--p-head); font-weight: 650;
}
.cul-post__article blockquote p { margin: 0; }
.cul-post__article blockquote p + p { margin-top: 14px; }
.cul-post__article blockquote cite {
    display: block; margin-top: 10px; font-size: 14px;
    color: var(--p-ink-soft); font-style: normal; font-weight: 600;
}
.cul-post__article figure { margin: 28px 0; }
.cul-post__article figure img { width: 100%; height: auto; border-radius: var(--p-r); display: block; }
.cul-post__article figcaption { margin-top: 9px; font-size: 13.5px; color: var(--p-ink-soft); max-width: 70ch; }
.cul-post__article hr { border: 0; border-top: 1px solid var(--p-line); margin: 32px 0; }
.cul-post__article img { max-width: 100%; height: auto; }
.cul-post__source { font-size: 14.5px; color: var(--p-ink-soft); font-style: italic; padding-top: 6px; }

.cul-post__share {
    display: flex; align-items: center; gap: 10px;
    margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--p-line);
}
.cul-post__share span { font-size: 13px; color: var(--p-ink-soft); font-weight: 600; }
.cul-post__share a {
    width: 36px; height: 36px; border: 1px solid var(--p-line); border-radius: var(--p-r);
    display: flex; align-items: center; justify-content: center;
    color: var(--p-ink-soft) !important; border-bottom: 1px solid var(--p-line) !important;
}
.cul-post__share a:hover { color: var(--p-link) !important; border-color: #C9D5DE !important; }

/* ── offer band ────────────────────────────────────────────────────── */
.cul-post__offer {
    display: grid; grid-template-columns: 260px 1fr; margin: 14px 0 0;
    background: var(--p-orange-wash); border: 1px solid var(--p-orange-line);
    border-radius: var(--p-r); overflow: hidden;
}
.cul-post__offer-shot {
    min-height: 180px;
    background: linear-gradient(135deg, rgba(22,50,79,0.07) 25%, transparent 25%) 0 0/14px 14px, #D7E0E9;
    background-size: cover; background-position: center top;
}
.cul-post__offer-b { padding: 22px 24px; }
.cul-post__offer-k {
    display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--p-orange);
}
.cul-post__offer-k .cul-post__kdot { width: 7px; height: 7px; border-radius: 50%; background: var(--p-orange); }
.cul-post__offer h2 { font-size: 22px; font-weight: 700; margin: 0 0 5px; line-height: 1.25; }
.cul-post__offer-who { font-size: 14px; color: var(--p-head); font-weight: 650; margin: 0 0 12px; }
.cul-post__offer-who span { color: var(--p-ink-soft); font-weight: 400; }
.cul-post__offer-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-orange); color: #fff !important; border-radius: var(--p-r);
    min-height: 48px; padding: 0 26px; font-size: 15px; font-weight: 700;
    text-decoration: none !important;
}
.cul-post__offer-btn:hover { background: var(--p-orange-dk); }

/* ── more in category ──────────────────────────────────────────────── */
.cul-post__below { margin: 14px 0 0; }
.cul-post__below-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin: 0 0 14px;
}
.cul-post__below-head h2 { font-size: 21px; font-weight: 700; margin: 0; }
.cul-post__below-head a { color: var(--p-link) !important; font-weight: 650; font-size: 14px; text-decoration: none !important; }
.cul-post__grid2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    /* Stretch, not start. Card titles are one or two lines depending on the
       headline, so `start` left the pair with uneven bottoms on almost every
       post. The card is a flex column below, so the body absorbs the
       difference and the two cards always end level. */
    align-items: stretch;
}
.cul-post__pcard {
    background: var(--p-surface); border: 1px solid var(--p-line);
    border-radius: var(--p-r); overflow: hidden; text-decoration: none !important;
    display: flex; flex-direction: column;
}
.cul-post__pcard-b { flex: 1; }
.cul-post__pcard:hover { border-color: #C9D5DE; box-shadow: 0 2px 10px rgba(22,50,79,0.08); }
.cul-post__pcard-img {
    aspect-ratio: 4 / 3; display: block; flex: 0 0 auto;
    background: linear-gradient(135deg, rgba(22,50,79,0.07) 25%, transparent 25%) 0 0/14px 14px, #D7E0E9;
    background-size: cover; background-position: center top;
}
/* display:block is load-bearing, not decorative. These are <span>s because
   they live inside an <a>, and an inline box drops vertical padding and
   margin on the floor — which is exactly what pinned the card text to the
   bottom of the photo. Every span in this file that carries its own spacing
   is blockified for the same reason. */
.cul-post__pcard-b { display: block; padding: 16px 18px; }
.cul-post__pcard-k {
    display: block;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--p-orange); margin: 0 0 6px;
}
.cul-post__pcard h3 { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 4px; }
.cul-post__pcard-d { display: block; font-size: 12.5px; color: var(--p-ink-soft); margin-top: 2px; }

/* ── rail ──────────────────────────────────────────────────────────── */
.cul-post__rcard {
    background: var(--p-surface); border: 1px solid var(--p-line);
    border-radius: var(--p-r); padding: 18px 20px;
}
.cul-post__rcard > h2 {
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--p-ink-soft); margin: 0 0 12px;
}
.cul-post__olink {
    display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
    padding: 12px 0; border-top: 1px solid var(--p-line); text-decoration: none !important;
}
.cul-post__olink:first-of-type { border-top: 0; padding-top: 0; }
.cul-post__olink-th {
    width: 52px; aspect-ratio: 4 / 3; border-radius: 4px;
    background: linear-gradient(135deg, rgba(22,50,79,0.07) 25%, transparent 25%) 0 0/10px 10px, #D7E0E9;
    background-size: cover; background-position: center top;
}
.cul-post__olink-deal { font-size: 14.5px; font-weight: 700; color: var(--p-head); line-height: 1.3; display: block; }
.cul-post__olink-who { font-size: 12.5px; color: var(--p-ink-soft); display: block; margin-top: 1px; }
.cul-post__olink-ends { font-size: 12px; color: var(--p-orange-dk); font-weight: 650; display: block; margin-top: 2px; }
.cul-post__olink-arrow { color: #C3CED8; flex: 0 0 auto; }
.cul-post__olink:hover .cul-post__olink-deal { color: var(--p-link); }
.cul-post__olink:hover .cul-post__olink-arrow { color: var(--p-link); }
.cul-post__rall {
    display: block; margin-top: 14px; padding-top: 13px;
    border-top: 1px solid var(--p-line); font-size: 13.5px;
    font-weight: 650; color: var(--p-link) !important; text-decoration: none !important;
}


/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .cul-post__two { grid-template-columns: 1fr; }
    .cul-post__rail { position: static; }
    .cul-post__biz2, .cul-post__grid2 { grid-template-columns: 1fr; }
    .cul-post__offer { grid-template-columns: 1fr; }
    .cul-post__offer-shot { min-height: 150px; aspect-ratio: 16 / 9; }
    .cul-post__hero { height: 290px; }
    .cul-post__title { font-size: 29px; }
    .cul-post__article { padding: 26px 22px; }
}
@media (max-width: 480px) {
    .cul-post__hero { height: 260px; }
    .cul-post__title { font-size: 26px; }
    .cul-post__article { padding: 22px 18px; }
    .cul-post__article p, .cul-post__article li { font-size: 16.5px; }
    .cul-post__col, .cul-post__hero-inner { padding-left: 16px; padding-right: 16px; }
    /* The claim button is the point of the band — never let it shrink below
       the tap target. */
    .cul-post__offer-btn { width: 100%; min-height: var(--p-tap); }
}

/* ── Specificity floor ──────────────────────────────────────────────────
   Elementor's global kit ships `.elementor-kit-83 h1 { font-size:42px }` and
   siblings for h2/h3/h4. Those are (0,1,1); a bare `.cul-post__title` is
   (0,1,0) and loses, which is how the headline rendered at 42px instead of
   46. Every heading rule below is therefore prefixed with `.cul-post` to
   reach (0,2,0) and win outright — the same class of bug as the parent
   theme's reset repainting links pink. Values are unchanged from above;
   this block only restates them at a weight the kit cannot beat. */
.cul-post .cul-post__title { font-size: 46px; line-height: 1.12; font-weight: 700; }
.cul-post .cul-post__story h2 { font-size: 11px; font-weight: 700; }
.cul-post .cul-post__bcard-t h3 { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.cul-post .cul-post__article h2 { font-size: 26px; font-weight: 700; line-height: 1.25; }
.cul-post .cul-post__article h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.cul-post .cul-post__offer h2 { font-size: 22px; font-weight: 700; line-height: 1.25; }
.cul-post .cul-post__below-head h2 { font-size: 21px; font-weight: 700; }
.cul-post .cul-post__pcard h3 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.cul-post .cul-post__rcard > h2 { font-size: 12px; font-weight: 700; }
.cul-post .cul-newsletter-signup__title { font-size: 17px; font-weight: 700; }

@media (max-width: 960px) {
    .cul-post .cul-post__title { font-size: 29px; }
    .cul-post .cul-post__article h2 { font-size: 23px; }
}
@media (max-width: 480px) {
    .cul-post .cul-post__title { font-size: 26px; }
}

/* ── Newsletter in the rail ─────────────────────────────────────────────
   cul_render_newsletter_signup() ships its own bordered white card, and the
   rail wrapped it in a second one — a box inside a box. The wrapper is gone
   from the template; this restyles the component itself into one box: grey
   fill, 1px navy border.

   Every rule is scoped under .cul-post so the home page's instance of the
   same component keeps its existing look. Do not lift these into
   assets/css/newsletter-signup.css — that file is shared. */
.cul-post .cul-newsletter-signup {
    background: var(--p-page) !important;
    border: 1px solid var(--p-navy) !important;
    border-radius: var(--p-r) !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.cul-post .cul-newsletter-signup__k {
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--p-orange) !important; margin: 0 0 7px;
}
.cul-post .cul-newsletter-signup__title { margin: 0 0 4px; color: var(--p-head) !important; }
.cul-post .cul-newsletter-signup__sub { margin: 0; font-size: 13.5px; color: var(--p-ink-soft) !important; }
/* Stacked, not side by side: the rail is 340px wide, and splitting that
   between a field and a button left the field too narrow to show a typed
   address. Column-scoped to .cul-post — the home page instance is wider and
   keeps its inline layout. */
.cul-post .cul-newsletter-signup__form {
    display: flex; flex-direction: column; gap: 8px; margin: 13px 0 0;
}
.cul-post .cul-newsletter-signup__input {
    width: 100%; min-height: var(--p-tap);
    padding: 0 13px; border: 1px solid var(--p-line); border-radius: var(--p-r);
    font: inherit; font-size: 14.5px; color: var(--p-head); background: #fff;
}
.cul-post .cul-newsletter-signup__btn {
    width: 100%; border: 0; background: var(--p-navy); color: #fff !important;
    border-radius: var(--p-r); min-height: var(--p-tap); padding: 0 18px;
    font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
}
.cul-post .cul-newsletter-signup__btn:hover { background: var(--p-navy-dk); }
.cul-post .cul-newsletter-signup__fine { margin: 9px 0 0; font-size: 12px; color: var(--p-ink-soft) !important; }
.cul-post .cul-newsletter-signup__msg { margin: 10px 0 0; font-size: 13px; }
.cul-post .cul-newsletter-signup__msg--success {
    background: #EEF7F2; border: 1px solid #CBE8D8; border-radius: var(--p-r);
    padding: 11px 13px; color: #22694A !important;
}
.cul-post .cul-newsletter-signup__msg--error { color: #B3261E !important; }

@media (max-width: 480px) {
    .cul-post .cul-post__lede { font-size: 17.5px; }
}

/* ── Lede size ──────────────────────────────────────────────────────────
   `.cul-post__article p` is (0,1,1) and the lede is a <p> inside it, so a
   bare `.cul-post__lede` (0,1,0) lost and rendered at body size. Same
   specificity trap as the Elementor kit headings above. */
.cul-post .cul-post__article .cul-post__lede {
    font-size: 19px; line-height: 1.55; font-weight: 500;
    color: var(--p-head); max-width: 62ch;
    /* First element in the card now that the byline moved to the hero, so it
       owns the separation from the body copy that follows. */
    margin: 0 0 20px; padding-bottom: 20px;
    border-bottom: 1px solid var(--p-line);
}

/* ── Section hover ──────────────────────────────────────────────────────
   The 1px border lift used on the listing page's cards (#C9D5DE), applied to
   this page's section-level blocks so the whole site behaves the same way on
   hover. Colour only — no movement, and no shadow on the big reading card,
   which would draw the eye away from the text while you are reading it. */
.cul-post__article,
.cul-post__story,
.cul-post__rcard,
.cul-post .cul-newsletter-signup {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cul-post__article:hover,
.cul-post__story:hover,
.cul-post__rcard:hover { border-color: #C9D5DE; }

/* The offer band and the directory block are already coloured blocks, so
   they lift within their own palette rather than to the neutral grey. */
.cul-post__offer { transition: border-color 0.15s ease; }
.cul-post__offer:hover { border-color: #E8A96A; }
.cul-post .cul-newsletter-signup:hover { border-color: var(--p-navy-dk) !important; }

/* ── Author box ─────────────────────────────────────────────────────────
   The city's ambassador, directly under the article. Same card language as
   everything else on this page, with the monogram fallback carrying the
   brand gradient so a missing avatar still looks deliberate. */
.cul-post__author {
    /* Avatar on the right, done with row-reverse rather than by moving the
       markup. The picture stays first in the DOM, which is harmless here
       because it is decorative either way — the <img> carries alt="" and the
       monogram fallback is aria-hidden, so nothing announces ahead of the
       name. */
    display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 18px;
    background: var(--p-surface); border: 1px solid var(--p-line);
    border-radius: var(--p-r); padding: 22px 24px; margin: 14px 0 0;
    transition: border-color 0.15s ease;
}
.cul-post__author:hover { border-color: #C9D5DE; }
.cul-post__author-pic {
    width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; display: block;
}
.cul-post__author-pic--initials {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1B3A5C 0%, #2C5A7A 55%, #E87722 100%);
    color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 0.02em;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
}
.cul-post__author-body { min-width: 0; flex: 1; }
.cul-post__author-k {
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--p-ink-soft); margin: 0 0 6px;
}
.cul-post .cul-post__author-name {
    font-size: 19px; font-weight: 700; margin: 0 0 2px; line-height: 1.25;
    color: var(--p-head);
}
.cul-post__author-role {
    font-size: 13px; color: var(--p-orange); font-weight: 650; margin: 0 0 9px;
}
.cul-post__author-bio {
    font-size: 15px; line-height: 1.6; color: var(--p-ink); margin: 0; max-width: 60ch;
}
@media (max-width: 480px) {
    .cul-post__author { gap: 14px; padding: 18px; }
    .cul-post__author-pic { width: 58px; height: 58px; }
    .cul-post__author-pic--initials { font-size: 20px; }
}

/* Contact link sits on its own line under the bio — it is an action, not part
   of the sentence, and inline it read as an afterthought. */
.cul-post__author-contact {
    display: block; margin-top: 8px;
    font-size: 14px; font-weight: 650;
    color: var(--p-link) !important; text-decoration: none !important;
}
.cul-post__author-contact:hover { text-decoration: underline !important; }

/* ── Ambassador profile (author.php) ────────────────────────────────────
   Reuses the post's card language on purpose, so the profile reads as part
   of the same publication rather than a separate microsite. */
.cul-amb__hero { height: 260px; }
.cul-amb__eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: #FFD0A3; margin: 0 0 10px;
}
.cul-post .cul-amb__name { font-size: 42px; margin: 0; }

.cul-amb__head {
    display: flex; align-items: flex-start; gap: 20px;
    padding-bottom: 22px; margin-bottom: 22px;
    border-bottom: 1px solid var(--p-line);
}
.cul-amb__pic {
    width: 104px; height: 104px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; display: block;
}
.cul-amb__pic--initials {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1B3A5C 0%, #2C5A7A 55%, #E87722 100%);
    color: #fff; font-size: 34px; font-weight: 700;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
}
.cul-amb__headtext { min-width: 0; flex: 1; }
.cul-post .cul-amb__h2 { font-size: 22px; font-weight: 700; margin: 0 0 2px; }

.cul-amb__socials {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.cul-amb__socials a {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px;
    border: 1px solid var(--p-line); border-radius: 99px;
    font-size: 13.5px; font-weight: 650;
    color: var(--p-head) !important; text-decoration: none !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cul-amb__socials a:hover { border-color: #C9D5DE; background: #FAFCFD; }

.cul-amb__story p { font-size: 17px; line-height: 1.7; margin: 0 0 18px; color: var(--p-ink); max-width: 68ch; }
.cul-amb__story p:last-child { margin-bottom: 0; }
.cul-amb__empty { color: var(--p-ink-soft) !important; font-style: italic; }
.cul-amb__empty a { color: var(--p-link) !important; font-style: normal; font-weight: 650; }

.cul-amb__cta { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--p-line); }
.cul-amb__btn { text-decoration: none !important; }

@media (max-width: 620px) {
    .cul-amb__head { flex-direction: column; gap: 14px; }
    .cul-amb__pic { width: 84px; height: 84px; }
    .cul-amb__pic--initials { font-size: 28px; }
    .cul-post .cul-amb__name { font-size: 28px; }
}