/* This file contains modified/alternative/new styles specifically for
   SJM's theme. This could be further improved by incorporating its contents
   into screen.css, minifying that css file to /assets/built/screen.css which
   is imported in default.hbs, and can also be improved by adopting more formal
   css methodologies (BEM, OOCSS, etc.) and cleaning up redundant styles.
   
   - DB May 2022 */


/* Modified site logo from default */
.sjm-site-logo {
    width: 70vw;
    max-width: 1000px;
}
@media (max-width: 768px) {
    .sjm-site-logo {
        width: 90vw;
    }
}


/* Custom style for social media sharing block in share-block.hbs */
.share-block {
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin: 0 -8px 0 10px;
}
.share-block p, .share-block a {
    display: block;
    transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;
    margin-right: 8px;
}
.share-block p {
    min-width: 45px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}
.share-block a svg {
    width: 2em;
    height: auto;
}

@media (max-width: 650px) {
    .article-byline .share-block {
        flex-direction: column;
        justify-content: center;
    }
    .share-block p, .share-block a {
        margin-bottom: 4px;
    }
}

/* Custom style for wrapper at post footer holding social and claps */
.share-and-clap-wrapper {
    width: 100%;
    margin: 4rem auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}


/* Custom style for tips module */
.tips-wrapper {
    background: rgba(45, 10, 107, 0.05);
    border: 0.5px solid rgba(45, 10, 107, 0.15);
    border-left: 4px solid #2D0A6B;
    border-radius: 0 12px 12px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
    padding: 2rem 2.4rem;
    margin-top: 5rem;
}

.tips-wrapper .tips-text {
    font-size: 1.8rem;
    line-height: 1.6em;
    margin: 0;
    padding: 0;
}

.tips-wrapper .tips-text strong {
    font-weight: 600;
}

.tips-wrapper .tips-btn {
    display: inline-block;
    flex-shrink: 0;
    padding: 10px 20px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    background: #2D0A6B;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
}

.tips-wrapper .tips-btn:hover {
    background: #3d0e92;
}

@media (max-width: 650px) {
    .tips-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
    }

    .tips-wrapper .tips-text {
        font-size: 1.7rem;
    }
}

/* Donation callout bounce animation */
@keyframes tips-bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-8px); }
    50%  { transform: translateY(0); }
    65%  { transform: translateY(-4px); }
    80%  { transform: translateY(0); }
    90%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

.tips-wrapper.is-bouncing {
    animation: tips-bounce 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ────────────────────────────────────────────────────────────────────
   SECTION BANNERS — DISCOVER / I'M HUNGRY pills.
   Background + foreground are driven by CSS custom properties set
   on :root by the inline pair-picker in home.hbs. The colour pair
   changes on every page load. Fallback values match the v141
   "Option B" mockup so a stale browser cache or disabled JS still
   renders a sensible default rather than naked black.
   ──────────────────────────────────────────────────────────────────── */
.sjm-section-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 4rem 0 2rem;       /* big space above (new section), tight below (hug feed) */
    padding: 21px 28px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sjm-banner-bg, #2D0A6B);
    color:      var(--sjm-banner-fg, #FFFFFF);
    /* h2 reset — child elements own their own sizing */
    font-size: 1rem;
    line-height: 1;
}
.sjm-banner-discover {
    --sjm-banner-bg: #000000;
    --sjm-banner-fg: #FFFFFF;
}
.sjm-banner-discover .sjm-banner-tagline {
    color: #00A878;
}
.sjm-banner-hungry {
    --sjm-banner-bg: #000000;
    --sjm-banner-fg: #FFFFFF;
}
.sjm-banner-hungry .sjm-banner-tagline {
    color: #F5C518;
}
.sjm-banner-image {
    display: block;
    height: 34px;
    width: auto;
    max-width: 60%;             /* prevents a wide SVG from squeezing the tagline */
    flex: 0 0 auto;
}
.sjm-banner-tagline {
    font-size: 1.3rem;          /* 13px — tagline is a kicker, not body */
    font-weight: 700;
    letter-spacing: 0.18em;
    white-space: nowrap;
    text-align: right;
    flex: 0 1 auto;
    min-width: 0;
}

/* Author Spotlight sibling spacing — same rhythm as the banners
   so the page reads as a consistent stack of blocks */
.author-spotlight {
    margin: 4rem 0;
}

/* Tablet (≤1000px) — slightly tighter rhythm, smaller heading */
@media (max-width: 1000px) {
    .sjm-section-banner {
        padding: 19px 22px;
        margin: 3rem 0 1.5rem;
        border-radius: 11px;
        gap: 20px;
    }
    .sjm-banner-image  { height: 30px; }
    .sjm-banner-tagline {
        font-size: 1.2rem;
        letter-spacing: 0.15em;
    }
    .author-spotlight { margin: 3rem 0; }
}

/* Small tablet / large phone (≤700px) */
@media (max-width: 700px) {
    .sjm-section-banner {
        padding: 17px 18px;
        margin: 2.5rem 0 1.25rem;
        border-radius: 10px;
        gap: 16px;
    }
    .sjm-banner-image  { height: 26px; }
    .sjm-banner-tagline {
        font-size: 1.1rem;
        letter-spacing: 0.12em;
    }
    .author-spotlight { margin: 2.5rem 0; }
}

/* Phone (≤500px) — drop the tagline; centre the SVG in its banner.
   Below this width "FRESH STORIES WORTH YOUR TIME" would crowd the
   heading; colour alone is enough to differentiate the two sections. */
@media (max-width: 500px) {
    .sjm-section-banner {
        padding: 15px 16px;
        margin: 2rem 0 1rem;
        justify-content: center;
        gap: 0;
    }
    .sjm-banner-image  {
        height: 22px;
        max-width: 100%;
    }
    .sjm-banner-tagline { display: none; }
    .author-spotlight   { margin: 2rem 0; }
}

/* ────────────────────────────────────────────────────────────────────
   Primary tag chip is now an <a> sibling of .post-card-content-link
   (moved out so it can be its own link to the tag page without
   nesting inside the parent anchor). These rules preserve the
   visual spacing that the chip had when it lived inside
   .post-card-header.
   ──────────────────────────────────────────────────────────────────── */
a.post-card-primary-tag {
    display: inline-block;
    align-self: flex-start;   /* don't stretch across the flex column */
    margin-top: 20px;         /* takes over the spacing the header used to provide */
    text-decoration: none;
}
a.post-card-primary-tag:hover {
    text-decoration: underline;
}
/* When the tag is present, suppress the header's top margin so total
   spacing between the top of the card content and the title matches
   what it was before the tag was hoisted out. */
.post-card-content > .post-card-primary-tag + .post-card-content-link .post-card-header {
    margin-top: 0;
}
/* No-image cards previously had margin-top: 0 on the header — keep the
   tag flush in that case too. */
.no-image .post-card-content > .post-card-primary-tag {
    margin-top: 0;
}

/* Custom style for post break images in index.hbs including feature post card grid management */
.cover-story-image {
    margin: 8vmin auto 4vmin auto;
    height: 8.75vw;
    max-height: 150px;
    min-height: 50px;
    width: 35vw;
    max-width: 500px;
    min-width: 200px;
}


/* Author (team) page and card styles */
.author-page-header {
    text-align: center;
    font-size: 3.8rem;
}
.author-feed {
    position: relative;
    display: grid;
    grid-gap: 6.5vmin;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 4vmin 0;
    margin: 0 auto;
}
.author-feed.list {
    row-gap: 6vmin;
    max-width: 940px;
    margin: 2vmin auto 0;
}
.author-card {
    position: relative;
    flex: 1 1 301px;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    background-size: cover;
    word-break: break-word;
}
.author-card-image-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
}
.author-card-image {
    display: block;
    min-width: 200px;
    min-height: 200px;
    object-fit: cover;
}
.author-card-avatar {
    display: block;
    background-color: var(--color-lightgrey);
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
.author-card-image-link {
    position: relative;
    display: block;
    overflow: hidden;
}
.author-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.author-card-content-link {
    position: relative;
    display: block;
    color: var(--color-darkgrey);
}
.author-card-header {
    margin: 2.25rem 0 0.75rem 0;
    font-size: 2.4rem;
    text-align: center;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
    width: 200px;
}
.author-card-bio {
    width: 200px;
    color: color-mod(var(--color-midgrey) l(-8%));
    font-family: var(--font-serif);
    font-size: 1.65rem;
    line-height: 1.3;
    margin: 0;
}
@media (max-width: 1000px) {
    .author-feed {
        grid-template-columns: 1fr 1fr;
    }
    .author-card-header {
        font-size: 2.1rem;
    }
}
@media (max-width: 700px) {
    .author-feed {
        grid-template-columns: 1fr;
    }
    .author-card-header {
        margin: 1.75rem 0 0.75rem 0;
    }
}
@media (max-width: 600px) {
    .author-page-header {
        font-size: 2.4rem;
    }
    .author-card-header {
        font-size: 1.9rem;
    }
}


/* Tag card styles */
.tag-card {
    position: relative;
    flex: 1 1 301px;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    background-size: cover;
    word-break: break-word;
}
.tag-card-image-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
}
.tag-card-image {
    display: block;
    min-width: 200px;
    min-height: 200px;
    object-fit: cover;
}
.tag-card-image-link {
    position: relative;
    display: block;
    border-radius: 3px;
}
.tag-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.tag-card-content-link {
    position: relative;
    display: block;
    color: var(--color-darkgrey);
}
.tag-card-header {
    margin: 2.25rem 0 0.75rem 0;
    font-size: 2.4rem;
    text-align: center;
    transition: color 0.2s ease-in-out;
    font-weight: bold;
    width: 200px;
}
.tag-card-description {
    max-width: 200px;
    color: color-mod(var(--color-midgrey) l(-8%));
    font-family: var(--font-serif);
    font-size: 1.6rem;
    line-height: 1.3;
    margin: 0;
}
.tags-feed {
    position: relative;
    display: grid;
    grid-gap: 6.5vmin;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 4vmin 0;
    margin: 0 auto;
}
@media (max-width: 1000px) {
    .tags-feed {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 700px) {
    .tags-feed {
        grid-template-columns: 1fr;
    }
    .tag-card-header {
        margin: 1.75rem 0 0.75rem 0;
    }
}
@media (max-width: 600px) {
    .tag-card-header {
        font-size: 2.1rem;
    }
}


/* Tags page styles */
.tags-page-header {
        text-align: center;
        font-size: 3.8rem;
}
.tags-list-wrapper {
    padding: 4vmin 0;
    margin: 0 auto;
    width: 100%;
}
.tags-list {
    column-count: 3;
    column-gap: 2rem;
    column-rule-width: 1rem;
    column-rule-style: none;
}
.tags-list-item {
    list-style:  none;
    margin: 0 0 2.6rem 0;
    text-align: center;
}
.tags-link {
    font-size: 2.6rem;
}
@media (max-width: 1000px) {
    .tags-list {
        column-count: 2;
    }
    .tags-list-wrapper {
        width: 600px;
    }
}
@media (max-width: 700px) {
    .tags-list {
        column-count: 1;
    }
    .tags-list-item {
        display: block;
        text-align: center;
        margin: 0 0 3.6rem 0;
    }
    .tags-list-wrapper {
        width: 400px;
    }
}
@media (max-width: 600px) {
    .tags-page-header {
        font-size: 2.4rem;
    }
    .tags-list-wrapper {
        width: 66vw;
    }
    .tags-link {
        font-size: 2rem;
    }
}

/* Footer CTA spacing — kept from prior nav block. The nav itself is now
   styled at the bottom of this file (NAV REDESIGN v128). */
.footer-cta-button {
    margin: 0 0 30px 0;
}

/* ─── Horizontal overflow guard ───────────────────────────────────
   overflow-x: hidden on html + body is the standard fix for preventing
   horizontal scroll. Unlike overflow-x: clip (which only clips paint
   without creating a scroll container), hidden establishes a proper BFC
   scroll container so the layout itself is constrained to the viewport
   width — nothing can drag the cover section sideways.
   ────────────────────────────────────────────────────────────────── */
html, body { overflow-x: hidden; }

/* ============================================================
   Compact contributor grid (Contributors section only)
   ============================================================ */

/* Center each card's content so avatar + name sit neatly */
#contributors-feed .author-card {
    min-height: unset;
    align-items: center;
    text-align: center;
}

/* Smaller circular avatar */
#contributors-feed .author-card-image-wrapper {
    width: 80px;
    height: 80px;
}

#contributors-feed .author-card-image {
    min-width: 80px;
    min-height: 80px;
}

#contributors-feed .author-card-avatar {
    width: 80px;
    height: 80px;
}

/* Tighter name label */
#contributors-feed .author-card-header {
    font-size: 1.3rem;
    margin: 0.6rem 0 0.2rem;
    width: 80px;
    font-weight: 600;
    line-height: 1.2;
}

