/* Call In Sick Tips Revealed - movable-type-journal, cis-sickleave-dated-ledger-journal-2019 */
html { background: #e9e7e0; }
body {
  margin: 0; background: #e9e7e0; color: #242424;
  font: 15px/1.65 Verdana, Geneva, sans-serif;
}
a { color: #1f3f8f; }
a:hover { color: #7a1f1f; }
a:focus-visible, :focus-visible { outline: 2px solid #7a1f1f; outline-offset: 2px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: #ffffff; color: #1f3f8f;
  padding: 6px 10px; border: 1px solid #c9c5b8; z-index: 5;
}
.skip:focus { left: 8px; top: 8px; }

.shell {
  max-width: 900px; margin: 24px auto; background: #ffffff;
  border: 1px solid #c9c5b8; padding: 22px;
  display: grid; grid-template-columns: 1fr 220px; column-gap: 28px;
}
.home-shell {
  grid-template-areas: "mast mast" "newest rail" "entries rail" "archive archive" "foot foot";
  grid-template-rows: auto auto 1fr auto auto;
}
.inner-shell {
  grid-template-areas: "mast mast" "main rail" "archive archive" "foot foot";
  grid-template-rows: auto 1fr auto auto;
}
.mast { grid-area: mast; }
.newest { grid-area: newest; }
.stream { grid-area: entries; }
.main { grid-area: main; }
.rail { grid-area: rail; align-self: start; border-left: 1px solid #c9c5b8; padding-left: 18px; }
.rail.arch {
  grid-area: archive; border-left: 0; padding-left: 0;
  border-top: 1px solid #c9c5b8; padding-top: 14px; margin-top: 16px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px;
}
.foot { grid-area: foot; }

/* masthead */
.mast { border-bottom: 2px solid #242424; padding-bottom: 10px; margin-bottom: 18px; }
.brand {
  font: 700 27px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .01em;
  margin: 0 0 2px; color: #242424;
}
.brand a { color: #242424; text-decoration: none; }
.standing {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: #5a5a5a;
}
.utility ul { list-style: none; margin: 0; padding: 0; }
.utility li { display: inline; font-size: 12px; }
.utility li + li:before { content: " | "; color: #c9c5b8; }
.utility a { text-decoration: none; }
.utility a:hover { text-decoration: underline; }

/* ledger date rule */
.dategroup, h3.dategroup {
  display: flex; align-items: baseline; gap: 10px;
  font: 11px/1.4 Verdana, Geneva, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #5a5a5a;
  margin: 26px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #c9c5b8;
}
.newest .dategroup { margin-top: 0; }
.dategroup .dnum { color: #242424; letter-spacing: .06em; }
.dategroup .tick { flex: 1 0 auto; height: 1px; }
.dategroup .tick:after {
  content: ""; display: block; float: right; width: 26px; height: 3px;
  background: #7a1f1f; margin-top: -2px;
}

/* entries */
.entry { margin: 0 0 22px; }
.etitle { font-family: Georgia, "Times New Roman", serif; line-height: 1.25; margin: 0 0 6px; }
h3.etitle { font-size: 20px; }
h4.etitle { font-size: 20px; font-weight: 700; }
.entry p, .main > p { max-width: 34em; margin: 0 0 12px; }
.main > .rowlist.wide { max-width: 34em; }
.entry h2 {
  font: 700 17px/1.3 Georgia, "Times New Roman", serif; margin: 20px 0 8px; color: #242424;
}
.main > h1, .entry.full h1 {
  font: 700 26px/1.25 Georgia, "Times New Roman", serif; margin: 4px 0 8px;
}
.stamp {
  font: 11px/1.4 Consolas, "Courier New", monospace; color: #5a5a5a;
  letter-spacing: .06em; margin: 0 0 2px;
}
.permaline {
  font-size: 11px; color: #5a5a5a; margin: 0 0 4px; padding-top: 4px;
  border-top: 1px dotted #c9c5b8; max-width: 34em;
}
.permaline .by { color: #242424; }
.sep { color: #c9c5b8; }
.sr-head {
  font: 11px/1.4 Verdana, Geneva, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #5a5a5a; margin: 24px 0 0;
}
.more { font-size: 12px; margin: 18px 0 0; }
.catintro { font-size: 13px; color: #5a5a5a; max-width: 34em; margin: 0 0 6px; }
.count { color: #242424; }

figure.lead { width: 100%; max-width: 34em; margin: 6px 0 14px; }
figure.lead img { display: block; width: 100%; height: auto; border: 1px solid #c9c5b8; }
figure.lead figcaption { font-size: 11px; color: #5a5a5a; padding-top: 4px; }

/* rails */
.railblock { margin: 0 0 22px; }
.railhead {
  font: 700 15px/1.3 Georgia, "Times New Roman", serif; margin: 0 0 6px;
  padding-bottom: 4px; border-bottom: 1px solid #c9c5b8;
}
.rowlist { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.rowlist li {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 4px 0; border-bottom: 1px dotted #c9c5b8;
}
.rowlist.plain li { display: block; }
.rowlist a { text-decoration: none; }
.rowlist a:hover { text-decoration: underline; }
.rdate { color: #5a5a5a; white-space: nowrap; }

/* archive page */
.monthgroup { margin: 0 0 20px; }
.monthhead {
  font: 700 17px/1.3 Georgia, "Times New Roman", serif; margin: 22px 0 6px;
  padding-bottom: 4px; border-bottom: 1px solid #c9c5b8;
}
.archlist { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.archlist li { padding: 5px 0; border-bottom: 1px dotted #c9c5b8; }
.adate { color: #5a5a5a; font-size: 11px; display: inline-block; min-width: 130px; }
.acat { color: #5a5a5a; font-size: 11px; display: block; }

/* prev/next */
.prevnext { border-top: 1px solid #c9c5b8; padding-top: 10px; margin-top: 8px; }
.pn { font-size: 12px; margin: 0 0 6px; }
.pn span { color: #5a5a5a; display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* footer */
.foot { border-top: 1px solid #c9c5b8; margin-top: 22px; padding-top: 8px; }
.foot p { font-size: 11px; color: #5a5a5a; margin: 0; }
.foot a { text-decoration: none; }

@media (max-width: 700px) {
  .shell {
    grid-template-columns: 1fr; column-gap: 0; margin: 0; border: 0; padding: 14px;
    max-width: none;
  }
  .home-shell {
    grid-template-areas: "mast" "newest" "rail" "entries" "archive" "foot";
    grid-template-rows: none;
  }
  .inner-shell {
    grid-template-areas: "mast" "main" "rail" "archive" "foot";
    grid-template-rows: none;
  }
  body { font-size: 16px; }
  .entry p, .permaline, .catintro { max-width: none; }
  .rail { border-left: 0; padding-left: 0; border-top: 1px solid #c9c5b8; padding-top: 12px; }
  .rail.arch { grid-template-columns: 1fr; }
  figure.lead { max-width: none; }
  .utility li { display: inline-block; }
  .utility li a { display: inline-block; padding: 12px 0; }
  .utility li + li:before { padding: 0 4px; }
  .brand { font-size: 24px; }
}

@media (max-width: 480px) {
  .dategroup .tick { display: none; }
  .rowlist { columns: 2; column-gap: 14px; }
  .rowlist li { break-inside: avoid; }
  .rowlist.plain { columns: 1; }
  .archlist { font-size: 14px; }
  .adate { display: block; min-width: 0; }
}