/* Ink on white paper: black ink, one warm accent, a reading font and a hand for headings. */
:root {
  --bg: #ffffff;
  --text: #1c1b19;
  --ink: #161514;
  --muted: #6f6a63;
  --line: #e8e5e0;
  --accent: #b5532c;
  --measure: 40rem;
  --hand: "Caveat", "Segoe Print", cursive;
  --read: "Literata", Charter, Georgia, serif;
  --ui: system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1.125rem/1.75 var(--read); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }

header.site, main, footer.site { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
header.site {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 2rem;
  padding-top: 1.25rem; padding-bottom: .9rem;
  background: linear-gradient(var(--ink), var(--ink)) bottom / 100% 1.5px no-repeat;
}
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: baseline; gap: .6rem; }
.brand strong { font: 700 2.2rem/1 var(--hand); }
.brand span { color: var(--muted); font: 1.25rem var(--hand); }
header.site nav { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; font: .95rem var(--ui); }
header.site nav a { color: var(--text); text-decoration: none; }
header.site nav a:hover { color: var(--accent); }

/* categories drop down */
header.site { position: relative; }
.cats summary { list-style: none; cursor: pointer; color: var(--text); }
.cats summary::-webkit-details-marker { display: none; }
.cats summary::after { content: " ▾"; font-size: .8em; }
.cats[open] summary { color: var(--accent); }
.cat-panel { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 0 1rem; background: var(--bg);
  border: 1.5px solid var(--ink); border-radius: 12px 16px 14px 10px / 14px 10px 16px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 1rem 1.25rem; max-height: 75vh; overflow: auto; display: grid; grid-template-columns: 3fr 2fr; gap: 1.5rem; font: .92rem/1.5 var(--ui); }
.cat-panel h4 { font: 700 1.5rem var(--hand); margin: 0 0 .4rem; color: var(--ink); }
.cat-tree, .cat-tree ul { list-style: none; margin: 0; padding: 0; }
.cat-panel section:first-child > .cat-tree { columns: 2; column-gap: 1.5rem; }
.cat-tree > li { break-inside: avoid; margin-bottom: .5rem; }
.cat-tree ul { padding-left: .9rem; border-left: 1px solid var(--line); margin: .1rem 0 .2rem .2rem; }
.cat-tree a { color: var(--text); text-decoration: none; }
.cat-tree a:hover { color: var(--accent); }
.cat-tree .d0 > a { font-weight: 600; color: var(--ink); }
.cat-tree small { color: var(--muted); font-size: .78em; }
@media (max-width: 640px) {
  .cat-panel { grid-template-columns: 1fr; margin: 0 .5rem; }
  .cat-panel section:first-child > .cat-tree { columns: 1; }
}

main { padding-top: 2rem; padding-bottom: 3rem; }
h1, h2, h3 { line-height: 1.25; font-weight: 600; }
.hand { font: 700 1.9rem/1.2 var(--hand); color: var(--ink); }
.meta { color: var(--muted); font: .82rem/1.4 var(--ui); margin: 0 0 .35rem; }
.meta a { color: var(--muted); }