/* Desktop: 6 columns, tighter gap */
#contributors-feed {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 2.5vmin;
}

/* Large tablet / small laptop */
@media (max-width: 1000px) {
    #contributors-feed {
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 3vmin;
    }
}

/* Tablet */
@media (max-width: 700px) {
    #contributors-feed {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 3.5vmin;
    }
}

/* Large phone */
@media (max-width: 500px) {
    #contributors-feed {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 4vmin;
    }
}

/* Small phone */
@media (max-width: 360px) {
    #contributors-feed {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================
   Editors section — 5-column compact layout
   ============================================================ */
#editors-feed {
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 3vmin;
}

#editors-feed .author-card {
    align-items: center;
    text-align: center;
    min-height: unset;
}

#editors-feed .author-card-image-wrapper {
    width: 120px;
    height: 120px;
}

#editors-feed .author-card-image {
    min-width: 120px;
    min-height: 120px;
}

#editors-feed .author-card-avatar {
    width: 120px;
    height: 120px;
}

#editors-feed .author-card-header {
    font-size: 1.7rem;
    margin: 0.8rem 0 0.3rem;
    width: 120px;
    line-height: 1.2;
}

/* Override the generic .author-feed breakpoints for editors */
@media (max-width: 1000px) {
    #editors-feed {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 700px) {
    #editors-feed {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 460px) {
    #editors-feed {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================
   Contributors — increase avatar and text size
   ============================================================ */
#contributors-feed .author-card-image-wrapper {
    width: 110px;
    height: 110px;
}

#contributors-feed .author-card-image {
    min-width: 110px;
    min-height: 110px;
}

#contributors-feed .author-card-avatar {
    width: 110px;
    height: 110px;
}

#contributors-feed .author-card-header {
    font-size: 1.55rem;
    width: 110px;
}


/* ============================================================
   Reduce whitespace above team section headings
   ============================================================ */

/* Shrink the hr bottom margin in the article context */
.article hr {
    margin-bottom: 1.2em;
}

/* Remove default h2 top margin on the heading itself */
.author-page-header {
    margin-top: 0.5rem;
    margin-bottom: 0;
}


/* ============================================================
   Team section spacing (replaces removed hr dividers)
   ============================================================ */
.team-section {
    padding-top: 3rem;
    padding-bottom: 1rem;
}


/* Match spacing above Editors to the gap between sections */
.gh-content + .team-section {
    padding-top: 7rem;
}


/* ============================================================
   Contributors loading state
   ============================================================ */
.contributors-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    gap: 1.2rem;
}

.contributors-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-lightgrey, #e0e0e0);
    border-top-color: var(--color-darkgrey, #333);
    border-radius: 50%;
    animation: contributors-spin 0.75s linear infinite;
}

@keyframes contributors-spin {
    to { transform: rotate(360deg); }
}

.contributors-loading-text {
    margin: 0;
    font-size: 1.6rem;
    opacity: 0.5;
    letter-spacing: 0.02em;
}


/* ============================================================
   I'M HUNGRY feed — 4-column compact grid
   ============================================================ */
.hungry-feed {
    /* v159: minmax(0, 1fr) prevents column 1 from widening when a card's
       min-content (driven by intrinsic image width post-load) exceeds the
       fair 1fr share — previously caused col 1 to grow to ~322px while
       cols 2-4 squeezed to ~281px once lazy images loaded after scroll. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 3vmin;
}

/* Shorter card image */
.hungry-feed .post-card-image {
    height: 150px;
}

/* Slightly smaller title */
.hungry-feed .post-card-title {
    font-size: 1.9rem;
}

/* Large tablet: 3 columns */
@media (max-width: 1000px) {
    .hungry-feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet: 2 columns */
@media (max-width: 700px) {
    .hungry-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 40px;
    }
}

/* Mobile: 1 column */
@media (max-width: 500px) {
    .hungry-feed {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Infinite scroll — staggered fade-up animation
   ============================================================ */

/* Cards start invisible and shifted down */
.post-card-animate {
    opacity: 0;
    transform: translateY(24px);
    animation: card-fade-up 0.7s ease forwards;
}

@keyframes card-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   Section reveal animations (scroll-triggered)
   ============================================================ */

/* Hidden states set by JS before observer fires */
.section-heading-hidden {
    opacity: 0;
    transform: translateY(24px);
}

.section-card-hidden {
    opacity: 0;
    transform: translateY(24px);
}

/* Heading animates in — same motion as cards */
.section-heading-animate {
    animation: card-fade-up 1.6s ease forwards;
}


/* ============================================================
   Fade-only variant (no translateY) — used for Cover Story
   ============================================================ */
.section-heading-hidden-fadeonly,
.section-card-hidden-fadeonly {
    opacity: 0;
}

.section-heading-animate-fade {
    animation: card-fade-in 1.6s ease forwards;
}

.post-card-animate-fade {
    animation: card-fade-in 0.7s ease forwards;
}

@keyframes card-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ============================================================
   Library page — palette from SJP_Worlds_8.png
   Deep purple #2D0A6B · Teal #00A878 · Orange #F4956A
   Electric red #E8341D · Sky blue #7BC8F0 · Gold #F5C518
   Near-black #0D0A1A
   ============================================================ */

/* Hero — deep purple ground, teal accent title */
.library-hero {
    background: #2D0A6B;
    padding: 7rem 4vw 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 24px 24px;
}

.library-hero-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

.library-title {
    font-size: 6rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 1.6rem;
    line-height: 1;
}

.library-subtitle {
    font-size: 1.8rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin: 0 0 3rem;
}

.library-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: #00A878;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1.2rem 2.4rem;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.library-search-btn svg {
    width: 18px;
    height: 18px;
}

.library-search-btn:hover {
    background: #F5C518;
    color: #0D0A1A;
    transform: translateY(-2px);
}

/* Sections */
.library-section {
    padding: 6rem 4vw;
    background: #fff;
}

/* Alt sections — very dark purple, like a night scene */
.library-section--alt {
    background: #0D0A1A;
}

.library-section--alt .library-section-label {
    color: #7BC8F0;
}

.library-section--alt .library-section-title {
    color: #fff;
}

.library-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.library-section-label {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E8341D;
    margin-bottom: 0.8rem;
}

.library-section-title {
    font-size: 3.6rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #0D0A1A;
    margin: 0 0 3.5rem;
    line-height: 1.1;
}

/* Cards */
.library-grid {
    display: grid;
    gap: 2rem;
}

.library-grid--large {
    grid-template-columns: repeat(4, 1fr);
}

.library-grid--medium {
    grid-template-columns: repeat(3, 1fr);
}

.library-grid--series {
    grid-template-columns: repeat(4, 1fr);
}

.lib-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: #2D0A6B;
    aspect-ratio: 3 / 4;
}

.lib-card--large {
    aspect-ratio: 4 / 5;
}

.lib-card--series {
    aspect-ratio: 16 / 9;
}

.lib-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.lib-card:hover .lib-card-bg {
    transform: scale(1.05);
}

/* Overlay: purple-tinted gradient instead of plain black */
.lib-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(45,10,107,0.92) 0%,
        rgba(45,10,107,0.35) 50%,
        rgba(45,10,107,0.05) 100%
    );
    transition: background 0.3s ease;
}

.lib-card:hover .lib-card-overlay {
    background: linear-gradient(
        to top,
        rgba(45,10,107,0.96) 0%,
        rgba(45,10,107,0.5) 55%,
        rgba(45,10,107,0.1) 100%
    );
}

