/* ── Political Analysis — Editorial Dark Intelligence ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=Space+Mono&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #111112;
  --bg2:      #18181b;
  --bg3:      #1f1f24;
  --border:   #2a2a32;
  --gold:     #c9922a;
  --gold-lt:  #e0aa45;
  --text:     #ddd8ce;
  --text-dim: #8a8680;
  --text-xs:  #5a5650;
  --serif:    'DM Serif Display', Georgia, serif;
  --sans:     'DM Sans', system-ui, sans-serif;
  --mono:     'Space Mono', monospace;
  --radius:   3px;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--sans);
       font-size: 16px; line-height: 1.7; min-height: 100vh; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-lt); }

img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* ── layout ── */
.container { width: 100%; max-width: 1200px; margin: 0 auto;
             padding: 0 1.5rem; }
.page-wrap  { min-height: calc(100vh - 60px); }

/* ── nav ── */
nav { background: #0d0d0f; border-bottom: 1px solid var(--border);
      position: sticky; top: 0; z-index: 100; }
.nav-inner { display: flex; align-items: center; gap: 0;
             height: 56px; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav-logo  { width: 32px; height: 32px; background: var(--gold);
             border-radius: 3px; display: flex; align-items: center;
             justify-content: center; font-family: var(--mono);
             font-size: 12px; font-weight: 700; color: #0d0d0f; flex-shrink: 0; }
.nav-title { font-family: var(--serif); font-size: 1rem; color: var(--text); }
.nav-sub   { font-family: var(--mono); font-size: 9px; color: var(--text-dim);
             letter-spacing: .12em; text-transform: uppercase; display: block; }
.nav-links { display: flex; gap: 0; }
.nav-links a { padding: 0 14px; height: 56px; display: flex; align-items: center;
               font-size: 13px; font-weight: 500; color: var(--text-dim);
               border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer;
              color: var(--text); font-size: 22px; padding: 4px 8px; }

/* ── hero ── */
.hero { position: relative; overflow: hidden; min-height: 480px;
        display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay { position: absolute; inset: 0;
  background: linear-gradient(90deg,rgba(13,13,15,.93) 0%,rgba(13,13,15,.72) 55%,rgba(13,13,15,.25) 100%); }
.hero-content { position: relative; z-index: 2; padding: 4rem 0; max-width: 580px; }
.hero-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
                text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.hero h1 { font-family: var(--serif); font-size: clamp(2rem,5vw,3.4rem);
           line-height: 1.1; color: #f0ece4; margin-bottom: 1rem; }
.hero h1 em { color: var(--gold); font-style: italic; }
.hero-desc { color: var(--text-dim); font-size: 1rem; max-width: 440px;
             margin-bottom: 1.8rem; line-height: 1.7; }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px;
       font-size: 13px; font-weight: 500; border-radius: var(--radius);
       transition: background .2s, color .2s; cursor: pointer; border: none; }
.btn-gold  { background: var(--gold); color: #0d0d0f; }
.btn-gold:hover { background: var(--gold-lt); color: #0d0d0f; }
.btn-outline { background: transparent; color: var(--text-dim);
               border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── quote banner ── */
.quote-banner { background: var(--bg2); border-bottom: 1px solid var(--border);
                padding: 1.4rem 0; text-align: center; }
.quote-banner blockquote { font-family: var(--serif); font-style: italic;
  font-size: 1.05rem; color: var(--text-dim); max-width: 780px; margin: 0 auto; }
.quote-banner cite { display: block; margin-top: .5rem; font-family: var(--mono);
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold); font-style: normal; }

/* ── stats bar ── */
.stats-bar { background: var(--bg3); border-bottom: 1px solid var(--border);
             padding: .9rem 0; }
.stats-inner { display: flex; gap: 2rem; flex-wrap: wrap; }
.stat { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.stat strong { color: var(--gold); font-size: 15px; display: block; }

/* ── section headings ── */
.section { padding: 3rem 0; }
.section-label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
                 text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.section-title { font-family: var(--serif); font-size: clamp(1.5rem,3vw,2rem);
                 color: #f0ece4; margin-bottom: 1.5rem; }
.section-header { display: flex; align-items: baseline; justify-content: space-between;
                  margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: .75rem; }
.see-all { font-size: 12px; color: var(--gold); font-family: var(--mono); }
.see-all:hover { color: var(--gold-lt); }

/* ── article cards (home) ── */
.article-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 1.25rem; }
.article-card { background: var(--bg2); border: 1px solid var(--border);
                border-radius: var(--radius); overflow: hidden;
                transition: border-color .2s, transform .2s; display: flex; flex-direction: column; }
.article-card:hover { border-color: rgba(201,146,42,.35); transform: translateY(-2px); }
.article-card-img { height: 180px; overflow: hidden; background: var(--bg3); }
.article-card-img img { width: 100%; height: 100%; object-fit: cover;
                        transition: transform .35s; }
.article-card:hover .article-card-img img { transform: scale(1.04); }
.article-card-body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; }
.article-card-tag  { font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
                     text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; }
.article-card h3   { font-family: var(--serif); font-size: 1.05rem; color: #f0ece4;
                     line-height: 1.3; margin-bottom: .5rem; }
.article-card p    { font-size: .85rem; color: var(--text-dim); line-height: 1.6;
                     flex: 1; }

/* ── news archive ── */
.year-group { margin-bottom: 2.5rem; }
.year-badge { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
              color: var(--gold); background: rgba(201,146,42,.1);
              border: 1px solid rgba(201,146,42,.25); border-radius: var(--radius);
              padding: 3px 10px; display: inline-block; margin-bottom: 1rem; }
.section-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: .75rem; }
.section-card { background: var(--bg2); border: 1px solid var(--border);
                border-radius: var(--radius); padding: 1rem 1.2rem;
                transition: border-color .2s; display: block; }
.section-card:hover { border-color: rgba(201,146,42,.4); }
.section-card-num  { font-family: var(--mono); font-size: 9px; color: var(--gold);
                     letter-spacing: .12em; margin-bottom: .3rem; }
.section-card h3   { font-family: var(--serif); font-size: 1rem; color: #f0ece4;
                     margin-bottom: .3rem; }
.section-card-meta { font-size: 12px; color: var(--text-xs); }

/* ── news section detail ── */
.section-hero { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--border); }
.section-hero-num { font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
                    color: var(--gold); margin-bottom: .4rem; }
.section-hero h1  { font-family: var(--serif); font-size: clamp(1.6rem,4vw,2.4rem);
                    color: #f0ece4; }
.article-block { border-bottom: 1px solid var(--border); padding: 2rem 0; }
.article-block:last-child { border-bottom: none; }
.article-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.8rem; }
.article-layout.no-img { grid-template-columns: 1fr; }
.article-img-wrap { border-radius: var(--radius); overflow: hidden;
                    height: 160px; background: var(--bg3); }
.article-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.article-num  { font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
                color: var(--gold); margin-bottom: .4rem; }
.article-title { font-family: var(--serif); font-size: 1.3rem; color: #f0ece4;
                 margin-bottom: .8rem; line-height: 1.3; }
.article-body p { font-size: .9rem; color: var(--text-dim); line-height: 1.75;
                  margin-bottom: .75rem; }
.article-body p:last-child { margin-bottom: 0; }

/* ── artists grid ── */
.artists-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1.25rem; }
.artist-card  { background: var(--bg2); border: 1px solid var(--border);
                border-radius: var(--radius); overflow: hidden;
                transition: border-color .2s, transform .2s; display: block; }
.artist-card:hover { border-color: rgba(201,146,42,.4); transform: translateY(-2px); }
.artist-card-img  { height: 200px; background: var(--bg3); overflow: hidden; }
.artist-card-img img { width: 100%; height: 100%; object-fit: cover;
                       transition: transform .35s; }
.artist-card:hover .artist-card-img img { transform: scale(1.05); }
.artist-card-body { padding: 1rem; }
.artist-card h3   { font-family: var(--serif); font-size: 1.05rem; color: #f0ece4;
                    margin-bottom: .3rem; }
.artist-card p    { font-size: .82rem; color: var(--text-dim); line-height: 1.5; }
.no-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center;
                      justify-content: center; color: var(--text-xs); font-size: 2rem; }

/* ── artist detail ── */
.artist-detail-hero { padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--border); }
.artist-detail-layout { display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; align-items: start; }
.artist-detail-img { border-radius: var(--radius); overflow: hidden; }
.artist-detail-img img { width: 100%; }
.artist-detail-info h1 { font-family: var(--serif); font-size: clamp(1.8rem,4vw,2.6rem);
                          color: #f0ece4; margin-bottom: .5rem; }
.artist-detail-info .dates { font-family: var(--mono); font-size: 11px; color: var(--gold);
                              margin-bottom: 1rem; }
.artist-detail-info p { font-size: .95rem; color: var(--text-dim); line-height: 1.8;
                         margin-bottom: .75rem; }
.artist-gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 1rem; margin-top: 2rem; }
.artist-gallery img { width: 100%; height: 160px; object-fit: cover;
                      border-radius: var(--radius); transition: transform .3s; }
