/* ==========================================================================
   assets/css/public.css — Pinpost public site
   Mobile-first. Desktop layered via min-width media queries.
   Magazine-grade proportions. Absolute container enforcement at end.
   Article body text colors forced light for pasted content.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:#0a0f1c;
  --panel:#111a2e;
  --panel-2:#0e1729;
  --line:#1e293b;
  --line-2:#243354;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --accent:#38bdf8;
  --accent-2:#6366f1;
  --radius:14px;
  --radius-sm:10px;
  --maxw:1280px;
  --container-pad:16px;
}
@media (min-width: 720px){
  :root{ --container-pad:22px; }
}
@media (min-width: 1400px){
  :root{ --maxw:1340px; }
}

/* ---------- Base reset ---------- */
*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; transition:.15s; }
a:hover{ color:var(--accent); }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.25; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
button{ font-family:inherit; }

/* ---------- Container ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(10,15,28,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.hdr-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  min-height:56px;
}

.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:16px;
  letter-spacing:-.4px;
  color:#fff;
  flex-shrink:0;
  min-width:0;
  white-space:nowrap;
}
.logo-mark{
  width:30px;
  height:30px;
  border-radius:8px;
  background:linear-gradient(135deg,#38bdf8,#6366f1);
  display:grid;
  place-items:center;
  font-size:15px;
  box-shadow:0 6px 20px rgba(56,189,248,.35);
  flex-shrink:0;
}

.hdr-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.hdr-search{
  display:none;
  align-items:center;
  gap:8px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:99px;
  padding:7px 14px;
  min-width:200px;
  max-width:320px;
}
.hdr-search input{
  background:none;
  border:none;
  color:#fff;
  outline:none;
  font-size:13.5px;
  width:100%;
  font-family:inherit;
}
.hdr-search svg{ opacity:.6; flex-shrink:0; }

.hdr-search-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  flex-shrink:0;
}
.hdr-search-icon:hover{
  background:var(--panel-2);
  border-color:var(--line-2);
}

.hdr-cta{
  background:linear-gradient(90deg,#38bdf8,#6366f1);
  color:#001018;
  padding:8px 12px;
  border-radius:99px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
.hdr-cta:hover{ filter:brightness(1.1); color:#001018; }

@media (max-width: 380px){
  .logo .logo-text{ display:none; }
}

@media (min-width: 720px){
  .hdr-top{ padding:14px 0; gap:20px; min-height:auto; }
  .logo{ font-size:22px; gap:10px; }
  .logo-mark{ width:38px; height:38px; border-radius:12px; font-size:20px; }
  .hdr-actions{ gap:12px; }
  .hdr-search{ display:flex; min-width:220px; }
  .hdr-search-icon{ display:none; }
  .hdr-cta{ padding:9px 16px; font-size:13px; }
}

/* ----- Category nav ----- */
.cat-nav{
  border-top:1px solid var(--line);
  overflow:hidden;
}
.cat-nav .container{
  display:block;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cat-nav .container::-webkit-scrollbar{ display:none; }

.cat-nav ul{
  display:flex;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
  min-width:max-content;
}
.cat-nav a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:10px 12px;
  font-size:12.5px;
  font-weight:500;
  color:var(--muted);
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.cat-nav a:hover{ color:#fff; }
.cat-nav a.active{ color:#fff; border-bottom-color:var(--accent); }

@media (min-width: 720px){
  .cat-nav a{ padding:11px 14px; font-size:13px; gap:6px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding:20px 0 12px; }

.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width: 900px){
  .hero-grid{
    grid-template-columns: 1.9fr 1fr;
    gap: 18px;
    align-items: stretch;
  }
  .hero{ padding:24px 0 16px; }
}

.hero-main{
  position:relative;
  display:block;
  border-radius:16px;
  overflow:hidden;
  background:var(--panel);
  aspect-ratio: 16/10;
  max-height: 440px;
}
@media (min-width: 900px){
  .hero-main{ aspect-ratio: 16/9; max-height: 420px; }
}
@media (min-width: 1400px){
  .hero-main{ max-height: 460px; }
}

.hero-main img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s ease;
}
.hero-main:hover img{ transform:scale(1.03); }

.hero-main-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:20px 24px;
  background:linear-gradient(to top,
    rgba(2,6,23,.96) 0%,
    rgba(2,6,23,.75) 45%,
    rgba(2,6,23,.20) 80%,
    transparent 100%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  pointer-events:none;
}
.hero-main-overlay > *{ pointer-events:auto; }

.hero-main-overlay .cat-badge{
  align-self:flex-start;
  font-size:10px;
  padding:3px 9px;
  margin:0 0 4px;
}

.hero-main-overlay h1,
.hero-main-overlay h2{
  color:#fff;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.4px;
  line-height:1.22;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.hero-main-overlay p{
  color:#cbd5e1;
  font-size:13.5px;
  line-height:1.5;
  margin:2px 0 0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.hero-main-overlay .meta{
  font-size:11.5px;
  color:#94a3b8;
  margin-top:8px;
}

@media (min-width: 900px){
  .hero-main-overlay{ padding:24px 28px; gap:10px; }
  .hero-main-overlay h1,
  .hero-main-overlay h2{
    font-size:26px;
    letter-spacing:-.6px;
    -webkit-line-clamp:2;
  }
  .hero-main-overlay p{ font-size:14.5px; -webkit-line-clamp:2; }
}

/* ---------- Side hero — compact horizontal cards ---------- */
.hero-side{
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media (min-width: 900px){
  .hero-side{ gap:12px; }
}

.hero-side .card{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  transition:.2s;
  align-items:stretch;
}

.hero-side .card:hover{
  border-color:var(--line-2);
  background:var(--panel-2);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}

.hero-side .card img{
  width:130px;
  height:100%;
  min-height:100px;
  max-height:120px;
  object-fit:cover;
  display:block;
}

.hero-side .card-body{
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  gap:6px;
}

.hero-side .card .cat-badge{
  font-size:10px;
  padding:2px 7px;
  margin:0;
  align-self:flex-start;
}

.hero-side .card h3{
  font-size:14px;
  margin:0;
  font-weight:700;
  line-height:1.3;
  color:#fff;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.hero-side .card .meta{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

@media (min-width: 900px){
  .hero-side .card{ grid-template-columns:150px 1fr; }
  .hero-side .card img{ width:150px; max-height:130px; }
  .hero-side .card h3{ font-size:14.5px; }
  .hero-side .card-body{ padding:14px 16px; }
}

/* ==========================================================================
   CARDS (generic)
   ========================================================================== */
.cat-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--accent);
  text-transform:uppercase;
  padding:3px 8px;
  background:rgba(56,189,248,.12);
  border-radius:6px;
  margin-bottom:8px;
}
@media (min-width: 720px){ .cat-badge{ font-size:11px; } }

.meta{
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.meta .dot{ opacity:.5; }

.section{ padding:22px 0; }
@media (min-width: 900px){ .section{ padding:28px 0; } }

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
@media (min-width: 900px){
  .section-head{ margin-bottom:18px; }
}

.section-head h2{
  font-size:17px;
  margin:0;
  font-weight:800;
  letter-spacing:-.3px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  min-width:0;
}
.section-head h2 .icon{
  width:28px;
  height:28px;
  border-radius:8px;
  background:linear-gradient(135deg,rgba(56,189,248,.25),rgba(99,102,241,.25));
  display:grid;
  place-items:center;
  font-size:15px;
  flex-shrink:0;
}
.section-head .more{
  font-size:12.5px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.section-head .more:hover{ color:var(--accent); }

@media (min-width: 720px){
  .section-head h2{ font-size:20px; }
  .section-head h2 .icon{ width:32px; height:32px; border-radius:9px; font-size:16px; }
}

.grid-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width: 560px){
  .grid-cards{ grid-template-columns:repeat(2,1fr); gap:18px; }
}
@media (min-width: 900px){
  .grid-cards{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
}
@media (min-width: 1200px){
  .grid-cards{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
}

.card-post{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:.2s;
  display:flex;
  flex-direction:column;
}
.card-post:hover{
  transform:translateY(-3px);
  border-color:var(--line-2);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.card-post-img{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--panel-2);
  display:block;
}
.card-post-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.6s;
}
.card-post:hover .card-post-img img{ transform:scale(1.06); }

.card-post-body{
  padding:14px;
  flex:1;
  display:flex;
  flex-direction:column;
}
@media (min-width: 720px){ .card-post-body{ padding:16px; } }

.card-post-body h3{
  font-size:15.5px;
  font-weight:700;
  line-height:1.35;
  margin:6px 0 8px;
  color:#fff;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-post-body h3 a{ color:#fff; }
.card-post-body p{
  font-size:13.5px;
  color:var(--muted);
  margin:0 0 12px;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-post-body .meta{ margin-top:auto; }

/* ==========================================================================
   LAYOUT WITH SIDEBAR
   ========================================================================== */
.with-sidebar{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
  min-width:0;
}
@media (min-width: 1000px){
  .with-sidebar{ grid-template-columns:minmax(0,1fr) 340px; gap:28px; }
}

.sidebar{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
@media (min-width: 1000px){
  .sidebar{ position:sticky; top:96px; gap:18px; }
}

.widget{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  min-width:0;
  overflow-wrap:break-word;
}

.widget h4{
  font-size:11px;
  font-weight:800;
  letter-spacing:.8px;
  color:var(--muted);
  text-transform:uppercase;
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.widget li:last-child{ border-bottom:none; padding-bottom:0; }
.widget li a{
  display:flex;
  gap:10px;
  font-size:13px;
  line-height:1.45;
  color:var(--text);
}
.widget li a .rank{
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:6px;
  background:rgba(56,189,248,.15);
  color:var(--accent);
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800;
}
.widget li a:hover{ color:var(--accent); }

.newsletter{
  background:linear-gradient(135deg,#1e3a8a 0%,#0f172a 100%);
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
  border:1px solid rgba(56,189,248,.25);
  min-width:0;
}
.newsletter h4{ color:#fff; margin:0 0 6px; font-size:16px; }
.newsletter p{ font-size:13px; color:#cbd5e1; margin:0 0 14px; }
.newsletter input{
  width:100%;
  padding:10px 14px;
  border-radius:9px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  outline:none;
  font-size:14px;
  margin-bottom:10px;
  font-family:inherit;
}
.newsletter input::placeholder{ color:#94a3b8; }
.newsletter button{
  width:100%;
  padding:10px;
  border-radius:9px;
  border:none;
  background:#fff;
  color:#001018;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
}
.newsletter button:hover{ background:#e2e8f0; }

/* ==========================================================================
   ADS
   ========================================================================== */
.ad-zone{
  background:var(--panel-2);
  border:1px dashed var(--line-2);
  border-radius:var(--radius);
  padding:12px;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100px;
  justify-content:center;
  overflow:hidden;
  min-width:0;
}
.ad-zone .ad-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:8px;
  align-self:flex-start;
}
.ad-zone .adsbygoogle{ display:block; width:100%; }
.ad-zone-square{ min-height:250px; }
.ad-zone-feed{
  min-height:150px;
  background:transparent;
  border:none;
  padding:0;
  margin:22px 0;
}
.ad-zone-multiplex{ min-height:250px; margin:24px 0; }
.sidebar .ad-zone{ margin:0; }

@media (min-width: 720px){
  .ad-zone{ padding:14px; }
  .ad-zone-square{ min-height:280px; }
  .ad-zone-feed{ min-height:180px; }
  .ad-zone-multiplex{ min-height:280px; }
}

.ad-zone-square,
.ad-zone-multiplex{ align-items:center; }
.ad-zone-square .adsbygoogle,
.ad-zone-multiplex .adsbygoogle{
  max-width:100%;
  margin:0 auto;
}
.ad-zone-feed .adsbygoogle{ min-height:0; }

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article-head{ padding:20px 0 16px; }
@media (min-width: 720px){ .article-head{ padding:28px 0 20px; } }

.article-head h1{
  font-size:clamp(22px, 3.2vw, 36px);
  font-weight:800;
  letter-spacing:-.6px;
  margin:0 0 12px;
  line-height:1.18;
  color:#fff;
  max-width:900px;
  overflow-wrap:break-word;
  word-wrap:break-word;
}
.article-head .excerpt{
  font-size:15px;
  color:#cbd5e1;
  margin:0 0 16px;
  max-width:800px;
  line-height:1.55;
  overflow-wrap:break-word;
}
@media (min-width: 720px){
  .article-head .excerpt{ font-size:17px; }
}

.article-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding:12px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.author-chip{ display:flex; align-items:center; gap:10px; min-width:0; }
.author-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,#38bdf8,#6366f1);
  display:grid;
  place-items:center;
  color:#001018;
  font-weight:800;
  font-size:14px;
  flex-shrink:0;
}
.author-chip .who{ min-width:0; }
.author-chip .who strong{ display:block; font-size:13px; color:#fff; }
.author-chip .who small{ font-size:11.5px; color:var(--muted); }

.article-stat{
  font-size:12.5px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}

.share-group{ display:flex; gap:6px; margin-left:auto; }
.share-group a{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:13px;
  color:var(--text);
}
.share-group a:hover{
  background:var(--accent);
  color:#001018;
  border-color:var(--accent);
}

@media (max-width: 560px){
  .share-group{ margin-left:0; width:100%; }
}

.article-hero{
  margin:20px 0;
  border-radius:14px;
  overflow:hidden;
  background:var(--panel);
  aspect-ratio:16/9;
  max-height:420px;
}
.article-hero img{ width:100%; height:100%; object-fit:cover; }
.article-hero figcaption{
  padding:10px 14px;
  font-size:12px;
  color:var(--muted);
  background:var(--panel-2);
  text-align:center;
  font-style:italic;
}
@media (min-width: 720px){
  .article-hero{
    border-radius:16px;
    margin:24px 0;
    max-height:440px;
  }
}

/* ---------- Article body ---------- */
.article-body{
  font-size:16px;
  line-height:1.75;
  color:#cbd5e1;
  max-width:760px;
  overflow-wrap:break-word;
  word-wrap:break-word;
  word-break:break-word;
  min-width:0;
}
@media (min-width: 720px){
  .article-body{ font-size:17.5px; line-height:1.8; }
}

.article-body > *{ max-width:100%; }

.article-body h2{
  font-size:22px;
  font-weight:800;
  color:#fff;
  margin:1.8em 0 .6em;
  letter-spacing:-.3px;
  padding-bottom:.3em;
  border-bottom:1px solid var(--line);
}
.article-body h3{
  font-size:18px;
  font-weight:700;
  color:#fff;
  margin:1.6em 0 .5em;
}
.article-body h4{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin:1.4em 0 .4em;
}
@media (min-width: 720px){
  .article-body h2{ font-size:26px; }
  .article-body h3{ font-size:20px; }
  .article-body h4{ font-size:17px; }
}

.article-body p{ margin:0 0 1.2em; }
.article-body a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:rgba(56,189,248,.4);
  text-underline-offset:3px;
  word-break:break-word;
}
.article-body strong{ color:#fff; }
.article-body ul,
.article-body ol{ padding-left:1.4em; margin:0 0 1.2em; max-width:100%; }
.article-body li{ margin:.4em 0; }
.article-body blockquote{
  border-left:4px solid var(--accent);
  padding:14px 18px;
  margin:1.6em 0;
  background:rgba(56,189,248,.06);
  border-radius:0 10px 10px 0;
  font-style:italic;
  max-width:100%;
}
.article-body img,
.article-body figure,
.article-body figure img,
.article-body picture{
  max-width:100% !important;
  height:auto !important;
  display:block;
  border-radius:12px;
  margin:1.4em 0;
}
.article-body figure{ margin:1.6em 0; }
.article-body figcaption{
  font-size:13px;
  color:var(--muted);
  text-align:center;
  margin-top:8px;
  font-style:italic;
}
.article-body pre{
  background:#0f172a;
  border:1px solid var(--line);
  padding:14px 18px;
  border-radius:12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  font-family:Consolas,monospace;
  font-size:13px;
  max-width:100%;
  white-space:pre;
  word-wrap:normal;
}
.article-body code{
  background:rgba(56,189,248,.1);
  color:var(--accent);
  padding:2px 6px;
  border-radius:4px;
  font-size:.9em;
  word-break:break-word;
}
.article-body pre code{ background:none; color:inherit; padding:0; }
.article-body hr{ border:none; border-top:2px solid var(--line); margin:2.4em 0; }

.article-body table{
  width:100% !important;
  max-width:100%;
  border-collapse:collapse;
  margin:1.4em 0;
  font-size:14px;
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.article-body table thead,
.article-body table tbody,
.article-body table tr{
  display:table;
  width:100%;
  min-width:480px;
}
.article-body th,
.article-body td{
  border:1px solid var(--line);
  padding:10px 12px;
  text-align:left;
  white-space:normal;
  word-break:break-word;
}
.article-body th{ background:var(--panel-2); font-weight:600; color:#fff; }
@media (min-width: 720px){
  .article-body table{ display:table; font-size:15px; }
  .article-body th,.article-body td{ padding:11px 14px; }
}
@media (max-width: 719px){
  .article-body table th,
  .article-body table td{ padding:8px 10px; font-size:13px; }
}

.article-body iframe,
.article-body video,
.article-body embed,
.article-body object{
  max-width:100%;
  width:100%;
}

/* ==========================================================================
   ARTICLE BODY — FORCE LIGHT TEXT EVERYWHERE
   Fixes: pasted content with dark inline colors making text invisible
   This block overrides any color: #000 / black / rgb(0,0,0) saved in the DB
   ========================================================================== */
.article-body,
.article-body *{
  color: #cbd5e1;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6,
.article-body strong,
.article-body b{
  color: #ffffff !important;
}

.article-body a,
.article-body a *{
  color: #38bdf8 !important;
}

.article-body blockquote,
.article-body blockquote *{
  color: #cbd5e1 !important;
}

.article-body li{
  color: #cbd5e1 !important;
}

.article-body code{
  color: #38bdf8 !important;
  background: rgba(56,189,248,.1);
}

.article-body pre,
.article-body pre *{
  color: #e2e8f0 !important;
  background: #0f172a;
}

.article-body th{
  color: #fff !important;
  background: var(--panel-2);
}
.article-body td{
  color: #cbd5e1 !important;
}

.article-body figcaption{
  color: #94a3b8 !important;
}

/* Kill inline white backgrounds from pasted content (Google Docs, Word) */
.article-body [style*="background-color:#fff"],
.article-body [style*="background:#fff"],
.article-body [style*="background-color: white"],
.article-body [style*="background: white"],
.article-body [style*="background-color:#ffffff"],
.article-body [style*="background-color: #ffffff"],
.article-body [style*="background-color:rgb(255,255,255)"],
.article-body [style*="background-color: rgb(255, 255, 255)"]{
  background: transparent !important;
  color: #cbd5e1 !important;
}

/* Kill inline dark text from pasted content */
.article-body [style*="color:#000"],
.article-body [style*="color: #000"],
.article-body [style*="color:black"],
.article-body [style*="color: black"],
.article-body [style*="color:#000000"],
.article-body [style*="color: #000000"],
.article-body [style*="color:rgb(0,0,0)"],
.article-body [style*="color: rgb(0, 0, 0)"],
.article-body [style*="color:#333"],
.article-body [style*="color: #333"],
.article-body [style*="color:#222"],
.article-body [style*="color: #222"],
.article-body [style*="color:#111"],
.article-body [style*="color: #111"]{
  color: #cbd5e1 !important;
}

/* Nested inline-styled spans inside headings keep them light */
.article-body h1 span,
.article-body h2 span,
.article-body h3 span,
.article-body h4 span,
.article-body h5 span,
.article-body h6 span{
  color: #ffffff !important;
}

/* Nested inline-styled spans inside paragraphs */
.article-body p span{
  color: #cbd5e1;
}
.article-body p span[style*="color"]{
  color: #cbd5e1 !important;
}

/* Fix any pasted "highlight" that has yellow/grey backgrounds */
.article-body [style*="background-color:yellow"],
.article-body [style*="background-color: yellow"],
.article-body mark{
  color: #0f172a !important;
  background: #fef08a !important;
}

/* Ensure lists have visible bullets */
.article-body ul{
  list-style: disc;
}
.article-body ol{
  list-style: decimal;
}

/* ==========================================================================
   ARTICLE TAGS
   ========================================================================== */
.article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:26px 0 20px;
}
.article-tags a{
  padding:6px 12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:99px;
  font-size:12.5px;
  color:var(--muted);
}
.article-tags a:hover{ border-color:var(--accent); color:var(--accent); }

.author-box{
  display:flex;
  gap:14px;
  padding:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin:20px 0;
}
.author-box .author-avatar{
  width:56px;
  height:56px;
  font-size:20px;
  flex-shrink:0;
}
.author-box h4{ margin:0 0 6px; font-size:15px; color:#fff; }
.author-box p{ font-size:13px; color:var(--muted); margin:0; }
@media (min-width: 720px){
  .author-box{ padding:22px; gap:16px; }
  .author-box .author-avatar{ width:64px; height:64px; font-size:22px; }
  .author-box p{ font-size:13.5px; }
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  font-size:12.5px;
  color:var(--muted);
  padding:14px 0;
  overflow:hidden;
}
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{
  color:#fff;
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (min-width: 720px){
  .breadcrumb{ font-size:13px; padding:16px 0; }
  .breadcrumb .current{ max-width:400px; }
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  padding:24px 0;
}
.pagination a,
.pagination span{
  min-width:36px;
  height:36px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--panel);
  border:1px solid var(--line);
  font-size:13.5px;
  color:#cbd5e1;
}
.pagination a:hover{ background:var(--panel-2); border-color:var(--line-2); }
.pagination .current{
  background:linear-gradient(90deg,#38bdf8,#6366f1);
  color:#001018;
  border-color:transparent;
  font-weight:700;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  margin-top:40px;
  padding:36px 0 20px;
  background:var(--panel-2);
  border-top:1px solid var(--line);
}
@media (min-width: 720px){
  .site-footer{ margin-top:50px; padding:44px 0 22px; }
}

.ftr-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  margin-bottom:28px;
}
@media (min-width: 560px){
  .ftr-grid{ grid-template-columns:1fr 1fr; gap:28px 32px; }
}
@media (min-width: 900px){
  .ftr-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
}

.ftr-brand p{
  font-size:13.5px;
  color:var(--muted);
  margin:12px 0 0;
  max-width:340px;
}
.ftr-col h5{
  font-size:12px;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin:0 0 14px;
  font-weight:700;
}
.ftr-col ul{ list-style:none; padding:0; margin:0; }
.ftr-col li{ margin-bottom:9px; }
.ftr-col a{ font-size:13.5px; color:var(--muted); }
.ftr-col a:hover{ color:var(--accent); }

.ftr-bottom{
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:12.5px;
  color:var(--muted);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--muted);
}
.empty-state h2{
  font-size:20px;
  color:#fff;
  margin-bottom:8px;
}
@media (min-width: 720px){
  .empty-state{ padding:80px 20px; }
  .empty-state h2{ font-size:22px; }
}

/* ==========================================================================
   H1 LOGO
   ========================================================================== */
h1.logo{
  margin:0;
  padding:0;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.4px;
  line-height:1;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
}
h1.logo a{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
}
h1.logo .logo-mark{
  width:30px;
  height:30px;
  border-radius:8px;
  background:linear-gradient(135deg,#38bdf8,#6366f1);
  display:grid;
  place-items:center;
  font-size:15px;
  box-shadow:0 6px 20px rgba(56,189,248,.35);
  flex-shrink:0;
}
@media (min-width: 720px){
  h1.logo{ font-size:22px; gap:10px; }
  h1.logo .logo-mark{ width:38px; height:38px; border-radius:12px; font-size:20px; }
}
@media (max-width: 380px){
  h1.logo .logo-text{ display:none; }
}

/* ==========================================================================
   SKIP LINK
   ========================================================================== */
.skip-link{
  position:absolute;
  top:-40px;
  left:8px;
  background:var(--accent);
  color:#001018;
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  z-index:999;
  transition:top .2s;
}
.skip-link:focus{ top:8px; color:#001018; }

/* ==========================================================================
   WEB STORIES
   ========================================================================== */
.webstories-section{
  padding:32px 0 20px;
  border-top:1px solid var(--line);
  margin-top:20px;
}
@media (min-width: 720px){
  .webstories-section{ padding:40px 0 20px; }
}

.ws-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  gap:14px;
  flex-wrap:wrap;
}
.ws-title{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.3px; color:#fff; }
.ws-sub{ margin:4px 0 0; font-size:13px; color:var(--muted); }
.ws-more{ font-size:13px; color:var(--accent); white-space:nowrap; }
.ws-more:hover{ text-decoration:underline; }
@media (min-width: 720px){ .ws-title{ font-size:20px; } }

.ws-scroller{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ws-scroller::-webkit-scrollbar{ display:none; }

.ws-card{
  flex:0 0 auto;
  width:160px;
  aspect-ratio:9/16;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  scroll-snap-align:start;
  background:#111a2e;
  border:1px solid #1e293b;
  text-decoration:none;
  transition:.2s;
}
.ws-card:hover{
  transform:translateY(-3px);
  border-color:#243354;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
@media (min-width: 640px){ .ws-card{ width:200px; } }

.ws-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ws-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.35) 55%,
    transparent 80%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:14px;
}
.ws-badge{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#001018;
  background:linear-gradient(90deg,#38bdf8,#6366f1);
  padding:3px 8px;
  border-radius:5px;
  margin-bottom:8px;
  align-self:flex-start;
}
.ws-card-title{
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (min-width: 640px){ .ws-card-title{ font-size:14px; } }

/* ==========================================================================
   FOOTER MULTIPLEX AD
   ========================================================================== */
.ad-zone-footer-multiplex{
  margin:28px 0 0;
  min-height:200px;
  background:var(--panel-2);
  border:1px dashed var(--line-2);
  border-radius:var(--radius);
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.ad-zone-footer-multiplex .ad-label{
  align-self:flex-start;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:8px;
}
.ad-zone-footer-multiplex .adsbygoogle{
  display:block !important;
  width:100% !important;
  min-height:100px;
}
@media (min-width: 720px){
  .ad-zone-footer-multiplex{
    margin-top:36px;
    min-height:280px;
    padding:16px;
  }
}

/* ==========================================================================
   GLOBAL OVERFLOW GUARDS
   ========================================================================== */
html,
body{
  overflow-x:hidden;
}

.with-sidebar,
.container,
.article-body,
article,
main,
header,
footer{
  max-width:100%;
  min-width:0;
}

aside.sidebar,
aside.sidebar .widget,
aside.sidebar .ad-zone,
aside.sidebar .newsletter{
  max-width:100%;
  min-width:0;
  overflow-wrap:break-word;
  word-wrap:break-word;
}

img, iframe, video, embed, object, table{
  max-width:100%;
}

/* ==========================================================================
   ABSOLUTE CONTAINER ENFORCEMENT — LOADED LAST
   ========================================================================== */
.container{
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}
@media (min-width: 720px){
  .container{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
@media (min-width: 1400px){
  .container{
    max-width: 1340px !important;
  }
}

.site-header .hdr-top,
.site-header .cat-nav,
.site-header .cat-nav .container,
.site-footer .ftr-grid,
.site-footer .ftr-bottom{
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.site-header .cat-nav{
  overflow: hidden !important;
}
.site-header .cat-nav .container{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.site-header .cat-nav .container::-webkit-scrollbar{
  display: none;
}