:root {
  --bg: #000000;
  --ink: #E3E5E4;
  --cream: #E3DAC9;
  --dim: rgba(227, 229, 228, .58);
  --faint: rgba(227, 229, 228, .18);
  --hair: rgba(227, 229, 228, .1);
  --text: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --caps: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.45 var(--text); font-variant-numeric: lining-nums.pickular-nums; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--cream); }
:focus-visible { outline: 1px solid var(--cream); outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* small spaced capitals: the lettering of the seal */
.lab, .ways a, .mark span, th, .pick, .dock button, .fig dt, .read, .turn, .slip dt { font-family: var(--caps); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }

.mast { display: flex; align-items: center; gap: 28px; padding: 14px 28px 12px; flex: none; }
.mark { display: flex; align-items: center; gap: 14px; }
.mark img { display: block; }
.mark span { font-size: 15px; letter-spacing: .5em; }
.ways { display: flex; gap: 30px; margin-left: 22px; }
.ways a { color: var(--dim); padding: 6px 0; border-bottom: 1px solid transparent; }
.ways a.on { color: var(--ink); border-bottom-color: var(--ink); }
.seek { margin-left: auto; position: relative; display: flex; align-items: baseline; gap: 12px; }
.seek .lab { color: var(--dim); }
.seek input { width: 230px; background: none; border: 0; border-bottom: 1px solid var(--faint); color: var(--ink); font: italic 17px var(--text); padding: 3px 0; border-radius: 0; }
.seek input::placeholder { color: var(--faint); }
.seek input:focus { outline: 0; border-bottom-color: var(--cream); }
.hits { position: absolute; right: 0; top: 100%; z-index: 30; width: 290px; margin: 6px 0 0; padding: 6px 0; list-style: none; background: var(--bg); border: 1px solid var(--faint); }
.hits li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 14px; cursor: pointer; }
.hits li.on, .hits li:hover { color: var(--cream); background: rgba(227, 218, 201, .08); }
.hits small { color: var(--dim); font-size: 14px; }

/* the measuring line under the masthead */
.rule { flex: none; height: 9px; margin: 0 28px; border-top: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 60px) top left / 100% 9px no-repeat,
              repeating-linear-gradient(90deg, var(--dim) 0 1px, transparent 1px 12px) top left / 100% 4px no-repeat; }

#stage { flex: 1 1 auto; min-height: 0; overflow: auto; }
.wait { padding: 60px 28px; color: var(--dim); font-style: italic; }

/*.field */
.field { position: relative; height: 100%; overflow: hidden; }
.plot { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.plot.drag { cursor: grabbing; }
.plot.aim { cursor: pointer; }
.plot canvas { display: block; }
.note { position: absolute; z-index: 5; pointer-events: none; padding: 4px 10px; background: var(--bg); border: 1px solid var(--faint); white-space: nowrap; font-size: 15px; }
.note i { color: var(--dim); }
.dock { position: absolute; left: 28px; bottom: 22px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 9px 16px; background: rgba(0, 0, 0, .86); border: 1px solid var(--faint); }
.dock button { color: var(--dim); padding: 3px 0; border-bottom: 1px solid transparent; }
.dock button.on { color: var(--ink); border-bottom-color: var(--ink); }
.dock button:hover { color: var(--cream); }
.dock .gap { width: 1px; height: 14px; background: var(--faint); }
.read { position: absolute; right: 28px; bottom: 22px; z-index: 6; padding: 9px 16px; background: rgba(0, 0, 0, .86); border: 1px solid var(--faint); color: var(--dim); letter-spacing: .16em; }
.key { position: absolute; left: 28px; top: 28px; z-index: 6; display: flex; gap: 20px; padding: 7px 16px; background: rgba(0, 0, 0, .86); border: 1px solid var(--faint); font-size: 15px; color: var(--dim); }
.key b { font-weight: 400; color: var(--ink); margin-right: 6px; }

.slip { position: absolute; right: 28px; top: 28px; bottom: 76px; z-index: 8; width: 340px; overflow: auto; padding: 20px 22px; background: var(--bg); border: 1px solid var(--faint); }
.slip h2 { margin: 0 34px 2px 0; font: 400 30px/1.1 var(--text); overflow-wrap: anywhere; }
.slip .under { margin: 0 0 16px; color: var(--dim); font-style: italic; }
.slip dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; align-items: baseline; }
.slip dt { color: var(--dim); }
.slip dd { margin: 0; }
.slip img { display: block; width: 100%; height: auto; margin-top: 18px; border: 1px solid var(--faint); image-rendering: pixelated; }
.slip .shut { position: absolute; right: 16px; top: 14px; font-size: 26px; line-height: 1; color: var(--dim); }
.slip .more { display: inline-block; margin-top: 16px; border-bottom: 1px solid var(--faint); font-style: italic; }
.copy { margin-left: 10px; color: var(--dim); font-style: italic; border-bottom: 1px solid var(--faint); }
.copy:hover { color: var(--cream); }

