/* Burned Out Daughter. One column, a lot of air, and one device: the 168 bar.
   Instrument Serif for the things said out loud, Rubik for everything else.
   Ember is the hours she covers. Mauve gray is the hours nobody covers.
   Gold is the hours off, once they exist. */

:root {
  --ink: #223843;
  --ink-soft: #55656e;
  --paper: #EFF1F3;
  --paper-deep: #e4e8eb;
  --card: #f8f9fa;
  --ember: #D77A61;
  --ember-deep: #b95f47;
  --mauve: #DBD3D8;
  --gold: #F2A541;
  --rule: #c9d0d5;
  --measure: 37rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Rubik, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.72;
  font-weight: 400;
}

h1, h2, h3, .serif, .brand, .week-num, .pull {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.08;
  margin: 0 0 .6rem;
}
h1 { font-size: 2.75rem; }
h2 { font-size: 1.95rem; margin-top: 2.6rem; }
h3 { font-size: 1.4rem; margin-top: 1.8rem; }
h1 em, h2 em, .serif em { font-style: italic; color: var(--ember-deep); }

p { margin: 0 0 1.15rem; }
ul, ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
li { margin: 0 0 .5rem; }
strong { font-weight: 500; }
small { font-size: .84rem; }

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

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

/* ---- masthead --------------------------------------------------------- */
.masthead { padding: 30px 0 0; }
.masthead .col { display: flex; flex-direction: column; gap: 10px; }
.brand { font-size: 1.55rem; color: var(--ink); text-decoration: none; line-height: 1; }
.brand:hover { text-decoration: none; color: var(--ember-deep); }
.masthead nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.masthead nav a { color: var(--ink-soft); text-decoration: none; padding: 4px 0; }
.masthead nav a:hover, .masthead nav a[aria-current] { color: var(--ink); border-bottom: 2px solid var(--gold); }
.masthead-rule { height: 1px; background: var(--ink); margin: 18px 0 0; opacity: .9; }

main { padding: 44px 0 70px; }

/* ---- the 168 bar, the signature device -------------------------------- */
.week { margin: 2.2rem 0 2.6rem; padding: 0; }
.week-top { display: flex; align-items: baseline; gap: 14px; margin-bottom: .55rem; }
.week-num { font-size: 2.6rem; line-height: 1; color: var(--ink); }
.week-top p { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.4; }
.week-bar {
  display: flex;
  height: 40px;
  width: 100%;
  background: var(--mauve);
  position: relative;
  overflow: hidden;
}
.week-bar > span { display: block; height: 100%; min-width: 0; }
.week-bar .you { background: var(--ember); }
.week-bar .nobody { background: var(--mauve); }
.week-bar .off { background: var(--gold); }
.week-bar::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, transparent calc(100% - 2px), var(--paper) calc(100% - 2px));
  background-size: calc(100% / 7) 100%;
  pointer-events: none;
}
.week-days { display: flex; justify-content: space-between; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 5px; }
.week-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: .88rem; }
.week-key li { margin: 0; display: flex; align-items: center; gap: 8px; }
.week-key i { display: inline-block; width: 14px; height: 14px; }
.week-key .k-you { background: var(--ember); }
.week-key .k-nobody { background: var(--mauve); border: 1px solid #c4b9c0; }
.week-key .k-off { background: var(--gold); }
.week-cap { font-size: .92rem; color: var(--ink-soft); margin: .8rem 0 0; }

/* ---- hub blocks ------------------------------------------------------- */
.eyebrow { font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ember-deep); margin: 0 0 .9rem; font-weight: 500; }
.lede { font-size: 1.24rem; line-height: 1.55; color: var(--ink); }
.dek { font-size: 1.16rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 1.3rem; }
.section { padding: 2.4rem 0 0; }
.section + .section { border-top: 1px solid var(--rule); margin-top: 2.6rem; }
.pull { font-size: 1.7rem; line-height: 1.22; color: var(--ink); border-left: 4px solid var(--gold); padding: .2rem 0 .2rem 1.1rem; margin: 2rem 0; font-style: italic; }

/* article index on the hub */
.list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.list li { margin: 0; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.list li:last-child { border-bottom: 1px solid var(--rule); }
.list .q { display: block; font-family: "Instrument Serif", Georgia, serif; font-size: 1.42rem; line-height: 1.18; color: var(--ink); text-decoration: none; }
.list .q:hover { color: var(--ember-deep); text-decoration: underline; }
.list .why { display: block; margin: .4rem 0 0; font-size: .95rem; color: var(--ink-soft); }
.list .tag { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ember-deep); margin-bottom: .35rem; }

