/* =============================================================================
   Kat Chapman, RN — design system
   Clinical, calm. Slate-green accent + warm clay for CTAs only.
   Self-hosted fonts. Light + dark via prefers-color-scheme. WCAG 2.1 AA.
   ============================================================================= */

/* ---------- Self-hosted fonts (subset .woff) ---------- */
@font-face { font-family:"Lora"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/lora-400.woff") format("woff"); }
@font-face { font-family:"Lora"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/lora-600.woff") format("woff"); }
@font-face { font-family:"Lora"; font-style:italic; font-weight:400; font-display:swap; src:url("/fonts/lora-italic-400.woff") format("woff"); }
@font-face { font-family:"DejaVuSans"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/dejavusans-400.woff") format("woff"); }
@font-face { font-family:"DejaVuSans"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/dejavusans-700.woff") format("woff"); }
@font-face { font-family:"DejaVuMono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/dejavusansmono-400.woff") format("woff"); }

/* ---------- Tokens: light ---------- */
:root{
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --sans:"DejaVuSans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:"DejaVuMono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* neutrals carry a slight green bias, not pure grey */
  --ground:#f2f4ef;        /* cool bone ground */
  --surface:#fbfbf7;       /* raised surface */
  --surface-2:#e9ece4;     /* sunken / bands */
  --ink:#141b17;           /* deep ink base */
  --ink-soft:#465049;      /* muted body */
  --ink-faint:#6a746c;     /* metadata */
  --hairline:rgba(20,27,23,.14);
  --hairline-strong:rgba(20,27,23,.24);

  --accent:#2f5a4f;        /* slate-green (AA as link text on ground) */
  --accent-hover:#20423a;
  --accent-tint:#e2ebe6;   /* faint accent wash */
  --accent-line:#a9c2b8;

  --cta:#a4491f;           /* warm clay — CTAs only */
  --cta-hover:#8b3c17;
  --cta-ink:#ffffff;

  --focus:#1f6feb;         /* high-contrast focus ring, both themes */
  --maxwidth:72rem;
  --measure:65ch;
  --radius:10px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(20,27,23,.05), 0 8px 24px rgba(20,27,23,.06);
  --step:clamp(1rem,.9rem + .5vw,1.2rem);
}

/* ---------- Tokens: dark ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --ground:#10161300; /* overwritten below (kept for clarity) */
    --ground:#111815;
    --surface:#18211c;
    --surface-2:#1e2822;
    --ink:#e9ece4;
    --ink-soft:#b3bdb4;
    --ink-faint:#8b968d;
    --hairline:rgba(233,236,228,.14);
    --hairline-strong:rgba(233,236,228,.26);

    --accent:#83b6a6;         /* lighter slate-green: AA on dark */
    --accent-hover:#a7cdc0;
    --accent-tint:#1b2a24;
    --accent-line:#3a5d52;

    --cta:#c85f31;            /* clay, lifted for dark bg */
    --cta-hover:#dd7345;
    --cta-ink:#0e130f;

    --focus:#7fb0ff;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.4);
  }
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:var(--step); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.15; color:var(--ink); letter-spacing:-.01em; margin:0 0 .5em; }
h1{ font-size:clamp(2.1rem,1.6rem + 2.4vw,3.3rem); }
h2{ font-size:clamp(1.55rem,1.2rem + 1.4vw,2.15rem); margin-top:0; }
h3{ font-size:1.28rem; }
h4{ font-size:1.08rem; }
p{ margin:0 0 1.1em; }
em{ font-style:italic; }
strong{ font-weight:700; }
a{ color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--accent-hover); }
hr{ border:0; border-top:1px solid var(--hairline); margin:2.5rem 0; }
small{ font-size:.85em; }

/* ---------- Focus (visible, AA) ---------- */
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
.skip-link{
  position:absolute; left:-999px; top:.5rem; z-index:100;
  background:var(--ink); color:var(--ground); padding:.6rem 1rem; border-radius:8px;
}
.skip-link:focus{ left:.5rem; }

