/* ============================================================================================
   THE BACKSTAGE BLOG — public pages + the contributor dashboard (page-scoped; loaded only by
   the blog/contributor views). Locked design system throughout: candy-pink field, --bb-* tokens
   only, flat warm-white surfaces with HARD 2px borders + HARD offset shadows (zero blur, zero
   glass — anti-clunk), gold = active/selected, Zilla Slab headings / Trebuchet body / VT323
   accents, ≥44px touch targets, hover = brightness only (the button law lives in components.css
   and is inherited, never redefined).
   ============================================================================================ */

body.page-blog {
    background: var(--bb-field);
}

.container--narrow {
    max-inline-size: 760px;
    margin-inline: auto;
}

/* ── the shared page header ────────────────────────────────────────────────────────────────── */
.bg {
    padding-block: var(--space-xl) var(--space-2xl);
}

.bg__head {
    text-align: center;
    margin-block-end: var(--space-xl);
}

.bg__eyebrow {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    color: var(--bb-mint);
    text-transform: lowercase;
    margin-block-end: var(--space-xs);
}

.bg__crumb {
    color: var(--bb-mint);
    text-decoration: underline;
}

.bg__crumb:hover {
    color: var(--bb-gold);
}

.bg__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.75rem, 4.5vw, 2.6rem);
    color: var(--bb-warmwhite);
    margin-block-end: var(--space-xs);
}

.bg__lead {
    color: var(--bb-gold);
    font-size: var(--fs-md);
    max-inline-size: 60ch;
    margin-inline: auto;
}

/* ── the section doors (landing) ───────────────────────────────────────────────────────────── */
.bg__sections {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    margin-block-end: var(--space-xl);
}

.bg__section-door {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    background: var(--bb-frame);
    border: 2px solid var(--bb-black);
    border-radius: var(--bb-radius);
    box-shadow: 4px 4px 0 0 var(--bb-black); /* hard offset — never blurred */
    padding: var(--space-md);
    min-block-size: 44px;
    text-decoration: none;
}

.bg__section-door:hover {
    filter: brightness(1.12); /* the button law */
}

.bg__section-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--bb-gold);
}

.bg__section-blurb {
    color: var(--bb-warmwhite);
    font-size: var(--fs-sm);
}

/* ── the article card grid ─────────────────────────────────────────────────────────────────── */
.bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.bg__latest-heading,
.tagpage__articles-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-xl);
    color: var(--bb-warmwhite);
    margin-block: var(--space-xl) var(--space-md);
}

.bg-card {
    background: var(--bb-warmwhite);
    border: 2px solid var(--bb-black);
    border-radius: var(--bb-radius);
    box-shadow: 4px 4px 0 0 var(--bb-black); /* hard offset — never blurred */
    overflow: hidden;
}

.bg-card--spotlight {
    border-color: var(--bb-gold);
    box-shadow: 4px 4px 0 0 var(--bb-gold);
}

.bg-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    min-block-size: 44px;
}

.bg-card__link:hover {
    filter: brightness(1.05); /* a whisper of the law on a light surface */
    color: inherit;
}

.bg-card__ribbon {
    display: block;
    background: var(--bb-gold);
    color: var(--bb-frame);
    font-family: var(--font-mono);
    font-size: 1rem;
    text-align: center;
    padding: var(--space-2xs) var(--space-sm);
    border-block-end: 2px solid var(--bb-black);
}

.bg-card__coverwrap {
    display: block;
    background: var(--bb-canvas);
    border-block-end: 2px solid var(--bb-black);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.bg-card__cover {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.bg-card__body {
    display: block;
    padding: var(--space-md);
}

.bg-card__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-2xs);
}

.bg-card__section {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--bb-berry);
    text-transform: uppercase;
}

.bg-card__video {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--bb-mint-text);
    background: var(--bb-mint);
    border: 1px solid var(--bb-black);
    padding: 0 var(--space-2xs);
}

.bg-card__title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--bb-frame);
    margin-block-end: var(--space-2xs);
    overflow-wrap: anywhere;
}

