/* Since Mom Died. The kitchen table.
   Libre Caslon Text for the headings, Figtree for the body, Caveat only for
   her handwriting on the recipe card. Cream paper, wool gray ink, brick for the
   chapter numbers, garden green for the ticks on the good-week card, oak for
   every border and the table edge. One column, like a cookbook. */

:root {
  --cream: #EFE9DF;
  --cream-deep: #E4DCCE;
  --wool: #3B3A36;
  --wool-soft: #5E5B54;
  --brick: #A63D40;
  --brick-deep: #8A3033;
  --garden: #6C8A4E;
  --oak: #C9B79C;
  --oak-light: #DDD2BF;
  --card: #F7F3EA;
  --measure: 41rem;
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--wool);
  font-family: Figtree, "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 19px;
  line-height: 1.68;
}

h1, h2, h3, .brand, .chapter-no, .card-title, .featured h2 {
  font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.18;
  margin: 0 0 .6rem;
  letter-spacing: -0.005em;
}
h1 { font-size: 2.15rem; }
h2 { font-size: 1.5rem; margin-top: 2.4rem; }
h3 { font-size: 1.18rem; margin-top: 1.7rem; font-style: italic; }
p { margin: 0 0 1.15rem; }
ul, ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
li { margin-bottom: .5rem; }
strong { font-weight: 600; }
a { color: var(--brick); text-decoration: underline; text-decoration-color: var(--oak); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brick); }
:focus-visible { outline: 2px solid var(--garden); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

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

/* ---- the table (masthead) ------------------------------------------------ */
.table {
  padding: 22px 0 16px;
  border-bottom: 1px solid var(--oak);
}
.table .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; }
.brand { font-size: 1.35rem; color: var(--wool); text-decoration: none; }
.brand em { font-style: italic; color: var(--brick); }
.table nav { margin-left: auto; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.table nav a { color: var(--wool-soft); text-decoration: none; margin-left: 16px; }
.table nav a:hover { color: var(--brick); }

/* ---- the tabletop (header device) --------------------------------------- */
.tabletop {
  margin: 26px 0 0;
  border-bottom: 6px solid var(--oak);
  padding-bottom: 0;
}
.tabletop svg { display: block; width: 100%; height: auto; max-width: 100%; }
.tabletop-note { font-size: .82rem; color: var(--wool-soft); margin: .6rem 0 0; font-style: italic; }

/* ---- the chapter head ---------------------------------------------------- */
.chapter-head { padding: 2.4rem 0 .4rem; }
.chapter-no {
  color: var(--brick);
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.chapter-no b { font-size: 2.6rem; display: block; line-height: 1; letter-spacing: 0; font-weight: 400; margin-bottom: .35rem; }
.dek { font-size: 1.16rem; color: var(--wool-soft); line-height: 1.55; margin-bottom: 1.6rem; }
.byline { font-size: .84rem; color: var(--wool-soft); border-top: 1px solid var(--oak); border-bottom: 1px solid var(--oak); padding: .55rem 0; margin-bottom: 1.8rem; }

/* ---- numbered steps, cookbook style ------------------------------------- */
.chapter { counter-reset: step; }
.chapter h2.step { padding-left: 2.6rem; position: relative; }
.chapter h2.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  font-family: "Libre Caslon Text", Georgia, serif;
  color: var(--brick);
  font-size: 1.9rem;
  line-height: 1;
}

/* ---- the recipe card, and the good-week card ---------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--oak);
  border-radius: 6px;
  padding: 1.3rem 1.4rem 1rem;
  margin: 2rem 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--oak-light) 31px, var(--oak-light) 32px);
  background-position: 0 4.2rem;
  box-shadow: 0 1px 0 var(--oak), 0 6px 14px rgba(59, 58, 54, .07);
}
.card-title { font-size: 1.25rem; margin-bottom: .8rem; }
.card-title small { display: block; font-family: Figtree, sans-serif; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--garden); margin-bottom: .3rem; }
.card ul { list-style: none; padding: 0; margin: 0; }
.card li { position: relative; padding-left: 1.7rem; line-height: 32px; margin: 0; }
.card li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 9px; height: 14px;
  border-right: 3px solid var(--garden);
  border-bottom: 3px solid var(--garden);
  transform: rotate(40deg);
}
.card li a { color: var(--wool); }
.card li.this-one { font-weight: 600; }
.card .card-foot { font-size: .84rem; color: var(--wool-soft); margin: .9rem 0 0; line-height: 1.5; }

/* ---- the hub list of chapters ------------------------------------------- */
.chapters { list-style: none; padding: 0; margin: 1.2rem 0 0; counter-reset: chap; }
.chapters li { border-top: 1px solid var(--oak); padding: 1rem 0 1rem 3rem; position: relative; margin: 0; }
.chapters li:last-child { border-bottom: 1px solid var(--oak); }
.chapters li::before {
  counter-increment: chap; content: counter(chap);
  position: absolute; left: .2rem; top: .95rem;
  font-family: "Libre Caslon Text", Georgia, serif; color: var(--brick); font-size: 1.7rem; line-height: 1;
}
.chapters a { font-family: "Libre Caslon Text", Georgia, serif; font-size: 1.15rem; color: var(--wool); text-decoration: none; }
.chapters a:hover { color: var(--brick); }
.chapters .why { display: block; font-size: .95rem; color: var(--wool-soft); margin-top: .25rem; }

/* ---- what to do tonight / when to ask ----------------------------------- */
.tonight, .ask {
  border-left: 4px solid var(--garden);
  padding: .2rem 0 .2rem 1.2rem;
  margin: 2.2rem 0;
}
.ask { border-left-color: var(--brick); }
.tonight h2, .ask h2 { margin-top: 0; font-size: 1.3rem; }
.ask p:last-child, .tonight ul { margin-bottom: 0; }

/* ---- questions --------------------------------------------------------- */
.faq h3 { font-style: normal; }
.faq h3::before { content: "Q. "; color: var(--brick); }

/* ---- the featured slot, paid and labelled ------------------------------- */
.featured {
  background: var(--cream-deep);
  border: 1px solid var(--oak);
  border-top: 5px solid var(--brick);
  padding: 1.2rem 1.4rem 1rem;
  margin: 2.6rem 0;
  border-radius: 0 0 6px 6px;
}
.featured .tag { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brick-deep); margin-bottom: .7rem; font-weight: 600; line-height: 1.45; }
.featured h2 { margin-top: 0; font-size: 1.45rem; }
.featured h2 a { color: var(--wool); text-decoration-color: var(--brick); }
.featured .disclosure { font-size: .88rem; color: var(--wool-soft); border-top: 1px dashed var(--oak); padding-top: .8rem; margin: .4rem 0 0; line-height: 1.5; }
.featured .callline { font-weight: 600; margin-bottom: .6rem; }

