/* Between Mom and Kids. A fridge-door desk for the woman with two calendars.
   DM Sans for headings, chips and labels. Spectral for the reading.
   Coral is the kids' row, teal is Mom's row, lemon is where they collide.
   Everything sits on a cream ground like paper on a fridge, held up by magnets. */

:root {
  --coral: #F25F5C;
  --coral-deep: #d4443f;
  --coral-soft: #fde4e2;
  --teal: #247BA0;
  --teal-deep: #1b5f7c;
  --teal-soft: #dcebf3;
  --lemon: #FFE066;
  --lemon-deep: #d9b800;
  --lemon-soft: #fff5c2;
  --ink: #50514F;
  --ink-soft: #6f716e;
  --cream: #FFFCF2;
  --paper: #ffffff;
  --rule: #e8e2d0;
  --measure: 46rem;
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Spectral, Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.68;
}

h1, h2, h3, h4,
.brand, .tag, .chip, .wk-tag, .wk-day, .eyebrow, .btn, .note, .hub a, .callbar, .kicker, .figure-value, .magnet-list li::before {
  font-family: "DM Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 .55rem;
  color: var(--ink);
}
h1 { font-size: 2.3rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1.1rem; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
li { margin: 0 0 .45rem; }
a { color: var(--teal-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--coral-deep); }
strong { font-weight: 600; }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 18px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--lemon); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 50; }

/* ---- masthead: the top of the fridge ---------------------------------- */
.masthead {
  background: var(--paper);
  border-bottom: 4px solid var(--ink);
  padding: 16px 0 12px;
}
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.brand {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
}
.brand .dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd1cf 0 20%, var(--coral) 24% 100%); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.brand .mom { color: var(--teal); }
.brand .kids { color: var(--coral); }
.masthead nav { margin-left: auto; font-family: "DM Sans", Arial, sans-serif; font-size: .9rem; font-weight: 600; }
.masthead nav a { color: var(--ink-soft); text-decoration: none; margin-left: 16px; }
.masthead nav a:hover { color: var(--coral-deep); }

/* ---- page frame -------------------------------------------------------- */
main { padding: 34px 0 100px; }
.block { padding: 0 0 36px; }
.block + .block { border-top: 2px dashed var(--rule); padding-top: 32px; }
.lede { font-size: 1.16rem; line-height: 1.55; color: var(--ink); }
.kicker { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); margin: 0 0 .5rem; }

/* ---- sticky notes: the signature eyebrow ------------------------------ */
.note {
  display: inline-block;
  background: var(--lemon);
  color: var(--ink);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .02em;
  padding: 7px 12px 8px;
  margin: 0 0 .9rem;
  transform: rotate(-1.4deg);
  box-shadow: 1px 2px 0 rgba(80,81,79,.18), 2px 4px 10px rgba(80,81,79,.12);
  position: relative;
}
.note::before {
  content: "";
  position: absolute; top: -7px; left: 50%; margin-left: -18px;
  width: 36px; height: 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(80,81,79,.15);
  transform: rotate(1deg);
}
.note.teal { background: var(--teal-soft); }
.note.coral { background: var(--coral-soft); }

