/* ============================================================
   AMA LIVE — Public theme (dark, red accents)
   Reference layout: red nav bar, cover stories, trending list.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }

html { font-size: var(--fs-base); }
body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--lh-base);
    font-weight: var(--fw-base);
    color: var(--color-text);
    background: var(--color-background);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    color: var(--color-text);
    letter-spacing: -.01em;
    margin-bottom: .5rem;
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

p { margin-bottom: 1rem; }
small { font-size: .85rem; color: var(--color-text-muted); }
hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.site-main { flex: 1; padding: 1.25rem 0 3rem; }

.skip-link { position: absolute; top: -100px; left: 1rem; background: var(--color-primary); color: #fff; padding: .5rem .85rem; border-radius: 4px; z-index: 9999; transition: top .15s; }
.skip-link:focus { top: .5rem; color: #fff; }

/* ---------- 1. HEADER (red bar) ---------- */
.site-header {
    background: var(--color-header-bg);
    color: var(--color-header-text);
    position: relative;
    z-index: 50;
}
.site-header.is-sticky { position: sticky; top: 0; box-shadow: 0 2px 12px rgba(0,0,0,.35); }

.header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--header-height);
}

.site-brand { display: flex; align-items: center; gap: .55rem; color: #fff; flex-shrink: 0; }
.site-brand__mark {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: #ffffff;
    color: var(--color-primary);
    display: grid; place-items: center;
    font-weight: 900; font-size: 1.05rem;
    letter-spacing: -.03em;
}
.site-brand__name {
    font-weight: 800; font-size: 1.05rem;
    color: #fff;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.site-brand__tagline { display: none; }

.header-nav { display: none; flex: 1; overflow: hidden; }
.header-nav ul { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; }
.header-nav a {
    display: block;
    padding: .5rem .85rem;
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
    border-radius: 0;
    transition: background .12s ease;
    white-space: nowrap;
}
.header-nav a:hover { background: rgba(255,255,255,.15); color: #fff; }
.header-nav a.is-active { background: rgba(0,0,0,.15); color: #fff; }

.header-nav .has-children { position: relative; }
.header-nav .has-children > a::after { content: ' ▾'; font-size: .7em; opacity: .8; }
.header-nav .submenu {
    position: absolute; top: 100%; left: 0;
    min-width: 200px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    padding: .35rem;
    display: none;
    z-index: 60;
}
.header-nav .has-children:hover .submenu,
.header-nav .has-children:focus-within .submenu,
.header-nav .has-children.is-open .submenu { display: block; }
.header-nav .submenu a { color: var(--color-text); padding: .55rem .75rem; text-transform: none; font-weight: 500; }
.header-nav .submenu a:hover { background: var(--color-surface); color: var(--color-primary); }

.header-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.header-btn {
    background: transparent;
    border: 0;
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .12s ease;
}
.header-btn:hover { background: rgba(255,255,255,.15); }

.header-watch {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(0,0,0,.2);
    color: #fff;
    padding: .5rem .9rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: 1px solid rgba(255,255,255,.25);
    transition: background .12s ease;
}
.header-watch:hover { background: rgba(0,0,0,.35); color: #fff; }
.header-watch::before { content: '▶'; font-size: .68rem; }

.header-toggle { display: inline-flex; }
@media (min-width: 950px) {
    .header-nav { display: block; }
    .header-toggle { display: none; }
}

/* Mobile nav drawer */
.header-nav.is-open-mobile {
    display: block;
    position: absolute;
    top: var(--header-height);
    left: 0; right: 0;
    background: var(--color-background);
    border-bottom: 2px solid var(--color-primary);
    padding: .5rem;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    z-index: 55;
}
.header-nav.is-open-mobile ul { flex-direction: column; align-items: stretch; }
.header-nav.is-open-mobile a { color: var(--color-text); padding: .75rem 1rem; border-radius: 4px; }
.header-nav.is-open-mobile a:hover { background: var(--color-surface); }
.header-nav.is-open-mobile .submenu { position: static; box-shadow: none; border: 0; padding: 0 0 0 1rem; background: transparent; }

/* Search panel */
.search-panel { padding: 0 0 1rem; }
.search-panel form { display: flex; gap: .5rem; }
.search-panel input {
    flex: 1; padding: .65rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}
.search-panel button {
    padding: .65rem 1.2rem;
    border: 0; border-radius: 4px;
    background: var(--color-background);
    color: var(--color-primary);
    font-weight: 700;
    cursor: pointer;
}

/* Breaking bar */
.breaking-bar { background: var(--color-background); color: var(--color-text); padding: .55rem 0; border-bottom: 1px solid var(--color-border); }
.breaking-bar__inner { display: flex; align-items: center; gap: .85rem; }
.breaking-bar__label {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    font-size: .7rem;
    background: var(--color-primary);
    color: #fff;
    padding: .28rem .55rem;
    border-radius: 3px;
    flex-shrink: 0;
}
.breaking-bar__label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: ama-pulse 1.4s ease-in-out infinite; }
@keyframes ama-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.breaking-bar__track { flex: 1; overflow: hidden; white-space: nowrap; }
.breaking-bar__item { display: inline-block; color: inherit; font-weight: 500; margin-right: 2.5rem; font-size: .9rem; }
.breaking-bar__item:hover { color: var(--color-primary); }

/* ---------- 2. SECTIONS ---------- */
.section { margin-bottom: 2rem; }

.section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-border);
    position: relative;
}
.section-head::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 70px; height: 2px; background: var(--color-primary);
}
.section-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
    margin: 0;
    text-transform: uppercase;
}
.section-link { font-size: .78rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .05em; }
.section-link:hover { color: var(--color-primary-dark); }

/* Top stories row */
.section--top-stories { margin-bottom: 1.75rem; }
.top-stories { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; }
.top-stories__badge {
    background: var(--color-primary);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .82rem;
    padding: .65rem 1.1rem;
    border-radius: 3px;
    flex-shrink: 0;
    align-self: stretch;
    display: flex; align-items: center;
}
.top-stories__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .85rem;
    flex: 1;
    min-width: 0;
}

/* Hero 3-column grid */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 900px) {
    .hero-grid {
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 1.5rem;
        align-items: start;
    }
}
.hero-grid__left, .hero-grid__middle, .hero-grid__right { min-width: 0; }

.section-head--muted { border-bottom-color: var(--color-border); }
.section-head--muted .section-title { font-size: .95rem; }

/* Continue reading strip */
.grid-continue {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .85rem;
}
@media (min-width: 640px) { .grid-continue { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid-continue { grid-template-columns: repeat(5, 1fr); } }

/* Three-column composite */
.three-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 900px) {
    .three-column {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 1.5rem;
        align-items: start;
    }
}
.grid-cover {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}
@media (max-width: 640px) { .grid-cover { grid-template-columns: 1fr; } }

/* Latest 3-column grid */
.grid-latest {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .grid-latest { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-latest { grid-template-columns: repeat(3, 1fr); } }

/* Ad banner */
.section--ad { margin: 1.5rem 0; }
.ad-banner {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1.5rem;
    text-align: center;
}
.ad-banner__placeholder { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.ad-banner__placeholder strong { font-size: 1.4rem; font-weight: 900; letter-spacing: -.01em; color: var(--color-text); }
.ad-banner__placeholder span { font-size: .85rem; color: var(--color-text-muted); }

/* Newsletter box */
.newsletter-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 2rem 1.5rem;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.newsletter-box h2 { margin-bottom: .35rem; }
.newsletter-box p { margin-bottom: 1rem; }
.newsletter-box form { display: flex; gap: .5rem; max-width: 420px; margin: 0 auto; flex-wrap: wrap; }
.newsletter-box input {
    flex: 1; min-width: 200px;
    padding: .65rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-background);
    color: var(--color-text);
    font: inherit;
}
.newsletter-box button {
    padding: .65rem 1.2rem; border: 0; border-radius: 4px;
    background: var(--color-primary); color: #fff;
    font-weight: 700; cursor: pointer;
}

/* ---------- 3. CARDS ---------- */
.card {
    display: flex; flex-direction: column;
    background: transparent;
    border-radius: 4px;
    overflow: hidden;
}
.card__media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--color-surface);
    aspect-ratio: 16 / 9;
    border-radius: 4px;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: .65rem 0 0; display: flex; flex-direction: column; gap: .35rem; flex: 1; }

.card__cat {
    align-self: flex-start;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    background: var(--color-primary);
    padding: .2rem .5rem;
    border-radius: 3px;
}
.card__cat:hover { color: #fff; background: var(--color-primary-dark); }

.card__title {
    font-size: 1rem; font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card__title a { color: inherit; }
.card__title a:hover { color: var(--color-primary); }

.card__excerpt {
    font-size: .88rem; color: var(--color-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__meta {
    display: flex; align-items: center; gap: .5rem;
    font-size: .74rem; color: var(--color-text-muted);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: .35rem;
}
.card__meta .dot { color: var(--color-border); }

.card__cta {
    display: inline-flex; align-self: flex-start;
    margin-top: .5rem;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--color-primary);
    color: #fff;
    padding: .35rem .65rem;
    border-radius: 3px;
}
.card__cta:hover { background: var(--color-primary-dark); color: #fff; }

/* --- cover --- */
.card--cover .card__media { aspect-ratio: 16 / 10; }
.card--cover .card__title { font-size: clamp(1.15rem, 2.3vw, 1.55rem); -webkit-line-clamp: 3; }
.card--cover .card__excerpt { -webkit-line-clamp: 3; }

/* --- strip (Top Stories) --- */
.card--strip { flex-direction: row; gap: .65rem; }
.card--strip .card__media { width: 74px; height: 74px; aspect-ratio: auto; flex-shrink: 0; border-radius: 3px; }
.card--strip .card__body { padding: 0; gap: .15rem; }
.card--strip .card__title { font-size: .82rem; -webkit-line-clamp: 2; font-weight: 600; }
.card--strip .card__excerpt, .card--strip .card__cat, .card--strip .card__meta { display: none; }

/* --- list (Trending, Latest) --- */
.card--list {
    flex-direction: row; gap: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
}
.card--list:last-child { border-bottom: none; padding-bottom: 0; }
.card--list .card__media { width: 90px; height: 90px; aspect-ratio: auto; flex-shrink: 0; border-radius: 3px; }
.card--list .card__body { padding: 0; gap: .2rem; }
.card--list .card__cat { display: inline-block; font-size: .62rem; padding: .15rem .4rem; }
.card--list .card__title { font-size: .92rem; -webkit-line-clamp: 2; font-weight: 700; }
.card--list .card__excerpt { display: none; }
.card--list .card__meta { font-size: .7rem; }

/* --- medium --- */
.card--medium .card__media { aspect-ratio: 16 / 9; }
.card--medium .card__title { font-size: .95rem; -webkit-line-clamp: 3; }

/* --- continue (Continue Reading) --- */
.card--continue .card__media { aspect-ratio: 16 / 9; }
.card--continue .card__title { font-size: .88rem; -webkit-line-clamp: 2; }
.card--continue .card__excerpt { display: none; }
.card--continue .card__meta { display: none; }

/* --- must-read --- */
.card--must-read .card__media { aspect-ratio: 16 / 9; }
.card--must-read .card__title { font-size: 1.05rem; -webkit-line-clamp: 3; }
.card--must-read .card__excerpt { -webkit-line-clamp: 4; }

/* --- hero variants --- */
.card--hero { position: relative; }
.card--hero .card__media { aspect-ratio: 16 / 10; }
.card--hero .card__body {
    position: absolute; inset: auto 0 0 0;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,0) 100%);
    color: #fff;
}
.card--hero .card__title { color: #fff; font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
.card--hero .card__title a:hover { color: #fff; text-decoration: underline; }
.card--hero .card__excerpt { color: rgba(255,255,255,.85); }
.card--hero .card__meta { color: rgba(255,255,255,.75); }

.card--hero-small .card__media { aspect-ratio: 16 / 9; }
.card--hero-small .card__title { font-size: .95rem; -webkit-line-clamp: 2; }
.card--hero-small .card__excerpt { display: none; }

/* ---------- 4. ARTICLE PAGE ---------- */
.article-single { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .article-single { grid-template-columns: 1fr 320px; gap: 2.5rem; } }
.article-body { max-width: 780px; }
.article-hero { border-radius: 6px; overflow: hidden; margin-bottom: 1.5rem; }
.article-hero img { width: 100%; height: auto; }
.article-meta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; font-size: .82rem; color: var(--color-text-muted); margin: .75rem 0 1.25rem; }
.article-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.2; margin: .5rem 0; }
.article-content { font-size: 1.05rem; line-height: 1.75; color: var(--color-text); }
.article-content p { margin-bottom: 1.2rem; }
.article-content img { border-radius: 4px; margin: 1rem 0; }
.article-content h2 { margin-top: 2rem; font-size: 1.4rem; }
.article-content h3 { margin-top: 1.5rem; font-size: 1.15rem; }
.article-content a { color: var(--color-primary); text-decoration: underline; text-decoration-color: rgba(217,32,39,.5); }
.article-content blockquote { border-left: 3px solid var(--color-primary); padding-left: 1rem; color: var(--color-text-muted); font-style: italic; margin: 1.5rem 0; }
.article-content ul, .article-content ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }

.share-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: 2rem 0; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.share-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: .82rem; font-weight: 600; color: var(--color-text); }
.share-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---------- 5. ARCHIVE / LISTING ---------- */
.archive-head { padding: 1.5rem 0; border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; }
.archive-head h1 { margin: 0 0 .35rem; font-size: 1.75rem; }
.archive-head p { color: var(--color-text-muted); margin: 0; font-size: .9rem; }

