:root {
  --ink: #0f1923; --ink-light: #2d3f50; --paper: #f5f0e8; --paper-dark: #ede7d9;
  --accent: #c8392b; --gold: #c4922a; --muted: #7a8a96; --green: #2a7a4a;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'IBM Plex Sans',sans-serif; background:var(--paper); color:var(--ink); font-size:16px; line-height:1.6; }

/* MASTHEAD */
.masthead { background:var(--ink); color:var(--paper); border-bottom:3px solid var(--accent); }
.masthead-top { display:flex; justify-content:space-between; align-items:center; padding:10px 48px; border-bottom:1px solid rgba(245,240,232,.15); font-size:11px; letter-spacing:.12em; font-family:'IBM Plex Mono',monospace; color:rgba(245,240,232,.5); }
.masthead-main { padding:28px 48px 24px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px; max-width:1280px; margin:0 auto; }
.site-name { font-family:'Playfair Display',serif; font-size:52px; font-weight:900; letter-spacing:-.02em; line-height:1; color:var(--paper); }
.site-name span { color:var(--accent); }
.site-tagline { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,240,232,.55); margin-top:8px; font-weight:500; }
.masthead-meta { text-align:right; font-size:11px; color:rgba(245,240,232,.45); font-family:'IBM Plex Mono',monospace; line-height:1.8; }

/* NAV */
nav { background:var(--ink); border-top:1px solid rgba(245,240,232,.1); }
.nav-inner { max-width:1280px; margin:0 auto; padding:0 48px; display:flex; gap:0; }
nav a { color:rgba(245,240,232,.7); text-decoration:none; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:14px 18px 12px; border-bottom:3px solid transparent; transition:all .2s; cursor:pointer; display:block; }
nav a:hover, nav a.active { color:var(--paper); border-bottom-color:var(--accent); }

/* LAYOUT */
.container { max-width:1280px; margin:0 auto; padding:0 48px; }
.section-rule { display:flex; align-items:center; gap:16px; margin:40px 0 28px; }
.section-rule h2 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap; font-weight:500; }
.section-rule::after { content:''; flex:1; height:1px; background:var(--paper-dark); }

/* PAGE SECTIONS */
.page-section { display:none; }
.page-section.active { display:block; }

/* HERO STRIP */
.hero-strip { background:var(--ink); color:var(--paper); display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1px; background-color:rgba(245,240,232,.15); }
.hero-cell { background:var(--ink); padding:32px; }
.hero-label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,240,232,.4); font-family:'IBM Plex Mono',monospace; margin-bottom:12px; }
.hero-number { font-family:'Playfair Display',serif; font-size:48px; font-weight:700; color:var(--paper); line-height:1; }
.hero-number span { font-size:20px; color:var(--gold); }
.hero-desc { font-size:13px; color:rgba(245,240,232,.55); margin-top:8px; line-height:1.5; }
.hero-intro { font-size:16px; color:rgba(245,240,232,.8); line-height:1.7; }
.hero-intro strong { color:var(--paper); }

/* MAIN GRID */
.main-grid { display:grid; grid-template-columns:2fr 1fr; gap:48px; padding:40px 0 60px; }

/* ARTICLES */
.article-kicker { font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--accent); font-family:'IBM Plex Mono',monospace; margin-bottom:12px; }
.article-title { font-family:'Playfair Display',serif; font-size:32px; font-weight:700; line-height:1.15; letter-spacing:-.02em; color:var(--ink); margin-bottom:16px; }
.article-deck { font-size:16px; line-height:1.65; color:var(--ink-light); margin-bottom:20px; font-weight:300; border-left:3px solid var(--accent); padding-left:20px; }
.article-body { font-size:15px; line-height:1.75; color:var(--ink-light); }
.article-body p { margin-bottom:16px; }
.article-byline { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-family:'IBM Plex Mono',monospace; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--paper-dark); }
.featured { border-top:3px solid var(--ink); padding-top:24px; }

/* NEWS GRID */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper-dark); margin-top:40px; border-top:3px solid var(--ink); }
.news-card { background:var(--paper); padding:28px; cursor:pointer; transition:background .2s; }
.news-card:hover { background:white; }
.news-card-kicker { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; font-weight:500; }
.news-card-title { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; line-height:1.3; color:var(--ink); margin-bottom:12px; }
.news-card-deck { font-size:13px; color:var(--ink-light); line-height:1.6; font-weight:300; }
.news-card-date { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); margin-top:16px; letter-spacing:.08em; }

