/* Who Pays for Mom: a well-kept household ledger, not a law firm and not a
   care agency. Playfair Display for headings, Work Sans for the body. Ledger
   cream ground, ink text, ledger green for credits and settled items, red ink
   for debits and open items, khaki ruled lines. The signature device is the
   ruled two-column ledger table with a red margin line, drawn like an
   accounting pad, and the one-page family meeting agenda at the foot of every
   article. */

:root {
  --cream: #F6F2EA;
  --paper: #FCFAF5;
  --ink: #1B1B1B;
  --ink-soft: #55504A;
  --green: #2E6F6E;
  --green-deep: #245857;
  --red: #C04A3A;
  --khaki: #D8CDB9;
  --khaki-soft: #ECE5D6;
  --measure: 42rem;
  --rule: 2.15rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Work Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: 18.5px;
  line-height: 1.66;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, .brand, .ledger caption, .amount-big {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 .55rem;
  text-wrap: balance;
}
h1 { font-size: 2.45rem; }
h2 { font-size: 1.55rem; margin-top: 2.1rem; }
h3 { font-size: 1.18rem; margin-top: 1.5rem; }
p { margin: 0 0 1.1rem; }
ul, ol { margin: 0 0 1.2rem; padding-left: 1.35rem; }
li { margin: 0 0 .45rem; }
strong { font-weight: 600; }

a { color: var(--green); text-decoration: underline; text-decoration-color: var(--khaki); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--green); }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 20px; }

/* ---- masthead: a ledger cover ------------------------------------------ */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--khaki);
  box-shadow: 0 3px 0 var(--cream), 0 4px 0 var(--khaki);
}
.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding-top: 18px;
  padding-bottom: 14px;
}
.brand {
  font-size: 1.42rem;
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
  margin: 0;
  white-space: nowrap;
}
.brand::before {
  content: "";
  display: inline-block;
  width: .58em; height: .92em;
  border: 1.5px solid var(--ink);
  border-left: 3px solid var(--red);
  background: repeating-linear-gradient(to bottom, transparent 0 .22em, var(--khaki) .22em .28em);
  margin-right: .5em;
  vertical-align: -0.12em;
}
.masthead nav { margin-left: auto; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.masthead nav a { color: var(--ink-soft); text-decoration: none; margin-left: 16px; }
.masthead nav a:hover, .masthead nav a[aria-current] { color: var(--red); }

/* ---- entry label, the red-ink eyebrow ---------------------------------- */
.entry {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin: 0 0 .5rem;
}
.entry b { color: var(--green); font-weight: 600; }

main { padding: 40px 0 80px; }
.lede { font-size: 1.16rem; color: var(--ink-soft); }
.lede::first-letter { color: var(--red); }
.dek { font-size: 1.1rem; color: var(--ink-soft); font-style: italic; font-family: "Playfair Display", Georgia, serif; }

.block { padding: 0 0 1.4rem; }
.block + .block { border-top: 1px solid var(--khaki); padding-top: 1.6rem; }

/* ---- open items and settled items -------------------------------------- */
.items { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.items li { position: relative; padding: .55rem 0 .55rem 1.7rem; border-bottom: 1px solid var(--khaki); }
.items li::before {
  content: "";
  position: absolute; left: .15rem; top: 1.05rem;
  width: .62rem; height: .62rem;
  border-radius: 50%;
  border: 2px solid var(--red);
  background: transparent;
}
.items.settled li::before { border-color: var(--green); background: var(--green); }
.items li strong { font-weight: 600; }

/* ---- the ledger table: the signature device ---------------------------- */
.ledger-wrap { overflow-x: auto; margin: 1.6rem 0 1.8rem; }
.ledger {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--khaki);
  font-size: .96rem;
}
.ledger caption {
  caption-side: top;
  text-align: left;
  font-size: 1.28rem;
  padding: 0 0 .55rem;
  color: var(--ink);
}
.ledger caption span { display: block; font-family: "Work Sans", sans-serif; font-weight: 400; font-size: .84rem; color: var(--ink-soft); }
.ledger th, .ledger td {
  text-align: left;
  vertical-align: top;
  padding: .42rem .7rem;
  height: var(--rule);
  border-bottom: 1px solid var(--khaki);
}
.ledger thead th {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--khaki-soft);
  border-bottom: 2px solid var(--green);
}
.ledger td:first-child, .ledger th:first-child {
  border-left: 2px solid var(--red);
  padding-left: 1rem;
  width: 58%;
}
.ledger td:last-child { font-variant-numeric: tabular-nums; }
.ledger td .blank { display: inline-block; min-width: 4.5rem; border-bottom: 1px solid var(--ink); vertical-align: baseline; margin-left: .2rem; }
.ledger td .debit { color: var(--red); }
.ledger td .credit { color: var(--green); }
.ledger tfoot td { font-weight: 600; border-top: 3px double var(--ink); border-bottom: 0; background: var(--khaki-soft); }
.ledger-note { font-size: .86rem; color: var(--ink-soft); margin-top: -1rem; }

/* ---- hub ledger of articles -------------------------------------------- */
.hub { list-style: none; margin: 0 0 1.4rem; padding: 0; border-top: 2px solid var(--ink); }
.hub li { border-bottom: 1px solid var(--khaki); }
.hub a {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 .6rem;
  padding: .85rem 0;
  color: var(--ink);
  text-decoration: none;
}
.hub a:hover .hub-title { color: var(--red); }
.hub .no { font-family: "Playfair Display", Georgia, serif; font-weight: 700; color: var(--red); font-size: 1.05rem; padding-top: .1rem; }
.hub .hub-title { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.hub .hub-note { display: block; font-size: .9rem; color: var(--ink-soft); margin-top: .2rem; }
.hub-group { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); font-weight: 600; margin: 1.4rem 0 .3rem; }

