/* ==========================================================================
   blog-post.css — Single dispatch view — cinematic-dark, NVIDIA-grade
   Pairs with /pages/blog-post.html
   Hero video: /assets/video/page-blog-post.mp4 (Sora-2: brass nib + parchment)
   ========================================================================== */

.article-page {
    background-color: var(--ink);
    background-image:
        radial-gradient(ellipse 90% 60% at 50% 20%,  rgba(200, 16, 46, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 70% 80% at 50% 100%, rgba(200, 16, 46, 0.045) 0%, transparent 65%);
    color: var(--on-black);
    font-family: var(--font-body);
}

@media (min-width: 1024px) {
    .article-page { background-attachment: fixed; }
}

.article-page main {
    display: block;
    position: relative;
    background: var(--ink);
}

.article-page main > * { position: relative; z-index: 1; }

/* ============== READING PROGRESS BAR ============== */
.article-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 9000;
    background: rgba(245, 241, 232, 0.04);
    pointer-events: none;
}

.article-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, var(--red), color-mix(in oklab, var(--red) 60%, #ffb199 40%));
    box-shadow: 0 0 12px rgba(200, 16, 46, 0.45);
    transition: width 80ms linear;
}

/* ============== ARTICLE HERO ============== */
.article-hero {
    position: relative;
    overflow: hidden;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    background: var(--ink);
    isolation: isolate;
}

/* Default Sora video background until article art loads */
.article-hero .section-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    filter: saturate(0.85) contrast(1.12) brightness(0.55);
    transform: scale(1.04);
}

.article-hero .section-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(10, 10, 10, 0.40) 0%, rgba(10, 10, 10, 0.72) 60%, rgba(10, 10, 10, 0.96) 100%),
        radial-gradient(ellipse 60% 50% at 28% 28%, rgba(200, 16, 46, 0.10) 0%, transparent 60%);
}

/* Once we know article has its own image, hide the video underlay so the
   article featured_image stage is the lead visual. */
.article-hero.has-bg .section-bg-video,
.article-hero.has-bg .section-bg-overlay { display: none; }

.article-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    filter: saturate(0.78) contrast(1.10) brightness(0.48);
    transform: scale(1.04);
}

.article-hero__bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.78) 60%, rgba(10, 10, 10, 0.96) 100%),
        radial-gradient(ellipse 80% 60% at 30% 30%, rgba(200, 16, 46, 0.10) 0%, transparent 60%);
}

.article-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 220px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(10, 10, 10, 0.55) 45%,
        rgba(10, 10, 10, 0.92) 85%,
        var(--ink) 100%
    );
}

.article-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 200px 32px 120px;
}

.article-hero__loading {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--on-black-mute);
    margin: 0;
    padding: 80px 0;
}

.article-hero__loading-rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
    opacity: 0.7;
    animation: dispatch-pulse 1.8s ease-in-out infinite;
}

@keyframes dispatch-pulse {
    0%, 100% { opacity: 0.30; transform: scaleX(0.6); }
    50%      { opacity: 1.00; transform: scaleX(1.0); }
}

.article-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 32px;
}

.article-hero__rule {
    display: inline-block;
    width: 36px;
    height: 1px;
    background: var(--red);
    box-shadow: 0 0 12px rgba(200, 16, 46, 0.45);
}

.article-hero__headline {
    font: 400 clamp(2.25rem, 5vw, 4rem)/1.05 var(--font-display);
    letter-spacing: -0.022em;
    color: var(--on-black);
    margin: 0 0 32px;
    max-width: 22ch;
    text-wrap: balance;
}

.article-hero__headline em {
    font-style: italic;
    font-weight: 400;
    color: color-mix(in oklab, var(--red) 70%, var(--on-black));
}

.article-hero__lede {
    font: 400 clamp(1.0625rem, 1.4vw, 1.25rem)/1.55 var(--font-body);
    color: var(--on-black-mute);
    margin: 0 0 36px;
    max-width: 58ch;
}

.article-hero__meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-black);
    border-top: 1px solid rgba(245, 241, 232, 0.10);
    border-bottom: 1px solid rgba(245, 241, 232, 0.10);
    padding: 14px 0;
}

.article-hero__author { color: var(--on-black); }
.article-hero__date { color: var(--on-black-mute); }
.article-hero__readtime { color: var(--on-black-mute); }
.article-hero__sep { color: var(--red); opacity: 0.7; }

.article-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    padding: 14px 24px;
    border: 1px solid var(--red);
    transition: background 500ms ease, color 500ms ease, box-shadow 600ms ease;
}

.article-hero__back:hover,
.article-hero__back:focus-visible {
    background: var(--red);
    color: var(--on-black);
    box-shadow: 0 0 24px rgba(200, 16, 46, 0.30);
    outline: none;
}

.article-hero__arrow { transition: transform 300ms ease; }
.article-hero__back:hover .article-hero__arrow { transform: translateX(4px); }