/* ---------- Labels / metadata (mono) ---------- */
.eyebrow, .meta, .label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.meta{ color:var(--ink-faint); letter-spacing:.08em; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxwidth); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }
.section{ padding-block:clamp(2.6rem,6vw,4.5rem); }
.prose{ max-width:var(--measure); }
.prose p, .prose li{ color:var(--ink-soft); }
.prose h2{ margin-top:2em; }
.prose h3{ margin-top:1.6em; }
.lede{ font-size:1.2em; color:var(--ink-soft); }
.center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans);
  font-weight:700; font-size:1rem; line-height:1; padding:.85rem 1.4rem; border-radius:999px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } }
.btn-primary{ background:var(--cta); color:var(--cta-ink); border-color:var(--cta); }
.btn-primary:hover{ background:var(--cta-hover); border-color:var(--cta-hover); color:var(--cta-ink); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--hairline-strong); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; }

/* ---------- Header / nav ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--ground) 90%, transparent); backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--hairline); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px; }
.brand{ font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.brand span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:block; margin-top:1px; }
.nav-links{ list-style:none; display:flex; align-items:center; gap:1.35rem; margin:0; padding:0; }
.nav-links a{ color:var(--ink-soft); text-decoration:none; font-size:.98rem; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links .btn{ padding:.55rem 1rem; }
.nav-toggle{ display:none; background:transparent; border:1px solid var(--hairline-strong); border-radius:8px; padding:.5rem .6rem; color:var(--ink); cursor:pointer; }
.nav-toggle svg{ width:20px; height:20px; }

@media (max-width: 820px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    gap:0; background:var(--surface); border-bottom:1px solid var(--hairline);
    padding:.5rem clamp(1.1rem,4vw,2.5rem) 1.2rem; box-shadow:var(--shadow);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ border-top:1px solid var(--hairline); }
  .nav-links a{ display:block; padding:.85rem .2rem; }
  .nav-links .btn{ margin-top:.8rem; justify-content:center; }
}

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(3rem,8vw,6rem); }
.hero .eyebrow{ margin-bottom:1rem; display:block; }
.hero h1{ max-width:16ch; }
.hero .lede{ max-width:52ch; margin-top:.4rem; }

/* ---------- Bands / cards ---------- */
.band{ background:var(--surface-2); }
.grid-3{ display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); }
.grid-2{ display:grid; gap:1.4rem; grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:1.5rem 1.5rem 1.6rem; }
.card h3{ margin-top:.2rem; }
.card p:last-child{ margin-bottom:0; }
.card .num{ font-family:var(--mono); color:var(--accent); font-size:.8rem; letter-spacing:.1em; }

/* ---------- Lead magnet ---------- */
.magnet{ background:var(--accent-tint); border:1px solid var(--accent-line); border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,2.4rem); }
.magnet h2{ margin-top:0; }
.magnet ul{ padding-left:1.1rem; }
.magnet li{ margin:.35em 0; color:var(--ink-soft); }

/* ---------- Where I practice ---------- */
.towns{ font-family:var(--mono); font-size:.82rem; color:var(--ink-faint); letter-spacing:.04em; }