.artist-gallery img:hover { transform: scale(1.03); }

/* ── cartoons ── */
.cartoon-grid { columns: 4 200px; gap: 1rem; }
.cartoon-item { break-inside: avoid; margin-bottom: 1rem; }
.cartoon-item img { width: 100%; border-radius: var(--radius);
                    transition: transform .3s; }
.cartoon-item img:hover { transform: scale(1.02); }

/* ── topics ── */
.topics-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 1.25rem; }
.topic-card  { background: var(--bg2); border: 1px solid var(--border);
               border-radius: var(--radius); padding: 1.4rem;
               display: flex; gap: 1rem; align-items: flex-start;
               transition: border-color .2s; }
.topic-card:hover { border-color: rgba(201,146,42,.4); }
.topic-card-img { width: 72px; height: 72px; border-radius: var(--radius);
                  overflow: hidden; flex-shrink: 0; background: var(--bg3); }
.topic-card-img img { width: 100%; height: 100%; object-fit: cover; }
.topic-num  { font-family: var(--mono); font-size: 9px; color: var(--gold);
              letter-spacing: .12em; margin-bottom: .3rem; }
.topic-card h3 { font-family: var(--serif); font-size: 1rem; color: #f0ece4;
                 margin-bottom: .3rem; }
.topic-card p  { font-size: .82rem; color: var(--text-dim); }
.topic-meta    { font-size: 11px; color: var(--text-xs); margin-top: .4rem; }
.topic-explore { font-size: 11px; color: var(--gold); margin-top: .5rem;
                 font-family: var(--mono); }

