:root{
  --paper:#F3F5EF; --grid:#DEE5DA; --zone:#E9EDE4; --rule:#C6CFC3;
  --ink:#1C2126; --muted:#55605B;
  --record:#1D3A8A;            /* blue pen: what was recorded */
  --project:#B4173F;           /* red pen: what was invented */
  --on-project:#FFFFFF;
  --gutter:28px; --rail-x:8px;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Literata",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#161D24; --grid:#212B34; --zone:#1C252E; --rule:#33404B;
    --ink:#E7EBE5; --muted:#9AA6A3;
    --record:#9DB8F5; --project:#F28DA3; --on-project:#2A0A14;
  }
}
@media (min-width:720px){ :root{ --gutter:56px; --rail-x:20px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.5}
a{color:inherit}
:focus-visible{outline:3px solid var(--record);outline-offset:3px;border-radius:2px}
.wrap{max-width:58rem;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.75rem 1rem;z-index:5}
.skip:focus{left:0}

/* masthead */
.mast{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;padding-top:1.5rem;padding-bottom:1.25rem}
.wordmark{font-weight:800;font-stretch:120%;font-size:1.375rem;letter-spacing:-.01em;text-decoration:none}
.tagline{margin:.125rem 0 0;color:var(--muted);font-size:.9375rem;max-width:34rem}
.mast nav{display:flex;gap:1.25rem;font-size:.9375rem;font-weight:600;font-stretch:92%}
.mast nav a{text-decoration:none;padding:.375rem 0;border-bottom:2px solid transparent}
.mast nav a:hover{border-bottom-color:var(--ink)}

/* the instrument trace */
.trace{position:relative;height:124px;border-block:1px solid var(--rule);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;background-position:0 -1px;overflow:hidden}
.trace-ink{position:absolute;inset:0;animation:feed 1.9s cubic-bezier(.3,.6,.2,1) both}
.trace svg{position:absolute;left:0;top:0;width:100%;height:92px;display:block}
.trace path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.trace .rec{stroke:var(--record)}
.trace .proj{stroke:var(--project);stroke-dasharray:7 6}
.trace .dot{position:absolute;left:56%;top:61px;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--paper);border:2px solid var(--project)}
.trace .lab{position:absolute;top:96px;font-size:.75rem;font-weight:600;font-stretch:88%;white-space:nowrap;line-height:1.3}
.trace .lab-rec{left:33.4%;transform:translateX(-50%);color:var(--record)}
.trace .lab-seam{left:56%;color:var(--project)}
.trace .lab-next{right:1.25rem;color:var(--project)}
@keyframes feed{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.trace-ink{animation:none}}

/* story blocks share one rail */
.story{padding-top:2.25rem}
.blk{display:grid;grid-template-columns:var(--gutter) minmax(0,1fr)}
.rail{position:relative}
.rail::before{content:"";position:absolute;left:var(--rail-x);top:0;bottom:0;border-left:2px solid var(--record)}
.node{position:absolute;left:calc(var(--rail-x) - 5px);top:.3rem;width:12px;height:12px;border-radius:50%;background:var(--record)}
.cell{padding-bottom:2rem;min-width:0}

.blk-fact .rail::before{top:.5rem}
.meta{margin:0 0 .5rem;font-size:.875rem;font-weight:600;font-stretch:90%;color:var(--record)}
.event{margin:0 0 .75rem;font-size:clamp(1.375rem,3.4vw,1.875rem);font-weight:650;font-stretch:94%;line-height:1.18;letter-spacing:-.005em;max-width:26em}
.summary{margin:0 0 .75rem;font-size:1.0625rem;line-height:1.55;max-width:60ch}
.source{margin:0;font-size:.9375rem}
.source a{color:var(--record);text-underline-offset:3px}

