/* ========================================================================
 * Deeper Truth — homepage + site chrome (Broadsheet Noir)
 * ====================================================================== */

/* ------------------------------------------------------------------------
 *  Site chrome: skip link, site wrapper, grain overlay
 * ---------------------------------------------------------------------- */

.dt-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--dt-accent);
    color: var(--dt-ink-strong);
    padding: var(--dt-space-3) var(--dt-space-5);
    font-family: var(--dt-sans);
    font-weight: 700;
    z-index: 999;
}
.dt-skip-link:focus { left: var(--dt-space-5); top: var(--dt-space-5); }

.dt-site {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* above the grain overlay */
}

/* Kill Kadence's default header/footer margins if they leak in. */
body.admin-bar .dt-site { padding-top: 0; }
#wrapper,
.site,
#site-container { background: transparent !important; }


/* ========================================================================
 *  MASTHEAD
 * ====================================================================== */

.dt-masthead {
    background: var(--dt-bg);
    color: var(--dt-ink);
    border-bottom: 2px solid var(--dt-ink);
    position: relative;
    z-index: 5;
}

.dt-masthead__bar--top {
    max-width: var(--dt-container-wide);
    margin: 0 auto;
    padding: var(--dt-space-5) var(--dt-space-5);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--dt-space-4);
    position: relative;
}

.dt-masthead__bar--top::before,
.dt-masthead__bar--top::after {
    content: "";
    position: absolute;
    left: var(--dt-space-5);
    right: var(--dt-space-5);
    height: 1px;
    background: var(--dt-rule-strong);
}

.dt-masthead__bar--top::before { top: var(--dt-space-2); }
.dt-masthead__bar--top::after  { bottom: 0; }

.dt-masthead__rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--dt-sans);
    font-size: 0.72rem;
    letter-spacing: var(--dt-tracking-wider);
    text-transform: uppercase;
    color: var(--dt-ink-muted);
}

.dt-masthead__rail--right {
    align-items: flex-end;
    text-align: right;
}

.dt-masthead__dateline {
    color: var(--dt-ink);
    font-weight: 600;
}

.dt-masthead__issue {
    color: var(--dt-accent);
}

.dt-masthead__service {
    color: var(--dt-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--dt-rule-strong);
    padding-bottom: 2px;
    font-weight: 600;
    transition: all var(--dt-dur-fast) var(--dt-ease);
}
.dt-masthead__service:hover {
    color: var(--dt-accent);
    border-bottom-color: var(--dt-accent);
}
.dt-masthead__service--sub {
    color: var(--dt-accent);
    border-bottom-color: var(--dt-accent);
}

/* Nameplate --------------------------------------------------------- */

.dt-masthead__plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--dt-space-3) var(--dt-space-6);
    position: relative;
}

.dt-masthead .dt-wordmark {
    color: var(--dt-ink-strong);
    text-decoration: none;
    line-height: 0.92;
    letter-spacing: 0.06em;
}

.dt-masthead__motto {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 18, "wght" 400, "SOFT" 50;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--dt-ink-muted);
    letter-spacing: 0.02em;
}

/* Beat navigation --------------------------------------------------- */

.dt-masthead__beats {
    background: var(--dt-bg-canvas);
}

.dt-beatnav {
    max-width: var(--dt-container-wide);
    margin: 0 auto;
    padding: 0 var(--dt-space-5);
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.dt-beatnav__item {
    position: relative;
    flex: 0 0 auto;
}

.dt-beatnav__item + .dt-beatnav__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--dt-rule-strong);
}

.dt-beatnav__item a {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: var(--dt-space-3) var(--dt-space-5);
    font-family: var(--dt-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--dt-tracking-wider);
    text-transform: uppercase;
    color: var(--dt-ink);
    text-decoration: none;
    transition: color var(--dt-dur-fast) var(--dt-ease),
                background var(--dt-dur-fast) var(--dt-ease);
}

.dt-beatnav__item a:hover,
.dt-beatnav__item.is-active a {
    color: var(--dt-accent);
    background: var(--dt-red-dust);
}

.dt-beatnav__num {
    font-family: var(--dt-mono);
    font-size: 0.65rem;
    color: var(--dt-ink-faint);
    letter-spacing: 0;
}

