/* =====================================================================
   NEWZYY — SHARED THEME
   Single source of truth for the site-wide editorial redesign.
   Used by: index.html, article/index.html, and every language mirror
   (ur, hi, ar, es, fr, bn, tr, id, pt) — home + article pages.
   ===================================================================== */

:root {
    --red: #b80000;
    --red-dim: #7a0000;
    --ink: #141210;
    --paper: #ffffff;
    --canvas: #f7f6f2;
    --hairline: #e4dfd2;
    --muted: #6e6a62;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --urdu: 'Noto Nastaliq Urdu', 'Inter', sans-serif;
}
:root[data-theme="dark"] {
    --ink: #f0ede6;
    --paper: #17150f;
    --canvas: #0f0d09;
    --hairline: #2c2820;
    --muted: #9c9689;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { font-family: var(--sans); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; transition: background .2s, color .2s; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
:root[lang="ur"] body, :root[lang="ur"] .serif-body { font-family: var(--urdu); }
[dir="rtl"] .lead-side .rank-item, [dir="rtl"] .justin-item, [dir="rtl"] .most-read-item, [dir="rtl"] .wide-card { direction: rtl; }

/* ===== TOP NOTICE (used only on the redesign preview / staging, harmless if unused) ===== */
.build-note { background: #fffbe6; border-bottom: 1px solid #f0d97a; color: #5c4a00; font-size: .78rem; padding: 8px 20px; text-align: center; }

/* ===== READ PROGRESS (article page) ===== */
#readProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--red); z-index: 999; transition: width .1s linear; }

/* ===== UTILITY BAR ===== */
.util-bar { background: var(--paper); border-bottom: 1px solid var(--hairline); font-size: .72rem; color: var(--muted); padding: 6px 0; }
.util-bar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.util-bar .weather { display: flex; align-items: center; gap: 6px; }
.util-bar .edition { font-weight: 700; color: var(--ink); letter-spacing: .4px; text-transform: uppercase; font-size: .66rem; }
.theme-toggle { background: none; border: 1px solid var(--hairline); border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); font-size: .75rem; }
.theme-toggle:hover { border-color: var(--red); color: var(--red); }

/* ===== BREAKING TICKER ===== */
.ticker-bar { background: var(--red); border-bottom: 2px solid var(--red-dim); overflow: hidden; }
.ticker-bar .container { display: flex; align-items: center; gap: 16px; padding: 7px 20px; }
.ticker-bar .tag { background: #fff; color: var(--red); font-weight: 800; font-size: .64rem; letter-spacing: .6px; padding: 3px 10px; flex-shrink: 0; text-transform: uppercase; white-space: nowrap; }
.ticker-bar .track { overflow: hidden; white-space: nowrap; position: relative; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.ticker-bar .track-inner { display: inline-block; animation: ticker-scroll 32s linear infinite; font-size: .8rem; color: #fff; }
[dir="rtl"] .ticker-bar .track-inner { animation-direction: reverse; }
.ticker-bar .track-inner a { margin-right: 46px; color: #fff; }
.ticker-bar .track-inner a:hover { text-decoration: underline; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== MASTHEAD ===== */
.masthead { background: var(--paper); padding: 20px 0 14px; }
.masthead .container { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-logo { font-family: var(--serif); font-weight: 900; font-size: 2.1rem; letter-spacing: -1px; color: var(--ink); }
.site-logo span { color: var(--red); }
.site-logo small { font-family: var(--sans); font-size: .5rem; font-weight: 700; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; margin-left: 6px; vertical-align: middle; }
.masthead-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.search-wrapper { position: relative; }
.search-input { background: var(--canvas); border: 1.5px solid var(--hairline); color: var(--ink); border-radius: 24px; padding: 9px 18px 9px 38px; font-size: .85rem; width: 200px; outline: none; font-family: var(--sans); transition: .2s; }
[dir="rtl"] .search-input { padding: 9px 38px 9px 18px; }
.search-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(184,0,0,0.08); width: 240px; }
.search-wrapper i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85rem; }
[dir="rtl"] .search-wrapper i { left: auto; right: 12px; }
.search-suggestions { position: absolute; top: calc(100% + 6px); left: 0; width: 320px; background: var(--paper); border: 1px solid var(--hairline); box-shadow: 0 12px 30px rgba(0,0,0,0.12); z-index: 200; display: none; max-height: 340px; overflow-y: auto; }
[dir="rtl"] .search-suggestions { left: auto; right: 0; }
.search-suggestions.active { display: block; }
.search-suggestions .sug-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.search-suggestions .sug-item:last-child { border-bottom: none; }
.search-suggestions .sug-item:hover { background: var(--canvas); }
.search-suggestions .sug-item img { width: 46px; height: 46px; object-fit: cover; flex-shrink: 0; }
.search-suggestions .sug-cat { font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.search-suggestions .sug-title { font-size: .8rem; font-weight: 600; line-height: 1.3; }
.search-suggestions .sug-empty { padding: 16px; font-size: .8rem; color: var(--muted); text-align: center; }

.btn-login { background: transparent; border: 1px solid var(--hairline); color: var(--ink); padding: 6px 18px; border-radius: 4px; font-size: .78rem; font-weight: 600; }
.btn-signup { background: var(--red); border: 1px solid var(--red); color: #fff; padding: 6px 18px; border-radius: 4px; font-size: .78rem; font-weight: 600; }
.user-profile { display: flex; align-items: center; gap: 12px; }
.user-profile .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; flex-shrink: 0; }
.user-profile .name-block { display: flex; flex-direction: column; line-height: 1.3; }
.user-profile .uname { font-weight: 700; font-size: .82rem; color: var(--ink); }
.user-profile .bookmarks-link { font-size: .68rem; color: var(--red); font-weight: 600; }
.btn-logout { background: transparent; border: 1px solid var(--hairline); color: var(--muted); padding: 3px 12px; border-radius: 4px; font-size: .68rem; }

/* ===== PRIMARY NAV ===== */
.bbc-nav { background: var(--ink); }
.bbc-nav .container { display: flex; overflow-x: auto; scrollbar-width: none; }
.bbc-nav .container::-webkit-scrollbar { display: none; }
.bbc-nav .nav-link { white-space: nowrap; color: #c9c4b8 !important; font-size: .72rem; font-weight: 700; padding: 13px 15px !important; text-transform: uppercase; letter-spacing: .5px; border-bottom: 3px solid transparent; cursor: pointer; transition: .2s; }
.bbc-nav .nav-link:hover, .bbc-nav .nav-link.active { color: #fff !important; border-bottom-color: var(--red); }
:root[data-theme="dark"] .bbc-nav { background: #000; }

/* ===== CATEGORY HERO ===== */
.bbc-category-hero { background: var(--paper); padding: 14px 20px; border-left: 3px solid var(--red); margin: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
[dir="rtl"] .bbc-category-hero { border-left: none; border-right: 3px solid var(--red); }
.bbc-category-hero .cat-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.bbc-category-hero .cat-count { font-size: .78rem; color: var(--muted); }

/* ===== LIVE / BREAKING BADGE ===== */
.live-kicker { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; color: var(--red); font-family: var(--sans); }
.live-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); display: inline-block; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }

/* ===== LEAD PACKAGE (hero) ===== */
.lead-package { display: grid; grid-template-columns: 1.7fr 1fr; gap: 36px; margin: 28px 0 8px; }
.lead-main { cursor: pointer; }
.lead-main img { width: 100%; height: 420px; object-fit: cover; display: block; background: var(--hairline); }
.lead-main .kicker-row { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; }
.lead-main .kicker { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--red); font-family: var(--sans); }
.lead-main .title { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; line-height: 1.16; color: var(--ink); letter-spacing: -.3px; }
.lead-main .title:hover { color: var(--red); }
.lead-main .dek { font-family: var(--serif); font-size: 1.02rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.lead-main .meta { font-size: .76rem; color: var(--muted); margin-top: 12px; font-family: var(--sans); }

.lead-side { display: flex; flex-direction: column; }
.lead-side .rank-item { cursor: pointer; display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.lead-side .rank-item:first-child { padding-top: 0; }
.lead-side .rank-item .num { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--hairline); line-height: 1; width: 32px; flex-shrink: 0; }
.lead-side .rank-item:hover .num { color: var(--red); }
.lead-side .rank-item .rank-cat { font-size: .6rem; font-weight: 800; text-transform: uppercase; color: var(--red); font-family: var(--sans); }
.lead-side .rank-item .rank-title { font-family: var(--serif); font-size: .96rem; font-weight: 600; line-height: 1.3; margin-top: 3px; }
.lead-side .rank-item:hover .rank-title { color: var(--red); }

/* ===== SECTION DIVIDER ===== */
.section-divider { display: flex; align-items: center; gap: 14px; margin: 40px 0 22px; }
.section-divider span { font-family: var(--sans); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; color: var(--ink); }
.section-divider::after { content: ''; flex: 1; height: 2px; background: var(--ink); }
.section-divider.accent span { color: var(--red); }

/* ===== TOP-STORY WIDE CARD =====
   Rendered as its own full-width row (not part of the grid), which is
   what removes the "blank/broken area" bug: the grid below only ever
   contains equal-width cards, so it always tiles cleanly. */
.wide-card { display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.wide-card img { width: 100%; height: 190px; object-fit: cover; background: var(--hairline); }
.wide-card .cat { font-size: .62rem; font-weight: 800; text-transform: uppercase; color: var(--red); font-family: var(--sans); }
.wide-card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 6px 0 8px; }
.wide-card:hover h3 { color: var(--red); }
.wide-card p { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.wide-card .meta { font-size: .72rem; color: var(--muted); margin-top: 10px; font-family: var(--sans); }

/* ===== NEWS GRID — always uniform, no column-span, no leftover holes ===== */
.bbc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; margin: 0 0 26px; }
.bbc-card { cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; min-width: 0; }
.bbc-card:hover { transform: translateY(-3px); }
.bbc-card img { width: 100%; height: 165px; object-fit: cover; margin-bottom: 12px; transition: .3s; background: var(--hairline); }
.bbc-card:hover img { opacity: .92; }
.bbc-card .category { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--red); font-family: var(--sans); }
.bbc-card .title { font-family: var(--serif); font-size: 1.04rem; font-weight: 700; margin: 6px 0; line-height: 1.3; color: var(--ink); }
.bbc-card:hover .title { color: var(--red); }
.bbc-card .excerpt { font-size: .84rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bbc-card .meta { font-size: .68rem; color: var(--muted); margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--sans); }
.bbc-card .meta .read-time { background: var(--canvas); padding: 1px 10px; font-size: .6rem; font-weight: 600; }

/* ===== EDITOR'S PICKS — flex-wrap so a short row never leaves a grid hole ===== */
.picks-section { margin: 8px 0 30px; }
.picks-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.picks-header a { font-size: .74rem; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .4px; font-family: var(--sans); }
.picks-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.pick-card { cursor: pointer; min-width: 0; }
.pick-card img { width: 100%; height: 128px; object-fit: cover; margin-bottom: 10px; background: var(--hairline); }
.pick-card .title { font-family: var(--serif); font-size: .9rem; font-weight: 600; line-height: 1.3; }
.pick-card:hover .title { color: var(--red); }

/* ===== SKELETON LOADING ===== */
.skeleton { background: linear-gradient(90deg, var(--hairline) 25%, var(--canvas) 50%, var(--hairline) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 26px 0; }
.skeleton-card .img { width: 100%; height: 165px; margin-bottom: 12px; }
.skeleton-card .line { height: 12px; margin-bottom: 8px; width: 100%; }
.skeleton-card .line.short { width: 60%; }

/* ===== LOAD MORE ===== */
.bbc-load-more { text-align: center; margin: 32px 0; }
.bbc-load-more button { padding: 13px 44px; background: transparent; border: 1.5px solid var(--red); color: var(--red); font-weight: 700; font-size: .8rem; cursor: pointer; text-transform: uppercase; letter-spacing: .6px; border-radius: 2px; transition: .25s; font-family: var(--sans); }
.bbc-load-more button:hover { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(184,0,0,0.25); }

/* ===== SIDEBAR ===== */
.bbc-sidebar .widget, .sidebar-widget { padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.bbc-sidebar .widget:last-child, .sidebar-widget:last-child { border-bottom: none; margin-bottom: 0; }
.widget-title, .section-label { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 9px; margin-bottom: 15px; font-family: var(--sans); display: block; }

.justin-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.justin-item:last-child { border-bottom: none; }
.justin-item .time { font-family: var(--serif); font-size: .68rem; color: var(--red); font-weight: 700; width: 48px; flex-shrink: 0; }
.justin-item .title { font-size: .8rem; font-weight: 600; line-height: 1.3; }
.justin-item:hover .title { color: var(--red); }

.most-read-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.most-read-item:last-child { border-bottom: none; }
.most-read-item .rank { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--hairline); line-height: 1; width: 26px; flex-shrink: 0; }
.most-read-item:hover .rank { color: var(--red); }
.most-read-item .title { font-size: .84rem; font-weight: 600; line-height: 1.3; }
.most-read-item:hover .title { color: var(--red); }

.topic-tag { padding: 5px 15px; background: var(--canvas); font-size: .74rem; color: var(--ink); border: 1px solid var(--hairline); border-radius: 20px; display: inline-block; margin: 3px; cursor: pointer; transition: .2s; font-family: var(--sans); }
.topic-tag:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-1px); }

.newsletter-widget { background: var(--ink); color: var(--paper); padding: 22px; }
:root[data-theme="dark"] .newsletter-widget { color: #0f0d09; }
.newsletter-widget h4 { font-family: var(--serif); font-size: 1.08rem; margin-bottom: 8px; }
.newsletter-widget p { font-size: .8rem; opacity: .8; margin-bottom: 14px; font-family: var(--sans); }
.newsletter-widget input { width: 100%; padding: 10px 12px; border: none; margin-bottom: 10px; font-family: var(--sans); font-size: .85rem; }
.newsletter-widget button { width: 100%; padding: 11px; background: var(--red); color: #fff; border: none; font-weight: 700; text-transform: uppercase; font-size: .74rem; letter-spacing: .5px; cursor: pointer; font-family: var(--sans); transition: .2s; }
.newsletter-widget button:hover { background: #8f0000; }

/* ===== ARTICLE PAGE ===== */
.bbc-article-wrap { padding: 34px 0 60px; }
.bbc-breadcrumb { max-width: 700px; margin: 0 auto 20px; font-size: .75rem; color: var(--muted); letter-spacing: .2px; font-family: var(--sans); }
.bbc-breadcrumb a:hover { color: var(--red); }
.bbc-article-header { max-width: 700px; margin: 0 auto; }
.kicker-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.kicker-row .kicker { font-family: var(--sans); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; }
.article-title { font-family: var(--serif); font-size: 2.35rem; font-weight: 700; line-height: 1.18; color: var(--ink); margin-bottom: 14px; letter-spacing: -.3px; }
.article-excerpt { font-family: var(--serif); font-size: 1.22rem; font-weight: 400; color: var(--muted); line-height: 1.5; margin-bottom: 20px; }
.byline-row { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: 24px; flex-wrap: wrap; }
.byline-row .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: .86rem; flex-shrink: 0; }
.byline-row .byline-text { font-size: .8rem; color: var(--muted); line-height: 1.5; font-family: var(--sans); }
.byline-row .byline-text strong { color: var(--ink); font-weight: 700; }
.byline-row .byline-meta { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: .74rem; color: var(--muted); flex-wrap: wrap; font-family: var(--sans); }
[dir="rtl"] .byline-row .byline-meta { margin-left: 0; margin-right: auto; }
.bbc-article-image { max-width: 900px; margin: 0 auto 8px; }
.bbc-article-image img { width: 100%; max-height: 500px; object-fit: cover; display: block; background: var(--hairline); }
.bbc-article-image .caption { max-width: 700px; margin: 0 auto; font-family: var(--sans); font-size: .74rem; font-style: italic; color: var(--muted); padding: 8px 0 0; }
.bbc-article-body { max-width: 700px; margin: 28px auto 0; font-family: var(--serif); font-size: 1.14rem; line-height: 1.85; color: var(--ink); }
.bbc-article-body p { margin-bottom: 22px; }
.bbc-source-line { max-width: 700px; margin: 28px auto; padding: 16px 20px; background: var(--paper); border-left: 3px solid var(--red); font-family: var(--sans); font-size: .85rem; color: var(--muted); }
[dir="rtl"] .bbc-source-line { border-left: none; border-right: 3px solid var(--red); }
.bbc-source-line a { color: var(--red); font-weight: 700; }
.bbc-share-row { max-width: 700px; margin: 28px auto 44px; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); flex-wrap: wrap; gap: 14px; font-family: var(--sans); }
.bbc-share-row .tags span { font-size: .68rem; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: .4px; margin-right: 10px; }
.bbc-share-row .tags a { font-size: .76rem; font-weight: 600; color: var(--ink); margin-right: 12px; }
.bbc-share-row .tags a:hover { color: var(--red); }
.bbc-share-row .share-icons { display: flex; gap: 10px; list-style: none; }
.bbc-share-row .share-icons a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 50%; color: var(--ink); font-size: .82rem; }
.bbc-share-row .share-icons a:hover { border-color: var(--red); color: var(--red); }
.bbc-related { max-width: 900px; margin: 0 auto 50px; }
.related-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.related-item { cursor: pointer; min-width: 0; }
.related-item img { width: 100%; height: 118px; object-fit: cover; margin-bottom: 10px; background: var(--hairline); }
.related-item .cat { font-family: var(--sans); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--red); }
.related-item .title { font-family: var(--serif); font-size: .96rem; font-weight: 600; line-height: 1.3; margin-top: 4px; }
.related-item:hover .title { color: var(--red); }
.related-item .meta { font-family: var(--sans); font-size: .66rem; color: var(--muted); margin-top: 8px; }
.bbc-state-msg { max-width: 700px; margin: 0 auto; text-align: center; padding: 90px 20px; font-family: var(--sans); }
.bbc-state-msg h4 { font-weight: 700; margin-bottom: 10px; }
.bbc-state-msg a { color: var(--red); font-weight: 700; }

/* ===== FOOTER ===== */
.bbc-footer { background: var(--ink); color: #ccc; padding: 40px 0 20px; margin-top: 40px; border-top: 3px solid var(--red); font-family: var(--sans); }
:root[data-theme="dark"] .bbc-footer { background: #000; }
.bbc-footer a { color: #ccc; font-size: .85rem; }
.bbc-footer a:hover { color: #fff; }
.bbc-footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.bbc-footer .copyright { font-size: .75rem; color: #666; margin-top: 18px; text-align: center; }
.lang-switch-toggle { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.18); padding: 8px 18px; border-radius: 4px; font-family: var(--sans); font-size: .78rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.lang-switcher-panel { display: none; }
.lang-switcher-panel.open { display: block !important; }
.lang-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lang-grid a { font-size: .75rem; padding: 6px 4px; text-align: center; border: 1px solid rgba(255,255,255,0.15); color: #ccc; border-radius: 3px; }
.lang-grid a.current { border-color: var(--red); color: var(--red); }

/* ===== TOAST ===== */
#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--red); color: #fff; padding: 12px 24px; font-size: .85rem; z-index: 1100; opacity: 0; transition: .3s; font-family: var(--sans); }

/* =====================================================================
   HOMEPAGE v3 — FLAT EDITORIAL / WIRE-DESK REDESIGN
   Purely additive: new class names only (still prefixed hp-), used only
   by index.html. Nothing above this line is modified, so the article
   page and every language homepage are unaffected.
   ===================================================================== */

:root{
  --hp-ink:#0a0a0a; --hp-paper:#ffffff; --hp-canvas:#f4f3ef;
  --hp-rule:#d9d5c9; --hp-rule-strong:#0a0a0a; --hp-muted:#57544c; --hp-muted-2:#8a8678;
  --hp-red:#c00000; --hp-red-dim:#870000;
  --hp-display:'Playfair Display',var(--serif);
}
:root[data-theme="dark"]{
  --hp-ink:#efece4; --hp-paper:#161410; --hp-canvas:#0c0a07;
  --hp-rule:#2c2820; --hp-rule-strong:#efece4; --hp-muted:#a39d8c; --hp-muted-2:#726c5c;
}
.hp-body{ background:var(--hp-canvas); font-size:15px; }
.hp-shell{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* ---------- utility strip ---------- */
.hp-utility{ background:var(--hp-ink); color:#c7c3b6; font-family:var(--sans); font-size:.66rem; letter-spacing:.3px; }
.hp-utility .container{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:5px 20px; flex-wrap:wrap; gap:6px; }
.hp-utility .hp-edition{ text-transform:uppercase; font-weight:700; letter-spacing:.6px; color:#fff; }
.hp-utility .hp-utility-right{ display:flex; align-items:center; gap:16px; }
.hp-theme-btn{ background:none; border:1px solid rgba(255,255,255,.22); color:#fff; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:.62rem; }
.hp-theme-btn:hover{ border-color:var(--hp-red); }

/* ---------- breaking ticker ---------- */
.hp-ticker{ background:var(--hp-red); }
.hp-ticker .container{ max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:6px 20px; }
.hp-ticker .hp-ticker-tag{ background:#fff; color:var(--hp-red); font-family:var(--sans); font-weight:800; font-size:.6rem; letter-spacing:.6px; padding:3px 8px; flex-shrink:0; text-transform:uppercase; }
.hp-ticker .hp-ticker-track{ overflow:hidden; white-space:nowrap; flex:1; mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.hp-ticker .hp-ticker-inner{ display:inline-block; animation:hp-scroll 34s linear infinite; font-family:var(--sans); font-size:.76rem; color:#fff; }
.hp-ticker .hp-ticker-inner a{ color:#fff; margin-right:42px; }
.hp-ticker .hp-ticker-inner a:hover{ text-decoration:underline; }
@keyframes hp-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- nameplate — static, no sticky/compact animation ---------- */
#hpNameplate{ background:var(--hp-paper); padding:18px 0 0; }
.nameplate-row{ max-width:1180px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.nameplate-meta{ font-family:var(--sans); font-size:.66rem; color:var(--hp-muted); }
.nameplate-meta.right{ text-align:right; }
.nameplate-brand{ font-family:var(--hp-display); font-weight:900; font-size:2.9rem; text-align:center; letter-spacing:-.5px; color:var(--hp-ink); line-height:1; }
.nameplate-rule-set{ max-width:1180px; margin:12px auto 0; padding:0 20px; }
.nameplate-rule-set .r1{ height:3px; background:var(--hp-ink); }
.nameplate-rule-set .r2{ height:1px; background:var(--hp-ink); margin-top:3px; }
.nameplate-tagline{ text-align:center; font-family:var(--sans); font-size:.6rem; font-weight:700; letter-spacing:2.5px; color:var(--hp-muted-2); text-transform:uppercase; padding:8px 0; }

/* ---------- two-tier index nav ---------- */
.primary-nav-v2{ background:var(--hp-ink); }
.hp-nav-index{ display:flex; align-items:center; overflow-x:auto; white-space:nowrap; max-width:1180px; margin:0 auto; padding:0 20px; scrollbar-width:none; }
.hp-nav-index::-webkit-scrollbar{ display:none; }
.hp-nav-index .nav-link{ color:#c7c3b6; font-family:var(--sans); font-size:.71rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:12px 0; border-bottom:2px solid transparent; cursor:pointer; }
.hp-nav-index .nav-link:hover, .hp-nav-index .nav-link.active{ color:#fff; border-bottom-color:var(--hp-red); }
.hp-nav-index .pipe{ color:#4a4636; padding:0 11px; font-size:.68rem; flex-shrink:0; }
.hp-nav-sub{ border-top:1px solid rgba(255,255,255,.08); }
.hp-nav-sub .row{ max-width:1180px; margin:0 auto; padding:6px 20px; display:flex; justify-content:flex-end; align-items:center; gap:16px; }
.hp-nav-sub a, .hp-nav-sub button{ color:#8f8b7c; font-family:var(--sans); font-size:.68rem; letter-spacing:.3px; background:none; border:none; cursor:pointer; }
.hp-nav-sub a:hover, .hp-nav-sub button:hover{ color:#fff; }
.hp-search-wrap{ position:relative; }
.hp-search-input{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; padding:5px 14px 5px 26px; font-size:.72rem; width:130px; outline:none; font-family:var(--sans); transition:.2s; }
.hp-search-input::placeholder{ color:#8f8b7c; }
.hp-search-input:focus{ width:190px; border-color:var(--hp-red); background:rgba(255,255,255,.12); }
.hp-search-wrap i.fa-search{ position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#8f8b7c; font-size:.68rem; }
.hp-user{ display:flex; align-items:center; gap:8px; }
.hp-user .hp-avatar{ width:20px; height:20px; border-radius:50%; background:var(--hp-red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; }
.hp-user .hp-uname{ color:#e8e5da; font-size:.68rem; }

/* ---------- category hero (filtered view) ---------- */
.hp-cat-hero{ background:var(--hp-paper); border-left:3px solid var(--hp-red); padding:12px 16px; margin:20px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.hp-cat-hero .cn{ font-family:var(--hp-display); font-weight:900; font-size:1.15rem; }
.hp-cat-hero .cc{ font-family:var(--sans); font-size:.72rem; color:var(--hp-muted); }

/* ---------- section head ---------- */
.hp-head{ display:flex; align-items:baseline; gap:14px; margin:38px 0 18px; }
.hp-head h2{ font-family:var(--hp-display); font-weight:800; font-size:1.26rem; letter-spacing:-.2px; color:var(--hp-ink); white-space:nowrap; }
.hp-head::after{ content:''; flex:1; height:1px; background:var(--hp-rule-strong); transform:translateY(2px); }
.hp-head .hp-view-all{ font-family:var(--sans); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--hp-red); white-space:nowrap; cursor:pointer; }
.hp-head.light h2, .hp-head.light .hp-view-all{ color:#fff; }
.hp-head.light::after{ background:rgba(255,255,255,.3); }

/* ---------- hero ---------- */
.hp-hero{ margin-top:26px; display:grid; grid-template-columns:1.65fr 1fr; border:1px solid var(--hp-rule); }
.hp-hero-feature{ position:relative; cursor:pointer; min-height:420px; overflow:hidden; background:#111; }
.hp-hero-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.hp-hero-feature:hover img{ transform:scale(1.045); }
.hp-hero-feature .hp-scrim{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 40%,transparent 68%); }
.hp-hero-feature .hp-hero-text{ position:absolute; left:0; right:0; bottom:0; padding:26px 30px 24px; }
.hp-hero-kicker{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.hp-hero-kicker span.k{ font-family:var(--sans); font-weight:800; font-size:.68rem; letter-spacing:1px; text-transform:uppercase; color:#fff; border-bottom:2px solid var(--hp-red); padding-bottom:2px; }
.hp-live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:800; font-size:.6rem; letter-spacing:.6px; text-transform:uppercase; color:#fff; background:var(--hp-red); padding:3px 8px; }
.hp-live .d{ width:6px; height:6px; border-radius:50%; background:#fff; animation:hp-pulse 1.2s ease-in-out infinite; }
@keyframes hp-pulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.7);} }
.hp-hero-feature h1{ font-family:var(--hp-display); font-weight:800; font-size:2.2rem; line-height:1.1; color:#fff; letter-spacing:-.4px; max-width:92%; }
.hp-hero-feature .hp-hero-dek{ font-family:var(--serif); font-size:.94rem; color:#ddd9cf; margin-top:8px; max-width:88%; line-height:1.5; }
.hp-hero-feature .hp-hero-meta{ font-family:var(--sans); font-size:.68rem; color:#bab6a8; margin-top:12px; }
.hp-hero-side{ display:flex; flex-direction:column; background:var(--hp-paper); border-left:1px solid var(--hp-rule); }
.hp-hero-side .hsi{ display:flex; gap:12px; padding:16px 18px; border-bottom:1px solid var(--hp-rule); cursor:pointer; }
.hp-hero-side .hsi:last-child{ border-bottom:none; }
.hp-hero-side .hsi .n{ font-family:var(--hp-display); font-size:1.5rem; font-weight:800; color:var(--hp-rule); line-height:1; width:26px; flex-shrink:0; }
.hp-hero-side .hsi:hover .n{ color:var(--hp-red); }
.hp-hero-side .hsi .k{ font-family:var(--sans); font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--hp-muted); }
.hp-hero-side .hsi .t{ font-family:var(--serif); font-weight:600; font-size:.86rem; line-height:1.28; margin-top:2px; }
.hp-hero-side .hsi:hover .t{ color:var(--hp-red); }

/* ---------- latest strip ---------- */
.hp-latest{ display:flex; overflow-x:auto; border:1px solid var(--hp-rule); border-top:none; background:var(--hp-paper); scrollbar-width:none; }
.hp-latest::-webkit-scrollbar{ display:none; }
.hp-latest .li{ flex:0 0 auto; width:210px; padding:12px 16px; border-right:1px solid var(--hp-rule); cursor:pointer; }
.hp-latest .li:last-child{ border-right:none; }
.hp-latest .li .tm{ font-family:var(--sans); font-weight:800; font-size:.6rem; color:var(--hp-red); }
.hp-latest .li .tt{ font-family:var(--serif); font-size:.8rem; font-weight:600; line-height:1.28; margin-top:4px; }
.hp-latest .li:hover .tt{ color:var(--hp-red); }

/* ---------- top stories with vertical rule ---------- */
.hp-ts{ display:grid; grid-template-columns:1.3fr 1px 1fr; gap:28px; }
.hp-ts-rule{ background:var(--hp-rule); }
.hp-ts-feature{ cursor:pointer; }
.hp-ts-feature img{ width:100%; height:270px; object-fit:cover; object-position:center 30%; background:var(--hp-rule); }
.hp-ts-feature .k{ font-family:var(--sans); font-weight:800; font-size:.64rem; letter-spacing:.5px; text-transform:uppercase; color:var(--hp-ink); margin-top:12px; display:block; border-bottom:2px solid var(--hp-red); padding-bottom:2px; width:fit-content; }
.hp-ts-feature h3{ font-family:var(--hp-display); font-weight:800; font-size:1.45rem; line-height:1.16; margin-top:9px; letter-spacing:-.3px; }
.hp-ts-feature:hover h3{ color:var(--hp-red); }
.hp-ts-feature p{ font-family:var(--serif); font-size:.9rem; color:var(--hp-muted); margin-top:6px; line-height:1.5; }
.hp-ts-feature .m{ font-family:var(--sans); font-size:.68rem; color:var(--hp-muted-2); margin-top:8px; }
.hp-ts-list .tli{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--hp-rule); cursor:pointer; }
.hp-ts-list .tli:first-child{ padding-top:0; }
.hp-ts-list .tli img{ width:84px; height:64px; object-fit:cover; flex-shrink:0; background:var(--hp-rule); }
.hp-ts-list .tli .k{ font-family:var(--sans); font-weight:800; font-size:.58rem; letter-spacing:.4px; text-transform:uppercase; color:var(--hp-muted); }
.hp-ts-list .tli .t{ font-family:var(--serif); font-weight:700; font-size:.92rem; line-height:1.24; margin-top:3px; }
.hp-ts-list .tli:hover .t{ color:var(--hp-red); }
.hp-ts-list .tli .m{ font-family:var(--sans); font-size:.64rem; color:var(--hp-muted-2); margin-top:5px; }

/* ---------- wire briefs (dense text-only) ---------- */
.hp-briefs{ display:grid; grid-template-columns:repeat(3,1fr); position:relative; }
.hp-briefs .brief-col{ padding:0 22px; }
.hp-briefs .brief-col:first-child{ padding-left:0; }
.hp-briefs .brief-col:last-child{ padding-right:0; }
.hp-briefs .brief-col + .brief-col{ border-left:1px solid var(--hp-rule); }
.hp-briefs .brief-col h3{ font-family:var(--sans); font-weight:800; font-size:.7rem; letter-spacing:.6px; text-transform:uppercase; border-bottom:2px solid var(--hp-ink); padding-bottom:8px; margin-bottom:2px; }
.hp-brief-item{ padding:11px 0; border-bottom:1px solid var(--hp-rule); cursor:pointer; }
.hp-brief-item:last-child{ border-bottom:none; }
.hp-brief-item .t{ font-family:var(--serif); font-weight:600; font-size:.85rem; line-height:1.3; }
.hp-brief-item:hover .t{ color:var(--hp-red); }
.hp-brief-item .m{ font-family:var(--sans); font-size:.62rem; color:var(--hp-muted-2); margin-top:3px; }

/* ---------- in pictures ---------- */
.hp-pictures-band{ background:var(--hp-ink); margin-top:48px; padding:32px 0 40px; }
.hp-pictures-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2px; }
.hp-pic{ position:relative; cursor:pointer; height:210px; overflow:hidden; background:#111; }
.hp-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.8); }
.hp-pic:hover img{ filter:brightness(1); }
.hp-pic .cap{ position:absolute; left:0; right:0; bottom:0; padding:14px; background:linear-gradient(0deg,rgba(0,0,0,.85),transparent); }
.hp-pic .cap .k{ font-family:var(--sans); font-size:.58rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--hp-red); }
.hp-pic .cap .t{ font-family:var(--serif); font-size:.86rem; font-weight:600; color:#fff; line-height:1.28; margin-top:3px; }

/* ---------- content row: dense grid + sidebar, with vertical rule ---------- */
.hp-content-row{ display:grid; grid-template-columns:2fr 1px 1fr; gap:34px; align-items:start; }
.hp-vrule{ background:var(--hp-rule); align-self:stretch; }
.hp-dense-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.hp-story-card{ cursor:pointer; border-right:1px solid var(--hp-rule); border-bottom:1px solid var(--hp-rule); padding:0 22px 22px 0; margin-top:22px; min-width:0; }
.hp-story-card:nth-child(3n){ border-right:none; padding-right:0; }
.hp-story-card img{ width:100%; height:140px; object-fit:cover; background:var(--hp-rule); }
.hp-story-card .k{ font-family:var(--sans); font-weight:800; font-size:.6rem; letter-spacing:.4px; text-transform:uppercase; color:var(--hp-muted); margin-top:9px; display:block; }
.hp-story-card h4{ font-family:var(--hp-display); font-weight:700; font-size:.96rem; line-height:1.28; margin-top:4px; }
.hp-story-card:hover h4{ color:var(--hp-red); }
.hp-story-card .m{ font-family:var(--sans); font-size:.64rem; color:var(--hp-muted-2); margin-top:7px; }
.hp-load-more{ text-align:center; margin:36px 0 6px; }
.hp-load-more button{ font-family:var(--sans); padding:11px 40px; background:none; border:1.5px solid var(--hp-ink); color:var(--hp-ink); font-weight:700; font-size:.72rem; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; transition:.2s; }
.hp-load-more button:hover{ background:var(--hp-ink); color:#fff; }

/* ---------- sidebar ---------- */
.hp-side-widget{ padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--hp-rule); }
.hp-side-widget:last-child{ border-bottom:none; }
.hp-side-title{ font-family:var(--sans); font-weight:800; font-size:.68rem; letter-spacing:.6px; text-transform:uppercase; color:var(--hp-ink); border-bottom:2px solid var(--hp-ink); padding-bottom:8px; margin-bottom:4px; display:block; }
.hp-mostread-item{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--hp-rule); cursor:pointer; }
.hp-mostread-item:last-child{ border-bottom:none; }
.hp-mostread-item .n{ font-family:var(--hp-display); font-weight:800; font-size:1.3rem; color:var(--hp-rule); line-height:1; width:24px; flex-shrink:0; }
.hp-mostread-item:hover .n{ color:var(--hp-red); }
.hp-mostread-item .t{ font-family:var(--serif); font-weight:700; font-size:.82rem; line-height:1.28; }
.hp-mostread-item:hover .t{ color:var(--hp-red); }
.hp-newsletter{ background:var(--hp-ink); color:#fff; padding:20px; }
.hp-newsletter .lbl{ font-family:var(--sans); font-weight:800; font-size:.58rem; letter-spacing:1px; text-transform:uppercase; color:var(--hp-red); }
.hp-newsletter h4{ font-family:var(--hp-display); font-weight:800; font-size:1.1rem; margin-top:6px; }
.hp-newsletter p{ font-family:var(--sans); font-size:.72rem; color:#c9c6bb; margin-top:6px; line-height:1.5; }
.hp-newsletter input{ width:100%; padding:9px 10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; font-family:var(--sans); font-size:.78rem; margin-top:10px; }
.hp-newsletter input::placeholder{ color:#8f8b7c; }
.hp-newsletter button{ width:100%; padding:10px; background:var(--hp-red); color:#fff; border:none; font-weight:800; font-size:.66rem; letter-spacing:.5px; text-transform:uppercase; margin-top:8px; cursor:pointer; }
.hp-newsletter button:hover{ background:#970000; }
.hp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.hp-tag{ font-family:var(--sans); font-size:.7rem; font-weight:600; color:var(--hp-ink); border:1px solid var(--hp-rule); padding:5px 12px; cursor:pointer; transition:.15s; }
.hp-tag:hover{ background:var(--hp-ink); color:#fff; border-color:var(--hp-ink); }
.hp-follow{ display:flex; gap:10px; margin-top:4px; }
.hp-follow a{ width:30px; height:30px; border:1px solid var(--hp-rule); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--hp-ink); font-size:.8rem; }
.hp-follow a:hover{ border-color:var(--hp-red); color:var(--hp-red); }

/* ---------- editor's picks (per category) ---------- */
.hp-picks-block{ margin-bottom:6px; }
.hp-picks-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.hp-picks-grid.hp-picks-solo{ grid-template-columns:1fr; }
.hp-picks-grid.hp-picks-solo .hp-picks-feature img{ height:260px; }
.hp-picks-feature{ cursor:pointer; }
.hp-picks-feature img{ width:100%; height:190px; object-fit:cover; background:var(--hp-rule); }
.hp-picks-feature .t{ font-family:var(--hp-display); font-weight:700; font-size:1.08rem; line-height:1.24; margin-top:10px; }
.hp-picks-feature:hover .t{ color:var(--hp-red); }
.hp-picks-list .pli{ display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--hp-rule); cursor:pointer; }
.hp-picks-list .pli:first-child{ padding-top:0; }
.hp-picks-list .pli .n{ font-family:var(--hp-display); font-weight:800; color:var(--hp-rule); font-size:.98rem; width:18px; flex-shrink:0; }
.hp-picks-list .pli:hover .n{ color:var(--hp-red); }
.hp-picks-list .pli .t{ font-family:var(--serif); font-weight:600; font-size:.84rem; line-height:1.28; }
.hp-picks-list .pli:hover .t{ color:var(--hp-red); }

/* ---------- most read — expanded full section ---------- */
.hp-mostread-grid{ display:grid; grid-template-columns:1fr 1px 1fr; gap:30px; }
.hp-mostread-rule{ background:var(--hp-rule); }
.hp-mr-full{ display:flex; gap:16px; padding:15px 0; border-bottom:1px solid var(--hp-rule); cursor:pointer; align-items:center; }
.hp-mr-full:first-child{ padding-top:0; }
.hp-mr-full .n{ font-family:var(--hp-display); font-weight:900; font-size:2rem; color:var(--hp-rule); width:42px; flex-shrink:0; line-height:1; }
.hp-mr-full:hover .n{ color:var(--hp-red); }
.hp-mr-full .k{ font-family:var(--sans); font-size:.58rem; font-weight:800; text-transform:uppercase; color:var(--hp-muted); }
.hp-mr-full .t{ font-family:var(--serif); font-weight:700; font-size:.96rem; line-height:1.3; margin-top:2px; }
.hp-mr-full:hover .t{ color:var(--hp-red); }
.hp-mr-full .m{ font-family:var(--sans); font-size:.64rem; color:var(--hp-muted-2); margin-top:5px; }

/* ---------- skeletons ---------- */
.hp-skeleton{ background:linear-gradient(90deg,var(--hp-rule) 25%,var(--hp-canvas) 50%,var(--hp-rule) 75%); background-size:200% 100%; animation:hp-shimmer 1.4s infinite; }
@keyframes hp-shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ---------- mega footer ---------- */
.hp-mega-footer{ background:var(--hp-ink); color:#c9c6bb; margin-top:56px; border-top:4px solid var(--hp-red); font-family:var(--sans); }
.hp-mega-footer .top{ max-width:1180px; margin:0 auto; padding:40px 20px 26px; display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px; }
.hp-mega-footer .brand{ font-family:var(--hp-display); font-weight:900; font-size:1.55rem; color:#fff; }
.hp-mega-footer .brand-desc{ font-size:.78rem; margin-top:11px; line-height:1.6; max-width:270px; color:#a8a498; }
.hp-mega-footer .col h5{ font-size:.64rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.hp-mega-footer .col a{ display:block; font-size:.78rem; color:#a8a498; margin-bottom:10px; }
.hp-mega-footer .col a:hover{ color:#fff; }
.hp-footer-sections-cols{ display:flex; gap:24px; }
.hp-footer-sections-cols > div{ flex:1; min-width:0; }
.hp-colophon{ border-top:1px solid rgba(255,255,255,.1); }
.hp-colophon .inner{ max-width:1180px; margin:0 auto; padding:13px 20px; font-family:var(--serif); font-style:italic; font-size:.7rem; color:#726c5c; text-align:center; }
.hp-mega-footer .langbar{ border-top:1px solid rgba(255,255,255,.1); }
.hp-mega-footer .langbar-inner{ max-width:1180px; margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.hp-mega-footer .langbar a{ font-size:.72rem; color:#a8a498; padding:5px 12px; border:1px solid rgba(255,255,255,.14); border-radius:14px; }
.hp-mega-footer .langbar a.cur{ color:var(--hp-red); border-color:var(--hp-red); }
.hp-mega-footer .bottom{ border-top:1px solid rgba(255,255,255,.1); }
.hp-mega-footer .bottom-inner{ max-width:1180px; margin:0 auto; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:.7rem; color:#7d7a6e; }

/* ---------- responsive ---------- */
@media (max-width:992px){
  .hp-hero{ grid-template-columns:1fr; }
  .hp-hero-feature{ min-height:360px; }
  .hp-hero-side{ border-left:none; border-top:1px solid var(--hp-rule); }
  .hp-ts{ grid-template-columns:1fr; }
  .hp-ts-rule{ display:none; }
  .hp-briefs{ grid-template-columns:1fr; }
  .hp-briefs .brief-col{ padding:0 !important; border-left:none !important; border-top:1px solid var(--hp-rule); padding-top:20px !important; }
  .hp-briefs .brief-col:first-child{ border-top:none; padding-top:0 !important; }
  .hp-content-row{ grid-template-columns:1fr; }
  .hp-vrule{ display:none; }
  .hp-picks-grid{ grid-template-columns:1fr; }
  .hp-mostread-grid{ grid-template-columns:1fr; }
  .hp-mostread-rule{ display:none; }
  .nameplate-brand{ font-size:2.3rem; }
  .nameplate-meta{ display:none; }
  .hp-mega-footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .hp-dense-grid{ grid-template-columns:1fr; }
  .hp-story-card{ border-right:none !important; padding-right:0 !important; }
  .hp-hero-feature h1{ font-size:1.8rem; max-width:100%; }
  .hp-search-input{ width:100px; }
  .hp-mega-footer .top{ grid-template-columns:1fr; }
}

@media (max-width: 992px) {
    .lead-package { grid-template-columns: 1fr; }
    .bbc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skeleton-grid { grid-template-columns: repeat(2, 1fr); }
    .wide-card { grid-template-columns: 220px 1fr; }
    .lang-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .byline-row .byline-meta { margin-left: 0; }
}
@media (max-width: 600px) {
    .bbc-grid { grid-template-columns: 1fr; }
    .skeleton-grid { grid-template-columns: 1fr; }
    .wide-card { grid-template-columns: 1fr; }
    .wide-card img { height: 200px; }
    .search-input { width: 130px; }
    .search-suggestions { width: 260px; }
    .site-logo { font-size: 1.7rem; }
    .lang-grid { grid-template-columns: repeat(2, 1fr); }
    .lead-main .title { font-size: 1.7rem; }
    .article-title { font-size: 1.7rem; }
}