:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --card: #101010;
  --line: #262626;
  --text: #e0e0e0;
  --muted: #9ca3a8;
  --accent: #5be5e5;
  --accent2: #e5a85b;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.82;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover { opacity: 0.86; }

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #1a1a1a;
}

nav .wide,
nav .container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

nav .logo,
.brand,
.logo {
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}

nav .logo span,
.logo span { color: var(--accent); }

nav .nav-links,
.nav-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.95rem;
}

nav .nav-links a,
.nav-links a {
  color: var(--muted);
  font-weight: 500;
}

nav .nav-links a:hover,
nav .nav-links a.active,
.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}

.container,
.wide,
.article,
.dispatch-nav,
footer,
.footer {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.article { padding-top: 52px; padding-bottom: 80px; }
.container { padding-top: 32px; padding-bottom: 40px; }

.container > :not(.nav),
.article > *,
.dispatch-nav > *,
footer > *,
.footer > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.container > .nav {
  max-width: 1120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 0 0 26px;
  border-bottom: 1px solid #1a1a1a;
  margin-bottom: 28px;
}

.topnote,
.article-header .dispatch-by,
.article-header .disclaimer,
.story-header .subtitle,
.header .subtitle,
.article-header .meta {
  color: var(--muted);
}

.topnote {
  font-size: 0.95rem;
  margin-bottom: 18px;
}

.header,
.article-header,
.story-header {
  background: linear-gradient(180deg, var(--surface) 0%, var(--card) 100%);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px;
  margin-bottom: 28px;
}

.header {
  text-align: left;
}

.article-header {
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.header h1,
.article-header h2,
.story-header h2,
h1,
.section-title {
  font-family: 'Playfair Display', serif;
  color: #fff;
  line-height: 1.05;
}

.header h1,
.article-header h2,
.story-header h2,
h1 {
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  margin: 12px 0 10px;
}

.header .subtitle,
.article-header .meta,
.story-header .subtitle,
.article-header .tag,
.eyebrow,
.feature-kicker,
.kicker,
.card-num {
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.article-header .tag,
.eyebrow,
.feature-kicker,
.kicker,
.card-num,
.header > p:first-child {
  color: var(--accent);
  font-weight: 700;
}

p,
.article p,
.article li,
.affiliate-box p,
.visa-box p,
.section-card p,
.link-card p {
  font-size: 1.05rem;
  line-height: 1.85;
}

.article p,
.container > p { margin-bottom: 1.35em; }

h2,
.article h3,
.section-card h3,
.link-card h3,
.affiliate-box h3,
.visa-box h3,
.voice-box h4,
.article-header h3 {
  font-family: 'Playfair Display', serif;
}

.container > h2,
.article h3,
.story-shell .article h3,
h2.section-title {
  color: var(--accent);
  font-size: clamp(1.7rem, 2.7vw, 2.2rem);
  margin: 48px auto 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #222;
}

.divider,
.article .divider {
  text-align: center;
  margin: 38px auto;
  color: #444;
  font-size: 1.4rem;
}

blockquote,
.article blockquote {
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent2);
  border-radius: 0 18px 18px 0;
  padding: 18px 20px;
  color: #d0d5d8;
  margin: 24px auto;
  font-style: italic;
}

figure,
.article figure,
.article img.cover,
.article img.scene,
.hero-visual,
.hero-copy,
.feature-card,
.feature-side,
.quick-card,
.section-card,
.link-card,
.dispatch-card,
.voice-box,
.affiliate-box,
.visa-box {
  border-radius: 22px;
}

figure,
.article figure,
.voice-box,
.affiliate-box,
.visa-box,
.section-card,
.link-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--card) 100%);
  border: 1px solid var(--line);
  padding: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.24);
}

figure img,
.article figure img,
.article img.cover,
.article img.scene {
  width: 100%;
  display: block;
  border-radius: 18px;
  border: 1px solid #1f1f1f;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.article img.cover,
.article img.scene {
  margin: 0 auto 30px;
}

figcaption,
.visual-caption {
  margin-top: 10px;
  color: #8c9397;
  font-size: 0.94rem;
  text-align: center;
}

.voice-box {
  background: linear-gradient(135deg, rgba(91,229,229,0.09), rgba(229,168,91,0.07));
}

.voice-box h4,
.affiliate-box h3,
.visa-box h3 {
  color: #fff;
  margin-bottom: 10px;
}

.voice-box p,
.affiliate-box p,
.visa-box p,
.disclosure {
  color: #d0d8dc;
}

.affiliate-box { border-left: 3px solid var(--accent); }
.visa-box { border-left: 3px solid var(--accent2); }
.affiliate-box .sub,
.visa-box .sub,
strong { color: #fff; }

.jump-link,
.read-btn,
.cta {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
}

.voice-box audio {
  width: 100%;
  margin: 10px 0 14px;
}

.voice-end-marker {
  margin: 18px auto 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(91,229,229,0.06);
  border-radius: 0 12px 12px 0;
  color: #cfcfcf;
  font-size: 0.95rem;
}

.dispatch-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid #1a1a1a;
  padding-top: 40px;
}

.dispatch-nav a {
  flex: 1;
  background: linear-gradient(180deg, var(--surface) 0%, var(--card) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}

.dispatch-nav a .label { color: var(--muted); font-size: 0.85rem; }
.dispatch-nav a .title { color: #fff; font-family: 'Playfair Display', serif; font-size: 1.08rem; }

footer,
.footer {
  border-top: 1px solid #1a1a1a;
  padding-top: 40px;
  padding-bottom: 56px;
  text-align: center;
  color: var(--muted);
  margin-top: 56px;
}

footer .tagline,
.footer .tagline {
  color: var(--accent);
  font-style: italic;
  margin-bottom: 8px;
}

@media (max-width: 700px) {
  nav .wide,
  nav .container,
  .container,
  .wide,
  .article,
  .dispatch-nav,
  footer,
  .footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header,
  .article-header,
  .story-header,
  figure,
  .voice-box,
  .affiliate-box,
  .visa-box {
    padding: 22px;
  }

  .container > .nav,
  nav .wide,
  nav .container,
  .dispatch-nav,
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
  }

  .dispatch-nav a {
    width: 100%;
  }
}