.dt-beatnav__item--more a {
    font-style: italic;
    color: var(--dt-ink-muted);
    font-weight: 500;
}

/* Dual-format text utility — used in masthead dateline/issue.
 * Long format ("SATURDAY, APRIL 25, 2026" / "Vol. I · No. 1") shows on
 * tablet+; short format ("Apr 25" / "V.I.N1") shows on phone where rail
 * width is too tight for the long format. The mobile media block below
 * flips the visibility. */
.dt-show-desktop { display: inline; }
.dt-show-mobile  { display: none;   }

@media (max-width: 900px) {
    .dt-masthead__bar--top {
        grid-template-columns: 1fr;
        text-align: center;
        row-gap: var(--dt-space-3);
    }
    .dt-masthead__rail--left,
    .dt-masthead__rail--right {
        align-items: center;
        flex-direction: row;
        justify-content: center;
        gap: var(--dt-space-4);
    }
    .dt-beatnav { padding: 0; }
    .dt-beatnav__item a { padding: var(--dt-space-2) var(--dt-space-3); font-size: 0.7rem; }
    .dt-beatnav__num { display: none; }
}

/* ----- Phone-narrow masthead (<= 640px) -----
 * The 900px breakpoint already stacks the top bar vertically. At 640px and
 * below we additionally:
 *   - shrink the wordmark so it fits 320-414px viewports (and never clips)
 *   - kill the inner plate padding which was eating the available width
 *   - tighten the dateline rails to one row of small caps
 *   - convert beat nav from wrap to horizontal scroll (sleeker than 2-3
 *     rows of wrapped chips, lets all 5 beats stay one tap away)
 *   - hide the secondary "About / Methodology" entries from beat nav since
 *     they're available in the colophon anyway
 */
@media (max-width: 640px) {
    .dt-masthead__bar--top {
        padding: var(--dt-space-4) var(--dt-space-4);
        gap: var(--dt-space-3);
    }
    .dt-masthead__bar--top::before,
    .dt-masthead__bar--top::after {
        left: var(--dt-space-4);
        right: var(--dt-space-4);
    }
    .dt-masthead__rail {
        font-size: 0.62rem;
        letter-spacing: 0.14em;
        gap: var(--dt-space-3);
    }
    .dt-masthead__rail--right {
        text-align: center;
    }
    .dt-masthead__plate {
        padding: 0;
    }
    .dt-masthead .dt-wordmark {
        /* 22px at 320px viewport, 24px at 375px, 28px at 430px (iPhone Pro Max).
         * Smaller letter-spacing keeps the wordmark from creeping wider. */
        font-size: clamp(1.25rem, 6.5vw, 1.85rem);
        letter-spacing: 0.02em;
    }
    .dt-masthead__motto {
        font-size: 0.7rem;
        letter-spacing: 0.02em;
    }

    /* Beat nav: horizontal scroll instead of wrap so all 5 beats stay
     * accessible without doubling the masthead height. Hide scrollbar
     * and add subtle right-edge fade so users get a "more →" affordance. */
    .dt-beatnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0;
    }
    .dt-beatnav::-webkit-scrollbar { display: none; }
    .dt-beatnav__item {
        flex: 0 0 auto;
    }
    .dt-beatnav__item a {
        padding: var(--dt-space-2) var(--dt-space-3);
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        white-space: nowrap;
    }
    .dt-beatnav__item + .dt-beatnav__item::before {
        top: 28%;
        bottom: 28%;
    }
    /* Hide About + Methodology from masthead beat row on phones — they live
     * in the colophon footer and dropping them here saves horizontal space. */
    .dt-beatnav__item--more {
        display: none;
    }

    /* Dual-dateline visibility flip: hide long format, reveal short.
     * Long: "SATURDAY, APRIL 25, 2026" / "Vol. I · No. 1"
     * Short: "Apr 25" / "V.I.N1" */
    .dt-show-desktop { display: none;   }
    .dt-show-mobile  { display: inline; }

    /* Beat nav scroll affordance: subtle right-edge fade hints "more behind
     * the right edge" without adding chrome icons. Container needs
     * relative positioning so the absolutely-positioned ::after sits over
     * the right edge of the scroll viewport. */
    .dt-masthead__beats {
        position: relative;
    }
    .dt-masthead__beats::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 28px;
        pointer-events: none;
        background: linear-gradient(
            to right,
            transparent,
            var(--dt-bg-canvas) 70%
        );
        z-index: 1;
    }
}