.bg-card__excerpt {
    display: block;
    color: var(--bb-berry-dark);
    font-size: var(--fs-sm);
    margin-block-end: var(--space-sm);
}

.bg-card__meta {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--fs-sm);
    color: var(--bb-berry);
}

.bg-card__author {
    font-weight: 700;
}

.bg-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-sm);
}

.bg-card__tag {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--bb-frame);
    background: var(--bb-dimpink);
    border: 1px solid var(--bb-frame);
    padding: 0 var(--space-2xs);
}

/* ── the tag filter + pagers + empty states ────────────────────────────────────────────────── */
.bg__tagfilter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin-block-end: var(--space-lg);
}

.bg__tagpill {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--bb-frame);
    color: var(--bb-warmwhite);
    border: 2px solid var(--bb-black);
    border-radius: var(--bb-radius);
    text-decoration: none;
    font-size: var(--fs-sm);
}

.bg__tagpill:hover {
    filter: brightness(1.12);
    color: var(--bb-warmwhite);
}

.bg__tagpill.is-active {
    background: var(--bb-gold);
    color: var(--bb-frame);
    font-weight: 700;
}

.bg__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-block-start: var(--space-xl);
}

.bg__pager-status {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    color: var(--bb-warmwhite);
}

.bg__empty {
    text-align: center;
    padding-block: var(--space-2xl);
}

.bg__empty-stars {
    color: var(--bb-gold);
    font-size: var(--fs-xl);
    letter-spacing: 0.5em;
    margin-block-end: var(--space-sm);
}

.bg__empty-copy {
    color: var(--bb-warmwhite);
    font-size: var(--fs-md);
    margin-block-end: var(--space-lg);
}

.bg__spotlight {
    margin-block-end: var(--space-lg);
}

.bg__spotlight .bg-card {
    max-inline-size: 640px;
    margin-inline: auto;
}

/* ── the author page header ────────────────────────────────────────────────────────────────── */
.bg__author-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    background: var(--bb-warmwhite);
    border: 2px solid var(--bb-black);
    border-radius: var(--bb-radius);
    box-shadow: 4px 4px 0 0 var(--bb-black);
    padding: var(--space-lg);
    max-inline-size: 640px;
    margin-inline: auto;
    text-align: start;
}

.bg__author-card .bg__title {
    color: var(--bb-frame);
    font-size: var(--fs-xl);
}

.bg__author-avatar {
    flex: 0 0 64px;
    inline-size: 64px;
    block-size: 64px;
    background: var(--bb-canvas);
    border: 2px solid var(--bb-black);
    overflow: hidden;
}

.bg__author-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

.bg__author-bio {
    color: var(--bb-berry-dark);
    margin-block: var(--space-2xs) var(--space-sm);
}

.bg__author-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.bg__author-link {
    color: var(--bb-berry);
    text-decoration: underline;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
}

.bg__author-link:hover {
    color: var(--bb-gold);
}

/* ── THE ARTICLE PAGE ──────────────────────────────────────────────────────────────────────── */
.ba {
    padding-block: var(--space-xl) var(--space-2xl);
}

.ba__head {
    text-align: center;
    margin-block-end: var(--space-lg);
}

.ba__eyebrow {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    color: var(--bb-mint);
    margin-block-end: var(--space-xs);
}

.ba__spotlight {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    color: var(--bb-gold);
}

.ba__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    color: var(--bb-warmwhite);
    margin-block-end: var(--space-xs);
    overflow-wrap: anywhere;
}

.ba__byline {
    color: var(--bb-warmwhite);
}

.ba__author {
    color: var(--bb-gold);
    font-weight: 700;
    text-decoration: underline;
}

.ba__author:hover {
    filter: brightness(1.12);
    color: var(--bb-gold);
}

.ba__credit {
    color: var(--bb-warmwhite);
    font-size: var(--fs-sm);
    margin-block-start: var(--space-2xs);
}

.ba__credit a {
    color: var(--bb-gold);
}

/* the reading surface: one flat warm-white sheet, hard-edged */
.ba__body,
.ba__coverfig {
    background: var(--bb-warmwhite);
    border: 2px solid var(--bb-black);
    border-radius: var(--bb-radius);
    box-shadow: 4px 4px 0 0 var(--bb-black);
}

