/* Inside the Systems - Modern Card-Based Design */
/* Inspired by FIFO.media look and feel */

/* Reset and Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.6;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  background-color: #ffffff;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: #4361ee;
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: #3a56d4;
}

/* Layout Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header — scoped to the page-level <header> only (not <header class="article-header">) */
body > header {
  padding: 20px 0;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #222;
  margin: 0;
}

.site-title a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

/* Navigation */
nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
}

nav a {
  color: #555;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

nav a:hover {
  color: #4361ee;
}

/* Hamburger Menu */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #333;
  margin: 5px 0;
  transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Optional brand slots — rendered only when a site's config.yml defines the
   matching `brand:` key, so most sites emit none of this markup. Neutral network
   defaults; a per-site theme.css recolors them. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 10px 20px;
  border-radius: 9999px;
  background-color: #4361ee;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-cta:hover {
  background-color: #3a56d4;
  color: #fff;
  transform: translateY(-2px);
}

.disclosure-banner {
  background-color: #fffbeb;
  border-bottom: 1px solid #fde68a;
  padding: 12px 0;
}

.disclosure-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.disclosure-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #713f12;
}

.disclosure-text a {
  color: inherit;
  text-decoration: underline;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.875rem;
}

.footer-legal .separator {
  color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }

  /* The hamburger already competes for the header's right edge, and the desks
     themselves live in the slide-out nav — the CTA pill is the one thing that can
     go. Sites that need it on mobile should restate it in their theme.css. */
  .nav-cta {
    display: none;
  }

  .header-inner {
    flex-direction: row;
    justify-content: space-between;
  }

  nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1000;
    padding-top: 80px;
  }

  nav.active {
    right: 0;
  }

  nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 24px;
  }

  nav ul li {
    width: 100%;
    border-bottom: 1px solid #e5e7eb;
  }

  nav ul li:last-child {
    border-bottom: none;
  }

  nav a {
    display: block;
    padding: 16px 0;
    font-size: 1rem;
  }

  .nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .nav-overlay.active {
    display: block;
  }
}

/* Breadcrumb Navigation */
.breadcrumb {
  padding: 0 0 16px;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #666;
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: #ccc;
}

.breadcrumb a {
  color: #666;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: #4361ee;
}

.breadcrumb li[aria-current="page"] {
  color: #333;
  font-weight: 500;
}

@media (max-width: 480px) {
  .breadcrumb {
    padding: 0 0 12px;
  }

  .breadcrumb li {
    font-size: 0.8rem;
  }
}

/* Hero Section */
.hero-section {
  background: linear-gradient(180deg, #f8f9ff 0%, #ffffff 100%);
  padding: 0 24px 80px;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-section .hero-image {
  margin-top: 0;
  margin-bottom: 32px;
  order: 1;
}

.hero-section h1 {
  order: 2;
  font-size: 2.75rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.hero-section p {
  order: 3;
  font-size: 1.125rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Section Styling */
.section {
  padding: 64px 0;
}

.section-gray {
  background-color: #f9fafb;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 24px;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 12px;
}

.section-header p {
  font-size: 1rem;
  color: #666;
}

/* Latest Articles Grid */
.article-grid,
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.article-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.article-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.article-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.category-badge {
  display: inline-block;
  background: #e8edff;
  color: #4361ee;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}

.read-time {
  font-size: 0.8rem;
  color: #888;
}

.article-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 12px;
  line-height: 1.4;
}

.article-card p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4361ee;
  font-size: 0.9rem;
  font-weight: 500;
}

.read-link:hover {
  color: #3a56d4;
}

.read-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.read-link:hover svg {
  transform: translateX(4px);
}

/* Topics Grid */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.topic-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.topic-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.topic-icon {
  width: 48px;
  height: 48px;
  background: #f3f4f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.topic-icon svg {
  width: 24px;
  height: 24px;
  color: #4361ee;
}

.topic-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 8px;
}

.topic-card p {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
}

.article-count {
  display: block;
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 16px;
}

.view-topic-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4361ee;
  font-size: 0.9rem;
  font-weight: 500;
}

.view-topic-link:hover {
  color: #3a56d4;
}

.view-topic-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.view-topic-link:hover svg {
  transform: translateX(4px);
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
  border-radius: 24px;
  padding: 64px 48px;
  text-align: center;
  margin: 64px auto;
  max-width: 1000px;
}

.cta-section h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
}

.cta-section p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #4361ee;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 8px;
  transition: background 0.2s, transform 0.2s;
}

