/* Art direction: calm, trustworthy informational site for a self-help group.
   Palette: dark blue, light grey, white.
   Typography: Merriweather for headings + Source Sans 3 for body for warmth and readability.
   Density: balanced, spacious on content and compact in navigation. */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.2rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem;
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-2: #eef2f6;
  --color-surface-offset: #e4eaf1;
  --color-border: rgba(11, 42, 74, 0.14);
  --color-divider: rgba(11, 42, 74, 0.1);
  --color-text: #10243d;
  --color-text-muted: #526274;
  --color-text-inverse: #ffffff;
  --color-primary: #0b2a4a;
  --color-primary-hover: #173d67;
  --color-primary-soft: #d9e3ef;
  --shadow-sm: 0 2px 10px rgba(11, 42, 74, 0.06);
  --shadow-md: 0 12px 28px rgba(11, 42, 74, 0.10);
  --font-display: 'Merriweather', Georgia, serif;
  --font-body: 'Source Sans 3', Arial, sans-serif;
}
*,:before,:after{box-sizing:border-box}
html{-webkit-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--color-bg);color:var(--color-text);font:var(--text-base)/1.7 var(--font-body)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.skip-link{position:absolute;left:var(--space-4);top:-3rem;background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);z-index:30}
.skip-link:focus{top:var(--space-4)}
.site-shell{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
.sidebar{grid-row:1 / span 2;grid-column:1;position:sticky;top:0;align-self:start;height:100vh;background:linear-gradient(180deg, var(--color-primary) 0%, #12395f 100%);color:var(--color-text-inverse);padding:var(--space-8) var(--space-5);box-shadow:var(--shadow-md)}
.brand-small{display:none}
.nav-title{font:700 var(--text-lg)/1.2 var(--font-display);margin:0 0 var(--space-6)}
.nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}
.nav-list a{display:block;padding:0.9rem 1rem;border-radius:var(--radius-md);font-size:var(--text-sm);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);min-height:44px}
.nav-list a:hover,.nav-list a.active{background:rgba(255,255,255,0.16)}
.topbar{grid-column:2;position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-divider)}
.banner{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:var(--space-6);align-items:stretch;padding:var(--space-5) clamp(var(--space-4), 3vw, var(--space-10))}
.logo-panel{display:flex;align-items:stretch;justify-content:stretch;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:0;box-shadow:var(--shadow-sm);min-height:188px}
.logo-panel img{width:100%;height:100%;object-fit:cover}
.quote-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-4), 3vw, var(--space-8));box-shadow:var(--shadow-sm)}
.quote-panel blockquote{margin:0;font:700 clamp(1.1rem, 1rem + 1vw, 1.8rem)/1.5 var(--font-display);color:var(--color-primary)}
.quote-panel cite{display:block;margin-top:var(--space-3);font-size:var(--text-sm);font-style:normal;color:var(--color-text-muted)}
.page{grid-column:2;padding:clamp(var(--space-5), 3vw, var(--space-10))}
.content-card{max-width:980px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:clamp(var(--space-5), 3vw, var(--space-10));box-shadow:var(--shadow-sm)}
.content-card h1,.content-card h2,.content-card h3{font-family:var(--font-display);line-height:1.2;color:var(--color-primary);margin:0 0 var(--space-4)}
.content-card h1{font-size:var(--text-xl)}
.content-card h2{font-size:var(--text-lg);margin-top:var(--space-8)}
.content-card p,.content-card li{max-width:72ch;color:var(--color-text)}
.content-card p + p,.content-card ul,.content-card ol{margin-top:var(--space-4)}
.content-card ul,.content-card ol{padding-left:1.3rem}
.lead{font-size:clamp(1.1rem, 1rem + 0.4vw, 1.35rem);color:var(--color-text-muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0.8rem 1.15rem;border-radius:var(--radius-md);border:1px solid var(--color-primary);font-size:var(--text-sm);font-weight:700}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-secondary{background:var(--color-primary-soft);color:var(--color-primary);border-color:transparent}
.info-box{margin-top:var(--space-8);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-surface-2);border:1px solid var(--color-border)}
.link-list li{margin-bottom:var(--space-3)}
.link-list a{color:var(--color-primary);text-decoration:underline}
.contact-card{display:grid;gap:var(--space-4);background:var(--color-surface-2);border-radius:var(--radius-lg);padding:var(--space-5);margin-top:var(--space-6)}
.page-footer{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--color-divider);font-size:var(--text-sm);color:var(--color-text-muted)}
.mobile-toggle{display:none}
@media (max-width: 920px){
  .site-shell{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
  .sidebar{grid-row:1;grid-column:1;position:static;height:auto;padding:var(--space-4)}
  .brand-small{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
  .nav-title{margin:0}
  .mobile-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid rgba(255,255,255,0.28);border-radius:var(--radius-md);color:var(--color-text-inverse)}
  .nav-wrap{display:none;margin-top:var(--space-4)}
  .nav-wrap.open{display:block}
  .topbar,.page{grid-column:1}
  .banner{grid-template-columns:1fr;gap:var(--space-4)}
  .logo-panel{min-height:160px}
  .logo-panel img{width:100%;height:100%;object-fit:cover}
}
@media (max-width: 560px){
  .page{padding:var(--space-4)}
  .content-card{padding:var(--space-5)}
}