/* ---- featured placement, visually distinct, never a rank --------------- */
.featured {
  margin: 3rem 0;
  padding: 1.5rem 1.4rem 1.3rem;
  background: var(--card);
  border: 1px solid var(--ink);
  border-top: 6px solid var(--gold);
}
.featured .ftag { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft); margin: 0 0 .7rem; font-weight: 500; }
.featured h2 { margin: 0 0 .6rem; font-size: 1.9rem; }
.featured h2 a { color: var(--ink); text-decoration: none; }
.featured h2 a:hover { color: var(--ember-deep); text-decoration: underline; }
.featured p { margin-bottom: .9rem; }
.featured .call { font-size: 1.15rem; font-weight: 500; }
.featured .call a { color: var(--ember-deep); }
.featured .disclosure { font-size: .86rem; color: var(--ink-soft); border-top: 1px dashed var(--rule); padding-top: .8rem; margin: 0; }
.featured.mini { margin: 2.6rem 0; padding: 1.2rem 1.2rem 1rem; }
.featured.mini h2 { font-size: 1.5rem; margin-top: 0; }

/* ---- article page ----------------------------------------------------- */
.crumbs { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1.4rem; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ember-deep); text-decoration: underline; }
.byline { font-size: .86rem; color: var(--ink-soft); margin: 0 0 1.6rem; }
.prose h2 { font-size: 1.95rem; }
.prose h3 { font-size: 1.35rem; }
.prose ul li, .prose ol li { margin-bottom: .55rem; }

.box { margin: 2.2rem 0; padding: 1.2rem 1.3rem .4rem; border-left: 5px solid var(--gold); background: var(--card); }
.box h2, .box h3 { margin-top: 0; }
.box.doctor { border-left-color: var(--ember); }
.box.plan { border-left-color: var(--ink); }
.box p:last-child { margin-bottom: .9rem; }

.hours { list-style: none; padding: 0; margin: 1.2rem 0; border-top: 1px solid var(--rule); }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: .55rem 0; border-bottom: 1px solid var(--rule); margin: 0; font-size: 1rem; }
.hours li b { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.3rem; white-space: nowrap; }
.hours li.total { font-weight: 500; }

.next { margin: 3rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--ink); }
.next h2 { font-size: 1.5rem; margin-top: 0; }
.next ul { list-style: none; padding: 0; }
.next li { padding: .35rem 0; }

/* ---- the form --------------------------------------------------------- */
.ask { margin: 3rem 0 0; padding-top: 2.4rem; border-top: 1px solid var(--rule); }
.form-wrap { background: var(--card); border: 1px solid var(--rule); padding: 1.3rem 1.2rem 1rem; margin: 1.4rem 0 0; }
label { display: block; font-size: .84rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin: .9rem 0 .35rem; font-weight: 500; }
input[type=text], input[type=tel], select {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink);
  padding: 12px 12px; border: 1.5px solid var(--ink); border-radius: 0; background: #fff;
}
input:focus, select:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.btn {
  display: inline-block; margin-top: 1.3rem; font: inherit; font-size: 1.05rem; font-weight: 500;
  background: var(--ink); color: var(--paper); border: 0; padding: 14px 22px; cursor: pointer;
}
.btn:hover { background: var(--ember-deep); }
.or-call { display: block; margin-top: .9rem; font-size: 1rem; }
.status { min-height: 1.4em; margin: .8rem 0 0; font-size: .95rem; color: var(--ember-deep); }
.form-note { font-size: .86rem; color: var(--ink-soft); margin: 1rem 0 0; }

/* ---- sources page ----------------------------------------------------- */
.src-group h2 { font-size: 1.5rem; }
.src { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.src li { padding: .7rem 0; border-top: 1px solid var(--rule); margin: 0; font-size: .96rem; }
.src li a { word-break: break-word; }
.src .ver { display: block; font-size: .8rem; color: var(--ink-soft); }

/* ---- footer ----------------------------------------------------------- */
.sitefoot { border-top: 1px solid var(--ink); padding: 2rem 0 3.4rem; font-size: .86rem; color: var(--ink-soft); }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 1.2rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.sitefoot nav a { color: var(--ink); text-decoration: none; }
.sitefoot nav a:hover { text-decoration: underline; }
.sitefoot p { margin-bottom: .8rem; }
.sitefoot .ad { color: var(--ink); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--gold); color: var(--ink); padding: 8px 12px; z-index: 5; }

@media (min-width: 640px) {
  body { font-size: 19px; }
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.2rem; }
  .prose h2 { font-size: 2.15rem; }
  .masthead { padding-top: 44px; }
  .masthead .col { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .brand { font-size: 1.7rem; }
  main { padding: 64px 0 90px; }
  .week-bar { height: 48px; }
  .week-num { font-size: 3.2rem; }
  .row { grid-template-columns: 1fr 1fr; }
  .featured { padding: 1.9rem 1.9rem 1.5rem; }
  .list .q { font-size: 1.6rem; }
}