:root,
[data-theme="light"] {
  --font-display: 'Zodiak', Georgia, serif;
  --font-body: 'General Sans', Inter, sans-serif;
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2.15rem);
  --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;
  --color-bg: #f6f4ef;
  --color-surface: #fcfbf8;
  --color-surface-2: #f1eee8;
  --color-border: rgba(40, 37, 29, 0.12);
  --color-divider: rgba(40, 37, 29, 0.08);
  --color-text: #25211b;
  --color-text-muted: #6d695f;
  --color-primary: #0d6c6a;
  --color-primary-hover: #0a5654;
  --color-accent: #b78a36;
  --color-success: #2e6b3b;
  --color-danger: #8d3e3e;
  --color-inverse: #f8f6f1;
  --shadow-sm: 0 1px 2px rgba(25, 20, 11, 0.06);
  --shadow-md: 0 12px 32px rgba(25, 20, 11, 0.08);
  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.25rem;
  --content: 1180px;
}

[data-theme="dark"] {
  --color-bg: #171614;
  --color-surface: #1f1d1a;
  --color-surface-2: #292623;
  --color-border: rgba(255,255,255,0.1);
  --color-divider: rgba(255,255,255,0.08);
  --color-text: #f0ece4;
  --color-text-muted: #b0aaa0;
  --color-primary: #63aba8;
  --color-primary-hover: #85c2bf;
  --color-accent: #d2a759;
  --color-success: #7db18c;
  --color-danger: #d07c7c;
  --color-inverse: #171614;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 20px 42px rgba(0,0,0,0.28);
}

*,: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;font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;background:var(--color-bg);color:var(--color-text)}
a,button,input,textarea,select{font:inherit;color:inherit}
a{text-decoration:none}
img,svg{display:block;max-width:100%}
button{border:none;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:var(--color-surface);padding:0.75rem 1rem;z-index:50}
.shell{width:min(var(--content),calc(100% - 2rem));margin-inline:auto}
.eyebrow{font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-3)}
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--color-bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--color-divider)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0}
.brand{display:flex;align-items:center;gap:0.9rem;color:var(--color-text)}
.brand svg{width:44px;height:44px;color:var(--color-primary);stroke:currentColor;fill:none;stroke-width:2}
.brand strong{display:block;font-size:var(--text-sm)}
.brand small{display:block;color:var(--color-text-muted);font-size:var(--text-xs)}
.nav-list{display:flex;gap:var(--space-2);list-style:none;padding:0;margin:0}
.nav-list a{display:inline-flex;align-items:center;min-height:44px;padding:0.65rem 0.9rem;border-radius:999px;color:var(--color-text-muted)}
.nav-list a:hover,.nav-list a:focus-visible{background:var(--color-surface-2);color:var(--color-text)}
.theme-toggle{min-height:44px;padding:0.7rem 1rem;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface)}

