/* ══════════════════════════════════════════
   BLOG — page styles
   Values from DESIGN.md: gold set, Forum/EB Garamond/Source Sans 3,
   card surfaces, signature easings.
   Two tiers: Aurelius cards carry the gold identity, field cards
   (external work) sit on a cooler neutral surface.
   ══════════════════════════════════════════ */

.blog-page {
    padding: 140px 0 96px;
}

/* ── Lift page content above the fixed constellation canvas ── */
.blog-page,
#quote-slot,
#footer-slot {
    position: relative;
    z-index: 1;
}

/* ── Page header: title + domain filters ── */
.blog-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.blog-title {
    font-family: 'Forum', Georgia, serif;
    font-weight: 400;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: #fff;
    margin: 0 0 12px;
}

.blog-sub {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.4;
    color: #FFFFFF;
    max-width: 52ch;
}

/* Subheader domain keywords — same hues as filter tabs and card tags */
.blog-sub-domain--alignment { color: #8FBF9A; }
.blog-sub-domain--interpretability { color: #A99BD6; }
.blog-sub-domain--world-models { color: #6FB8AD; }

.blog-hairline {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200, 169, 110, 0.6), transparent);
    margin: 28px 0 56px;
}

/* ── Filter bar: domain row + content-type row ── */
.blog-filterbar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.blog-filters {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.w-filter {
    appearance: none;
    background: none;
    border: none;
    padding: 8px 4px;
    cursor: pointer;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(232, 224, 212, 0.5);
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
}

.w-filter:hover {
    color: rgba(232, 224, 212, 0.85);
}

.w-filter--active {
    color: #C8A96E;
    border-bottom-color: #C8A96E;
}

/* Colored filter tabs (hover + active take the tag's color).
   Domains: alignment green, interpretability violet, world models teal.
   Types: research steel blue, infrastructure burnt orange, essay parchment, video red. */
.w-filter.wf-alignment:hover, .w-filter.wf-alignment.w-filter--active { color: #8FBF9A; border-bottom-color: #8FBF9A; }
.w-filter.wf-interpretability:hover, .w-filter.wf-interpretability.w-filter--active { color: #A99BD6; border-bottom-color: #A99BD6; }
.w-filter.wf-world-models:hover, .w-filter.wf-world-models.w-filter--active { color: #6FB8AD; border-bottom-color: #6FB8AD; }
.w-filter.wf-infrastructure:hover, .w-filter.wf-infrastructure.w-filter--active { color: #CD8452; border-bottom-color: #CD8452; }
.w-filter.wf-research:hover, .w-filter.wf-research.w-filter--active { color: #94A9C6; border-bottom-color: #94A9C6; }
.w-filter.wf-article:hover, .w-filter.wf-article.w-filter--active { color: #D8CBAD; border-bottom-color: #D8CBAD; }
.w-filter.wf-video:hover, .w-filter.wf-video.w-filter--active { color: #C98A8A; border-bottom-color: #C98A8A; }

/* ── Split layout: spotlight carousel left, timeline right
      (left slightly dominant so the single highlighted card reads big) ── */
.blog-split {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

/* Spotlight column rides sticky beside the timeline when the timeline
   drives the container height: centered on screen while shorter than
   the viewport; direction-aware when taller (top nudged per scroll
   frame by blog.js, so no transition here — it would lag). With the
   timeline in its own scroll box below, this is usually inert, but it
   keeps the column behaving if the balance ever flips back. */
@media (min-width: 992px) {
    .blog-highlights {
        position: sticky;
        align-self: start;
    }

    /* The timeline pins to the viewport; the TIMELINE header stays
       put while only the card feed below it scrolls. While the PAGE
       scrolls, blog.js nudges the feed's scrollTop by the same delta,
       so both columns glide together until the page bottoms out; from
       there the timeline scrolls manually, and wheel input over it
       stays contained. */
    .blog-feed {
        position: sticky;
        top: 104px;
        align-self: start;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 140px);
    }

    .blog-feed .w-colhead {
        flex-shrink: 0;
    }

    .w-feed {
        overflow-y: auto;
        min-height: 0;
        overscroll-behavior: contain; /* timeline scroll never bleeds into the page */
        padding-right: 14px;
        /* Headroom for the cards' hover lift (translateY(-4px) + border):
           without it the scrollbox clips the top card's upper edge on
           hover. The negative margin cancels the visual shift. */
        padding-top: 7px;
        margin-top: -7px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.06);
    }

    .w-feed::-webkit-scrollbar {
        width: 8px;
    }

    .w-feed::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 4px;
    }

    .w-feed::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.22);
        border-radius: 4px;
    }

    .w-feed::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.35);
    }
}

/* Column headers, centered over each column */
.w-colhead {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    text-indent: 0.4em; /* balances the trailing letter-spacing so text truly centers */
    color: #fff;
    text-align: center;
    margin-bottom: 24px;
}

.w-highlight-group {
    margin-bottom: 42px;
}

.w-highlight-group:last-child {
    margin-bottom: 0;
}

/* ── Highlight group headings: big serif label in the domain color,
      hairline fading out to the right ── */
.w-group-head {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Forum', Georgia, serif;
    font-weight: 400;
    font-size: clamp(23px, 2.2vw, 29px);
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
}

.w-group-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, currentColor, transparent);
    opacity: 0.3;
}

.w-group-head--gold { color: #C8A96E; }
.w-group-head--alignment { color: #8FBF9A; }
.w-group-head--interpretability { color: #A99BD6; }
.w-group-head--world-models { color: #6FB8AD; }

/* Highlight card outlines take their group's domain color
   (From Aurelius keeps the gold card border). On media cards the
   frame lives on the text block (.w-card-body), so color that too. */
/* (.blog-highlights prefix keeps these ahead of the generic media-card
   frame rule below, so the colors show at rest, not just on hover) */
.blog-highlights .w-hg--alignment :is(.w-card, .w-card--media .w-card-body) { border-color: rgba(143, 191, 154, 0.6); }
.blog-highlights .w-hg--alignment :is(.w-card:hover, .w-card:hover .w-card-body) { border-color: rgba(143, 191, 154, 0.78); }
.blog-highlights .w-hg--interpretability :is(.w-card, .w-card--media .w-card-body) { border-color: rgba(169, 155, 214, 0.6); }
.blog-highlights .w-hg--interpretability :is(.w-card:hover, .w-card:hover .w-card-body) { border-color: rgba(169, 155, 214, 0.78); }
.blog-highlights .w-hg--world-models :is(.w-card, .w-card--media .w-card-body) { border-color: rgba(111, 184, 173, 0.6); }
.blog-highlights .w-hg--world-models :is(.w-card:hover, .w-card:hover .w-card-body) { border-color: rgba(111, 184, 173, 0.78); }

/* Highlight column: thicker outlines (timeline keeps base 2px / 1px) */
.blog-highlights .w-card:not(.w-card--field),
.blog-highlights .w-featured {
    border-width: 3px;
}

.blog-highlights .w-card--field {
    border-width: 2px;
}

/* ── Featured card (Aurelius flagship) ── */
.w-featured {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 30px 20px;
    margin-bottom: 28px;
    background: #1F1D1D;
    border: 2px solid rgba(200, 169, 110, 0.38);
    border-radius: 20px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.7s cubic-bezier(.19, 1, .22, 1), box-shadow 0.7s cubic-bezier(.19, 1, .22, 1), border-color 0.3s ease;
}

.w-featured:hover {
    transform: translateY(-5px);
    border-color: rgba(200, 169, 110, 0.58);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 50px -12px rgba(201, 184, 150, 0.18);
}

.w-featured-title {
    font-family: 'Forum', Georgia, serif;
    font-weight: 400;
    font-size: clamp(23px, 2.2vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 0 10px;
    transition: color 0.3s ease;
}

.w-featured:hover .w-featured-title {
    color: #E0CB9A;
}

.w-featured-summary {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 62ch;
}

/* ── Timeline feed (right column): a vertical date spine runs down
      the gutter side; each month is a node on the spine with its
      cards aligned beside it ── */
.w-feed-group {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
}

.w-feed-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 28px;
    min-width: 0;
}

.w-feed-group:last-child .w-feed-cards {
    padding-bottom: 0;
}

.w-feed-rail {
    position: relative;
    padding-right: 18px;
}

/* The spine itself; gold-tinted hairline, continuous across groups,
   fading out at the end */
.w-feed-rail::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px;
    width: 1px;
    background: rgba(200, 169, 110, 0.22);
}

.w-feed-group:first-child .w-feed-rail::before {
    top: 9px;
}

.w-feed-group:last-child .w-feed-rail::before {
    background: linear-gradient(to bottom, rgba(200, 169, 110, 0.22) 40%, transparent);
}

/* Gold circle node where each month begins; year-boundary months
   get a slightly larger, brighter one */
.w-feed-rail::after {
    content: '';
    position: absolute;
    top: 7px;
    right: 9.5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(200, 169, 110, 0.85);
    box-shadow: 0 0 8px rgba(200, 169, 110, 0.35);
}

.w-feed-rail--year::after {
    top: 6px;
    right: 8.5px;
    width: 8px;
    height: 8px;
    background: #C8A96E;
    box-shadow: 0 0 12px rgba(200, 169, 110, 0.55);
}

.w-feed-month {
    text-align: right;
    line-height: 1.35;
    font-family: 'Source Sans 3', system-ui, sans-serif;
}

.w-feed-month-m {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(232, 224, 212, 0.8);
}

/* Serif year marker, shown only where the year changes */
.w-feed-year {
    display: block;
    margin-top: 1px;
    font-family: 'Forum', Georgia, serif;
    font-size: 17px;
    letter-spacing: 0.04em;
    color: #C8A96E;
}

/* Card body wrapper (text block above optional media) */
.w-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    flex: 1;
}

/* ── Cards ── */
.w-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 16px;
    background: #1F1D1D;
    border: 2px solid rgba(200, 169, 110, 0.35);
    border-radius: 16px;
    text-decoration: none;
    transition: transform 0.7s cubic-bezier(.19, 1, .22, 1), box-shadow 0.7s cubic-bezier(.19, 1, .22, 1), border-color 0.3s ease;
}

.w-card:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 169, 110, 0.55);
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.8), 0 0 40px -14px rgba(201, 184, 150, 0.14);
}

