:root {
  /* Font Families */
  --pico-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-serif: 'Newsreader', Charter, Georgia, Cambria, serif;
  --pico-font-family-mono: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;

  /* Use Serif for reading content by default */
  --pico-font-family: var(--pico-font-family-serif);

  /* Font Sizing & Line Spacing (Soothing reading scale) */
  --pico-font-size: 112.5%; /* 18px base font size */
  --pico-line-height: 1.75;  /* Generous breathing room between lines */

  /* Soothing Contrast: Soften harsh stark blacks and whites */
  --pico-color-light: #2d3748; /* Slate gray instead of stark black */
  --pico-background-color-light: #fbfbf9; /* Soft cream/warm paper white */
}

/* Widen the overall layout for multi-column grids (cases, dialogue side-by-side) */
.container,
header.container,
main.container,
footer.container {
  max-width: 1140px; /* Up from 900px: gives ~350px per card in a 3-column grid */
}

/* Maintain comfortable reading line length (65–75ch) for narrative prose */
p,
article > p,
.analysis-body p {
  max-width: 70ch;
}

/* Ensure individual cards in grids fill their space naturally */
.grid > article {
  margin-bottom: 0; /* Prevents awkward bottom margins inside grids */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Card typography adjustments so titles and summaries fit cleanly */
.cases-grid article header h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.cases-grid article p {
  font-size: 0.95rem; /* Slightly smaller than main long-form text for scannability */
  line-height: 1.55;
  max-width: none;    /* Let the text wrap naturally to the card width */
}

.cases-grid article footer {
  margin-top: auto;   /* Pins "Read Breakdown" link to the bottom across all cards */
}


/* Headings and UI Controls feel crisper in the modern Sans */
h1, h2, h3, h4, h5, h6,
nav,
button,
[role="button"],
input,
label,
small {
  font-family: var(--pico-font-family-sans);
  letter-spacing: -0.015em;
}

h1 {
  font-size: 2.25rem;
  line-height: 1.25;
  font-weight: 700;
}

h2 {
  font-size: 1.65rem;
  line-height: 1.3;
  font-weight: 600;
  margin-top: 2rem;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}

/* Optimal reading column width: prevents lines from stretching too long */
main.container {
  max-width: 900px; /* Constrains desktop width so eyes don't track too far */
}

article {
  max-width: 100%;
}

p, article > p {
  max-width: 68ch; /* Optimal line length: 65-75 characters */
  font-size: 1.1rem;
}

/* Dialogue Transcript Styling: Distinct from analysis prose */
.dialogue-bubble {
  font-family: var(--pico-font-family-sans);
  font-size: 0.98rem;
  line-height: 1.6;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  margin-bottom: 0.85rem;
  background: var(--pico-card-background-color);
  border-left: 3px solid var(--pico-primary);
}

.dialogue-bubble p {
  margin-bottom: 0;
  font-style: normal;
}

.dialogue-speaker {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pico-muted-color);
  margin-bottom: 0.25rem;
  display: block;
}

/* Analysis breakdown callout typography */
.analysis-body {
  font-size: 1.05rem;
  line-height: 1.7;
}




/* 1. Responsive Nav Fix: Prevents horizontal scroll on small viewports */
header nav {
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
    }

@media (max-width: 768px) {
      header nav ul {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0;
        gap: 0.25rem 0.75rem;
      }
      header nav ul:first-child {
        justify-content: space-between;
      }
      header nav ul li {
        padding: 0.25rem 0;
      }
    }

 /* 2. Theme Toggle Styling */
 .theme-toggle {
      background: none;
      border: none;
      padding: 0.25rem 0.5rem;
      margin: 0;
      font-size: 1.2rem;
      cursor: pointer;
      box-shadow: none;
      color: var(--pico-color);
      display: inline-flex;
      align-items: center;
    }
    .theme-toggle:hover,
    .theme-toggle:focus {
      background: var(--pico-secondary-hover-background);
    }

 /* 3. Section Styling */
 .hero {
      text-align: center;
      padding: 3rem 0 2rem;
    }
 .hero-actions {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 1.5rem;
    }
 .dialogue-bubble {
      padding: 0.75rem 1rem;
      border-radius: var(--pico-border-radius);
      margin-bottom: 0.75rem;
      background: var(--pico-card-background-color);
      border-left: 4px solid var(--pico-primary);
    }
 .profile-img {
      width: 100%;
      max-width: 240px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 50%;
      margin: 0 auto 1.5rem;
      display: block;
    }