.cta-primary:hover {
  background: #f8f9ff;
  color: #3a56d4;
  transform: translateY(-1px);
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: background 0.2s, border-color 0.2s;
}

.cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

/* Footer */
footer {
  background: #1a1a2e;
  border-top: 1px solid #e5e7eb;
  padding: 64px 24px 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-brand .cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #4361ee;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.2s, transform 0.2s;
}

.footer-brand .cta-button:hover {
  background: #3a56d4;
  color: #fff;
  transform: translateY(-1px);
}

.footer-brand .cta-button svg {
  width: 18px;
  height: 18px;
}

.footer-column h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 12px;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer-column a:hover {
  color: #4361ee;
}

.network-sites a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.network-sites .site-tag {
  font-size: 0.7rem;
  background: rgba(67, 97, 238, 0.2);
  color: #4361ee;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.footer-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-weight: 500;
}

.footer-links a:hover {
  color: #4361ee;
}

.copyright {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Legacy footer-cta for backwards compatibility */
.footer-cta {
  display: none;
}

/* ================== */
/* Category Pages */
/* ================== */

.category-hero {
  background: linear-gradient(180deg, #f8f9ff 0%, #ffffff 100%);
  padding: 0 24px 80px;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-hero .hero-image {
  margin-top: 0;
  margin-bottom: 32px;
  order: 1;
}

.category-hero h1 {
  order: 2;
  font-size: 2.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 16px;
}

.category-hero p {
  order: 3;
  font-size: 1rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Hero Image Placeholder */
.hero-image {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  aspect-ratio: 4 / 1;
  margin-top: -80px;
  margin-bottom: 24px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.9rem;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Post List (Category Pages) */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list li {
  border-bottom: 1px solid #e5e7eb;
}

.post-list li:first-child {
  border-top: 1px solid #e5e7eb;
}

.post-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  color: #111;
  font-size: 1.1rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.post-list a:hover {
  background: #f8f9ff;
  color: #4361ee;
}

.post-list a::after {
  content: '→';
  font-size: 1.25rem;
  color: #ccc;
  transition: color 0.2s, transform 0.2s;
}

.post-list a:hover::after {
  color: #4361ee;
  transform: translateX(4px);
}

/* ================== */
/* Article Pages */
/* ================== */

.article-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 24px 48px;
}

article h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  margin-bottom: 32px;
}

article p {
  margin-bottom: 24px;
  line-height: 1.8;
  color: #333;
}

article h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111;
  margin-top: 48px;
  margin-bottom: 16px;
}

article h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #222;
  margin-top: 32px;
  margin-bottom: 12px;
}

article ul,
article ol {
  margin-bottom: 24px;
  padding-left: 24px;
  line-height: 1.8;
}

article li {
  margin-bottom: 8px;
}

article blockquote {
  border-left: 4px solid #4361ee;
  padding-left: 20px;
  margin: 32px 0;
  color: #555;
  font-style: italic;
}

/* Article Meta (Author, Review, Date) */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
  color: #666;
}

.article-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-meta .author {
  font-weight: 500;
  color: #333;
}

.article-meta .reviewed {
  color: #4361ee;
}

.article-meta .updated {
  color: #888;
}

@media (max-width: 480px) {
  .article-meta {
    flex-direction: column;
    gap: 8px;
  }
}

/* Article Disclaimer */
.disclaimer {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 32px;
  font-size: 0.875rem;
  color: #666;
  line-height: 1.6;
}

.disclaimer p {
  margin: 0;
}

.disclaimer strong {
  color: #333;
}

/* Ad Slots */
.ad-slot {
  background-color: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  padding: 48px 24px;
  margin: 32px 0;
  text-align: center;
  color: #999;
  font-size: 0.85rem;
}

/* Inline CTA Box */
.inline-cta {
  background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.inline-cta-content {
  flex: 1;
}

.inline-cta-title {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.inline-cta-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.5;
}

.inline-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: #4361ee;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 10px 20px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}

.inline-cta-link:hover {
  background: #f8f9ff;
  color: #3a56d4;
  transform: translateY(-1px);
}

.inline-cta-link svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 600px) {
  .inline-cta {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .inline-cta-link {
    width: 100%;
    justify-content: center;
  }
}

/* Related Posts */
.related-posts {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid #e5e7eb;
}

.related-posts h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 20px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
}

.related-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.related-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.related-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 12px;
  line-height: 1.4;
}

