:root {
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1e293b;
  background: #f8fafc;
  line-height: 1.6;
}
a { color: #7c3aed; }
.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
header.site {
  border-bottom: 1px solid #e2e8f0;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.site .wrap {
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 800;
  font-size: 17px;
  color: #0f172a;
}
.brand .mark {
  width: 30px; height: 30px;
  display: block;
}
.brand-text { display: inline-block; }
.brand span.app { color: #7c3aed; }
nav.site a {
  color: #64748b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-left: 20px;
}
nav.site a:hover { color: #0f172a; }
.cta-btn {
  background: #7c3aed;
  color: white !important;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
}
.cta-btn:hover { background: #6d28d9; }

/* Hero / title block */
.post-hero {
  padding: 48px 0 28px;
}
.eyebrow {
  color: #7c3aed;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
}
h1 {
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.15;
  color: #0f172a;
  margin: 0 0 14px;
}
.dek {
  font-size: 1.1rem;
  color: #475569;
  margin: 0 0 18px;
}
.meta {
  color: #94a3b8;
  font-size: 13px;
}

/* Images */
.hero-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 20px;
  margin: 4px 0 8px;
  display: block;
}
.hero-video {
  width: 100%;
  border-radius: 20px;
  margin: 4px 0 8px;
  display: block;
  background: #000;
}
.post-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
figure.article-img { margin: 30px 0; }
figure.article-img img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
figure.article-img figcaption {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
  text-align: right;
}
@media (max-width: 640px) {
  .hero-img { height: 200px; }
  figure.article-img img { height: 190px; }
}

/* Article body */
article { padding: 8px 0 60px; }
article h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  margin: 40px 0 14px;
}
article h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 26px 0 10px;
}
article p { margin: 0 0 16px; color: #334155; }
article ul, article ol { margin: 0 0 20px; padding-left: 22px; color: #334155; }
article li { margin-bottom: 7px; }
article strong { color: #0f172a; }
.callout {
  background: linear-gradient(135deg, #f5f3ff, #eff6ff);
  border: 1px solid #ddd6fe;
  border-radius: 16px;
  padding: 20px 22px;
  margin: 28px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout a.cta-btn { display: inline-flex; margin-top: 8px; text-decoration: none; }

/* FAQ */
.faq-item { border-top: 1px solid #e2e8f0; padding: 18px 0; }
.faq-item:last-child { border-bottom: 1px solid #e2e8f0; }
.faq-item h3 { margin: 0 0 8px; font-size: 1.02rem; }
.faq-item p { margin: 0; }

/* Blog index */
.wrap-wide {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 20px 60px;
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 22px;
}
.post-card {
  display: block;
  text-decoration: none;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.post-card:hover {
  border-color: #c4b5fd;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(124, 58, 237, 0.18);
}
.post-card-body { padding: 18px 20px 20px; }
.post-card h2 { margin: 4px 0 8px; font-size: 1.05rem; line-height: 1.3; color: #0f172a; }
.post-card p { margin: 0; color: #64748b; font-size: 0.9rem; }
.post-card .tag {
  display: inline-block;
  background: #f5f3ff; color: #7c3aed;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  margin-bottom: 4px;
}

/* Featured card — the flagship post gets an editorial, wider treatment
   instead of sitting in the grid like every other card */
.post-card.featured {
  display: flex;
  flex-direction: row;
  margin-bottom: 4px;
}
.post-card.featured .post-card-img {
  width: 46%;
  height: auto;
  min-height: 260px;
  border-radius: 0;
  margin-bottom: 0;
  flex-shrink: 0;
}
.post-card.featured .post-card-body {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.post-card.featured h2 { font-size: 1.55rem; margin: 6px 0 10px; }
.post-card.featured p { font-size: 1rem; }
.post-card.featured .tag { background: #fce7f3; color: #db2777; }

@media (max-width: 720px) {
  .post-card.featured { flex-direction: column; }
  .post-card.featured .post-card-img { width: 100%; height: 200px; }
  .post-card.featured .post-card-body { padding: 20px; }
}

/* Footer */
footer.site {
  border-top: 1px solid #e2e8f0;
  padding: 32px 0 48px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}
footer.site a { color: #7c3aed; text-decoration: none; }

@media (max-width: 640px) {
  h1 { font-size: 1.6rem; }
  nav.site a { margin-left: 12px; font-size: 13px; }
}

/* Discovery map (destination guide pages) */
.explore-map-widget {
  margin: 28px 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
}
.explore-map-widget h3 { margin: 0 0 4px; }
.explore-map-widget .explore-map-sub { color: #94a3b8; font-size: 13px; margin: 0 0 14px; }
.explore-map-canvas {
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #f3ede3;
}
.explore-map-status { color: #94a3b8; font-size: 13px; text-align: center; padding: 8px 0; }
.explore-map-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 14px;
}
.explore-map-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #334155;
}
.explore-map-row span:first-child { font-size: 15px; flex-shrink: 0; }
.explore-map-row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dark mode — mirrors the main app's slate/purple/pink palette so these
   static pages (outside the SPA) match whatever theme the user picked in
   the app instead of always rendering light. Class is set by the inline
   script in <head>; kept in sync with src/contexts/ThemeContext.jsx. */
html.dark { color-scheme: dark; }
html.dark body { color: #e2e8f0; background: #020617; }
html.dark a { color: #a78bfa; }
html.dark header.site { border-bottom-color: #1e293b; background: rgba(2,6,23,0.85); }
html.dark .brand { color: #f1f5f9; }
html.dark .brand span.app { color: #f472b6; }
html.dark nav.site a { color: #94a3b8; }
html.dark nav.site a:hover { color: #f1f5f9; }
html.dark .eyebrow { color: #c4b5fd; }
html.dark h1, html.dark article h2, html.dark .post-card h2, html.dark .brand { color: #f1f5f9; }
html.dark article h3 { color: #e2e8f0; }
html.dark .dek { color: #cbd5e1; }
html.dark .meta { color: #64748b; }
html.dark article p, html.dark article ul, html.dark article ol { color: #cbd5e1; }
html.dark article strong { color: #f8fafc; }
html.dark .callout { background: linear-gradient(135deg, #1e1b3a, #172033); border-color: #4c1d95; }
html.dark .faq-item { border-top-color: #1e293b; }
html.dark .faq-item:last-child { border-bottom-color: #1e293b; }
html.dark .post-card { background: #0f172a; border-color: #1e293b; }
html.dark .post-card:hover { border-color: #7c3aed; box-shadow: 0 12px 28px -12px rgba(124, 58, 237, 0.35); }
html.dark .post-card p { color: #94a3b8; }
html.dark .post-card .tag { background: #2e1065; color: #c4b5fd; }
html.dark .post-card.featured .tag { background: #500724; color: #f9a8d4; }
html.dark footer.site { border-top-color: #1e293b; color: #64748b; }
html.dark footer.site a { color: #a78bfa; }
html.dark .explore-map-widget { background: #0f172a; border-color: #1e293b; }
html.dark .explore-map-widget .explore-map-sub { color: #64748b; }
html.dark .explore-map-canvas { background: #1e293b; }
html.dark .explore-map-status { color: #64748b; }
html.dark .explore-map-row { color: #cbd5e1; }