/* ============================================================
   SoberInKC — design system v2
   Modern, app-grade, calm & trustworthy. Deep teal + ink,
   warm amber accent, warm paper background. Mobile-first.
   ============================================================ */
:root{
  /* color */
  --ink:#15222d;
  --ink-soft:#4c5e6d;
  --ink-faint:#72828f;
  --accent:#0b6560;
  --accent-dark:#084f4a;
  --accent-deep:#07332f;
  --accent-tint:#e3f1ee;
  --accent-tint-2:#eef6f4;
  --amber:#e9a83a;
  --amber-dark:#b97a14;
  --paper:#ffffff;
  --bg:#f7f5f0;
  --line:#e2ded4;
  --line-soft:#eae7dd;
  --warn-bg:#fdf6e0;
  --warn-line:#ecd9a0;
  --warn-ink:#5c4a12;
  /* type */
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  /* shape & depth */
  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:26px;
  --shadow-sm:0 1px 2px rgba(21,34,45,.05),0 2px 8px rgba(21,34,45,.05);
  --shadow-md:0 2px 4px rgba(21,34,45,.05),0 10px 28px -8px rgba(21,34,45,.14);
  --shadow-lg:0 4px 8px rgba(21,34,45,.06),0 20px 44px -12px rgba(7,51,47,.22);
  --tap:52px;
  --ease:cubic-bezier(.22,.8,.32,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:1.05rem;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:#fff}
a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-decoration-color:rgba(11,101,96,.35);
  text-underline-offset:3px;
  transition:color .18s var(--ease),text-decoration-color .18s var(--ease);
}
a:hover{color:var(--accent);text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
  border-radius:6px;
}
img{max-width:100%}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid rgba(21,34,45,.08);
  box-shadow:0 1px 12px rgba(21,34,45,.05);
}
.site-header .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1rem;
  padding-top:.65rem;padding-bottom:.65rem;
}
.brand{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--font-display);
  font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink);line-height:1.05;
}
.brand::before{
  content:"";flex:0 0 auto;width:42px;height:42px;border-radius:13px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 4.5 19 11h-2.2v7.5H13.6V14h-3.2v4.5H7.2V11H5z'/%3E%3C/svg%3E")
    center/24px 24px no-repeat,
    linear-gradient(140deg,#0e7a72,var(--accent) 55%,var(--accent-deep));
  box-shadow:0 4px 10px -2px rgba(7,51,47,.4),inset 0 1px 0 rgba(255,255,255,.25);
}
.brand .kc{color:var(--accent)}
.brand small{
  display:block;font-family:var(--font-body);
  font-size:.74rem;font-weight:600;color:var(--ink-faint);
  letter-spacing:.02em;margin-top:.15rem;
}
.main-nav{display:flex;flex-wrap:wrap;gap:.25rem;margin-left:auto}
.main-nav a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.45rem .85rem;border-radius:999px;text-decoration:none;
  color:var(--ink-soft);font-weight:600;font-size:.96rem;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.main-nav a:hover{background:var(--accent-tint-2);color:var(--accent-dark)}
.main-nav a[aria-current="page"]{background:var(--accent-tint);color:var(--accent-dark)}

/* ---------- layout & type ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 1.15rem}
main{padding:2.4rem 0 3.4rem}
.narrow{max-width:45rem}
h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  letter-spacing:-.015em;
}
h1{font-size:clamp(1.9rem,4.6vw,2.5rem);line-height:1.15;font-weight:800;margin:.2rem 0 .7rem}
h2{font-size:clamp(1.35rem,3vw,1.6rem);line-height:1.25;font-weight:700;margin:2.4rem 0 .75rem}
h3{font-size:1.13rem;line-height:1.35;font-weight:700;margin:1.5rem 0 .45rem}
p{margin:.6rem 0}
.lede{font-size:1.16rem;line-height:1.6;color:var(--ink-soft);max-width:40rem}
ul,ol{padding-left:1.35rem}
li{margin:.35rem 0}
li::marker{color:var(--accent);font-weight:700}
strong{color:var(--ink)}

/* ---------- hero (home) ---------- */
.hero{
  position:relative;overflow:hidden;
  color:#eaf4f1;
  background:
    radial-gradient(560px 340px at 88% -10%,rgba(233,168,58,.32),transparent 62%),
    radial-gradient(720px 460px at -12% 115%,rgba(46,160,148,.4),transparent 60%),
    linear-gradient(155deg,#0a423d 0%,var(--accent-dark) 52%,var(--accent) 130%);
  padding:3.2rem 0 3rem;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);
}
.hero .wrap{position:relative;z-index:1}
.hero h1{
  color:#fff;
  font-size:clamp(2.5rem,7vw,3.6rem);
  letter-spacing:-.03em;margin:0 0 .5rem;
}
.hero .subtitle{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2.8vw,1.35rem);font-weight:700;line-height:1.4;
  color:#bfe3da;max-width:36rem;margin:.2rem 0 .8rem;
}
.hero .lede{color:rgba(234,244,241,.85);font-size:1.1rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 .3rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:var(--tap);padding:.75rem 1.45rem;border-radius:14px;
  background:linear-gradient(160deg,#0e7a72,var(--accent));
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.03rem;
  text-decoration:none;border:1px solid transparent;
  box-shadow:0 8px 20px -8px rgba(7,51,47,.55),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.btn:hover{
  color:#fff;transform:translateY(-1px);
  box-shadow:0 12px 26px -8px rgba(7,51,47,.55),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn:active{transform:translateY(0) scale(.985)}
.btn.secondary{
  background:var(--paper);color:var(--accent-dark);
  border-color:var(--line);box-shadow:var(--shadow-sm);
}
.btn.secondary:hover{background:var(--accent-tint-2);color:var(--accent-dark)}
.hero .btn{
  background:#fff;color:var(--accent-deep);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45);
}
.hero .btn:hover{background:#fdfdf8;color:var(--accent-deep)}
.hero .btn.secondary{
  background:rgba(255,255,255,.08);color:#fff;
  border-color:rgba(255,255,255,.45);box-shadow:none;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.hero .btn.secondary:hover{background:rgba(255,255,255,.18);color:#fff}

/* ---------- home cards ---------- */
.card-grid{
  display:grid;gap:1.1rem;margin:1.3rem 0;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.card{
  position:relative;
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:1.35rem 1.3rem 1.25rem;background:var(--paper);
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card::before{
  content:"";position:absolute;top:0;left:1.3rem;right:1.3rem;height:3px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--accent),var(--amber));
  opacity:.85;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line)}
.card h3{margin-top:.15rem;font-size:1.18rem}
.card p{color:var(--ink-soft);font-size:.99rem}
.card a.more{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:700;text-decoration:none;color:var(--accent-dark);
}
.card a.more:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- notice / caution boxes ---------- */
.notice{
  border:1px solid #cfe4de;
  background:linear-gradient(165deg,var(--accent-tint) 0%,var(--accent-tint-2) 70%);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:1.3rem 1.4rem;margin:1.6rem 0;
}
.notice h2,.notice h3{margin-top:0}
.caution{
  border:1px solid var(--warn-line);
  background:linear-gradient(165deg,var(--warn-bg),#fffaf0);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:1.25rem 1.35rem;margin:1.6rem 0;
  color:var(--warn-ink);
}
.caution h2,.caution h3{margin-top:0;color:#4a3a0d}
.caution strong{color:#4a3a0d}
.last-checked{
  font-size:.92rem;color:var(--ink-soft);
  border-top:1px dashed var(--line);padding-top:.8rem;margin-top:1.8rem;
}

/* ---------- directory: filters ---------- */
.filters{
  display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;
  width:fit-content;max-width:100%;
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:999px;box-shadow:var(--shadow-sm);
  padding:.4rem;margin:1.3rem 0 .5rem;
}
.filters .label{font-weight:700;font-size:.95rem;padding:0 .45rem 0 .7rem;color:var(--ink-soft)}
.filter-btn{
  min-height:48px;padding:.55rem 1.1rem;border-radius:999px;
  border:1px solid transparent;background:transparent;color:var(--ink-soft);
  font-family:var(--font-body);font-size:.99rem;font-weight:600;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.filter-btn:hover{background:var(--accent-tint-2);color:var(--accent-dark)}
.filter-btn[aria-pressed="true"]{
  background:linear-gradient(160deg,#0e7a72,var(--accent));
  color:#fff;font-weight:700;
  box-shadow:0 5px 14px -5px rgba(7,51,47,.55);
}
.filter-btn[aria-pressed="true"]:hover{color:#fff}
.filter-count{font-size:.94rem;color:var(--ink-faint);margin:.45rem 0 0;min-height:1.4em}

/* jump links */
.jump-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 1.6rem}
.jump-links a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.45rem .95rem;border:1px solid var(--line-soft);border-radius:999px;
  text-decoration:none;font-weight:600;font-size:.94rem;
  background:var(--paper);color:var(--ink-soft);box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.jump-links a:hover{color:var(--accent-dark);border-color:#cfe4de;transform:translateY(-1px)}

/* directory sections */
section[data-area]{margin-top:2.6rem;scroll-margin-top:96px}
section[data-area]>h2{
  display:flex;align-items:center;gap:.7rem;margin-top:0;
}
section[data-area]>h2::before{
  content:"";flex:0 0 auto;width:9px;height:1.55em;border-radius:99px;
  background:linear-gradient(180deg,var(--accent),var(--amber));
}

/* ---------- directory: listing cards ---------- */
.listing-grid{
  display:grid;gap:1.1rem;margin:1.1rem 0 1.8rem;
  grid-template-columns:repeat(auto-fill,minmax(295px,1fr));
}
.listing{
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:1.25rem 1.25rem 1.15rem;background:var(--paper);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:.4rem;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.listing:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line)}
.listing h3{margin:0;font-size:1.16rem;letter-spacing:-.01em}
.listing .meta{
  font-size:.88rem;font-weight:600;letter-spacing:.015em;
  text-transform:uppercase;color:var(--ink-faint);
}
.listing p{font-size:.985rem;margin:.25rem 0;color:#31424f}
.listing .contact{
  margin-top:auto;padding-top:.75rem;
  border-top:1px solid var(--line-soft);
  font-weight:600;font-size:.99rem;
}
.listing .contact a{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:700;text-decoration:none;
}
.listing .contact a:hover{text-decoration:underline;text-underline-offset:3px}
.tag-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:.1rem 0 .2rem}
.tag{
  font-size:.78rem;font-weight:700;letter-spacing:.025em;
  background:var(--accent-tint);color:var(--accent-dark);
  border-radius:999px;padding:.24rem .65rem;
}
.tag.plain{background:#f0eee7;color:var(--ink-soft)}

/* Oxford mini cards */
.mini-grid{
  display:grid;gap:.75rem;margin:.9rem 0 1.8rem;
  grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
}
.mini{
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:.85rem .95rem;background:var(--paper);box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.mini:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.mini strong{display:block;font-family:var(--font-display);font-size:1rem;letter-spacing:-.01em}
.mini span{font-size:.9rem;color:var(--ink-soft);line-height:1.45;display:block;margin-top:.15rem}

/* details expander inside listings */
details.more-homes{margin:.3rem 0 .2rem}
details.more-homes summary{
  cursor:pointer;font-weight:700;color:var(--accent-dark);font-size:.97rem;
  min-height:44px;display:flex;align-items:center;gap:.4rem;
  list-style:none;
}
details.more-homes summary::-webkit-details-marker{display:none}
details.more-homes summary::after{
  content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s var(--ease);
}
details.more-homes[open ] summary::after{transform:rotate(225deg) translateY(-1px)}

/* ---------- article pages ---------- */
article h2:first-of-type{margin-top:1.7rem}
article h2{
  padding-bottom:.4rem;
  border-bottom:2px solid var(--accent-tint);
}
article .lede{max-width:44rem}
.fact-box{
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:var(--paper);box-shadow:var(--shadow-sm);
  padding:1.25rem 1.35rem;margin:1.35rem 0;
}
.fact-box h3{margin-top:0}
.checklist{list-style:none;padding-left:0}
.checklist li{position:relative;padding-left:2.05rem;margin:.55rem 0}
.checklist li::before{
  content:"✓";position:absolute;left:0;top:.08em;
  width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--accent-tint);color:var(--accent-dark);
  font-size:.82rem;font-weight:800;line-height:1.35rem;text-align:center;
}
ol li::marker{
  font-family:var(--font-display);font-weight:800;color:var(--accent);
}

/* ---------- footer ---------- */
.site-footer{
  background:linear-gradient(180deg,#12242f,#0b171e);
  padding:2.4rem 0 2.6rem;margin-top:2rem;
  font-size:.96rem;color:#aebec7;
}
.site-footer p{color:#aebec7}
.crisis{
  background:var(--paper);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  padding:1.15rem 1.3rem;margin-bottom:1.4rem;
  color:var(--ink);font-size:1rem;line-height:1.55;
  border-top:4px solid var(--amber);
}
.crisis strong{color:var(--accent-dark)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:.7rem 0}
.site-footer nav a{
  min-height:44px;display:inline-flex;align-items:center;
  color:#dfeae7;text-decoration:none;font-weight:600;
}
.site-footer nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- small screens ---------- */
@media (max-width:640px){
  body{font-size:1.02rem}
  .main-nav{margin-left:0}
  .brand{font-size:1.36rem}
  .brand::before{width:38px;height:38px;border-radius:12px;background-size:auto,22px 22px,auto}
  .hero{padding:2.5rem 0 2.3rem}
  .filters{border-radius:var(--r-lg);width:100%}
  .filters .label{width:100%;padding:.2rem .7rem 0}
  .listing-grid{grid-template-columns:1fr}
  main{padding:1.9rem 0 2.8rem}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
  .card:hover,.listing:hover,.mini:hover,.btn:hover,.jump-links a:hover{transform:none}
}