/* Field cards: external work on a cooler, quieter surface */
.w-card--field {
    background: #1A1919;
    border: 1px solid rgba(232, 224, 212, 0.12);
}

.w-card--field:hover {
    border-color: rgba(232, 224, 212, 0.28);
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.8);
}

/* Compact timeline variant */
.w-card--mini {
    padding: 18px 20px 16px;
    border-radius: 14px;
    align-items: stretch;
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.w-card--mini .w-card-meta,
.blog-highlights .w-featured .w-card-meta,
.blog-highlights .w-card .w-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    min-width: 0;
    max-width: 100%;
}

.w-card--mini .w-card-meta-tags,
.blog-highlights .w-featured .w-card-meta-tags,
.blog-highlights .w-card .w-card-meta-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta .w-domains {
    gap: 0;
    min-width: 0;
    overflow: hidden;
    flex-shrink: 1;
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-badge,
:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip,
:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-domain {
    flex-shrink: 0;
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-domains .w-domain {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.w-card--mini .w-card-title {
    font-size: 19px;
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.w-card--mini:hover .w-card-title,
.w-card--mini:focus-visible .w-card-title {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
}

/* Timeline cards keep the summary tucked away; hovering expands the
   card to reveal it. Devices without hover show it statically. */
.w-card--mini .w-card-summary {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    transition: max-height 0.55s cubic-bezier(.19, 1, .22, 1), opacity 0.4s ease, margin 0.4s ease;
}

/* The cap only exists so the reveal can animate (max-height cannot
   transition to auto); keep it comfortably above the tallest summary
   at any hover-capable width so text never clips. */
.w-card--mini:hover .w-card-summary,
.w-card--mini:focus-visible .w-card-summary {
    max-height: 300px;
    opacity: 1;
    margin-top: 8px;
}

@media (hover: none) {
    .w-card--mini .w-card-summary {
        max-height: none;
        opacity: 1;
        margin-top: 8px;
    }
    .w-card--mini .w-card-title {
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
    }
    .blog-highlights .w-card .w-card-title {
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
    }
}

/* ── Media cards (highlighted works with media): the card stretches
      vertically, text on top, asset embedded below inside the same
      border ── */
.w-card--media,
.w-featured--media {
    padding: 0;
    overflow: hidden;
}

.w-card--media .w-card-body {
    padding: 20px 24px 16px;
}

.w-featured--media .w-card-body {
    padding: 24px 30px 20px;
}

.w-card-media {
    position: relative;
    display: block;
    width: 100%;
    background: #141312;
}

/* ── Highlight cards with media: the colored frame wraps only the
      text block and STOPS where the asset begins (a border running
      around the artwork read inconsistently across assets). The card
      container goes transparent; the body carries the frame; the
      asset below keeps its own rounded bottom corners. ── */
.blog-highlights :is(.w-card--media, .w-featured--media) {
    border: none;
    background: none;
}

/* Top + sides only: the frame flows straight into the asset with no
   dividing line where they meet */
.blog-highlights .w-card--media .w-card-body {
    background: #1A1919;
    border: 2px solid rgba(232, 224, 212, 0.12);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
}

.blog-highlights .w-featured--media .w-card-body {
    background: #1F1D1D;
    border: 3px solid rgba(200, 169, 110, 0.38);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
}

.blog-highlights .w-featured--media:hover .w-card-body {
    border-color: rgba(200, 169, 110, 0.58);
}

.blog-highlights :is(.w-card--media, .w-featured--media) .w-card-media {
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

.blog-highlights .w-featured--media .w-card-media {
    border-radius: 0 0 20px 20px;
}

/* Images keep their natural aspect ratio, full width, no cropping */
.w-card-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* Local muted loop keeps its natural aspect ratio, like images */
.w-card-media--loop video {
    width: 100%;
    height: auto;
    display: block;
}

/* Stacked carousel blocks fill the spotlight column; generous gap so
   each highlighted work gets room to breathe */
.w-carousel-block {
    margin-bottom: 48px;
}

.w-carousel-block:last-child {
    margin-bottom: 0;
}

/* ── Highlight carousel: slides share one grid cell and crossfade
      while the container's height morphs to the active card (height
      set by blog.js); gold line indicators switch slides ── */
.w-carousel-slides {
    display: grid;
    overflow: hidden;
    transition: height 0.8s cubic-bezier(.19, 1, .22, 1);
}

.w-carousel-slide {
    grid-area: 1 / 1;
    align-self: start; /* keep natural height so the morph can measure it */
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(0.985);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.19, 1, .22, 1), visibility 0s linear 0.7s;
}

.w-carousel-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 0.7s ease 0.1s, transform 0.8s cubic-bezier(.19, 1, .22, 1) 0.1s;
}

/* Slides carry their own group heading; the group's outer margins
   belong to the carousel frame instead */
.w-carousel-slide .w-highlight-group,
.w-carousel-slide .w-featured {
    margin-bottom: 0;
}

/* Indicator lines: short faint dashes that stretch and turn gold.
   They overlay the right end of the group heading row (the heading's
   hairline fades out there), so they take up no vertical space. */
.w-carousel {
    position: relative;
}

.w-carousel-dots {
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.w-dot {
    appearance: none;
    border: none;
    background: none;
    padding: 6px 2px; /* generous hit area around the thin line */
    line-height: 0;
    cursor: pointer;
}

.w-dot::before {
    content: '';
    display: block;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background: rgba(232, 224, 212, 0.25);
    transition: width 0.45s cubic-bezier(.19, 1, .22, 1), background 0.3s ease, box-shadow 0.3s ease;
}

.w-dot:hover::before {
    background: rgba(200, 169, 110, 0.55);
}

.w-dot.is-active::before {
    width: 26px;
    background: #C8A96E;
    box-shadow: 0 0 12px rgba(200, 169, 110, 0.45);
}

/* Prev/next arrows: bare chevrons floating clear of the card edges,
   vertically centered (generous invisible hit area, no chrome) */
.w-car-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 56px;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.25s ease;
}

.w-car-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    border-top: 2.5px solid rgba(232, 224, 212, 0.85);
    border-right: 2.5px solid rgba(232, 224, 212, 0.85);
    transition: border-color 0.25s ease;
}

/* The page gutter is only ~20px at most widths (container pad 16px,
   overflow-x hidden), so the chevrons sit just clear of the card
   border by default and move further out only when the viewport
   actually has the room. */
.w-car-arrow--prev {
    left: -32px;
}

.w-car-arrow--prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.w-car-arrow--next {
    right: -32px;
}

.w-car-arrow--next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

@media (min-width: 1560px) {
    .w-car-arrow--prev { left: -52px; }
    .w-car-arrow--next { right: -52px; }
}

.w-car-arrow:hover {
    opacity: 1;
}

.w-car-arrow:hover::before {
    border-color: #C8A96E;
}

/* Phones: no gutter to borrow, so the bare chevrons tuck slightly
   over the card edge (no chrome, so it stays unobtrusive) */
@media (max-width: 768px) {
    .w-car-arrow--prev { left: -12px; }
    .w-car-arrow--next { right: -12px; }
}

/* Videos sit in a proper 16:9 frame */
.w-card-media--video {
    aspect-ratio: 16 / 9;
    cursor: pointer;
}

.w-card-media--video img,
.w-card-media--video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}

/* Play button over the facade thumbnail */
.w-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 66px;
    height: 46px;
    border: none;
    border-radius: 12px;
    background: rgba(20, 19, 18, 0.75);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.w-play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #fff;
}