/* ledgers */
.page { max-width: 1120px; margin: 0 auto; padding: 34px 28px 80px; }
.page h1 { margin: 0; font: 400 46px/1.05 var(--text); letter-spacing: -.01em; overflow-wrap: anywhere; }
.page .lede { margin: 8px 0 26px; color: var(--dim); font-style: italic; }
.picks { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; margin: 0 0 6px; }
.picks .lab { color: var(--dim); margin-right: -8px; }
.pick { color: var(--dim); padding: 4px 0; border-bottom: 1px solid transparent; }
.pick.on { color: var(--ink); border-bottom-color: var(--ink); }
.pick:hover { color: var(--cream); }
.picks input { background: none; border: 0; border-bottom: 1px solid var(--faint); color: var(--ink); font: italic 17px var(--text); padding: 2px 0; width: 200px; border-radius: 0; }
.picks input:focus { outline: 0; border-bottom-color: var(--cream); }
.span { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 14px; }
th { text-align: left; color: var(--dim); padding: 10px 14px 9px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
th.sort { cursor: pointer; }
th.sort:hover, th.by { color: var(--ink); }
td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--hair); white-space: nowrap; vertical-align: baseline; }
th.n, td.n { text-align: right; }
td.day { color: var(--dim); font-family: var(--caps); font-size: 12px; letter-spacing: .14em; }
td.nm a { border-bottom: 1px solid var(--hair); }
td.at a:hover { border-bottom: 1px solid var(--cream); }
td.zero { color: var(--faint); }
tr.t .kind { color: var(--cream); }
.kind::before { display: inline-block; width: 18px; color: var(--dim); }
tr.s .kind::before { content: "\25C6"; color: var(--cream); }
tr.t .kind::before { content: "\00D7"; color: var(--ink); }
tr.b .kind::before { content: "\00B7"; }
.pic { color: var(--dim); font-style: italic; }
.turn { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 22px; color: var(--dim); }
.turn button { letter-spacing: .24em; text-transform: uppercase; font: 500 11px var(--caps); color: var(--ink); border-bottom: 1px solid var(--faint); padding: 3px 0; }
.turn button:disabled { color: var(--faint); cursor: default; border-color: transparent; }
.none { padding: 40px 0; color: var(--dim); font-style: italic; }

/* the front page: one field */
.at-front .seek { visibility: hidden; }
.front { max-width: 760px; margin: 0 auto; padding: 13vh 28px 80px; }
.front .lab { display: block; color: var(--dim); margin-bottom: 14px; }
#ask { display: block; width: 100%; background: none; border: 0; border-radius: 0; color: var(--ink); font: 400 52px/1.15 var(--text); padding: 0 0 10px; letter-spacing: -.01em; }
#ask::placeholder { color: var(--faint); font-style: italic; }
#ask:focus { outline: 0; }
#ask::-webkit-search-cancel-button { display: none; }
.front .rule { margin: 0; }
.hint { margin: 16px 0 4px; color: var(--dim); font-style: italic; min-height: 1.45em; }
.found { list-style: none; margin: 0; padding: 0; }
.found li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--hair); }
.found li a { flex: 1; padding: 10px 0; font-size: 24px; overflow-wrap: anywhere; }
.found li.on a { color: var(--cream); }
.found li.on { border-bottom-color: var(--cream); }
.found small { color: var(--dim); font-size: 15px; white-space: nowrap; }
.found li.near a, .hits li.near { font-style: italic; }
h2 + .found li a { font-size: 19px; padding: 7px 0; }

/* the server's state, in the masthead */
.pulse { font-family: var(--caps); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.pulse::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); }
.pulse.off { color: var(--cream); }
.pulse.off::before { background: none; border-color: var(--cream); }