/* home: hero + ink road timeline, preview beside it (wide) or as a sheet at the bottom (phones) */
.hero h1 { font: 700 clamp(2.2rem, 6vw, 3.4rem)/1.05 var(--hand); color: var(--ink); margin: .5rem 0 .4rem; }
.hero p { color: var(--muted); max-width: 36rem; margin: 0 0 1.5rem; font-size: 1rem; }
.timeline-wrap { display: grid; gap: 2rem; margin-bottom: 3rem; align-items: start; }
@media (min-width: 900px) {
  /* the preview column runs alongside the road and the latest posts, so it never gets pushed off screen */
  .timeline-wrap { grid-template-columns: 1fr 17rem; }
  .preview-col { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; }
}
#timeline { width: 100%; min-height: 200px; }
#timeline svg { width: 100%; display: block; overflow: visible; }
.road { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-opacity: .35; stroke-linecap: round; stroke-linejoin: round; }
.tick { stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.year { font: 700 1.15rem var(--hand); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.year.now { fill: var(--accent); }
.dot .blot { fill: var(--ink); transition: fill .15s; }
.hit { fill: transparent; }
.dot:hover .blot, .dot:focus .blot, .dot.on .blot { fill: var(--accent); fill-opacity: 1; }
.dot.on .blot { r: 10px; }
.dot { cursor: pointer; }
.dot:focus { outline: none; }
.tour { display: flex; align-items: center; gap: .3rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.tour button { font: 1.1rem/1 var(--ui); width: 2rem; height: 2rem; border: 1.5px solid var(--ink); border-radius: 50% 45% 50% 48%; background: var(--bg); color: var(--ink); cursor: pointer; }
.tour button.play { font-size: .75rem; }
.tour button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.tour button:disabled { opacity: .3; cursor: default; }
.tour span { font: 1.1rem var(--hand); color: var(--muted); margin-left: .4rem; }
.tour-bar { height: 2px; margin-top: .5rem; background: var(--line); overflow: hidden; }
.tour-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.preview.ticking .tour-bar i { animation: fill 8s linear forwards; }
@keyframes fill { to { width: 100%; } }
@media (max-width: 899px) { .preview .tour { grid-column: 2; margin-top: .4rem; padding-top: .4rem; } .preview .tour-bar { grid-column: 1 / -1; } }
.preview.arrive > * { animation: arrive .6s ease-out both; }
.preview.arrive > img { animation-name: develop; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } }
@keyframes develop { from { opacity: 0; filter: grayscale(1) contrast(1.4); } }
.dot.pulse.on .blot { animation: pulse 1.6s ease-out; }
@keyframes pulse { 0% { r: 3px; } 30% { r: 14px; fill-opacity: .7; } 100% { r: 10px; } }
.preview {
  position: sticky; top: 1.75rem; background: var(--bg);
  border: 1.5px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 1rem 1.1rem 1.1rem;
}
.preview img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; margin-bottom: .6rem; display: block; }
.preview h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.preview h3 a { color: var(--ink); text-decoration: none; }
.preview p { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.55; }
.preview p:not(.meta) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.preview .go { font: 700 1.35rem var(--hand); text-decoration: none; }
.preview .close { display: none; }
@media (max-width: 899px) {
  .preview {
    position: fixed; left: .5rem; right: .5rem; bottom: .5rem; top: auto; z-index: 10;
    display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 .9rem; align-items: start;
    padding: .8rem 2.2rem .8rem .8rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  }
  .preview img { grid-row: span 4; margin: 0; aspect-ratio: 1; }
  .preview p:not(.meta) { display: none; }
  .preview .close { display: block; position: absolute; top: .3rem; right: .5rem; border: 0; background: none; font: 1.6rem/1 var(--ui); color: var(--muted); cursor: pointer; }
}
.views { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: 0 0 1rem; }
.views button { white-space: nowrap; font: 700 1.45rem var(--hand); color: var(--muted); background: none; border: 0; padding: 0 0 .1rem; cursor: pointer; }
.views button[aria-pressed="true"] { color: var(--ink); background: linear-gradient(var(--accent), var(--accent)) bottom / 100% 2px no-repeat; }
.land { fill: #f3f1ec; stroke: var(--ink); stroke-linejoin: round; }
.thread { stroke: var(--ink); stroke-width: .8; stroke-opacity: .5; stroke-dasharray: 2 2; }
.anchor { fill: var(--ink); }
.place { font: 700 1.1rem var(--hand); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.subject { font: 700 1.3rem var(--hand); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; cursor: default; }
@media (max-width: 560px) { .subject { font-size: 1.05rem; } }
.dot.near .blot { fill: var(--accent); }
.section { font: 700 1.7rem var(--hand); fill: var(--ink); }
.section-line { stroke: var(--ink); stroke-width: 1.2; stroke-opacity: .6; }
.rank-hit { fill: transparent; }
.rank a:focus, .cdot:focus { outline: none; }
.rank-num { font: 700 1.35rem var(--hand); fill: var(--muted); text-anchor: end; }
.rank-title { font: 600 1rem var(--read); fill: var(--ink); }
@media (max-width: 560px) { .rank-title { font-size: .85rem; } .views { gap: .1rem .9rem; } .views button { font-size: 1.25rem; } }
.rank-head:hover .rank-title, .rank-head.on .rank-title { fill: var(--accent); }
.cdot { cursor: pointer; }
.cdot .blot { fill: var(--ink); transition: fill .12s, r .12s; }
.cdot:hover .blot, .cdot.on .blot { fill: var(--accent); fill-opacity: 1; r: 5.5px; }
.rank-head.on ~ .cdot .blot { fill: var(--accent); }
/* a comment shows up as a speech bubble pointing at the dots */
.preview.talk { border-radius: 18px 22px 20px 16px / 20px 16px 22px 18px; overflow: visible; }
.preview.talk::before, .preview.talk::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.preview.talk::before { left: -14px; top: calc(var(--tip, 2.6rem) - 9px); border-width: 9px 14px 9px 0; border-color: transparent var(--ink) transparent transparent; }
.preview.talk::after { left: -11px; top: calc(var(--tip, 2.6rem) - 7.5px); border-width: 7.5px 12px 7.5px 0; border-color: transparent var(--bg) transparent transparent; }
.said { max-height: calc(100vh - 12rem); overflow: auto; overscroll-behavior: contain; }
.said p { margin: 0 0 .6rem; font-size: .98rem; line-height: 1.6; font-style: italic; }
.who { font: .8rem var(--ui); color: var(--muted); margin: .2rem 0 .5rem; }
.preview.talk p:not(.meta) { display: block !important; -webkit-line-clamp: unset; overflow: visible; } /* the whole comment, never cut */
@media (max-width: 899px) {
  .preview.talk { grid-template-columns: 1fr; display: block; }
  .preview.talk::before { left: 2rem; top: -14px; border-width: 0 9px 14px 9px; border-color: transparent transparent var(--ink) transparent; }
  .preview.talk::after { left: calc(2rem + 1.5px); top: -11px; border-width: 0 7.5px 12px 7.5px; border-color: transparent transparent var(--bg) transparent; }
  .said { max-height: 34vh; }
}
.island { fill: #f3f1ec; stroke: var(--ink); stroke-width: .8; stroke-dasharray: 3 3; stroke-opacity: .5; }
.regions { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin-bottom: .6rem; }
.regions button { font: 700 1.2rem var(--hand); color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.regions button[aria-pressed="true"] { color: var(--accent); }
.regions span { color: var(--muted); font: .8rem var(--ui); margin-left: auto; }
.preview[hidden] { display: none; }
.featured { margin-bottom: 2.5rem; }
.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 1.5rem; align-items: start;
  border: 1.5px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; padding: 1.25rem; }
.feature-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; display: block; }
.feature h3 { margin: 0 0 .5rem; font: 700 2rem/1.1 var(--hand); }
.feature h3 a { color: var(--ink); text-decoration: none; }
.feature p { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.6; }
.feature .go { font: 700 1.35rem var(--hand); text-decoration: none; }
@media (max-width: 640px) { .feature { grid-template-columns: 1fr; padding: 1rem; } }
.podcast { margin-bottom: 2.5rem; }
.yt-lite, .yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 4px; overflow: hidden; position: relative; cursor: pointer; background: #000; }
.yt-lite img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-lite .play { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; border-radius: 50% 46% 52% 48%; background: var(--bg); color: var(--accent);
  border: 2px solid var(--ink); font: 1.8rem/4.3rem var(--ui); text-align: center; padding-left: .3rem; transition: transform .15s; }
.yt-lite:hover .play { transform: scale(1.08); }
.ep-title { margin: .6rem 0 1.2rem; font-size: 1.15rem; font-weight: 600; }
.ep-title a { color: var(--ink); text-decoration: none; }
.hand.small { font-size: 1.45rem; margin: 1rem 0 .6rem; }
.eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.eps.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .eps.three { grid-template-columns: repeat(2, 1fr); } }
.ep { color: var(--ink); text-decoration: none; font-size: .88rem; line-height: 1.35; }
.ep img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; display: block; margin-bottom: .35rem; }
.ep:hover span { color: var(--accent); }
.podcast .more { margin-top: 1.2rem; font: 700 1.35rem var(--hand); }
.latest .more { margin-top: 1.5rem; font: 700 1.35rem var(--hand); }

/* lists of posts */
.cards { display: grid; gap: 1.5rem; }
.card { display: grid; grid-template-columns: 11rem 1fr; gap: 1.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.card:not(:has(.thumb)) { grid-template-columns: 1fr; }
.card h2 { margin: 0 0 .35rem; font-size: 1.3rem; }
.card h2 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover { color: var(--accent); }
.card p { margin: 0; font-size: 1rem; line-height: 1.6; }
.thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; display: block; }
@media (max-width: 40rem) { .card { grid-template-columns: 6rem 1fr; gap: .9rem; } .card h2 { font-size: 1.1rem; } .card p { display: none; } }

/* a single post */
.post, .comments, main > .pager { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.post h1 { font-size: 2.1rem; margin: .2rem 0 1.5rem; }
.body img.alignleft, .body img[align="left"], .body figure.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; max-width: 50%; }
.body img.alignright, .body img[align="right"], .body figure.alignright { float: right; margin: .3rem 0 1rem 1.5rem; max-width: 50%; }
.body img.aligncenter, .body figure.aligncenter { display: block; margin: 1.5rem auto; }
.body figure { margin: 1.5rem 0; }
.body figcaption { color: var(--muted); font: .85rem/1.4 var(--ui); margin-top: .4rem; }
.body blockquote { margin: 1.5rem 0; padding-left: 1.2rem; border-left: 2px solid var(--ink); color: var(--muted); }
.body iframe { max-width: 100%; }
.body .video { margin: 1.5rem 0; }
.body .video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.body::after { content: ""; display: block; clear: both; }
@media (max-width: 40rem) { .body img[align], .body img.alignleft, .body img.alignright, .body figure.alignleft, .body figure.alignright { float: none; display: block; max-width: 100%; margin: 1rem 0; } }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; font: .95rem/1.4 var(--ui); }
.comments { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.comments ol { list-style: none; padding: 0; }
.comments li { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.comments li p { margin: .3rem 0; }

.archive { list-style: none; padding: 0; }
.archive li { padding: .2rem 0; }
.archive span { color: var(--muted); display: inline-block; width: 4.5rem; font: .85rem var(--ui); }

footer.site { padding-top: 1rem; padding-bottom: 2rem; color: var(--muted); font: 1.2rem var(--hand);
  background: linear-gradient(var(--ink), var(--ink)) top / 100% 1.5px no-repeat; }

/* firsts: things done before everyone else, on a time axis */
.firsts { margin-bottom: 2.5rem; }
.firsts .lead { color: var(--muted); font-size: 1rem; margin: -.4rem 0 1.2rem; }
.score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 1.4rem; }
.score p { margin: 0; font: .9rem/1.3 var(--ui); color: var(--muted); }
.score strong { display: block; font: 700 3.2rem/1 var(--hand); color: var(--accent); }
.legend { font: 1.25rem var(--hand); color: var(--muted); display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; }
.legend b + b { margin-left: .9rem; }
.firsts b.me, .firsts b.world { display: inline-block; width: .8rem; height: .8rem; border-radius: 50% 46% 52% 48%; flex: none; }
.firsts b.me { background: var(--accent); }
.firsts b.world { background: var(--bg); border: 1.5px solid var(--ink); }
.race { --label: 13rem; position: relative; }
.axis { position: relative; height: 1.6rem; margin-left: var(--label); border-bottom: 1.5px solid var(--ink); }
.axis span { position: absolute; bottom: .1rem; transform: translateX(-50%); font: 700 1.15rem var(--hand); color: var(--ink); }
.race ol { list-style: none; margin: 0; padding: 0; position: relative; }
.race .grid { position: absolute; top: 1.6rem; bottom: 0; left: calc(var(--label) + .6rem + (100% - var(--label) - 2rem) * var(--g)); border-left: 1px solid var(--line); }
.race li { display: grid; grid-template-columns: var(--label) 1fr; align-items: center; padding: .7rem 0 .2rem; border-bottom: 1px dashed var(--line); }
.race-name h3 { margin: 0; padding-right: 1rem; font: 700 1.4rem/1.1 var(--hand); }
.race-name a { color: var(--ink); text-decoration: none; }
.race-name a:hover { color: var(--accent); }
.track { position: relative; height: 2.2rem; }
.track .gap { position: absolute; top: 50%; left: var(--a); width: calc(var(--b) - var(--a)); height: 0; border-top: 2px dashed var(--accent);
  transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.3,.7,.2,1); }