.blk-seam .rail::before{bottom:50%}
.blk-seam .rail::after{content:"";position:absolute;left:var(--rail-x);top:50%;bottom:0;border-left:2px dashed var(--project)}
.blk-seam .node{top:50%;margin-top:-6px;background:var(--paper);border:2px solid var(--project);z-index:1}
.blk-seam .cell{padding:.75rem 0 2rem}
.seam{margin:0;padding:.875rem 0;border-block:1px solid var(--rule);font-family:var(--serif);font-style:italic;font-size:1.0625rem;color:var(--project)}

.whatif{margin:1.25rem 0 0;font-family:var(--serif);font-size:clamp(1.25rem,3.6vw,1.625rem);line-height:1.28;max-width:24em}
.blk-fiction .rail::before,.blk-ledger .rail::before{border-left:2px dashed var(--project)}
.part{margin:0 0 .5rem;font-size:.875rem;font-weight:600;font-stretch:90%;color:var(--project)}
.title{margin:0 0 1.5rem;font-family:var(--serif);font-weight:500;font-size:clamp(2.375rem,8.5vw,4.5rem);line-height:1.02;letter-spacing:-.018em}
.prose p{margin:0 0 1.1em;font-family:var(--serif);font-size:1.1875rem;line-height:1.72;max-width:34em}
.prose p:last-child{margin-bottom:0}

.ledger{display:grid;gap:1.5rem 2.5rem;padding-top:1.25rem;border-top:1px solid var(--rule);max-width:44rem}
@media (min-width:640px){.ledger{grid-template-columns:1fr 1fr}}
.ledger h3{margin:0 0 .5rem;font-size:.9375rem;font-weight:700;font-stretch:92%}
.ledger ul{list-style:none;margin:0;padding:0;font-size:.9375rem;line-height:1.45}
.ledger li{position:relative;padding:0 0 .5rem 1.75rem}
.ledger li::before{content:"";position:absolute;left:0;top:.62em;width:1.125rem;border-top:2px solid var(--record)}
.ledger .real h3{color:var(--record)}
.ledger .made h3{color:var(--project)}
.ledger .made li::before{border-top:2px dashed var(--project)}

