/* ============================================
   THE DAILY WAIL — Pixel-Perfect Daily Mail CSS
   Font: Inter (exact DM font), Arial fallback
   Colors: Exact DM hex values from desktop.css
   Layout: 964px fixed, float-based (not flexbox)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --channel-color: #004db3;
    --channel-color-light: #e8f3ff;
    --channel-color-news: #00aad2;
    --channel-color-sport: #0cac0c;
    --channel-color-tvshowbiz: #e01c44;
    --channel-color-health: #33cccc;
    --channel-color-sciencetech: #ff6600;
    --channel-color-money: #451344;
    --channel-color-travel: #082340;
    --channel-color-femail: #c562a5;
    --channel-color-royals: #540c75;
    --channel-color-lifestyle: #486ce5;
    --grey-color-gr1: #f5f5f5;
    --grey-color-gr2: #e3e3e3;
    --grey-color-gr3: #c0c0c0;
    --grey-color-gr4: #999;
    --grey-color-gr5: #666;
    --grey-color-gr6: #333;
    --mol-default-font-family: Inter, Arial, Helvetica, sans-serif;
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; background: #fff; }
body {
    font-family: var(--mol-default-font-family);
    font-size: 14px;
    line-height: 1.4;
    color: #000;
    background: #fff;
}
a { color: #003580; text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; }
ul, ol { list-style: none; }

/* DM link systems */
.linkro-darkred a { color: #000; text-decoration: none; font-weight: 500; }
.linkro-darkred a:hover { color: #cc0000; text-decoration: none; }

/* DM clearfix */
.cleared::after, .gamma::after, .column-splitter::after {
    content: "."; display: block; line-height: 0; font-size: 0;
    height: 0; clear: both; visibility: hidden;
}
.cleared { min-height: 1px; }

/* DM border utilities */
.bdrgr2 { border: 1px solid var(--grey-color-gr2); }
.bdrgr3 { border: 1px solid var(--grey-color-gr3); }
.cnr5 { border-radius: 5px; }

/* ---- WAIL DISCLAIMER TICKER (satirical banner) ---- */
.disclaimer-ticker {
    background: #e01b44;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.ticker-content {
    display: inline-block;
    animation: ticker-scroll 25s linear infinite;
}
.ticker-icon { margin: 0 15px; font-size: 13px; }
.ticker-text { margin: 0 30px; }
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- PAGE CONTAINER (964px) ---- */
#page-container {
    width: 964px;
    margin: 0 auto;
    position: relative;
}

/* ---- DM EXACT: SUPPLEMENTS + WEATHER ---- */
.page-header {
    border-right: none;
    border-bottom: none;
    border-left: none;
    position: relative;
    margin: 2.5em 0 8px;
}
.page-header .supplements,
.page-header .weather {
    position: absolute;
    top: -1.8em;
    left: 0;
    font-size: 1.3em;
    width: 700px;
    z-index: 2;
}
.page-header .weather {
    left: auto;
    right: 0;
    width: auto;
    max-width: 550px;
    overflow: hidden;
    text-align: right;
    padding-top: 2px;
}
.supplements .lkeFlw { display: flex; align-items: center; gap: 6px; }
.supplements .edition-flag { display: inline-block; }
.supplements .edition-flag img { vertical-align: middle; }
.supplements .links { display: inline; }
.supplements .links span { font-weight: 600; margin-right: 6px; }
.supplements .links a { color: #000; margin: 0 4px; font-size: 11px; }
.supplements .links a:hover { text-decoration: underline; }
.weather a { color: #000; font-size: 11px; }
.weather a:hover { text-decoration: underline; }
.weather span { color: var(--grey-color-gr5); }

/* ---- DM EXACT: MASTHEAD ---- */
.masthead {
    height: 91px;
    background-position: 100%;
    background-repeat: no-repeat;
    position: relative;
}
.masthead > a:first-child {
    display: block;
    position: absolute;
    top: 7px;
    left: 7px;
}
.masthead img#logo {
    position: relative;
}
/* Fallback text logo if image fails */
.masthead .logo-text-fallback {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 52px;
    font-weight: 900;
    color: var(--channel-color);
    letter-spacing: -2px;
    position: absolute;
    top: 7px;
    left: 7px;
    text-decoration: none;
}

/* ---- DM EXACT: NAV PRIMARY ---- */
.nav-primary {
    font-size: 1.4em;
    font-weight: bold;
    border-bottom: none;
    padding: 3px 0 0;
    position: relative;
    height: 28px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
    background: var(--grey-color-gr1);
}
.nav-primary li {
    float: left;
    height: 100%;
}
.nav-primary li span {
    display: block;
    height: 100%;
}
.nav-primary li a {
    display: block;
    padding: 5px 7px 7px;
    text-decoration: none;
    height: 100%;
    line-height: 1;
    font-size: 12px;
    white-space: nowrap;
}
.nav-primary li a:hover { text-decoration: none; }
/* DM: link-gr6ox = dark text, hover to channel color */
.link-gr6ox a { color: var(--grey-color-gr6) !important; }
.link-gr6ox a:hover { color: var(--channel-color) !important; }
.linkro-ccox a { color: var(--grey-color-gr6) !important; }
.linkro-ccox a:hover { color: var(--channel-color) !important; }
/* DM: link-gr6ox items have left border divider */
.link-gr6ox a, .linkro-ccox a {
    margin: 4px 0 7px;
    padding: 0 7px 0 6px;
    border-left: 1px solid #000;
}
/* DM: link-wocc = white on channel color (selected) */
.link-wocc a, .linkro-wocc a {
    color: #fff !important;
    background-color: var(--channel-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.link-wocc.selected a {
    color: #fff !important;
    background-color: var(--channel-color);
}
/* DM: mailplus nav */
.mailplus-nav { float: right !important; }
.mailplus-nav .link-wocc a {
    background: var(--channel-color);
    border-radius: 3px;
    margin: 3px 5px;
    padding: 3px 8px;
}

/* ---- DM EXACT: NAV SECONDARY ---- */
.nav-secondary-container {
    background: var(--channel-color);
    height: 28px;
    box-sizing: border-box;
}
.nav-secondary {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    font-size: 1.149em;
    font-weight: bold;
    height: inherit;
}
.nav-secondary ul { display: flex; margin: 0; padding: 0; }
.nav-secondary li {
    float: left;
    border-left: 1px solid #fff;
    padding: 0 6px;
}
.nav-secondary li:first-child, .nav-secondary li.first { border-left: none; }
.nav-secondary li a {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
}
.nav-secondary li a:hover { text-decoration: underline; }
.nav-secondary .float-r { display: flex; margin-left: auto; }
/* DM: Login button - white pill on blue */
.nav-secondary .js-login {
    background-color: #fff;
    border-radius: 578px;
    color: var(--channel-color) !important;
    display: block;
    padding: 3px 6px;
    text-align: center;
    width: 40px;
}

/* ---- BILLBOARD AD ---- */
.billboard-container {
    text-align: center;
    padding: 8px 0;
    margin: 0 auto;
}
.ad-placeholder {
    display: inline-block;
    background: var(--grey-color-gr1);
    border: 1px dashed var(--grey-color-gr3);
    position: relative;
}
.ad-placeholder::after {
    content: 'ADVERTISEMENT';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px; color: var(--grey-color-gr4);
    text-transform: uppercase; letter-spacing: 2px;
}
.ad-billboard { width: 970px; height: 250px; }
.ad-mpu { width: 300px; height: 250px; }
.ad-leaderboard { width: 728px; height: 90px; }
.ad-label {
    font-size: 9px; color: var(--grey-color-gr4);
    text-align: right; margin-bottom: 1px;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* ---- DM EXACT: GAMMA hero ---- */
.gamma { margin-bottom: 0; border-bottom: 1px solid var(--grey-color-gr2); padding-bottom: 8px; }
.gamma .article-tri-headline h2 { font-size: 2.5em; margin: 5px 0 0; }
.gamma .article-tri-headline .articletext img { margin-right: 0; }
.gamma .article-tri-headline .articletext > div { padding: 5px 0 4px; }
.gamma .article-tri-headline .articletext > div a {
    font-size: 15px; color: var(--grey-color-gr6); line-height: 1.4;
}

/* ---- DM EXACT: SECTION DIVIDERS ---- */
/* gradient_divide: colored bar with white text */
.gradient-divide-section {
    margin: 12px 0 8px;
}
.gradient-split.wocc {
    background-color: var(--channel-color);
    color: #fff;
    padding: 6px 12px;
}
.gradient-split.wocc h6 {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}
/* thin_divide: thin line separator */
.thin-split {
    margin: 8px 0;
}
.thin-split.bdrcc {
    border-top: 2px solid var(--channel-color);
    padding-bottom: 8px;
}
.thin-split.bdrcc h6 {
    font-size: 0;
    line-height: 0;
    height: 0;
}
/* Gradient line (multi-color bar) */
.gradient-line {
    height: 3px;
    background: linear-gradient(to right, var(--channel-color), #0cac0c, #e01c44, #ff6600);
    margin: 10px 0;
}

/* ---- ARTICLE HEADLINES ---- */
.article-tri-headline h2 {
    margin: 5px 0 8px;
    font-size: 2.5em;
    font-weight: 800;
    line-height: 1.15;
}
.article-tri-headline .articletext { padding: 5px 0 4px; }
.article-tri-headline .articletext img { margin-right: 0; }

/* Hero */
.hero-link { display: block; color: #000; text-decoration: none; }
.hero-link:hover { text-decoration: none; }
.hero-link:hover h2 { color: #cc0000; }
.hero-image-wrap { overflow: hidden; background: var(--grey-color-gr1); position: relative; }
.hero-image-wrap img {
    width: 964px; height: auto; max-height: 544px;
    object-fit: cover; display: block;
}
.hero-summary {
    font-size: 15px; line-height: 1.45;
    color: var(--grey-color-gr6); padding: 4px 0;
}

/* ---- DM EXACT: LIVE PULSE BADGE ---- */
.mol-live-pulse {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    gap: .3em;
    align-items: center;
    margin-right: .3em;
    padding: .1em .25em .05em;
    line-height: 1;
    top: -1px;
    font-size: .8em;
    background: #f03649;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.mol-live-pulse .mol-bullet-icon {
    background: radial-gradient(circle, transparent 53%, rgba(187,25,25,0.5) 53.5%, #fff 60%);
    border-radius: 50%;
    height: .65em;
    width: .65em;
    animation: mol-live-pulse 1.5s ease-in-out infinite;
}
.mol-live-pulse .mol-live-bullet-text { padding-left: .2em; }
@keyframes mol-live-pulse {
    0% { opacity: 1; }
    50% { opacity: .3; }
    100% { opacity: 1; }
}
/* Size variants by context */
.gamma .article-tri-headline .mol-live-pulse { font-size: .82em; height: 28px; top: -2px; padding: .15em .4em .1em; }
.alpha .article-tri-headline .mol-live-pulse { font-size: .78em; top: -2px; height: 28px; }
.beta .article-small .mol-live-pulse { padding-top: .15em; height: 16px; top: -1px; }

/* DM EXACT: NEW / UPDATED tags */
.tag-new, .tag-upd {
    background: #c00;
    color: #fff;
    font-size: .833em;
    font-weight: 700;
    padding: 1px 3px;
    line-height: 1em;
    margin-right: 4px;
}

/* DM EXACT: BREAKING NEWS badge */
.is-breaking-news, .is-breaking {
    display: inline-flex;
    gap: .3em;
    align-items: center;
    padding: .1em .25em .05em;
    font-size: .8em;
    background: #f03649;
    color: #fff;
    font-weight: 600;
    margin-right: .3em;
}

/* ---- DM EXACT: ARTICLE ICON LINKS BAR ---- */
.article-icon-links-container { clear: both; }
.article-icon-links {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 4px 0;
    margin: 0;
    border-top: 1px solid var(--grey-color-gr2);
}
.article-icon-links li {
    float: left;
    white-space: nowrap;
    font-size: 11px;
    color: var(--grey-color-gr5);
    display: flex;
    align-items: center;
    padding: 0 4px;
}
.article-icon-links li a,
.article-icon-links li button {
    color: var(--grey-color-gr5);
    font-size: 11px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}
.article-icon-links li a:hover { color: var(--channel-color); text-decoration: none; }
/* DM: Facebook share button */
.article-icon-links li.facebook button {
    color: #1877f2;
    font-weight: 700;
}
.article-icon-links li.facebook .bold { color: #1877f2; font-weight: 700; font-size: 12px; }
/* DM: Comments link */
.article-icon-links .comments-link {
    display: flex !important;
    align-items: center;
    gap: .25rem;
    font-family: Inter, sans-serif;
}
.article-icon-links .comments-link .icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M8 1C3.6 1 0 3.8 0 7.2c0 2 1.2 3.8 3.2 5L2 15l3.5-1.8c.8.2 1.6.3 2.5.3 4.4 0 8-2.8 8-6.2S12.4 1 8 1z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.article-icon-links .readerCommentNo { font-weight: 700; color: #000; font-size: 12px; }
.article-icon-links .bold { font-weight: 700; }
.article-icon-links__pubInfo { display: none; }
li.pub-info { color: var(--grey-color-gr4); font-size: 10px; }

/* ---- BREAKING NEWS TICKER ---- */
.breaking-bar {
    display: flex; align-items: center;
    background: #cc0000; color: #fff;
    overflow: hidden; white-space: nowrap;
    margin: 8px 0;
}
.breaking-label {
    background: #ff0000; padding: 6px 12px;
    font-weight: 800; font-size: 12px;
    text-transform: uppercase; letter-spacing: 1px;
    flex-shrink: 0;
}
.breaking-ticker { overflow: hidden; padding: 6px 12px; font-size: 13px; }
.breaking-ticker a { color: #fff; font-weight: 500; }
.breaking-ticker a:hover { text-decoration: underline; }
.ticker-sep { margin: 0 8px; opacity: 0.5; }

/* ---- ALPHA / BETA LAYOUT (636 + 20 + 308 = 964) ---- */
.alpha { width: 636px; margin-right: 20px; float: left; }
.beta { width: 308px; float: left; }
.column-split { width: 308px; float: left; }
.column-splitter .first-column { margin-right: 20px; }

/* ---- ARTICLE-SMALL (154x115 thumb, text right) ---- */
.article { margin-bottom: 10px; }
.article.article-small { overflow: hidden; }
.article.article-small h2 {
    margin: 0 0 3px; font-size: 16px; font-weight: 700; line-height: 1.2;
}
.article .articletext { padding: 5px 0 4px; overflow: hidden; }
.article .articletext img {
    float: left; margin: 0 8px 5px 0;
    width: 154px; height: 115px;
    object-fit: cover; background: var(--grey-color-gr1);
}
.article .articletext p,
.article .articletext > a:last-of-type {
    font-size: 14px; color: var(--grey-color-gr6);
    line-height: 1.4; display: block; overflow: hidden;
}

/* ---- ARTICLE-TRI-HEADLINE in alpha ---- */
.alpha .article-tri-headline { margin-bottom: 12px; }
.alpha .article-tri-headline .articletext img {
    width: 636px; height: 382px;
    object-fit: cover; float: none; margin: 0 0 5px;
}
.alpha .article-tri-headline h2 { font-size: 26px; }

/* ---- COLUMN SPLITTER (two 308px cols in alpha) ---- */
.column-splitter { margin-bottom: 8px; }

/* ---- DM EXACT: PUFF / SIDEBAR SECTIONS ---- */
.puff { margin-bottom: 12px; border: 1px solid var(--grey-color-gr2); position: relative; }
.puff .tl, .puff .tr { display: none; } /* DM corner decorations (hidden) */
.puff h3.wocc {
    background-color: var(--channel-color);
    color: #fff;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.puff h3.wocc-red { background-color: #cc0000; }
.puff h3.wocc-sport { background-color: var(--channel-color-sport); }
.puff h3.wocc-showbiz { background-color: var(--channel-color-tvshowbiz); }

/* DM EXACT: Puff list (DON'T MISS, TOP STORIES - with thumbnails) */
.puff-list-dm { margin: 0; padding: 0; list-style: none; }
.puff-list-dm li {
    border-bottom: 1px solid var(--grey-color-gr2);
    overflow: hidden;
}
.puff-list-dm li:last-child { border-bottom: none; }
.puff-list-dm li a {
    display: block;
    overflow: hidden;
    padding: 8px;
    text-decoration: none;
    color: #000;
}
.puff-list-dm li a:hover { background: #f8f8f8; }
.puff-list-dm li a:hover .pufftext strong { color: #cc0000; }
.puff-list-dm li img {
    float: left;
    width: 154px;
    height: 115px;
    object-fit: cover;
    margin-right: 8px;
    background: var(--grey-color-gr1);
}
/* DM EXACT: pufftext with arrow */
.pufftext {
    display: block;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.2;
    color: var(--grey-color-gr4);
}
.pufftext strong {
    color: #000;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
}
.arrow-small-r {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #003580;
    margin-right: 4px;
    vertical-align: middle;
}

/* Simple puff list (MOST READ numbered, category links) */
.puff-list { margin: 0; padding: 0; list-style: none; }
.puff-list li {
    padding: 8px 10px;
    border-bottom: 1px solid var(--grey-color-gr2);
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}
.puff-list li:last-child { border-bottom: none; }
.puff-list li a {
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}
.puff-list li a:hover { color: #cc0000; }

/* Numbered list (MOST READ) */
.puff-list.numbered { counter-reset: most-read; }
.puff-list.numbered li {
    counter-increment: most-read;
    gap: 8px;
}
.puff-list.numbered li::before {
    content: counter(most-read);
    font-size: 28px;
    font-weight: 800;
    color: var(--grey-color-gr3);
    min-width: 26px;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
}

/* ---- SEARCH WIDGET (beta sidebar) ---- */
.search-widget {
    margin-bottom: 12px;
    display: flex;
    border: 1px solid var(--grey-color-gr2);
}
.search-widget input {
    flex: 1; padding: 6px 10px;
    border: none; font-size: 13px;
    font-family: var(--mol-default-font-family);
    outline: none;
}
.search-widget button {
    background: var(--channel-color); color: #fff;
    border: none; padding: 6px 14px;
    font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: var(--mol-default-font-family);
}
.search-widget button:hover { background: #003580; }

/* ---- SIDEBAR BOXES ---- */
.editor-note {
    background: #FFFDE7;
    border: 1px solid #FFB800;
    border-left: 3px solid #FFB800;
    padding: 10px; margin-bottom: 12px;
}
.editor-note h3 {
    font-size: 13px; font-weight: 800;
    margin: 0 0 6px; padding-bottom: 4px;
    border-bottom: 1px solid #FFB800;
}
.editor-note p {
    font-size: 13px; font-style: italic;
    line-height: 1.45; color: var(--grey-color-gr6);
    margin-bottom: 4px;
}
.editor-sig {
    font-weight: 700; font-style: normal !important;
    color: var(--channel-color); font-size: 11px !important;
}

/* Category tags */
.category-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; }
.cat-tag {
    display: inline-block; padding: 4px 10px;
    background: var(--channel-color); color: #fff !important;
    font-size: 11px; font-weight: 700;
    text-decoration: none !important;
}
.cat-tag:hover { background: #003580; }
.cat-tag.active { background: #cc0000; }

/* Disclaimer box */
.disclaimer-box {
    background: #FFF0F0; padding: 10px;
    border: 1px solid #cc0000; margin-bottom: 12px;
}
.disclaimer-box h3 {
    background: #cc0000; color: #fff;
    padding: 5px 10px; font-size: 13px; font-weight: 800;
    margin: -10px -10px 8px;
}
.disclaimer-box p { font-size: 13px; line-height: 1.4; margin-bottom: 4px; color: var(--grey-color-gr6); }

/* ---- SIDEBAR AD ---- */
.beta .ad-placeholder { margin: 0 auto 12px; display: block; }
.beta .ad-label { text-align: center; }

/* ---- ARTICLE PAGE ---- */
.article-page { overflow: hidden; }
.article-main {
    float: left; width: 636px;
    margin-right: 20px; padding: 10px 0;
}
.article-sidebar {
    float: left; width: 308px; padding: 10px 0;
}

.article-category-badge {
    display: inline-block; padding: 3px 10px;
    color: #fff; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.badge-news-cat { background: var(--channel-color-news); }
.badge-sport-cat { background: var(--channel-color-sport); }
.badge-showbiz { background: var(--channel-color-tvshowbiz); }
.badge-health { background: var(--channel-color-health); }
.badge-science, .badge-tech { background: var(--channel-color-sciencetech); }
.badge-money { background: var(--channel-color-money); }
.badge-travel { background: var(--channel-color-travel); }
.badge-femail { background: var(--channel-color-femail); }
.badge-default { background: var(--channel-color); }

.article-title {
    font-size: 30px; font-weight: 800;
    line-height: 1.15; margin: 0 0 10px;
}
.article-lead {
    font-size: 16px; line-height: 1.5;
    color: var(--grey-color-gr6); font-weight: 600;
    margin-bottom: 12px; padding-bottom: 12px;
    border-bottom: 1px solid var(--grey-color-gr2);
}
.article-byline-full {
    font-size: 13px; color: var(--grey-color-gr5);
    margin-bottom: 14px;
}
.byline-author strong { color: var(--channel-color); }

.article-hero-image { margin-bottom: 14px; overflow: hidden; }
.article-hero-image img { width: 100%; max-height: 500px; object-fit: cover; display: block; }

.article-body {
    font-size: 16px; line-height: 1.7;
    color: var(--grey-color-gr6); margin-bottom: 18px;
}
.article-body p { margin-bottom: 12px; }

.article-original-ref {
    background: var(--grey-color-gr1);
    padding: 12px; border-left: 3px solid var(--channel-color);
    margin-bottom: 14px; font-size: 14px; line-height: 1.45;
}
.original-note a { color: #003580; font-weight: 700; }

.article-disclaimer-inline {
    background: #FFFDE7; border: 1px solid #FFB800;
    padding: 12px; margin-bottom: 14px;
    font-size: 14px; line-height: 1.45;
}

.share-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--grey-color-gr2);
    font-size: 14px; font-weight: 700;
}
.share-btn {
    padding: 6px 14px; background: var(--channel-color);
    color: #fff; border: none; font-size: 13px;
    font-weight: 700; cursor: pointer;
    font-family: var(--mol-default-font-family);
}
.share-btn:hover { background: #003580; }

/* ---- CATEGORY PAGE ---- */
.category-page { padding: 10px 0; overflow: hidden; }
.category-title {
    font-size: 28px; font-weight: 800;
    color: var(--channel-color);
    border-bottom: 2px solid var(--channel-color);
    padding-bottom: 8px; margin-bottom: 6px;
}
.category-subtitle {
    font-style: italic; color: var(--grey-color-gr5);
    margin-bottom: 14px; font-size: 14px;
}

/* ---- EMPTY STATE ---- */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.empty-state p { font-size: 15px; color: var(--grey-color-gr5); margin-bottom: 8px; }
.refresh-link { color: #003580; font-weight: 700; text-decoration: underline; }
.press-animation { font-size: 16px; margin-top: 14px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ---- FOOTER (DM dark footer) ---- */
.site-footer {
    background: #1a1a1a; color: #ccc;
    padding: 0; clear: both; margin-top: 20px;
}
.back-to-top-bar {
    background: var(--grey-color-gr6);
    text-align: center; padding: 10px 0;
}
.back-to-top-bar a {
    color: #fff; font-size: 13px; font-weight: 700;
    text-decoration: none; letter-spacing: 0.5px;
}
.back-to-top-bar a:hover { text-decoration: underline; }
.footer-inner {
    width: 964px; margin: 0 auto;
    padding: 20px 0;
}
.footer-columns {
    display: flex; justify-content: space-between;
    text-align: left; margin-bottom: 18px; gap: 20px;
}
.footer-col h4 {
    font-size: 13px; font-weight: 800; color: #fff;
    margin-bottom: 8px; text-transform: uppercase;
}
.footer-col ul li { font-size: 12px; margin-bottom: 4px; }
.footer-col ul li a { color: #aaa; }
.footer-col ul li a:hover { color: #fff; text-decoration: underline; }
.footer-disclaimer { text-align: center; border-top: 1px solid #444; padding-top: 14px; }
.footer-disclaimer p { font-size: 12px; line-height: 1.45; margin-bottom: 4px; }

/* Placeholder img fallback */
img[src=""], img:not([src]) { display: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
    #page-container, .footer-inner { width: 100%; padding: 0 12px; }
    .alpha { float: none; width: 100%; margin-right: 0; }
    .beta { float: none; width: 100%; margin-top: 12px; }
    .column-split { float: none; width: 100%; }
    .column-splitter .first-column { margin-right: 0; }
    .article-main { float: none; width: 100%; margin-right: 0; }
    .article-sidebar { float: none; width: 100%; }
    .hero-image-wrap img { width: 100%; }
    .alpha .article-tri-headline .articletext img { width: 100%; height: auto; }
    .ad-billboard { width: 100%; max-width: 728px; height: 90px; }
    .nav-primary { overflow-x: auto; border-radius: 0; }
    .nav-secondary-container { border-radius: 0; }
    .supplements-bar { padding: 4px 12px; }
}

@media (max-width: 640px) {
    .article .articletext img {
        float: none; width: 100%; height: auto;
        max-height: 220px; margin: 0 0 6px;
    }
    .masthead-logo-text { font-size: 36px; }
    .masthead { height: 65px; }
    .masthead-tagline, .masthead-sub, .masthead-right { display: none; }
    .article-tri-headline h2 { font-size: 20px; }
    .alpha .article-tri-headline h2 { font-size: 20px; }
    .article.article-small h2 { font-size: 16px; }
    .article-title { font-size: 30px; }
    .nav-secondary-container { display: none; }
    .billboard-container { display: none; }
    .supplements-bar { flex-wrap: wrap; }
    .ad-mpu { width: 100%; max-width: 300px; }
    .footer-columns { flex-direction: column; gap: 12px; }
    .puff-list li img.puff-thumb { width: 100px; height: 75px; }
}