/* ========================================================================
 *  FRONT PAGE SECTIONS
 * ====================================================================== */

.dt-front {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.dt-front > section {
    max-width: var(--dt-container);
    margin: 0 auto;
    padding: var(--dt-space-9) var(--dt-space-5);
    position: relative;
}

@media (min-width: 768px) {
    .dt-front > section {
        padding-left: var(--dt-space-7);
        padding-right: var(--dt-space-7);
    }
}

/* Ornamental rule (the <hr class="dt-ornament"> between sections) */
.dt-front hr.dt-ornament {
    border: 0;
    width: 100%;
    height: 44px;
    max-width: var(--dt-container);
    margin: 0 auto;
    padding: 0 var(--dt-space-5);
    position: relative;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dt-front hr.dt-ornament::before,
.dt-front hr.dt-ornament::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    background: var(--dt-rule-strong);
    width: calc(50% - 28px);
}
.dt-front hr.dt-ornament::before { left: var(--dt-space-5); }
.dt-front hr.dt-ornament::after  { right: var(--dt-space-5); }

.dt-front hr.dt-ornament::marker,
.dt-front hr.dt-ornament span { content: "⁕"; }

/* Use a background symbol in the middle via data URI */
.dt-front hr.dt-ornament {
    background-image:
        radial-gradient(circle at center,
            var(--dt-accent) 2px,
            transparent 2.5px);
    background-size: 22px 1px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Section header (used above rail, ledger, names) */

.dt-section-header {
    display: flex;
    align-items: baseline;
    gap: var(--dt-space-4);
    padding-bottom: var(--dt-space-4);
    border-bottom: 2px solid var(--dt-ink);
    margin-bottom: var(--dt-space-7);
}

.dt-section-header__num {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 72, "wght" 800, "SOFT" 0;
    font-size: clamp(2.2rem, 3vw + 1rem, 3.5rem);
    line-height: 0.8;
    color: var(--dt-accent);
    letter-spacing: -0.03em;
}

.dt-section-header--amber .dt-section-header__num { color: var(--dt-amber); }

.dt-section-header__title {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 60, "wght" 700, "SOFT" 20;
    font-size: clamp(1.6rem, 1.5vw + 1.2rem, 2.3rem);
    letter-spacing: var(--dt-tracking-snug);
    color: var(--dt-ink-strong);
    margin: 0;
    flex: 1;
    line-height: 1;
}

.dt-section-header__sub {
    font-family: var(--dt-sans);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--dt-ink-muted);
    letter-spacing: var(--dt-tracking-snug);
}

@media (max-width: 640px) {
    .dt-section-header { flex-wrap: wrap; gap: var(--dt-space-2); }
    .dt-section-header__sub { flex-basis: 100%; }
}


/* ========================================================================
 *  LEDE (asymmetric hero)
 * ====================================================================== */

.dt-lede {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dt-space-7);
    padding-top: var(--dt-space-8) !important;
    padding-bottom: var(--dt-space-8) !important;
    position: relative;
}

@media (min-width: 900px) {
    .dt-lede {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--dt-space-8);
    }
}

.dt-lede__main { display: flex; flex-direction: column; gap: var(--dt-space-5); }

.dt-lede__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;            /* flatter, less wasted space */
    overflow: hidden;
    border-radius: var(--dt-radius);
    box-shadow: var(--dt-shadow-hero);
    max-height: 420px;               /* hard cap — no giant blank rectangles */
}

.dt-lede__media img,
.dt-lede__media .dt-plate {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms var(--dt-ease);
}

.dt-lede__media:hover img,
.dt-lede__media:hover .dt-plate {
    transform: scale(1.02);
}

.dt-lede__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(10, 11, 14, 0.55) 100%);
    pointer-events: none;
}