/* SIDEBAR */
.sidebar { border-top:3px solid var(--ink); padding-top:24px; }
.sidebar-widget { margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid var(--paper-dark); }
.sidebar-widget:last-child { border-bottom:none; }
.widget-title { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; font-weight:500; }
.stat-bar-item { margin-bottom:16px; }
.stat-bar-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.stat-bar-label { font-size:13px; font-weight:500; color:var(--ink); }
.stat-bar-value { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:500; color:var(--accent); }
.stat-bar-track { height:4px; background:var(--paper-dark); border-radius:2px; overflow:hidden; }
.stat-bar-fill { height:100%; background:var(--ink); border-radius:2px; transition:width 1s cubic-bezier(.4,0,.2,1); width:0; }
.stat-bar-fill.gold { background:var(--gold); }
.stat-bar-fill.accent { background:var(--accent); }
.stat-bar-fill.green { background:var(--green); }
.mini-table { width:100%; border-collapse:collapse; font-size:13px; }
.mini-table th { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:0 0 10px; text-align:left; border-bottom:1px solid var(--paper-dark); font-weight:500; }
.mini-table td { padding:10px 0; border-bottom:1px solid var(--paper-dark); color:var(--ink-light); line-height:1.4; }
.mini-table td:last-child { text-align:right; font-family:'IBM Plex Mono',monospace; color:var(--ink); font-weight:500; }
.mini-table tr:last-child td { border-bottom:none; }

/* DASHBOARD / DARK SECTIONS */
.dark-section { background:var(--ink); color:var(--paper); padding:60px 0; margin-top:0; }
.dark-section .container { }
.dash-title { font-family:'Playfair Display',serif; font-size:32px; font-weight:700; color:var(--paper); margin-bottom:8px; }
.dash-subtitle { font-size:14px; color:rgba(245,240,232,.5); margin-bottom:40px; font-family:'IBM Plex Mono',monospace; letter-spacing:.05em; }

/* TABS */
.tabs { display:flex; gap:0; margin-bottom:32px; border-bottom:1px solid rgba(245,240,232,.15); }
.tab-btn { background:none; border:none; color:rgba(245,240,232,.45); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:12px 20px 10px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .2s; font-weight:500; }
.tab-btn:hover { color:rgba(245,240,232,.7); }
.tab-btn.active { color:var(--paper); border-bottom-color:var(--gold); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* DATA TABLE */
.data-table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table thead tr { border-bottom:1px solid rgba(245,240,232,.2); }
.data-table th { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:rgba(245,240,232,.4); padding:0 16px 12px 0; text-align:left; font-weight:500; }
.data-table td { padding:14px 16px 14px 0; border-bottom:1px solid rgba(245,240,232,.08); color:rgba(245,240,232,.75); vertical-align:top; line-height:1.5; font-size:13px; }
.data-table tr:last-child td { border-bottom:none; }
.data-table td.country { font-weight:600; color:var(--paper); font-size:13px; }
.data-table td.num { font-family:'IBM Plex Mono',monospace; color:var(--gold); font-weight:500; }
.data-table td.hl { color:var(--paper); font-weight:500; }
.badge { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:3px 7px; border-radius:2px; font-weight:500; margin-left:6px; }
.badge-new { background:var(--accent); color:white; }
.badge-hybrid { background:var(--gold); color:var(--ink); }
.badge-passive { background:rgba(245,240,232,.15); color:rgba(245,240,232,.7); }
.badge-no { background:rgba(200,57,43,.2); color:#e8544a; }
.badge-yes { background:rgba(42,122,74,.3); color:#5dba7d; }

/* CHART BARS */
.chart-wrap { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; align-items:end; height:200px; padding:0 0 20px; border-bottom:1px solid rgba(245,240,232,.2); margin-bottom:16px; }
.bar-group { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:8px; }
.bar-label { font-family:'IBM Plex Mono',monospace; font-size:10px; color:rgba(245,240,232,.4); text-transform:uppercase; letter-spacing:.05em; order:3; }
.bar-val { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold); font-weight:500; order:1; }
.bar { width:100%; background:rgba(245,240,232,.15); border-radius:2px 2px 0 0; order:2; position:relative; overflow:hidden; }
.bar::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,var(--accent),var(--gold)); transform-origin:bottom; animation:growBar 1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes growBar { from{transform:scaleY(0)} to{transform:scaleY(1)} }

/* TREND GRID */
.trend-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(245,240,232,.1); margin-top:32px; }
.trend-cell { background:var(--ink); padding:24px; }
.trend-country { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:rgba(245,240,232,.4); margin-bottom:8px; }
.trend-kpi { font-family:'Playfair Display',serif; font-size:36px; font-weight:700; color:var(--paper); line-height:1; margin-bottom:4px; }
.trend-kpi span { font-size:16px; color:var(--gold); }
.trend-label { font-size:12px; color:rgba(245,240,232,.5); margin-bottom:16px; }
.trend-bar-mini { height:3px; background:rgba(245,240,232,.1); border-radius:1px; overflow:hidden; }
.trend-bar-mini-fill { height:100%; border-radius:1px; background:linear-gradient(to right,var(--accent),var(--gold)); }