.pagination { display: flex; gap: .3rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 .65rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: .85rem; color: var(--color-text); background: var(--color-surface); }
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---------- 6. FOOTER ---------- */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: 3rem 0 1rem; margin-top: 3rem; }
.site-footer a { color: var(--color-footer-text); opacity: .85; }
.site-footer a:hover { opacity: 1; color: #fff; }

.footer-cols { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-cols { grid-template-columns: 1.4fr 1.4fr 1fr 1.2fr; } }

.footer-col h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--color-primary); display: inline-block; }

.footer-about__brand { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.footer-about__brand .site-brand__mark { background: var(--color-primary); color: #fff; }
.footer-about__name { font-weight: 800; font-size: 1.15rem; color: #fff; }
.footer-about p { font-size: .85rem; opacity: .7; margin: .75rem 0 1rem; }
.footer-social { display: flex; gap: .4rem; }
.footer-social a { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(255,255,255,.06); border-radius: 4px; transition: background .12s ease; }
.footer-social a:hover { background: var(--color-primary); color: #fff; opacity: 1; }

.footer-news-list { display: flex; flex-direction: column; gap: .75rem; }
.footer-news-item { display: flex; gap: .65rem; align-items: flex-start; }
.footer-news-item img { width: 58px; height: 58px; border-radius: 3px; object-fit: cover; flex-shrink: 0; background: var(--color-surface); }
.footer-news-item__title { font-size: .82rem; font-weight: 600; color: var(--color-footer-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.footer-news-item__meta { font-size: .7rem; color: var(--color-text-muted); margin-top: .15rem; }

.footer-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.25rem; }
.footer-pill { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .28rem .55rem; background: rgba(255,255,255,.06); border-radius: 3px; color: var(--color-footer-text); }
.footer-pill:hover { background: var(--color-primary); color: #fff; opacity: 1; }

.footer-search { display: flex; gap: .35rem; margin-bottom: 1.25rem; }
.footer-search input { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; padding: .55rem .75rem; border-radius: 3px; font: inherit; }
.footer-search button { background: var(--color-primary); color: #fff; border: 0; padding: 0 1rem; border-radius: 3px; font-weight: 700; cursor: pointer; }

.footer-quick { display: flex; flex-direction: column; gap: .45rem; font-size: .85rem; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.25rem; font-size: .8rem; flex-wrap: wrap; }
.footer-bottom p { margin: 0; opacity: .65; }

/* ---------- 7. UTILITIES ---------- */
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.back-top { position: fixed; bottom: 1.25rem; right: 1.25rem; width: 44px; height: 44px; background: var(--color-primary); color: #fff; border: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; z-index: 40; }
.back-top.is-visible { opacity: 1; visibility: visible; }
.back-top:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   STEP 12 — Archive layout, filter bar, sidebar widgets
   ============================================================ */

/* Two-column archive layout */
.archive-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 900px) {
    .archive-layout { grid-template-columns: 3fr 1fr; }
    .archive-layout.layout-left { grid-template-columns: 1fr 3fr; }
    .archive-layout.layout-left .archive-main { order: 2; }
    .archive-layout.layout-left .sidebar { order: 1; }
    .archive-layout.layout-none { grid-template-columns: 1fr; }
    .archive-layout.layout-none .sidebar { display: none; }
}
.archive-main { min-width: 0; }

/* Archive header */
.archive-head {
    padding: 1.75rem 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
}
.archive-head h1 {
    margin: 0 0 .35rem;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -.01em;
}
.archive-head .archive-head__count {
    color: var(--color-text-muted);
    font-size: .85rem;
    margin: 0;
}
.archive-head .archive-head__description {
    color: var(--color-text-muted);
    font-size: .95rem;
    margin: .5rem 0 0;
    max-width: 720px;
}

/* Featured strip on category pages */
.category-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 900px) {
    .category-featured { grid-template-columns: 2fr 1fr; gap: 1.25rem; }
}
.category-featured__left { min-width: 0; }
.category-featured__right { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }

/* Filter bar */
.archive-filter {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.archive-filter__label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    margin-right: .35rem;
}
.archive-filter a {
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.archive-filter a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.archive-filter a.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---------- SIDEBAR ---------- */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1rem 1.1rem;
}

.widget__title {
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text);
    margin: 0 0 .85rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

/* Categories widget */
.widget-cat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.widget-cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .55rem;
    border-radius: 4px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--color-text);
    transition: background .12s ease, color .12s ease;
}
.widget-cat-list a:hover { background: var(--color-background); color: var(--color-primary); }
.widget-cat-list a > span:first-child { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.widget-cat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.widget-cat-count {
    font-size: .72rem;
    font-weight: 700;
    background: var(--color-background);
    color: var(--color-text-muted);
    padding: .1rem .45rem;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}

/* Tags cloud */
.widget-tags-cloud { display: flex; flex-wrap: wrap; gap: .35rem; }
.widget-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-background);
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.widget-tag:hover { border-color: var(--color-primary); color: var(--color-primary); }
.widget-tag.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.widget-tag-count { font-size: .68rem; opacity: .75; font-weight: 700; }

/* Newsletter widget */
.widget-newsletter-form { display: flex; flex-direction: column; gap: .5rem; }
.widget-newsletter-form input {
    padding: .6rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-background);
    color: var(--color-text);
    font: inherit;
    font-size: .88rem;
}
.widget-newsletter-form button {
    padding: .6rem .85rem;
    border: 0;
    border-radius: 4px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
}
.widget-newsletter-form button:hover { background: var(--color-primary-dark); }

/* Ad widget */
.sidebar-ad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.5rem 1rem;
    background: var(--color-background);
    border: 1px dashed var(--color-border);
    border-radius: 4px;
    text-align: center;
}
.sidebar-ad strong { font-size: .95rem; font-weight: 900; letter-spacing: .04em; color: var(--color-text); }
.sidebar-ad span { font-size: .72rem; color: var(--color-text-muted); }

/* Search widget */
.widget-search-form { display: flex; gap: .35rem; }
.widget-search-form input {
    flex: 1;
    padding: .55rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-background);
    color: var(--color-text);
    font: inherit;
    font-size: .85rem;
}
.widget-search-form button {
    padding: 0 .9rem;
    border: 0;
    border-radius: 4px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
}

/* Mobile: sidebar collapses below the content */
@media (max-width: 899px) {
    .archive-layout { grid-template-columns: 1fr; }
    .sidebar { margin-top: 1rem; }
    .widget--ad { display: none; }
}

/* ============================================================
   STEP 13 — Article page enrichment
   ============================================================ */

/* Reading progress bar */
.reading-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 200;
    pointer-events: none;
}
.reading-progress__bar {
    width: 0%;
    height: 100%;
    background: var(--color-primary);
    transition: width .08s linear;
}
@media (prefers-reduced-motion: reduce) { .reading-progress__bar { transition: none; } }

/* Article hero */
.article-hero { margin: 0 0 1.75rem; border-radius: 6px; overflow: hidden; background: var(--color-surface); }
.article-hero img { width: 100%; height: auto; display: block; }
.article-hero__caption {
    display: block;
    padding: .6rem .85rem;
    font-size: .82rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

/* Article tags */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    margin: 1.75rem 0 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}
.article-tags__label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    margin-right: .35rem;
}
.article-tag {
    display: inline-block;
    padding: .32rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.article-tag:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

/* Share row */
.article-share {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin: 1rem 0 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.article-share__label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    margin-right: .35rem;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.share-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.share-btn--copy.is-copied { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Author box */
.article-author {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    margin: 1.5rem 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}
.article-author__avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .02em;
}
.article-author__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-author__initials { color: #fff; }
.article-author__body { min-width: 0; flex: 1; }
.article-author__name { font-size: 1rem; margin-bottom: .35rem; }
.article-author__bio { font-size: .88rem; color: var(--color-text-muted); line-height: 1.55; margin: 0 0 .5rem; }
.article-author__meta { font-size: .78rem; color: var(--color-text-muted); }
.article-author__link { color: var(--color-text-muted); cursor: not-allowed; text-decoration: underline dotted; }

@media (max-width: 480px) {
    .article-author { flex-direction: column; align-items: center; text-align: center; }
    .article-author__avatar { width: 56px; height: 56px; }
}

/* Prev / Next */
.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin: 1.5rem 0 2rem;
}
.article-nav__item {
    display: block;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    transition: border-color .15s ease, transform .15s ease;
}
.article-nav__item:hover { border-color: var(--color-primary); color: var(--color-text); }
.article-nav__item--next { text-align: right; }
.article-nav__item--empty { background: transparent; border-style: dashed; opacity: .35; pointer-events: none; }
.article-nav__dir { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: .35rem; }
.article-nav__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.35;
}
@media (max-width: 640px) {
    .article-nav { grid-template-columns: 1fr; }
    .article-nav__item--next { text-align: left; }
}

/* Comments placeholder */
.article-comments {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
.article-comments__title {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: .85rem;
}
.comment-form-placeholder {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.comment-form-placeholder__notice {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .75rem;
    border-left: 3px solid var(--color-primary);
    background: rgba(217,32,39,.08);
    border-radius: 3px;
    font-size: .85rem;
}
.comment-form-placeholder__notice strong { color: var(--color-primary); }
.comment-form-placeholder__notice span { color: var(--color-text-muted); }
.comment-form-placeholder__field,
.comment-form-placeholder__textarea {
    padding: .65rem .85rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-muted);
    font-size: .88rem;
}
.comment-form-placeholder__textarea { min-height: 96px; }
.comment-form-placeholder__btn {
    align-self: flex-start;
    padding: .55rem 1.1rem;
    background: var(--color-border);
    color: var(--color-text-muted);
    border: 0;
    border-radius: 4px;
    font-weight: 700;
    font-size: .85rem;
    cursor: not-allowed;
}

/* ============================================================
   STEP 13.5 — Article page layout (reference-match)
   ============================================================ */

/* ---------- Two-tier header ---------- */
.site-header__top {
    background: var(--color-background);
    padding: .75rem 0;
    border-bottom: 1px solid var(--color-border);
}
.site-header__top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}
.site-header__top .site-brand { color: var(--color-text); }
.site-header__top .site-brand__mark { background: var(--color-primary); color: #fff; }
.site-header__top .site-brand__name { color: var(--color-text); font-size: 1.4rem; font-weight: 900; letter-spacing: -.02em; }
.site-header__top .site-brand__tagline { color: var(--color-text-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.site-header__top-banner {
    display: none;
    flex-shrink: 0;
    max-width: 730px;
}
@media (min-width: 900px) { .site-header__top-banner { display: block; } }

.top-banner-slot {
    width: 728px;
    height: 90px;
    max-width: 100%;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
}
.top-banner-slot__text {
    font-weight: 900;
    letter-spacing: .06em;
    color: var(--color-text);
    font-size: .95rem;
}
.top-banner-slot__meta {
    color: var(--color-text-muted);
    font-size: .7rem;
    letter-spacing: .08em;
}

/* Red nav bar styling is already in theme.css from STEP 11. Ensure it stacks below the top bar. */
.site-header__nav {
    background: var(--color-header-bg);
}

/* ---------- Article page layout ---------- */
.article-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
@media (min-width: 900px) {
    .article-page {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}
.article-page__main { min-width: 0; max-width: 100%; }

/* Article header area */
.article-header {
    margin-bottom: 1.25rem;
}
.article-category-pill {
    display: inline-block;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    background: var(--color-primary);
    padding: .28rem .6rem;
    border-radius: 3px;
    margin-bottom: .85rem;
}
.article-category-pill:hover { color: #fff; background: var(--color-primary-dark); }

.article-title {
    font-size: clamp(1.6rem, 4.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 1rem;
    letter-spacing: -.02em;
}

.article-lead {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    border-left: 3px solid var(--color-primary);
    padding-left: .9rem;
    margin: 0 0 1rem;
    max-width: 780px;
}

.article-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    align-items: center;
    font-size: .84rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}
.article-meta-line strong { color: var(--color-text); font-weight: 700; }
.article-meta-line .dot { opacity: .55; }

/* Article hero */
.article-page .article-hero {
    margin: 0 0 1.75rem;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-surface);
    max-width: 100%;
}
.article-page .article-hero img { width: 100%; height: auto; display: block; }
.article-page .article-hero__caption {
    display: block;
    padding: .6rem .85rem;
    font-size: .82rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

/* Content */
.article-page .article-content {
    max-width: 780px;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--color-text);
}
.article-page .article-content p { margin-bottom: 1.2rem; }
.article-page .article-content img { border-radius: 4px; margin: 1rem 0; max-width: 100%; height: auto; }
.article-page .article-content h2 { margin-top: 2rem; font-size: 1.5rem; }
.article-page .article-content h3 { margin-top: 1.5rem; font-size: 1.2rem; }
.article-page .article-content a { color: var(--color-primary); text-decoration: underline; text-decoration-color: rgba(217,32,39,.4); }
.article-page .article-content blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: 1rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 1.5rem 0;
}
.article-page .article-content ul,
.article-page .article-content ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }

/* ---------- Author box (UMWANDITSI) ---------- */
.article-author-box {
    margin: 2rem 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-surface);
    max-width: 780px;
}
.article-author-box__title {
    padding: .65rem 1rem;
    background: #000;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 2px solid var(--color-primary);
}
.article-author-box__body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1rem;
}
.article-author-box__avatar {
    width: 100px; height: 100px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -.02em;
}
.article-author-box__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-author-box__initials { color: #fff; }
.article-author-box__info { min-width: 0; }
.article-author-box__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .55rem;
}
.article-author-box__socials { display: flex; gap: .35rem; flex-wrap: wrap; }
.article-author-box__socials a {
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.article-author-box__socials a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
@media (max-width: 480px) {
    .article-author-box__avatar { width: 72px; height: 72px; font-size: 1.5rem; }
    .article-author-box__name { font-size: .95rem; }
}

/* ---------- Article sidebar: Latest News ---------- */
.article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}
.widget--latest {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
}
.widget--latest .widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem .65rem;
    border-bottom: 2px solid var(--color-primary);
}
.widget--latest .widget__title {
    margin: 0;
    border: 0;
    padding: 0;
    display: block;
    font-size: .85rem;
}
.widget--latest .widget__more {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-primary);
}

