/*
Theme layer: TDN Brand Bar redesign v3.1.0
Purpose: compact entertainment-news masthead, retained TDN red and gold accents,
cleaner cards, tighter homepage rhythm, and safer mobile spacing.
*/

:root {
    --header-height: 86px;
    --header-mobile: 64px;
    --tdn-brandbar-height: 86px;
    --tdn-brandbar-mobile: 64px;
    --tdn-brandbar-shadow: 0 1px 0 rgba(12, 12, 12, .08), 0 10px 30px rgba(12, 12, 12, .08);
    --tdn-line: rgba(12, 12, 12, .1);
    --tdn-card-line: rgba(12, 12, 12, .11);
    --tdn-card-hover-line: rgba(229, 26, 62, .38);
    --tdn-card-bg: var(--color-surface, #fff);
    --tdn-page-bg: #ffffff;
}

html[data-theme="dark"] {
    --tdn-line: rgba(255, 255, 255, .12);
    --tdn-card-line: rgba(255, 255, 255, .12);
    --tdn-card-hover-line: rgba(229, 26, 62, .55);
    --tdn-page-bg: var(--color-bg, #0a0a0b);
}

body {
    padding-top: var(--tdn-brandbar-height) !important;
    background:
        radial-gradient(circle at top left, rgba(229, 26, 62, .055), transparent 26rem),
        linear-gradient(180deg, var(--color-bg, #fff) 0%, var(--color-bg, #fff) 220px, var(--color-bg-alt, #fafafa) 100%);
}

@media (max-width: 768px) {
    body {
        padding-top: var(--tdn-brandbar-mobile) !important;
    }
}

/* Compact brand bar */
#tdn-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--color-surface, #fff) !important;
    border-top: 4px solid var(--tdn-red);
    box-shadow: var(--tdn-brandbar-shadow) !important;
    transform: translateZ(0);
}

.admin-bar #tdn-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar #tdn-header { top: 46px; }
}

#tdn-header::before { display: none !important; }

.tdn-hdr-dateline {
    display: none !important;
}

.tdn-hdr-top {
    height: 48px !important;
    padding-top: 0 !important;
    background:
        linear-gradient(90deg, rgba(229, 26, 62, .08), transparent 18%, transparent 82%, rgba(200, 146, 42, .09)),
        var(--color-surface, #fff) !important;
    border-bottom: 1px solid var(--tdn-line) !important;
}

.tdn-hdr-top-inner {
    position: relative;
    max-width: var(--container, 1200px) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--gutter, 24px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
}

.tdn-hdr-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    min-width: 0 !important;
    color: var(--color-fg, #0c0c0c) !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
}

.tdn-hdr-logo:hover,
.tdn-hdr-logo:focus-visible {
    color: var(--color-fg, #0c0c0c) !important;
}

.tdn-hdr-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.tdn-hdr-logo img {
    display: block !important;
    width: auto !important;
    max-width: min(360px, 42vw) !important;
    max-height: 34px !important;
    object-fit: contain !important;
}

.tdn-hdr-logo-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 30px;
    border-radius: 4px;
    background: var(--tdn-red);
    color: #fff;
    font-family: var(--font-headline, sans-serif);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
}

.tdn-hdr-logo-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
    min-width: 0;
}

.tdn-hdr-logo-title {
    font-family: var(--font-headline, 'Arial Narrow', sans-serif);
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--color-fg, #0c0c0c);
    white-space: nowrap;
}

.tdn-hdr-logo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .19em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--tdn-red);
    white-space: nowrap;
}

.tdn-hdr-logo-kicker::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--tdn-red), var(--tdn-gold));
}

.tdn-hdr-logo.has-custom-logo .tdn-hdr-logo-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.tdn-hdr-logo.has-custom-logo .tdn-hdr-logo-copy {
    align-items: flex-start;
}