.dt-lede__badge {
    position: absolute;
    top: var(--dt-space-4);
    left: var(--dt-space-4);
    z-index: 2;
    background: var(--dt-accent);
    color: var(--dt-ink-strong);
    font-family: var(--dt-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--dt-tracking-wider);
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--dt-radius-sm);
}

.dt-lede__body { padding: 0; }

.dt-lede .dt-kicker {
    display: inline-block;
    margin-bottom: var(--dt-space-3);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.dt-lede__title {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 144, "wght" 800, "SOFT" 10, "WONK" 1;
    font-size: var(--dt-fs-hero);
    line-height: 0.95;
    letter-spacing: var(--dt-tracking-tight);
    color: var(--dt-ink-strong);
    margin: 0 0 var(--dt-space-4);
    max-width: 16ch;
    text-wrap: balance;
}

.dt-lede__title a {
    color: inherit;
    text-decoration: none;
}

.dt-lede__title a:hover {
    color: var(--dt-accent);
}

.dt-lede__dek {
    font-family: var(--dt-serif);
    font-variation-settings: "opsz" 36;
    font-size: clamp(1.1rem, 0.6vw + 1rem, 1.35rem);
    line-height: 1.45;
    color: var(--dt-ink);
    max-width: 56ch;
    margin: 0 0 var(--dt-space-5);
    font-style: normal;
}

.dt-lede__dek.dt-dropcap::first-letter {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 144, "wght" 900, "SOFT" 0;
    font-size: 3.8em;
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.12em -0.05em 0;
    color: var(--dt-accent);
    text-transform: uppercase;
}

.dt-lede__meta .dt-lede__cta {
    color: var(--dt-accent);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--dt-accent);
    padding-bottom: 1px;
}

/* Sidecards (stacked on the right of hero) */

.dt-lede__side {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-5);
    justify-content: flex-start;
    padding-top: var(--dt-space-1);
}

@media (min-width: 900px) {
    .dt-lede__side {
        border-left: 1px solid var(--dt-rule-strong);
        padding-left: var(--dt-space-6);
    }
}

.dt-sidecard {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--dt-space-4);
}

.dt-sidecard + .dt-sidecard {
    border-top: 1px solid var(--dt-rule);
    padding-top: var(--dt-space-5);
}

.dt-sidecard__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--dt-radius-sm);
}

.dt-sidecard__media img,
.dt-sidecard__media .dt-plate {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms var(--dt-ease);
}
.dt-sidecard__media:hover img,
.dt-sidecard__media:hover .dt-plate {
    transform: scale(1.04);
}

.dt-sidecard__title {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 36, "wght" 700, "SOFT" 30;
    font-size: clamp(1.1rem, 0.4vw + 1rem, 1.25rem);
    line-height: 1.15;
    letter-spacing: var(--dt-tracking-snug);
    color: var(--dt-ink);
    margin: var(--dt-space-1) 0 var(--dt-space-2);
}

.dt-sidecard__title a { color: inherit; text-decoration: none; }
.dt-sidecard__title a:hover { color: var(--dt-accent); }

.dt-sidecard__dek {
    font-family: var(--dt-sans);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--dt-ink-muted);
    margin: 0 0 var(--dt-space-2);
}

@media (max-width: 640px) {
    .dt-sidecard {
        grid-template-columns: 80px 1fr;
    }
}


/* ========================================================================
 *  GRADIENT PLATE (fallback for posts without featured image)
 *
 *  Minimal placeholder. Small accent mark + tiny uppercase label at bottom.
 *  Deliberately restrained so the headline NEXT to the plate carries the
 *  visual weight, not the plate itself. Scales from 80px thumbnails to
 *  full-width heroes without text-overflow issues.
 * ====================================================================== */

.dt-plate {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #12141a 0%, #1b1e26 100%);
    color: var(--dt-ink);
    padding: 10% 8%;
}

.dt-plate::before {
    /* Diagonal accent stripe in bottom-right corner for quiet visual anchor */
    content: "";
    position: absolute;
    right: -20%;
    bottom: -40%;
    width: 60%;
    height: 70%;
    background: var(--dt-accent);
    opacity: 0.09;
    transform: rotate(-18deg);
    pointer-events: none;
}