.widget-latest-list { padding: .75rem 1rem 1rem; display: flex; flex-direction: column; gap: .9rem; }

.latest-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--color-border);
}
.latest-item:last-child { padding-bottom: 0; border-bottom: 0; }
.latest-item__body { flex: 1; min-width: 0; }
.latest-item__cat {
    display: inline-block;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-primary);
    margin-bottom: .25rem;
}
.latest-item__title {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .3rem;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.latest-item__title a { color: inherit; }
.latest-item__title a:hover { color: var(--color-primary); }
.latest-item__date {
    font-size: .72rem;
    color: var(--color-text-muted);
}
.latest-item__media {
    flex-shrink: 0;
    width: 80px; height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-background);
}
.latest-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Article page mobile stacking */
@media (max-width: 899px) {
    .article-page { grid-template-columns: 1fr; }
    .article-sidebar { margin-top: 1.5rem; }
}

/* Hide breadcrumbs on article page (theme-controlled) */
.article-page .breadcrumbs { display: none; }

/* ============================================================
   STEP 13.6 — Smart auto-hiding header
   ============================================================ */

/* The header slides up when hidden, slides back when shown. */
.site-header[data-smart-header] {
    transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                box-shadow .2s ease;
    will-change: transform;
    transform: translateY(0);
}

/* Hidden state — scrolled down */
.site-header[data-smart-header].is-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

/* Always visible at the very top (adds a subtle shadow after scroll) */
.site-header[data-smart-header].is-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* Never hide when focus is inside the header (keyboard nav) */
.site-header[data-smart-header]:focus-within {
    transform: translateY(0) !important;
}

/* Never hide when the mobile drawer is open or the search panel is visible */
.site-header[data-smart-header].is-locked,
body.ama-nav-open .site-header[data-smart-header],
body.ama-search-open .site-header[data-smart-header] {
    transform: translateY(0) !important;
}

/* Reduced motion: keep the hide/show working but disable the slide */
@media (prefers-reduced-motion: reduce) {
    .site-header[data-smart-header] {
        transition: none;
    }
}


/* ============================================================
   FINAL AMA LIVE UI — clean cards, unified sidebar, sticky rail
   ============================================================ */
.card,
.grid-latest .card,
.grid-latest--dense .card,
.editors-picks-list .card,
.you-must-read .card,
.widget-post-list .card,
.category-news-grid .card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.card__media { border-radius: 6px; }
.card--list { border-bottom: 0 !important; padding-bottom: .15rem; }
.section--category-news .section-head { margin-bottom: .85rem; }
.category-news-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.1rem; }
@media(min-width:640px){.category-news-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1050px){.category-news-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.category-news-grid .card__media { aspect-ratio: 16/9; }
.category-news-grid .card__title { font-size:.86rem; line-height:1.35; -webkit-line-clamp:2; }
.category-news-grid .card__body { padding-top:.45rem; }

.ama-home-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; align-items:start; }
@media(min-width:1000px){
    .ama-home-layout{grid-template-columns:minmax(0,1fr) 310px;}
    .ama-home-layout > .sidebar{position:sticky;top:calc(var(--header-height) + 1rem);align-self:start;max-height:calc(100vh - var(--header-height) - 2rem);overflow:auto;scrollbar-width:thin;}
}
.ama-home-main{min-width:0;}

.sidebar { gap:1.1rem; }
@media(min-width:900px){
    .archive-layout > .sidebar { position:sticky; top:calc(var(--header-height) + 1rem); align-self:start; max-height:calc(100vh - var(--header-height) - 2rem); overflow:auto; scrollbar-width:thin; }
}
.widget { border:0 !important; background:transparent !important; border-radius:0 !important; padding:0 0 1.15rem !important; box-shadow:none !important; border-bottom:1px solid color-mix(in srgb,var(--color-border) 40%,transparent) !important; }
.widget:last-child{border-bottom:0 !important;}
.widget__title { border-bottom:2px solid var(--color-primary); padding-bottom:.45rem; margin-bottom:.75rem; }
.widget__head-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem;}
.widget__head-row .widget__title{margin:0;}
.widget__more{font-size:.68rem;text-transform:uppercase;font-weight:800;color:var(--color-primary);white-space:nowrap;}
.widget-post-list{display:flex;flex-direction:column;gap:.7rem;}
.widget-post-list .card--list{gap:.65rem;}
.widget-post-list .card--list .card__media{width:78px;height:60px;}
.widget-post-list .card--list .card__title{font-size:.82rem;-webkit-line-clamp:2;}
.widget-post-list .card--list .card__cat{display:none;}
.widget-post-list .card--list .card__meta{display:none;}

.widget--ad .sidebar-ad{border:1px dashed color-mix(in srgb,var(--color-border) 70%,transparent);background:transparent;border-radius:6px;}
.stay-touch-list{display:grid;grid-template-columns:1fr;gap:.35rem;}
.stay-touch-item{display:flex;align-items:center;gap:.65rem;padding:.5rem .1rem;color:var(--color-text);font-size:.84rem;font-weight:600;transition:color .15s ease,transform .15s ease;}
.stay-touch-item:hover{color:var(--color-primary);transform:translateX(2px);}
.stay-touch-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--color-surface);color:var(--color-text);flex:0 0 32px;}
.stay-touch-arrow{margin-left:auto;color:var(--color-text-muted);font-size:.8rem;}

/* Compact masthead: this is the only public header. */
.ama-headbar{position:relative;z-index:100;background:var(--color-header-bg);color:var(--color-header-text);border-bottom:1px solid color-mix(in srgb,var(--color-border) 55%,transparent);}
.ama-headbar.is-sticky{position:sticky;top:0;box-shadow:0 4px 20px rgba(0,0,0,.18);}
.ama-headbar__inner{min-height:var(--header-height);display:flex;align-items:center;gap:1rem;position:relative;}
.ama-headbar__brand{display:flex;align-items:center;gap:.65rem;min-width:0;color:var(--color-header-text);}
.ama-headbar__brand:hover{color:var(--color-header-text);}
.ama-headbar__logo{width:auto;height:42px;max-width:170px;object-fit:contain;}
.ama-headbar__mark{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:var(--color-primary);color:#fff;font-weight:900;}
.ama-headbar__brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.1;}
.ama-headbar__brand-text strong{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ama-headbar__brand-text small{font-size:.65rem;color:color-mix(in srgb,var(--color-header-text) 72%,transparent);margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ama-headbar__toggle{margin-left:auto;width:42px;height:42px;border:0;background:transparent;color:var(--color-header-text);display:grid;place-items:center;gap:4px;padding:10px;border-radius:8px;cursor:pointer;}
.ama-headbar__toggle span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.ama-headbar__toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}.ama-headbar__toggle.is-open span:nth-child(2){opacity:0}.ama-headbar__toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.ama-headbar__nav{display:none;position:absolute;left:1rem;right:1rem;top:calc(100% + 1px);padding:.45rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.25);}
.ama-headbar__nav.is-open{display:flex;flex-direction:column;}
.ama-headbar__nav>a,.ama-headbar__nav-item>a{display:flex;align-items:center;gap:.3rem;padding:.65rem .75rem;color:var(--color-text);font-size:.86rem;font-weight:700;border-radius:6px;}
.ama-headbar__nav a:hover,.ama-headbar__nav a.is-active{background:var(--color-surface);color:var(--color-primary);}
.ama-headbar__nav-item{position:relative;}
.ama-headbar__submenu{display:none;padding-left:.75rem;}
.ama-headbar__nav-item.has-children:hover .ama-headbar__submenu,.ama-headbar__nav-item.has-children:focus-within .ama-headbar__submenu{display:block;}
.ama-headbar__submenu a{display:block;padding:.5rem .75rem;color:var(--color-text-muted);font-size:.8rem;}
@media(min-width:950px){
 .ama-headbar__toggle{display:none}.ama-headbar__nav{display:flex;position:static;margin-left:auto;padding:0;border:0;box-shadow:none;background:transparent;gap:.15rem;align-items:center;}
 .ama-headbar__nav-item{display:flex;align-items:center}.ama-headbar__nav>a,.ama-headbar__nav-item>a{color:var(--color-header-text);padding:.55rem .7rem;background:transparent;}
 .ama-headbar__nav a:hover,.ama-headbar__nav a.is-active{background:color-mix(in srgb,var(--color-header-text) 10%,transparent);color:var(--color-header-text);}
 .ama-headbar__submenu{position:absolute;top:100%;left:0;min-width:190px;padding:.35rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.25);}
}

.you-must-read{margin-top:2rem;}
.you-must-read__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
@media(min-width:800px){.you-must-read__grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.you-must-read__grid .card__title{font-size:.9rem;-webkit-line-clamp:2;}

.customizer-help{padding:.8rem .9rem;margin-bottom:1rem;background:var(--ama-bg-soft);border-left:3px solid var(--ama-brand);color:var(--ama-muted);font-size:.78rem;line-height:1.55;border-radius:6px;}
.cz-media-row,.settings-media-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.cz-media-preview,.settings-media-preview{width:84px;height:56px;border-radius:6px;background:var(--ama-bg-soft);overflow:hidden;display:grid;place-items:center;color:var(--ama-muted);font-size:.7rem;}
.cz-media-preview img,.settings-media-preview img{width:100%;height:100%;object-fit:contain;}
.cz-media-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;display:flex;align-items:center;justify-content:center;padding:2vw;}
.cz-media-modal__box{width:min(1000px,96vw);height:min(720px,90vh);background:var(--ama-bg);border:1px solid var(--ama-border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;}
.cz-media-modal__head{padding:.7rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ama-border);}
.cz-media-modal__box iframe{border:0;flex:1;width:100%;}

@media(min-width:900px){.article-page > .sidebar{position:sticky;top:calc(var(--header-height) + 1rem);align-self:start;max-height:calc(100vh - var(--header-height) - 2rem);overflow:auto;scrollbar-width:thin;}}


/* ============================================================
   V3 FINAL — clean cards + real autoplay sliders
   ============================================================ */
.card,
.card--list,
.grid-latest--dense .card,
.editors-picks-list .card,
.you-must-read .card,
.widget-post-list .card,
.category-news-grid .card,
.grid-continue .card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.card--list { padding-bottom: .7rem; }
.card--list:last-child { padding-bottom: 0; }

/* Top Stories / AMAKURU autoplay carousel */
.ama-auto-slider { position: relative; min-width: 0; }
.ama-auto-slider__track { position: relative; min-height: 1px; }
.ama-auto-slider__slide { display: none; width: 100%; min-width: 0; animation: amaSliderIn .45s ease both; }
.ama-auto-slider__slide.is-active { display: block; }
.ama-auto-slider__slide[aria-hidden="true"] { visibility: hidden; }
.ama-auto-slider__dots { display: flex; justify-content: center; align-items: center; gap: .32rem; margin-top: .55rem; }
.ama-auto-slider__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--color-border); cursor: pointer; transition: transform .2s ease, background .2s ease, width .2s ease; }
.ama-auto-slider__dot.is-active { width: 18px; background: var(--color-primary); }
.ama-auto-slider__dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.top-stories__items.ama-auto-slider { display: block; flex: 1; min-width: 0; }
.top-stories__items .ama-auto-slider__track { min-height: 74px; }
.top-stories__items .ama-auto-slider__slide .card { width: 100%; }
.ama-auto-slider--amakuru .ama-auto-slider__track { min-height: 100px; }
@keyframes amaSliderIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .ama-auto-slider__slide { animation: none; }
}

