/* Keep Her Home: design system.
   Palette from the concept seed: pine, sand, slate, bark, dust.
   Display face Lora, body face Nunito, both from Google Fonts with real fallbacks.
   Signature device: the keep-her-here ladder, two rails and numbered rungs,
   each rung split into what this house can hold and when to ask the care team.
   Mobile first, readable at 390px, large type, generous leading, no stock hero. */

:root {
  --pine: #24382c;
  --sand: #e6d5b8;
  --slate: #4d6380;
  --bark: #6e4f38;
  --dust: #c4b7a2;
  --paper: #f8f3ea;
  --ink: #1f2a23;
  --soft: #f1e8d8;
  --display: "Lora", Georgia, "Times New Roman", serif;
  --body: "Nunito", "Segoe UI", Helvetica, Arial, sans-serif;
  --measure: 44rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.7;
  padding-inline: 16px;
}

a { color: var(--slate); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pine); }

.skip {
  position: absolute; left: -999px; top: 0; background: var(--pine); color: var(--sand);
  padding: .5rem 1rem; z-index: 5;
}
.skip:focus { left: 16px; top: 8px; }

.wrap { max-width: var(--measure); margin: 0 auto; }
.wide { max-width: 60rem; margin: 0 auto; }

/* Masthead */
.masthead {
  margin: 0 -16px;
  padding: 1.1rem 16px 1rem;
  background: var(--pine);
  color: var(--sand);
}
.masthead .wide { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.6rem; }
.brand {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--sand);
  text-decoration: none;
  letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: .55rem;
}
.brand svg { width: 1.35em; height: 1.35em; flex: none; }
.brand:hover { color: #fff; }
.masthead nav { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: .95rem; }
.masthead nav a { color: var(--sand); text-decoration: none; border-bottom: 1px solid transparent; }
.masthead nav a:hover { border-bottom-color: var(--sand); color: #fff; }

/* Type */
h1, h2, h3 { font-family: var(--display); color: var(--pine); line-height: 1.2; margin: 0 0 .6em; font-weight: 600; }
h1 { font-size: 2rem; letter-spacing: -.01em; }
h2 { font-size: 1.45rem; margin-top: 2.2rem; }
h3 { font-size: 1.15rem; margin-top: 1.6rem; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
li { margin-bottom: .45em; }
strong { font-weight: 700; color: var(--pine); }
hr { border: 0; border-top: 1px solid var(--dust); margin: 2.4rem 0; }

.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bark);
  margin: 0 0 .7rem;
}
.lede { font-size: 1.25rem; line-height: 1.6; color: var(--pine); }
.hero { padding: 2.4rem 0 1rem; }
.inwords {
  font-family: var(--display);
  font-style: italic;
  color: var(--slate);
  font-size: 1.05rem;
  margin: 0 0 .5rem;
}
.inwords b { font-style: normal; font-family: var(--body); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bark); margin-right: .5rem; }

/* The ladder */
.ladder-intro { margin-top: 2.6rem; }
.ladder {
  list-style: none;
  margin: 1.4rem 0 2.4rem;
  padding: .2rem 0;
  border-left: 5px solid var(--pine);
  border-right: 5px solid var(--pine);
  background: var(--soft);
}
.rung {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem .9rem;
  padding: 1.15rem 1rem 1.15rem 3.3rem;
  border-top: 5px solid var(--bark);
  position: relative;
  margin: 0;
}
.rung:first-child { border-top: 0; }
.rung .num {
  position: absolute; left: .85rem; top: 1.1rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--bark); color: var(--sand);
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.rung h3 { grid-column: 1 / -1; margin: 0 0 .2rem; font-size: 1.2rem; }
.rung p { margin: 0; font-size: 1rem; line-height: 1.55; }
.rung .holds b, .rung .ask b {
  display: block; font-family: var(--body); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: .15rem;
}
.rung .holds b { color: var(--pine); }
.rung .ask b { color: var(--slate); }
.rung .ask { border-left: 3px solid var(--slate); padding-left: .7rem; }
@media (min-width: 700px) {
  .rung { grid-template-columns: 1fr 1fr; }
}

/* Article index */
.grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem; list-style: none; padding: 0; margin: 1rem 0 2rem;
}
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--sand);
  padding: 1.1rem 1.15rem 1rem;
  border-top: 4px solid var(--pine);
  margin: 0;
}
.card .inwords { font-size: .95rem; margin-bottom: .55rem; }
.card h3 { margin: 0 0 .4rem; font-size: 1.12rem; }
.card h3 a { color: var(--pine); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { font-size: .98rem; line-height: 1.55; margin: 0; }
.group { margin-top: 2rem; }

/* Featured slot */
.featured {
  margin: 2.6rem 0;
  padding: 1.3rem 1.2rem 1.1rem;
  background: var(--sand);
  border-left: 8px solid var(--bark);
}
.featured .tag {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--bark); margin: 0 0 .5rem;
}
.featured h2 { margin: 0 0 .5rem; font-size: 1.4rem; }
.featured h2 a { color: var(--pine); }
.featured p { font-size: 1rem; line-height: 1.6; }
.featured .disclosure {
  font-size: .9rem; color: var(--bark); border-top: 1px solid var(--dust); padding-top: .7rem; margin: .8rem 0 0;
}

