:root {
  --sky: #e6ecf2;
  --night: #1f2b4d;
  --dusk: #c9788a;
  --sun: #f7c948;
  --ink: #18223d;
  --rule: #b9c4d2;
  --serif: "Hoefler Text", Baskerville, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Gill Sans", "Gill Sans MT", "Trebuchet MS", Calibri, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--sky); color: var(--ink); }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; }

a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--dusk); outline-offset: 3px; }

.page { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

/* opening */
.opening { padding: 4rem 0 3rem; }
.opening h1 { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 1.125rem; }
.opening .date { margin: 0.15rem 0 0; }
.lede {
  max-width: 21em;
  margin: 2.25rem 0 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

/* the chart */
.tables { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tables caption { text-align: left; padding: 0 0 1rem; max-width: 40rem; }
.tables th, .tables td { padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; vertical-align: middle; white-space: nowrap; }
.tables thead th { font-weight: 600; font-size: 0.9375rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.4rem; }
.tables tbody th { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; }
.tables tbody tr { border-bottom: 1px solid var(--rule); }
.tables .chart { width: 46%; padding-right: 1.5rem; white-space: normal; }
.tables td:last-child, .tables thead th:last-child { padding-right: 0; }

.hours { position: relative; display: block; height: 1.2rem; font-weight: 400; }
.hours span { position: absolute; transform: translateX(-50%); }
.hours span:first-child { transform: none; }
.hours span:last-child { transform: translateX(-100%); }

.strip {
  position: relative;
  display: block;
  height: 1.75rem;
  background: var(--night);
  overflow: hidden;
}
.strip .tw, .strip .day { position: absolute; top: 0; bottom: 0; }
.strip .tw { background: var(--dusk); }
.strip .day { background: var(--sun); }
.strip::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent calc(25% - 0.5px), rgba(255,255,255,.35) calc(25% - 0.5px), rgba(255,255,255,.35) calc(25% + 0.5px), transparent calc(25% + 0.5px)) 0 0 / 100% 100%,
              linear-gradient(to right, transparent calc(50% - 0.5px), rgba(255,255,255,.35) calc(50% - 0.5px), rgba(255,255,255,.35) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
              linear-gradient(to right, transparent calc(75% - 0.5px), rgba(255,255,255,.35) calc(75% - 0.5px), rgba(255,255,255,.35) calc(75% + 0.5px), transparent calc(75% + 0.5px));
}

.key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.key li::before { content: ""; display: inline-block; width: 1.4rem; height: 0.8rem; margin-right: 0.5rem; vertical-align: -0.05rem; background: var(--night); }
.key .k-tw::before { background: var(--dusk); }
.key .k-day::before { background: var(--sun); }

/* prose */
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; padding: 4rem 0 3rem; }
.notes h2 { margin: 0 0 0.75rem; font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.15; }
.notes p { margin: 0 0 1rem; max-width: 34rem; }

footer { border-top: 2px solid var(--ink); padding: 1.25rem 0 3rem; font-size: 0.9375rem; }
footer p { margin: 0 0 0.3rem; }

.lost { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 52rem) {
  .notes { grid-template-columns: 1fr; }
  .tables thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tables tbody tr { display: grid; grid-template-columns: 1fr auto auto; gap: 0 1rem; padding: 0.9rem 0; }
  .tables th, .tables td { padding: 0; }
  .tables tbody th { grid-column: 1; }
  .tables .chart { grid-column: 1 / -1; grid-row: 2; width: auto; padding: 0.4rem 0 0.35rem; }
  .tables td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .tables td:nth-child(3)::before { content: "Up "; }
  .tables td:nth-child(4) { grid-column: 1; grid-row: 4; }
  .tables td:nth-child(4)::before { content: "Down "; }
  .tables td:nth-child(5) { grid-column: 2 / -1; grid-row: 1; align-self: center; font-weight: 600; text-align: right; }
  .tables td:nth-child(6) { grid-column: 2 / -1; grid-row: 3; text-align: right; }
}