.blk-sequel .rail::before{border-left:2px dotted var(--project);bottom:55%;opacity:.7}
.lock{max-width:44rem;padding:1.5rem;border:1px dashed var(--project);border-radius:4px;background-color:var(--zone);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px}
.lock .part{margin-bottom:.375rem}
.teaser{margin:0 0 1.25rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,3.4vw,1.5rem);line-height:1.3;max-width:26em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:.75rem 1.25rem;border:0;border-radius:3px;background:var(--project);color:var(--on-project);
  font:650 1rem/1.2 var(--sans);font-stretch:96%;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.link{background:none;border:0;padding:0;color:var(--ink);font:600 .9375rem/1.3 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fine{margin:1rem 0 0;font-size:.875rem;color:var(--muted)}
.share{margin:1.25rem 0 0}

/* earlier records */
.section{padding-top:3rem}
.section h2{margin:0 0 1rem;font-size:1.25rem;font-weight:750;font-stretch:108%;letter-spacing:-.005em}
.rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.rows li{border-top:1px solid var(--rule)}
.rows a{display:grid;grid-template-columns:1fr;gap:.125rem 1.5rem;padding:1rem 0 .25rem;text-decoration:none}
@media (min-width:640px){.rows a{grid-template-columns:7rem 1fr}}
.rows time{font-size:.875rem;font-weight:600;font-stretch:90%;color:var(--muted);padding-top:.3rem}
.rows .ev{display:block;font-size:.9375rem;color:var(--record);font-weight:500}
.rows .ti{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1.2;margin-top:.125rem}
.rows a:hover .ti{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

.rows .wi{display:block;margin-top:.3rem;font-family:var(--serif);font-style:italic;font-size:1.0625rem;line-height:1.4;max-width:40em}
.rows .tg{margin:0 0 1rem;font-size:.8125rem;color:var(--muted)}
@media (min-width:640px){.rows .tg{padding-left:calc(7rem + 1.5rem)}}
.rows .un{color:var(--project);font-weight:600}

/* home: latest record, then the finder */
.lead{padding-top:2.25rem}
.lead .cell{padding-bottom:1.25rem}
.lead .event{margin-bottom:0}
.lead .title{font-size:clamp(2.25rem,7.5vw,4rem);margin-bottom:1rem}
.lead .title a{text-decoration:none}
.lead .title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.lead .whatif{margin:0 0 1.5rem}
.lead .hook{margin:0 0 1.5rem;font-size:1.0625rem;max-width:36em}
.finder{display:grid;gap:.75rem;margin-bottom:1.25rem}
.finder label{font-size:.9375rem;font-weight:600}
.q{width:100%;max-width:32rem;min-height:48px;padding:.625rem .875rem;border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.3 var(--sans)}
.q::placeholder{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{min-height:44px;padding:.375rem .875rem;border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--ink);font:500 .9375rem/1.2 var(--sans);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--record);border-color:var(--record);color:var(--paper)}
.count{margin:0;font-size:.875rem;color:var(--muted)}
.none{padding:1.5rem 0;border-block:1px solid var(--rule)}
.none p{margin:0 0 .75rem}

/* part two */
.brk{border:0;border-top:2px dashed var(--project);width:3rem;margin:2rem 0}
.of{margin:-.75rem 0 1.5rem;font-size:.9375rem}
.of a{color:var(--project);text-underline-offset:3px}
.blk-back .cell{padding-top:.25rem}
.back p{margin:0 0 .75rem;font-size:1.0625rem;line-height:1.55;max-width:60ch}

.how{display:grid;gap:1rem 2.5rem}
@media (min-width:720px){.how{grid-template-columns:repeat(3,1fr)}}
.how p{margin:0;font-size:1rem;line-height:1.5}
.how .a{border-top:2px solid var(--record);padding-top:.75rem}
.how .b{border-top:2px dashed var(--project);padding-top:.75rem}
.how .c{border-top:2px dotted var(--project);padding-top:.75rem}

.state{padding:3rem 0}
.state p{margin:0 0 1rem;font-size:1.125rem;max-width:36rem}

footer.wrap{margin-top:4rem;padding-top:1.5rem;padding-bottom:3rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.875rem}
footer p{margin:0;max-width:40rem}

/* generated pages: links that do the work of the old buttons */
.chip{display:inline-flex;align-items:center;text-decoration:none}
.chip[aria-current="page"]{background:var(--record);border-color:var(--record);color:var(--paper)}
.page-head{padding-top:2.25rem}
.page-head h1{margin:0 0 .75rem;font-weight:800;font-stretch:112%;font-size:clamp(1.875rem,6vw,3rem);line-height:1.05;letter-spacing:-.015em}
.page-head .lede{margin:0;color:var(--muted);font-size:1.0625rem;max-width:46em}
.crumbs{margin:0 0 .75rem;font-size:.875rem;font-weight:600;font-stretch:90%;color:var(--record)}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.note{margin:1.25rem 0 0;padding:.875rem 1rem;border:1px solid var(--rule);border-radius:3px;background:var(--zone);font-size:.9375rem;max-width:44rem}
.toc{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.5rem}
@media (min-width:640px){.toc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.toc{grid-template-columns:repeat(3,1fr)}}
.toc a{display:flex;justify-content:space-between;gap:1rem;padding:.625rem .75rem;border:1px solid var(--rule);border-radius:3px;text-decoration:none;font-size:.9375rem;font-weight:600;font-stretch:95%}
.toc a:hover{border-color:var(--ink)}
.toc .n{color:var(--muted);font-weight:500}
.filed{margin:1.25rem 0 0;font-size:.875rem;color:var(--muted)}
.filed a{color:var(--record);text-underline-offset:3px}
.rows .tg a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.rows .tg a:hover{color:var(--ink);border-bottom-color:var(--ink)}