/* ---- paper cards pinned with a magnet --------------------------------- */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 26px 22px 20px;
  margin: 18px 0 1.4rem;
  box-shadow: 0 2px 0 rgba(80,81,79,.06), 0 8px 22px rgba(80,81,79,.09);
}
.card::before {
  content: "";
  position: absolute; top: -11px; left: 50%; margin-left: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfe6f2 0 18%, var(--teal) 22% 100%);
  box-shadow: 0 2px 3px rgba(0,0,0,.28);
}
.card.coral::before { background: radial-gradient(circle at 35% 30%, #ffd1cf 0 18%, var(--coral) 22% 100%); }
.card.lemon::before { background: radial-gradient(circle at 35% 30%, #fff8d6 0 18%, var(--lemon-deep) 22% 100%); }
.card h2, .card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* ---- the split week: two rows, five days, lemon where they collide ---- */
.week { margin: 0 0 1.4rem; }
.week-grid {
  display: grid;
  grid-template-columns: 3.1rem repeat(5, minmax(0, 1fr));
  gap: 4px;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 8px;
  border-radius: 8px;
}
.wk-corner { }
.wk-day { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); text-align: center; padding: 2px 0 4px; }
.wk-tag {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: #fff; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; writing-mode: vertical-rl; transform: rotate(180deg);
}
.wk-tag.kids { background: var(--coral); }
.wk-tag.mom { background: var(--teal); }
.wk-cell {
  min-height: 74px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px;
}
.wk-cell.clash { background: var(--lemon); border: 2px dashed var(--lemon-deep); }
.chip {
  display: block;
  font-size: .66rem; font-weight: 700; line-height: 1.15;
  padding: 3px 5px; border-radius: 4px; margin: 0 0 3px;
  color: #fff;
}
.wk-cell.kids .chip { background: var(--coral); }
.wk-cell.mom .chip { background: var(--teal); }
.chip.free { background: transparent !important; color: var(--ink-soft); font-weight: 500; }
.week figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: .6rem; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: "DM Sans", Arial, sans-serif; font-size: .8rem; font-weight: 600; margin: .6rem 0 0; }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .l-kids::before { background: var(--coral); }
.legend .l-mom::before { background: var(--teal); }
.legend .l-clash::before { background: var(--lemon); border: 1px dashed var(--lemon-deep); }

/* ---- magnet lists ----------------------------------------------------- */
.magnet-list { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.magnet-list li { position: relative; padding: 0 0 .6rem 1.9rem; }
.magnet-list li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd1cf 0 18%, var(--coral) 22% 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.magnet-list.teal li::before { background: radial-gradient(circle at 35% 30%, #cfe6f2 0 18%, var(--teal) 22% 100%); }
.magnet-list.mixed li:nth-child(even)::before { background: radial-gradient(circle at 35% 30%, #cfe6f2 0 18%, var(--teal) 22% 100%); }
.magnet-list li strong { font-weight: 600; }

/* ---- two-column tell-tale for fair / not fair, kids / mom ------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 1.2rem; }
.split > div { background: var(--paper); border: 1px solid var(--rule); border-top: 6px solid var(--coral); padding: 14px 16px; }
.split > div + div { border-top-color: var(--teal); }
.split h3 { font-size: 1rem; margin-bottom: .5rem; }
.split ul { margin: 0; padding-left: 1.1rem; font-size: .95rem; }

/* ---- hub of articles -------------------------------------------------- */
.hub { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 1.2rem; }
.hub a {
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 8px solid var(--coral);
  padding: 12px 16px 12px 14px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  box-shadow: 0 2px 0 rgba(80,81,79,.05);
}
.hub a:nth-child(even) { border-left-color: var(--teal); }
.hub a:hover { background: var(--lemon-soft); }
.hub a .hub-note { display: block; font-family: Spectral, Georgia, serif; font-weight: 400; font-size: .92rem; color: var(--ink-soft); margin-top: 3px; }
.hub a .hub-q { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-deep); margin-top: 6px; }

/* ---- figures ----------------------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 1.2rem; }
.figure { background: var(--paper); border: 1px solid var(--rule); border-bottom: 5px solid var(--teal); padding: 12px 14px; }
.figure:nth-child(2) { border-bottom-color: var(--coral); }
.figure:nth-child(3) { border-bottom-color: var(--lemon-deep); }
.figure-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 .3rem; color: var(--ink); }
.figure p { font-size: .88rem; color: var(--ink-soft); margin: 0; line-height: 1.4; }

/* ---- the featured slot, paid and labelled ------------------------------ */
.featured {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--teal);
  padding: 22px 20px 18px;
  margin: 20px 0 1.6rem;
  box-shadow: 0 8px 22px rgba(36,123,160,.12);
}
.featured .tag {
  display: inline-block;
  background: var(--ink);
  color: var(--lemon);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin: 0 0 .7rem;
}
.featured h2, .featured h3 { margin-bottom: .45rem; }
.featured h2 a, .featured h3 a { color: var(--teal-deep); }
.featured .disclosure { font-size: .9rem; color: var(--ink-soft); margin-bottom: 0; border-top: 1px dashed var(--rule); padding-top: .7rem; }
.featured.mini { padding: 16px 18px 14px; }
.featured.mini p { font-size: .98rem; }

/* ---- the form: a notepad on the fridge -------------------------------- */
.form-block { background: var(--paper); border: 1px solid var(--rule); border-top: 10px solid var(--lemon); padding: 20px 20px 16px; margin: 0 0 1rem; box-shadow: 0 8px 22px rgba(80,81,79,.09); }
label { display: block; font-family: "DM Sans", Arial, sans-serif; font-weight: 600; font-size: .9rem; margin: 0 0 .3rem; }
input[type=text], input[type=tel], select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 .95rem;
}
input:focus, select:focus { outline: 3px solid var(--lemon); outline-offset: 1px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.btn {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--coral-deep);
}
.btn:hover { background: var(--coral-deep); }
.call-inline { margin-left: 12px; font-size: .98rem; }
.form-status { font-family: "DM Sans", Arial, sans-serif; font-weight: 600; font-size: .95rem; min-height: 1.4em; margin: .6rem 0 0; }
.form-note { font-size: .9rem; color: var(--ink-soft); }

/* ---- article page ------------------------------------------------------ */
.article-head { padding-bottom: 20px; }
.article-head h1 { font-size: 2rem; }
.byline { font-family: "DM Sans", Arial, sans-serif; font-size: .82rem; color: var(--ink-soft); margin: .4rem 0 0; }
.byline b { color: var(--ink); font-weight: 600; }
article h2 { margin-top: 1.9rem; }
article h3 { margin-top: 1.3rem; }
.tonight { border: 2px solid var(--coral); background: var(--coral-soft); padding: 18px 20px 12px; margin: 1.4rem 0; }
.tonight h2, .tonight h3 { margin-top: 0; color: var(--coral-deep); }
.doctor { border: 2px solid var(--teal); background: var(--teal-soft); padding: 18px 20px 12px; margin: 1.4rem 0; }
.doctor h2, .doctor h3 { margin-top: 0; color: var(--teal-deep); }
.script { background: var(--paper); border-left: 6px solid var(--lemon); padding: 12px 16px; margin: 0 0 1rem; font-style: italic; }
.script b { font-style: normal; font-family: "DM Sans", Arial, sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); display: block; margin-bottom: 4px; }
.cite { font-size: .9rem; color: var(--ink-soft); }
.next { border-top: 2px dashed var(--rule); margin-top: 2rem; padding-top: 1.3rem; }
.next h2 { font-size: 1.2rem; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: .95rem; background: var(--paper); }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: "DM Sans", Arial, sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }

/* ---- sources page ------------------------------------------------------ */
.source-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.source-list li { background: var(--paper); border: 1px solid var(--rule); border-left: 6px solid var(--teal); padding: 10px 14px; margin: 0 0 8px; font-size: .95rem; }
.source-list li:nth-child(even) { border-left-color: var(--coral); }
.source-list li .pub { font-family: "DM Sans", Arial, sans-serif; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); display: block; }
.source-list li .ver { display: block; font-size: .82rem; color: var(--ink-soft); }
.source-list a { word-break: break-word; }

/* ---- footer ------------------------------------------------------------ */
.sitefoot { background: var(--paper); border-top: 4px solid var(--ink); padding: 26px 0 110px; font-size: .9rem; color: var(--ink-soft); }
.sitefoot nav { font-family: "DM Sans", Arial, sans-serif; font-weight: 600; margin-bottom: 1rem; }
.sitefoot nav a { color: var(--ink); text-decoration: none; margin-right: 16px; }
.sitefoot nav a:hover { color: var(--coral-deep); }
.sitefoot p { margin-bottom: .7rem; }
.ad-disclosure { color: var(--ink); font-weight: 600; }

/* ---- phone-only call bar ---------------------------------------------- */
.callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--ink); color: #fff;
  font-size: .85rem; font-weight: 600;
  padding: 10px 14px;
  align-items: center; justify-content: space-between; gap: 10px;
  box-shadow: 0 -4px 14px rgba(0,0,0,.18);
}
.callbar span { color: #e6e3d6; font-weight: 500; }
.callbar a { color: var(--lemon); text-decoration: none; white-space: nowrap; }

@media (max-width: 720px) {
  body { font-size: 18px; }
  h1 { font-size: 1.85rem; }
  .article-head h1 { font-size: 1.7rem; }
  h2 { font-size: 1.36rem; }
  .figures { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: 1.7rem repeat(5, minmax(0, 1fr)); gap: 3px; padding: 6px; }
  .wk-tag { font-size: .6rem; }
  .wk-day { font-size: .64rem; }
  .chip { font-size: .58rem; padding: 3px 3px; }
  .wk-cell { min-height: 68px; padding: 3px; }
  .callbar { display: flex; justify-content: center; }
  .callbar span { display: none; }
  .masthead nav { margin-left: 0; width: 100%; }
  .masthead nav a { margin-left: 0; margin-right: 14px; }
  .call-inline { display: block; margin: .6rem 0 0; }
}