/* Navigation strip */
.tdn-hdr-nav {
    height: 34px !important;
    background: var(--color-surface, #fff) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--tdn-line) !important;
    box-shadow: none !important;
}

.tdn-hdr-nav-inner {
    max-width: var(--container, 1200px) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--gutter, 24px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.tdn-hdr-nav-links {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
}

.tdn-hdr-nav-links a,
#tdn-header .tdn-hdr-nav-links a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 25px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: var(--color-fg, #0c0c0c) !important;
    background: transparent !important;
    font-family: var(--font-ui, system-ui, sans-serif) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .075em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color .16s ease, background .16s ease, transform .16s ease !important;
}

.tdn-hdr-nav-links a::after,
#tdn-header .tdn-hdr-nav-links a::after {
    display: none !important;
}

.tdn-hdr-nav-links a:hover,
.tdn-hdr-nav-links a:focus-visible,
.tdn-hdr-nav-links a.current,
#tdn-header .tdn-hdr-nav-links a:hover,
#tdn-header .tdn-hdr-nav-links a:focus-visible,
#tdn-header .tdn-hdr-nav-links a.current {
    color: #fff !important;
    background: var(--tdn-red) !important;
    transform: translateY(-1px);
}

.tdn-hdr-nav-links a:nth-child(2n):hover,
.tdn-hdr-nav-links a:nth-child(2n):focus-visible {
    background: var(--tdn-red-dark) !important;
}

.tdn-hdr-nav-social {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin-left: auto !important;
    padding-left: 12px !important;
    border-left: 1px solid var(--tdn-line) !important;
}

.tdn-hdr-nav-social a,
.tdn-theme-toggle,
.tdn-cmdk-trigger {
    min-width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
}