.ba__coverfig {
    margin-block-end: var(--space-lg);
    overflow: hidden;
}

.ba__coverimg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.ba__body {
    padding: var(--space-xl);
    color: var(--bb-black);
    font-size: var(--fs-md);
    line-height: 1.7;
}

.ba__p {
    margin-block-end: var(--space-md);
    overflow-wrap: anywhere;
}

.ba__h {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--bb-frame);
    margin-block: var(--space-lg) var(--space-sm);
}

h2.ba__h { font-size: var(--fs-xl); }
h3.ba__h { font-size: var(--fs-lg); }

.ba__quote {
    border-inline-start: 4px solid var(--bb-gold);
    background: var(--bb-dimpink);
    padding: var(--space-sm) var(--space-md);
    margin-block: var(--space-md);
    font-style: italic;
    color: var(--bb-frame);
}

.ba__quote p { margin: 0; }

.ba__figure {
    margin-block: var(--space-lg);
    border: 2px solid var(--bb-black);
}

.ba__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.ba__caption {
    display: block;
    background: var(--bb-dimpink);
    border-block-start: 2px solid var(--bb-black);
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--fs-sm);
    color: var(--bb-frame);
}

.ba__credit,
.ba__creditline {
    font-family: var(--font-mono);
    font-size: 1rem;
}

.ba__caption .ba__credit,
.ba__creditline {
    margin-inline-start: var(--space-sm);
    color: var(--bb-berry);
}

.ba__divider {
    border: 0;
    border-block-start: 2px solid var(--bb-frame);
    margin-block: var(--space-lg);
}

/* the responsive 16:9 privacy-enhanced embed */
.ba__video {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    border: 2px solid var(--bb-black);
    border-radius: var(--bb-radius);
    background: var(--bb-black);
    margin-block: var(--space-lg);
    overflow: hidden;
}

.ba__video iframe {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    display: block;
}

.ba__body .ba__video {
    margin-block: var(--space-md);
}

.ba__body a {
    color: var(--bb-berry);
    text-decoration: underline;
}

.ba__body a:hover {
    color: var(--bb-berry-dark);
}

.ba__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-md);
}

.ba__impressions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-block-start: var(--space-lg);
}

.ba__back {
    margin-block-start: var(--space-xl);
    text-align: center;
}

/* ── the contributor dashboard ─────────────────────────────────────────────────────────────── */
.ct__toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
}

.ct__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-inline-size: 760px;
    margin-inline: auto;
}

.ct__row {
    background: var(--bb-warmwhite);
    border: 2px solid var(--bb-black);
    border-radius: var(--bb-radius);
    box-shadow: 4px 4px 0 0 var(--bb-black);
    padding: var(--space-md);
}

.ct__rowmain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-end: var(--space-sm);
}

.ct__status {
    font-family: var(--font-mono);
    font-size: 1rem;
    text-transform: uppercase;
    border: 2px solid var(--bb-black);
    padding: 0 var(--space-2xs);
    background: var(--bb-dimpink);
    color: var(--bb-frame);
}

.ct__status--published { background: var(--bb-mint); color: var(--bb-mint-text); }
.ct__status--submitted { background: var(--bb-gold); color: var(--bb-frame); }
.ct__status--unpublished { background: var(--bb-berry); color: var(--bb-warmwhite); }

.ct__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--bb-frame);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ct__title:hover {
    color: var(--bb-berry);
}

.ct__section {
    color: var(--bb-berry);
    font-size: var(--fs-sm);
}

.ct__note {
    background: var(--bb-dimpink);
    border: 2px solid var(--bb-frame);
    padding: var(--space-2xs) var(--space-sm);
    color: var(--bb-frame);
    font-size: var(--fs-sm);
    margin-block-end: var(--space-sm);
}

.ct__rowactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.ct__inline {
    display: inline-flex;
}

.ct__afterform {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-block-start: var(--space-md);
}

/* ── small screens ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .bg__sections {
        grid-template-columns: 1fr;
    }

    .ba__body {
        padding: var(--space-md);
    }

    .bg__author-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}