/* ── Richly Spent — Shared Styles ─────────────────────── */

/* ── FONT IMPORT ──────────────────────────────────────── */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/caveat@5/index.css');

:root {
  /* ── COLOR: RAW PALETTE ─────────────────────────────── */
  --teal-dark:  #085041;
  --teal-mid:   #0F6E56;
  --teal:       #1D9E75;
  --teal-light: #5DCAA5;
  --teal-pale:  #9FE1CB;
  --teal-bg:    #E1F5EE;
  --amber:      #EF9F27;
  --amber-mid:  #BA7517;
  --amber-dark: #633806;
  --amber-bg:   #FAEEDA;
  --gray-dark:  #2C2C2A;
  --gray-mid:   #444441;
  --gray-light: #888780;
  --gray-bg:    #F5F5F3;

  /* ── COLOR: TEAL SCALE (rs- aliases) ─────────────────── */
  --rs-teal-dark:  #085041;
  --rs-teal-mid:   #0F6E56;
  --rs-teal:       #1D9E75;
  --rs-teal-light: #5DCAA5;
  --rs-teal-pale:  #9FE1CB;
  --rs-teal-bg:    #E1F5EE;

  /* ── COLOR: AMBER SCALE (rs- aliases) ────────────────── */
  --rs-amber:      #EF9F27;
  --rs-amber-mid:  #BA7517;
  --rs-amber-dark: #633806;
  --rs-amber-bg:   #FAEEDA;

  /* ── COLOR: GRAY SCALE (rs- aliases) ─────────────────── */
  --rs-gray-dark:  #2C2C2A;
  --rs-gray-mid:   #444441;
  --rs-gray-light: #888780;
  --rs-gray-bg:    #F5F5F3;

  /* ── COLOR: BASE / SURFACE ──────────────────────────── */
  --rs-page-bg:    #FDFCF9;   /* warm off-white primary surface */
  --rs-white:      #ffffff;
  --rs-border:     #E8EDE9;   /* nav, dividers */
  --rs-border-tag: #E0E0DC;   /* tags, pills */

  /* ── COLOR: SEMANTIC ────────────────────────────────── */
  --rs-color-primary:       var(--rs-teal);
  --rs-color-primary-hover: var(--rs-teal-mid);
  --rs-color-accent:        var(--rs-amber);
  --rs-color-accent-hover:  var(--rs-amber-mid);
  --rs-color-fg:            var(--rs-gray-dark);
  --rs-color-fg-muted:      var(--rs-gray-mid);
  --rs-color-fg-subtle:     var(--rs-gray-light);
  --rs-color-surface:       var(--rs-page-bg);
  --rs-color-card:          var(--rs-white);
  --rs-color-link:          var(--rs-teal);
  --rs-color-link-hover:    var(--rs-teal-mid);

  /* ── GRADIENTS ──────────────────────────────────────── */
  --rs-gradient-hero:       linear-gradient(160deg, var(--rs-teal-bg) 0%, #FDFCF9 55%, var(--rs-amber-bg) 100%);
  --rs-gradient-newsletter: linear-gradient(135deg, var(--rs-teal-dark) 0%, var(--rs-teal-mid) 100%);

  /* ── TYPOGRAPHY: FAMILIES ───────────────────────────── */
  --rs-font-display: 'Caveat', cursive;
  --rs-font-serif:   Georgia, 'Times New Roman', serif;

  /* ── TYPOGRAPHY: SIZE SCALE ─────────────────────────── */
  --rs-text-xs:   0.75rem;  /* 12px — labels, badges */
  --rs-text-sm:   0.82rem;  /* 13px — meta, card read-more */
  --rs-text-base: 0.9rem;   /* 14.4px — nav links, excerpts */
  --rs-text-md:   1rem;     /* 16px — body, newsletter p */
  --rs-text-lg:   1.05rem;  /* 16.8px — article body */
  --rs-text-xl:   1.15rem;  /* 18.4px — article subtitle */
  --rs-text-2xl:  1.35rem;  /* 21.6px — footer brand */
  --rs-text-3xl:  1.55rem;  /* 24.8px — nav brand */
  --rs-text-4xl:  1.85rem;  /* 29.6px — section title */
  --rs-text-5xl:  2rem;     /* 32px — newsletter h2, stat number */
  --rs-text-6xl:  3rem;     /* 48px — article title */
  --rs-text-7xl:  4.2rem;   /* 67.2px — hero brand name */

  /* ── TYPOGRAPHY: LINE HEIGHTS ───────────────────────── */
  --rs-leading-tight:   1.2;
  --rs-leading-snug:    1.4;
  --rs-leading-normal:  1.6;
  --rs-leading-body:    1.7;
  --rs-leading-article: 1.85;

  /* ── TYPOGRAPHY: LETTER SPACING ─────────────────────── */
  --rs-tracking-label: 0.1em;
  --rs-tracking-badge: 0.08em;
  --rs-tracking-nav:   0.02em;

  /* ── SPACING SCALE ──────────────────────────────────── */
  --rs-space-1:  4px;
  --rs-space-2:  8px;
  --rs-space-3:  12px;
  --rs-space-4:  16px;
  --rs-space-5:  20px;
  --rs-space-6:  24px;
  --rs-space-7:  28px;
  --rs-space-8:  32px;
  --rs-space-10: 40px;
  --rs-space-12: 48px;
  --rs-space-16: 64px;
  --rs-space-18: 72px;
  --rs-space-20: 80px;

  /* ── BORDER RADIUS ──────────────────────────────────── */
  --rs-radius-sm:   10px;
  --rs-radius-md:   12px;
  --rs-radius-lg:   14px;
  --rs-radius-xl:   16px;
  --rs-radius-2xl:  20px;
  --rs-radius-3xl:  24px;
  --rs-radius-pill: 30px;
  --rs-radius-full: 9999px;

  /* ── SHADOW / ELEVATION ─────────────────────────────── */
  --rs-shadow-0: none;
  --rs-shadow-1: 0 2px 12px rgba(0,0,0,0.06);  /* resting card */
  --rs-shadow-2: 0 2px 10px rgba(0,0,0,0.04);  /* inner cards */
  --rs-shadow-3: 0 8px 28px rgba(0,0,0,0.11);  /* hovered card */

  /* ── TRANSITIONS ────────────────────────────────────── */
  --rs-transition: 0.2s ease;

  /* ── LAYOUT ─────────────────────────────────────────── */
  --rs-container-width: 1100px;
  --rs-article-width:   720px;
  --rs-container-px:    24px;
}

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

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: #FDFCF9;
  color: var(--gray-dark);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { text-decoration: none; color: inherit; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.caveat {
  font-family: 'Caveat', cursive;
  font-weight: 700;
}

/* ── NAV ── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #E8EDE9;
  padding: 14px 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo-text { font-size: 1.55rem; line-height: 1; }
.word-richly { color: var(--teal); }
.word-spent  { color: var(--amber-mid); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  font-size: 0.9rem;
  color: var(--gray-mid);
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--teal); }

.nav-cta {
  background: var(--teal);
  color: #fff !important;
  padding: 9px 20px;
  border-radius: 24px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.2s;
}

.nav-cta:hover { background: var(--teal-mid) !important; }

/* ── COMING SOON HERO ── */
.coming-soon-hero {
  flex: 1;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, var(--teal-bg) 0%, #FDFCF9 55%, var(--amber-bg) 100%);
  padding: 100px 0;
}

.coming-soon-inner {
  text-align: center;
}

.coming-soon-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.coming-soon-title {
  font-size: 3.5rem;
  color: var(--teal);
  margin-bottom: 16px;
}

.coming-soon-badge {
  display: inline-block;
  background: var(--amber-bg);
  color: var(--amber-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.coming-soon-text {
  font-size: 1.1rem;
  color: var(--gray-mid);
  max-width: 480px;
  margin: 0 auto 36px;
}

.btn-home {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  padding: 13px 30px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}

.btn-home:hover {
  background: var(--teal-mid);
  transform: translateY(-1px);
}

/* ── FOOTER ── */
footer {
  background: var(--gray-dark);
  color: #ccc;
  padding: 48px 0 32px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-logo-text { font-size: 1.35rem; line-height: 1; }
.footer-logo-text .word-richly { color: var(--teal-light); }
.footer-logo-text .word-spent  { color: var(--amber); }

.footer-tagline {
  font-size: 0.8rem;
  color: var(--gray-light);
  margin-top: 3px;
}

.footer-links {
  display: flex;
  gap: 22px;
  list-style: none;
}

.footer-links a {
  font-size: 0.85rem;
  color: #aaa;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--teal-light); }

.footer-bottom {
  border-top: 1px solid #3a3a38;
  padding-top: 20px;
  font-size: 0.78rem;
  color: var(--gray-light);
  text-align: center;
}

/* ── TOPIC HERO ── */
.topic-hero {
  background: linear-gradient(160deg, var(--teal-bg) 0%, #FDFCF9 55%, var(--amber-bg) 100%);
  padding: 64px 0 52px;
  text-align: center;
}

.topic-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.topic-icon { font-size: 3rem; }

.topic-title {
  font-size: 3rem;
  color: var(--teal);
  line-height: 1;
}

.topic-desc {
  font-size: 1rem;
  color: var(--gray-mid);
  max-width: 520px;
  margin: 0 auto;
}

.post-count-badge {
  display: inline-block;
  background: var(--teal-bg);
  color: var(--teal-mid);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
}

/* ── TOPIC POSTS SECTION ── */
.topic-posts-section { padding: 60px 0 80px; background: #FDFCF9; flex: 1; }

/* ── CARDS ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.11);
}

.card-image {
  width: 100%;
  height: 200px;
  background: var(--teal-bg);
  overflow: hidden;
  position: relative;
}

.card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--teal-light);
}

.card-image-placeholder svg { opacity: 0.5; }

.card-image-placeholder span {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.card-body { padding: 22px 24px 26px; }

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid #E0E0DC;
  color: var(--gray-mid);
  line-height: 1.2;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-dark);
  line-height: 1.4;
  margin-bottom: 10px;
}

.card-excerpt {
  font-size: 0.9rem;
  color: var(--gray-light);
  line-height: 1.6;
  margin-bottom: 18px;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--gray-light);
}

.card-read-more {
  color: var(--teal);
  font-weight: 600;
  font-size: 0.82rem;
  transition: color 0.2s;
}

.card-read-more:hover { color: var(--teal-mid); }

/* ── NO POSTS / LOAD MORE ── */
.no-posts-msg {
  text-align: center;
  padding: 60px 0;
  color: var(--gray-light);
}

.no-posts-msg .coming-soon-icon { font-size: 3rem; margin-bottom: 16px; }
.no-posts-msg p { font-size: 1rem; margin-bottom: 24px; }

.btn-load-more {
  display: inline-block;
  background: transparent;
  color: var(--teal-mid);
  border: 2px solid var(--teal-light);
  padding: 13px 32px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  font-family: Georgia, serif;
}

.btn-load-more:hover {
  background: var(--teal-bg);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { flex-wrap: wrap; }
  .coming-soon-title { font-size: 2.5rem; }
  .topic-title { font-size: 2.2rem; }
  .cards-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .topic-title { font-size: 1.9rem; }
}

/* ══════════════════════════════════════════════════════
   TYPOGRAPHY UTILITY CLASSES (from design system)
   ══════════════════════════════════════════════════════ */

/* ── Article body prose ─────────────────────────────── */
.rs-prose {
  font-family: var(--rs-font-serif);
  font-size: var(--rs-text-lg);
  color: var(--rs-color-fg);
  line-height: var(--rs-leading-article);
}

.rs-prose h1 {
  font-family: var(--rs-font-display);
  font-size: var(--rs-text-6xl);
  font-weight: 700;
  color: var(--rs-teal-dark);
  line-height: var(--rs-leading-tight);
  margin-bottom: var(--rs-space-4);
}

.rs-prose h2 {
  font-family: var(--rs-font-display);
  font-size: var(--rs-text-5xl);
  font-weight: 700;
  color: var(--rs-teal);
  line-height: var(--rs-leading-tight);
  margin: 48px 0 16px;
}

.rs-prose h3 {
  font-family: var(--rs-font-serif);
  font-size: var(--rs-text-lg);
  font-weight: 700;
  color: var(--rs-color-fg);
  margin: 28px 0 10px;
  letter-spacing: 0.01em;
}

.rs-prose p {
  margin-bottom: var(--rs-space-6);
}

.rs-prose a {
  color: var(--rs-color-link);
  text-decoration: underline;
  text-decoration-color: var(--rs-teal-pale);
  transition: color var(--rs-transition);
}

.rs-prose a:hover {
  color: var(--rs-color-link-hover);
}

.rs-prose strong {
  font-weight: 700;
  color: var(--rs-color-fg);
}

/* ── Section label (e.g. "FRESH OFF THE PRESS") ─────── */
.rs-label {
  font-family: var(--rs-font-serif);
  font-size: var(--rs-text-xs);
  font-weight: 700;
  letter-spacing: var(--rs-tracking-label);
  text-transform: uppercase;
  color: var(--rs-teal);
}

/* ── Section title ──────────────────────────────────── */
.rs-section-title {
  font-family: var(--rs-font-serif);
  font-size: var(--rs-text-4xl);
  color: var(--rs-color-fg);
  line-height: var(--rs-leading-tight);
}

/* ── Display / Caveat heading ───────────────────────── */
.rs-display {
  font-family: var(--rs-font-display);
  font-weight: 700;
}

/* ── NEW badge ──────────────────────────────────────── */
.new-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--amber-bg);
  color: var(--amber-dark);
}