/* ==========================================================================
   Celtics Chronicle — Ghost theme
   Ground: Garden parquet. Ink: forest green. Gold is reserved for one job:
   marking content that sits behind a membership.
   ========================================================================== */

:root {
    --parquet:       #E7D6B4;
    --parquet-dark:  #DCC79E;
    --banner:        #FCFAF4;
    --ink:           #10251B;
    --ink-soft:      #4A5C52;
    --green:         #1B5E3F;
    --green-deep:    #0C2E1F;
    --gold:          #A8762C;
    --gold-light:    #E8D3A8;
    --rule:          rgba(16, 37, 27, 0.14);
    --rule-strong:   rgba(16, 37, 27, 0.28);

    --font-display: var(--gh-font-heading, "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif);
    --font-body:    var(--gh-font-body, "Newsreader", Georgia, "Times New Roman", serif);
    --font-mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --wrap: 1180px;
    --gap: clamp(1.25rem, 3vw, 2.25rem);
    --radius: 3px;

    --shadow-sm: 0 1px 2px rgba(12, 46, 31, 0.08), 0 2px 6px rgba(12, 46, 31, 0.06);
    --shadow-md: 0 2px 4px rgba(12, 46, 31, 0.10), 0 10px 26px rgba(12, 46, 31, 0.12);
    --shadow-lg: 0 4px 8px rgba(12, 46, 31, 0.12), 0 22px 48px rgba(12, 46, 31, 0.20);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background-color: var(--parquet);
    background-image: url("../images/parquet.svg");
    background-size: 160px 160px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    font-optical-sizing: auto;
}

body.no-parquet { background-image: none; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0 0 1em; }

:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--ink); color: var(--banner);
    padding: 0.75rem 1.25rem; font-family: var(--font-mono); font-size: 0.8rem;
}
.skip-link:focus { left: 0; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* -------------------------------------------------------------- header -- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--green-deep);
    border-bottom: 3px solid var(--gold);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 68px;
    padding-block: 0.75rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--banner);
    margin-right: auto;
}

.brand-logo { max-height: 34px; width: auto; }

/* Icon-style logo sitting beside the wordmark */
.brand-logo-mark { max-height: 26px; flex: none; }

.footer-logo { max-height: 40px; width: auto; margin-bottom: 0.25rem; }

.brand-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* Small parquet block used as a wordless mark */
.brand-mark {
    width: 22px; height: 22px;
    flex: none;
    background:
        linear-gradient(90deg, var(--gold) 0 45%, transparent 45%) 0 0 / 100% 45% no-repeat,
        linear-gradient(0deg, var(--gold) 0 45%, transparent 45%) 100% 100% / 45% 100% no-repeat,
        var(--green);
    border: 1px solid var(--gold);
}

.site-nav .nav-list {
    display: flex;
    gap: 1.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--banner);
    padding-block: 0.35rem;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--gold); }
.nav-item-current a { border-bottom-color: var(--gold); }

.header-actions { display: flex; gap: 0.5rem; align-items: center; }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(252, 250, 244, 0.35);
    border-radius: var(--radius);
    padding: 0.5rem 0.6rem;
    cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 4px; }
.nav-toggle-bars i { display: block; width: 18px; height: 2px; background: var(--banner); }

/* -------------------------------------------------------------- buttons -- */

.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.btn-solid { background: var(--gold); color: var(--green-deep); }
.btn-solid:hover { background: var(--gold-light); }

.btn-ghost { color: var(--banner); border-color: rgba(252, 250, 244, 0.4); }
.btn-ghost:hover { background: rgba(252, 250, 244, 0.12); }

.btn-lg { font-size: 0.95rem; padding: 0.85rem 1.6rem; }

/* ------------------------------------------------- the signature: banner --
   A hanging championship banner. It appears only on gated content, so the
   marker itself carries the meaning rather than decorating.
   ------------------------------------------------------------------------ */

.banner-tag {
    display: inline-block;
    background: var(--gold);
    color: var(--green-deep);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem 0.75rem;
    clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
    line-height: 1;
}

.banner-tag-sm { font-size: 0.6rem; padding: 0.3rem 0.6rem 0.6rem; }
.banner-tag-lg { font-size: 0.8rem; padding: 0.6rem 1.2rem 1.1rem; }

/* ----------------------------------------------------------- structures -- */

.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section-top { padding-top: clamp(2rem, 5vw, 3rem); }

.section-head {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 3px solid var(--ink);
}

.section-head-tight { font-size: 1.1rem; margin-bottom: 1rem; }
.section-head-invert { color: var(--banner); border-bottom-color: var(--gold); }

.section-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.section-head-row .section-head { flex: 1 1 auto; }

.section-more {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 2px;
    white-space: nowrap;
}
.section-more:hover { border-bottom-color: var(--green); }
.section-more-invert { color: var(--gold-light); border-bottom-color: rgba(232, 211, 168, 0.4); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--green);
    margin-bottom: 0.5rem;
}
.eyebrow:hover { color: var(--gold); }
.eyebrow-lg { font-size: 0.78rem; }

/* --------------------------------------------------------------- ticker -- */

.ticker {
    background: var(--green);
    border-bottom: 1px solid rgba(232, 211, 168, 0.25);
    overflow: hidden;
}

.ticker-inner {
    display: flex;
    align-items: stretch;
    max-width: var(--wrap);
    margin-inline: auto;
}

.ticker-label {
    flex: none;
    display: flex;
    align-items: center;
    background: var(--gold);
    color: var(--green-deep);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-inline: clamp(1rem, 3vw, 1.5rem);
}

.ticker-rail {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.7rem clamp(1rem, 4vw, 2rem);
}
.ticker-rail::-webkit-scrollbar { display: none; }

.ticker-item {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--banner);
    text-decoration: none;
    white-space: nowrap;
}
.ticker-item:hover { color: var(--gold-light); }

.ticker-date {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-light);
}

/* ----------------------------------------------------------------- hero -- */