/* Form */
.contact { margin: 2.6rem 0 1rem; }
.form-block {
  background: #fff;
  border: 2px solid var(--pine);
  padding: 1.3rem 1.2rem 1.1rem;
}
.form-block label { display: block; font-weight: 700; font-size: .92rem; color: var(--pine); margin: .9rem 0 .3rem; }
.form-block label:first-child { margin-top: 0; }
.form-block input, .form-block select {
  width: 100%; font: inherit; font-size: 1.05rem; padding: .7rem .75rem;
  border: 1.5px solid var(--dust); border-radius: 0; background: var(--paper); color: var(--ink);
}
.form-block input:focus, .form-block select:focus { outline: 3px solid var(--slate); outline-offset: 1px; border-color: var(--pine); }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.3rem; }
.send {
  font: inherit; font-weight: 700; font-size: 1.05rem; background: var(--pine); color: var(--sand);
  border: 0; padding: .85rem 1.5rem; cursor: pointer;
}
.send:hover { background: #1a2a20; }
.calls { font-size: 1rem; }
.calls a { font-weight: 700; }
.msg { margin: .9rem 0 0; font-size: 1rem; min-height: 1.4em; }
.msg.bad { color: #7a2e12; }
.formnote { font-size: .92rem; color: var(--bark); margin-top: .9rem; }
.callline { font-size: 1.15rem; }
.callline a { font-weight: 700; color: var(--pine); }

/* Article pages */
.article-head { padding: 2.2rem 0 .6rem; border-bottom: 1px solid var(--dust); margin-bottom: 1.6rem; }
.article-head h1 { font-size: 1.95rem; }
.meta { font-size: .9rem; color: var(--bark); margin: .4rem 0 0; }
.dek { font-size: 1.2rem; color: var(--pine); line-height: 1.55; }
.tonight {
  background: var(--sand); border-left: 8px solid var(--pine); padding: 1.2rem 1.2rem .6rem; margin: 2rem 0;
}
.tonight h2 { margin-top: 0; font-size: 1.3rem; }
.tonight ol { margin-bottom: .6rem; }
.askteam {
  background: #fff; border: 2px solid var(--slate); padding: 1.2rem 1.2rem .5rem; margin: 2rem 0;
}
.askteam h2 { margin-top: 0; color: var(--slate); font-size: 1.3rem; }
.askteam ul { margin-bottom: .6rem; }
.faq h2 { font-size: 1.3rem; }
.faq h3 { font-size: 1.1rem; margin-top: 1.4rem; }
.mention {
  margin: 2.2rem 0; padding: 1.1rem 1.1rem .9rem; background: var(--sand); border-left: 8px solid var(--bark);
}
.mention .tag { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--bark); margin: 0 0 .4rem; }
.mention p { font-size: .98rem; line-height: 1.6; margin: 0 0 .6rem; }
.mention .disclosure { font-size: .88rem; color: var(--bark); margin: 0; }
.related { margin: 2.4rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--dust); }
.related .eyebrow { margin-bottom: .5rem; }
.related ul { list-style: none; padding: 0; }
.related li { margin-bottom: .5rem; }
.elsewhere { margin: 2rem 0 1rem; font-size: 1rem; }
.elsewhere a { margin-right: 1.2rem; }

/* Sources page */
.srcgroup h2 { font-size: 1.25rem; }
.srclist { list-style: none; padding: 0; }
.srclist li { padding: .7rem 0; border-bottom: 1px solid var(--dust); font-size: .98rem; line-height: 1.55; }
.srclist .pub { font-weight: 700; color: var(--pine); }
.srclist .url { word-break: break-all; font-size: .9rem; }
.srclist .ver { display: block; font-size: .85rem; color: var(--bark); }

/* Footer */
.foot {
  margin: 3.2rem -16px 0;
  padding: 2rem 16px 2.4rem;
  background: var(--pine);
  color: var(--sand);
  font-size: .92rem;
  line-height: 1.6;
}
.foot a { color: var(--sand); }
.foot p { margin-bottom: .8em; }
.foot .stamp { font-family: var(--display); font-style: italic; font-size: 1.05rem; margin-bottom: 1rem; }

@media (min-width: 700px) {
  body { font-size: 1.15rem; }
  h1 { font-size: 2.6rem; }
  .article-head h1 { font-size: 2.3rem; }
  h2 { font-size: 1.6rem; }
  .hero { padding-top: 3.2rem; }
}