/* ---- two more desks (chords) ------------------------------------------- */
.desks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.2rem 0 0; }
.desks a { display: block; border: 1px solid var(--oak); padding: .9rem 1rem; text-decoration: none; color: var(--wool); background: var(--card); border-radius: 4px; }
.desks a b { display: block; font-family: "Libre Caslon Text", Georgia, serif; font-weight: 400; font-size: 1.08rem; margin-bottom: .2rem; color: var(--brick); }
.desks a span { font-size: .9rem; color: var(--wool-soft); }
@media (max-width: 560px) { .desks { grid-template-columns: 1fr; } }

/* ---- the form ---------------------------------------------------------- */
.ask-form { background: var(--card); border: 1px solid var(--oak); padding: 1.3rem 1.4rem; border-radius: 6px; margin: 1.4rem 0; }
.ask-form label { display: block; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wool-soft); margin: .9rem 0 .3rem; }
.ask-form input, .ask-form select {
  width: 100%; font: inherit; font-size: 1.02rem; color: var(--wool);
  padding: .6rem .7rem; border: 1px solid var(--oak); border-radius: 4px; background: #fff;
}
.ask-form input:focus, .ask-form select:focus { outline: 2px solid var(--garden); outline-offset: 1px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: 1.02rem;
  background: var(--brick); color: var(--cream); border: 0; border-radius: 4px;
  padding: .75rem 1.3rem; cursor: pointer; margin-top: 1.1rem;
}
.btn:hover { background: var(--brick-deep); }
.call-inline { margin-left: 12px; font-size: .98rem; }
.form-status { min-height: 1.4rem; font-weight: 600; color: var(--garden); margin: .8rem 0 0; }
.form-note { font-size: .88rem; color: var(--wool-soft); margin: .4rem 0 0; line-height: 1.5; }

/* ---- sources list --------------------------------------------------------- */
.src-meta { font-size: .84rem; color: var(--wool-soft); word-break: break-all; line-height: 1.5; }

/* ---- next chapter ------------------------------------------------------ */
.next { border-top: 1px solid var(--oak); border-bottom: 1px solid var(--oak); padding: 1rem 0; margin: 2.4rem 0 0; font-size: .98rem; }
.next a { font-family: "Libre Caslon Text", Georgia, serif; }
.next span { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wool-soft); margin-bottom: .25rem; }

/* ---- footer ------------------------------------------------------------ */
.foot { margin-top: 3.2rem; border-top: 6px solid var(--oak); padding: 1.6rem 0 6rem; font-size: .88rem; color: var(--wool-soft); line-height: 1.55; }
.foot nav a { margin-right: 14px; color: var(--wool-soft); }
.foot p { margin-bottom: .8rem; }
.foot .ad-disclosure { color: var(--wool); font-weight: 600; }

/* ---- the call bar, phones only ----------------------------------------- */
.callbar { display: none; }
@media (max-width: 720px) {
  .callbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--wool); color: var(--cream); padding: 10px 16px; font-size: .88rem; line-height: 1.3;
    border-top: 3px solid var(--oak);
  }
  .callbar a { color: var(--cream); background: var(--brick); text-decoration: none; padding: .55rem .8rem; border-radius: 4px; white-space: nowrap; font-weight: 600; }
  body { font-size: 18px; }
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.36rem; }
  .chapter h2.step { padding-left: 2.2rem; }
  .chapter h2.step::before { font-size: 1.6rem; }
}