.hero { position: relative; margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.hero-lead { position: relative; }

.hero-media { position: relative; }

.hero-img {
    width: 100%;
    height: clamp(360px, 58vh, 620px);
    object-fit: cover;
    display: block;
}

.hero-img-fallback { background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%); }

.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(8, 26, 18, 0.94) 0%, rgba(8, 26, 18, 0.72) 34%, rgba(8, 26, 18, 0.18) 66%, rgba(8, 26, 18, 0.05) 100%);
}

.hero-copy {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
}

.hero-copy-inner { max-width: 780px; }

.hero-banner { margin-bottom: 0.85rem; }

.eyebrow-invert { color: var(--gold-light); }
.eyebrow-invert:hover { color: var(--banner); }

.hero-title {
    font-size: clamp(2.1rem, 5.6vw, 4rem);
    line-height: 1.02;
    color: var(--banner);
    margin-bottom: 0.7rem;
    text-shadow: 0 2px 20px rgba(8, 26, 18, 0.5);
}
.hero-title a { text-decoration: none; }
.hero-title a:hover { color: var(--gold-light); }

.hero-excerpt {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.5;
    color: rgba(252, 250, 244, 0.86);
    max-width: 58ch;
    margin-bottom: 0.9rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin: 0;
}

/* Secondary stories lift over the hero's lower edge */
.hero-deck {
    position: relative;
    z-index: 2;
    margin-top: clamp(-3.5rem, -5vw, -2rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.hero-deck .card { box-shadow: var(--shadow-lg); }

/* ------------------------------------------------------- main + sidebar -- */

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.section-flush { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.layout-side { position: relative; }

.side-sticky {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.side-sub {
    border-radius: var(--radius);
    padding: 1.5rem 1.35rem 1.35rem;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.side-sub .banner-tag { margin-bottom: 0.75rem; }

.side-sub-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.05;
    margin-bottom: 0.5rem;
}

.side-sub-text { font-size: 0.92rem; color: var(--green-deep); margin-bottom: 1.1rem; }

.side-sub-note {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0.8rem 0 0;
}

.side-block {
    background: var(--banner);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--ink);
    border-radius: var(--radius);
    padding: 1.25rem 1.25rem 1.35rem;
    box-shadow: var(--shadow-sm);
}

.side-head {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.9rem;
}

.ranked { list-style: none; margin: 0; padding: 0; counter-reset: rank; }

.ranked-item {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--rule);
    font-size: 0.95rem;
    line-height: 1.3;
}
.ranked-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ranked-item a { text-decoration: none; }
.ranked-item a:hover { color: var(--green); }

.ranked-num {
    flex: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--parquet-dark);
    width: 1.4rem;
}

.ranked-lock { color: var(--gold); font-size: 0.6rem; }

.topic-cloud { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--rule-strong);
    border-radius: 100px;
}
.topic-pill span { color: var(--ink-soft); }
.topic-pill:hover { border-color: var(--green); color: var(--green); }

/* ------------------------------------------------------------- list row -- */

.stack { display: flex; flex-direction: column; gap: 1.35rem; }

.row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.35rem;
    background: var(--banner);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.row:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.row.is-locked { border-left: 4px solid var(--gold); }
.row.is-locked-free { border-left: 4px solid var(--green); }

.row-media { position: relative; display: block; overflow: hidden; }

.row-img {
    width: 100%;
    height: 100%;
    min-height: 168px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.row:hover .row-img { transform: scale(1.05); }

.row-banner { position: absolute; top: 0; left: 0.85rem; }

.row-body { padding: 1.15rem 1.35rem 1.15rem 0; display: flex; flex-direction: column; }

.row-title { font-size: 1.4rem; line-height: 1.15; margin-bottom: 0.45rem; }
.row-title a { text-decoration: none; }
.row-title a:hover { color: var(--green); }

.row-excerpt { font-size: 0.98rem; color: var(--ink-soft); margin-bottom: 0.8rem; }

/* ---------------------------------------------------------------- bands -- */

.band {
    padding-block: clamp(2.5rem, 6vw, 4rem);
    border-top: 1px solid var(--rule-strong);
}
.band:nth-of-type(even) {
    background: rgba(252, 250, 244, 0.55);
    border-block: 1px solid var(--rule-strong);
}

/* ---------------------------------------------------------------- cards -- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: var(--gap);
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--banner);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card { box-shadow: var(--shadow-sm); }

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.card-media { overflow: hidden; }
.card-img { transition: transform 0.45s ease; }
.card:hover .card-img { transform: scale(1.06); }

.card.is-locked { border-top: 3px solid var(--gold); }
.card.is-locked-free { border-top: 3px solid var(--green); }

.card-media { position: relative; display: block; }

.card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card-img-fallback {
    display: block;
    background:
        linear-gradient(135deg, var(--parquet) 0%, var(--parquet-dark) 100%);
}

.card-banner { position: absolute; top: 0; left: 1rem; }

.card-body {
    padding: 1.1rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-title { font-size: 1.28rem; line-height: 1.18; margin-bottom: 0.5rem; }
.card-title a { text-decoration: none; }
.card-title a:hover { color: var(--green); }

.card-excerpt {
    font-size: 0.98rem;
    color: var(--ink-soft);
    margin-bottom: 0.9rem;
}

.card-meta {
    margin: auto 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* --------------------------------------------------------- podcast band -- */

.pod-band {
    background: var(--green-deep);
    padding-block: clamp(2.5rem, 6vw, 4rem);
    border-block: 3px solid var(--gold);
}

.pod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gap);
}

.pod-item {
    display: block;
    text-decoration: none;
    color: var(--banner);
}

.pod-art {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid rgba(232, 211, 168, 0.25);
    margin-bottom: 0.7rem;
}

.pod-art-fallback { background: var(--green); }

.pod-art-wrap { position: relative; display: block; }

.pod-play {
    position: absolute;
    right: 10px;
    bottom: 18px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: var(--shadow-md);
}
.pod-play::after {
    content: "";
    position: absolute;
    left: 13px; top: 10px;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent var(--green-deep);
}
.pod-item:hover .pod-play { background: var(--gold-light); }

.pod-item:hover .pod-art { border-color: var(--gold); }