/* MEDIA MIX CHART */
.media-mix { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:32px; }
.mix-item { text-align:center; padding:20px 12px; background:rgba(245,240,232,.05); border-radius:2px; }
.mix-pct { font-family:'Playfair Display',serif; font-size:32px; font-weight:700; color:var(--gold); }
.mix-label { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,240,232,.5); margin-top:6px; }
.mix-val { font-size:12px; color:rgba(245,240,232,.35); margin-top:4px; font-family:'IBM Plex Mono',monospace; }

/* EASI GRID */
.easi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(245,240,232,.1); margin-top:32px; }
.easi-cell { background:var(--ink); padding:24px; }
.easi-medium { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; font-weight:500; }
.easi-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(245,240,232,.08); font-size:12px; }
.easi-row:last-child { border-bottom:none; }
.easi-country { color:rgba(245,240,232,.7); }
.easi-name { color:rgba(245,240,232,.45); font-family:'IBM Plex Mono',monospace; font-size:11px; }

/* INSIGHT BOX */
.insight-box { background:rgba(196,146,42,.1); border-left:3px solid var(--gold); padding:20px 24px; margin:32px 0; }
.insight-label { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; font-weight:500; }
.insight-text { font-size:14px; color:rgba(245,240,232,.8); line-height:1.65; }

/* LIGHT TABLE SECTION */
.light-section { padding:60px 0; }
.light-table { width:100%; border-collapse:collapse; font-size:14px; }
.light-table th { background:var(--ink); color:white; padding:14px 16px; text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.15em; text-transform:uppercase; font-weight:500; }
.light-table td { padding:14px 16px; border-bottom:1px solid var(--paper-dark); color:var(--ink-light); vertical-align:top; line-height:1.5; font-size:13px; }
.light-table tr:nth-child(even) td { background:rgba(245,240,232,.5); }
.light-table td.bold { font-weight:600; color:var(--ink); }
.light-table td.accent { color:var(--accent); font-family:'IBM Plex Mono',monospace; font-weight:500; }

/* FOOTER */
footer { background:var(--ink); color:rgba(245,240,232,.4); padding:40px 48px; font-size:12px; display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; letter-spacing:.05em; margin-top:60px; border-top:3px solid var(--accent); }
footer strong { color:var(--paper); font-family:'Playfair Display',serif; font-size:18px; font-weight:700; letter-spacing:0; }
.footer-links { display:flex; gap:24px; }
.footer-links a { color:rgba(245,240,232,.4); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--paper); }
.source-note { font-size:12px; color:rgba(245,240,232,.35); font-family:'IBM Plex Mono',monospace; margin-top:16px; letter-spacing:.03em; }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.fade-up { opacity:0; animation:fadeUp .6s ease forwards; }
.fade-up:nth-child(1){animation-delay:.1s} .fade-up:nth-child(2){animation-delay:.2s} .fade-up:nth-child(3){animation-delay:.3s} .fade-up:nth-child(4){animation-delay:.4s}