.related-card h4 a {
  /* The card title is the link now — descriptive anchor text, where every site in the network
     previously linked only the words "Read it" / "Read article" / "Leer artículo". Inherit the
     heading colour so the block looks exactly as it did when the title was inert text.

     This rule belongs HERE and not in sites/<slug>/site/css/style.css: those twenty files are
     GENERATED from this template by rebuild-site.py, so a rule added there survives until the next
     rebuild and then silently vanishes. That is exactly what happened — patching all twenty, then
     rebuilding one site, reverted that site's stylesheet and left its titles rendering as default
     blue underlined links. */
  color: inherit;
  text-decoration: none;
}

.related-card h4 a:hover {
  text-decoration: underline;
}

.related-card .read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4361ee;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: auto;
}

.related-card .read-link:hover {
  color: #3a56d4;
}

.related-card .read-link svg {
  width: 16px;
  height: 16px;
}

/* Static Pages (About, Privacy, Terms) */
.page-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
}

.page-container h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 32px;
}

.page-container h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111;
  margin-top: 36px;
  margin-bottom: 12px;
}

.page-container p {
  margin-bottom: 20px;
  line-height: 1.8;
  color: #333;
}

.page-container ul {
  margin-bottom: 20px;
  padding-left: 24px;
  line-height: 1.8;
}

.page-container li {
  margin-bottom: 8px;
}

/* ================== */
/* Pillar Content Homepage */
/* ================== */

.pillar-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px;
}

.pillar-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #111;
  margin-top: 48px;
  margin-bottom: 20px;
}

.pillar-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #222;
  margin-top: 32px;
  margin-bottom: 12px;
}

.pillar-content p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}

.pillar-content ul,
.pillar-content ol {
  margin-bottom: 24px;
  padding-left: 24px;
  line-height: 1.8;
}

.pillar-content li {
  margin-bottom: 8px;
  font-size: 1.0625rem;
}

.pillar-lead {
  font-size: 1.25rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e5e7eb;
}

/* ================== */
/* Responsive Design */
/* ================== */

@media (max-width: 1024px) {
  .article-grid,
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 0 24px 48px;
  }

  .hero-section h1 {
    font-size: 2rem;
  }

  .section {
    padding: 48px 0;
  }

  .section-title {
    font-size: 1.25rem;
  }

  .section-header h2 {
    font-size: 1.5rem;
  }

  .article-grid,
  .category-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .topics-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cta-section {
    padding: 48px 24px;
    margin: 48px 16px;
    border-radius: 16px;
  }

  .cta-section h2 {
    font-size: 1.5rem;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-primary,
  .cta-secondary {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .footer-brand {
    order: -1;
  }

  .footer-column ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
  }

  .footer-column li {
    margin-bottom: 0;
  }

  .network-sites a {
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: left;
  }

  .footer-links {
    justify-content: center;
  }

  article h1 {
    font-size: 1.75rem;
  }

  article h2 {
    font-size: 1.25rem;
  }

  .category-hero {
    padding: 48px 20px;
  }

  .category-hero h1 {
    font-size: 1.75rem;
  }

  .post-list a {
    font-size: 1rem;
    padding: 16px 12px;
  }

  .hero-image {
    aspect-ratio: 3 / 1;
  }

  .pillar-content {
    padding: 32px 20px;
  }

  .pillar-content h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .header-inner {
    padding: 0 16px;
  }

  .hero-section {
    padding: 0 16px 40px;
  }

  .hero-section h1 {
    font-size: 1.5rem;
  }

  .hero-section p {
    font-size: 0.95rem;
  }

  .section {
    padding: 40px 0;
  }

  .section-title {
    font-size: 1.125rem;
  }

  .article-card {
    padding: 20px;
  }

  .topic-card {
    padding: 20px;
  }

  .cta-section {
    padding: 32px 20px;
    margin: 32px 12px;
  }

  .cta-section h2 {
    font-size: 1.25rem;
  }

  .footer-cta {
    padding: 20px 16px;
  }

  .footer-cta h3 {
    font-size: 1.125rem;
  }

  .category-hero {
    padding: 40px 16px;
  }

  .category-hero h1 {
    font-size: 1.5rem;
  }

  .category-hero p {
    font-size: 0.9rem;
  }

  .post-list a {
    font-size: 0.95rem;
    padding: 14px 8px;
  }

  article h1 {
    font-size: 1.5rem;
    margin-bottom: 24px;
  }

  article h2 {
    font-size: 1.125rem;
    margin-top: 36px;
  }

  .article-container {
    padding: 12px 16px 32px;
  }

  .related-posts {
    margin-top: 48px;
  }

  .related-posts h3 {
    font-size: 1.125rem;
  }

  .hero-image {
    aspect-ratio: 2.5 / 1;
  }

  .pillar-content {
    padding: 24px 16px;
  }

  .pillar-content h2 {
    font-size: 1.25rem;
    margin-top: 36px;
  }

  .pillar-content p,
  .pillar-content li {
    font-size: 1rem;
  }

  .pillar-lead {
    font-size: 1.0625rem;
  }
}