.hero{padding:clamp(3rem,7vw,6rem) 0}
.hero-grid{display:grid;grid-template-columns:1.35fr 0.8fr;gap:var(--space-8);align-items:start}
.hero-copy h1,.section-head h2,.profile-dialog h2{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.02;letter-spacing:-0.03em;margin:0 0 var(--space-4)}
.lead{max-width:60ch;color:var(--color-text-muted);margin-bottom:var(--space-6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-6)}
.hero-points{display:grid;gap:var(--space-2);padding:0;list-style:none;color:var(--color-text-muted)}
.hero-points li{padding-left:1.1rem;position:relative}
.hero-points li::before{content:'';position:absolute;left:0;top:0.72rem;width:0.42rem;height:0.42rem;border-radius:50%;background:var(--color-accent)}
.hero-panel,.side-panel,.flow-card,.resource-item,.contact-note,.profile-card,.filter-bar,.contact-form,.info-block{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.hero-panel{padding:var(--space-5);display:grid;gap:var(--space-4)}
.metric-card{padding:var(--space-4);background:var(--color-surface-2);border-radius:var(--radius-md)}
.metric-label{display:block;color:var(--color-text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.35rem}
.metric-card strong{font-size:var(--text-lg);line-height:1.1}
.metric-card.emphasis{background:color-mix(in oklab,var(--color-primary) 10%,var(--color-surface))}
.panel-note{margin:0;color:var(--color-text-muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0.9rem 1.2rem;border-radius:999px;font-size:var(--text-sm);font-weight:600}
.btn-primary{background:var(--color-primary);color:var(--color-inverse)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-secondary{background:var(--color-surface);border:1px solid var(--color-border)}
.section{padding:clamp(3rem,6vw,5rem) 0}
.section-surface{background:color-mix(in oklab,var(--color-surface) 80%,var(--color-bg))}
.directory-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-8)}
.section-head{margin-bottom:var(--space-5)}
.section-head p{color:var(--color-text-muted);max-width:62ch}
.narrow{max-width:42rem}
.filter-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);padding:var(--space-4);margin-bottom:var(--space-4)}
.filter-bar label,.contact-form label{display:grid;gap:0.45rem}
.filter-bar span,.contact-form span{font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted)}
select,input,textarea{width:100%;min-height:48px;padding:0.85rem 0.95rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text)}
textarea{min-height:140px;resize:vertical}
.search-wrap{grid-column:span 1}
.tab-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.tab-btn{min-height:42px;padding:0.7rem 1rem;border-radius:999px;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted)}
.tab-btn.active{background:var(--color-text);color:var(--color-bg);border-color:transparent}
.results-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.results-meta p{margin:0;color:var(--color-text-muted)}
.text-btn{color:var(--color-primary);font-weight:600}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.profile-card{padding:var(--space-5);display:grid;gap:var(--space-4);transition:transform .18s ease, box-shadow .18s ease}
.profile-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.profile-top{display:flex;align-items:start;justify-content:space-between;gap:var(--space-4)}
.profile-top h3{margin:0;font-size:var(--text-lg);line-height:1.1}
.profile-city{color:var(--color-text-muted);font-size:var(--text-sm)}
.badges{display:flex;flex-wrap:wrap;gap:0.5rem}
.badge{display:inline-flex;align-items:center;padding:0.35rem 0.65rem;border-radius:999px;font-size:var(--text-xs);font-weight:700}
.badge-primary{background:color-mix(in oklab,var(--color-primary) 14%,var(--color-surface));color:var(--color-primary)}
.badge-accent{background:color-mix(in oklab,var(--color-accent) 18%,var(--color-surface));color:#8a651f}
.badge-neutral{background:var(--color-surface-2);color:var(--color-text-muted)}
.profile-card p{margin:0;color:var(--color-text-muted)}
.card-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.availability{font-size:var(--text-sm);font-weight:600;color:var(--color-success)}
.side-panel{display:grid;gap:var(--space-4);align-self:start}
.info-block{padding:var(--space-5)}
.flow-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:var(--space-4);align-items:start}
.flow-card{padding:var(--space-5)}
.flow-card span{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-4)}
.resources-layout{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--space-8)}
.resource-stack{display:grid;gap:var(--space-4)}
.resource-item{padding:var(--space-5)}
.resource-item.urgent{background:color-mix(in oklab,var(--color-danger) 8%,var(--color-surface))}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-8)}
.contact-form{padding:var(--space-5);display:grid;gap:var(--space-4)}
.contact-note{padding:var(--space-5);align-self:start}
.form-response{margin-top:var(--space-4);font-weight:600;color:var(--color-primary)}
.profile-dialog{width:min(680px,calc(100% - 1rem));border:none;border-radius:var(--radius-lg);padding:0;background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-md)}
.profile-dialog::backdrop{background:rgba(14,12,9,0.45);backdrop-filter:blur(4px)}
.dialog-head{display:flex;justify-content:space-between;align-items:start;gap:var(--space-4);padding:var(--space-5);border-bottom:1px solid var(--color-divider)}
.dialog-body{padding:var(--space-5);display:grid;gap:var(--space-3)}
.icon-btn{width:44px;height:44px;border-radius:999px;background:var(--color-surface-2);font-size:1.3rem}
.empty-state{padding:var(--space-8);border:1px dashed var(--color-border);border-radius:var(--radius-lg);text-align:left;background:var(--color-surface)}

@media (max-width: 1080px){
  .directory-layout,.contact-layout,.resources-layout,.hero-grid,.flow-grid{grid-template-columns:1fr}
  .side-panel,.contact-note{order:-1}
}
@media (max-width: 820px){
  .topbar{flex-wrap:wrap}
  .nav-list{overflow:auto;padding-bottom:0.25rem}
  .filter-bar,.card-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}