/* Scroll affordance — invitation to read */
.article-hero__scroll {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 44px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--on-black-mute);
    text-decoration: none;
    transition: color 400ms ease;
}

.article-hero__scroll-line {
    display: inline-block;
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, transparent, var(--red), transparent);
    animation: dispatch-scroll-line 2.4s ease-in-out infinite;
}

.article-hero__scroll:hover,
.article-hero__scroll:focus-visible { color: var(--on-black); outline: none; }

@keyframes dispatch-scroll-line {
    0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
    50%      { transform: scaleY(1.0); opacity: 1.0; }
}

/* ============== STICKY META BAR (slim, beneath hero) ============== */
.article-stickymeta {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-top: 1px solid rgba(245, 241, 232, 0.06);
    border-bottom: 1px solid rgba(245, 241, 232, 0.06);
}

.article-stickymeta__inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.article-stickymeta__title {
    color: var(--on-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.article-stickymeta__sep { color: var(--red); opacity: 0.7; }
.article-stickymeta__readtime { color: var(--on-black-mute); flex: 0 0 auto; }

/* ============== ARTICLE BODY ============== */
.article-body {
    background: var(--ink);
    padding: 120px 0 120px;
    position: relative;
}

.article-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 64px;
    background: linear-gradient(to bottom, transparent, rgba(200, 16, 46, 0.45));
}

.article-body__inner {
    max-width: 68ch;
    margin: 0 auto;
    padding: 0 32px;
}

.article-body__rule {
    margin: 80px 0 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(245, 241, 232, 0.18), transparent);
}

.article-body__prose {
    color: var(--on-black);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.8;
}

.article-body__prose p {
    margin: 0 0 1.5em;
    color: rgba(245, 241, 232, 0.92);
    text-wrap: pretty;
}

/* Drop cap removed — caused oversized letters on multiple sections */

.article-body__prose h1,
.article-body__prose h2,
.article-body__prose h3,
.article-body__prose h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--on-black);
    letter-spacing: -0.012em;
    line-height: 1.2;
    margin: 2.4em 0 0.9em;
}

.article-body__prose h2 { font-size: 1.875rem; }
.article-body__prose h3 { font-size: 1.5rem; }
.article-body__prose h4 { font-size: 1.25rem; }

.article-body__prose em,
.article-body__prose i {
    font-style: italic;
    color: color-mix(in oklab, var(--red) 60%, var(--on-black));
}

.article-body__prose strong,
.article-body__prose b {
    color: var(--on-black);
    font-weight: 600;
}

.article-body__prose a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 16, 46, 0.40);
    transition: color 300ms ease, border-color 300ms ease;
}
.article-body__prose a:hover { border-bottom-color: var(--red); }

.article-body__prose ul,
.article-body__prose ol {
    margin: 0 0 1.5em;
    padding-left: 1.4em;
}

.article-body__prose li {
    margin: 0 0 0.6em;
    color: rgba(245, 241, 232, 0.88);
}

.article-body__prose blockquote {
    margin: 32px 0 32px 0;
    padding: 8px 0 8px 20px;
    border-left: 2px solid rgba(200, 16, 46, 0.65);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.5;
    color: var(--on-black);
    box-shadow: -8px 0 32px -16px rgba(200, 16, 46, 0.40);
}

.article-body__prose img,
.article-body__prose figure {
    max-width: 100%;
    margin: 2.4em 0;
}

.article-body__prose img {
    display: block;
    border: 1px solid rgba(245, 241, 232, 0.06);
}

.article-body__prose hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(245, 241, 232, 0.18), transparent);
    margin: 3em 0;
}

.article-body__prose code,
.article-body__prose pre {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    background: rgba(245, 241, 232, 0.06);
    color: var(--on-black);
}

.article-body__prose code {
    padding: 2px 6px;
    border-radius: 2px;
}

.article-body__prose pre {
    padding: 20px 24px;
    overflow-x: auto;
    border-left: 2px solid var(--red);
    margin: 1.8em 0;
}

/* Hairline "section break" pseudo-rule before any H2 */
.article-body__prose h2 {
    position: relative;
    padding-top: 1.4em;
    margin-top: 2em;
}

.article-body__prose h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 1px;
    background: linear-gradient(to right, var(--red), transparent);
    opacity: 0.7;
}

/* Mono-cap eyebrow rendering inside prose */
.article-body__prose .eyebrow,
.article-body__prose [data-eyebrow] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--red);
    margin: 1.2em 0 0.4em;
}

/* ============== ARTICLE FOOT ============== */
.article-foot {
    background: var(--ink);
    border-top: 1px solid rgba(245, 241, 232, 0.10);
    padding: 64px 0 96px;
}

.article-foot__inner {
    max-width: 68ch;
    margin: 0 auto;
    padding: 0 32px;
}

.article-foot__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    margin: 0 0 48px;
    padding: 0;
    border-top: 1px solid rgba(245, 241, 232, 0.06);
    border-bottom: 1px solid rgba(245, 241, 232, 0.06);
}