/* Article Disclaimer */
.article-disclaimer {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  background: #f8f9fa;
  border-left: 3px solid #4361ee;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
}

/* Browse CTA */
.browse-cta {
  margin-top: 2.5rem;
  padding: 2rem;
  text-align: center;
  background: #f8f9fa;
  border-radius: 8px;
}

.browse-cta p {
  margin-bottom: 1rem;
  color: #555;
  font-size: 1rem;
}

.browse-cta .read-link {
  font-weight: 600;
  font-size: 1rem;
}

/* ---- /archive/ : the HTML sitemap ------------------------------------------------
   A plain, dense list of every article. Deliberately unstyled-looking: this page
   exists so crawlers (and the occasional reader) have one route to everything, and
   64% of the network's articles had never been crawled when it was added. Element
   selectors are scoped under .archive-list so the shared article typography rules
   and any per-site theme.css override still win where they should. */
.archive-count {
  color: var(--muted, #666);
  font-size: 0.95rem;
  margin-top: 0.35rem;
}

.article-container h2 .archive-n {
  color: var(--muted, #888);
  font-weight: 400;
  font-size: 0.8em;
}

ul.archive-list {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  columns: 2;
  column-gap: 2.5rem;
}

ul.archive-list li {
  margin: 0 0 0.45rem;
  padding: 0;
  break-inside: avoid;
  line-height: 1.45;
}

ul.archive-list li a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

ul.archive-list li a:hover {
  border-bottom-color: currentColor;
}

@media (max-width: 700px) {
  ul.archive-list { columns: 1; }
}


/* ---- per-site theme: sites/validatedebtfirst/theme.css ---- */
/* Validate Debt First — a reference document, not a magazine.
   The register is explanatory and the subject is regulated, so the look is deliberately plain:
   a serif for reading, generous measure, no accent colour competing with the text. Anything that
   read as marketing would undercut the one thing this site is claiming, which is that it explains
   rather than sells. */

:root {
  --vdf-ink:        #1b1f24;
  --vdf-body:       #2f353c;
  --vdf-muted:      #5c646d;   /* AA on both the page and the panel backgrounds */
  --vdf-rule:       #d8dce1;
  --vdf-page:       #ffffff;
  --vdf-panel:      #f5f6f8;
  --vdf-accent:     #1f4f6b;   /* used only for links and the icon */
  --vdf-accent-dim: #38657f;
}

body {
  background: var(--vdf-page);
  color: var(--vdf-body);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Article prose gets the serif. The shared stylesheet hardcodes article typography for a white
   background, which is what this site has, so only the family and measure need overriding. */
article p, article li, .article-container p, .article-container li {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 1.08rem;
  line-height: 1.72;
  color: var(--vdf-body);
}
article h1, article h2, article h3,
.article-container h1, .article-container h2, .article-container h3 {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--vdf-ink);
  letter-spacing: -0.01em;
}
.article-container { max-width: 44rem; }

a { color: var(--vdf-accent); }
a:hover { color: var(--vdf-accent-dim); }

.site-icon { color: var(--vdf-accent); }

/* The standing disclosure. Visible, not shouty — it has to be read, not dismissed. */
.disclosure-banner {
  background: var(--vdf-panel);
  border-bottom: 1px solid var(--vdf-rule);
}
.disclosure-text { color: var(--vdf-muted); font-size: 0.86rem; }

/* Sources block. Every article has one; validate_content will not pass an article without a
   .gov citation, so this is load-bearing rather than decorative. */
.article-sources {
  margin: 2.5rem 0 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--vdf-panel);
  border-left: 3px solid var(--vdf-accent);
  border-radius: 2px;
}
.article-sources h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--vdf-muted);
  margin: 0 0 0.6rem;
}
.article-sources ul { list-style: none; margin: 0; padding: 0; }
.article-sources li { margin: 0 0 0.4rem; }
.article-sources li a {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.86rem;
  word-break: break-all;
}

.article-disclaimer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--vdf-rule);
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.86rem !important;
  color: var(--vdf-muted) !important;
  line-height: 1.6 !important;
}

.article-card, .category-card { border: 1px solid var(--vdf-rule); box-shadow: none; }
.article-card:hover, .category-card:hover { border-color: var(--vdf-accent-dim); transform: none; }