:root{
--color-red-50:#fff0f0;--color-red-100:#ffe1e1;--color-red-300:#ff8c8c;--color-red-600:#ff3131;--color-red-700:#e01f1f;--color-red-800:#b91515;
--color-blue-400:#73c7e3;--color-blue-500:#4db2ec;
--color-ink-900:#0b0e23;--color-ink-800:#14183c;--color-ink-600:#444444;--color-ink-500:#666666;--color-ink-400:#777777;--color-ink-300:#969696;--color-ink-200:#dddddd;
--color-paper-0:#ffffff;--color-paper-50:#fafafa;--color-paper-100:#fcfcfc;--color-paper-200:#f2f2f2;
--color-border:#ededed;--color-border-strong:#e1e1e1;
--brand-primary:var(--color-red-600);--brand-primary-hover:var(--color-red-700);--brand-primary-tint:var(--color-red-50);
--accent-link:var(--color-blue-500);--accent-link-hover:var(--color-ink-800);
--text-primary:var(--color-ink-900);--text-secondary:var(--color-ink-500);--text-muted:var(--color-ink-300);--text-on-brand:var(--color-paper-0);
--surface-page:var(--color-paper-0);--surface-sunken:var(--color-paper-200);--surface-card:var(--color-paper-0);--surface-inverse:var(--color-ink-800);
--border-default:var(--color-border);--border-input:var(--color-border-strong);
--font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--font-serif:'Zilla Slab',Georgia,serif;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
--radius-none:0px;--radius-sm:3px;--radius-md:6px;--radius-pill:999px;
}
html[data-theme="dark"]{
--surface-page:#0b0e23;--surface-card:#131639;--surface-sunken:#181b42;
--text-primary:#f4f5fb;--text-secondary:#b9bcd6;--text-muted:#7f83a8;
--border-default:#262b52;--border-input:#333a66;--color-ink-200:#3a4172;
}
.site-logo-wrap{ display:flex; align-items:center; }
.site-logo{ height:44px; width:auto; display:block; }
.site-logo--dark{ display:none; }
html[data-theme="dark"] .site-logo--light{ display:none; }
html[data-theme="dark"] .site-logo--dark{ display:block; }
* { box-sizing: border-box; }
body{margin:0;background:var(--surface-page);color:var(--text-primary);}
a{color:var(--accent-link);}
a:hover{color:var(--accent-link-hover);}
::selection{background:var(--brand-primary-tint);color:var(--brand-primary);}

.img-placeholder{
  background:var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--border-input);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.3px;
  overflow:hidden; padding:8px;
}

.btn{ font-family:var(--font-body); font-weight:600; border:none; border-radius:var(--radius-none);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background-color .2s ease-in-out, color .2s ease-in-out; }
.btn--md{ padding:9px 18px; font-size:13px; line-height:20px; }
.btn--lg{ padding:13px 26px; font-size:15px; line-height:22px; }
.btn--outline{ background:transparent; color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--border-input); }
.btn--outline:hover, .btn--outline:focus-visible{ background:var(--surface-sunken); color:var(--text-primary); }
.btn--dark{ background:var(--color-ink-800); color:var(--text-on-brand); }
.btn--dark:hover, .btn--dark:focus-visible{ background:var(--brand-primary); color:var(--text-on-brand); }
.btn--primary{ background:var(--brand-primary); color:var(--text-on-brand); }
.btn--primary:hover, .btn--primary:focus-visible{ background:var(--brand-primary-hover); color:var(--text-on-brand); }