.pod-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.pod-date {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-light);
}

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

.post { padding-block: clamp(2rem, 5vw, 3.25rem); }

.post-head { max-width: 760px; text-align: left; }

.post-title {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    margin-bottom: 0.75rem;
}

.post-standfirst {
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
}

.byline {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.byline-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
}

.byline-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
}
.byline-name a { text-decoration: none; }
.byline-name a:hover { color: var(--green); }

.byline-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.post-figure {
    margin: clamp(1.5rem, 4vw, 2.5rem) auto;
    max-width: 1100px;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.post-figure-img { width: 100%; border-radius: var(--radius); }

.post-figure figcaption {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-soft);
    margin-top: 0.6rem;
    text-align: center;
}

/* Article canvas: content sits on banner white, off the parquet */
.post-content {
    max-width: 720px;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.15rem, 4vw, 2.5rem);
    background: var(--banner);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: 1.18rem;
    line-height: 1.7;
}

.post-content > * { margin-inline: auto; }

.post-content { box-shadow: var(--shadow-md); }

.post-content > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 3.6em;
    line-height: 0.82;
    padding: 0.06em 0.1em 0 0;
    color: var(--green);
}

.post-content h2 {
    font-size: 1.7rem;
    margin-top: 2.2rem;
    margin-bottom: 0.7rem;
}

.post-content h3 {
    font-size: 1.3rem;
    margin-top: 1.8rem;
    margin-bottom: 0.55rem;
}

.post-content a { color: var(--green); text-underline-offset: 3px; }
.post-content a:hover { color: var(--gold); }

.post-content blockquote {
    margin: 1.75rem 0;
    padding: 0.35rem 0 0.35rem 1.35rem;
    border-left: 4px solid var(--gold);
    font-size: 1.3rem;
    line-height: 1.45;
    font-style: italic;
    color: var(--green-deep);
}

.post-content ul, .post-content ol { padding-left: 1.3rem; }
.post-content li { margin-bottom: 0.4rem; }

.post-content hr {
    border: 0;
    height: 1px;
    background: var(--rule-strong);
    margin: 2.5rem 0;
}

.post-content figcaption {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-soft);
    text-align: center;
    margin-top: 0.5rem;
}

/* Teaser fade before the paywall */
.post-content-teaser {
    position: relative;
    padding-bottom: 0;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    max-height: 60vh;
    overflow: hidden;
    margin-bottom: 0;
}

/* --------------------------------------------------------------- paywall --
   Asymmetric on desktop: the pitch leads, the benefit list sits alongside as
   a secondary column rather than a centred stack.
   ------------------------------------------------------------------------ */

.paywall {
    max-width: 720px;
    margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
    padding-inline: 0;
}

.paywall-inner {
    position: relative;
    background: var(--banner);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--gold);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem);
}

.paywall-flag {
    position: absolute;
    top: -4px;
    left: clamp(1.25rem, 4vw, 2.5rem);
}

.paywall-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    margin-top: 1.25rem;
}

.paywall-title {
    font-size: clamp(1.5rem, 3.6vw, 2.15rem);
    margin-bottom: 0.6rem;
}

.paywall-text {
    color: var(--ink-soft);
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
}

.paywall-price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    margin: 0.9rem 0 0.3rem;
}

.paywall-note {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.6;
}
.paywall-note a { color: var(--green); }

.paywall-benefits {
    border-left: 3px solid var(--gold);
    padding-left: clamp(1rem, 2.5vw, 1.5rem);
}

.paywall-benefits-head {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 0.75rem;
}

.benefit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.98rem;
    line-height: 1.45;
}

.benefit-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--ink);
}

.benefit-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 9px;
    height: 9px;
    background: var(--green);
}

/* ------------------------------------------------ end-of-post conversion -- */

.post-cta {
    max-width: 720px;
    margin: clamp(2rem, 5vw, 3rem) auto 0;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.post-cta-inner {
    background: var(--green-deep);
    color: var(--banner);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

.post-cta-kicker {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 0.4rem;
}

.post-cta-title {
    font-size: clamp(1.35rem, 3.2vw, 1.85rem);
    color: var(--banner);
    margin-bottom: 0.5rem;
}

.post-cta-text {
    color: rgba(252, 250, 244, 0.8);
    font-size: 1rem;
    margin-bottom: 1.25rem;
}

.post-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.btn-outline {
    color: var(--banner);
    border-color: rgba(252, 250, 244, 0.45);
}
.btn-outline:hover { background: rgba(252, 250, 244, 0.12); }

.post-cta-note {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(252, 250, 244, 0.6);
    margin: 0;
}

/* ------------------------------------------------------- tags / comments -- */

.post-tags {
    max-width: 720px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-block: 1.75rem;
}

.tag-pill {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--rule-strong);
    border-radius: 100px;
    background: var(--banner);
}
.tag-pill:hover { border-color: var(--green); color: var(--green); }

.post-comments {
    max-width: 720px;
    padding-block: 1rem 2.5rem;
}

/* ------------------------------------------------------------- comments -- */

.comments {
    background: var(--banner);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--ink);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: var(--shadow-sm);
}

.comments-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.7rem;
    margin-bottom: 1.25rem;
    border-bottom: 3px solid var(--ink);
}

.comments-title {
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.comments-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}
.comments-count:empty { display: none; }

.comments-gate {
    background: var(--parquet);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.comments-gate-text {
    font-size: 1rem;
    color: var(--green-deep);
    margin-bottom: 0.9rem;
}

.comments-gate-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.btn-quiet {
    color: var(--green-deep);
    border-color: var(--rule-strong);
}
.btn-quiet:hover { background: rgba(16, 37, 27, 0.07); }

/* The thread is Ghost's iframe: it can only be positioned, not restyled. */
.comments-thread { margin-inline: -0.35rem; }

.byline-comments {
    font-family: var(--font-mono);
    color: var(--green);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}
.byline-comments:hover { color: var(--gold); }

.meta-comments { color: var(--green); }
.meta-comments:empty { display: none; }

/* ------------------------------------------------------------- listings -- */

.listing-head {
    padding-block: clamp(2rem, 5vw, 3.25rem) 0;
    max-width: 720px;
}

.listing-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.6rem; }