/* ---- featured slot, paid and labelled every time ----------------------- */
.featured {
  background: var(--paper);
  border-top: 3px double var(--green);
  border-bottom: 3px double var(--green);
  padding: 20px 22px 16px;
  margin: 2rem 0;
}
.featured .tag {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  background: var(--red);
  padding: 3px 10px;
  margin: 0 0 .7rem;
}
.featured h2, .featured h3 { margin: 0 0 .45rem; font-size: 1.4rem; }
.featured h2 a, .featured h3 a { color: var(--ink); text-decoration-color: var(--green); }
.featured .call { font-weight: 600; }
.featured .disclosure { font-size: .88rem; color: var(--ink-soft); margin: .4rem 0 0; border-left: 3px solid var(--khaki); padding-left: .8rem; }

/* ---- agenda block ------------------------------------------------------- */
.agenda {
  border: 1px dashed var(--ink);
  background: var(--paper);
  padding: 18px 22px;
  margin: 2rem 0 1.5rem;
}
.agenda h2, .agenda h3 { margin-top: 0; font-size: 1.2rem; }
.agenda ol { margin-bottom: .8rem; }
.agenda .dl { display: inline-block; font-weight: 600; color: var(--paper); background: var(--ink); text-decoration: none; padding: .55rem 1rem; margin-top: .3rem; }
.agenda .dl:hover { background: var(--green-deep); }

/* ---- tonight and doctor boxes ------------------------------------------ */
.tonight { border-left: 4px solid var(--red); padding: .2rem 0 .2rem 1.1rem; margin: 1.6rem 0; }
.tonight h2, .tonight h3 { margin-top: 0; }
.doctor { border-left: 4px solid var(--green); padding: .2rem 0 .2rem 1.1rem; margin: 1.6rem 0; background: var(--paper); }
.doctor h2, .doctor h3 { margin-top: 0; }

/* ---- sources on this page ---------------------------------------------- */
.sources { font-size: .9rem; color: var(--ink-soft); border-top: 2px solid var(--ink); padding-top: 1rem; margin-top: 2.4rem; }
.sources h2 { font-size: 1.1rem; margin-top: 0; }
.sources ol { padding-left: 1.2rem; }
.sources li { margin-bottom: .35rem; overflow-wrap: anywhere; }

/* ---- sources page ------------------------------------------------------- */
.src-group { margin: 0 0 1.6rem; }
.src-group h2 { font-size: 1.28rem; }
.src-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--khaki); }
.src-list li { padding: .6rem 0; border-bottom: 1px solid var(--khaki); font-size: .95rem; overflow-wrap: anywhere; }
.src-list .v { display: block; font-size: .8rem; color: var(--green); letter-spacing: .06em; text-transform: uppercase; }

/* ---- related desks ------------------------------------------------------ */
.chords { font-size: .95rem; background: var(--khaki-soft); padding: .9rem 1.1rem; margin: 1.6rem 0; }
.chords p { margin: 0; }

/* ---- form --------------------------------------------------------------- */
.form-block { background: var(--paper); border: 1px solid var(--khaki); border-left: 3px solid var(--red); padding: 22px; }
.form-block label {
  display: block;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green);
  margin: 0 0 .2rem;
}
.form-block input, .form-block select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--khaki);
  padding: .5rem .1rem;
  margin: 0 0 1rem;
  border-radius: 0;
}
.form-block input:focus, .form-block select:focus { outline: none; border-bottom-color: var(--green); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.btn {
  font: inherit;
  font-weight: 600;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: .8rem 1.5rem;
  cursor: pointer;
}
.btn:hover { background: var(--green-deep); }
.call-inline { font-weight: 600; margin-left: 14px; white-space: nowrap; }
.form-note { font-size: .88rem; color: var(--ink-soft); margin: .9rem 0 0; }
.form-status { font-size: .95rem; font-weight: 600; margin: .8rem 0 0; min-height: 1.2rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- footer ------------------------------------------------------------- */
.sitefoot {
  background: var(--paper);
  border-top: 3px double var(--ink);
  padding: 28px 0 40px;
  font-size: .88rem;
  color: var(--ink-soft);
}
.sitefoot nav { margin: 0 0 1rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.sitefoot nav a { color: var(--ink-soft); margin-right: 14px; text-decoration: none; }
.sitefoot nav a:hover { color: var(--red); }
.sitefoot .ad-disclosure { border-left: 3px solid var(--red); padding-left: .9rem; }
.sitefoot a { color: var(--green); }

/* ---- sticky call bar, phones only ---------------------------------------- */
.callbar { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: 66px; font-size: 17.5px; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.36rem; }
  .brand { font-size: 1.22rem; }
  .masthead nav { margin-left: 0; font-size: .74rem; }
  .masthead nav a { margin-left: 0; margin-right: 14px; }
  .form-row { grid-template-columns: 1fr; }
  .call-inline { display: block; margin: .8rem 0 0; }
  .hub a { grid-template-columns: 2.4rem 1fr; }
  .callbar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--ink);
    color: var(--cream);
    text-align: center;
    padding: 11px 16px;
    z-index: 40;
    font-weight: 600;
  }
  .callbar span { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--khaki); font-weight: 500; }
  .callbar a { color: var(--cream); text-decoration: none; }
}
@media print {
  .masthead nav, .callbar, .form-block, .featured, .sitefoot nav { display: none; }
  body { background: #fff; }
}