@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Lora:wght@400;500;600&display=swap');

:root {
  color-scheme: light;
  --ink: #243332;
  --body: #394745;
  --muted: #667471;
  --teal: #286c68;
  --teal-dark: #1f5552;
  --teal-pale: #e6f1ed;
  --clay: #a94f38;
  --clay-pale: #f7ebe5;
  --gold: #b1802c;
  --cream: #fbf7f0;
  --paper: #fffdf9;
  --sand: #f2e9dc;
  --line: #e3d9cb;
  --display: 'Playfair Display', Georgia, serif;
  --reading: 'Lora', Georgia, serif;
  --ui: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 16px/1.75 var(--reading);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal-dark); text-underline-offset: .2em; }
a:hover { color: var(--clay); }
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  border-radius: 3px;
}
.skip-link {
  position: absolute; z-index: 10; left: 1rem; top: .75rem;
  padding: .65rem 1rem; transform: translateY(-160%);
  color: var(--paper); background: var(--teal-dark);
  font: 600 .9rem var(--ui); border-radius: 4px;
}
.skip-link:focus { transform: translateY(0); }
.notice {
  padding: .65rem 1.25rem;
  text-align: center;
  color: #f9f5ed;
  background: var(--teal-dark);
  font: 500 .82rem/1.5 var(--ui);
  letter-spacing: .01em;
}
.notice strong { color: #fff; }
.site-nav {
  position: sticky; z-index: 5; top: 0;
  background: rgb(255 253 249 / 96%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.nav-inner {
  max-width: 1160px; min-height: 76px; margin: auto; padding: .7rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.25; }
.brand-name { color: var(--ink); font: 600 1.25rem var(--display); }
.brand-role {
  margin-top: .25rem; color: var(--teal); font: 700 .65rem var(--ui);
  text-transform: uppercase; letter-spacing: .11em;
}
.nav-links { display: flex; align-items: center; gap: clamp(.8rem, 2.3vw, 2rem); list-style: none; padding: 0; margin: 0; }
.nav-links a {
  color: var(--body); text-decoration: none;
  font: 600 .88rem var(--ui); transition: color .18s ease, background-color .18s ease;
}
.nav-links a:hover { color: var(--teal); }
.nav-links .nav-contact {
  display: inline-flex; padding: .65rem 1.15rem; border-radius: 999px;
  color: var(--paper); background: var(--teal-dark);
}
.nav-links .nav-contact:hover { color: white; background: var(--clay); }
.crumbs {
  max-width: 1100px; margin: auto; padding: 1.15rem 2rem 0;
  color: var(--muted); font: 500 .79rem var(--ui);
}
.crumbs a { color: var(--teal-dark); }
.hero {
  position: relative; overflow: hidden;
  padding: clamp(3.1rem, 7vw, 6rem) 2rem 3.4rem;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.hero::after {
  content: ""; position: absolute; width: 25rem; height: 25rem;
  right: max(-8rem, calc((100vw - 1200px) / 2)); top: -12rem;
  border: 1px solid rgb(40 108 104 / 14%); border-radius: 50%;
  box-shadow: 0 0 0 2.2rem rgb(40 108 104 / 3%), 0 0 0 4.6rem rgb(40 108 104 / 2%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: auto; }
.eyebrow {
  margin: 0 0 1rem; color: var(--teal);
  font: 700 .73rem var(--ui); letter-spacing: .16em; text-transform: uppercase;
}
h1, h2, h3 { color: var(--ink); font-family: var(--display); font-weight: 600; }
h1 {
  max-width: 850px; margin: 0; font-size: clamp(2.45rem, 6vw, 4.75rem);
  line-height: 1.08; letter-spacing: -.035em;
}
.hero-intro {
  max-width: 690px; margin: 1.45rem 0 0; color: #4b5c58;
  font: 1.13rem/1.8 var(--reading);
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.6rem;
  color: var(--muted); font: 600 .8rem var(--ui);
}
.hero-meta span { display: inline-flex; align-items: center; gap: .5rem; }
.hero-meta span::before { content: ""; width: 6px; height: 6px; background: var(--clay); border-radius: 50%; }
.content-layout {
  max-width: 1100px; margin: 0 auto; padding: 3.6rem 2rem 5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.prose { min-width: 0; }
.prose > p:first-child { margin-top: 0; font-size: 1.08rem; }
.prose p { margin: 0 0 1.25rem; }
.prose h2 {
  margin: 2.65rem 0 .8rem; font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.25; letter-spacing: -.02em;
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin: 1.6rem 0 .45rem; font-size: 1.25rem; }
.prose ul, .prose ol { margin: .25rem 0 1.35rem; padding-left: 1.35rem; }
.prose li { padding-left: .25rem; margin: .45rem 0; }
.prose li::marker { color: var(--clay); }
.prose strong { color: var(--ink); }
.note {
  margin: 1.8rem 0; padding: 1.25rem 1.45rem;
  background: var(--teal-pale); border-left: 4px solid var(--teal);
  color: var(--teal-dark); border-radius: 0 12px 12px 0;
}
.note p:last-child { margin-bottom: 0; }
.side-stack { position: sticky; top: 104px; display: grid; gap: 1rem; }
.side-card {
  padding: 1.35rem 1.4rem; background: var(--cream);
  border: 1px solid var(--line); border-radius: 14px;
}
.side-card h2, .side-card h3 {
  margin: 0 0 .7rem; font: 700 .76rem var(--ui);
  color: var(--teal-dark); letter-spacing: .12em; text-transform: uppercase;
}
.side-card p { margin: 0 0 .7rem; font-size: .9rem; line-height: 1.65; }
.side-card p:last-child { margin-bottom: 0; }
.side-card ul { list-style: none; margin: 0; padding: 0; }
.side-card li { padding: .43rem 0; border-bottom: 1px solid var(--line); font: 500 .85rem/1.5 var(--ui); }
.side-card li:last-child { border-bottom: 0; }
.side-card .detail { color: var(--muted); }
.side-card.accent { background: var(--clay-pale); border-color: #ead0c3; }
.side-card.accent h2 { color: #783b2b; }
.side-card.accent a { font-weight: 700; }
.contact-band {
  margin-top: 2.6rem; padding: clamp(1.5rem, 4vw, 2.4rem);
  background: var(--teal-dark); color: #f8f5ed; border-radius: 18px;
}
.contact-band h2 { color: #fffaf1; margin: 0 0 .55rem; font-size: 1.7rem; }
.contact-band p { margin: 0 0 1.1rem; color: #e0ece7; }
.button-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .72rem 1.15rem; border: 1px solid transparent; border-radius: 999px;
  color: var(--teal-dark); background: var(--paper); text-decoration: none;
  font: 700 .88rem var(--ui); transition: transform .18s ease, background-color .18s ease;
}
.button:hover { color: var(--teal-dark); background: #f2e9dc; transform: translateY(-2px); }
.button.secondary { color: #fff; background: transparent; border-color: rgb(255 255 255 / 48%); }
.button.secondary:hover { color: #fff; background: rgb(255 255 255 / 12%); }
.related {
  margin-top: 2.8rem; padding: 1.5rem 1.6rem; background: #f6f0e7;
  border: 1px solid var(--line); border-radius: 15px;
}
.related h2 { margin: 0 0 .8rem; font-size: 1.45rem; }
.related ul { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; }
.related li { break-inside: avoid; margin: .45rem 0; font: 500 .88rem/1.5 var(--ui); }
.local-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.local-links a {
  padding: .55rem .85rem; background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; font: 600 .8rem var(--ui);
}
.crisis {
  margin: 2rem 0 0; padding: 1rem 1.2rem; color: #713b2f;
  background: #fbefea; border: 1px solid #e9cbbd; border-radius: 10px;
  font-size: .9rem;
}
.site-footer { padding: 2.3rem 2rem; color: #e1e9e3; background: #263432; text-align: center; }
.site-footer p { max-width: 840px; margin: .45rem auto; font: .82rem/1.7 var(--ui); }
.site-footer strong { color: #fffaf1; }
.site-footer a { color: #badbd1; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem 1.5rem; margin: 1.2rem 0; }
.footer-links a { font: 600 .82rem var(--ui); }

@media (max-width: 760px) {
  .nav-inner { align-items: flex-start; padding: .85rem 1.1rem; flex-direction: column; gap: .75rem; }
  .nav-links { width: 100%; flex-wrap: wrap; gap: .55rem 1rem; }
  .nav-links a { font-size: .82rem; }
  .nav-links .nav-contact { padding: .4rem .8rem; }
  .crumbs { padding: 1rem 1.25rem 0; }
  .hero { padding: 3rem 1.25rem 2.5rem; }
  .hero::after { right: -17rem; }
  .content-layout { grid-template-columns: 1fr; padding: 2.5rem 1.25rem 3.5rem; gap: 2rem; }
  .side-stack { position: static; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-card:last-child { grid-column: 1 / -1; }
  .related ul { columns: 1; }
  .site-footer { padding: 2rem 1.25rem; }
}
@media (max-width: 450px) {
  .side-stack { grid-template-columns: 1fr; }
  .side-card:last-child { grid-column: auto; }
  .hero-meta { flex-direction: column; gap: .5rem; }
  .button-row { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}