.listing-desc { font-size: 1.12rem; color: var(--ink-soft); }

.listing-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.author-avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gold);
    margin-bottom: 1rem;
}

/* ----------------------------------------------------------- pagination -- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-strong);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pagination a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.pagination a:hover { color: var(--green); }
.page-number { color: var(--ink-soft); }

/* --------------------------------------------------------------- footer -- */

.parquet-band {
    background-color: var(--parquet-dark);
    background-image: url("../images/parquet.svg");
    background-size: 160px 160px;
    border-block: 3px solid var(--gold);
}

.footer-cta { padding-block: clamp(2.5rem, 6vw, 4rem); }

.footer-cta-inner { text-align: center; max-width: 620px; }

.footer-cta-title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-block: 0.75rem 0.6rem; }

.footer-cta-text { color: var(--green-deep); margin-bottom: 1.5rem; }

.footer-cta-price {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 1rem 0 0;
    color: var(--ink-soft);
}

.site-footer { background: var(--green-deep); color: var(--banner); }
.site-footer .footer-cta { color: var(--ink); }

.footer-inner {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-block: clamp(2rem, 4vw, 3rem);
}

.footer-brand { max-width: 340px; }
.footer-desc { color: rgba(252, 250, 244, 0.75); margin-top: 0.75rem; font-size: 0.98rem; }

.footer-nav .nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-nav a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(252, 250, 244, 0.85);
}
.footer-nav a:hover { color: var(--gold); }

.footer-legal {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 1.25rem;
    border-top: 1px solid rgba(252, 250, 244, 0.18);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(252, 250, 244, 0.6);
}
.footer-legal p { margin: 0; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--gold); }

/* ---------------------------------------------------------------- error -- */

.error-page { padding-block: clamp(3rem, 10vw, 6rem); text-align: center; max-width: 560px; }

.error-code {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4rem, 14vw, 8rem);
    line-height: 1;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

/* -------------------------------------------------------- Ghost content -- */

.kg-width-wide { max-width: 900px; }
.kg-width-full { max-width: 100%; }

.post-content :where(.kg-embed-card, .kg-video-card, .kg-audio-card) { margin-block: 1.75rem; }

.post-content .kg-embed-card iframe,
.post-content iframe[src*="youtube"],
.post-content iframe[src*="vimeo"] {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: var(--radius);
}

.post-content .kg-audio-card {
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--parquet);
}

.post-content .kg-callout-card {
    border-radius: var(--radius);
    border-left: 4px solid var(--gold);
}

.post-content .kg-bookmark-card a { text-decoration: none; }

/* --------------------------------------------------------- breakpoints -- */

@media (max-width: 1040px) {
    .layout { grid-template-columns: 1fr; }
    .side-sticky { position: static; flex-direction: row; flex-wrap: wrap; }
    .side-sticky > * { flex: 1 1 260px; }
}

@media (max-width: 900px) {
    .hero-deck { grid-template-columns: 1fr; margin-top: 1.5rem; }
    .hero-copy { position: static; padding: 1.5rem 0 0; }
    .hero-copy-inner { max-width: none; }
    .hero-title, .hero-excerpt { color: var(--ink); text-shadow: none; }
    .hero-title a:hover { color: var(--green); }
    .hero-excerpt { color: var(--ink-soft); }
    .hero-meta { color: var(--ink-soft); }
    .eyebrow-invert { color: var(--green); }
    .hero-scrim { display: none; }
    .hero-img { height: clamp(220px, 45vw, 340px); }
    .hero-banner { margin-top: -2.2rem; position: relative; }
}

@media (max-width: 640px) {
    .row { grid-template-columns: 1fr; }
    .row-body { padding: 1.1rem 1.2rem 1.2rem; }
    .row-img { min-height: 190px; }
}

@media (max-width: 760px) {
    .paywall-cols { grid-template-columns: 1fr; }
    .paywall-benefits { border-left: 0; border-top: 3px solid var(--gold); padding-left: 0; padding-top: 1.25rem; }
}

@media (max-width: 820px) {
    body { font-size: 17px; }

    .nav-toggle { display: block; order: 3; }

    .site-nav {
        order: 4;
        flex-basis: 100%;
        display: none;
    }
    .site-nav.is-open { display: block; }

    .site-nav .nav-list {
        flex-direction: column;
        gap: 0.25rem;
        padding-block: 0.75rem;
        border-top: 1px solid rgba(252, 250, 244, 0.2);
        margin-top: 0.5rem;
    }

    .header-inner { flex-wrap: wrap; }
    .header-actions .btn-ghost { display: none; }

    .post-content { font-size: 1.1rem; }
    .footer-inner { flex-direction: column; }
}

@media (max-width: 480px) {
    .grid { grid-template-columns: 1fr; }
    .brand-text { font-size: 1rem; }
}


/* ----------------------------------------------------------------- feed --
   A permanent conversation surface. The stream itself is Ghost's comment
   iframe; everything around it is the theme's job.
   ------------------------------------------------------------------------ */

.feed-hero {
    background: var(--green-deep);
    border-bottom: 3px solid var(--gold);
    padding-block: clamp(2rem, 5vw, 3rem);
}

.feed-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.feed-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
}

.feed-live i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold);
    animation: feed-pulse 2.4s ease-in-out infinite;
}

@keyframes feed-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
}

.feed-title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    color: var(--banner);
    margin-bottom: 0.5rem;
}

.feed-sub {
    color: rgba(252, 250, 244, 0.8);
    font-size: 1.1rem;
    max-width: 52ch;
    margin-bottom: 0.6rem;
}

.feed-stat {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin: 0;
}

.feed-hero-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.feed-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
    padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.feed-prompt {
    background: var(--parquet-dark);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.feed-prompt-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 0.5rem;
}

.feed-prompt-body { font-size: 1.08rem; line-height: 1.55; }
.feed-prompt-body > *:last-child { margin-bottom: 0; }

