/* Shared color and typography theme. Original layout stays in the base styles;
   the scoped Latest Updates section below has its own card presentation. */
:root {
  --bg: #faf8f3;
  --surface: #fffefa;
  --surface-soft: #f5f1e9;
  --text: #292b25;
  --muted: #666a60;
  --brand: #a33f2e;
  --brand-strong: #873324;
  --brand-ink: #292b25;
  --line: #e3e1d7;
  --shadow: 0 12px 28px -22px rgba(41, 43, 37, 0.18);
  --heading-font: "Fraunces", Georgia, serif;
  --green: #4b5c43;
}

body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--heading-font);
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.hero h1,
.post-hero h1 {
  font-weight: 400;
  letter-spacing: -0.045em;
}

.site-header {
  background: rgba(250, 248, 243, 0.96);
  border-bottom-color: var(--line);
}

.site-nav a { color: var(--text); }
.site-nav a:hover,
.site-nav a.active { color: var(--brand); }
.nav-toggle { background: var(--surface); color: var(--text); }
.site-nav.open { background: var(--surface); }

.eyebrow,
.donation-label,
.news-label,
.newsletter-label,
.stories-label,
.news-item-meta,
.story-meta,
.post-meta { color: var(--brand); }
.join-label { color: var(--green); }

.btn { font-weight: 600; }
.btn-primary { background: var(--brand); color: #fffefa; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-secondary { background: var(--surface); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface-soft); }
.news-item-link,
.our-work-inline-link,
.post-back-link { color: var(--brand-strong); font-weight: 600; }

.donation-bar { background: #f4ece6; border-color: #e3cfc3; }
.news-panel { background: #f5f3ec; border-color: var(--line); }
.news-item { background: var(--surface); border-color: var(--line); }
.newsletter-card { background: var(--surface); border-color: var(--line); }
.stories-card { background: #f4ece6; border-color: #e3cfc3; }
.join-card { background: #ecf0e5; border-color: #dce2d4; }

.health-literacy-card { background: #f3f4ec; border-color: #dce2d4; }
.panel.language-barrier-panel { background: #ecf0e5; border-color: #dce2d4; }
.contact-link-card { background: var(--surface); border-color: var(--line); }
.contact-icon { background: #f4ece6; color: var(--brand); }
.contact-join-panel { background: #ecf0e5; border-color: #dce2d4; }

.materials-ticker-window { background: #f3f4ec; border-color: var(--line); }
.lang-pill { color: var(--green); background: #edf1e7; border-color: #d5dacb; }
.lang-pill:hover { background: var(--green); border-color: var(--green); color: white; }
.add-list-item:hover { background: #f4ece6; border-color: #e3cfc3; color: var(--brand-strong); }
.our-work-collage-panel { background: var(--surface); }
.collage-item { background: var(--surface-soft); border-color: var(--line); }
.person-image-frame { background: var(--surface-soft); border-color: var(--line); }

/* Practice has its own palette; keep its existing structure and controls. */
body:has(.page-shell) {
  --bg: #faf8f3;
  --paper: #fffefa;
  --paper-strong: #f5f1e9;
  --ink: #292b25;
  --muted: #666a60;
  --line: #e3e1d7;
  --accent: #a33f2e;
  --accent-deep: #873324;
  --warn: #7c2d12;
  --warn-bg: #fff0eb;
  --shadow: 0 12px 28px -22px rgba(41, 43, 37, 0.18);
}

.page-shell h1,
.page-shell h2,
.page-shell h3 { font-family: var(--heading-font); font-weight: 500; }
.page-shell .hero h1 { font-weight: 400; }
.page-shell .eyebrow,
.page-shell .card-label,
.page-shell .toolbar-label { color: var(--brand); }
.page-shell .hero-copy,
.page-shell .hero-card,
.page-shell .panel { background: var(--surface); }
.page-shell .consent-box { background: #ecf0e5; }
.page-shell .mode-card:hover { border-color: #b6bcad; }
.page-shell .mode-card.is-selected { background: #f4ece6; border-color: #c29a83; }
.page-shell .ghost-button { background: #f4ece6; color: var(--brand-strong); }
.page-shell .bubble.patient { background: #f4ece6; }
.page-shell .feedback-card { background: #ecf0e5; }
.page-shell .voice-meter-fill { background: var(--green); }

/* Focus visibility and reduced motion do not alter the page layout. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: clamp(1.6rem, 8.4vw, 2.1rem); }
}

/* Updates: an editorial heading and three evenly spaced news cards. */
#updates { scroll-margin-top: 110px; }
.news-panel {
  margin-top: 2.75rem;
  padding: 0;
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.news-panel-intro {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2rem;
  align-items: start;
  margin-bottom: 1.6rem;
}

.news-panel .news-label {
  grid-column: 1;
  margin-bottom: 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  font-weight: 600;
}

.news-panel-intro h2 {
  grid-column: 1;
  max-width: none;
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 400;
}

.news-panel .news-intro-copy {
  grid-column: 1;
  max-width: 65ch;
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.75;
}

.news-panel .news-archive-link {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: center;
  margin: 0;
  font-size: 0.85rem;
  background: transparent;
}

.news-panel .news-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}

.news-panel .news-item {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.7rem 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 6px 20px -16px rgba(41, 43, 37, 0.2);
}

.news-panel .news-item:first-child {
  background: #f0f3e9;
  border-color: #dce2d4;
}

.news-panel .news-item:last-child {
  background: #f6eee7;
  border-color: #e7d8cb;
}

.news-panel .news-item-meta {
  margin: 0 0 1rem;
  font-size: 0.64rem;
  line-height: 1.8;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--green);
}

.news-panel .news-item:last-child .news-item-meta {
  color: var(--brand-strong);
}

.news-panel .news-item h3 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  line-height: 1.28;
  font-weight: 500;
}

.news-panel .news-item p {
  font-size: 0.87rem;
  line-height: 1.8;
  margin-bottom: 1.6rem;
}

.news-panel .news-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(75, 92, 67, 0.15);
  font-size: 0.8rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--text);
}

.news-panel .news-item-link::after {
  content: "→";
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--brand);
  transition: transform 0.15s ease;
}

.news-panel .news-item-link:hover {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.news-panel .news-item-link:hover::after { transform: translateX(3px); }

@media (max-width: 980px) {
  .news-panel .news-list { grid-template-columns: 1fr; }
  .news-panel .news-item { padding: 1.5rem; }
  .news-panel .news-item h3 { font-size: 1.5rem; }
  .news-panel .news-item p { margin-bottom: 1.2rem; }
}

@media (max-width: 600px) {
  .news-panel { margin-top: 2.25rem; }
  .news-panel-intro { grid-template-columns: 1fr; gap: 0; }
  .news-panel .news-archive-link {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-panel .news-item-link:hover::after { transform: none; }
}