/* Will / Did — plain pages, a quiet archive, and one sentence at a time. */
:root {
  --paper: #fff;
  --ink: #000;
  --faint: #767676;
  --rule: color-mix(in srgb, var(--faint) 30%, transparent);
  --time: 7.5ch; /* the time column: wide enough for a tally like ×993 $2.2M */
  --gutter: calc(var(--time) + 1ch); /* where the text column starts */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #000; --ink: #fff; --faint: #8c8c8c; }
}
html { background: var(--paper); scroll-padding-top: 1rem; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 17px/1.55 "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 720px) { body { font-size: 18px; } }
.frame {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  min-height: 100vh;
}
.site-header {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: calc(2.2rem + env(safe-area-inset-top, 0px)) 1.4rem 2rem;
  border-right: 1px solid var(--rule);
  scrollbar-width: thin;
}
h1 { font: inherit; margin: 0 0 1.6rem; }
a {
  color: inherit;
  text-decoration: none;
  text-decoration-color: var(--faint);
  text-underline-offset: 0.18em;
}
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
summary { cursor: pointer; }
h1 a { text-decoration: none; }
.primary { display: flex; gap: 1.2em; margin-bottom: 1.5rem; }
.primary, #days { color: var(--faint); }
[aria-current="page"] { color: var(--ink); text-decoration: underline; }
#days { display: flex; flex-direction: column; gap: 1.2rem; white-space: nowrap; }
#days:empty { display: none; }
.month > summary { font-size: 0.78em; padding: 0.25em 0; }
.month-days { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5em; }
main {
  max-width: 72ch;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: calc(2.2rem + env(safe-area-inset-top, 0px)) 1.6rem 18vh;
  overflow-wrap: anywhere;
}
main:focus { outline: none; }
.intro { margin: 0 0 1.8rem var(--gutter); color: var(--faint); font-style: italic; }
.day-header { margin: 0 0 1.7rem var(--gutter); }
h2 { font: inherit; font-size: 1.12em; margin: 0; }
.updated { margin: 0.4rem 0 0; color: var(--faint); font-size: 0.75em; }
.updated time { white-space: normal; }
ol { list-style: none; margin: 0; padding: 0; }
#lines > li {
  display: grid;
  grid-template-columns: var(--time) minmax(0, 1fr);
  column-gap: 1ch;
  padding: 0.32em 0;
}
time { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Under each time, a quiet tally of the family the line stands for: how many
   markets (×993; omitted for a single market) and what they traded together
   ($2.2M). Smaller and lighter than the time, so it reads as a footnote. */
.gutter { display: flex; flex-direction: column; min-width: 0; }
.family {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.45em;
  margin-top: 0.15em;
  color: var(--faint);
  opacity: 0.75;
  font-size: 0.62em;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.did { font-style: italic; }
.day-colophon a, .about a { text-decoration: underline; }
.day-colophon { margin: 2.7rem 0 0 var(--gutter); color: var(--faint); }
.day-colophon p { margin: 0 0 0.8em; }
.wagered { font-style: italic; }
.selection, .day-colophon p:last-child { font-size: 0.78em; }
#lines > .empty { display: block; margin-left: var(--gutter); color: var(--faint); }
.about { max-width: 60ch; margin-left: var(--gutter); }
.about h2 { margin-bottom: 1.5em; font-style: italic; }
.about p { margin: 0 0 1.1em; }
.about h3 { font: inherit; font-style: italic; margin: 2.2em 0 1em; }
.about .colophon { color: var(--faint); margin-top: 2.4em; }
li.turning s.was {
  display: block;
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  animation: strike 1.4s ease-out 0.3s both;
}
li.turning .line { display: block; animation: settle 1.2s ease-out 1.5s both; }
@keyframes strike { from { color: var(--ink); text-decoration-color: transparent; } }
@keyframes settle { from { opacity: 0; } }
/* A line the now page took in since it was opened. */
#lines > li.arrived:not(.turning) { animation: settle 1.2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  li.turning s.was, li.turning .line, #lines > li.arrived { animation: none; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 3; padding: 0.5rem; background: var(--paper); }
.skip-link:focus { top: 0.5rem; }
@media (max-width: 719px) {
  html { scroll-padding-top: 7rem; }
  .frame { display: block; }
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.45rem 1rem;
    height: auto;
    overflow: visible;
    z-index: 1;
    background: var(--paper);
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: calc(0.7rem + env(safe-area-inset-top, 0px)) 1rem 0.5rem;
  }
  h1, .primary { margin: 0; }
  .primary a { padding: 0.3rem 0; }
  #days {
    grid-column: 1 / -1;
    min-width: 0;
    flex-direction: row;
    gap: 1.4ch;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.2rem;
    font-size: 0.85em;
  }
  .month { flex: 0 0 auto; }
  .month > summary { font-size: inherit; }
  .month[open] { display: flex; align-items: baseline; gap: 1.4ch; }
  .month[open] > summary { display: inline list-item; }
  .month-days { flex-direction: row; gap: 1.8ch; margin: 0; }
  main { padding: 1.5rem 1rem 12vh; }
  .intro { margin: 0 0 1.3rem; }
  .day-header { margin: 0 0 1.1rem; }
}
@media (max-width: 420px) {
  :root { --time: 5ch; } /* narrow screens: the tally wraps to two short lines instead */
  .about { margin-left: 0; }
}