.lib-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 2rem 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lib-card-name {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Gold accent on hover */
.lib-card:hover .lib-card-name {
    color: #F5C518;
}

.lib-card-count {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Platforms pills — teal on dark for alt section */
.library-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.library-pill {
    display: inline-block;
    padding: 0.9rem 2rem;
    border: 2px solid #2D0A6B;
    border-radius: 100px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #2D0A6B;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.library-pill:hover {
    background: #2D0A6B;
    color: #F5C518;
    border-color: #2D0A6B;
}

/* Search footer — orange warmth to close the page */
.library-search-footer {
    background: #F4956A;
    padding: 6rem 4vw;
    text-align: center;
}

.library-search-footer p {
    margin: 0 0 2.5rem;
    color: #0D0A1A;
    font-size: 1.8rem;
    font-weight: 600;
}

.library-search-footer .library-search-btn {
    background: #0D0A1A;
    color: #fff;
}

.library-search-footer .library-search-btn:hover {
    background: #2D0A6B;
    color: #F5C518;
}

/* Responsive */
@media (max-width: 1100px) {
    .library-grid--large {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .library-grid--large {
        grid-template-columns: repeat(2, 1fr);
    }
    .library-grid--medium {
        grid-template-columns: repeat(2, 1fr);
    }
    .library-grid--series {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .library-title {
        font-size: 4.2rem;
    }
    .library-grid--large,
    .library-grid--medium,
    .library-grid--series {
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
    }
    .library-section {
        padding: 4rem 4vw;
    }
    .lib-card-name {
        font-size: 1.6rem;
    }
}

@media (max-width: 400px) {
    .library-grid--large,
    .library-grid--medium,
    .library-grid--series {
        grid-template-columns: 1fr;
    }
}


/* Platform group labels */
.library-pill-group-label {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2D0A6B;
    margin: 2.5rem 0 0.8rem;
}

.library-pill-group-label:first-of-type {
    margin-top: 0;
}


/* ============================================================
   Series skeleton loading cards
   ============================================================ */
.series-skeleton-card {
    border-radius: 12px;
    aspect-ratio: 16 / 9;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.12) 40%,
        rgba(255,255,255,0.04) 80%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ============================================================
   Platform grouped boxes
   ============================================================ */
.platform-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.platform-group {
    background: #f0eef8;
    border-radius: 14px;
    padding: 2.4rem 2.4rem 2rem;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.platform-group:hover {
    border-color: #2D0A6B;
}

.platform-group-header {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2D0A6B;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(45,10,107,0.15);
}

.platform-group-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

/* Smaller pills inside the boxes */
.platform-group-pills .library-pill {
    font-size: 1.25rem;
    padding: 0.6rem 1.4rem;
}

@media (max-width: 900px) {
    .platform-groups {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .platform-groups {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Themes & Topics — header row, refresh button, skeletons
   ============================================================ */
.themes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3.5rem;
}

.themes-header .library-section-title {
    margin-bottom: 0;
}

.themes-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.8rem;
    background: #F5C518;
    border: 2px solid #F5C518;
    border-radius: 100px;
    color: #0D0A1A;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.themes-btn-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.themes-btn-text {
    display: inline-block;
}

.themes-refresh-btn:hover {
    background: #e8b800;
    border-color: #e8b800;
    transform: scale(1.04);
}

.themes-refresh-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.themes-btn-icon.spinning {
    animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Skeleton placeholders for themes grid */
.themes-skeleton-card {
    border-radius: 12px;
    aspect-ratio: 3 / 4;
    background: linear-gradient(
        90deg,
        rgba(45,10,107,0.06) 0%,
        rgba(45,10,107,0.15) 40%,
        rgba(45,10,107,0.06) 80%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}


/* ============================================================
   Story Categories skeleton — light background variant
   ============================================================ */
.category-skeleton-card {
    border-radius: 12px;
    aspect-ratio: 4 / 5;
    background: linear-gradient(
        90deg,
        #ebebeb 0%,
        #d6d6d6 40%,
        #ebebeb 80%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}


/* SEO noscript fallback nav — visually hidden, readable by crawlers */
.seo-fallback-nav {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   Author Spotlight — split-panel layout (v2)
   Left panel: centred author identity column
   Right panel: vertically-centred story list (no images)
   ============================================================ */

.author-spotlight {
    background: #2D0A6B;
    border-radius: 16px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.author-spotlight.spotlight-visible {
    opacity: 1;
}

/* Inner div becomes the horizontal flex row */
.author-spotlight-inner {
    display: flex;
    min-height: 0;
}

/* ── Left panel ─────────────────────────────────────────────── */
.spotlight-left {
    width: 230px;
    flex-shrink: 0;
    padding: 2.8rem 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    border-right: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.18);
    box-sizing: border-box;
}

.spotlight-label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F5C518;
}

/* Rounded-square avatar with teal border */
.spotlight-avatar-ring {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 0 2.5px #00A878;
}

.spotlight-avatar {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

.spotlight-name {
    font-size: 1.65rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

/* Bio: full-width with peach left accent strip */
.spotlight-bio {
    align-self: stretch;
    font-size: 1.3rem;
    color: rgba(255,255,255,0.52);
    line-height: 1.6;
    margin: 0;
    border-left: 3px solid #F4956A;
    padding-left: 1rem;
}

/* Social icons row */
.spotlight-social {
    display: flex;
    gap: 0.7rem;
    align-items: center;
}

.spotlight-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    text-decoration: none;
    transition: background 0.2s ease;
}

.spotlight-social-link:hover {
    background: rgba(255,255,255,0.2);
}

.spotlight-social-link svg {
    width: 13px;
    height: 13px;
    fill: rgba(255,255,255,0.75);
}

/* CTA button — white bg, inverts to black on hover */
.spotlight-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 0;
    background: #ffffff;
    color: #000000;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 100px;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.spotlight-cta:hover {
    background: #000000;
    color: #ffffff;
}

/* ── Right panel ─────────────────────────────────────────────── */
.spotlight-right {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.spotlight-stories {
    width: 100%;
}

.spotlight-story {
    display: block;
    padding: 1.8rem 2.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    transition: background 0.15s ease;
}

.spotlight-story:last-child {
    border-bottom: none;
}

.spotlight-story:hover {
    background: rgba(255,255,255,0.035);
}

.spotlight-story-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-bottom: 0.6rem;
}

.spotlight-story-tag {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #00A878;
}

.spotlight-story-readtime,
.spotlight-story-date {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.spotlight-story-readtime::before,
.spotlight-story-date::before {
    content: "·";
    margin-right: 1rem;
    color: rgba(255,255,255,0.35);
    font-weight: 700;
}

.spotlight-story-title {
    font-size: clamp(1.45rem, 0.82rem + 1.32vw, 2.4rem);
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    line-height: 1.25;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spotlight-story-excerpt {
    font-size: clamp(1.2rem, 0.87rem + 0.69vw, 1.7rem);
    color: rgba(255,255,255,0.38);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Skeleton loading state ──────────────────────────────────── */
.author-spotlight-loading {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding: 3rem 2.4rem;
}

.spotlight-skeleton-avatar {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
    animation: spotlight-pulse 1.6s ease-in-out infinite;
}

.spotlight-skeleton-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.spotlight-skeleton-line {
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    animation: spotlight-pulse 1.6s ease-in-out infinite;
}

.spotlight-skeleton-line--label { height: 10px; width: 110px; }
.spotlight-skeleton-line--name  { height: 22px; width: 55%; }
.spotlight-skeleton-line--bio   { height: 12px; width: 88%; }

@keyframes spotlight-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.9; }
}

/* ── Responsive breakpoints ──────────────────────────────────── */

/* Tablet (≤960px): narrower left panel, tighter story padding */
@media (max-width: 960px) {
    .spotlight-left {
        width: 200px;
        padding: 2.4rem 1.8rem;
        gap: 1.6rem;
    }
    .spotlight-story {
        padding: 1.6rem 2.2rem;
    }
}

/* Small tablet (≤680px): stack vertically.
   Left panel becomes a compact centred header block above the stories. */
@media (max-width: 680px) {
    .author-spotlight-inner {
        flex-direction: column;
    }
    .spotlight-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding: 2.4rem 2rem;
        gap: 1.4rem;
    }
    /* Bio anchored strip still looks good centred */
    .spotlight-bio {
        align-self: center;
        max-width: 480px;
        text-align: left;
    }
    /* CTA no longer needs to fill full width when centred */
    .spotlight-cta {
        width: auto;
        padding: 1rem 3rem;
    }
    .spotlight-right {
        align-items: stretch;
    }
    .spotlight-story {
        padding: 1.6rem 2rem;
    }
}

/* Mobile (≤480px): tighter padding, slightly smaller text */
@media (max-width: 480px) {
    .spotlight-left {
        padding: 2rem 1.6rem;
    }
    .spotlight-bio {
        max-width: 100%;
        font-size: 1.2rem;
    }
    .spotlight-story {
        padding: 1.4rem 1.6rem;
    }
    .spotlight-story-readtime,
    .spotlight-story-date {
        font-size: 1.2rem;
    }
}



.library-section--themes{border-radius:16px;overflow:hidden}
.library-section--series{border-radius:16px 16px 0 0;overflow:hidden}
.library-search-footer--rounded{border-radius:0 0 16px 16px;overflow:hidden}


/* ============================================================
   Homepage post-card tile treatment — v152
   Scoped to #discover-feed and #hungry-feed so other feeds
   (author, tag, post read-more) keep their default Casper layout.

   Card structure:
     .post-card  (the tile — white bg, rounded, soft shadow, hover lift)
       .post-card-image-link  (16:9 image holder, overflow hidden)
         .post-card-image     (object-fit cover)
       .post-card-content     (padded content area, flex column)
         .post-card-primary-tag
         .post-card-content-link > .post-card-header > .post-card-title
                                 > .post-card-excerpt
         .post-card-meta       (byline footer, pushed to bottom,
                                hairline divider above)
   ============================================================ */

/* Tile container ---------------------------------------------- */
#discover-feed .post-card,
#hungry-feed   .post-card {
    background: #ffffff;
    border-radius: 14px;
    /* overflow:hidden REMOVED — was clipping the .pca-tip popup when it extended
       above the card. The image-link below now handles its own clipping with
       rounded top corners, so the tile still reads as a single shape. */
    box-shadow: 0 2px 10px rgba(45, 10, 107, 0.06);
    border: 1px solid rgba(45, 10, 107, 0.06);
    min-height: auto;                                  /* override default 220px */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#discover-feed .post-card:hover,
#hungry-feed   .post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(45, 10, 107, 0.12);
}

/* When a tooltip is open, lift the parent card above its siblings so the
   tip is not occluded by adjacent cards' stacking contexts. */
#discover-feed .post-card:has(.pca-tip--visible),
#hungry-feed   .post-card:has(.pca-tip--visible) {
    z-index: 50;
    position: relative;
}

/* Feature image — 16:9 aspect ratio --------------------------- */
#discover-feed .post-card-image-link,
#hungry-feed   .post-card-image-link {
    border-radius: 14px 14px 0 0;                      /* round top corners (bottom flat — content area handles below) */
    margin: 0;
    display: block;
    overflow: hidden;                                  /* clip the image to the rounded top */
}

#discover-feed .post-card-image,
#hungry-feed   .post-card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;                   /* preserved image zoom */
}

#discover-feed .post-card-image-link:hover .post-card-image,
#hungry-feed   .post-card-image-link:hover .post-card-image {
    transform: scale(1.05);
}

/* Override the v128 hungry-feed fixed height (no longer needed) */
.hungry-feed .post-card-image {
    height: auto;
}

/* Content area ------------------------------------------------ */
#discover-feed .post-card-content,
#hungry-feed   .post-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 14px 16px 14px;
}

#hungry-feed .post-card-content {
    padding: 12px 13px 12px;                          /* tighter on smaller cards */
}

/* Primary tag — flush to top of padded content area ----------- */
#discover-feed a.post-card-primary-tag,
#hungry-feed   a.post-card-primary-tag {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #1a1a1a;
}

#hungry-feed a.post-card-primary-tag {
    font-size: 1rem;
}

/* Header / title --------------------------------------------- */
#discover-feed .post-card-header,
#hungry-feed   .post-card-header {
    margin: 0;
}

#discover-feed .post-card-title,
#hungry-feed   .post-card-title {
    font-size: 1.9rem;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 8px 0;

    /* v158: reserve a 4-line title block so cards align across the row.
       1em × 1.25 × 4 = 5em. Uses em so it scales with each feed's own
       font-size (1.9rem discover, 1.55rem hungry). Clamp caps runaway
       titles at the same 4 lines. Released at single-col below. */
    min-height: 5em;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#hungry-feed .post-card-title {
    font-size: 1.55rem;
    margin-bottom: 8px;
}

/* Excerpt — DISCOVER only; hidden on I'M HUNGRY -------------- */
#discover-feed .post-card-excerpt {
    font-size: 1.35rem;
    line-height: 1.5;
    color: #6b6b6b;
    margin: 0;
}

#discover-feed .post-card-excerpt p {
    -webkit-line-clamp: 2;
    margin-bottom: 0;
}

#hungry-feed .post-card-excerpt {
    display: none;
}

#discover-feed .post-card-meta,
#hungry-feed   .post-card-meta {
    margin-top: auto;                                  /* push to bottom of tile */
    padding-top: 12px;
    border-top: 1px solid rgba(45, 10, 107, 0.08);
}

/* Avatar sizing inside the byline ---------------------------- */
#discover-feed .pca-av,
#discover-feed .pca-more {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 6px;
}

#hungry-feed .pca-av,
#hungry-feed .pca-more {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    border-radius: 5px;
    font-size: 0.85rem;                                /* +N pill font on smaller avatar */
}

/* Overlap adjustments to match the smaller avatars ---------- */
#discover-feed .pca--multi .pca-av,
#discover-feed .pca--stack .pca-av,
#discover-feed .pca-more {
    margin-left: -7px;
}
#discover-feed .pca--multi .pca-av:first-child,
#discover-feed .pca--stack .pca-av:first-child {
    margin-left: 0;
}

#hungry-feed .pca--multi .pca-av,
#hungry-feed .pca--stack .pca-av,
#hungry-feed .pca-more {
    margin-left: -6px;
}
#hungry-feed .pca--multi .pca-av:first-child,
#hungry-feed .pca--stack .pca-av:first-child {
    margin-left: 0;
}

/* Byline content — tighter line-height, smaller meta line --- */
#discover-feed .post-card-byline-content,
#hungry-feed   .post-card-byline-content {
    margin-left: 9px;
    font-size: 1.25rem;
    line-height: 1.3;
    min-width: 0;                                      /* allow ellipsis truncation */
}

#hungry-feed .post-card-byline-content {
    margin-left: 8px;
    font-size: 1.15rem;
}

#discover-feed .post-card-byline-content a,
#hungry-feed   .post-card-byline-content a {
    font-weight: 600;
    color: #1a1a1a;
}

#discover-feed .post-card-byline-date,
#hungry-feed   .post-card-byline-date {
    font-size: 1.15rem;
    color: #8a8a8a;
}

#hungry-feed .post-card-byline-date {
    font-size: 1.05rem;
}

/* I'M HUNGRY: keep byline single-line where possible — truncate
   author name with ellipsis when avatars + name would overflow. */
#hungry-feed .post-card-byline-content > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}


/* ============================================================
   Homepage section rhythm — v152 spacing pass
   Unified vertical rhythm across the entire homepage:
     • Cover → banner            : 4rem (block-to-block gap)
     • Banner → feed cards       : 1.5rem (banner is feed's header)
     • Feed → next section       : 4rem (block-to-block gap)
     • Cards within feed         : grid-gap (18px DISCOVER, 12px hungry)
   Scaled at 1000 / 700 / 500 to match existing banner breakpoints.
   ============================================================ */

/* Default ≥1001px ---------------------------------------------- */
.home-template .post-feed {
    padding: 0;                                        /* override default 4vmin */
    margin: 0 0 4rem 0;                                /* gap before next section */
    grid-gap: 18px;
}

.home-template .post-feed.hungry-feed {
    grid-gap: 12px;                                    /* tighter for the snack grid */
}

/* Tighter banner→feed gap so the banner hugs its content      */
.home-template .sjm-section-banner {
    margin: 4rem 0 1.5rem;
}

/* Tablet ≤1000px --------------------------------------------- */
@media (max-width: 1000px) {
    .home-template .post-feed {
        margin-bottom: 3rem;
        grid-gap: 16px;
    }
    .home-template .post-feed.hungry-feed {
        grid-gap: 12px;
    }
    .home-template .sjm-section-banner {
        margin: 3rem 0 1.25rem;
    }
    #discover-feed .post-card-title,
    #hungry-feed   .post-card-title {
        font-size: 1.75rem;
    }
    #hungry-feed .post-card-title {
        font-size: 1.5rem;
    }
}

/* Small tablet ≤700px ---------------------------------------- */
@media (max-width: 700px) {
    .home-template .post-feed {
        margin-bottom: 2.5rem;
        grid-gap: 24px;                                /* single-line of larger cards needs air */
    }
    .home-template .post-feed.hungry-feed {
        grid-gap: 16px;
    }
    .home-template .sjm-section-banner {
        margin: 2.5rem 0 1rem;
    }
    /* DISCOVER stays 2-up (via screen.css default), HUNGRY stays 2-up
       (via existing .hungry-feed @media rule at line 798). Both get
       slightly larger card metrics at this breakpoint. */
    #discover-feed .post-card-content,
    #hungry-feed   .post-card-content {
        padding: 14px 15px;
    }
    #hungry-feed   .post-card-content {
        padding: 12px 13px;
    }
}