.track b { position: absolute; top: 50%; translate: -50% -50%; width: .95rem; height: .95rem; }
.track .me { left: var(--a); }
.track .world { left: var(--b); opacity: 0; transition: opacity .3s 1.1s; }
.track .lead-by { position: absolute; bottom: 52%; left: calc((var(--a) + var(--b)) / 2); transform: translateX(-50%); white-space: nowrap;
  font: 700 1.2rem/1 var(--hand); color: var(--accent); opacity: 0; transition: opacity .4s .8s; }
.track .lead-by.short { left: calc(var(--b) + .8rem); bottom: auto; top: 50%; transform: translateY(-50%); }
.race.go .gap { transform: scaleX(1); }
.race.go .world, .race.go .lead-by { opacity: 1; }
.race .gap { transition-delay: calc(var(--i) * .15s); }
.race .world { transition-delay: calc(var(--i) * .15s + 1.1s); }
.race .lead-by { transition-delay: calc(var(--i) * .15s + .8s); }
.race-note { grid-column: 2; margin: 0 0 .3rem; font: .82rem/1.45 var(--ui); color: var(--muted); }
.race-note strong { color: var(--ink); font-weight: 600; margin-right: .2rem; }
.firsts blockquote { margin: 1.8rem 0 1rem; padding: 1rem 1.25rem; font-size: 1.6rem; line-height: 1.3; font-weight: 400;
  border: 1.5px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.first-reads { margin: 0; padding-left: 1.1rem; font-size: 1rem; }
.first-reads li { margin-bottom: .2rem; }
@media (prefers-reduced-motion: reduce) { .track .gap, .track .world, .track .lead-by { transition: none; } }
@media (max-width: 640px) {
  .race { --label: 0rem; }
  .race li { grid-template-columns: 1fr; padding-top: .8rem; }
  .race-note { grid-column: 1; }
  .score strong { font-size: 2.5rem; }
}
.body a.button { display: table; margin: 1.5rem auto; padding: .6rem 1.6rem; border: 2px solid var(--ink); border-radius: 6px 9px 7px 10px; color: var(--ink); font: 700 1.5rem var(--hand); text-decoration: none; }
.body a.button:hover { background: var(--ink); color: var(--bg); }
.body a { overflow-wrap: anywhere; }