/* Hospice at Home Help. A letterpress card for the family between the visits.
   EB Garamond for everything you read, Nunito Sans for labels, tables and the form.
   Candle white ground, plum ink, honey links, sage for the hospice hours, blush for the family's.
   Letter-width measure, wide margins, no sidebars, no hero image. */

:root {
  --ink: #3A2E39;
  --ink-soft: #6a5c68;
  --paper: #FAF6F1;
  --paper-deep: #f2eae1;
  --honey: #B57F50;
  --honey-deep: #96653a;
  --sage: #7C9A92;
  --blush: #E4C7B7;
  --rule: #ddd2c8;
  --measure: 36rem;
}

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

body {
  margin: 0;
  background: var(--paper);
  background-image: radial-gradient(ellipse at 50% 0%, #fffdfa 0%, var(--paper) 60%);
  color: var(--ink);
  font-family: "EB Garamond", Garamond, "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.62;
}

h1, h2, h3 {
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 .65rem;
  letter-spacing: -.004em;
  text-wrap: pretty;
}
h1 { font-size: 2.1rem; font-weight: 400; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1.1rem; }
ul, ol { margin: 0 0 1.2rem; padding-left: 1.25rem; }
li { margin-bottom: .5rem; }
strong { font-weight: 500; }

a { color: var(--honey-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--honey); text-decoration-thickness: 2px; }

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

.label, .tag, .meta {
  font-family: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--honey);
  margin: 0 0 .55rem;
}
.meta { color: var(--ink-soft); font-weight: 600; letter-spacing: .1em; }

/* ---- masthead: centered, two hairlines like a card edge --------------- */
.masthead { text-align: center; padding: 28px 0 14px; position: relative; }
.masthead:before, .masthead:after {
  content: ""; display: block; position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--rule);
}
.masthead:before { bottom: 4px; }
.masthead:after { bottom: 0; }
.brand {
  display: inline-block;
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: 1.28rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand small {
  display: block;
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-soft);
  margin-top: .45rem;
}
nav.site { margin-top: .95rem; font-family: "Nunito Sans", system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
nav.site a { color: var(--ink-soft); text-decoration: none; margin: 0 .65rem; }
nav.site a:hover { color: var(--honey); }

/* ---- page body ---------------------------------------------------------- */
main { padding: 2.4rem 0 1rem; }
.block { margin: 0 0 2.6rem; }
.lede, .dek { font-size: 1.28rem; line-height: 1.5; color: var(--ink); }
.dek { font-style: italic; color: var(--ink-soft); }
.art-head { margin: 0 0 1.8rem; }
.art-head h1 { margin-bottom: 1rem; }

/* ---- the visit calendar, the signature device --------------------------- */
.cal {
  display: grid;
  grid-template-columns: 2.4rem repeat(7, 1fr);
  gap: 2px;
  margin: 1.2rem 0 .5rem;
  font-family: "Nunito Sans", system-ui, sans-serif;
}
.cal .d { text-align: center; font-size: .64rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); padding-bottom: 3px; }
.cal .h { font-size: .6rem; line-height: 1; color: var(--ink-soft); align-self: start; padding-top: 1px; }
.cal .c { height: 9px; background: var(--blush); border-radius: 1px; }
.cal .c.s { background: var(--sage); }
.cal.mini { grid-template-columns: 2rem repeat(7, 1fr); gap: 1px; margin: .6rem 0 .4rem; }
.cal.mini .c { height: 4px; }
.cal.mini .d { font-size: .58rem; }
.cal.mini .h { font-size: .55rem; }
.cal-key { font-family: "Nunito Sans", system-ui, sans-serif; font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); margin: .2rem 0 1.2rem; }
.sw { display: inline-block; width: 12px; height: 9px; vertical-align: 0; margin: 0 .35rem 0 .9rem; border-radius: 1px; }
.sw:first-child { margin-left: 0; }
.sw.s { background: var(--sage); }
.sw.f { background: var(--blush); }
.weekfig { margin: 0 0 2rem; padding: .9rem 1rem .6rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.weekfig figcaption { font-family: "Nunito Sans", system-ui, sans-serif; font-size: .74rem; line-height: 1.5; color: var(--ink-soft); margin-top: .3rem; }

/* ---- article index on the hub ------------------------------------------- */
.index { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: a; }
.index li { counter-increment: a; padding: 1.1rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .5rem; margin: 0; }
.index li:last-child { border-bottom: 1px solid var(--rule); }
.index li:before {
  content: counter(a, decimal-leading-zero);
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  color: var(--honey); padding-top: .45rem;
}
.index a { display: block; font-size: 1.24rem; line-height: 1.28; color: var(--ink); text-decoration: none; }
.index a:hover { color: var(--honey-deep); text-decoration: underline; }
.index p { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); margin: .3rem 0 0; }