/* Phone ≤500px ----------------------------------------------- */
@media (max-width: 500px) {
    .home-template .post-feed {
        margin-bottom: 2rem;
        grid-gap: 24px;
    }
    .home-template .post-feed.hungry-feed {
        grid-gap: 20px;
    }
    .home-template .sjm-section-banner {
        margin: 2rem 0 0.85rem;
    }
    /* Both feeds collapse to 1-col here. Bump title slightly. */
    #discover-feed .post-card-title,
    #hungry-feed   .post-card-title {
        font-size: 1.95rem;
        /* v158: drop the row-alignment reservation at single-col —
           with one card per row there's nothing to align to. */
        min-height: 0;
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    #hungry-feed .post-card-title {
        font-size: 1.85rem;
    }
    /* Bring hungry-feed excerpt back at phone width since the card
       is full-width and the extra context helps the lone column. */
    #hungry-feed .post-card-excerpt {
        display: block;
        font-size: 1.35rem;
        line-height: 1.5;
        color: #6b6b6b;
        margin: 0;
    }
    #hungry-feed .post-card-excerpt p {
        -webkit-line-clamp: 2;
        margin-bottom: 0;
    }
    /* Restore hungry-feed avatar size at single-col to match discover */
    #hungry-feed .pca-av,
    #hungry-feed .pca-more {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        border-radius: 6px;
    }
    #hungry-feed .post-card-byline-content {
        font-size: 1.25rem;
    }
    /* Single-col phone cards have plenty of width — let the byline
       breathe rather than truncating. */
    #hungry-feed .post-card-byline-content > span:first-child {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}


/* ============================================================
   Post card author treatment (pca)
   Avatar size matches original .static-avatar: 36px
   ============================================================ */
.post-card-meta .author-list { display: none; }

.pca {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pca-av {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    flex-shrink: 0;
    border-radius: 7px;          /* square-rounded — matches cover story panel & team page */
    object-fit: cover;
    border: 2px solid #fff;
    display: block;
}

.pca-av--fallback {
    background: linear-gradient(135deg, #2D0A6B, #6b2fa0);
}

.pca--single .pca-av { margin-right: 2px; }

.pca--multi .pca-av,
.pca--stack .pca-av {
    margin-left: -6px;
}

.pca--multi .pca-av:first-child,
.pca--stack .pca-av:first-child {
    margin-left: 0;
}

.pca-count-item { display: none; }

.pca-more {
    width: 36px;
    height: 36px;
    border-radius: 7px;          /* matches .pca-av square-rounded */
    border: 2px solid #fff;
    margin-left: -6px;
    background: #2D0A6B;
    color: #F5C518;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================================
   Article byline author treatment (ab)
   Avatar size matches original .author-avatar: 50px
   ============================================================ */
.ab-authors {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.ab-av-overlap {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

.ab-av {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    aspect-ratio: 1 / 1;       /* defensive — prevents oval/squish if width or height get overridden */
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    display: block;
    margin-left: -4px;
}

.ab-av:first-child { margin-left: 0; }

.ab-av--fallback {
    background: linear-gradient(135deg, #2D0A6B, #6b2fa0);
}

.ab-av-link { display: block; flex-shrink: 0; }
.ab-av-link .ab-av { margin-left: 0; }

.ab-av-more {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -4px;
    background: #2D0A6B;
    color: #F5C518;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

/* Hover affordance — same pattern as .pca-more on homepage cards */
.ab-authors--stack #ab-av-overlap:hover .ab-av-more {
    background: #3d1485;
    box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.35);
}

/* Click trigger is the avatar row; give it a focus ring for keyboard users */
#ab-av-overlap {
    outline: none;
    border-radius: 30px;                               /* pill-shape ring matches the row */
}
#ab-av-overlap:focus-visible {
    outline: 2px solid #2D0A6B;
    outline-offset: 4px;
}

.ab-count-item { display: none; }
.ab-authors--stack { position: relative; }

/* ── Mobile: stack avatars above author name/date ─────────────────── */
@media (max-width: 600px) {
    .ab-authors {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
}

.ab-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: #fff;
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    min-width: 180px;
    display: none;
    z-index: 30;
    border: 1px solid rgba(0,0,0,0.06);
}

.ab-tip--visible { display: block; }

.ab-tip-arrow {
    position: absolute;
    bottom: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.06);
}

.ab-tip-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 0.8rem;
}

.ab-tip-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}
.ab-tip-row:last-child { margin-bottom: 0; }

.ab-tip-av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ab-tip-av--fallback {
    background: linear-gradient(135deg, #2D0A6B, #6b2fa0);
    display: block;
}

.ab-tip-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    white-space: nowrap;
}

.ab-tip-name:hover { color: #2D0A6B; }


/* Post card tooltip for 4+ authors */
.pca--stack {
    position: relative;
    cursor: pointer;
    outline: none;                                    /* default outline hidden — focus-visible handles keyboard */
    border-radius: 7px;                               /* matches avatar shape for the focus ring */
}

/* Keyboard focus ring — only shows for keyboard navigation, not mouse clicks */
.pca--stack:focus-visible {
    outline: 2px solid #2D0A6B;
    outline-offset: 3px;
}

/* Hover affordance on the +N pill — subtle brighten + outer ring, signalling
   "click me" now that hover no longer auto-opens the tooltip. */
.pca--stack:hover .pca-more {
    background: #3d1485;                              /* lifted from #2D0A6B */
    box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.35);   /* faint gold ring */
}
.pca--stack .pca-more {
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.pca-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: #fff;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 160px;
    display: none;
    z-index: 100;
    border: 1px solid rgba(0,0,0,0.06);
}

.pca-tip--visible { display: block; }

.pca-tip-arrow {
    position: absolute;
    bottom: -6px;
    left: 16px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.06);
}

.pca-tip-title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 0.7rem;
}

.pca-tip-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
    color: inherit;
    text-decoration: none;
    padding: 2px 4px;
    margin-left: -4px;
    margin-right: -4px;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.pca-tip-row:hover { background: rgba(0, 0, 0, 0.05); text-decoration: none; }
.pca-tip-row:last-child { margin-bottom: 0; }

.pca-tip-av {
    width: 20px;
    height: 20px;
    border-radius: 4px;          /* small square-rounded — consistent with main avatar shape */
    object-fit: cover;
    flex-shrink: 0;
}

.pca-tip-av--fallback {
    background: linear-gradient(135deg, #2D0A6B, #6b2fa0);
    display: block;
}

.pca-tip-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
}


/* ============================================================
   DNA / About Us page
   ============================================================ */

/* Hero — teal, rounded bottom corners */
.dna-hero {
    background: #CC2200;
    padding: 8rem 4vw 12rem;
    text-align: center;
    border-radius: 0 0 24px 24px;
    position: relative;
    overflow: hidden;
}

.dna-hero-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

.dna-hero-title {
    font-size: 7rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0 0 1.6rem;
}

.dna-hero-sub {
    font-size: 1.8rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin: 0;
}

.dna-hero-title {
    margin-bottom: 1.6rem;
}

/* Floating stamp — overlaps hero bottom / content top */
.dna-stamp-wrap {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
    margin-top: -90px;
    margin-bottom: -90px;
    pointer-events: none;
}

.dna-stamp {
    width: 180px;
    height: 180px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    pointer-events: auto;
    background: #CC2200;
}

.dna-stamp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content section */
.dna-content {
    background: #fff;
    padding: 14rem 4vw 8rem;
}

.dna-content-inner {
    max-width: 680px;
    margin: 0 auto;
}

/* Hide the GIF that Ghost renders as part of the page body */
.dna-body img:first-child {
    display: none;
}

.dna-body > p:first-of-type {
    display: none;
}

.dna-body {
    font-family: var(--font-sans-serif);
    font-size: 1.8rem;
    line-height: 1.8;
    color: #444;
}

.dna-opener {
    font-family: var(--font-sans-serif);
    font-size: 2.8rem;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 3.2rem;
}

.dna-rule {
    width: 40px;
    height: 3px;
    background: #CC2200;
    margin-bottom: 3.2rem;
    border: none;
}

.dna-body p {
    margin: 0 0 2.4rem;
}

.dna-body strong {
    color: #111;
}

.dna-body a {
    color: #CC2200;
    text-decoration: underline;
}

.dna-body a:hover {
    color: #2D0A6B;
}

/* Responsive */
@media (max-width: 700px) {
    .dna-hero {
        padding: 5rem 4vw 10rem;
        border-radius: 0 0 16px 16px;
    }
    .dna-hero-title { font-size: 5rem; }
    .dna-hero-sub   { font-size: 1.6rem; }

    .dna-stamp {
        width: 140px;
        height: 140px;
        border-radius: 16px;
    }

    .dna-stamp-wrap {
        margin-top: -70px;
        margin-bottom: -70px;
    }

    .dna-content {
        padding: 10rem 4vw 6rem;
    }
}


/* ============================================================
   Contact page
   ============================================================ */
.contact-hero {
    background: #F5C518;
    padding: 8rem 4vw 6rem;
    text-align: center;
    border-radius: 0 0 24px 24px;
    position: relative;
    overflow: hidden;
}

.contact-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}

.contact-hero-title {
    font-family: var(--font-sans-serif);
    font-size: 7rem;
    font-weight: 800;
    color: #0D0A1A;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    line-height: 1;
}

.contact-hero-sub {
    font-family: var(--font-sans-serif);
    font-size: 2rem;
    color: #2D0A6B;
    margin: 0;
    font-weight: 500;
}

.contact-content {
    background: #fff;
    padding: 7rem 4vw 8rem;
}

.contact-content-inner {
    max-width: 920px;
    margin: 0 auto;
}

/* Hide the brand image Ghost injects in the body */
.contact-body img {
    display: none;
}

/* Intro paragraph — sits above the card stack, full width of the column */
.contact-body .contact-intro {
    font-family: var(--font-sans-serif);
    font-size: 2.1rem;
    line-height: 1.55;
    color: #333;
    margin: 0 0 4rem;
    grid-column: 1 / -1;
}

/* ---------- Card grid (2-up + wide rhythm) ---------- */
.contact-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.6rem;
    row-gap: 1.6rem;
    align-items: stretch;
}

.contact-body .contact-card--wide {
    grid-column: 1 / -1;
}

/* ---------- Card base ---------- */
.contact-body .contact-card {
    border-radius: 22px;
    padding: 2.6rem 2.8rem;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.contact-body .contact-card--wide {
    padding: 3rem 3.25rem;
}

.contact-card-eyebrow {
    font-family: var(--font-sans-serif);
    font-size: 1.2rem;
    letter-spacing: 0.18em;
    font-weight: 800;
    margin-bottom: 0.8rem;
    opacity: 0.85;
}

.contact-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    margin-bottom: 1.4rem;
}

.contact-card-emoji {
    background: #fff;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4rem;
    flex-shrink: 0;
    line-height: 1;
}

.contact-card-title {
    font-family: var(--font-sans-serif);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0.4rem 0 0;
    border: none;
    padding: 0;
}

.contact-body .contact-card--wide .contact-card-title {
    font-size: 3rem;
}

.contact-card-body {
    font-family: var(--font-sans-serif);
    font-size: 1.55rem;
    line-height: 1.65;
    flex: 1;
}

.contact-body .contact-card--wide .contact-card-body {
    font-size: 1.6rem;
}

.contact-card-body p {
    margin: 0 0 1.4rem;
}

.contact-card-body p:last-child {
    margin-bottom: 0;
}

.contact-card-body ul,
.contact-card-callout ul {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
}

.contact-card-callout ul { margin: 0; }

.contact-card-body li,
.contact-card-callout li {
    padding-left: 2.2rem;
    position: relative;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.contact-card-body li::before,
.contact-card-callout li::before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
}

.contact-card-body a,
.contact-card-main a {
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
    color: inherit;
}

/* CTA button (cloned from the first body link) */
.contact-card-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 2rem;
    padding: 1.2rem 2.2rem;
    border-radius: 999px;
    text-decoration: none !important;
    font-family: var(--font-sans-serif);
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.contact-card-cta:hover {
    transform: translateY(-2px);
}

.contact-card-cta-arrow {
    font-size: 1.6rem;
    transition: transform 0.15s ease;
}

.contact-card-cta:hover .contact-card-cta-arrow {
    transform: translateX(3px);
}

/* ---------- Wide card inner layout ---------- */
.contact-card-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    column-gap: 2.4rem;
    align-items: stretch;
    flex: 1;
}

.contact-card-main {
    display: flex;
    flex-direction: column;
}

.contact-card-main > .contact-card-cta {
    margin-top: auto;
}

.contact-card-callout {
    background: rgba(255, 255, 255, 0.08);
    border-left: 3px solid #F5C518;
    border-radius: 0 12px 12px 0;
    padding: 1.4rem 1.6rem;
}

.contact-card-callout ul {
    margin: 0;
}

.contact-card-callout li {
    font-size: 1.4rem;
    margin-bottom: 0.9rem;
}

.contact-card-callout li:last-child {
    margin-bottom: 0;
}