/* ---------- Forms ---------- */
.form{ max-width:34rem; }
.form.narrow{ max-width:28rem; }
.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-weight:700; font-size:.92rem; margin-bottom:.35rem; color:var(--ink); }
.field .hint{ font-size:.82rem; color:var(--ink-faint); margin:-.15rem 0 .4rem; }
.field input, .field select{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--hairline-strong); border-radius:var(--radius);
  padding:.7rem .8rem; transition:border-color .15s ease;
}
@media (prefers-reduced-motion: reduce){ .field input, .field select{ transition:none; } }
.field input:focus, .field select:focus{ border-color:var(--accent); }
.field.err input, .field.err select{ border-color:#c0392b; }
.field .error{ display:none; color:#c0392b; font-size:.82rem; margin-top:.3rem; }
.field.err .error{ display:block; }
@media (prefers-color-scheme: dark){ .field .error, .field.err input, .field.err select{ color:#f0a094; border-color:#e07a6a; } .field.err input, .field.err select{ color:var(--ink); } }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:.82rem; color:var(--ink-faint); margin-top:.6rem; }
.form-success{ display:none; background:var(--accent-tint); border:1px solid var(--accent-line); border-radius:var(--radius); padding:1rem 1.1rem; }
.form-success.show{ display:block; }
.form.hide{ display:none; }

/* ---------- Consult geo-gate states ---------- */
.gate{ display:none; margin-top:1.6rem; }
.gate.show{ display:block; }
.gate .cal{ aspect-ratio:4/3; width:100%; border:1px dashed var(--hairline-strong); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-family:var(--mono); font-size:.8rem; text-align:center; padding:1rem; }

/* ---------- Cookie consent ---------- */
.consent{ position:fixed; inset:auto 1rem 1rem 1rem; z-index:80; background:var(--surface); border:1px solid var(--hairline-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:1rem 1.1rem; max-width:34rem; margin-inline:auto; display:none; }
.consent.show{ display:block; }
.consent p{ font-size:.9rem; margin:0 0 .8rem; color:var(--ink-soft); }
.consent .btn-row{ margin-top:0; }
.consent .btn{ padding:.6rem 1.1rem; font-size:.92rem; }

/* ---------- Article / blog ---------- */
.article{ max-width:var(--measure); }
.article-head{ max-width:var(--measure); }
.article-head .meta{ margin-bottom:.6rem; }
.toc{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); padding:1rem 1.2rem; margin:1.6rem 0 2rem; }
.toc .label{ display:block; margin-bottom:.4rem; }
.toc ol{ margin:0; padding-left:1.1rem; }
.toc a{ text-decoration:none; }
.article h2, .article h3{ scroll-margin-top:84px; }
.article blockquote{ margin:1.4rem 0; padding:.4rem 0 .4rem 1.1rem; border-left:3px solid var(--accent-line); color:var(--ink-soft); font-style:italic; }
.article pre{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--radius); padding:1rem; overflow:auto; font-family:var(--mono); font-size:.85rem; }
.article code{ font-family:var(--mono); font-size:.88em; background:var(--surface-2); padding:.1em .35em; border-radius:5px; }
.article pre code{ background:none; padding:0; }
.post-list{ list-style:none; padding:0; margin:0; max-width:var(--measure); }
.post-list li{ padding:1.3rem 0; border-top:1px solid var(--hairline); }
.post-list li:first-child{ border-top:0; }
.post-list h3{ margin:.1rem 0 .3rem; }
.post-list a{ text-decoration:none; }
.post-list p{ color:var(--ink-soft); margin:0; }
.pagination{ display:flex; gap:1rem; justify-content:space-between; margin-top:2rem; font-family:var(--mono); font-size:.85rem; }

/* CTA block reused across pages */
.cta-block{ border-top:1px solid var(--hairline); margin-top:2.6rem; padding-top:2rem; }

/* ---------- Press ---------- */
.factlist{ list-style:none; padding:0; margin:0; }
.factlist li{ padding:.5rem 0; border-top:1px solid var(--hairline); display:flex; gap:1rem; }
.factlist .k{ font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); min-width:9rem; }
.headshot-grid img{ border-radius:var(--radius); border:1px solid var(--hairline); }
.boiler{ background:var(--surface-2); border-radius:var(--radius); padding:1rem 1.2rem; }
.boiler p:last-child{ margin-bottom:0; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--surface-2); border-top:1px solid var(--hairline); margin-top:3rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-block:2.6rem; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr; gap:1.4rem; } }
.footer-grid h4{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin:.35rem 0; }
.footer-grid a{ color:var(--ink-soft); text-decoration:none; font-size:.95rem; }
.footer-grid a:hover{ color:var(--ink); }
.footer-bottom{ border-top:1px solid var(--hairline); padding-block:1.2rem; font-size:.82rem; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:space-between; }
.disclaimer{ font-size:.8rem; color:var(--ink-faint); max-width:var(--measure); margin-top:1rem; }

/* ---------- 404 ---------- */
.notfound{ text-align:center; padding-block:clamp(3rem,10vw,6rem); }
.notfound .code{ font-family:var(--mono); color:var(--accent); letter-spacing:.2em; }

/* ---------- utilities ---------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.stack > * + *{ margin-top:1.1rem; }
.muted{ color:var(--ink-soft); }
.nowrap{ white-space:nowrap; }