/* ---- boxes -------------------------------------------------------------- */
.tonight { background: var(--paper-deep); padding: 1.2rem 1.3rem .6rem; margin: 1.8rem 0; border-radius: 2px; }
.tonight h2, .tonight .label { margin-bottom: .6rem; }
.tonight ul { margin-bottom: .4rem; }
.ask-team { border-top: 2px solid var(--sage); border-bottom: 1px solid var(--rule); padding: 1.1rem 0 .5rem; margin: 1.8rem 0 2rem; }
.ask-team h2 { font-size: 1.3rem; }
.ask-team ul { margin-bottom: .6rem; }

.featured {
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 4px;
  padding: 1.4rem 1.3rem 1.1rem;
  margin: 2.6rem 5px;
  background: #fffdfa;
}
.featured h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.featured h2 a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--honey); }
.featured h2 a:hover { color: var(--honey-deep); }
.featured .disclosure, .fnote .disclosure {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: .8rem; line-height: 1.5; color: var(--ink-soft);
  border-top: 1px solid var(--rule); padding-top: .8rem; margin: .4rem 0 0;
}
.fnote { border: 1px dashed var(--honey); padding: 1rem 1.1rem .8rem; margin: 2rem 0; background: #fffdfa; font-size: 1.05rem; }
.fnote p { margin-bottom: .6rem; }
.fnote .disclosure { font-size: .76rem; }

/* ---- tables ------------------------------------------------------------- */
.tablewrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
table { width: 100%; border-collapse: collapse; font-family: "Nunito Sans", system-ui, sans-serif; font-size: .86rem; line-height: 1.45; min-width: 34rem; }
th { text-align: left; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding: .5rem .55rem .5rem 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
td { padding: .6rem .55rem .6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td:first-child { font-weight: 600; }

/* ---- the form ----------------------------------------------------------- */
.form-wrap { margin: 1.2rem 0 1rem; }
label { display: block; font-family: "Nunito Sans", system-ui, sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: .95rem 0 .3rem; }
input, select {
  width: 100%; font-family: "Nunito Sans", system-ui, sans-serif; font-size: 1rem;
  padding: .7rem .75rem; border: 1px solid var(--ink); background: #fffdfa; color: var(--ink); border-radius: 2px;
}
input:focus, select:focus { outline: 2px solid var(--honey); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.actions { margin-top: 1.3rem; }
.send {
  font-family: "Nunito Sans", system-ui, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 0; padding: .9rem 1.4rem; border-radius: 2px; cursor: pointer;
}
.send:hover { background: var(--honey-deep); }
.calls { display: block; margin-top: .9rem; font-size: 1.08rem; }
.msg { font-family: "Nunito Sans", system-ui, sans-serif; font-size: .9rem; min-height: 1.3rem; margin: .8rem 0 0; }
.msg.bad { color: #8a3b2a; }
.formnote { font-family: "Nunito Sans", system-ui, sans-serif; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); margin-top: 1rem; }

/* ---- sources page ------------------------------------------------------- */
.srcs { list-style: none; padding: 0; margin: 0 0 2rem; }
.srcs li { padding: .8rem 0; border-top: 1px solid var(--rule); font-size: 1.02rem; line-height: 1.5; }
.srcs li:last-child { border-bottom: 1px solid var(--rule); }
.srcs .pub { font-family: "Nunito Sans", system-ui, sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: .15rem; }
.srcs .ver { font-family: "Nunito Sans", system-ui, sans-serif; font-size: .74rem; color: var(--ink-soft); display: block; margin-top: .15rem; }
.srcs a { word-break: break-word; }

/* ---- footer ------------------------------------------------------------- */
.foot { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 1.8rem 0 2.8rem; font-family: "Nunito Sans", system-ui, sans-serif; font-size: .8rem; line-height: 1.55; color: var(--ink-soft); }
.foot .stamp { font-family: "EB Garamond", Garamond, Georgia, serif; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.foot p { margin-bottom: .8rem; }
.foot a { color: var(--honey-deep); }

/* ---- larger screens ----------------------------------------------------- */
@media (min-width: 720px) {
  body { font-size: 1.27rem; }
  h1 { font-size: 2.7rem; }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.3rem; }
  .lede, .dek { font-size: 1.36rem; }
  .masthead { padding-top: 40px; }
  .brand { font-size: 1.5rem; }
  main { padding-top: 3.2rem; }
  .cal .c { height: 11px; }
  .cal.mini .c { height: 5px; }
  .featured { padding: 1.7rem 1.8rem 1.3rem; margin: 3rem 6px; }
  table { font-size: .9rem; }
}
@media print {
  .masthead nav, .form-wrap, .fnote, .featured { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
}