/* ── about ── */
.about-layout { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; padding: 3rem 0; }
.about-img { border-radius: var(--radius); overflow: hidden; }
.about-img img { width: 100%; }
.about-content h1 { font-family: var(--serif); font-size: 2rem; color: #f0ece4; margin-bottom: .5rem; }
.about-content blockquote { border-left: 3px solid var(--gold); padding-left: 1.2rem;
  font-family: var(--serif); font-style: italic; color: var(--text-dim);
  font-size: 1.05rem; margin: 1.5rem 0; line-height: 1.7; }
.about-content cite { display: block; margin-top: .5rem; font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-style: normal; }
.about-content h2 { font-family: var(--serif); font-size: 1.25rem; color: #f0ece4;
                    margin: 2rem 0 .6rem; border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
.about-content p  { font-size: .95rem; color: var(--text-dim); line-height: 1.8; margin-bottom: .75rem; }

/* ── footer ── */
footer { background: #0d0d0f; border-top: 1px solid var(--border); padding: 2rem 0; margin-top: 3rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start;
                flex-wrap: wrap; gap: 1.5rem; }
.footer-brand { font-family: var(--serif); font-size: 1rem; color: #f0ece4; }
.footer-brand span { display: block; font-family: var(--mono); font-size: 9px;
                     color: var(--text-xs); letter-spacing: .12em; margin-top: 3px; }
.footer-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-links a { font-size: 12px; color: var(--text-dim); }
.footer-links a:hover { color: var(--gold); }
.footer-copy { width: 100%; font-size: 11px; color: var(--text-xs);
               margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* ── breadcrumb ── */
.breadcrumb { padding: .75rem 0; font-size: 12px; color: var(--text-xs);
              border-bottom: 1px solid var(--border); }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { margin: 0 .4rem; }

/* ── back link ── */
.back-link { display: inline-flex; align-items: center; gap: 5px;
             font-size: 12px; color: var(--text-dim); margin-bottom: 1.5rem; }
.back-link:hover { color: var(--gold); }

/* ── responsive ── */
@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; position: absolute;
               top: 56px; left: 0; right: 0; background: #0d0d0f;
               border-bottom: 1px solid var(--border); }
  .nav-links.open { display: flex; }
  .nav-links a { height: 44px; padding: 0 1.5rem; border-bottom: 1px solid var(--border); }
  .nav-toggle { display: block; }
  .article-layout { grid-template-columns: 1fr; }
  .artist-detail-layout { grid-template-columns: 1fr; }
  .about-layout { grid-template-columns: 1fr; }
  .cartoon-grid { columns: 2 150px; }
  .hero { min-height: 360px; }
}
@media (max-width: 480px) {
  .article-grid { grid-template-columns: 1fr; }
  .artists-grid { grid-template-columns: 1fr 1fr; }
  .cartoon-grid { columns: 2 120px; }
}