/* 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 {
    grid-template-columns: repeat(4, 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, 1fr);
    }
}

/* Tablet: 2 columns */
@media (max-width: 700px) {
    .hungry-feed {
        grid-template-columns: repeat(2, 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;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

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

.spotlight-story-readtime {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
}

.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 {
        font-size: 1rem;
    }
}



.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 card hover zoom — applies to all post-card tiles
   (Cover Story, Discover, I'm Hungry)
   GPU-composited transform only — no layout or paint cost
   ============================================================ */
.post-card-image {
    transition: transform 0.5s ease;
}

.post-card-image-link:hover .post-card-image {
    transform: scale(1.05);
}


/* ============================================================
   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: 50%;
    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: 50%;
    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;
}

.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;
}

.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: 50%;
    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: 680px;
    margin: 0 auto;
    position: relative;
}

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

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

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

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

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

/* Opening paragraph — slightly larger, gentle intro */
.contact-body > p:first-of-type {
    font-family: var(--font-sans-serif);
    font-size: 2rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 4rem;
}

/* Body text */
.contact-body {
    font-family: var(--font-sans-serif);
    font-size: 1.7rem;
    line-height: 1.8;
    color: #444;
}

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

/* Section headings (h3 with emoji) */
.contact-body h3 {
    font-family: var(--font-sans-serif);
    font-size: 2.2rem;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.01em;
    margin: 4rem 0 1.6rem;
    padding-top: 4rem;
    border-top: 1px solid #eee;
}

/* First h3 — no top border/padding since the intro text handles that separation */
.contact-body h3:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Bullet lists */
.contact-body ul {
    margin: 0 0 1.8rem;
    padding-left: 2rem;
}

.contact-body li {
    margin-bottom: 1rem;
    line-height: 1.7;
}

/* Links */
.contact-body a {
    color: #0D0A1A;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-body a:hover {
    color: #CC2200;
}

/* Responsive */
@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 h3    { font-size: 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 HERO — two-column homepage hero
   Left:  feature image + tag/title/excerpt + COVERSTORY SVG (inverted)
          + author panel (colour cycles on each page load)
   Right: animated logo (rotates with random muted YouTube video) +
          search CTA opening Ghost's search modal
   ═══════════════════════════════════════════════════════════════════ */

.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 */
}

/* ── Cover-box: structural wrapper (no longer a link itself) ─────── */
.sjm-cover-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    color: #fff;
    min-height: 460px;
    min-width: 0;                             /* prevent grid-item auto-min from expanding the track */
    max-width: 100%;                          /* never exceed grid column width */
}

/* 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 strip (inside the image area) ──────────────────────────
   COVER STORY SVG on the left + date · reading-time on the right.
   Padding-left mirrors the .sjm-section-banner (28/22/18/16 across
   1000/700/500) so the COVER STORY glyph's x-position always
   matches the DISCOVER and I'M HUNGRY banner glyphs below. */
.sjm-cover-top-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;                            /* above .sjm-cover-bg (z:0) and .sjm-cover-overlay (no z) */
    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-bottom: 0.5px solid rgba(245, 197, 24, 0.35);   /* hairline gold rule */
    pointer-events: none;                  /* clicks pass through to the image link beneath */
}
.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 */
}
.sjm-cover-logo-box {
    position: relative;
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    min-height: 0;
}
.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 — a clearly-clickable button that opens Ghost's search modal */
.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: 26px;
    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;
}
.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 */
@media (max-width: 1100px) {
    .sjm-cover-section { padding-top: 14px; }
    .sjm-cover-box { min-height: 420px; }
}

/* Tablet-portrait and below: switch to single column.
   Raised from 720px → 900px so two columns only appear where both
   have room to breathe; at 720–900px the right column was too narrow.
   Author-panel sizing is handled by the 1000/700/500 block above
   so the three meta blocks stay at one shared height. */
@media (max-width: 900px) {
    .sjm-cover-section {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 12px 0 0;
    }
    .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; }
    /* Fix: flex:1 + aspect-ratio:16/9 in an unconstrained column flex container
       causes a circular sizing dependency. flex:none + width:100% gives
       aspect-ratio a definite width to derive height from cleanly. */
    .sjm-cover-logo-box { flex: none; width: 100%; 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;
    }
}