/* Small, clean Category News grid */
.category-news-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
@media(min-width:640px){ .category-news-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(min-width:1050px){ .category-news-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
.category-news-grid .card__media { aspect-ratio:16/9; border-radius:6px; }
.category-news-grid .card__title { font-size:.88rem; line-height:1.35; -webkit-line-clamp:2; }
.category-news-grid .card__body { padding:.45rem 0 0; }


/* AMA LIVE V4 requested homepage refinements */
.ama-home-top-ad{margin:0 0 1rem;display:flex;justify-content:center;align-items:center}
.ama-headbar{box-shadow:none!important;transition:transform .28s ease,background .2s ease}.ama-headbar.ama-headbar--hidden{transform:translateY(-110%)}
.ama-top-stories-v4 .top-stories{gap:.65rem}.ama-top-stories-v4 .top-stories__badge{font-size:.68rem;padding:.4rem .5rem}.ama-top-stories-v4 .card--strip .card__title{font-size:.86rem;line-height:1.25}.ama-top-stories-v4 .card--strip .card__media{width:82px;height:56px}
.grid-latest--dense{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.grid-latest--dense .card__media,.editors-picks-grid .card__media{aspect-ratio:16/9}.grid-latest--dense .card__title,.editors-picks-grid .card__title{font-size:.84rem;line-height:1.3;-webkit-line-clamp:2}
.category-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.category-news-grid .card__media{aspect-ratio:16/9}.category-news-grid .card__title{font-size:.82rem;line-height:1.3;-webkit-line-clamp:2}
.editors-picks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.sports-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.sports-mini-grid .card__title{font-size:.76rem;line-height:1.28;-webkit-line-clamp:2}.sports-mini-grid .card__media{aspect-ratio:16/9}.entertainment-mini-list{display:flex;flex-direction:column;gap:.1rem}.entertainment-mini-list .card--list{padding:.4rem 0}.entertainment-mini-list .card--list .card__media{width:70px;height:50px}.entertainment-mini-list .card__title{font-size:.76rem;line-height:1.28;-webkit-line-clamp:2}
.you-must-read__grid--v4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.you-must-read__grid--v4 .card__media{aspect-ratio:16/9}.you-must-read__grid--v4 .card__title{font-size:.76rem;line-height:1.28;-webkit-line-clamp:2}
.ama-auto-slider__controls{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.5rem}.ama-auto-slider__controls .ama-auto-slider__dots{margin:0}.ama-auto-slider__nav{width:29px;height:29px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:50%;display:grid;place-items:center;font-size:1rem;line-height:1;cursor:pointer;padding:0}.ama-auto-slider__nav:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* Comments: clean, stable responsive form */
.article-comments{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--color-border)}
.article-comments__title{font-size:1rem;font-weight:800;margin:0 0 .8rem}
.comment-form-placeholder{margin-top:1rem;padding:0;background:transparent;border:0;border-radius:0;display:grid;gap:.65rem}
.comment-form-placeholder__notice{padding:.7rem .8rem;border:1px solid var(--color-border);border-left:3px solid var(--color-primary);background:var(--color-surface);border-radius:8px}
.comment-form-placeholder__field,.comment-form-placeholder__textarea{width:100%;box-sizing:border-box;padding:.72rem .85rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text);outline:none}
.comment-form-placeholder__field:focus,.comment-form-placeholder__textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 12%,transparent)}
.comment-form-placeholder__btn{align-self:flex-start;padding:.62rem 1rem;border:0;border-radius:8px;background:var(--color-primary);color:#fff;font-weight:800;cursor:pointer}
/* Subtle page motion */
.ama-ui-animate{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.ama-ui-animate.ama-in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ama-ui-animate{opacity:1;transform:none;transition:none}.ama-headbar{transition:none}}
/* No bottom shadow/line on public head */
.ama-headbar{box-shadow:none!important;border-bottom:0!important}

@media(min-width:900px){.grid-latest--dense,.editors-picks-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.you-must-read__grid--v4{grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem}}
@media(max-width:639px){.grid-latest--dense,.editors-picks-grid,.category-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.you-must-read__grid--v4{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* AMA LIVE V5 — compact Top Stories strip, 8 Sports, tiny Category News */
.ama-home-top-ad{display:none!important;margin:0!important;padding:0!important;height:0!important;overflow:hidden!important}
.ama-top-stories-v5{margin:0 0 1rem;padding:0;border:0;background:transparent;overflow:hidden}
.ama-top-stories-v5__strip{display:flex;align-items:stretch;min-height:58px;background:var(--color-background);border:0;box-shadow:none;position:relative}
.ama-top-stories-v5__badge{flex:0 0 150px;display:flex;align-items:center;justify-content:center;padding:.45rem .7rem;background:var(--color-primary);color:#fff;font-size:.92rem;font-weight:900;line-height:1.05;text-transform:none;white-space:nowrap}
.ama-top-stories-v5__viewport{flex:1;min-width:0;overflow:hidden}
.ama-top-stories-v5__track{display:flex;height:100%;transition:transform .5s ease;will-change:transform}
.ama-top-stories-v5__item{flex:0 0 25%;min-width:0;display:flex;align-items:center;text-decoration:none;color:inherit;padding:.22rem .55rem;border:0;background:transparent}
.ama-top-stories-v5__item:hover{background:color-mix(in srgb,var(--color-primary) 5%,transparent)}
.ama-top-stories-v5__thumb{display:block;width:100%;min-width:0}
.ama-top-stories-v5__thumb .card--strip{display:flex;align-items:center;gap:.5rem;padding:0;border:0!important;background:transparent!important;box-shadow:none!important}
.ama-top-stories-v5__thumb .card--strip .card__media{width:58px;height:50px;min-width:58px;border-radius:2px;object-fit:cover}
.ama-top-stories-v5__thumb .card--strip .card__body{min-width:0;padding:0}
.ama-top-stories-v5__thumb .card--strip .card__title{font-size:.72rem;line-height:1.22;font-weight:800;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ama-top-stories-v5__controls{display:flex;align-items:center;gap:.25rem;padding:0 .35rem}
.ama-top-stories-v5__controls button{width:25px;height:25px;padding:0;border:0;background:transparent;color:var(--color-text);font-size:1.15rem;line-height:1;cursor:pointer;border-radius:50%}
.ama-top-stories-v5__controls button:hover{background:var(--color-primary);color:#fff}
.sports-mini-grid--8{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;max-height:none;overflow:visible}
.sports-mini-grid--8 .card{min-width:0;padding:0;border:0!important;background:transparent!important;box-shadow:none!important}
.sports-mini-grid--8 .card__media{aspect-ratio:16/9;border-radius:2px}
.sports-mini-grid--8 .card__title{font-size:.68rem;line-height:1.2;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;margin-top:.25rem}
.category-news-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem}
.category-news-grid .card{border:0!important;background:transparent!important;box-shadow:none!important;padding:0}
.category-news-grid .card__media{aspect-ratio:16/9;border-radius:2px}
.category-news-grid .card__title{font-size:.7rem;line-height:1.2;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;margin-top:.25rem}
.grid-latest--dense .card,.editors-picks-grid .card,.you-must-read__grid--v4 .card{border:0!important;background:transparent!important;box-shadow:none!important}
@media(max-width:1100px){.ama-top-stories-v5__item{flex-basis:33.333%}.ama-top-stories-v5__badge{flex-basis:125px}.category-news-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.ama-top-stories-v5__strip{min-height:55px}.ama-top-stories-v5__badge{flex:0 0 100px;font-size:.78rem}.ama-top-stories-v5__item{flex-basis:50%;padding:.2rem .4rem}.ama-top-stories-v5__thumb .card--strip .card__media{width:48px;height:43px;min-width:48px}.ama-top-stories-v5__thumb .card--strip .card__title{font-size:.64rem;-webkit-line-clamp:2}.ama-top-stories-v5__controls{padding:0 .15rem}.ama-top-stories-v5__controls button{width:22px;height:22px}.sports-mini-grid--8{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}.category-news-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}}
@media(max-width:520px){.ama-top-stories-v5__badge{flex:0 0 82px;font-size:.7rem}.ama-top-stories-v5__item{flex-basis:100%}.ama-top-stories-v5__controls{display:none}.category-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sports-mini-grid--8 .card__title{font-size:.64rem}}


/* AMA LIVE targeted polish — no card/ad containers + YouTube video rail */
.card,.card--list,.widget-post-list .card,.grid-latest--dense .card,.editors-picks-grid .card,.you-must-read__grid--v4 .card,.category-news-grid .card,.sports-mini-grid--8 .card{border:0!important;box-shadow:none!important;background:transparent!important}
.ad-banner,.sidebar-ad,.article-ad,.widget--ad,.top-banner-slot,.top-banner-slot--live{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important}
.ad-banner{padding:.25rem 0!important}.sidebar-ad{padding:.5rem 0!important}.article-ad{padding:.25rem 0!important;margin:1rem 0!important}
.ama-youtube-section{margin-top:1.25rem}.ama-youtube-player{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1rem;align-items:start}.ama-youtube-player__frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:8px}.ama-youtube-player__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.ama-youtube-player__title{font-size:1rem;line-height:1.35;margin:.65rem 0 0;font-weight:850}.ama-youtube-player__rail{display:grid;gap:.65rem;max-height:calc((56px + .65rem)*5);overflow:auto}.ama-youtube-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:.6rem;align-items:center;border:0!important;background:transparent!important;padding:0;text-align:left;color:inherit;cursor:pointer}.ama-youtube-item img{width:96px;height:56px;object-fit:cover;border-radius:5px;display:block}.ama-youtube-item span{font-size:.78rem;line-height:1.25;font-weight:800;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ama-youtube-item.is-active span{color:var(--color-primary)}
@media(max-width:800px){.ama-youtube-player{grid-template-columns:1fr}.ama-youtube-player__rail{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}.ama-youtube-item{grid-template-columns:88px minmax(0,1fr)}.ama-youtube-item img{width:88px;height:52px}}
@media(max-width:520px){.ama-youtube-player__rail{grid-template-columns:1fr 1fr}.ama-youtube-item{grid-template-columns:72px minmax(0,1fr)}.ama-youtube-item img{width:72px;height:44px}.ama-youtube-item span{font-size:.7rem}}


/* ============================================================
   AMA LIVE V6 — Dark Newsroom layer
   Appended last on purpose: it overrides earlier rules.
   1) Dark tokens  2) Header  3) Sections  4) Cards  5) Hero
   6) Article  7) Sidebar/Footer  8) Motion  9) Reduced motion
   ============================================================ */

/* ---------- 1. DARK TOKENS (html:root beats injected :root) ---------- */
html:root {
    color-scheme: dark;
    --color-background: #0d1015;
    --color-surface: #151922;
    --color-border: #262c38;
    --color-text: #eceff4;
    --color-text-muted: #95a0b4;
    --color-primary: #e5303a;
    --color-primary-dark: #b9232c;
    --color-link: #f2f4f8;
    --color-link-hover: #ff5a63;
    --color-header-bg: #0d1015;
    --color-header-text: #ffffff;
    --color-footer-bg: #080a0e;
    --color-footer-text: #c3cad8;
    --ama-bg: #0d1015;
    --ama-bg-soft: #151922;
    --ama-border: #262c38;
    --ama-muted: #95a0b4;
    --ama-brand: #e5303a;
    --v6-glow: 0 0 0 1px rgba(229,48,58,.35), 0 12px 36px rgba(229,48,58,.18);
    --v6-ease: cubic-bezier(.2,.7,.2,1);
}
html { background: #0d1015; scroll-behavior: smooth; }
body {
    background:
        radial-gradient(900px 420px at 85% -80px, rgba(229,48,58,.10), transparent 70%),
        radial-gradient(700px 380px at 5% 0, rgba(70,110,255,.06), transparent 70%),
        var(--color-background);
    background-repeat: no-repeat;
}
::selection { background: var(--color-primary); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #2c3342 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2c3342; border-radius: 8px; border: 2px solid var(--color-background); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }
img { background: var(--color-surface); }

/* ---------- 2. HEADER ---------- */
.site-header__top { background: linear-gradient(180deg, #11151c, #0d1015); border-bottom: 1px solid var(--color-border); }
.site-header__nav,
.ama-headbar { background: rgba(13,16,21,.82) !important; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
.site-header__nav { border-bottom: 1px solid var(--color-border); position: relative; }
.site-header__nav::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--color-primary), #ff7a5c 40%, transparent 85%);
    opacity: .9;
}
.site-header.is-scrolled .site-header__nav { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.site-brand__mark {
    background: linear-gradient(135deg, #ff4b55, var(--color-primary-dark)) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(229,48,58,.35);
    transition: transform .35s var(--v6-ease);
}
.site-brand:hover .site-brand__mark { transform: rotate(-6deg) scale(1.06); }

.header-nav a { position: relative; font-weight: 650; letter-spacing: .01em; background: transparent; transition: color .2s ease; }
.header-nav > ul > li > a::before {
    content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 2px;
    background: var(--color-primary); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--v6-ease);
}
.header-nav a:hover, .header-nav a.is-active { background: transparent; color: #fff; }
.header-nav > ul > li > a:hover::before,
.header-nav a.is-active::before { transform: scaleX(1); }
.header-nav .submenu {
    background: rgba(21,25,34,.96); backdrop-filter: blur(12px);
    border-radius: 10px; border-color: var(--color-border);
    animation: v6Drop .22s var(--v6-ease) both;
}
.header-nav .submenu a:hover { background: rgba(229,48,58,.12); color: #ff6b73; }
.header-btn { border-radius: 10px; transition: background .2s ease, transform .2s ease; }
.header-btn:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.header-watch {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border: 0; border-radius: 999px; padding: .5rem 1.05rem;
    box-shadow: 0 6px 20px rgba(229,48,58,.3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.header-watch:hover { background: linear-gradient(135deg, #ff4b55, var(--color-primary)); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(229,48,58,.45); }
.header-nav.is-open-mobile { background: rgba(13,16,21,.98); backdrop-filter: blur(14px); animation: v6Drop .25s var(--v6-ease) both; }
.search-panel input { background: var(--color-surface); border-radius: 10px; }
.search-panel input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(229,48,58,.2); outline: none; }
.search-panel button { background: var(--color-primary); color: #fff; border-radius: 10px; }

/* Breaking bar */
.breaking-bar { background: linear-gradient(90deg, rgba(229,48,58,.14), rgba(229,48,58,0) 55%), var(--color-background); }
.breaking-bar__label { border-radius: 999px; box-shadow: 0 0 0 0 rgba(229,48,58,.6); animation: v6Ring 2s ease-out infinite; }
.breaking-bar__track {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
}
.breaking-bar__item { transition: color .2s ease; }

/* ---------- 3. SECTION HEADS ---------- */
.section { margin-bottom: 2.5rem; }
.section-head { border-bottom: 1px solid var(--color-border); padding-bottom: .65rem; }
.section-head::after { height: 3px; bottom: -1px; width: 84px; border-radius: 3px; background: linear-gradient(90deg, var(--color-primary), #ff7a5c); transition: width .5s var(--v6-ease); }
.section:hover > .section-head::after { width: 160px; }
.section-title { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; letter-spacing: .02em; }
.section-title::before { content: ''; width: 6px; height: 1.15em; border-radius: 2px; background: var(--color-primary); box-shadow: 0 0 14px rgba(229,48,58,.7); }
.section-link { padding: .3rem .7rem; border: 1px solid var(--color-border); border-radius: 999px; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.section-link:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateX(2px); }

/* Top stories strip */
.ama-top-stories-v5__strip { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.ama-top-stories-v5__badge { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); }
.ama-top-stories-v5__item { transition: background .2s ease; border-left: 1px solid rgba(255,255,255,.04); }
.ama-top-stories-v5__item:hover { background: rgba(229,48,58,.08); }
.ama-top-stories-v5__controls button { transition: background .2s ease, transform .2s ease; }
.ama-top-stories-v5__controls button:hover { transform: scale(1.1); }

/* ---------- 4. CARDS ---------- */
.card__media { border-radius: 10px; isolation: isolate; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.card__media::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%);
    opacity: .55; transition: opacity .35s ease;
}
.card:hover .card__media::after { opacity: .9; }
.card__media img { transition: transform .7s var(--v6-ease), filter .4s ease, opacity .5s ease; }
.card:hover .card__media img { transform: scale(1.07); filter: saturate(1.1) contrast(1.03); }
img.v6-img { opacity: 0; }
img.v6-img.is-loaded { opacity: 1; }

.card { position: relative; transition: transform .35s var(--v6-ease); }
.card:not(.card--list):not(.card--strip):hover { transform: translateY(-4px); }
.card:hover .card__media { box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(229,48,58,.35); }

.card__cat { border-radius: 999px; padding: .22rem .6rem; background: rgba(229,48,58,.92); backdrop-filter: blur(4px); letter-spacing: .05em; }
.card__media .card__cat { position: absolute; left: .6rem; top: .6rem; z-index: 2; }
.card__title { color: var(--color-text); }
.card__title a {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    transition: background-size .4s var(--v6-ease), color .2s ease;
}
.card:hover .card__title a { background-size: 100% 1px; color: #fff; }
.card__meta { color: var(--color-text-muted); }
.card__cta { border-radius: 999px; padding: .4rem .85rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.card__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(229,48,58,.4); }

/* List cards get a soft hover plate (no permanent box) */
.card--list { border-bottom-color: var(--color-border); padding: .6rem; margin: 0 -.6rem; border-radius: 12px; transition: background .25s ease, transform .3s var(--v6-ease); }
.card--list:hover { background: rgba(255,255,255,.035) !important; transform: translateX(4px); }
.card--list:last-child { padding-bottom: .6rem; }
.card--list .card__media { border-radius: 8px; }

/* Cursor spotlight (set by theme.js) */
.card::before {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.07), transparent 60%);
    opacity: 0; transition: opacity .3s ease;
}
.card:hover::before { opacity: 1; }

/* ---------- 5. HERO / COVER ---------- */
.card--hero { border-radius: 16px; overflow: hidden; }
.card--hero .card__media { border-radius: 16px; aspect-ratio: 16 / 10; }
.card--hero .card__media img { animation: v6KenBurns 18s ease-in-out infinite alternate; }
.card--hero .card__body {
    z-index: 2; padding: 2.5rem 1.4rem 1.4rem;
    background: linear-gradient(to top, rgba(8,10,14,.96) 0%, rgba(8,10,14,.72) 45%, rgba(8,10,14,0) 100%);
}
.card--hero .card__title { font-size: clamp(1.3rem, 3vw, 2.15rem); line-height: 1.18; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.card--hero .card__title a:hover { text-decoration: none; }
.card--hero:hover { transform: none; box-shadow: var(--v6-glow); }
.card--hero-small .card__body { background: linear-gradient(to top, rgba(8,10,14,.92), transparent); }
.card--cover .card__title { letter-spacing: -.015em; }

/* ---------- 6. ARTICLE PAGE ---------- */
.reading-progress { height: 3px !important; background: rgba(255,255,255,.06) !important; }
.reading-progress__bar { background: linear-gradient(90deg, var(--color-primary), #ff8a5c) !important; box-shadow: 0 0 12px rgba(229,48,58,.8); border-radius: 0 3px 3px 0; }
.article-title { font-size: clamp(1.8rem, 4.6vw, 2.9rem); letter-spacing: -.025em; line-height: 1.12; }
.article-hero { border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.article-content { font-size: 1.1rem; line-height: 1.85; color: #d9deea; }
.article-content > p:first-of-type::first-letter { float: left; font-size: 3.4rem; line-height: .9; font-weight: 900; padding: .25rem .5rem 0 0; color: var(--color-primary); }
.article-content a { color: #ff6b73; text-decoration-color: rgba(255,107,115,.4); text-underline-offset: 3px; transition: text-decoration-color .2s ease, color .2s ease; }
.article-content a:hover { color: #fff; text-decoration-color: var(--color-primary); }
.article-content blockquote {
    border-left: 0; position: relative; padding: 1.1rem 1.25rem 1.1rem 1.5rem;
    background: linear-gradient(90deg, rgba(229,48,58,.12), rgba(229,48,58,0)); border-radius: 0 12px 12px 0;
    color: #e6e9f1; font-size: 1.15rem;
}
.article-content blockquote::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--color-primary); }
.article-content img { border-radius: 12px; }
.article-content table { width: 100%; border-collapse: collapse; }
.article-content th, .article-content td { border: 1px solid var(--color-border); padding: .6rem .8rem; }
.article-content th { background: var(--color-surface); }
.article-content pre, .article-content code { background: #0a0c10; border: 1px solid var(--color-border); border-radius: 8px; color: #ffb4b8; }
.article-content code { padding: .1rem .35rem; }
.article-content pre { padding: 1rem; overflow-x: auto; }
.share-btn, .article-share a, .article-share button { border-radius: 999px; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.share-btn:hover, .article-share a:hover, .article-share button:hover { transform: translateY(-2px); }
.article-share button.is-copied { background: #1f9d55; border-color: #1f9d55; color: #fff; }

/* Forms */
input, textarea, select { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; }
input::placeholder, textarea::placeholder { color: #6b768b; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(229,48,58,.18); }

/* ---------- 7. SIDEBAR, PAGINATION, FOOTER ---------- */
.widget { background: linear-gradient(180deg, #151922, #11151c); border: 1px solid var(--color-border); border-radius: 14px; transition: border-color .3s ease, box-shadow .3s ease; }
.widget:hover { border-color: rgba(229,48,58,.35); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.widget-cat-list a { border-radius: 10px; transition: background .2s ease, transform .2s ease, color .2s ease; }
.widget-cat-list a:hover { background: rgba(229,48,58,.1); transform: translateX(4px); }
.pagination a, .pagination span { border-radius: 10px; transition: transform .2s ease, border-color .2s ease, color .2s ease; }
.pagination a:hover { transform: translateY(-2px); }
.pagination .current { box-shadow: 0 6px 18px rgba(229,48,58,.4); }
.archive-head { background: linear-gradient(90deg, rgba(229,48,58,.08), transparent 60%); border-radius: 14px; padding: 1.5rem 1.25rem; border-bottom: 0; border-left: 4px solid var(--color-primary); }

.site-footer { background: linear-gradient(180deg, #0b0e13, #070a0d); position: relative; border-top: 1px solid var(--color-border); }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); }
.footer-social a { border-radius: 50%; transition: background .2s ease, transform .25s var(--v6-ease); }
.footer-social a:hover { transform: translateY(-3px) rotate(-6deg); }
.footer-pill { border-radius: 999px; transition: background .2s ease, transform .2s ease; }
.footer-pill:hover { transform: translateY(-2px); }
.footer-news-item img { border-radius: 8px; }
.footer-search input, .footer-search button { border-radius: 10px; }

.back-top { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); box-shadow: 0 10px 26px rgba(229,48,58,.45); transform: translateY(12px); transition: opacity .3s ease, visibility .3s ease, transform .3s var(--v6-ease); }
.back-top.is-visible { transform: translateY(0); }
.back-top:hover { transform: translateY(-4px); }

/* YouTube rail */
.ama-youtube-player__frame { border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px var(--color-border); }
.ama-youtube-item { border-radius: 10px; padding: .3rem; transition: background .2s ease, transform .25s var(--v6-ease); }
.ama-youtube-item:hover { background: rgba(255,255,255,.05) !important; transform: translateX(3px); }
.ama-youtube-item img { border-radius: 8px; }
.ama-youtube-item.is-active { background: rgba(229,48,58,.1) !important; box-shadow: inset 3px 0 0 var(--color-primary); }

/* ---------- 8. MOTION ---------- */
@keyframes v6Drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes v6Ring { 0% { box-shadow: 0 0 0 0 rgba(229,48,58,.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(229,48,58,0); } }
@keyframes v6KenBurns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
@keyframes v6Shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Scroll reveal (added by theme.js) */
.v6-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--v6-ease), transform .6s var(--v6-ease); transition-delay: var(--v6-delay, 0ms); }
.v6-reveal.is-in { opacity: 1; transform: none; }

/* Skeleton shimmer while images load */
.card__media:has(img.v6-img:not(.is-loaded)) {
    background: linear-gradient(100deg, #151922 30%, #1e2430 50%, #151922 70%) 0 0 / 200% 100%;
    animation: v6Shimmer 1.4s linear infinite;
}

/* ---------- 9. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .v6-reveal, img.v6-img { opacity: 1; transform: none; }
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 640px) {
    .card--hero .card__body { padding: 1.75rem 1rem 1rem; }
    .card--list { margin: 0 -.4rem; padding: .5rem .4rem; }
    .article-content { font-size: 1.04rem; }
    .article-content > p:first-of-type::first-letter { font-size: 2.8rem; }
    .widget:hover { box-shadow: none; }
}


/* ============================================================
   AMA LIVE V7 — Theme toggle (dark/light) + News card redesign
   Dark stays default. Light is activated by html[data-theme="light"].
   ============================================================ */

/* ---------- Toggle button (lives in .ama-headbar__inner) ---------- */
.ama-theme-toggle {
    position: relative; flex-shrink: 0; margin-left: auto;
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; padding: 0;
    color: var(--color-header-text);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--color-border);
    transition: transform .3s var(--v6-ease), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ama-theme-toggle:hover { transform: rotate(18deg) scale(1.06); border-color: var(--color-primary); box-shadow: 0 6px 18px rgba(229,48,58,.3); }
.ama-theme-toggle:active { transform: scale(.94); }
.ama-theme-toggle svg { grid-area: 1 / 1; transition: transform .45s var(--v6-ease), opacity .3s ease; }
/* dark mode -> show sun (click = go light); light mode -> show moon */
.ama-theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
html[data-theme="light"] .ama-theme-toggle__sun  { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-theme="light"] .ama-theme-toggle__moon { opacity: 1; transform: none; }
.ama-theme-toggle + .ama-headbar__toggle { margin-left: 0; }
@media (min-width: 950px) {
    .ama-headbar__nav { order: 2; margin-left: auto; }
    .ama-theme-toggle { order: 3; margin-left: .35rem; }
}

/* Smooth cross-fade while switching */
html.v7-theming, html.v7-theming *, html.v7-theming *::before, html.v7-theming *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease !important;
}

/* ---------- Real header (ama-headbar) polish ---------- */
.ama-headbar { background: rgba(13,16,21,.84) !important; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--color-border) !important; position: relative; }
.ama-headbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--color-primary), #ff7a5c 40%, transparent 85%); pointer-events: none; }
.ama-headbar__mark { background: linear-gradient(135deg, #ff4b55, var(--color-primary-dark)); box-shadow: 0 6px 18px rgba(229,48,58,.35); }
@media (min-width: 950px) {
    .ama-headbar__nav > a, .ama-headbar__nav-item > a { position: relative; font-weight: 650; }
    .ama-headbar__nav > a::after, .ama-headbar__nav-item > a::after {
        content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .15rem; height: 2px; border-radius: 2px;
        background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--v6-ease);
    }
    .ama-headbar__nav a:hover::after, .ama-headbar__nav a.is-active::after { transform: scaleX(1); }
    .ama-headbar__nav a:hover, .ama-headbar__nav a.is-active { background: transparent !important; }
    .ama-headbar__submenu { border-radius: 12px; background: var(--color-surface); animation: v6Drop .22s var(--v6-ease) both; }
}

/* ---------- LIGHT THEME ---------- */
html:root[data-theme="light"] {
    color-scheme: light;
    --color-background: #f3f5f9;
    --color-surface: #ffffff;
    --color-border: #dfe4ed;
    --color-text: #12151c;
    --color-text-muted: #596378;
    --color-primary: #d92027;
    --color-primary-dark: #b3171d;
    --color-link: #12151c;
    --color-link-hover: #d92027;
    --color-header-bg: #ffffff;
    --color-header-text: #12151c;
    --ama-bg: #ffffff; --ama-bg-soft: #f3f5f9; --ama-border: #dfe4ed; --ama-muted: #596378;
    --v6-glow: 0 0 0 1px rgba(217,32,39,.3), 0 12px 30px rgba(217,32,39,.14);
}
html[data-theme="light"] { background: #f3f5f9; }
html[data-theme="light"] body {
    background:
        radial-gradient(900px 420px at 85% -80px, rgba(217,32,39,.07), transparent 70%),
        radial-gradient(700px 380px at 5% 0, rgba(70,110,255,.05), transparent 70%),
        var(--color-background);
    background-repeat: no-repeat;
}
html[data-theme="light"] * { scrollbar-color: #c3cad8 transparent; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c3cad8; border-color: var(--color-background); }
html[data-theme="light"] .ama-headbar,
html[data-theme="light"] .site-header__nav { background: rgba(255,255,255,.88) !important; }
html[data-theme="light"] .ama-headbar__brand,
html[data-theme="light"] .ama-headbar__brand:hover,
html[data-theme="light"] .ama-headbar__nav > a,
html[data-theme="light"] .ama-headbar__nav-item > a,
html[data-theme="light"] .ama-theme-toggle { color: #12151c; }
html[data-theme="light"] .ama-headbar__nav a:hover,
html[data-theme="light"] .ama-headbar__nav a.is-active { color: var(--color-primary); }
html[data-theme="light"] .ama-theme-toggle { background: #fff; }
html[data-theme="light"] .ama-headbar__nav { box-shadow: 0 18px 50px rgba(20,30,60,.15); }
html[data-theme="light"] .site-header__top { background: #fff; }
html[data-theme="light"] .breaking-bar { background: linear-gradient(90deg, rgba(217,32,39,.08), transparent 55%), #fff; }
html[data-theme="light"] .widget { background: #fff; box-shadow: 0 1px 2px rgba(20,30,60,.05); }
html[data-theme="light"] .widget:hover { box-shadow: 0 16px 36px rgba(20,30,60,.12); }
html[data-theme="light"] .ama-top-stories-v5__strip { background: #fff; }
html[data-theme="light"] .header-nav .submenu { background: #fff; }
html[data-theme="light"] .article-content { color: #262c3a; }
html[data-theme="light"] .article-content blockquote { color: #1b2030; }
html[data-theme="light"] .article-content a { color: var(--color-primary); }
html[data-theme="light"] .article-content a:hover { color: #000; }
html[data-theme="light"] .article-content pre,
html[data-theme="light"] .article-content code { background: #eef1f6; color: #b3171d; }
html[data-theme="light"] .article-hero { box-shadow: 0 18px 44px rgba(20,30,60,.18); }
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #8a94a8; }
html[data-theme="light"] .card:hover .card__title a { color: var(--color-primary); }
html[data-theme="light"] .card::before { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(217,32,39,.07), transparent 60%); }
html[data-theme="light"] .card:hover .card__media { box-shadow: 0 14px 30px rgba(20,30,60,.2), 0 0 0 1px rgba(217,32,39,.3); }
html[data-theme="light"] .card--list:hover { background: rgba(20,30,60,.04) !important; }
html[data-theme="light"] .card__media:has(img.v6-img:not(.is-loaded)) { background: linear-gradient(100deg, #e8ecf3 30%, #f6f8fb 50%, #e8ecf3 70%) 0 0 / 200% 100%; }
/* Footer stays dark in both themes for contrast */

/* ---------- NEWS CARD REDESIGN ---------- */
/* Plate cards for grid-style cards (list / strip / hero keep their own layouts) */
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small) {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.18) !important;
    overflow: hidden;
    transition: transform .35s var(--v6-ease), box-shadow .35s ease, border-color .3s ease;
}
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small):hover {
    transform: translateY(-5px);
    border-color: rgba(229,48,58,.45) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
}
html[data-theme="light"] .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small):hover { box-shadow: 0 18px 38px rgba(20,30,60,.16) !important; }
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small) .card__media { border-radius: 0; box-shadow: none; }
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small) .card__body { padding: .8rem .9rem .95rem; gap: .4rem; }
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small) .card__title { font-weight: 750; line-height: 1.32; }

/* Red growth line along the card's bottom edge */
.card:not(.card--list):not(.card--strip)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; pointer-events: none;
    background: linear-gradient(90deg, var(--color-primary), #ff8a5c);
    transform: scaleX(0); transform-origin: left; transition: transform .45s var(--v6-ease);
}
.card:not(.card--list):not(.card--strip):hover::after { transform: scaleX(1); }
.card--hero::after { display: none; }

/* Category chip: crisp pill with a small dot */
.card__cat { display: inline-flex; align-items: center; gap: .35rem; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.card__cat::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .9; }

/* Meta row: divider + subtle text */
.card__body .card__meta { border-top: 1px dashed var(--color-border); margin-top: auto; padding-top: .55rem; font-size: .72rem; letter-spacing: .01em; }
.card--list .card__meta, .card--strip .card__meta { border-top: 0; padding-top: .2rem; }

/* Image gets a subtle play/overlay depth + zoom, kept from V6 */
.card--cover .card__media { aspect-ratio: 16 / 10; }
.card--cover .card__title { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.card--cover .card__excerpt { display: -webkit-box; }

/* Latest-news list items: rounded thumbnail + clear separation */
.card--list { align-items: center; }
.card--list .card__media { width: 96px; height: 72px; border-radius: 10px; }
.card--list .card__title { font-weight: 700; line-height: 1.3; }

/* Responsive card grids that work for any grid-latest / editors / category sections */
@media (max-width: 520px) {
    html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small) .card__body { padding: .6rem .65rem .75rem; }
    html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small):hover { transform: none; }
}


/* ============================================================
   AMA LIVE V8 — Comments (cx-*) — works in dark and light
   ============================================================ */
.cx { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.cx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-hp, .cx .comment-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.cx-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.cx-top__title { display: flex; align-items: center; gap: .65rem; }
.cx-top__title h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; display: flex; align-items: center; gap: .6rem; }
.cx-top__title h2::before { content: ''; width: 5px; height: 1.1em; border-radius: 3px; background: var(--color-primary); box-shadow: 0 0 12px rgba(229,48,58,.6); }
.cx-count { min-width: 30px; height: 26px; padding: 0 .55rem; display: inline-grid; place-items: center; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff4b55, var(--color-primary-dark)); box-shadow: 0 4px 12px rgba(229,48,58,.3); }
.cx-sort { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; font-size: .78rem; font-weight: 700; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.cx-sort:hover { color: var(--color-text); border-color: var(--color-primary); transform: translateY(-1px); }

/* Composer */
.cx-form { margin-bottom: 1.75rem; }
.cx-composer { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; transition: border-color .25s ease, box-shadow .25s ease; }
.cx-composer:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(229,48,58,.15), 0 14px 34px rgba(0,0,0,.2); }
.cx-composer__main { flex: 1; min-width: 0; }
.cx-composer textarea { width: 100%; min-height: 84px; max-height: 360px; resize: none; padding: .75rem .9rem; font: inherit; line-height: 1.55; color: var(--color-text); background: var(--color-background); border: 1px solid var(--color-border); border-radius: 12px; outline: none; transition: border-color .2s ease, background .2s ease; }
.cx-composer textarea:focus { border-color: var(--color-primary); box-shadow: none; }
.cx-identity { display: grid; grid-template-columns: 1fr; gap: .65rem; margin-top: .75rem; }
@media (min-width: 640px) { .cx-identity { grid-template-columns: 1fr 1fr; } }
.cx-field { display: flex; flex-direction: column; gap: .3rem; font-size: .76rem; font-weight: 700; color: var(--color-text-muted); }
.cx-field em { font-style: normal; font-weight: 500; opacity: .75; }
.cx-field input { width: 100%; padding: .6rem .8rem; font: inherit; font-weight: 500; color: var(--color-text); background: var(--color-background); border: 1px solid var(--color-border); border-radius: 10px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.cx-field input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(229,48,58,.15); }
.cx-as { margin: .65rem 0 0; font-size: .82rem; color: var(--color-text-muted); }
.cx-as strong { color: var(--color-text); }
.cx-bar { display: flex; align-items: center; gap: .75rem; margin-top: .85rem; flex-wrap: wrap; }
.cx-note { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .76rem; color: var(--color-text-muted); flex: 1; min-width: 180px; }
.cx-counter { font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--color-text-muted); transition: color .2s ease; }
.cx-counter.is-near { color: #f59e0b; font-weight: 700; }
.cx-submit { display: inline-flex; align-items: center; gap: .5rem; padding: .62rem 1.15rem; font-weight: 800; font-size: .88rem; color: #fff; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(135deg, #ff4b55, var(--color-primary-dark)); box-shadow: 0 8px 22px rgba(229,48,58,.35); transition: transform .2s ease, box-shadow .25s ease, opacity .2s ease; }
.cx-submit svg { transition: transform .3s ease; }
.cx-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(229,48,58,.5); }
.cx-submit:hover svg { transform: translate(3px, -3px); }
.cx-submit:disabled { opacity: .7; cursor: progress; transform: none; }
.cx-submit.is-sending svg { animation: cxFly .9s ease-in-out infinite; }
@keyframes cxFly { 0%,100% { transform: translate(0,0); } 50% { transform: translate(4px,-4px); } }

/* Avatars: color from name via --h */
.cx-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1rem; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 0) 70% 52%), hsl(calc(var(--h, 0) + 40) 70% 38%)); box-shadow: 0 6px 16px hsl(var(--h, 0) 70% 40% / .35); user-select: none; }
.cx-avatar--me { width: 40px; height: 40px; }

/* Thread + comments */
.cx-list { display: flex; flex-direction: column; gap: 1.25rem; }
.cx-list[data-order="oldest"] { flex-direction: column-reverse; }
.cx-thread { display: flex; flex-direction: column; gap: .75rem; }
.cx-item { display: flex; gap: .8rem; align-items: flex-start; }
.cx-bubble { position: relative; flex: 1; min-width: 0; padding: .8rem 1rem .9rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px 16px 16px 16px; transition: border-color .25s ease, transform .3s var(--v6-ease, ease), box-shadow .3s ease; }
.cx-item:hover > .cx-bubble { border-color: rgba(229,48,58,.4); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.cx-bubble__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; margin-bottom: .3rem; }
.cx-bubble__name { font-size: .92rem; color: var(--color-text); }
.cx-bubble__to { font-size: .74rem; color: var(--color-text-muted); }
.cx-bubble__to b { color: var(--color-primary); font-weight: 700; }
.cx-bubble__time { margin-left: auto; font-size: .74rem; color: var(--color-text-muted); }
.cx-bubble__text { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--color-text); overflow-wrap: anywhere; }
.cx-replies { margin-left: 21px; padding-left: 1.1rem; border-left: 2px solid var(--color-border); display: flex; flex-direction: column; gap: .75rem; }
.cx-item--reply .cx-avatar { width: 34px; height: 34px; font-size: .85rem; }
.cx-item--reply .cx-bubble { background: color-mix(in srgb, var(--color-surface) 70%, var(--color-background)); border-radius: 4px 14px 14px 14px; }
@media (min-width: 640px) { .cx-replies { margin-left: 33px; } }

/* Entrance */
.cx-anim { opacity: 0; transform: translateY(14px); transition: opacity .5s ease var(--cx-delay, 0ms), transform .5s ease var(--cx-delay, 0ms); }
.cx-anim.is-visible { opacity: 1; transform: none; }

/* Empty + closed */
.cx-empty, .cx-closed { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 2rem 1rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 16px; }
.cx-empty svg { color: var(--color-primary); margin-bottom: .35rem; animation: cxFloat 3.2s ease-in-out infinite; }
.cx-empty h3 { margin: 0; font-size: 1.05rem; color: var(--color-text); }
.cx-empty p, .cx-closed p { margin: 0; font-size: .9rem; }
.cx-closed { flex-direction: row; justify-content: center; gap: .65rem; padding: 1.1rem; }
@keyframes cxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

html[data-theme="light"] .cx-composer:focus-within { box-shadow: 0 0 0 3px rgba(217,32,39,.12), 0 14px 30px rgba(20,30,60,.12); }
html[data-theme="light"] .cx-item:hover > .cx-bubble { box-shadow: 0 10px 24px rgba(20,30,60,.12); }

@media (max-width: 520px) {
    .cx-composer { padding: .75rem; gap: .6rem; }
    .cx-avatar--me { display: none; }
    .cx-bar { gap: .5rem; }
    .cx-submit { width: 100%; justify-content: center; }
    .cx-avatar { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .cx-anim { opacity: 1; transform: none; transition: none; }
    .cx-empty svg, .cx-submit.is-sending svg { animation: none; }
}


/* ============================================================
   AMA LIVE V9 — CLEAN MODE
   No borders / outlines / rings on cards in any section.
   Appended last so it wins over V6–V8. Inputs & buttons keep
   their borders (needed for usability).
   ============================================================ */

/* 1) All news cards: no border, no ring, no heavy shadow */
html .card,
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small),
html .card--list, html .card--strip, html .card--cover, html .card--medium, html .card--continue,
html .grid-latest--dense .card, html .editors-picks-grid .card, html .you-must-read__grid--v4 .card,
html .category-news-grid .card, html .sports-mini-grid .card, html .sports-mini-grid--8 .card {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
/* Grid cards keep a soft filled plate (no border) so they still read as cards */
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small) {
    background: color-mix(in srgb, var(--color-surface) 70%, transparent) !important;
}
/* Hover: gentle lift only — no red border or glow ring */
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small):hover {
    border: 0 !important;
    box-shadow: none !important;
    transform: translateY(-3px);
    background: var(--color-surface) !important;
}
html .card:hover .card__media,
html[data-theme="light"] .card:hover .card__media { box-shadow: none !important; }
html .card__media { box-shadow: none !important; }
.card:not(.card--list):not(.card--strip)::after { display: none; }   /* removes the red bottom line */

/* 2) List cards: no divider lines between items */
html .card--list, html .card--list:last-child { border: 0 !important; }
html .card--list:hover { box-shadow: none !important; }

/* 3) Hero cards: no glow ring */
html .card--hero, html .card--hero:hover { box-shadow: none !important; border: 0 !important; }

/* 4) Sidebar widgets, top-stories strip, archive header, YouTube, ads */
html .widget, html .widget:hover,
html[data-theme="light"] .widget, html[data-theme="light"] .widget:hover {
    border: 0 !important; box-shadow: none !important;
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
html .ama-top-stories-v5__strip { border: 0 !important; box-shadow: none !important; }
html .ama-top-stories-v5__item { border-left: 0 !important; }
html .archive-head { border: 0 !important; box-shadow: none !important; }
html .ama-youtube-player__frame { box-shadow: none !important; }
html .ama-youtube-item.is-active { box-shadow: none !important; }
html .top-banner-slot { border: 0 !important; }
html .article-hero, html[data-theme="light"] .article-hero { box-shadow: none !important; }
html .footer-news-item, html .footer-cols { border-color: transparent; }

/* 5) Comments: clean bubbles and composer */
html .cx-bubble, html .cx-item--reply .cx-bubble,
html .cx-composer, html .cx-composer:focus-within,
html .cx-empty, html .cx-closed, html .cx-sort {
    border: 0 !important; box-shadow: none !important;
}
html .cx-item:hover > .cx-bubble { box-shadow: none !important; }
html .cx-replies { border-left: 0; padding-left: .5rem; }
html .cx-composer { background: color-mix(in srgb, var(--color-surface) 85%, transparent); }
html .cx-bubble { background: color-mix(in srgb, var(--color-surface) 80%, transparent); }
html .cx { border-top: 0; }

/* 6) Section heads keep only the accent line, not the full-width rule */
html .section-head { border-bottom: 0; }
html .section-head::after { bottom: 0; }

/* 7) Clean spacing in place of lines */
html .card--list { padding-top: .5rem; padding-bottom: .5rem; }


/* ============================================================
   AMA LIVE V10 — One consistent corner radius on every card
   Change these 3 numbers to adjust the whole site.
   (Set all to 0px for fully square corners.)
   ============================================================ */
html:root {
    --r-card: 16px;    /* card plates, widgets, hero, comments */
    --r-media: 12px;   /* images inside cards */
    --r-thumb: 10px;   /* small thumbnails (list, strip, sidebar) */
}

/* Card plates / containers */
html .card,
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small),
html .card--hero, html .card--hero-small, html .card--cover, html .card--medium, html .card--continue,
html .grid-latest--dense .card, html .editors-picks-grid .card, html .you-must-read__grid--v4 .card,
html .category-news-grid .card, html .sports-mini-grid .card, html .sports-mini-grid--8 .card,
html .widget, html .ama-top-stories-v5__strip, html .archive-head,
html .cx-composer, html .cx-empty, html .cx-closed, html .top-banner-slot,
html .ad-banner, html .sidebar-ad, html .article-ad {
    border-radius: var(--r-card) !important;
}
html .card--hero .card__media, html .card--hero .card__body { border-radius: var(--r-card) !important; }
html .card--hero .card__body { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }

/* Images inside cards (grid cards: plate clips the image, so top corners follow the plate) */
html .card__media,
html .grid-latest--dense .card__media, html .editors-picks-grid .card__media,
html .you-must-read__grid--v4 .card__media, html .category-news-grid .card__media,
html .sports-mini-grid .card__media, html .sports-mini-grid--8 .card__media,
html .card--cover .card__media, html .card--medium .card__media, html .card--continue .card__media {
    border-radius: var(--r-media) !important;
}
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small) { overflow: hidden; }
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small) .card__media {
    border-radius: var(--r-card) var(--r-card) 0 0 !important;
}

/* Small thumbnails */
html .card--list .card__media, html .card--strip .card__media,
html .ama-top-stories-v5__thumb .card--strip .card__media,
html .ama-youtube-item img, html .footer-news-item img, html .ama-table__thumb {
    border-radius: var(--r-thumb) !important;
}
html .ama-youtube-player__frame, html .article-hero, html .article-content img { border-radius: var(--r-card) !important; }
html .card--list { border-radius: var(--r-card) !important; }

/* Pills / chips stay fully round; comments bubbles follow the same radius */
html .cx-bubble { border-radius: 6px var(--r-card) var(--r-card) var(--r-card) !important; }
html .cx-item--reply .cx-bubble { border-radius: 6px var(--r-media) var(--r-media) var(--r-media) !important; }


/* ============================================================
   AMA LIVE V11 — Pro sidebar (compact, NOT sticky)
   ============================================================ */

/* 1) Remove sticky everywhere — the sidebar scrolls with the page */
html .sidebar,
html .article-page > .sidebar,
html .ama-home-layout > .sidebar,
html .archive-layout > .sidebar {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: start;
}

/* 2) Smaller footprint: narrower rail + tighter spacing */
@media (min-width: 900px) {
    html .article-page { grid-template-columns: minmax(0, 1fr) 300px; gap: 1.75rem; }
}
html .sidebar { gap: .8rem; }
html .sidebar .widget { padding: .8rem .85rem .9rem !important; margin: 0; }
html .sidebar .widget__title { font-size: .86rem; letter-spacing: .01em; text-transform: none; margin: 0 0 .6rem; padding-bottom: .35rem; }
html .sidebar .widget-search-form input, html .sidebar .widget-newsletter-form input { padding: .5rem .7rem; font-size: .85rem; }
html .sidebar .widget-search-form button, html .sidebar .widget-newsletter-form button { padding: .5rem .85rem; font-size: .82rem; }
html .sidebar .sidebar-ad { padding: .25rem 0 !important; min-height: 0; }
html .sidebar .widget-post-list .card--list .card__media { width: 64px; height: 48px; }

/* 3) Pro widget shell */
.sbx-widget { background: color-mix(in srgb, var(--color-surface) 75%, transparent) !important; border-radius: var(--r-card, 14px) !important; }
.sbx-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
html .sidebar .sbx-title { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 0; border: 0; font-size: .9rem; font-weight: 800; letter-spacing: -.005em; }
.sbx-title::before { content: ''; width: 4px; height: 1em; border-radius: 3px; background: var(--color-primary); box-shadow: 0 0 10px rgba(229,48,58,.55); }
.sbx-more { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--color-primary); background: none; border: 0; padding: .15rem .3rem; cursor: pointer; border-radius: 6px; }
.sbx-more:hover { background: rgba(229,48,58,.1); }
.sbx-fold { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: background .2s ease, color .2s ease; }
.sbx-more + .sbx-fold { margin-left: .1rem; }
.sbx-fold:hover { background: rgba(255,255,255,.07); color: var(--color-text); }
html[data-theme="light"] .sbx-fold:hover { background: rgba(20,30,60,.07); }
.sbx-fold svg { transition: transform .3s var(--v6-ease, ease); }
.sbx-widget.is-collapsed .sbx-fold svg { transform: rotate(-90deg); }
.sbx-widget.is-collapsed .sbx-body, .sbx-widget.is-collapsed .sbx-tabs { display: none; }
.sbx-widget.is-collapsed .sbx-head { margin-bottom: 0; }
.sbx-widget[hidden] { display: none !important; }

/* Tabs (Today / 7 days / 30 days) */
.sbx-tabs { display: flex; gap: .2rem; padding: .2rem; margin-bottom: .55rem; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.sbx-tab { flex: 1; padding: .28rem .4rem; font: inherit; font-size: .72rem; font-weight: 700; color: var(--color-text-muted); background: transparent; border: 0; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.sbx-tab:hover { color: var(--color-text); }
.sbx-tab.is-active { background: var(--color-primary); color: #fff; box-shadow: 0 4px 12px rgba(229,48,58,.35); }
.sbx-panel[hidden] { display: none; }

/* Lists */
.sbx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.sbx-item__link { display: flex; align-items: center; gap: .55rem; padding: .35rem .35rem; margin: 0 -.35rem; border-radius: 10px; color: var(--color-text); transition: background .2s ease, transform .25s var(--v6-ease, ease); }
.sbx-item__link:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); transform: translateX(2px); color: var(--color-text); }
.sbx-item__text { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sbx-item__title { font-size: .82rem; font-weight: 700; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s ease; }
.sbx-item__link:hover .sbx-item__title { color: var(--color-primary); }
.sbx-item__meta { font-size: .68rem; color: var(--color-text-muted); }
.sbx-rank { flex: 0 0 18px; text-align: center; font-size: .85rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.sbx-rank.is-first { color: var(--color-primary); }
.sbx-thumb { flex: 0 0 56px; width: 56px; height: 42px; border-radius: var(--r-thumb, 10px); overflow: hidden; background: var(--color-surface); }
.sbx-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--v6-ease, ease); }
.sbx-item__link:hover .sbx-thumb img { transform: scale(1.1); }
.sbx-thumb--ph { display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 0) 65% 50%), hsl(calc(var(--h, 0) + 40) 65% 36%)); }
.sbx-list--text .sbx-item__link { padding: .4rem .6rem; margin: 0; box-shadow: inset 2px 0 0 var(--color-primary); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.sbx-list--text { gap: .35rem; }

/* Category chips */
.sbx-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.sbx-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .65rem; font-size: .74rem; font-weight: 700; color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); border-radius: 999px; transition: background .2s ease, transform .2s ease, color .2s ease; }
.sbx-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--color-primary)); }
.sbx-chip b { font-size: .66rem; font-weight: 800; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sbx-chip:hover { background: color-mix(in srgb, var(--c, var(--color-primary)) 18%, transparent); color: var(--color-text); transform: translateY(-1px); }

/* Recent comments */
.sbx-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.sbx-comment a { display: flex; gap: .55rem; align-items: flex-start; padding: .4rem .35rem; margin: 0 -.35rem; border-radius: 10px; color: var(--color-text); transition: background .2s ease; }
.sbx-comment a:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.sbx-avatar { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 0) 70% 52%), hsl(calc(var(--h, 0) + 40) 70% 38%)); }
.sbx-comment__body { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.sbx-comment__who { font-size: .72rem; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sbx-comment__who b { color: var(--color-text); }
.sbx-comment__who em { font-style: normal; }
.sbx-comment__txt { font-size: .8rem; line-height: 1.35; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Clean mode: no borders on sidebar cards */
html .sbx-widget { border: 0 !important; box-shadow: none !important; }


/* ============================================================
   AMA LIVE V12 — COMPACT SPACING (whole site)
   Tweak these 4 values to make it tighter or looser everywhere.
   ============================================================ */
html:root {
    --sp-section: 1.35rem;   /* gap between homepage sections */
    --sp-grid: .6rem;        /* gap between cards in grids */
    --sp-card: .55rem;       /* padding inside cards */
    --sp-block: 1rem;        /* gaps in article / comments / footer blocks */
    --header-height: 60px;   /* header bar height (was 72px) */
}

/* Page frame */
html .site-main { padding: .75rem 0 1.75rem; }
html .section, html .section--top-stories { margin-bottom: var(--sp-section); }
html .section-head { padding-bottom: .4rem; margin-bottom: .65rem; }
html .section-title { font-size: 1rem; }
html h1, html h2, html h3, html h4, html h5, html h6 { margin-bottom: .35rem; }
html p { margin-bottom: .75rem; }
html .breaking-bar { padding: .35rem 0; }
html .site-header__top { padding: .45rem 0; }
html .site-header__top-inner { min-height: 56px; }
html .ama-top-stories-v5 { margin-bottom: .75rem; }
html .ama-home-top-ad { display: none; }

/* Grids */
html .grid-latest--dense, html .editors-picks-grid, html .category-news-grid,
html .sports-mini-grid, html .sports-mini-grid--8, html .you-must-read__grid--v4,
html .grid-latest, html .top-stories { gap: var(--sp-grid) !important; }
html .category-news-grid { row-gap: var(--sp-grid); }

/* Cards */
html .card:not(.card--list):not(.card--strip):not(.card--hero):not(.card--hero-small) .card__body { padding: var(--sp-card) calc(var(--sp-card) + .1rem) calc(var(--sp-card) + .1rem); gap: .25rem; }
html .card__body { gap: .25rem; }
html .card__body .card__meta { padding-top: .35rem; margin-top: .15rem; }
html .card--hero .card__body { padding: 1.5rem 1rem .85rem; }
html .card--list { padding: .3rem .4rem !important; margin: 0 -.4rem; gap: .6rem; }
html .card--list:last-child { padding-bottom: .3rem !important; }
html .widget-post-list, html .entertainment-mini-list { gap: .15rem; }
html .card__cat { padding: .15rem .5rem; }

/* Article page */
html .article-page { gap: 1.25rem; }
html .article-header { margin-bottom: .75rem; }
html .article-category-pill { margin-bottom: .55rem; }
html .article-title { margin: 0 0 .6rem; line-height: 1.12; }
html .article-lead { margin: 0 0 .65rem; line-height: 1.5; }
html .article-meta-line { margin-bottom: .85rem; gap: .25rem .6rem; }
html .article-page .article-hero, html .article-hero { margin: 0 0 1rem; }
html .article-content { line-height: 1.72; }
html .article-content p, html .article-page .article-content p { margin-bottom: .85rem; }
html .article-content h2, html .article-page .article-content h2 { margin-top: 1.35rem; }
html .article-content h3, html .article-page .article-content h3 { margin-top: 1rem; }
html .article-content img, html .article-page .article-content img { margin: .65rem 0; }
html .article-content blockquote { margin: 1rem 0; padding-top: .75rem; padding-bottom: .75rem; }
html .article-content ul, html .article-content ol { margin-bottom: .85rem; }
html .share-row { margin: 1.1rem 0; padding-top: .9rem; }
html .article-ad, html .ad-banner { margin: .6rem 0 !important; }

/* Comments */
html .cx { margin-top: 1.4rem; padding-top: .5rem; }
html .cx-top { margin-bottom: .7rem; }
html .cx-form { margin-bottom: 1rem; }
html .cx-composer { padding: .7rem; gap: .65rem; }
html .cx-composer textarea { min-height: 64px; padding: .6rem .75rem; }
html .cx-bar { margin-top: .6rem; }
html .cx-list { gap: .75rem; }
html .cx-thread, html .cx-replies { gap: .5rem; }
html .cx-bubble { padding: .6rem .8rem .7rem; }
html .cx-empty, html .cx-closed { padding: 1.1rem .8rem; }

/* Sidebar */
html .sidebar { gap: .6rem; }
html .sidebar .widget { padding: .65rem .7rem .7rem !important; }
html .sbx-head { margin-bottom: .4rem; }
html .sbx-item__link { padding: .25rem .3rem; }
html .sbx-list { gap: 0; }
html .sbx-comment a { padding: .3rem .3rem; }

/* Archive / listing */
html .archive-head { padding: .85rem 1rem; margin-bottom: .85rem; }
html .pagination { margin-top: 1.25rem; }

/* Footer */
html .site-footer { padding: 1.75rem 0 .75rem; margin-top: 1.5rem; }
html .footer-cols { gap: 1.25rem; padding-bottom: 1.1rem; }
html .footer-col h4 { margin-bottom: .65rem; padding-bottom: .35rem; }
html .footer-news-list { gap: .5rem; }
html .footer-pills, html .footer-search { margin-bottom: .8rem; }
html .footer-bottom { padding-top: .8rem; }

/* Mobile: slightly tighter still */
@media (max-width: 640px) {
    html:root { --sp-section: 1.1rem; --sp-grid: .5rem; --header-height: 56px; }
    html .site-main { padding-top: .5rem; }
    html .container { padding-left: .75rem; padding-right: .75rem; }
}


/* ============================================================
   AMA LIVE V13 — Article: justified text, big videos, ad slots
   ============================================================ */

/* ---------- 1) Auto-justified news text ---------- */
html .article-content p,
html .article-content li {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto; hyphens: auto;
    overflow-wrap: break-word;
}
html .article-content p { text-align-last: left; }        /* last line never stretches */
html .article-content h1, html .article-content h2, html .article-content h3,
html .article-content h4, html .article-content h5, html .article-content h6,
html .article-content figure, html .article-content table, html .article-content pre,
html .article-content .ama-video, html .article-content .ama-ad { text-align: left; hyphens: manual; }
html .article-lead { text-align: left; }

/* Drop cap only when the very first thing in the article is a paragraph */
html .article-content > p:first-of-type::first-letter {
    float: none; font-size: inherit; line-height: inherit; font-weight: inherit; padding: 0; color: inherit;
}
html .article-content > p:first-child::first-letter {
    float: left; font-size: 3.1rem; line-height: .9; font-weight: 900; padding: .2rem .5rem 0 0; color: var(--color-primary);
}
html .article-content a { overflow-wrap: anywhere; }

/* Inline images that were typed as plain <img> */
.ama-fig { margin: 1rem 0; text-align: center; }
.ama-fig img { display: inline-block; max-width: 100%; height: auto; border-radius: var(--r-card, 16px); }

/* ---------- 2) Big responsive videos (same width as the hero image) ---------- */
.ama-video {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    margin: 1.1rem 0; overflow: hidden;
    border-radius: var(--r-card, 16px);
    background: #000;
}
.ama-video iframe, .ama-video video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.ama-video--file video { object-fit: contain; background: #000; }
.ama-video--vertical { aspect-ratio: 9 / 16; width: min(100%, 380px); margin-left: auto; margin-right: auto; }
.article-lead-video { margin: 0 0 1.1rem; }
.article-lead-video .ama-video { margin: 0; }
html .article-content iframe:not(.ama-video iframe) { max-width: 100%; border: 0; border-radius: var(--r-card, 16px); }

/* ---------- 3) Ad slots (database ads) ---------- */
.ama-ad {
    margin: 1.1rem auto; padding: .4rem .5rem .6rem; max-width: 100%;
    text-align: center; text-align-last: center; overflow: hidden;
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
    border-radius: var(--r-card, 14px);
}
.ama-ad__label {
    display: block; margin-bottom: .3rem; font-size: .62rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); opacity: .8;
}
.ama-ad__body { display: flex; justify-content: center; align-items: center; max-width: 100%; }
.ama-ad__link { display: block; max-width: 100%; }
.ama-ad img { display: block; max-width: 100%; height: auto; border-radius: 10px; transition: opacity .2s ease; }
.ama-ad__link:hover img { opacity: .92; }
.ama-ad iframe, .ama-ad video { max-width: 100%; }
.ama-ad--adsense .ama-ad__body, .ama-ad--script .ama-ad__body { min-height: 60px; }

/* Never leave an empty box */
.ama-ad:has(.ama-ad__body:empty),
.ama-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* Device targeting */
.ama-ad--only-desktop { display: none; }
@media (min-width: 768px) {
    .ama-ad--only-desktop { display: block; }
    .ama-ad--only-mobile  { display: none; }
}

/* Inside the article text column: a little more breathing room */
.article-content .ama-ad { margin: 1.4rem auto; }


/* ============================================================
   AMA LIVE V14 — Big video card + evenly justified article text
   ============================================================ */

/* ---------- 1) Text evenly distributed between the margins ---------- */
html body .article-content { text-align: justify; text-justify: inter-word; }
html body .article-content :is(p, li, blockquote p) {
    text-align: justify !important;
    text-justify: inter-word;
    text-align-last: left;                 /* final line of a paragraph stays natural */
    -webkit-hyphens: auto; hyphens: auto;  /* even word spacing on narrow screens */
    overflow-wrap: break-word;
    word-break: normal;
    word-spacing: normal;
}
/* Loose text that sits directly in an un-classed <div> (some editors do this) */
html body .article-content > div:not([class]) { text-align: justify !important; text-align-last: left; }
/* Things that must NOT be justified */
html body .article-content :is(h1, h2, h3, h4, h5, h6, figure, figcaption, table, pre, .ama-vcard, .ama-video) { text-align: left !important; hyphens: manual; }
html body .article-content .ama-fig, html body .article-content .ama-ad { text-align: center !important; }

/* ---------- 2) Big video card ---------- */
.ama-vcard {
    margin: 1.5rem 0;
    border-radius: var(--r-card, 18px);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
}
.ama-vcard__head { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; }
.ama-vcard__badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .22rem .7rem .22rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: #fff;
    background: linear-gradient(135deg, #ff4b55, var(--color-primary-dark, #b9232c));
    box-shadow: 0 4px 12px rgba(229,48,58,.35);
}
.ama-vcard__src { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--color-text-muted); }
.ama-vcard .ama-video { margin: 0; border-radius: 0; width: 100%; aspect-ratio: 16 / 9; box-shadow: none; }
.ama-vcard__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1rem; font-size: .8rem; color: var(--color-text-muted);
}
.ama-vcard__foot a { font-weight: 700; color: var(--color-primary); text-decoration: none; transition: transform .2s ease; }
.ama-vcard__foot a:hover { text-decoration: underline; transform: translateX(2px); }
html body .article-content .ama-vcard__foot a { color: var(--color-primary); }

/* Shorts / reels: tall card, centred */
.ama-vcard--vertical { width: min(100%, 420px); margin-left: auto; margin-right: auto; }
.ama-vcard--vertical .ama-video { aspect-ratio: 9 / 16; }

/* Lead video on "Video"-format posts */
.article-lead-video .ama-vcard { margin: 0 0 1.25rem; }

@media (max-width: 520px) {
    .ama-vcard { margin: 1.1rem -.25rem; border-radius: 14px; }
    .ama-vcard__head, .ama-vcard__foot { padding: .55rem .75rem; }
}


/* ============================================================
   AMA LIVE V15 — Homepage Pro sections (clean, no borders)
   pulse · chips · trending rail · video wall · tabs · topics · new-stories pill
   ============================================================ */

/* ---------- Pulse bar ---------- */
.hp-pulse { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 .7rem; padding: .5rem .85rem; border-radius: var(--r-card, 14px); background: color-mix(in srgb, var(--color-surface) 75%, transparent); font-size: .78rem; color: var(--color-text-muted); }
.hp-pulse__live { display: inline-flex; align-items: center; gap: .4rem; font-weight: 900; letter-spacing: .12em; font-size: .7rem; color: var(--color-primary); }
.hp-pulse__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); animation: hpBlink 1.2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(229,48,58,.6); }
.hp-pulse__clock { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.hp-pulse__stats { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.hp-pulse__stats b { color: var(--color-text); font-variant-numeric: tabular-nums; }
@keyframes hpBlink { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229,48,58,.55); } 50% { opacity: .45; box-shadow: 0 0 0 6px rgba(229,48,58,0); } }
@media (max-width: 640px) { .hp-pulse__stats { margin-left: 0; width: 100%; } }

/* ---------- Category chips ---------- */
.hp-chips { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; }
.hp-chips__label { flex: 0 0 auto; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.hp-chips__row { display: flex; gap: .4rem; overflow-x: auto; padding: .15rem 0 .3rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.hp-chips__row::-webkit-scrollbar { display: none; }
.hp-chip, .hp-topic { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); transition: background .2s ease, transform .2s ease, color .2s ease; }
.hp-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--color-primary)); }
.hp-chip b, .hp-topic b { font-size: .68rem; font-weight: 800; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.hp-chip:hover { background: color-mix(in srgb, var(--c, var(--color-primary)) 20%, transparent); color: var(--color-text); transform: translateY(-2px); }
.hp-topic span { color: var(--color-primary); font-weight: 900; }
.hp-topic:hover { background: rgba(229,48,58,.14); color: var(--color-text); transform: translateY(-2px); }
.hp-topics__row { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ---------- Shared story card additions ---------- */
.hp-card .card__media { position: relative; }
.hp-ph { width: 100%; height: 100%; min-height: 100%; display: grid; place-items: center; font-size: 2.2rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 0) 65% 48%), hsl(calc(var(--h, 0) + 40) 65% 32%)); }
.hp-rank { position: absolute; left: .55rem; bottom: .4rem; z-index: 2; font-size: 2.4rem; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 3px 16px rgba(0,0,0,.7); letter-spacing: -.03em; }
.hp-play { position: absolute; inset: 0; z-index: 2; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(229,48,58,.92); box-shadow: 0 10px 28px rgba(229,48,58,.5); transition: transform .3s var(--v6-ease, ease); pointer-events: none; }
.hp-play svg { margin-left: 2px; }
.hp-card:hover .hp-play { transform: scale(1.12); }

/* ---------- Trending rail ---------- */
.hp-rail__arrows { display: inline-flex; gap: .35rem; margin-left: auto; }
.hp-rail__arrows button { width: 32px; height: 32px; border-radius: 50%; border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); transition: background .2s ease, color .2s ease, transform .2s ease; }
.hp-rail__arrows button:hover { background: var(--color-primary); color: #fff; transform: scale(1.08); }
.hp-rail__track { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .2rem .1rem .6rem; scrollbar-width: none; outline: none; }
.hp-rail__track::-webkit-scrollbar { display: none; }
.hp-card--rail { flex: 0 0 min(240px, 72vw); scroll-snap-align: start; }

/* ---------- Video wall ---------- */
.hp-video__grid { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .hp-video__grid:not(.is-single) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.hp-video__side { display: grid; gap: .7rem; align-content: start; }
.hp-card--big .card__media { aspect-ratio: 16 / 9; }
.hp-card--big .card__title { font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.hp-card--big .hp-play { width: 72px; height: 72px; }
.hp-card--side { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: .7rem; align-items: center; }
.hp-card--side .card__media { aspect-ratio: 16 / 10; }
.hp-card--side .hp-play { width: 36px; height: 36px; }
.hp-card--side .hp-play svg { width: 16px; height: 16px; }
.hp-card--side .card__title { font-size: .9rem; }

/* ---------- Category tabs ---------- */
.hp-tabs__bar { display: flex; gap: .35rem; overflow-x: auto; margin-bottom: .8rem; padding: .25rem; border-radius: 999px; width: max-content; max-width: 100%; background: color-mix(in srgb, var(--color-text) 6%, transparent); scrollbar-width: none; }
.hp-tabs__bar::-webkit-scrollbar { display: none; }
.hp-tab { flex: 0 0 auto; padding: .4rem 1rem; border: 0; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; color: var(--color-text-muted); background: transparent; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.hp-tab:hover { color: var(--color-text); }
.hp-tab.is-active { background: var(--color-primary); color: #fff; box-shadow: 0 6px 16px rgba(229,48,58,.35); }
.hp-tabs__panel[hidden] { display: none; }
.hp-tabs__panel { animation: hpFade .35s ease both; }
@keyframes hpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hp-tabs__grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 820px) { .hp-tabs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-tabs__more { display: inline-block; margin-top: .75rem; font-size: .84rem; font-weight: 700; color: var(--color-primary); transition: transform .2s ease; }
.hp-tabs__more:hover { transform: translateX(3px); }

/* ---------- "New stories" pill ---------- */
.hp-newpill { position: fixed; top: 76px; left: 50%; z-index: 9000; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border: 0; border-radius: 999px; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; color: #fff; background: linear-gradient(135deg, #ff4b55, var(--color-primary-dark, #b9232c)); box-shadow: 0 14px 34px rgba(229,48,58,.5); transform: translate(-50%, -140%); opacity: 0; transition: transform .45s var(--v6-ease, ease), opacity .3s ease; }
.hp-newpill.is-in { transform: translate(-50%, 0); opacity: 1; }
.hp-newpill:hover { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) { .hp-pulse__live i, .hp-tabs__panel { animation: none; } .hp-rail__track { scroll-behavior: auto; } }