/* Hover matches YouTube's own player: red button, white triangle */
.w-card-media--video:hover .w-play {
    background: #FF0000;
    transform: translate(-50%, -50%) scale(1.06);
}

.w-card-media--video:hover .w-play::after {
    border-left-color: #fff;
}

.w-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 11px;
}

.w-card-title {
    font-family: 'Forum', Georgia, serif;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.w-card:hover .w-card-title {
    color: #E0CB9A;
}

.blog-highlights .w-card .w-card-title {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-highlights .w-card:hover .w-card-title,
.blog-highlights .w-card:focus-visible .w-card-title {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
}

.w-card--field:hover .w-card-title {
    color: rgba(232, 224, 212, 0.95);
}

/* Summaries always render in full; timeline cards hide/reveal theirs
   with the max-height animation above, never by clamping lines. */
.w-card-summary {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
}

/* Left-column spotlight cards only (timeline mini cards keep 15px above) */
.blog-highlights .w-card .w-card-summary {
    font-size: 17px;
    line-height: 1.45;
}

/* ── Chips, badges, domain tags ──
   Gold is reserved for Aurelius identity (badge + card borders).
   Mini-card and highlight meta row:
   badge  — outlined pill (author / source)
   domain — solid-outline tag (topic)
   chip   — solid-fill slanted rectangle (content type)
   Colored axes:
   type chips (format)  — infrastructure burnt orange, article
                          parchment, research steel blue, video
                          muted red
   domain tags (topic)  — alignment green, interpretability violet,
                          world models teal */

/* Type chip (format: article, research, infrastructure, video) — rectangular */
.w-chip {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(232, 224, 212, 0.6);
    border: 1px solid rgba(232, 224, 212, 0.18);
    background: rgba(232, 224, 212, 0.03);
    border-radius: 4px;
    padding: 3px 10px;
    white-space: nowrap;
}

.w-chip--infrastructure {
    color: #CD8452;
    border-color: rgba(205, 132, 82, 0.35);
    background: rgba(205, 132, 82, 0.06);
}

.w-chip--article {
    color: #D8CBAD;
    border-color: rgba(216, 203, 173, 0.3);
    background: rgba(216, 203, 173, 0.05);
}

.w-chip--research {
    color: #94A9C6;
    border-color: rgba(148, 169, 198, 0.32);
    background: rgba(148, 169, 198, 0.06);
}

.w-chip--video {
    color: #C98A8A;
    border-color: rgba(201, 138, 138, 0.32);
    background: rgba(201, 138, 138, 0.06);
}

/* Publisher badge (external source, or gold Aurelius mark in the feed) */
.w-badge {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(232, 224, 212, 0.75);
    border: 1px solid rgba(232, 224, 212, 0.22);
    border-radius: 100px;
    padding: 4px 12px;
    white-space: nowrap;
}

.w-badge--gold {
    color: #C8A96E;
    border-color: rgba(200, 169, 110, 0.35);
    background: rgba(200, 169, 110, 0.07);
}

.w-badge [aria-hidden="true"] {
    letter-spacing: 0;
    margin-left: 0.12em;
}

/* Domain tags (topic) */
.w-domains {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Domain tag (topic) — underline label, no box */
.w-domain {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(232, 224, 212, 0.45);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(232, 224, 212, 0.22);
    border-radius: 0;
    padding: 1px 0 4px;
    white-space: nowrap;
}

.w-domain--alignment {
    color: #8FBF9A;
    border-bottom-color: rgba(143, 191, 154, 0.55);
}

.w-domain--interpretability {
    color: #A99BD6;
    border-bottom-color: rgba(169, 155, 214, 0.55);
}

.w-domain--world-models {
    color: #6FB8AD;
    border-bottom-color: rgba(111, 184, 173, 0.55);
}

/* Meta row: slanted content-type chips */
:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip {
    position: relative;
    display: inline-block;
    z-index: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 11px;
    line-height: 1.25;
    padding: 5px 12px 5px 11px;
    letter-spacing: 0.18em;
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    right: -2px;
    transform: skewX(-15deg);
    z-index: -1;
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip--infrastructure {
    color: #E3A97D;
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip--infrastructure::before {
    background: rgba(205, 132, 82, 0.3);
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip--article {
    color: #E2D4B4;
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip--article::before {
    background: rgba(216, 203, 173, 0.28);
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip--research {
    color: #B8C9DE;
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip--research::before {
    background: rgba(148, 169, 198, 0.32);
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip--video {
    color: #E0B0B0;
}

:is(.w-card--mini, .blog-highlights .w-featured, .blog-highlights .w-card) .w-card-meta-tags .w-chip--video::before {
    background: rgba(201, 138, 138, 0.3);
}

/* Meta row (mini cards): solid-outline topic tags — distinct from
   pill badge (who) and slanted type chip (what it is). */
.w-card-meta .w-domains {
    gap: 6px;
    align-items: center;
}

.w-card-meta .w-domain {
    font-size: 11px;
    letter-spacing: 0.18em;
    padding: 3px 9px;
    border: 1px solid rgba(232, 224, 212, 0.28);
    border-radius: 2px;
    background: rgba(232, 224, 212, 0.04);
    color: rgba(232, 224, 212, 0.62);
}

.w-card-meta .w-domain + .w-domain::before {
    content: none;
    margin: 0;
}

.w-card-meta .w-domain--alignment {
    color: #8FBF9A;
    border-color: rgba(143, 191, 154, 0.48);
    background: rgba(143, 191, 154, 0.09);
}

.w-card-meta .w-domain--interpretability {
    color: #A99BD6;
    border-color: rgba(169, 155, 214, 0.48);
    background: rgba(169, 155, 214, 0.09);
}

.w-card-meta .w-domain--world-models {
    color: #6FB8AD;
    border-color: rgba(111, 184, 173, 0.48);
    background: rgba(111, 184, 173, 0.09);
}

/* ── Empty state (filter matched nothing) ── */
.w-empty {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 19px;
    color: rgba(232, 224, 212, 0.45);
    text-align: center;
    padding: 64px 0;
}

/* ── Scroll reveals ── */
.rv {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.rv.rv-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .rv {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .w-featured,
    .w-featured:hover,
    .w-card,
    .w-card:hover {
        transition: none;
        transform: none;
    }
    .w-card--mini .w-card-summary {
        transition: none;
    }
}

/* ── Responsive ── */
@media (max-width: 991px) {
    /* Stack: spotlights first, timeline below */
    .blog-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 64px;
    }
}

@media (max-width: 768px) {
    .blog-page {
        padding: 110px 0 64px;
    }
    .blog-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .blog-filterbar {
        align-items: flex-start;
        max-width: 100%;
    }
    .blog-filters {
        gap: 18px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .w-filter {
        padding: 10px 6px;
        font-size: 10px;
    }
    .blog-hairline {
        margin-bottom: 44px;
    }
    .w-highlight-group {
        margin-bottom: 44px;
    }
    .w-featured {
        padding: 28px 24px;
    }
    .w-card {
        padding: 22px 20px 18px;
    }
    .w-card--media .w-card-body {
        padding: 20px 20px 16px;
    }
    .w-featured--media .w-card-body {
        padding: 22px 22px 18px;
    }
    .w-card--mini {
        padding: 18px 18px 16px;
    }
    .w-feed-group {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .w-feed-rail {
        padding-right: 14px;
    }
    .w-feed-rail::before {
        right: 9px;
    }
    .w-feed-rail::after {
        right: 6.5px;
    }
    .w-feed-rail--year::after {
        right: 5.5px;
    }
    .w-feed-month-m {
        font-size: 11px;
        letter-spacing: 0.12em;
    }
    .w-feed-year {
        font-size: 15px;
    }
}

/* ══════════════════════════════════════════
   FOOTER SAFETY NET
   Duplicate of the layout essentials from /assets/css/footer.css.
   The blog page was observed rendering a stacked, unstyled footer
   when that shared stylesheet failed to load; blog.css always loads
   with this page, so these rules guarantee the footer's layout here.
   Keep in sync with footer.css if the footer design changes.
   ══════════════════════════════════════════ */
.footer {
    position: relative;
    z-index: 1;
    background: #100F0E;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.footer_main {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
    padding: 28px 0 26px;
}

.footer_brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 340px;
}

.footer_logo img {
    height: 30px;
    width: auto;
    display: block;
}

.footer_socials {
    display: flex;
    gap: 10px;
    margin-left: -5px;
}

.footer_cols {
    display: flex;
    gap: 72px;
    flex-wrap: wrap;
}

.footer_col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer_col_head {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.footer_col a {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 14px;
    color: rgba(232, 224, 212, 0.5);
    text-decoration: none;
    transition: color 0.2s;
    width: fit-content;
}

.footer_col a:hover {
    color: #FFFFFF;
}

.footer_copyright {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(232, 224, 212, 0.35);
}

@media (max-width: 900px) {
    .footer_main {
        flex-direction: column;
        gap: 28px;
        padding: 26px 0 24px;
    }
    .footer_cols {
        gap: 24px 56px;
    }
}

@media (max-width: 560px) {
    .footer_cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px 24px;
    }
    .footer_copyright {
        font-size: 12px;
    }
}