/* online, talk */
.page h2 { margin: 40px 0 6px; font: 400 26px/1.2 var(--text); }
table.slim { width: auto; min-width: 340px; }
table.slim td, table.slim th { padding-right: 34px; }
.graph { margin: 6px 0 26px; }
.graph figcaption { color: var(--dim); margin-bottom: 4px; }
.trace { display: block; width: 100%; height: auto; touch-action: pan-y; }
.trace text { fill: var(--dim); font: 500 11px var(--caps); letter-spacing: .08em; }
.trace .base { stroke: var(--ink); stroke-width: 1; }
.trace .grid { stroke: var(--hair); stroke-width: 1; }
.trace .run { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.trace .cross { stroke: var(--faint); stroke-width: 1; }
.trace .dot { fill: var(--cream); stroke: var(--bg); stroke-width: 2; }
.roll { list-style: none; margin: 16px 0 0; padding: 0; columns: 4 220px; column-gap: 40px; }
.roll li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--hair); break-inside: avoid; }
.roll small { color: var(--dim); font-size: 14px; white-space: nowrap; }
.roll li.auto a { color: var(--dim); }
.roll li.auto a::after { content: " \00B0"; }
.lines { list-style: none; margin: 14px 0 0; padding: 0; }
.lines li { display: grid; grid-template-columns: 118px 170px 1fr; gap: 0 16px; padding: 7px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.lines li > span:only-of-type:nth-child(2) { grid-column: 2 / 4; }
.lines time { color: var(--dim); font: 500 12px var(--caps); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.lines a { overflow: hidden; text-overflow: ellipsis; }
.lines span { overflow-wrap: anywhere; }
.picks .pick.on[type=submit] { margin-left: 6px; }
.picks .gap { width: 1px; height: 14px; background: var(--faint); align-self: center; }
.lines em { display: block; color: var(--dim); }
.leads { list-style: none; margin: 14px 0 0; padding: 0; }
.leads li { display: grid; grid-template-columns: 118px 170px 84px 1fr; gap: 0 16px; padding: 8px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.leads time { color: var(--dim); font: 500 12px var(--caps); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.leads li > a { overflow: hidden; text-overflow: ellipsis; }
.leads b { font: 500 10px var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.leads span { overflow-wrap: anywhere; }
.spot { display: inline-block; margin-left: 14px; color: var(--dim); border-bottom: 1px solid var(--faint); white-space: nowrap; }
.most { margin: 10px 0 22px; line-height: 2; }
.most .lab { color: var(--dim); margin-right: 18px; }
.most a { margin-right: 22px; white-space: nowrap; border-bottom: 1px solid var(--hair); }
.most small { color: var(--dim); font-size: 14px; }
.packs { margin: 12px 0 0; padding: 0; list-style: none; }
.packs li { display: grid; grid-template-columns: 190px 1fr; gap: 0 16px; padding: 8px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.packs small { color: var(--dim); font: 500 11px var(--caps); letter-spacing: .12em; text-transform: uppercase; }
.packs a { border-bottom: 1px solid var(--hair); }
@media (max-width: 1320px) { .pulse { display: none; } }
@media (max-width: 1180px) { .mast { flex-wrap: wrap; gap: 8px 24px; } .ways { order: 3; width: 100%; margin-left: 0; } }
@media (max-width: 760px) { .leads li, .packs li { grid-template-columns: auto 1fr; } .leads li > span, .packs li > span { grid-column: 1 / 3; } .ways { flex-wrap: wrap; gap: 8px 20px; } #ask { font-size: 34px; } }

/* a name's page */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px 24px; margin: 14px 0 18px; }
.shots figure { margin: 0; }
.shots img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--faint); image-rendering: pixelated; background: #050505; }
.shots a:hover img { border-color: var(--cream); }
.shots figcaption { margin-top: 7px; color: var(--dim); font-size: 15px; }
.fig { display: flex; flex-wrap: wrap; gap: 14px 46px; margin: 24px 0 28px; padding: 0; }
.fig div { min-width: 90px; }
.fig dt { color: var(--dim); }
.fig dd { margin: 2px 0 0; font-size: 32px; line-height: 1.15; }
.inset { position: relative; height: min(52vh, 480px); border: 1px solid var(--faint); margin-bottom: 30px; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .mast { flex-wrap: wrap; gap: 10px 20px; padding: 12px 16px 10px; }
  .ways { margin-left: 0; gap: 22px; order: 3; width: 100%; }
  .seek input { width: 150px; }
  .rule { margin: 0 16px; }
  .page { padding: 24px 16px 60px; }
  .page h1 { font-size: 34px; }
  .dock { left: 12px; right: 12px; bottom: 12px; gap: 6px 16px; }
  .read, .key { display: none; }
  .slip { left: 12px; right: 12px; top: auto; bottom: 64px; width: auto; max-height: 58%; }
  .fig dd { font-size: 26px; }
  .lines li { grid-template-columns: auto 1fr; }
  .lines li > span { grid-column: 1 / 3; }
  .pulse { order: 2; }
  table.slim { min-width: 0; width: 100%; }
}