/* ---------- Variant: PEACH (Sponsorship) ---------- */
.contact-card--peach {
    background: #F4956A;
    color: #2A0F05;
}
.contact-card--peach .contact-card-eyebrow,
.contact-card--peach li::before {
    color: #7A2E0D;
}
.contact-card--peach .contact-card-title { color: #2A0F05; }
.contact-card--peach a:not(.contact-card-cta) { color: #2A0F05; }
.contact-card--peach .contact-card-cta {
    background: #2A0F05;
    color: #fff;
}

/* ---------- Variant: TEAL (Writers) ---------- */
.contact-card--teal {
    background: #00A878;
    color: #04261C;
}
.contact-card--teal .contact-card-eyebrow,
.contact-card--teal li::before {
    color: #04261C;
}
.contact-card--teal .contact-card-title { color: #04261C; }
.contact-card--teal a:not(.contact-card-cta) { color: #04261C; }
.contact-card--teal .contact-card-cta {
    background: #04261C;
    color: #fff;
}

/* ---------- Variant: PURPLE (Developers) ---------- */
.contact-card--purple {
    background: #2D0A6B;
    color: #E8E2F5;
}
.contact-card--purple .contact-card-eyebrow,
.contact-card--purple li::before {
    color: #F5C518;
}
.contact-card--purple .contact-card-title { color: #ffffff; }
.contact-card--purple .contact-card-emoji {
    background: #F5C518;
}
.contact-card--purple a:not(.contact-card-cta) {
    color: #F5C518;
    text-decoration-color: rgba(245, 197, 24, 0.6);
}
.contact-card--purple .contact-card-cta {
    background: #F5C518;
    color: #2D0A6B;
}

/* ---------- Tablet / mobile ---------- */
@media (max-width: 900px) {
    .contact-body {
        grid-template-columns: 1fr;
    }
    .contact-body .contact-card {
        padding: 2.4rem 2.4rem;
    }
    .contact-card-grid {
        grid-template-columns: 1fr;
        row-gap: 1.6rem;
    }
    .contact-card-title { font-size: 2.6rem; }
}

@media (max-width: 700px) {
    .contact-hero {
        padding: 5rem 4vw 5rem;
        border-radius: 0 0 16px 16px;
    }
    .contact-hero-title { font-size: 5rem; }
    .contact-hero-sub   { font-size: 1.6rem; }
    .contact-content    { padding: 5rem 4vw 6rem; }

    .contact-body .contact-intro {
        font-size: 1.85rem;
        margin-bottom: 3rem;
    }
    .contact-body .contact-card {
        padding: 2.2rem 1.8rem;
        border-radius: 18px;
    }
    .contact-card-title-row {
        gap: 1.1rem;
    }
    .contact-card-emoji {
        width: 5.2rem;
        height: 5.2rem;
        font-size: 2.8rem;
        border-radius: 13px;
    }
    .contact-card-title { font-size: 2.2rem; }
    .contact-card-body { font-size: 1.5rem; }
    .contact-card-cta {
        font-size: 1.4rem;
        padding: 1.2rem 2rem;
    }
}


/* ============================================================
   Team page redesign
   ============================================================ */

/* Hero — teal, dark text */
.team-hero {
    background: #00A878;
    padding: 8rem 4vw 6rem;
    text-align: center;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
}

.team-hero-inner {
    max-width: 680px;
    margin: 0 auto;
}

.team-hero-title {
    font-size: 7rem;
    font-weight: 900;
    color: #0D0A1A;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0 0 1.6rem;
}

.team-hero-sub {
    font-size: 1.8rem;
    color: rgba(13,10,26,0.6);
    line-height: 1.6;
    margin: 0;
}

/* Split section */
.team-split-section {
    background: #fff;
    padding: 5rem 0 4rem;
}

.team-split {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 5rem;
    align-items: start;
    padding: 0 3rem;
}

/* Vertical divider */
.team-split-divider {
    background: #eee;
    align-self: stretch;
}

/* Left: Ghost page content */
.team-page-content {
    font-family: var(--font-sans-serif);
    font-size: 1.7rem;
    line-height: 1.8;
    color: #444;
}

.team-page-content h1,
.team-page-content h2 {
    display: none; /* Title already in hero */
}

.team-page-content h3 {
    font-family: var(--font-sans-serif);
    font-size: 1.9rem;
    font-weight: 800;
    color: #111;
    margin: 3rem 0 1.2rem;
}

.team-page-content h3:first-of-type {
    margin-top: 0;
}

.team-page-content p {
    margin: 0 0 1.6rem;
}

.team-page-content ul {
    margin: 0 0 1.6rem;
    padding-left: 1.6rem;
}

.team-page-content li {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.team-page-content a {
    color: #00A878;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.team-page-content a:hover { color: #0D0A1A; }

.team-page-content hr { display: none; }

/* Right: editor cards */
.team-editors-heading {
    font-family: var(--font-sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00A878;
    margin-bottom: 2.4rem;
}

.team-editors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.6rem;
}

.team-editor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 0.8rem;
}

.team-editor-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f0f0;
    transition: border-color 0.2s ease, transform 0.2s ease;
    display: block;
}

.team-editor-card:hover .team-editor-avatar {
    border-color: #00A878;
    transform: scale(1.05);
}

.team-editor-avatar--fallback {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #2D0A6B;
    border: 3px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-editor-name {
    font-family: var(--font-sans-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: #111;
    text-align: center;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.team-editor-card:hover .team-editor-name { color: #00A878; }

/* Contributors section */
.team-contributors-section {
    background: transparent;
    padding: 0;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.team-contributors-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.team-contributors-heading {
    font-family: var(--font-sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00A878;
    margin-bottom: 3rem;
}

/* Responsive */
@media (max-width: 900px) {
    .team-split {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 2rem;
    }
    .team-split-divider {
        display: block;
        width: 100%;
        height: 1px;
        align-self: auto;
        margin: 2.5rem 0;
    }
    .team-editors-heading { margin-top: 0; }
    .team-hero-title { font-size: 5rem; }
    .team-split-section { padding: 3.5rem 0 3rem; }
    .team-contributors-section { margin-top: 0; }
}

@media (max-width: 600px) {
    .team-hero {
        padding: 5rem 4vw 4rem;
        border-radius: 0 0 16px 16px;
    }
    .team-hero-title  { font-size: 4.2rem; }
    .team-hero-sub    { font-size: 1.6rem; }
    .team-split       { padding: 0 1.4rem; }
    .team-split-section { padding: 3rem 0 2.5rem; }
    .team-editor-profile        { gap: 1.4rem; padding: 2rem 0; }
    .team-editor-profile-avatar { width: 64px; height: 64px; }
    .team-editor-profile-bio    { font-size: 1.3rem; }
    .team-editor-profile-footer { flex-wrap: wrap; }
    .team-split-divider { margin: 2rem 0; }
}

@media (max-width: 480px) {
    .team-hero-title { font-size: 3.6rem; }
    .team-split { padding-left: 1rem; padding-right: 1rem; }
    .team-split-section { padding: 2.5rem 0 2rem; }
}


/* Editor profile cards */
.team-editor-profiles {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.team-editor-profile {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 2.4rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.team-editor-profile:first-child { padding-top: 0; }
.team-editor-profile:last-child { border-bottom: none; padding-bottom: 0; }

.team-editor-profile-avatar-link { flex-shrink: 0; }

.team-editor-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.team-editor-profile-avatar-link:hover .team-editor-profile-avatar {
    transform: scale(1.04);
}

.team-editor-profile-avatar--fallback {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: #2D0A6B;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-editor-profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.team-editor-profile-name {
    font-family: var(--font-sans-serif);
    font-size: 1.7rem;
    font-weight: 800;
    color: #111;
    text-decoration: none;
    display: block;
    transition: color 0.2s ease;
}

.team-editor-profile-name:hover { color: #00A878; }

.team-editor-profile-bio {
    font-family: var(--font-sans-serif);
    font-size: 1.4rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.team-editor-profile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.4rem;
}

.team-editor-profile-social {
    display: flex;
    gap: 0.8rem;
}

.team-editor-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f4f4f4;
    transition: background 0.2s ease;
}

.team-editor-social-link:hover { background: #00A878; }

.team-editor-social-link svg {
    width: 13px;
    height: 13px;
}

.team-editor-social-link:hover svg { fill: #fff; stroke: none; }



.team-editor-profile-cta {
    font-family: var(--font-sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #00A878;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.team-editor-profile-cta:hover { color: #0D0A1A; }


/* Team page: override author-feed grid for contributors */
.team-contributors-section .author-feed {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 4vmin;
    padding: 0;
}

@media (max-width: 1000px) {
    .team-contributors-section .author-feed {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .team-contributors-section .author-feed {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 3vmin;
    }
}

@media (max-width: 400px) {
    .team-contributors-section .author-feed {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2.5vmin;
    }
}


/* Per-icon-type styles — fixes colour consistency regardless of order */
/* Globe (outline SVG) */
.team-editor-social-link--globe svg { fill: none; stroke: #555; }
.team-editor-social-link--globe:hover svg { fill: none; stroke: #fff; }

/* X / Twitter (filled SVG) */
.team-editor-social-link--x svg { fill: #555; stroke: none; }
.team-editor-social-link--x:hover svg { fill: #fff; stroke: none; }

/* Bluesky (filled SVG, reuse existing icon) */
.team-editor-social-link--bluesky svg { fill: #555; stroke: none; width: 13px; height: 13px; }
.team-editor-social-link--bluesky:hover svg { fill: #fff; stroke: none; }


/* Contributors card — inner wrapper carries the visible background + rounded corners */
.team-contributors-card {
    background: #f8f8f8;
    border-radius: 24px;
    padding: 4rem 3rem;
}

@media (max-width: 600px) {
    .team-contributors-card {
        border-radius: 16px;
        padding: 3rem 1.6rem;
    }
}

@media (max-width: 480px) {
    .team-contributors-card {
        padding: 3rem 1.2rem;
    }
}


/* ================================================================
   Related Stories Section
   Replaces the generic recent-posts footer on article pages.
   Priority: topic match (secondary tag) → content type (primary
   tag) → recent posts fallback. Max 3 cards displayed.
   ================================================================ */

.rs-wrap {
    width: 100%;
    padding: 5vmin 4vmin 7vmin;
    margin: 40px 0 -40px;
    background: #0a0b0c;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Header row ─────────────────────────────────────────────── */
.rs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3vmin;
    padding-bottom: 2vmin;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rs-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}

.rs-tag-link {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ghost-accent-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.rs-tag-link:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* ── Card grid ──────────────────────────────────────────────── */
.rs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vmin;
}

/* ── Individual card ────────────────────────────────────────── */
.rs-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    cursor: pointer;
}

.rs-card:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.rs-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.rs-card-link:hover {
    text-decoration: none;
}

/* ── Card image ─────────────────────────────────────────────── */
.rs-card-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background: #141416;
    flex-shrink: 0;
}

.rs-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rs-card:hover .rs-card-img img {
    transform: scale(1.05);
}

.rs-card-img--empty {
    background: linear-gradient(135deg, #18181b 0%, #222226 100%);
}

/* ── Card body ──────────────────────────────────────────────── */
.rs-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.8rem 1.6rem 1.6rem;
}

.rs-card-title {
    margin: 0 0 0.7rem;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.2s ease;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rs-card:hover .rs-card-title {
    color: #fff;
}

.rs-card-excerpt {
    margin: 0 0 auto;
    padding-bottom: 1.4rem;
    font-size: 1.35rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.42);
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Card meta row ──────────────────────────────────────────── */
.rs-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 1.2rem;
    line-height: 1;
}

.rs-card-author {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-card-read {
    flex-shrink: 0;
    margin-left: 1rem;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .rs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rs-grid .rs-card:nth-child(3) {
        display: none;
    }
}

@media (max-width: 700px) {
    .rs-wrap {
        padding: 6vmin 4vmin 8vmin;
    }
    .rs-grid {
        grid-template-columns: 1fr;
    }
    .rs-grid .rs-card:nth-child(2),
    .rs-grid .rs-card:nth-child(3) {
        display: none;
    }
    .rs-title {
        font-size: 1rem;
    }
}


/* ================================================================
   Team page — editor landscape cards (v96)
   ================================================================ */

@keyframes sjm-ring-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.022); }
}

.team-editor-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.team-editor-card {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    padding: 1.4rem 1.6rem;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.team-editor-card:hover {
    transform: translateY(-4px);
    border-color: #ddd;
}

.team-editor-pulse-wrap {
    flex-shrink: 0;
    animation: sjm-ring-pulse 3.5s ease-in-out infinite;
}

.team-editor-card:hover .team-editor-pulse-wrap {
    animation: none;
}

.team-editor-ring {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid #2D0A6B;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: border-width 0.25s ease, padding 0.25s ease;
}

.team-editor-card:hover .team-editor-ring {
    border-width: 5px;
    padding: 2px;
}

.team-editor-card--0 .team-editor-ring { border-color: #2D0A6B; }
.team-editor-card--1 .team-editor-ring { border-color: #00A878; }
.team-editor-card--2 .team-editor-ring { border-color: #F5C518; }
.team-editor-card--3 .team-editor-ring { border-color: #F4956A; }
.team-editor-card--4 .team-editor-ring { border-color: #7BC8F0; }

.team-editor-card--0 .team-editor-role { background: #ede8f5; color: #2D0A6B; }
.team-editor-card--1 .team-editor-role { background: #e0f5ee; color: #00654a; }
.team-editor-card--2 .team-editor-role { background: #fef8d9; color: #7a6000; }
.team-editor-card--3 .team-editor-role { background: #fdeee6; color: #a04018; }
.team-editor-card--4 .team-editor-role { background: #e3f4fc; color: #186090; }

.team-editor-ring-link {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.team-editor-ring-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.team-editor-ring-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #2D0A6B;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-editor-ring-fallback svg {
    width: 34px;
    height: 34px;
}

.team-editor-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.team-editor-name {
    font-family: var(--font-sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: #111;
    text-decoration: none;
    display: block;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.team-editor-name:hover { color: #00A878; }

.team-editor-role {
    display: inline-block;
    font-family: var(--font-sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    line-height: 1.6;
}

.team-editor-bio {
    font-family: var(--font-sans-serif);
    font-size: 1.35rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.team-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.2rem;
}

.team-editor-social {
    display: flex;
    gap: 0.8rem;
}

.team-editor-cta {
    font-family: var(--font-sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #00A878;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.team-editor-card:hover .team-editor-cta { opacity: 1; }

@media (max-width: 600px) {
    .team-editor-ring  { width: 72px; height: 72px; }
    .team-editor-card  { gap: 1.2rem; padding: 1.2rem; }
    .team-editor-name  { font-size: 1.5rem; }
    .team-editor-bio   { font-size: 1.25rem; }
    .team-editor-cta   { font-size: 1.2rem; }
}


/* ================================================================
   #contributors-feed author cards — rich layout (v96)
   ================================================================ */

#contributors-feed .author-card {
    min-height: unset;
    align-items: stretch;
    text-align: left;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

#contributors-feed .author-card:hover {
    border-color: #ddd;
}

.author-card-accent {
    height: 4px;
    width: 100%;
    flex-shrink: 0;
}

.author-card-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem 1.2rem 0.8rem;
    flex: 1;
}

#contributors-feed .author-card-image-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.8rem;
}

#contributors-feed .author-card-image {
    display: block;
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

.author-card-initials {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans-serif);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    flex-shrink: 0;
}

#contributors-feed .author-card-content {
    padding: 0;
    flex: 1;
}

#contributors-feed .author-card-header {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    text-align: left;
    width: auto;
    line-height: 1.3;
    transition: color 0.2s ease;
}

#contributors-feed .author-card-content-link:hover .author-card-header {
    color: #00A878;
}

.author-card-role {
    display: inline-block;
    font-family: var(--font-sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.15rem 0.75rem;
    border-radius: 20px;
    background: #f2f2f2;
    color: #888;
    margin-bottom: 0.5rem;
}

.author-card-bio {
    font-family: var(--font-sans-serif);
    font-size: 1.2rem;
    line-height: 1.55;
    color: #888;
    margin: 0.3rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.author-card-count {
    font-family: var(--font-sans-serif);
    font-size: 1.1rem;
    color: #bbb;
    margin: 0.4rem 0 0;
}

.author-card-cta {
    display: block;
    font-family: var(--font-sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: #00A878;
    text-decoration: none;
    padding: 0.7rem 1.2rem;
    border-top: 1px solid #f0f0f0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#contributors-feed .author-card:hover .author-card-cta {
    opacity: 1;
}


/* ================================================================
   v97 FIXES
   ================================================================ */

/* --- Editor cards: force landscape (flex-row) layout.
       Using #editors-feed + !important beats any conflicting rule. --- */

#editors-feed.team-editor-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem;
}

#editors-feed .team-editor-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 1.6rem;
}

#editors-feed .team-editor-pulse-wrap {
    flex-shrink: 0 !important;
    width: auto !important;
}

#editors-feed .team-editor-body {
    flex: 1 !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

#editors-feed .team-editor-name {
    text-align: left;
}

/* --- Author contributor cards: centred content, no overflow on pill --- */

#contributors-feed .author-card {
    align-items: center !important;
    text-align: center !important;
}

#contributors-feed .author-card-inner {
    align-items: center !important;
    text-align: center;
}

#contributors-feed .author-card-header {
    text-align: center !important;
    width: 100% !important;
}

.author-card-role {
    display: inline-block;
    max-width: calc(100% - 2.4rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

/* Mobile: keep editor cards horizontal down to 480px, then stack */
@media (max-width: 480px) {
    #editors-feed .team-editor-card {
        flex-direction: column !important;
        text-align: center;
    }
    #editors-feed .team-editor-body {
        align-items: center !important;
        text-align: center;
    }
    #editors-feed .team-editor-name,
    #editors-feed .team-editor-footer {
        text-align: center;
        justify-content: center;
    }
}


/* ================================================================
   v98 FIXES: grid columns, avatar sizes, editor spacing, bio align
   ================================================================ */

/* ── Contributors: fix 6→4 column grid (ID specificity was beating
      the .team-contributors-section .author-feed override) ──────── */
#contributors-feed {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-gap: 3vmin !important;
}
@media (max-width: 1000px) {
    #contributors-feed { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
    #contributors-feed { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Author avatar: 60px → 80px ─────────────────────────────────── */
#contributors-feed .author-card-image-wrapper {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    margin-bottom: 1rem;
}
#contributors-feed .author-card-image {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
}
.author-card-initials {
    width: 80px !important;
    height: 80px !important;
    font-size: 2.2rem !important;
    margin-bottom: 1rem;
}

/* ── Bio + count: force centred (webkit-box blocks cascade) ──────── */
.author-card-bio  { text-align: center !important; }
.author-card-count { text-align: center !important; }

/* ── Editor avatar ring: 96px → 130px ───────────────────────────── */
#editors-feed .team-editor-ring {
    width: 130px !important;
    height: 130px !important;
}
.team-editor-ring-fallback svg {
    width: 48px;
    height: 48px;
}

/* ── Editor card: more generous padding + body spacing ───────────── */
#editors-feed .team-editor-card {
    padding: 1.75rem 2rem !important;
    gap: 2rem !important;
}
#editors-feed .team-editor-body {
    gap: 0.55rem !important;
    justify-content: center;
}

/* Space out name / role / footer when card is tall enough */
#editors-feed .team-editor-footer {
    margin-top: 0.5rem;
}

/* ── Responsive editor ring ──────────────────────────────────────── */
@media (max-width: 600px) {
    #editors-feed .team-editor-ring {
        width: 80px !important;
        height: 80px !important;
    }
    #editors-feed .team-editor-card {
        padding: 1.25rem 1.4rem !important;
        gap: 1.25rem !important;
    }
}


/* ================================================================
   v99: square avatars (120px, rounded corners), pill consistency
   ================================================================ */

/* ── Avatar: square with rounded corners, 120px ─────────────────── */
#contributors-feed .author-card-image-wrapper {
    width: 120px !important;
    height: 120px !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 0.9rem;
}

#contributors-feed .author-card-image {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    border-radius: 0 !important;
    object-fit: cover;
}

/* Initials block: same square shape */
.author-card-initials {
    width: 120px !important;
    height: 120px !important;
    border-radius: 12px !important;
    font-size: 2.8rem !important;
    margin-bottom: 0.9rem;
}

/* ── Card content: proper flex column so children centre reliably ── */
#contributors-feed .author-card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    gap: 0.3rem;
    padding: 0;
}

/* Name, bio, count span full width so text-align: center works
   correctly on wrapped multi-line text */
#contributors-feed .author-card-header,
.author-card-bio,
.author-card-count {
    width: 100% !important;
    text-align: center !important;
}

/* ── Pill: auto-width (compact), no truncation, consistent ────────── */
.author-card-role {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap;
    padding: 0.2rem 0.9rem;
    margin-bottom: 0.1rem;
}


/* ================================================================
   v101 — Author page redesign
   Hero (purple rounded-bottom), featured card, filterable grid
   ================================================================ */

/* ── Animated ring ───────────────────────────────────────────────── */
@keyframes sjm-author-ring-cycle {
    0%,  19% { border-color: #2D0A6B; }
    20%, 39% { border-color: #00A878; }
    40%, 59% { border-color: #F5C518; }
    60%, 79% { border-color: #F4956A; }
    80%, 100%{ border-color: #7BC8F0; }
}

/* ── Hero ────────────────────────────────────────────────────────── */
.author-hero {
    background: #2D0A6B;
    border-radius: 0 0 28px 28px;
    padding: 3rem 4vw 4rem;
}

.author-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.author-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    margin-bottom: 2.4rem;
    transition: color 0.2s;
}

.author-hero-back svg {
    width: 15px;
    height: 15px;
}

.author-hero-back:hover {
    color: rgba(255,255,255,0.85);
}

.author-hero-content {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

/* Avatar */
.author-hero-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 130px;
    height: 130px;
}

.author-hero-ring {
    position: absolute;
    inset: -5px;
    border-radius: 19px;
    border: 3px solid #2D0A6B;
    animation: sjm-author-ring-cycle 6s linear infinite,
               sjm-ring-pulse 3.5s ease-in-out infinite;
    pointer-events: none;
}

.author-hero-avatar {
    width: 130px;
    height: 130px;
    border-radius: 14px;
    object-fit: cover;
    display: block;
}

.author-hero-avatar--initials {
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4rem;
    font-weight: 700;
    color: #F5C518;
    border-radius: 14px;
}

/* Identity */
.author-hero-identity {
    flex: 1;
    min-width: 0;
}

.author-hero-role {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #F5C518;
    margin-bottom: 0.6rem;
}

.author-hero-role--editor {
    color: #00A878;
}

.author-hero-name {
    font-size: 3.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 1.2rem;
}

.author-hero-bio {
    font-size: 1.6rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 0 1.4rem;
}

.author-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
}

.author-hero-location {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1.3rem;
    color: rgba(255,255,255,0.55);
}

.author-hero-location svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.author-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s;
}

.author-hero-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.author-hero-link:hover {
    color: #fff;
}

.author-hero-count-badge {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
}

/* ── Stories wrapper ─────────────────────────────────────────────── */
.author-stories-wrap {
    padding: 3.5rem 4vw 5rem;
}

.author-stories-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.author-section-label {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-secondary-text, #888);
    margin-bottom: 1.4rem;
}

/* ── Featured card ───────────────────────────────────────────────── */
.author-featured-wrap {
    margin-bottom: 4rem;
}

.author-featured-card {
    display: flex;
    background: var(--background-color, #fff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0,0,0,0.07);
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    border: 1px solid rgba(0,0,0,0.06);
}

.author-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.author-featured-img-wrap {
    flex-shrink: 0;
    width: 42%;
    max-width: 480px;
}

.author-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.author-featured-body {
    flex: 1;
    padding: 2.8rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.author-featured-tag {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #2D0A6B;
    margin-bottom: 1rem;
}

.author-featured-title {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-darkgrey, #15171a);
    margin: 0 0 1.2rem;
}

.author-featured-excerpt {
    font-size: 1.55rem;
    color: var(--color-secondary-text, #738a94);
    line-height: 1.55;
    margin: 0 0 1.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.author-featured-cta {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2D0A6B;
}

/* ── Grid header ─────────────────────────────────────────────────── */
.author-grid-header {
    margin-bottom: 2rem;
}

/* ── Story grid ──────────────────────────────────────────────────── */
.author-story-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3.5rem;
}

.author-story-card {
    background: var(--background-color, #fff);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.07);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.author-story-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

.author-story-accent {
    height: 4px;
    width: 100%;
    flex-shrink: 0;
}

.author-story-img-wrap {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.author-story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.author-story-card:hover .author-story-img {
    transform: scale(1.04);
}

.author-story-body {
    padding: 1.4rem 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.author-story-tag {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2D0A6B;
}

.author-story-title {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-darkgrey, #15171a);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.author-story-excerpt {
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--color-secondary-text, #738a94);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.author-story-date {
    font-size: 1.2rem;
    color: var(--color-secondary-text, #738a94);
    margin-top: auto;
    padding-top: 0.8rem;
}

/* ── Pagination ──────────────────────────────────────────────────── */
.author-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 1rem;
}

.author-pagination-btn {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2D0A6B;
    text-decoration: none;
    padding: 0.6rem 1.6rem;
    border: 1.5px solid #2D0A6B;
    border-radius: 8px;
    transition: all 0.18s;
}

.author-pagination-btn:hover {
    background: #2D0A6B;
    color: #fff;
}

.author-pagination-info {
    font-size: 1.3rem;
    color: var(--color-secondary-text, #738a94);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .author-story-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .author-hero-name { font-size: 2.8rem; }

    .author-featured-card {
        flex-direction: column;
    }
    .author-featured-img-wrap {
        width: 100%;
        max-width: 100%;
        height: 220px;
    }

    .author-grid-header {
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .author-hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .author-story-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   COVER STORY HERO — v151 separated-header layout
   Left column (.sjm-cover-left):
     • Top tile (.sjm-cover-top-strip): standalone rounded tile
       containing COVER STORY SVG + date · reading time
     • Cover article (.sjm-cover-box): rounded tile containing the
       feature image, overlay, tag, title, excerpt + the author panel
       (colour cycles on each page load)
   Right column (.sjm-cover-right):
     • Animated logo tile — SQUARE (1:1) at >900px,
       16:9 in single-column mode
     • Search CTA — magnifying-glass icon pulses on idle
   ═══════════════════════════════════════════════════════════════════ */

.sjm-cover-section {
    display: grid;
    grid-template-columns: 1.62fr 1fr;       /* 62 / 38 split */
    gap: 16px;
    padding: 16px 0 0;                        /* no horizontal padding — .outer parent provides 4vmin already */
    max-width: 1200px;                        /* matches .inner used by post-feed sections below */
    width: 100%;                              /* explicit fill — matches the .inner pattern used by other sections */
    margin: 0 auto;
    align-items: stretch;
    overflow: hidden;                         /* clip grid tracks that try to expand beyond the section */
}

/* ── Left column wrapper: stacks the standalone top-strip tile and
   the cover-box article into a single grid track. Gap matches the
   section gap so the rhythm reads consistently across both columns. */
.sjm-cover-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
}

/* ── Cover-box: feature image + content + author panel (v151) ──────
   The COVER STORY top tile is now a sibling above this article inside
   .sjm-cover-left, so the cover-box only holds the image area and
   the bottom meta strip. Modest min-height keeps the box visible even
   with very short content; the right column (square logo + gap +
   search) is taller than this minimum at almost every viewport, so
   the right column drives the grid row height in two-column mode and
   the cover-box stretches via flex:1 1 auto to match. This keeps the
   left and right column bottoms flush across all breakpoints. */
.sjm-cover-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    color: #fff;
    min-height: 280px;
    min-width: 0;                             /* prevent grid-item auto-min from expanding the track */
    max-width: 100%;                          /* never exceed grid column width */
    flex: 1 1 auto;                           /* fills remaining height in .sjm-cover-left after the top strip */
}

/* Image link fills the entire image-area as the primary clickable target.
   The tag and title-link are siblings that sit above it via z-index. */
.sjm-cover-image-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
.sjm-cover-image-area {
    position: relative;
    flex: 1;
    overflow: hidden;
    min-height: 0;             /* allow flex child to shrink */
}
.sjm-cover-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.sjm-cover-image-link:hover .sjm-cover-bg { transform: scale(1.025); }
.sjm-cover-image-link:focus-visible {
    outline: 3px solid #7BC8F0;
    outline-offset: -3px;
}
.sjm-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.55) 28%,
        rgba(0,0,0,0.15) 55%,
        rgba(0,0,0,0) 75%);
    pointer-events: none;            /* let clicks pass through to image link */
}
.sjm-cover-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 28px 26px;
    z-index: 2;
    pointer-events: none;            /* container only — links re-enable below */
}
.sjm-cover-tag {
    display: inline-block;
    background: #F5C518;
    color: #1A1100;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 4px;
    margin-bottom: 12px;
    text-decoration: none;
    pointer-events: auto;            /* tag is clickable to tag page */
    transition: background 0.2s ease;
}
.sjm-cover-tag:hover { background: #FFD43A; text-decoration: none; }
.sjm-cover-title-link {
    display: block;
    color: inherit;
    text-decoration: none;
    pointer-events: auto;            /* title block is clickable to story */
}
.sjm-cover-title-link:hover { text-decoration: none; }
.sjm-cover-title-link:hover .sjm-cover-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sjm-cover-title {
    color: #fff;
    font-size: clamp(2.4rem, 3.6vw, 4.2rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    overflow-wrap: break-word;                /* prevent long titles from pushing the card wider than its column */
}
.sjm-cover-excerpt {
    color: rgba(255,255,255,0.85);
    font-size: clamp(1.3rem, 1.4vw, 1.7rem);
    line-height: 1.4;
    margin: 0;
    max-width: 64ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Top tile: standalone rounded tile sitting above the cover-box ──
   Padding-left mirrors the .sjm-section-banner (28/22/18/16 across
   default/1000/700/500) so the COVER STORY glyph's left edge always
   matches the DISCOVER and I'M HUNGRY banner glyphs below.
   Border-radius 12 matches the section banners exactly. */
.sjm-cover-top-strip {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 21px 28px;
    background: #000;
    color: #ffffff;                        /* cascades into the inline SVG via fill:currentColor */
    border-radius: 12px;                   /* matches .sjm-section-banner */
    overflow: hidden;
    flex: 0 0 auto;                        /* fixed-height tile inside .sjm-cover-left */
}
.sjm-cover-top-h2 {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    min-width: 0;
}
.sjm-cover-top-svg {
    display: block;
    height: 34px;                          /* matches .sjm-banner-image (DISCOVER / I'M HUNGRY) */
    width: auto;
    max-width: 100%;
}
.sjm-cover-top-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #F5C518;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}
.sjm-cover-top-sep {
    opacity: 0.6;
}

/* ── Meta strip (under the image) ──────────────────────────────────
   Now contains only the full-width author panel; the old
   .sjm-cover-meta-left COVER STORY block moved to the top strip. */
.sjm-cover-meta-strip {
    display: flex;
    align-items: stretch;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex: 0 0 auto;
}
.sjm-cover-meta-right {
    flex: 1 1 100%;
    background: #2D0A6B;            /* default; overridden by JS on load */
    color: #ffffff;                 /* default; overridden by JS on load */
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* ── Author component variants inside the cover meta panel ───────── */
.pca--cover { flex-shrink: 0; }
.pca--cover .pca-av {
    width: 48px;
    height: 48px;
    border-radius: 11px;            /* square-rounded, matches author pages */
    border: 2px solid var(--sjm-cover-stack-border, #2D0A6B);
}
.pca--cover.pca--multi .pca-av,
.pca--cover.pca--stack .pca-av {
    margin-left: -11px;              /* overlap */
}
.pca--cover.pca--multi .pca-av:first-child,
.pca--cover.pca--stack .pca-av:first-child {
    margin-left: 0;
}
.pca--cover .pca-more {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    background: rgba(0,0,0,0.25);
    color: currentColor;
    font-size: 1.25rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -11px;
    border: 2px solid var(--sjm-cover-stack-border, #2D0A6B);
}
.sjm-cover-byline {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.sjm-cover-byline-name {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sjm-cover-byline-name a {
    color: inherit;
    text-decoration: none;
}
.sjm-cover-byline-name a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

/* ── Right column: logo box + search CTA ─────────────────────────── */
.sjm-cover-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 100%;                          /* never exceed grid column width */
    justify-content: flex-start;              /* tiles stack from top; row stretch from grid handles the rest */
}
/* Logo tile — SQUARE (1:1) in two-column mode (v151). Driving the
   height from the width via aspect-ratio is deterministic and avoids
   the `flex:1 + min-height:0 in a column flex container with an
   implicit (grid-stretched) parent height` quirk that could
   intermittently collapse the box to zero height in some browsers.
   The single-column override below switches to 16/9 for narrow screens. */
.sjm-cover-logo-box {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}
.sjm-cover-logo-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;       /* show full wordmark, never crop */
    object-position: center;
    display: block;
    opacity: 1;
    transition: opacity 0.6s ease;
}
.sjm-cover-logo-video.sjm-cover-logo-hidden { opacity: 0; }

/* YouTube panel sits absolute over the logo and fades in when active */
.sjm-cover-youtube-wrap {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.sjm-cover-youtube-wrap.sjm-cover-yt-visible {
    opacity: 1;
    pointer-events: auto;
}
.sjm-cover-youtube-iframe,
.sjm-cover-youtube-iframe iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Click overlay — captures clicks above the iframe and opens YouTube */
.sjm-cover-youtube-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    cursor: pointer;
    display: block;
}
/* ON AIR badge */
.sjm-cover-onair-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    background: #CC2200;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    padding: 5px 9px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.sjm-cover-onair-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
    animation: sjm-cover-blink 1.4s ease-in-out infinite;
}
@keyframes sjm-cover-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Search CTA — clearly-clickable button that opens Ghost's search modal.
   v151: border-radius 12 matches the banner-tile language; the
   magnifying-glass icon pulses and scales on its own (no sweep,
   no background animation) — a focused, more exaggerated micro-
   animation that signals "click to search". */
.sjm-cover-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 18px;
    background: #2D0A6B;                          /* brand deep purple */
    border: none;
    border-radius: 12px;                          /* v151: matches banner tiles */
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    text-align: center;
}
.sjm-cover-search:hover { background: #3D1A85; transform: translateY(-1px); }
.sjm-cover-search:active { transform: translateY(0); }
.sjm-cover-search:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123,200,240,0.65);
}
.sjm-cover-search-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
    transform-origin: center;
    animation: sjm-search-icon-pulse 1.8s ease-in-out infinite;
}
/* Pulse + scale only on the icon — exaggerated so it reads as
   "interactive" without being noisy. Pauses on hover so the user
   isn't fighting a moving target. Respects prefers-reduced-motion. */
@keyframes sjm-search-icon-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.7;
    }
}
.sjm-cover-search:hover .sjm-cover-search-icon { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .sjm-cover-search-icon { animation: none; }
}
.sjm-cover-search-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ── Responsive breakpoints ──────────────────────────────────────── */

/* Top strip — own breakpoints (1000/700/500) that mirror the
   .sjm-section-banner so the COVER STORY glyph's left edge stays
   aligned with DISCOVER and I'M HUNGRY at every viewport width.
   SVG heights mirror .sjm-banner-image (34/30/26/22), and vertical
   padding is chosen so the top-strip, section banner and author
   panel all share the same total height at each breakpoint
   (76 / 68 / 60 / 52). */
@media (max-width: 1000px) {
    .sjm-cover-top-strip { padding: 19px 22px; }
    .sjm-cover-top-svg  { height: 30px; }
    .sjm-cover-top-meta { font-size: 1rem; letter-spacing: 0.1em; }
}
@media (max-width: 700px) {
    .sjm-cover-top-strip { padding: 17px 18px; gap: 12px; }
    .sjm-cover-top-svg  { height: 26px; }
    .sjm-cover-top-meta { font-size: 0.95rem; gap: 6px; }
}
@media (max-width: 500px) {
    .sjm-cover-top-strip { padding: 15px 16px; }
    .sjm-cover-top-svg  { height: 22px; }
    .sjm-cover-top-meta { font-size: 0.9rem; letter-spacing: 0.08em; gap: 5px; }
}

/* Author panel — uses the same 1000/700/500 breakpoints as the
   top strip and section banners so all three blocks stay at one
   shared height at every viewport.
   Heights: 76px (>1000) / 68 (≤1000) / 60 (≤700) / 52 (≤500). */
@media (max-width: 1000px) {
    .sjm-cover-meta-right { padding: 13px 22px; gap: 12px; }
    .pca--cover .pca-av,
    .pca--cover .pca-more { width: 42px; height: 42px; border-radius: 10px; }
    .sjm-cover-byline-name { font-size: 1.6rem; }
}
@media (max-width: 700px) {
    .sjm-cover-meta-right { padding: 13px 18px; gap: 10px; }
    .pca--cover .pca-av,
    .pca--cover .pca-more { width: 34px; height: 34px; border-radius: 8px; }
    .sjm-cover-byline-name { font-size: 1.5rem; }
}
@media (max-width: 500px) {
    .sjm-cover-meta-right { padding: 10px 16px; gap: 10px; }
    .pca--cover .pca-av,
    .pca--cover .pca-more { width: 32px; height: 32px; border-radius: 8px; }
    .sjm-cover-byline-name { font-size: 1.4rem; }
}

/* Tablet: two-column layout tightens slightly.
   v151: with the top-strip as its own tile, the cover-box's own
   min-height (280) is a floor, not the typical height — the right
   column (square logo + gap + search) is taller than 280 + top-strip
   at every two-column viewport, so the right column drives the grid
   row height and the cover-box stretches via flex:1 1 auto to match.
   This keeps the left and right column bottoms flush. */
@media (max-width: 1100px) {
    .sjm-cover-section { padding-top: 14px; }
}
@media (max-width: 1000px) {
    .sjm-cover-left { gap: 14px; }
}
@media (max-width: 700px) {
    .sjm-cover-left { gap: 12px; }
}

/* Tablet-portrait and below: switch to single column.
   The logo tile flips from square (1:1) back to 16/9 so it doesn't
   tower above the search button in narrow viewports. The home-template
   `display: none` rule near the bottom of this file hides it entirely
   for the homepage in single-column mode — but on non-home pages
   (if reused), 16/9 is the sensible fallback. */
@media (max-width: 900px) {
    .sjm-cover-section {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 12px 0 0;
    }
    .sjm-cover-left { gap: 14px; }
    .sjm-cover-box {
        min-height: 0;
        aspect-ratio: 16/12;
    }
    .sjm-cover-image-area { min-height: 240px; }
    .sjm-cover-content { padding: 20px 22px 22px; }
    .sjm-cover-title { font-size: clamp(2.2rem, 5.5vw, 3rem); }
    .sjm-cover-excerpt { font-size: 1.4rem; }

    .sjm-cover-right { gap: 12px; }
    /* Single-column: 16/9 aspect for the logo tile (was 1/1 in two-col). */
    .sjm-cover-logo-box { aspect-ratio: 16/9; }
    .sjm-cover-search { height: 48px; font-size: 1.3rem; }
}

/* Small mobile: cover-box grows to fit content rather than being
   pinned to an aspect ratio (otherwise the author panel clips). */
@media (max-width: 480px) {
    .sjm-cover-section { padding: 10px 0 0; }
    .sjm-cover-box { aspect-ratio: auto; }
    .sjm-cover-content { padding: 16px 18px 18px; }
    .sjm-cover-tag { font-size: 1rem; padding: 4px 9px; }
    .sjm-cover-title { font-size: clamp(2rem, 6vw, 2.6rem); }
    .sjm-cover-excerpt { -webkit-line-clamp: 3; }
    .sjm-cover-search { padding: 0 14px; font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE NAV CLEARANCE
   With the big masthead removed, the absolute-positioned transparent
   nav floats over the cover hero. We push the cover hero down so the
   nav sits in clean white space above it, and we recolour the right-
   side nav elements (social icons + Subscribe button) so they read
   against that white background. The left-side links keep their own
   translucent pill background and stay readable as-is.
   ═══════════════════════════════════════════════════════════════════ */
/* Legacy nav clearance — values below are always superseded by the
   higher-order rules in the NAV REDESIGN v128 block at end of file. */
.home-template .sjm-cover-section {
    padding-top: 88px;
}
@media (max-width: 900px) {
    .home-template .sjm-cover-section {
        padding-top: 72px;
    }
}

/* Right-side social icons + Subscribe button styling moved into the
   NAV REDESIGN v128 block at the bottom of this file (sitewide rules,
   no longer homepage-scoped). */

/* ═══════════════════════════════════════════════════════════════════
   NAV REDESIGN v128 — colour-coded dot + pixel jump
   ────────────────────────────────────────────────────────────────────
   Sitewide updates layered on top of Casper's .gh-head structure:
     • Nav items: 5-colour palette cycle via :nth-child(5n).
       Each item has a small dot underneath that expands into an
       underline on hover; the item itself jumps up 6px and the label
       takes the dot's colour.
     • Active page (.nav-current) shows the same extended-bar state
       so the reader always knows which section they're in.
     • Social icons: 38px white-outlined circles with brand-colour
       fill on hover (YouTube → crimson, Bluesky → bright cyan).
     • Subscribe: gold pill with deep-purple text, jumps on hover.
     • Homepage: nav gets a deep-purple rounded pill background and
       top margin so it floats over the white cover area.
     • Mobile (≤1100px): nav items collapse into burger; Subscribe
       stays visible in the top-right corner; socials hidden until
       burger opens.
   The .gh-burger styling block below this section is unchanged.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Primary nav items: dot + jump ─── */
.gh-head-menu .nav {
    background: transparent;
    padding: 0;
    flex-wrap: nowrap;
}
.gh-head-menu .nav li {
    margin: 0;
    padding: 0;
}
.gh-head-menu .nav li a {
    position: relative;
    display: inline-block;
    padding: 6px 14px 20px;
    color: #ffffff;
    font-weight: 500;
    opacity: 1;
    transition: transform .18s cubic-bezier(.5,1.6,.4,1), color .2s ease;
}

/* 5-colour palette cycle — repeats every 5 items so any nav length works */
.gh-head-menu .nav li:nth-child(5n+1) a { --sjm-dot: #00A878; } /* teal */
.gh-head-menu .nav li:nth-child(5n+2) a { --sjm-dot: #F5C518; } /* gold */
.gh-head-menu .nav li:nth-child(5n+3) a { --sjm-dot: #F4956A; } /* peach */
.gh-head-menu .nav li:nth-child(5n+4) a { --sjm-dot: #7BC8F0; } /* sky */
.gh-head-menu .nav li:nth-child(5n)   a { --sjm-dot: #C4A0E8; } /* lavender */

/* Dot underneath each item — expands to a bar on hover or when active */
.gh-head-menu .nav li a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sjm-dot, #00A878);
    transform: translateX(-50%);
    transition: width .25s ease, height .25s ease, border-radius .25s ease;
}
.gh-head-menu .nav li a:hover {
    color: var(--sjm-dot, #00A878);
    opacity: 1;
    transform: translateY(-6px);
}
.gh-head-menu .nav li a:hover::before {
    width: 75%;
    height: 3px;
    border-radius: 0;
}
/* nav-current omitted: Ghost applies it to any nav item whose URL matches
   the current page's base path, which means Search (/#/search) and Home (/)
   both get it on the homepage — causing two items to show the extended bar
   simultaneously. Hover-only is the correct trigger for this effect. */

/* ─── Social icons: bold white circles, brand-colour fill on hover ─── */
.gh-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 14px 0 0;
    min-width: 0;
}
.gh-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    opacity: 1;
    transition: transform .18s cubic-bezier(.5,1.6,.4,1), background .2s ease, border-color .2s ease;
}
.gh-social a + a { margin: 0; }
.gh-social svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    transition: fill .2s ease;
}
.gh-social a:hover {
    transform: translateY(-4px);
    opacity: 1;
}
.gh-social-youtube:hover { background: #CC2200; border-color: #CC2200; }
.gh-social-twitter:hover { background: #00B4D8; border-color: #00B4D8; }
/* class is .gh-social-twitter for legacy reasons — it's the Bluesky icon */

/* ─── Subscribe button: gold pill, deep-purple text, jumps on hover ─── */
a.gh-head-button {
    background: #F5C518;
    color: #2D0A6B;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1em;
    transition: transform .18s cubic-bezier(.5,1.6,.4,1), background .2s ease;
}
a.gh-head-button:hover {
    transform: translateY(-4px);
    background: #FFB800;
    color: #2D0A6B;
}

/* ─── Homepage-only: deep purple rounded pill floating on white ─── */
.home-template .gh-head.has-cover {
    padding-top: 28px;
    padding-bottom: 0;
}
.home-template .gh-head.has-cover .gh-head-inner {
    background: #2D0A6B;
    border-radius: 14px;
    padding: 8px 22px;
    align-items: center;
}

/* Push the cover hero down to clear the floating pill */
.home-template .sjm-cover-section {
    padding-top: 108px;
}
@media (max-width: 900px) {
    .home-template .sjm-cover-section {
        padding-top: 92px;
    }
}

/* ─── Mobile (≤1100px): burger + visible Subscribe, socials hidden ─── */
@media (max-width: 1100px) {
    /* Anchor absolute-positioned actions to the pill itself, not the outer header */
    #gh-head .gh-head-inner {
        position: relative;
        grid-template-columns: 1fr;
    }

    /* screen.css caps .gh-head-brand at max-width:200px in its base (non-responsive)
       block, and only clears it inside its own ≤900px query. We need the brand to
       fill the full 1fr column so flex-end / space-between reach the actual right
       edge of the nav — not just the 200px mark. */
    #gh-head .gh-head-brand {
        max-width: none;
    }

    /* Non-homepage: logo left, burger right across the full brand width */
    body:not(.home-template) #gh-head .gh-head-brand {
        justify-content: space-between;
    }

    /* Show burger, collapse the menu */
    .gh-burger { display: inline-block; }
    #gh-head .gh-head-menu { display: none; }

    /* Subscribe: absolutely positioned inside the pill, vertically centred.
       top:0/bottom:0 + align-items:center keeps it inside the pill at any height.
       right = inner_padding + burger(33px) + gap(8px).
       Non-homepage: .gh-head-inner has no horizontal padding → right: 41px (0+33+8).
       Homepage pill: .gh-head-inner has explicit padding per breakpoint — see below. */
    #gh-head .gh-head-actions {
        display: flex;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 41px;
        margin: 0;
        padding: 0;
        z-index: 5;
        align-items: center;
    }
    /* Homepage pill at this breakpoint: inner padding = 28px → 28+33+8 = 69px */
    .home-template #gh-head .gh-head-actions {
        right: 69px;
    }
    /* Hide social icons on mobile; they re-appear inside the burger drawer */
    #gh-head .gh-head-actions .gh-social { display: none; }

    /* Slightly tighter Subscribe pill on small screens */
    #gh-head a.gh-head-button {
        padding: 8px 16px;
        font-size: 1.4rem;
    }

    /* Homepage pill: tighter padding on mobile */
    .home-template .gh-head.has-cover {
        padding-top: 22px;
    }
    /* Horizontal padding matches .sjm-cover-top-strip / .sjm-section-banner
       padding-left at the same viewport, so the SUPERJUMP logo's left edge
       sits flush with the COVER STORY, DISCOVER and I'M HUNGRY! SVG glyphs.
       28px is the default top-strip/banner horizontal padding (which extends
       from desktop down to >1000px); narrower viewports step down via the
       three @media rules below (22 / 18 / 16). Vertical padding stays at 6px
       — mobile-tight, unchanged from before. */
    .home-template .gh-head.has-cover .gh-head-inner {
        padding: 6px 28px;
        border-radius: 12px;
    }

    /* When burger opens, return actions to the in-flow drawer layout */
    .gh-head-open #gh-head .gh-head-menu { display: flex; }
    .gh-head-open #gh-head .gh-head-actions {
        position: static;
        top: auto;
        bottom: auto;
        padding: 20px 0;
        justify-content: center;
    }
    .gh-head-open #gh-head .gh-head-actions .gh-social { display: flex; }
}

/* Pill horizontal padding tracks top-strip/banner padding-left at each
   breakpoint, keeping the SUPERJUMP logo flush with COVER STORY etc.
   Source order: these rules sit AFTER the @media (max-width: 1100px)
   block above so they win on same-specificity tie-breaks. */
@media (max-width: 1000px) {
    .home-template .gh-head.has-cover .gh-head-inner { padding: 6px 22px; }
    /* inner padding 22px → 22+33+8 = 63px */
    .home-template #gh-head .gh-head-actions { right: 63px; }
}
@media (max-width: 700px) {
    .home-template .gh-head.has-cover .gh-head-inner { padding: 6px 18px; }
    /* inner padding 18px → 18+33+8 = 59px */
    .home-template #gh-head .gh-head-actions { right: 59px; }
}
@media (max-width: 500px) {
    .home-template .gh-head.has-cover .gh-head-inner { padding: 6px 16px; }
    /* inner padding 16px → 16+33+8 = 57px */
    .home-template #gh-head .gh-head-actions { right: 57px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HAMBURGER STYLING — plain white lines on both homepage and story
   pages. No coloured circle; both templates use identical styling.
   IMPORTANT: do NOT set display here — Casper's base rule keeps the
   burger as display:none until the hamburger breakpoint. The block
   below in @media (max-width: 1100px) flips display:none → inline-flex
   at the same width that hides the full nav.
   ═══════════════════════════════════════════════════════════════════ */
.home-template .gh-burger {
    /* Plain white lines — no circle background.
       Inherits base .gh-burger dimensions from screen.css (33×33px box). */
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.home-template .gh-burger:focus,
.home-template .gh-burger:focus-visible {
    outline: none;
}
@media (max-width: 1100px) {
    .home-template .gh-burger { display: inline-flex; }
    /* Breathing room above the burger so it doesn't sit flush against
       the top of the viewport / iOS status bar. We put this on the
       header (not the burger) because Casper applies overflow:hidden
       to #gh-head at ≤900px — pushing the burger inside its container
       with margin-top causes the header to clip it. Padding on the
       header itself expands the box, so nothing is clipped. */
    .home-template #gh-head { padding-top: 22px; }
}
/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE BURGER-MENU MODE (≤1100px)

   Whenever the burger appears, show the SUPERJUMP nav logo inside the
   pill (like story pages). The logo tile in the cover section stays
   visible — the two-column layout still has room for it.

   Specificity note: screen.css hides .gh-head-logo on the homepage
   with a 0,4,0 class-only rule. Using #gh-head gives 1,3,0, which
   unconditionally wins regardless of load order.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    /* Show the nav logo in the pill */
    .home-template #gh-head.has-cover .gh-head-logo {
        display: block;
    }

    /* Logo left, burger right — same layout as story pages */
    .home-template #gh-head.has-cover .gh-head-brand,
    .home-template #gh-head .gh-head-brand {
        justify-content: space-between;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE SINGLE-COLUMN MODE (≤900px)

   When the cover section stacks to a single column the logo tile would
   appear below the Cover Story card with no useful context. Hide it so
   only the Search button remains in that slot.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .home-template .sjm-cover-logo-box {
        display: none;
    }
}