.dt-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dt-noise);
    opacity: 0.10;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* The mark: a single small asterisk in accent red, centered */
.dt-plate__mark {
    position: static;
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 72, "wght" 400;
    font-size: clamp(1.5rem, 2.5vw + 0.8rem, 3rem);
    line-height: 1;
    color: var(--dt-accent);
    opacity: 0.7;
}

/* The beat label — small, uppercase, at the bottom of the plate */
.dt-plate__beat {
    font-family: var(--dt-sans);
    font-variation-settings: normal;
    font-size: clamp(0.65rem, 0.5vw + 0.55rem, 0.8rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--dt-tracking-wider);
    text-transform: uppercase;
    color: var(--dt-ink-muted);
    text-align: center;
    margin-top: var(--dt-space-3);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 var(--dt-space-2);
}

/* Grain layer (rendered by PHP as a span, not used for text anymore) */
.dt-plate__grain { display: none; }

/* Per-beat background tint — same hex family as before */
.dt-plate--corporate-capture  { background: linear-gradient(135deg, #1b0d10, #2a1520 60%, #1b0d10); }
.dt-plate--surveillance-state { background: linear-gradient(135deg, #0d1a20, #1a2a36 60%, #0d1a20); }
.dt-plate--carceral-economy   { background: linear-gradient(135deg, #0f0f12, #1e1a18 60%, #0f0f12); }
.dt-plate--public-health      { background: linear-gradient(135deg, #101a18, #1a2a26 60%, #101a18); }
.dt-plate--global-power       { background: linear-gradient(135deg, #1a160e, #2a231a 60%, #1a160e); }
.dt-plate--default            { background: linear-gradient(135deg, #12141a, #1b1e26); }

/* In small-container plates (sidecards / name cards), hide the label and
 * center only the mark — no room for readable text. */
.dt-sidecard__media .dt-plate__beat,
.dt-name-card__img.dt-plate .dt-plate__beat {
    display: none;
}
.dt-sidecard__media .dt-plate__mark,
.dt-name-card__img.dt-plate .dt-plate__mark {
    font-size: clamp(1rem, 1.5vw, 1.4rem);
}


/* ========================================================================
 *  BEAT RAIL (5 columns, each = header + 2 headlines + "more →")
 * ====================================================================== */

.dt-rail__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dt-space-5);
}

@media (min-width: 720px) {
    .dt-rail__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--dt-space-6);
    }
}

@media (min-width: 1100px) {
    .dt-rail__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
    }
    .dt-rail__col + .dt-rail__col {
        border-left: 1px solid var(--dt-rule);
        padding-left: var(--dt-space-5);
    }
    .dt-rail__col {
        padding-right: var(--dt-space-5);
    }
    .dt-rail__col:last-child { padding-right: 0; }
}

.dt-rail__col {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-4);
    min-height: 280px;
}

.dt-rail__head {
    display: flex;
    align-items: baseline;
    gap: var(--dt-space-2);
    text-decoration: none;
    color: var(--dt-ink);
    padding-bottom: var(--dt-space-3);
    border-bottom: 1px solid var(--dt-accent);
    transition: color var(--dt-dur-fast) var(--dt-ease);
}

.dt-rail__head:hover { color: var(--dt-accent); }

.dt-rail__num {
    font-family: var(--dt-mono);
    font-size: 0.72rem;
    color: var(--dt-accent);
    letter-spacing: 0;
    font-weight: 600;
}

.dt-rail__name {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 36, "wght" 700, "SOFT" 10;
    font-size: 1.05rem;
    line-height: 1.1;
    letter-spacing: var(--dt-tracking-snug);
    text-transform: none;
    color: var(--dt-ink-strong);
    flex: 1;
}

.dt-rail__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-3);
    flex: 1;
}

.dt-rail__list li { margin: 0; }
.dt-rail__list a {
    display: block;
    text-decoration: none;
    color: var(--dt-ink);
    padding: var(--dt-space-1) 0;
    border-bottom: 1px dotted var(--dt-rule);
    transition: color var(--dt-dur-fast) var(--dt-ease);
}
.dt-rail__list a:hover {
    color: var(--dt-accent);
    border-bottom-color: var(--dt-accent);
}

.dt-rail__title {
    font-family: var(--dt-serif);
    font-variation-settings: "opsz" 24, "wght" 600;
    font-size: 0.98rem;
    line-height: 1.3;
    display: block;
    margin-bottom: 2px;
}

.dt-rail__date {
    font-family: var(--dt-mono);
    font-size: 0.7rem;
    color: var(--dt-ink-faint);
    letter-spacing: 0;
}

.dt-rail__empty {
    font-family: var(--dt-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--dt-ink-faint);
    margin: 0;
    flex: 1;
}

.dt-rail__more {
    margin-top: auto;
    font-family: var(--dt-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--dt-tracking-wider);
    text-transform: uppercase;
    color: var(--dt-ink-muted);
    text-decoration: none;
    border-top: 1px solid var(--dt-rule);
    padding-top: var(--dt-space-2);
    transition: color var(--dt-dur-fast) var(--dt-ease);
}
.dt-rail__more:hover { color: var(--dt-accent); }


/* ========================================================================
 *  LEDGER (Follow the Money — numbered list, not cards)
 * ====================================================================== */

.dt-ledger__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ledger;
}

.dt-ledger__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--dt-space-6);
    padding: var(--dt-space-5) 0;
    border-bottom: 1px solid var(--dt-rule);
    transition: background var(--dt-dur-fast) var(--dt-ease);
}

.dt-ledger__row:hover {
    background: linear-gradient(to right, var(--dt-red-dust), transparent 70%);
}

.dt-ledger__num {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 72, "wght" 700, "SOFT" 0;
    font-size: clamp(2.2rem, 3vw + 1rem, 3.5rem);
    line-height: 0.8;
    letter-spacing: -0.03em;
    color: var(--dt-amber);
    min-width: 3ch;
    text-align: right;
    opacity: 0.85;
}

.dt-ledger__link {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-2);
    text-decoration: none;
    color: var(--dt-ink);
}