.feed-stream {
    background: var(--banner);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--ink);
    border-radius: var(--radius);
    padding: clamp(1.1rem, 3vw, 1.75rem);
    box-shadow: var(--shadow-sm);
}

.feed-nudge {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    padding-bottom: 0.9rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
}

.rule-list { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; line-height: 1.45; }

.rule-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.65rem;
    color: var(--ink-soft);
}
.rule-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.5em;
    width: 7px; height: 7px;
    background: var(--gold);
}

/* Homepage band */

.feed-band {
    background: var(--green);
    border-block: 3px solid var(--gold);
    padding-block: clamp(1.75rem, 4vw, 2.5rem);
    margin-block: clamp(2rem, 5vw, 3rem);
}

.feed-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.feed-band-copy { flex: 1 1 420px; }

.feed-live-invert { color: var(--gold-light); }
.feed-live-invert i { background: var(--gold-light); }

.feed-band-title {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    color: var(--banner);
    margin-bottom: 0.45rem;
}
.feed-band-title a { text-decoration: none; }
.feed-band-title a:hover { color: var(--gold-light); }

.feed-band-text {
    color: rgba(252, 250, 244, 0.82);
    max-width: 54ch;
    margin-bottom: 0.6rem;
}

.feed-band-stat {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin: 0;
}

.feed-band-cta { text-align: right; }

.feed-band-note {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(252, 250, 244, 0.65);
    margin: 0.7rem 0 0;
}

@media (max-width: 1040px) {
    .feed-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .feed-band-cta { text-align: left; }
    .feed-hero-inner { align-items: flex-start; }
}


/* --------------------------------------------------------------- search -- */

.search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    background: none;
    border: 1px solid rgba(252, 250, 244, 0.35);
    border-radius: var(--radius);
    color: var(--banner);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.search-btn:hover { background: rgba(252, 250, 244, 0.12); border-color: var(--gold); }

.search-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--parquet);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.search-field:hover { border-color: var(--green); color: var(--ink); }

.error-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}


/* ------------------------------------------------------------ image fit --
   Feature images that carry their own typography must not be cropped, so
   this mode preserves the source ratio everywhere instead of filling.
   -------------------------------------------------------------------------- */

.fit-whole .row { align-items: start; }

.fit-whole .row-media { align-self: start; }

.fit-whole .row-img {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.fit-whole .card-img,
.fit-whole .lead-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    height: auto;
}

.fit-whole .hero-img {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 620px;
    object-fit: cover;
}

.fit-whole .post-figure-img { object-fit: contain; }

/* Nudge the crop away from the top edge where overlay text usually sits */
.hero-img, .card-img, .row-img { object-position: center 40%; }


/* ------------------------------------------------ Ghost's built-in gate --
   Ghost injects its own "This post is for paying subscribers" block into
   gated posts. This theme renders a custom paywall instead, so the default
   is hidden to avoid showing two of them.
   -------------------------------------------------------------------------- */

[class*="gh-post-upgrade"],
.post-content [class*="gh-post-upgrade"],
.post-content .gh-post-upgrade-cta {
    display: none !important;
}


/* ------------------------------------------------------- access levels --
   Gold means it costs money. Green means it costs an email address.
   Outline means it costs nothing. Readers learn this at a glance.
   -------------------------------------------------------------------------- */

.banner-tag.tag-signup {
    background: var(--green);
    color: var(--banner);
}

.banner-tag.tag-open {
    background: transparent;
    color: var(--green-deep);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    clip-path: none;
    padding: 0.35rem 0.7rem;
}

.card.is-locked-free { border-top-color: var(--green); }
.row.is-locked-free { border-left-color: var(--green); }

/* On dark grounds the outline tag needs to invert */
.hero-copy .banner-tag.tag-open,
.pod-band .banner-tag.tag-open {
    color: var(--banner);
    border-color: rgba(252, 250, 244, 0.5);
}


/* --------------------------------------------------- paywall trust mark --
   Optional. Sits above the heading at the moment someone decides to pay.
   -------------------------------------------------------------------------- */

.paywall-logo {
    display: block;
    height: 44px;
    width: auto;
    margin-bottom: 1rem;
    border-radius: 3px;
}

.paywall-logo-wide { height: 34px; }

/* Fallback mark for logos designed for a dark ground: a parquet block that
   reads correctly on the paywall's light panel. */
.paywall-mark {
    display: block;
    width: 34px; height: 34px;
    margin-bottom: 1rem;
    background:
        linear-gradient(90deg, var(--gold) 0 45%, transparent 45%) 0 0 / 100% 45% no-repeat,
        linear-gradient(0deg, var(--gold) 0 45%, transparent 45%) 100% 100% / 45% 100% no-repeat,
        var(--green);
    border: 1px solid var(--gold);
    border-radius: 2px;
}


/* ------------------------------------------------------ badge legibility --
   The tag sits over photography, so it needs weight, size and separation
   from whatever is behind it.
   -------------------------------------------------------------------------- */

.banner-tag {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding: 0.5rem 0.95rem 0.85rem;
    color: #0A1F16;
    box-shadow: 0 2px 10px rgba(8, 26, 18, 0.4);
}

.banner-tag-sm { font-size: 0.68rem; padding: 0.38rem 0.7rem 0.68rem; }
.banner-tag-lg { font-size: 0.85rem; padding: 0.62rem 1.25rem 1.1rem; }

.banner-tag.tag-signup { color: var(--banner); }

.banner-tag.tag-open {
    box-shadow: none;
    background: rgba(252, 250, 244, 0.92);
}

/* Kill any stray inline whitespace between the image and the card edges */
.card-media, .row-media, .hero-media { font-size: 0; line-height: 0; }
.card-media .banner-tag, .row-media .banner-tag { font-size: 0.78rem; line-height: 1; }
.row-media .banner-tag { font-size: 0.68rem; }

/* ---- placement: under the image instead of over it ---- */

.tag-slot-below { display: none; }

.banner-tag-inline {
    clip-path: none;
    border-radius: 2px;
    padding: 0.34rem 0.7rem;
    font-size: 0.68rem;
    box-shadow: none;
}