.tdn-hdr-nav-social a {
    width: 28px !important;
    color: var(--color-fg-muted, #5a5a5a) !important;
    background: transparent !important;
}

.tdn-hdr-nav-social a:hover,
.tdn-hdr-nav-social a:focus-visible {
    color: #fff !important;
    background: var(--tdn-red) !important;
}

.tdn-hdr-nav-social svg {
    width: 14px !important;
    height: 14px !important;
}

.tdn-cmdk-trigger {
    gap: 6px !important;
    padding: 0 10px !important;
    border: 1px solid var(--tdn-line) !important;
    background: var(--color-surface-alt, #f8f8fa) !important;
    color: var(--color-fg, #0c0c0c) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
}

.tdn-cmdk-trigger:hover,
.tdn-cmdk-trigger:focus-visible {
    border-color: var(--tdn-card-hover-line) !important;
    background: rgba(229, 26, 62, .08) !important;
    color: var(--tdn-red) !important;
}

.tdn-cmdk-trigger__kbd {
    display: none !important;
}

.tdn-theme-toggle {
    border: 1px solid var(--tdn-line) !important;
    background: var(--color-surface-alt, #f8f8fa) !important;
    color: var(--color-fg, #0c0c0c) !important;
}

.tdn-theme-toggle:hover,
.tdn-theme-toggle:focus-visible {
    color: #fff !important;
    border-color: var(--tdn-red) !important;
    background: var(--tdn-red) !important;
}

.tdn-theme-toggle svg {
    width: 14px !important;
    height: 14px !important;
}

/* Mobile menu */
.tdn-hdr-burger {
    display: none !important;
    flex-direction: column !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--tdn-line) !important;
    border-radius: 999px !important;
    background: var(--color-surface-alt, #f8f8fa) !important;
}

.tdn-hdr-burger span {
    width: 20px !important;
    height: 2px !important;
    background: var(--color-fg, #0c0c0c) !important;
    border-radius: 999px !important;
}

.tdn-hdr-burger[aria-expanded="true"] {
    background: var(--tdn-red) !important;
    border-color: var(--tdn-red) !important;
}

.tdn-hdr-burger[aria-expanded="true"] span {
    background: #fff !important;
}

.tdn-hdr-drawer {
    position: fixed !important;
    top: var(--tdn-brandbar-mobile) !important;
    left: 10px !important;
    right: 10px !important;
    display: none;
    max-height: calc(100vh - var(--tdn-brandbar-mobile) - 16px) !important;
    background: var(--color-surface, #fff) !important;
    border: 1px solid var(--tdn-line) !important;
    border-top: 4px solid var(--tdn-red) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22) !important;
    overflow-y: auto !important;
}

.admin-bar .tdn-hdr-drawer {
    top: calc(var(--tdn-brandbar-mobile) + 46px) !important;
}

.tdn-hdr-drawer.open { display: block !important; }

.tdn-hdr-drawer-search {
    margin: 16px !important;
    border: 1px solid var(--tdn-line) !important;
    border-radius: 999px !important;
    overflow: visible !important;
    background: var(--color-surface-alt, #f8f8fa) !important;
}

.tdn-hdr-drawer-search input {
    background: transparent !important;
    color: var(--color-fg, #0c0c0c) !important;
    border-radius: 999px 0 0 999px !important;
}

.tdn-hdr-drawer-search button {
    border-radius: 999px !important;
    margin: 3px !important;
    padding: 0 16px !important;
    background: var(--tdn-red) !important;
}

.tdn-hdr-drawer-nav {
    padding: 0 10px 10px !important;
}

.tdn-hdr-drawer-nav li a,
.tdn-hdr-drawer-nav li button.tdn-hdr-drawer-btn {
    margin: 4px 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: var(--color-fg, #0c0c0c) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.tdn-hdr-drawer-nav li a:hover,
.tdn-hdr-drawer-nav li a:focus-visible,
.tdn-hdr-drawer-nav li button.tdn-hdr-drawer-btn:hover,
.tdn-hdr-drawer-nav li button.tdn-hdr-drawer-btn:focus-visible {
    padding-left: 14px !important;
    color: #fff !important;
    background: var(--tdn-red) !important;
}

.tdn-hdr-drawer-social {
    margin: 0 16px 16px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--tdn-line) !important;
}

.tdn-hdr-drawer-social a {
    width: 36px !important;
    height: 36px !important;
    background: var(--color-surface-alt, #f8f8fa) !important;
    color: var(--color-fg, #0c0c0c) !important;
}

.tdn-hdr-drawer-social a:hover,
.tdn-hdr-drawer-social a:focus-visible {
    background: var(--tdn-red) !important;
    color: #fff !important;
}

.tdn-hdr-drawer-theme {
    margin: 0 16px 18px !important;
    width: calc(100% - 32px) !important;
    border-radius: 12px !important;
}

/* Smart header uses the new compact height */
body.tdn-scrolled-down #tdn-header {
    transform: translateY(calc(-1 * var(--tdn-brandbar-height))) !important;
}

body:has(.tdn-hdr-drawer.open) #tdn-header,
body:has(.tdn-cmdk.is-open) #tdn-header {
    transform: none !important;
}

@media (max-width: 768px) {
    #tdn-header {
        border-top-width: 3px !important;
    }

    .tdn-hdr-top {
        height: 61px !important;
        border-bottom: 1px solid var(--tdn-line) !important;
    }

    .tdn-hdr-top-inner {
        justify-content: center !important;
        padding: 0 58px !important;
    }

    .tdn-hdr-logo {
        gap: 8px !important;
        max-width: 100% !important;
    }

    .tdn-hdr-logo img {
        max-width: min(250px, 62vw) !important;
        max-height: 38px !important;
    }

    .tdn-hdr-logo-copy {
        display: flex !important;
    }

    .tdn-hdr-logo.has-custom-logo .tdn-hdr-logo-copy {
        display: none !important;
    }

    .tdn-hdr-logo-title {
        font-size: 20px !important;
        max-width: 54vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .tdn-hdr-logo-kicker {
        display: none !important;
    }

    .tdn-hdr-nav {
        display: none !important;
    }

    .tdn-hdr-burger {
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        display: flex !important;
        transform: translateY(-50%) !important;
    }

    .tdn-hdr-burger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .tdn-hdr-burger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0 !important;
    }

    .tdn-hdr-burger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

    body.tdn-scrolled-down #tdn-header {
        transform: translateY(calc(-1 * var(--tdn-brandbar-mobile))) !important;
    }
}

@media (min-width: 769px) and (max-width: 1040px) {
    .tdn-hdr-nav-links a,
    #tdn-header .tdn-hdr-nav-links a {
        padding: 0 8px !important;
        font-size: 10.5px !important;
        letter-spacing: .06em !important;
    }

    .tdn-hdr-nav-social a:nth-of-type(n+3) {
        display: none !important;
    }
}

/* Homepage redesign */
.tdn-main {
    background: transparent !important;
}

.hp-hero {
    max-width: var(--container, 1200px) !important;
    margin: 22px auto 0 !important;
    padding: 0 var(--gutter, 24px) !important;
}

.hp-hero__inner {
    display: grid !important;
    grid-template-columns: minmax(0, .86fr) minmax(340px, 1.38fr) minmax(0, .86fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.hp-hero__side {
    display: grid !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.hp-hero__center,
.hp-hero__side-card,
.tdn-spotlight-card,
.tdn-river-item,
.tdn-trending-card,
.tdn-cat-lead,
.tdn-cat-sub {
    background: var(--tdn-card-bg) !important;
    border: 1px solid var(--tdn-card-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.hp-hero__center:hover,
.hp-hero__side-card:hover,
.tdn-spotlight-card:hover,
.tdn-river-item:hover,
.tdn-trending-card:hover,
.tdn-cat-lead:hover,
.tdn-cat-sub:hover {
    border-color: var(--tdn-card-hover-line) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 42px rgba(12, 12, 12, .11) !important;
}

.hp-hero__center-img-wrap,
.hp-hero__side-img-wrap,
.tdn-spotlight-thumb,
.tdn-river-thumb,
.tdn-trending-thumb,
.tdn-cat-lead-thumb,
.tdn-cat-sub-thumb {
    background: var(--color-surface-alt, #f8f8fa) !important;
    overflow: hidden !important;
}

.hp-hero__center-img-wrap {
    aspect-ratio: 16 / 10 !important;
}

.hp-hero__side-img-wrap {
    aspect-ratio: 16 / 9 !important;
}

.hp-hero__center-img,
.hp-hero__side-img,
.tdn-spotlight-thumb img,
.tdn-river-thumb img,
.tdn-trending-thumb img,
.tdn-cat-lead-thumb img,
.tdn-cat-sub-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scale(1) !important;
    transition: transform .35s ease !important;
}

.hp-hero__center:hover img,
.hp-hero__side-card:hover img,
.tdn-spotlight-card:hover img,
.tdn-river-item:hover img,
.tdn-trending-card:hover img,
.tdn-cat-lead:hover img,
.tdn-cat-sub:hover img {
    transform: scale(1.035) !important;
}

.hp-hero__center-text,
.hp-hero__side-text,
.tdn-spotlight-body,
.tdn-river-body,
.tdn-trending-body,
.tdn-cat-lead-body,
.tdn-cat-sub-body {
    padding: 16px !important;
}

.hp-hero__center-text {
    padding: 18px 20px 20px !important;
}

.hp-hero__cat,
.tdn-badge,
.tdn-cat-badge,
.hp-hero__featured-label {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    min-height: 20px !important;
    padding: 0 8px !important;
    border-radius: 0 !important;
    background: var(--tdn-red) !important;
    color: #fff !important;
    font-family: var(--font-ui, system-ui, sans-serif) !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.hp-hero__featured-label {
    margin-bottom: 10px !important;
    background: linear-gradient(135deg, var(--tdn-red), var(--tdn-gold)) !important;
}

.hp-hero__featured-label-icon { display: none !important; }

.hp-hero__center-title,
.hp-hero__side-title,
.tdn-spotlight-headline,
.tdn-river-headline,
.tdn-trending-headline,
.tdn-cat-lead-headline,
.tdn-cat-sub-headline {
    font-family: var(--font-headline, 'Arial Narrow', sans-serif) !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    line-height: .98 !important;
    color: var(--color-fg, #0c0c0c) !important;
}

.hp-hero__center-title {
    margin: 12px 0 10px !important;
    font-size: clamp(34px, 4.4vw, 55px) !important;
}

.hp-hero__side-title {
    margin: 9px 0 0 !important;
    font-size: clamp(21px, 2.2vw, 28px) !important;
}

.hp-hero__center-title a,
.hp-hero__side-title a,
.tdn-spotlight-headline a,
.tdn-river-headline a,
.tdn-trending-headline a,
.tdn-cat-lead-headline a,
.tdn-cat-sub-headline a {
    color: inherit !important;
    text-decoration: none !important;
}

.hp-hero__center-title a:hover,
.hp-hero__side-title a:hover,
.tdn-spotlight-headline a:hover,
.tdn-river-headline a:hover,
.tdn-trending-headline a:hover,
.tdn-cat-lead-headline a:hover,
.tdn-cat-sub-headline a:hover {
    color: var(--tdn-red) !important;
}

.hp-hero__center-excerpt,
.tdn-spotlight-excerpt,
.tdn-river-excerpt,
.tdn-cat-lead-excerpt {
    color: var(--color-fg-muted, #5a5a5a) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.hp-hero__byline,
.tdn-meta,
.tdn-byline {
    color: var(--color-fg-muted, #5a5a5a) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.tdn-mag-container {
    max-width: var(--container, 1200px) !important;
    margin: 0 auto !important;
    padding: 28px var(--gutter, 24px) 0 !important;
}

.tdn-mag-section {
    margin-top: 38px !important;
}

.tdn-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
    border: 0 !important;
}

.tdn-section-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--color-fg, #0c0c0c) !important;
    font-family: var(--font-headline, sans-serif) !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.tdn-section-title::before {
    content: '';
    width: 10px;
    height: 22px;
    background: linear-gradient(180deg, var(--tdn-red), var(--tdn-gold));
}

.tdn-section-rule {
    flex: 1 1 auto !important;
    height: 1px !important;
    background: var(--tdn-line) !important;
}

.tdn-section-more {
    color: var(--tdn-red) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.tdn-spotlight-grid,
.tdn-trending-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.tdn-trending-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.tdn-river-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.tdn-river-item {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    min-height: 128px !important;
}

.tdn-river-thumb {
    min-height: 100% !important;
}

.tdn-cat-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .9fr) !important;
    gap: 18px !important;
}

.tdn-cat-sidebar {
    display: grid !important;
    gap: 12px !important;
}

.tdn-cat-sub {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
}

.tdn-trending-rank {
    background: var(--tdn-red) !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(229, 26, 62, .24) !important;
}

/* Single posts and archives get the same flatter entertainment-site treatment */
.tdn-single-wrap,
.tdn-arch-wrap {
    padding-top: 34px !important;
}

.tdn-article,
.tdn-arch-main,
.tdn-sidebar,
.tdn-article-card,
.tdn-search-card,
.tdn-related-card,
.tdn-sidebar-widget {
    border-radius: 0 !important;
}

.tdn-article-title,
.tdn-arch-title,
.entry-title {
    font-family: var(--font-headline, sans-serif) !important;
    font-weight: 900 !important;
    letter-spacing: -.015em !important;
}

.tdn-sidebar-widget,
.tdn-related,
.tdn-article-card,
.tdn-search-card {
    border: 1px solid var(--tdn-card-line) !important;
    box-shadow: none !important;
}

/* Footer alignment with the new flatter look */
.tdn-footer {
    border-top: 4px solid var(--tdn-red) !important;
}

/* Dark mode readability */
html[data-theme="dark"] #tdn-header,
html[data-theme="dark"] .tdn-hdr-top,
html[data-theme="dark"] .tdn-hdr-nav,
html[data-theme="dark"] .tdn-hdr-drawer {
    background: var(--color-surface, #101012) !important;
}

html[data-theme="dark"] .tdn-hdr-top {
    background:
        linear-gradient(90deg, rgba(229, 26, 62, .12), transparent 20%, transparent 80%, rgba(200, 146, 42, .1)),
        var(--color-surface, #101012) !important;
}

html[data-theme="dark"] .tdn-hdr-logo-title,
html[data-theme="dark"] .tdn-hdr-nav-links a,
html[data-theme="dark"] #tdn-header .tdn-hdr-nav-links a,
html[data-theme="dark"] .tdn-hdr-burger span {
    color: var(--color-fg, #f4f4f5) !important;
}

html[data-theme="dark"] .tdn-hdr-burger span {
    background: var(--color-fg, #f4f4f5) !important;
}

html[data-theme="dark"] .tdn-hdr-nav-links a:hover,
html[data-theme="dark"] .tdn-hdr-nav-links a:focus-visible,
html[data-theme="dark"] .tdn-hdr-nav-links a.current {
    color: #fff !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tdn-line: rgba(255, 255, 255, .12);
        --tdn-card-line: rgba(255, 255, 255, .12);
        --tdn-card-hover-line: rgba(229, 26, 62, .55);
        --tdn-page-bg: var(--color-bg, #0a0a0b);
    }

    :root:not([data-theme="light"]) #tdn-header,
    :root:not([data-theme="light"]) .tdn-hdr-top,
    :root:not([data-theme="light"]) .tdn-hdr-nav,
    :root:not([data-theme="light"]) .tdn-hdr-drawer {
        background: var(--color-surface, #101012) !important;
    }

    :root:not([data-theme="light"]) .tdn-hdr-logo-title,
    :root:not([data-theme="light"]) .tdn-hdr-nav-links a,
    :root:not([data-theme="light"]) #tdn-header .tdn-hdr-nav-links a {
        color: var(--color-fg, #f4f4f5) !important;
    }

    :root:not([data-theme="light"]) .tdn-hdr-burger span {
        background: var(--color-fg, #f4f4f5) !important;
    }
}

@media (max-width: 980px) {
    .hp-hero__inner {
        grid-template-columns: 1fr !important;
    }

    .hp-hero__side {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
    }

    .tdn-spotlight-grid,
    .tdn-trending-grid,
    .tdn-river-grid,
    .tdn-cat-layout {
        grid-template-columns: 1fr 1fr !important;
    }

    .tdn-cat-sidebar {
        grid-column: 1 / -1 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .hp-hero,
    .tdn-mag-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hp-hero {
        margin-top: 14px !important;
    }

    .hp-hero__inner,
    .hp-hero__side,
    .tdn-spotlight-grid,
    .tdn-trending-grid,
    .tdn-river-grid,
    .tdn-cat-layout,
    .tdn-cat-sidebar {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .tdn-river-item,
    .tdn-cat-sub {
        grid-template-columns: 112px minmax(0, 1fr) !important;
    }

    .hp-hero__center-title {
        font-size: clamp(31px, 10vw, 42px) !important;
    }

    .hp-hero__side-title {
        font-size: 25px !important;
    }

    .tdn-section-title {
        font-size: 22px !important;
    }
}

@media (max-width: 460px) {
    .tdn-river-item,
    .tdn-cat-sub {
        grid-template-columns: 96px minmax(0, 1fr) !important;
    }

    .tdn-river-body,
    .tdn-cat-sub-body {
        padding: 12px !important;
    }

    .tdn-river-headline,
    .tdn-cat-sub-headline {
        font-size: 19px !important;
    }
}