.dt-ledger__title {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 48, "wght" 700, "SOFT" 20;
    font-size: clamp(1.25rem, 0.8vw + 1.1rem, 1.5rem);
    line-height: 1.15;
    color: var(--dt-ink-strong);
    letter-spacing: var(--dt-tracking-snug);
    transition: color var(--dt-dur-fast) var(--dt-ease);
}

.dt-ledger__link:hover .dt-ledger__title { color: var(--dt-amber); }

.dt-ledger__dek {
    font-family: var(--dt-serif);
    font-variation-settings: "opsz" 18;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--dt-ink-muted);
}

.dt-ledger__date {
    font-family: var(--dt-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    color: var(--dt-ink-faint);
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .dt-ledger__row {
        grid-template-columns: auto 1fr;
        gap: var(--dt-space-4);
    }
    .dt-ledger__date {
        grid-column: 2;
    }
}


/* ========================================================================
 *  NAMES TO KNOW (portrait cards)
 * ====================================================================== */

.dt-names__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dt-space-5);
}

@media (min-width: 640px) {
    .dt-names__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .dt-names__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dt-name-card {
    background: var(--dt-bg-elev);
    border: 1px solid var(--dt-rule);
    overflow: hidden;
    transition: transform var(--dt-dur) var(--dt-ease),
                border-color var(--dt-dur) var(--dt-ease);
    border-radius: var(--dt-radius-sm);
}

.dt-name-card:hover {
    transform: translateY(-3px);
    border-color: var(--dt-rule-strong);
}

.dt-name-card__link {
    display: block;
    text-decoration: none;
    color: var(--dt-ink);
}

.dt-name-card__img,
.dt-name-card .dt-plate {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    filter: grayscale(0.2) contrast(1.05);
}

.dt-name-card__body {
    padding: var(--dt-space-4) var(--dt-space-4) var(--dt-space-5);
}

.dt-name-card__title {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 36, "wght" 700, "SOFT" 20;
    font-size: 1.1rem;
    line-height: 1.15;
    margin: 0 0 var(--dt-space-2);
    color: var(--dt-ink-strong);
    letter-spacing: var(--dt-tracking-snug);
}

.dt-name-card__dek {
    font-family: var(--dt-sans);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--dt-ink-muted);
    margin: 0;
}