.cta-card{ height:100%; box-sizing:border-box; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:30px 24px 34px; }
.cta-card__title{ font-weight:600; margin-bottom:10px; color:#fff; font-family:var(--font-body); font-size:16px; }
.cta-card__desc{ font-size:13px; line-height:19px; color:#9e9e9e; margin-bottom:16px; }

.newsletter__row{ display:flex; }
.newsletter__input{ flex:1; min-height:42px; padding:0 12px; border:1px solid var(--border-input); background:#333; color:#fff; font-size:12px; font-family:var(--font-body); }
.newsletter__submit{ min-width:100px; min-height:42px; border:none; color:#fff; background:var(--accent-link); font-size:12px; font-weight:600; cursor:pointer; transition:background-color .2s ease-in-out; font-family:var(--font-body); }
.newsletter__submit:hover{ background:var(--color-ink-800); }
.newsletter__consent{ display:flex; gap:8px; align-items:center; margin-top:10px; cursor:pointer; font-size:11px; color:#9e9e9e; }

.tag{ font-family:var(--font-body); font-size:11px; color:var(--text-secondary); border:1px solid var(--border-default); padding:4px 10px; display:inline-block; text-decoration:none; border-radius:5px; }
.tag:hover{ background:var(--surface-sunken); color:var(--text-primary); border-color:var(--border-input); text-decoration:none; }

.article-body p{ margin:0 0 20px; }
.article-body h2{ font-family:var(--font-display); font-weight:400; font-size:24px; line-height:32px; margin:36px 0 16px; color:var(--text-primary); }
.article-body h3{ font-family:var(--font-display); font-weight:400; font-size:20px; line-height:28px; margin:28px 0 14px; color:var(--text-primary); }
.article-body blockquote{ border-left:3px solid var(--brand-primary); margin:32px 0; padding:4px 0 4px 24px; font-family:var(--font-serif); font-size:22px; line-height:32px; color:var(--text-primary); font-style:italic; }
.article-body img{ max-width:100%; height:auto; }
.article-body a{ color:var(--accent-link); }
.article-body ul, .article-body ol{ margin:0 0 20px; padding-left:24px; color:var(--text-secondary); font-size:16px; line-height:28px; }

.audio-player{ background:var(--color-ink-900); padding:16px 20px; margin-bottom:32px; border-radius:4px; }
.audio-player__head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.audio-player__dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-primary); display:inline-block; flex-shrink:0; }
.audio-player__label{ font-family:var(--font-body); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#bbb; }
.audio-player__controls{ display:flex; align-items:center; gap:14px; }
.audio-player__toggle{ width:40px; height:40px; border-radius:50%; border:none; background:var(--brand-primary); color:#fff; font-size:13px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background-color .2s ease-in-out; padding:0 0 0 2px; }
.audio-player__toggle:hover, .audio-player__toggle:focus-visible{ background:var(--brand-primary-hover); }
.audio-player__track{ flex:1; height:4px; background:#3a3a3a; position:relative; cursor:pointer; border-radius:2px; }
.audio-player__track:hover{ height:6px; }
.audio-player__progress{ position:absolute; left:0; top:0; bottom:0; background:var(--brand-primary); width:0%; border-radius:2px; pointer-events:none; }
.audio-player__time{ font-family:var(--font-body); font-size:11px; color:#999; white-space:nowrap; min-width:84px; text-align:right; }

.share-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--border-input); color:var(--text-primary); font-family:var(--font-body); font-size:14px; font-weight:700; text-decoration:none; transition:background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out; }
.share-btn:hover, .share-btn:focus-visible{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }

.vote-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--border-input); background:var(--surface-page); color:var(--text-primary); font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer; border-radius:999px; transition:background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out; }
.vote-btn:hover:not(:disabled){ background:var(--surface-sunken); }
.vote-btn.is-active{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }

.tooltip{ position:relative; cursor:pointer; display:inline-block; }
.tooltiptext{ display:none; background-color:rgba(51,51,51,.9); color:#fff; padding:20px; border-radius:8px; z-index:1000; max-width:500px; min-width:300px; width:auto; overflow-y:auto; transition:opacity .3s ease; }
@media (min-width:769px){
  .tooltiptext{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 0 10px rgba(0,0,0,.5); }
  .tooltip:hover .tooltiptext{ display:block; }
}
@media (max-width:768px){
  .tooltiptext{ position:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; width:95vw !important; height:90vh !important; padding:20px !important; box-sizing:border-box; border-radius:8px !important; overflow-y:auto !important; background-color:rgba(51,51,51,.9) !important; }
  .tooltiptext.show{ display:block !important; }
  .tooltiptext .close-tooltip{ display:block; font-size:28px; text-align:center; cursor:pointer; margin-bottom:10px; color:#fff; }
  .tooltiptext > span:first-of-type{ margin-bottom:12px; display:block; }
}

/* ---- Frontpage layout utilities ---- */
.container{ width:100%; max-width:1280px; margin:0 auto; padding-left:clamp(16px,5vw,40px); padding-right:clamp(16px,5vw,40px); }
.section--hero{ padding-top:clamp(16px,5vw,40px); padding-bottom:clamp(16px,5vw,40px); display:flex; gap:32px; flex-wrap:wrap; }
.section--chips{ padding-top:8px; padding-bottom:40px; }
.section--grid{ padding-top:0; padding-bottom:56px; }
.hero-featured{ flex:1 1 620px; min-width:320px; }
.hero-side{ flex:1 1 340px; min-width:300px; display:flex; flex-direction:column; gap:24px; }
.hero-img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; margin-bottom:20px; }
.article-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:32px 28px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.category-chip{ display:inline-block; padding:8px 16px; border:1px solid var(--border-input); background:var(--surface-page); color:var(--text-primary); text-decoration:none; font-family:var(--font-body); font-size:13px; font-weight:600; transition:background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out; }
.category-chip:hover, .category-chip:focus-visible{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }
.most-read{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:28px; }
.most-read__item{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; min-width:0; }
.most-read__num{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--brand-primary); line-height:1; }
.most-read__thumb{ display:block; aspect-ratio:16/9; width:100%; overflow:hidden; border-radius:var(--radius-sm); }
.most-read__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.most-read__title{ font-size:15px; line-height:22px; color:var(--text-primary); font-weight:600; }
.img-placeholder--sm{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:var(--surface-sunken); box-shadow:inset 0 0 0 1px var(--border-input); color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.3px; }

/* ---- Editorial: section heads & ticker ---- */
.block-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; border-bottom:2px solid var(--border-default); padding-bottom:10px; }
.block-head__title{ font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.2; text-transform:uppercase; letter-spacing:.5px; color:var(--text-primary); margin:0; position:relative; padding-left:14px; }
.block-head__title::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brand-primary); }
.block-head__link{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--accent-link); text-decoration:none; white-space:nowrap; }
.block-head__link:hover{ color:var(--accent-link-hover); }
.block-head--center{ justify-content:center; }
.ticker{ background:var(--color-ink-900); color:#cfd2ea; border-bottom:1px solid var(--border-input); }
.ticker__inner{ display:flex; align-items:center; gap:16px; padding-top:8px; padding-bottom:8px; }
.ticker__label{ flex-shrink:0; display:inline-flex; align-items:center; background:var(--brand-primary); color:#fff; font-family:var(--font-display); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:6px 12px; }
.ticker__display-area{ flex:1; min-width:0; position:relative; height:26px; overflow:hidden; }
.ticker__post{ position:absolute; top:0; left:0; right:0; height:26px; line-height:26px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#d7daf0; font-size:14px; text-decoration:none; opacity:0; transform:translateX(12px); transition:opacity .45s ease, transform .45s ease; }
.ticker__post:hover{ color:#fff; }
.ticker__post.is-active{ opacity:1; transform:translateX(0); }
.ticker__nav{ display:flex; gap:4px; margin-left:auto; flex-shrink:0; }
.ticker__nav-btn{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-input); background:transparent; color:#cfd2ea; cursor:pointer; font-size:15px; line-height:1; }
.ticker__nav-btn:hover, .ticker__nav-btn:focus-visible{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }
@media (max-width:767px){
  .ticker__nav{ display:none; }
}

/* ---- Header / responsive nav ---- */
.header-inner{ display:flex; align-items:center; min-height:60px; gap:14px; flex-wrap:wrap; row-gap:8px; padding-top:12px; padding-bottom:12px; }
.nav-toggle{ display:none; width:40px; height:40px; border:1px solid var(--border-input); background:var(--surface-page); color:var(--text-primary); cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; }
.site-nav{ display:flex; gap:4px; margin-left:6px; flex-wrap:wrap; }
.nav-link{ display:inline-block; padding:0 9px; line-height:48px; font-size:12px; font-weight:700; text-transform:uppercase; color:var(--text-primary); text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap; }
.nav-link:hover{ color:var(--text-primary); }
.nav-link.is-active{ border-bottom-color:var(--brand-primary); }
@media (max-width:1199px){
  .nav-toggle{ display:inline-flex; }
  .site-nav{ display:none; width:100%; flex-direction:column; margin-left:0; gap:0; }
  .header-inner.is-open .site-nav{ display:flex; }
  .nav-link{ display:block; white-space:normal; line-height:1.4; padding:12px 0; border-bottom:1px solid var(--border-default); font-size:14px; }
  .nav-link.is-active{ border-bottom-color:var(--brand-primary); }
}