.article-foot__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px 22px 0;
    border-right: 1px solid rgba(245, 241, 232, 0.06);
    transition: background 500ms ease;
}

.article-foot__row:last-child { border-right: 0; }

.article-foot__row:hover {
    background: linear-gradient(to bottom, rgba(200, 16, 46, 0.04), transparent 80%);
}

.article-foot__row dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0;
    transition: letter-spacing 500ms ease;
}

.article-foot__row:hover dt { letter-spacing: 0.24em; }

.article-foot__row dd {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--on-black);
    margin: 0;
}

.article-foot__back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    padding: 14px 24px;
    border: 1px solid var(--red);
    transition: background 500ms ease, color 500ms ease, box-shadow 600ms ease;
}

.article-foot__back:hover,
.article-foot__back:focus-visible {
    background: var(--red);
    color: var(--on-black);
    box-shadow: 0 0 24px rgba(200, 16, 46, 0.28);
    outline: none;
}

.article-foot__arrow { transition: transform 300ms ease; }
.article-foot__back:hover .article-foot__arrow { transform: translateX(4px); }


/* ============== MORE DISPATCHES ============== */
.article-more {
    background: #0e0e0e;
    padding: 96px 0 120px;
    border-top: 1px solid rgba(245, 241, 232, 0.06);
}

.article-more__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}

.article-more__header {
    margin-bottom: 56px;
}

.article-more__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 18px;
}

.article-more__eyebrow .rule {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--red);
    box-shadow: 0 0 10px rgba(200, 16, 46, 0.40);
}

.article-more__headline {
    font: 400 clamp(1.875rem, 3.5vw, 2.75rem)/1.1 var(--font-display);
    letter-spacing: -0.022em;
    color: var(--on-black);
    margin: 0;
    max-width: 18ch;
}

.article-more__headline em {
    font-style: italic;
    color: color-mix(in oklab, var(--red) 70%, var(--on-black));
}

.article-more__list {
    list-style: none;
    margin: 0 0 56px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.article-more__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(245, 241, 232, 0.08);
    background: rgba(20, 20, 20, 0.50);
    transition: border-color 500ms ease, background 500ms ease, transform 500ms ease, box-shadow 600ms ease;
}

.article-more__card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    width: 0;
    background: linear-gradient(to right, var(--red), transparent);
    transition: width 700ms cubic-bezier(.2,.7,.2,1);
}

.article-more__card:hover,
.article-more__card:focus-visible {
    border-color: rgba(200, 16, 46, 0.50);
    background: rgba(28, 14, 16, 0.50);
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -16px rgba(200, 16, 46, 0.18);
    outline: none;
}

.article-more__card:hover::after,
.article-more__card:focus-visible::after { width: 100%; }

.article-more__cat {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0;
    transition: letter-spacing 500ms ease;
}

.article-more__card:hover .article-more__cat { letter-spacing: 0.24em; }

.article-more__title {
    font: 400 1.3125rem/1.3 var(--font-display);
    letter-spacing: -0.012em;
    color: var(--on-black);
    margin: 0;
    transition: color 400ms ease;
}

.article-more__card:hover .article-more__title { color: var(--red); }

.article-more__excerpt {
    font: 400 var(--text-sm)/1.55 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-more__date {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.45);
    margin: 0;
}

.article-more__readmore {
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}

.article-more__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    transition: text-shadow 500ms ease, letter-spacing 500ms ease;
}

.article-more__link:hover {
    text-shadow: 0 0 16px rgba(200, 16, 46, 0.30);
    letter-spacing: 0.18em;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 900px) {
    .article-more__list { grid-template-columns: 1fr 1fr; }
    .article-hero__inner { padding: 160px 28px 100px; }
}

@media (max-width: 640px) {
    .article-hero { min-height: 70vh; }
    .article-hero__inner { padding: 140px 24px 80px; }
    .article-hero__headline { letter-spacing: -0.02em; }
    .article-body { padding: 80px 0 80px; }
    .article-body__inner,
    .article-foot__inner { padding: 0 24px; }
    .article-body__prose { font-size: 1rem; line-height: 1.75; }
    /* Drop cap mobile override removed */
    .article-more__list { grid-template-columns: 1fr; }
    .article-foot__meta { grid-template-columns: 1fr; }
    .article-foot__row { border-right: 0; border-bottom: 1px solid rgba(245, 241, 232, 0.06); }
    .article-foot__row:last-child { border-bottom: 0; }
    .article-stickymeta__inner { padding: 10px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .article-progress__bar,
    .article-hero__loading-rule,
    .article-hero__scroll-line,
    .article-foot__row,
    .article-foot__row dt,
    .article-more__card,
    .article-more__card::after,
    .article-more__cat,
    .article-more__title,
    .article-hero__back,
    .article-hero__arrow,
    .article-foot__back,
    .article-foot__arrow,
    .article-more__link {
        animation: none !important;
        transition: none !important;
    }
    .article-hero .section-bg-video,
    .article-hero__bg { transform: none; }
}