.tag-below .card-banner,
.tag-below .row-banner { display: none; }

.tag-below .tag-slot-below {
    display: block;
    line-height: 1;
    margin-bottom: 0.6rem;
}
.tag-below .tag-slot-below:empty { display: none; }


/* ------------------------------------------------------------ promo bar --
   A price-forward membership CTA for homepage scrollers. The parquet ground
   carries the brand; the white panel floats on it so the offer reads as a
   card rather than a page section.
   -------------------------------------------------------------------------- */

.promo { padding-block: clamp(1.75rem, 4vw, 2.75rem); }

.promo-inner {
    background: var(--banner);
    border: 1px solid var(--rule);
    border-left: 8px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 2.25rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    flex-wrap: wrap;
}

.promo-copy { flex: 1 1 320px; }

.promo-title {
    font-size: clamp(1.5rem, 3.6vw, 2.25rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.promo-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
    max-width: 56ch;
}

.promo-cta {
    flex: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: var(--gold);
    color: var(--green-deep);
    text-decoration: none;
    border-radius: var(--radius);
    padding: 0.9rem 1.6rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.promo-cta:hover { background: var(--gold-light); transform: translateY(-2px); }

.promo-price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
    white-space: nowrap;
}

.promo-action {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .promo-inner { flex-direction: column; align-items: stretch; }
    .promo-cta { width: 100%; }
}


/* -------------------------------------------------- hero without a photo --
   No feature image means no empty rectangle. The hero becomes a typographic
   panel instead, so it reads as a deliberate choice rather than a gap.
   -------------------------------------------------------------------------- */

.hero-no-img {
    background-color: var(--green-deep);
    background-image: url("../images/parquet.svg");
    background-size: 160px 160px;
    background-blend-mode: soft-light;
    border-bottom: 3px solid var(--gold);
}

.hero-no-img .hero-copy {
    position: static;
    padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

.hero-no-img .hero-title,
.hero-no-img .hero-excerpt { color: var(--banner); text-shadow: none; }
.hero-no-img .hero-excerpt { color: rgba(252, 250, 244, 0.85); }
.hero-no-img .hero-meta { color: var(--gold-light); }
.hero-no-img .hero-title a:hover { color: var(--gold-light); }

/* Overlay treatment applies only where there is a photo behind the words */
.hero-has-img .hero-copy { position: absolute; }

@media (max-width: 900px) {
    .hero-no-img .hero-copy { padding-block: clamp(2rem, 8vw, 3rem); }
    .hero-no-img .eyebrow-invert { color: var(--gold-light); }
}

/* On mobile a cropped hero photo loses too much — centre it and show it whole */
@media (max-width: 700px) {
    .fit-whole .hero-img { aspect-ratio: 16 / 9; object-position: center center; }
}


/* The teaser and the paywall are one continuous panel, not two boxes */
.post-content-teaser { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.paywall { margin-top: 0; }
.paywall-cols { margin-top: 1.5rem; }


/* ---------------------------------------------------------- format tags --
   "What kind of thing is this", as distinct from the access badges, which
   answer "what does it cost". Rounded pill + icon, never the pennant shape,
   never gold — so the two systems can't be confused at a glance.
   -------------------------------------------------------------------------- */

.format-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    vertical-align: middle;
    background: var(--green-deep);
    color: var(--gold-light);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.34rem 0.7rem 0.34rem 0.6rem;
    border-radius: 100px;
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
}

.format-tag svg { flex: none; }



/* First thing in a block needs no left offset */
.eyebrow + .format-tag { margin-left: 0.55rem; }
.card-body > .format-tag:first-child,
.row-body > .format-tag:first-child { margin-left: 0; }

/* On the dark hero the pill inverts so it stays legible over the photo */
.hero-copy .format-tag {
    background: rgba(252, 250, 244, 0.16);
    color: var(--banner);
    backdrop-filter: blur(4px);
}
.hero-copy 


/* --------------------------------------- paywall side column + trust mark --
   The mark sits at the base of the right column, filling the space the
   benefit list leaves behind rather than competing with the headline.
   -------------------------------------------------------------------------- */

.paywall-cols { align-items: stretch; }

.paywall-side {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.paywall-side .paywall-benefits { border-left: 3px solid var(--gold); }

.paywall-side .paywall-logo,
.paywall-side .paywall-mark {
    margin-top: auto;
    margin-bottom: 0;
    align-self: flex-end;
    height: clamp(60px, 8vw, 84px);
    width: auto;
    padding-top: 1.25rem;
}

.paywall-side .paywall-logo-wide { height: clamp(44px, 6vw, 60px); }

.paywall-side .paywall-mark {
    width: clamp(44px, 6vw, 58px);
    height: clamp(44px, 6vw, 58px);
    padding-top: 0;
    margin-top: auto;
}

@media (max-width: 760px) {
    .paywall-side { min-height: 0; }
    .paywall-side .paywall-logo,
    .paywall-side .paywall-mark { margin-top: 1.25rem; align-self: flex-start; }
}


/* ------------------------------------------- upgrade ask for free members --
   Someone who already reads everything and hasn't paid is the warmest
   audience there is. Different copy, and a gold edge to set it apart.
   -------------------------------------------------------------------------- */

.post-cta-upgrade .post-cta-inner {
    border-left: 6px solid var(--gold);
}

.post-cta-upgrade .post-cta-kicker { color: var(--gold); }


/* ----------------------------------------------------- mid-article CTA --
   Pasted into an HTML card wherever the writer wants it. Breaks out past the
   text measure so it interrupts the scroll instead of reading as a paragraph.
   -------------------------------------------------------------------------- */

.post-content .inline-cta {
    margin: 2.5rem calc(-1 * clamp(1.15rem, 4vw, 2.5rem));
    padding: clamp(1.4rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2.25rem);
    background: var(--green-deep);
    color: var(--banner);
    border-left: 8px solid var(--gold);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.post-content .inline-cta p { margin: 0; }

.inline-cta-copy { flex: 1 1 260px; }

.post-content .inline-cta .inline-cta-kicker {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 0.4rem;
}

.post-content .inline-cta .inline-cta-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--banner);
    margin-bottom: 0.35rem;
}

.post-content .inline-cta .inline-cta-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(252, 250, 244, 0.82);
}

.post-content .inline-cta a.inline-cta-btn {
    flex: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: var(--gold);
    color: var(--green-deep);
    text-decoration: none;
    border-radius: var(--radius);
    padding: 0.85rem 1.5rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.post-content .inline-cta a.inline-cta-btn:hover {
    background: var(--gold-light);
    color: var(--green-deep);
    transform: translateY(-2px);
}

.post-content .inline-cta .inline-cta-sub {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Lighter variant for when the dark band is too heavy in a given piece */
.post-content .inline-cta.is-light {
    background: var(--parquet-dark);
    color: var(--ink);
}
.post-content .inline-cta.is-light .inline-cta-kicker { color: var(--green); }
.post-content .inline-cta.is-light .inline-cta-title { color: var(--ink); }
.post-content .inline-cta.is-light .inline-cta-text { color: var(--ink-soft); }

@media (max-width: 620px) {
    .post-content .inline-cta { flex-direction: column; align-items: stretch; }
    .post-content .inline-cta a.inline-cta-btn { width: 100%; }
}


/* An empty free preview should render nothing at all, not a blank white strip.
   This happens when a post has no Public preview divider set. */
.post-content-teaser:not(:has(> *)) { display: none; }
.post-content-teaser:not(:has(p, h2, h3, h4, ul, ol, figure, blockquote, table)) { display: none; }

/* Belt and braces for browsers without :has() — an empty teaser has no
   children, so moving the top space onto the first child collapses it. */
.post-content-teaser { padding-top: 0; }
.post-content-teaser > *:first-child { margin-top: clamp(1.5rem, 4vw, 3rem); }

/* With no teaser above it, the paywall becomes the top of the panel again */
.post-content-teaser:not(:has(> *)) + .paywall .paywall-inner,
.post-content-teaser:not(:has(p, h2, h3, h4, ul, ol, figure, blockquote, table)) + .paywall .paywall-inner {
    border-radius: var(--radius);
    border-top-width: 4px;
}


/* Full gold frame around the paywall rather than a top rule only */
.paywall-inner {
    border: 3px solid var(--gold);
    border-radius: var(--radius);
}

/* When a free preview sits above it, keep the join square so the two read
   as one panel, but hold the gold on every other edge. */
.post-content-teaser:has(> *) + .paywall .paywall-inner {
    border-top-width: 3px;
    border-radius: 0 0 var(--radius) var(--radius);
}

.post-content-teaser:has(> *) { border-color: var(--gold); border-width: 3px; border-bottom: 0; }

.paywall-flag { top: -3px; }


/* Format pills never use gold — that colour means "this costs money" and the
   two systems must stay legible apart. Icons carry the difference instead. */
.format-tag { background: var(--green-deep); color: var(--gold-light); }


/* Ghost's own paywall block — class names have moved between versions, so
   match broadly. The theme renders its own paywall instead. */
[class*="gh-post-upgrade"],
[class*="post-upgrade"],
.gh-post-upgrade-cta,
.post-content .kg-paywall-cta,
[data-members-cta] { display: none !important; }


/* ------------------------------------- inline CTA with a free option too --
   Two buttons stacked: paid on top, free beneath. The free ask is deliberately
   quieter but present — free members are where paid members come from.
   -------------------------------------------------------------------------- */

.post-content .inline-cta-actions {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}

.post-content .inline-cta-actions a.inline-cta-btn { width: 100%; }

.post-content .inline-cta a.inline-cta-btn-alt {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    background: transparent;
    color: var(--banner);
    border: 2px solid rgba(252, 250, 244, 0.45);
    text-decoration: none;
    border-radius: var(--radius);
    padding: 0.6rem 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.post-content .inline-cta a.inline-cta-btn-alt:hover {
    background: rgba(252, 250, 244, 0.12);
    border-color: var(--gold-light);
    color: var(--banner);
}

.post-content .inline-cta.is-light a.inline-cta-btn-alt {
    color: var(--green-deep);
    border-color: var(--rule-strong);
}
.post-content .inline-cta.is-light a.inline-cta-btn-alt:hover {
    background: rgba(16, 37, 27, 0.07);
    border-color: var(--green);
    color: var(--green-deep);
}

.post-content .inline-cta .inline-cta-alt-sub {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
}

@media (max-width: 620px) {
    .post-content .inline-cta-actions { width: 100%; }
}


/* --------------------------------------------------- hero, stacked layout --
   Feature images are designed thumbnails carrying their own headline, so the
   post title must not sit on top of them. Image runs full width; the copy
   sits on a panel that lifts over its lower edge — same layered depth, no
   collision, and the artwork is never covered.
   -------------------------------------------------------------------------- */

.hero-has-img .hero-scrim { display: none; }

.hero-has-img .hero-img {
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

.hero-has-img .hero-copy {
    position: static;
    padding-bottom: 0;
}

.hero-has-img .hero-copy-inner {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin-top: clamp(-4.5rem, -6vw, -2rem);
    background: var(--banner);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.4rem, 3.5vw, 2.25rem) clamp(1.4rem, 3.5vw, 2.5rem);
}

/* Copy reverts to ink on the light panel */
.hero-has-img .hero-title { color: var(--ink); text-shadow: none; }
.hero-has-img .hero-title a:hover { color: var(--green); }
.hero-has-img .hero-excerpt { color: var(--ink-soft); }
.hero-has-img .hero-meta { color: var(--ink-soft); }
.hero-has-img .eyebrow-invert { color: var(--green); }
.hero-has-img .eyebrow-invert:hover { color: var(--gold); }

/* Badges move off the artwork and into the panel */
.hero-has-img .hero-banner {
    position: static;
    margin-bottom: 0.6rem;
}
.hero-has-img .hero-copy .format-tag {
    background: var(--green-deep);
    color: var(--gold-light);
    backdrop-filter: none;
}

@media (max-width: 900px) {
    .hero-has-img .hero-copy-inner {
        margin-top: clamp(-2.5rem, -5vw, -1.25rem);
        padding: 1.25rem;
    }
}


/* ------------------------------------------------ hero, side by side ------
   Full-bleed 16:9 is ~790px tall on a wide screen — a whole viewport before
   the second story. Sitting the copy alongside the image roughly halves the
   hero's height, keeps the artwork uncropped, and still reads as the lead.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
    .hero-has-img {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
        align-items: center;
        max-width: var(--wrap);
        margin-inline: auto;
        padding-inline: clamp(1rem, 4vw, 2rem);
    }

    .hero-has-img .hero-media {
        grid-column: 1;
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow-md);
    }

    .hero-has-img .hero-copy {
        grid-column: 2;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* No overlap: his thumbnails put the players on the right edge, and a
       panel lapping over that would cover them. */
    .hero-has-img .hero-copy-inner {
        margin-top: 0;
        max-width: none;
        padding: clamp(1.25rem, 2.5vw, 1.75rem);
    }

    .hero-has-img .hero-title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
    .hero-has-img .hero-excerpt { font-size: 1rem; }

    /* The deck no longer laps over a tall image, so give it real spacing */
    .hero-deck { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
}

/* Below 900px it stacks, and the panel lifts over the image edge again */
@media (max-width: 899px) {
    .hero-has-img .hero-copy-inner { margin-top: clamp(-2.5rem, -5vw, -1.25rem); }
}


/* ------------------------------------------- open badge, legibility fix ----
   The public-access badge was given a near-white fill and, on the hero, white
   text — both written for the old dark-scrim hero. The hero copy now sits on
   a cream panel, so it disappeared. Outline everywhere, inverted only where
   the ground is genuinely dark.
   -------------------------------------------------------------------------- */

.banner-tag.tag-open {
    background: transparent;
    color: var(--green-deep);
    border: 1.5px solid var(--green);
    box-shadow: none;
}

/* Cancel the old inversion on the image-led hero (light panel) */
.hero-has-img .hero-copy .banner-tag.tag-open {
    color: var(--green-deep);
    border-color: var(--green);
    background: transparent;
}

/* Keep it inverted only where the background really is dark */
.hero-no-img .hero-copy .banner-tag.tag-open,
.pod-band .banner-tag.tag-open,
.feed-band .banner-tag.tag-open {
    color: var(--banner);
    border-color: rgba(252, 250, 244, 0.6);
    background: transparent;
}


/* ------------------------------------------ hero: clickable, overlapping --
   The hero image had no anchor, so the obvious click target did nothing —
   readers expect an article image to be a link. It is one now, with a hover
   lift, and the copy panel laps over its edge for the layered look.
   -------------------------------------------------------------------------- */

.hero-media { display: block; overflow: hidden; }
.hero-media .hero-img { transition: transform 0.45s ease; }
.hero-lead:hover .hero-img { transform: scale(1.03); }

@media (min-width: 900px) {
    .hero-has-img .hero-copy-inner {
        /* Laps ~2rem over the image's right edge. Increase for more overlap,
           set to 0 if it ever clips something in the artwork. */
        margin-left: clamp(-2.25rem, -2vw, -1rem);
        box-shadow: var(--shadow-lg);
    }
    .hero-has-img .hero-media { position: relative; z-index: 1; }
    .hero-has-img .hero-copy { position: relative; z-index: 2; }
}


/* ------------------------------------------ hero + paywall, tightened -----
   Hero was still eating most of a short viewport, and the paywall's two
   columns were being squeezed well before they stacked.
   -------------------------------------------------------------------------- */

/* --- Hero: cap the image width so the whole block stays compact --- */

.hero { padding-block: clamp(1.25rem, 2.5vw, 2rem); }

@media (min-width: 900px) {
    .hero-has-img {
        grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
        gap: clamp(1.25rem, 2.5vw, 2rem);
    }
    .hero-has-img .hero-title { font-size: clamp(1.45rem, 2.2vw, 1.95rem); }
    .hero-has-img .hero-excerpt { font-size: 0.95rem; margin-bottom: 0.7rem; }
    .hero-has-img .hero-copy-inner { padding: clamp(1.1rem, 2vw, 1.5rem); }
}

/* --- Hero on mobile: the panel is the bulk, so tighten it --- */

@media (max-width: 899px) {
    .hero-has-img .hero-copy-inner {
        margin-top: -1.5rem;
        padding: 1.1rem 1.15rem;
    }
    .hero-has-img .hero-title { font-size: clamp(1.35rem, 5.5vw, 1.8rem); }
    .hero-has-img .hero-excerpt {
        font-size: 0.95rem;
        margin-bottom: 0.6rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hero-deck { margin-top: 1.25rem; }
}

/* --- Paywall: stack sooner, and stop the benefit list wrapping to shreds --- */

@media (max-width: 900px) {
    .paywall-cols {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-top: 1.1rem;
    }
    .paywall-side { min-height: 0; }
    .paywall-benefits {
        border-left: 0;
        border-top: 2px solid var(--gold);
        padding-left: 0;
        padding-top: 1.1rem;
    }
    .paywall-side .paywall-logo,
    .paywall-side .paywall-mark {
        margin-top: 1.1rem;
        align-self: flex-start;
        height: 52px;
        padding-top: 0;
    }
    .benefit-list { font-size: 0.95rem; }
    .benefit-list li { margin-bottom: 0.6rem; padding-left: 1.35rem; }
    .paywall-title { font-size: clamp(1.35rem, 5.5vw, 1.75rem); }
    .paywall-inner { padding: clamp(1.25rem, 4vw, 1.75rem); }
    .paywall-inner .banner-tag { margin-top: -1.9rem; }
}

/* Below 480px a two-line benefit is fine; three-line wrapping is not */
@media (max-width: 480px) {
    .benefit-list li { padding-left: 1.25rem; line-height: 1.4; }
    .paywall-pitch .btn-lg { width: 100%; text-align: center; }
}