/* ========================================================================
 *  MANIFESTO (full-bleed cream panel with inverted type)
 * ====================================================================== */

.dt-manifesto {
    max-width: 100% !important;
    padding: 0 !important;
    margin: var(--dt-space-9) 0 0;
    background: var(--dt-bg-inverse);
    color: var(--dt-ink-inverse);
    position: relative;
    overflow: hidden;
}

.dt-manifesto::before {
    /* Grain overlay in warm paper tone */
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--dt-noise);
    opacity: 0.12;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.dt-manifesto__inner {
    max-width: var(--dt-container);
    margin: 0 auto;
    padding: var(--dt-space-10) var(--dt-space-5);
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .dt-manifesto__inner { padding: var(--dt-space-11) var(--dt-space-7); }
}

.dt-manifesto__eyebrow {
    font-family: var(--dt-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--dt-tracking-wider);
    text-transform: uppercase;
    color: var(--dt-red-deep);
    margin: 0 0 var(--dt-space-5);
    padding-bottom: var(--dt-space-2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    display: inline-block;
    padding-right: var(--dt-space-8);
}

.dt-manifesto__display {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 144, "wght" 800, "SOFT" 0, "WONK" 1;
    font-size: var(--dt-fs-colossal);
    line-height: 0.92;
    letter-spacing: var(--dt-tracking-tight);
    color: var(--dt-ink-inverse);
    margin: 0 0 var(--dt-space-7);
    max-width: 14ch;
}

.dt-manifesto__display em {
    font-style: italic;
    color: var(--dt-red-deep);
    font-variation-settings: "opsz" 144, "wght" 800, "SOFT" 50, "WONK" 1;
}

.dt-manifesto__body {
    font-family: var(--dt-serif);
    font-variation-settings: "opsz" 24;
    font-size: clamp(1.05rem, 0.5vw + 1rem, 1.25rem);
    line-height: 1.55;
    color: rgba(11, 12, 16, 0.82);
    max-width: 58ch;
    margin: 0 0 var(--dt-space-5);
}

.dt-manifesto__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dt-space-6);
    font-family: var(--dt-sans);
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0;
    letter-spacing: var(--dt-tracking-snug);
}

.dt-manifesto__links a {
    color: var(--dt-ink-inverse);
    text-decoration: none;
    border-bottom: 2px solid var(--dt-red-deep);
    padding-bottom: 2px;
    transition: color var(--dt-dur-fast) var(--dt-ease);
}

.dt-manifesto__links a:hover { color: var(--dt-red-deep); }


/* ========================================================================
 *  COLOPHON / FOOTER
 * ====================================================================== */

.dt-colophon {
    background: var(--dt-bg-canvas);
    color: var(--dt-ink);
    border-top: 2px solid var(--dt-ink);
    padding: var(--dt-space-9) var(--dt-space-5) var(--dt-space-7);
    position: relative;
    z-index: 2;
}

.dt-colophon__plate {
    max-width: var(--dt-container);
    margin: 0 auto var(--dt-space-7);
    text-align: center;
    padding-bottom: var(--dt-space-6);
    border-bottom: 1px solid var(--dt-rule-strong);
}

.dt-colophon .dt-wordmark {
    color: var(--dt-ink-strong);
    font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
    letter-spacing: 0.04em;
    text-decoration: none;
    display: inline-block;
}

.dt-colophon__motto {
    font-family: var(--dt-display);
    font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 50;
    font-style: italic;
    font-size: 1rem;
    color: var(--dt-ink-muted);
    margin: var(--dt-space-3) 0 0;
}

.dt-colophon__grid {
    max-width: var(--dt-container);
    margin: 0 auto var(--dt-space-6);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dt-space-6);
}

@media (min-width: 640px) {
    .dt-colophon__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .dt-colophon__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dt-colophon__col-title {
    font-family: var(--dt-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--dt-tracking-wider);
    text-transform: uppercase;
    color: var(--dt-accent);
    margin: 0 0 var(--dt-space-3);
    padding-bottom: var(--dt-space-2);
    border-bottom: 1px solid var(--dt-rule-strong);
}

.dt-colophon__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-2);
}

.dt-colophon__col a {
    color: var(--dt-ink);
    text-decoration: none;
    font-family: var(--dt-serif);
    font-variation-settings: "opsz" 18;
    font-size: 0.98rem;
    transition: color var(--dt-dur-fast) var(--dt-ease);
}

.dt-colophon__col a:hover { color: var(--dt-accent); }

.dt-colophon__sub-text {
    font-family: var(--dt-serif);
    color: var(--dt-ink-muted);
    font-size: 0.95rem;
    margin: 0 0 var(--dt-space-3);
    line-height: 1.45;
}

.dt-colophon__sub-cta {
    display: inline-block;
    font-family: var(--dt-sans);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dt-accent) !important;
    border-bottom: 1px solid var(--dt-accent);
    padding-bottom: 2px;
}

.dt-colophon__rule {
    max-width: var(--dt-container);
    margin: var(--dt-space-7) auto var(--dt-space-5);
    height: 1px;
    background: var(--dt-rule-strong);
}

.dt-colophon__meta {
    max-width: var(--dt-container);
    margin: 0 auto;
    text-align: center;
    font-family: var(--dt-sans);
    font-size: 0.8rem;
    color: var(--dt-ink-muted);
    letter-spacing: 0.01em;
    display: inline-flex;
    justify-content: center;
    gap: var(--dt-space-3);
    flex-wrap: wrap;
    width: 100%;
}

.dt-colophon__meta .dt-sep {
    color: var(--dt-rule-strong);
}

.dt-colophon__meta a {
    color: var(--dt-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--dt-accent);
    padding-bottom: 1px;
}


/* ====================================================================
 * Start Here strip — 3 curated evergreen anchor cards, between the
 * hero (Investigation of the Week + Latest sidecards) and the Beat
 * rail. Visual hierarchy: hero is the editorial pick, Start Here is
 * the *meta* pick (best entry points to the corpus), Beats is the
 * systematic exploration grid.
 *
 * Section header uses ★ glyph rather than ordinal numeral to signal
 * curated rather than systematic.
 * ==================================================================== */

.dt-anchors {
  margin: var(--dt-space-6) 0 var(--dt-space-7);
}

/* Override the section-header__num for the star glyph: keep it
   the same size/weight as the ordinals on Beats / Ledger / Names so
   the visual rhythm down the page stays consistent. */
.dt-anchors .dt-section-header__num {
  color: var(--dt-amber, var(--dt-accent));
  font-size: 1.6rem;
  line-height: 1;
}

.dt-anchors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--dt-space-5);
  margin-top: var(--dt-space-5);
}

.dt-anchor {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-3);
}

.dt-anchor__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--dt-rule);
  background: var(--dt-bg-2, var(--dt-bg));
}
.dt-anchor__media img,
.dt-anchor__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.dt-anchor:hover .dt-anchor__media img,
.dt-anchor:hover .dt-anchor__img {
  transform: scale(1.04);
}

.dt-anchor__kicker {
  display: inline-block;
  font-family: var(--dt-ui);
  font-size: var(--dt-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--dt-tracking-wide);
  color: var(--dt-accent);
  text-decoration: none;
  margin-bottom: var(--dt-space-2);
}
.dt-anchor__kicker:hover { text-decoration: underline; }

.dt-anchor__title {
  font-family: var(--dt-display);
  font-variation-settings: "opsz" 56, "wght" 600, "SOFT" 0;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--dt-ink);
  margin: 0 0 var(--dt-space-2);
  letter-spacing: var(--dt-tracking-snug);
}
.dt-anchor__title a {
  color: inherit;
  text-decoration: none;
}
.dt-anchor__title a:hover { color: var(--dt-accent); }

.dt-anchor__dek {
  font-family: var(--dt-body);
  font-size: var(--dt-fs-sm);
  line-height: 1.45;
  color: var(--dt-ink-muted);
  margin: 0;
}

@media (max-width: 800px) {
  .dt-anchors__grid {
    grid-template-columns: 1fr;
  }
}