@font-face { font-family: "Mashup Pica"; src: url(fonts/MashupPica-Regular.woff2?v=441166f68f) format("woff2"); font-display: swap; }
:root { --paper: #fff; --ink: #111; --rule: #111; --soft: #111;   /* was gray: gray, smaller type read as a different font (Jason 2026-10-23) */ --line: #ccc;
  /* TYPED LINES (Jason 2026-10-23): every underline and horizontal rule on the site is a run of the
     typewriter's own underscore strikes (fonts/typed_underline*.svg, 3 strikes per tile), never a CSS line. */
  --ul: url(fonts/typed_underline.svg?v=5fedb4b983) repeat-x 0 100% / 1.8em .2em;
  --rule-top: url(fonts/typed_underline.svg?v=5fedb4b983) repeat-x 0 0 / 1.8em .2em;
  --rule-bottom: url(fonts/typed_underline.svg?v=5fedb4b983) repeat-x 0 100% / 1.8em .2em; }
/* always paper-white: the photos are B&W cutouts on white, like the binder pages */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 "Mashup Pica", "Courier New", monospace; font-synthesis: none; }
a { color: inherit; }
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 16px 4rem; }
/* Jason's hand-lettered logo (lappy Documents/Mashup Sound/Art/mashup sound.png) above the page bar */
.logo { display: block; padding: 1.4rem 16px .4rem; }   /* centered across the whole window, not the text column */
.logo img { display: block; width: 100%; max-width: 1290px; height: auto; margin: 0 auto; }   /* fit the page, never upscaled */
header.top { background: var(--rule-bottom); padding: 1rem 0 calc(.6rem + .25em); margin-bottom: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; letter-spacing: .2em; }
header.top a, a.logo, .toc .sec a, .pg > .ph .no, nav.pn a { background: none; }
.toc li > a { background: var(--ul), var(--paper); }
header.top .here { letter-spacing: .12em; }
h1, h2, h3 { font-size: 1em; font-weight: normal; letter-spacing: .08em; }
/* TYPED UNDERLINE (2026-10-23): emphasis the binder's way — a run of the typewriter's own underscore strikes
   (three different ones, tiled) in the font's baseline-to-descender band, not a clean CSS rule. */
a, h2, h3, .tp .t, b, strong, i, em { text-decoration: none; font-weight: normal; font-style: normal;
  background: var(--ul);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
h2, h3 { width: fit-content; }
th { font-weight: normal; }
h1 { letter-spacing: .3em; background: none; text-align: center; margin: 2rem 0 .3rem; }
.tp { text-align: center; margin: 1rem 0 2.5rem; }
.tp .k { letter-spacing: .3em; }
.tp .t { letter-spacing: .25em; margin-top: .6rem; display: inline-block; }
.tp img, .cover img { display: block; max-width: 100%; max-height: 80vh; height: auto; margin: 1.6rem auto 0; }
.pg { margin-top: 2.2rem;   /* no rule between binder pages, no extra space (Jason 2026-10-23) */ scroll-margin-top: 1rem; }
.pg > .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.pg > .ph h2 { margin: .4rem 0 .8rem; }
.pg > .ph .no { color: var(--soft); text-decoration: none; white-space: nowrap; }
p, li { max-width: 40rem; }
pre { font: inherit; white-space: pre; overflow-x: auto; max-width: 100%; }
.fig { margin: 1.2rem 0; text-align: center; }
.fig svg, .fig img { max-width: 100%; height: auto; }
.fig svg text { fill: var(--ink) !important; font-family: "Mashup Pica", monospace !important; font-weight: normal !important; }
.fig .art { height: auto !important; }   /* binder heights cap print size; on screen they made captions overlap */
figcaption { margin-top: .4rem; }
.lead { margin: .4rem 0 1rem; }
.lead .row { display: flex; align-items: baseline; }
.lead .k { flex: 0 1 auto; }
.lead .v { flex: 0 1 auto; text-align: right; }
.lead .cont { justify-content: flex-end; }
.scroll { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; margin: .8rem 0; }
th, td { border: 1px solid var(--ink);   /* black so the draftsman ink reads, same as the binder */ padding: .25rem .5rem; text-align: left; vertical-align: top; }
nav.pn { display: flex; justify-content: space-between; gap: 1rem; letter-spacing: .08em; }
nav.pn a:hover { background: var(--ul); }
nav.pn a[rel="next"] { text-align: right; margin-left: auto; }
nav.pn.top { margin: -.8rem 0 1.4rem; }
nav.pn.bottom { margin-top: 3rem; padding-top: calc(1rem + .25em); background: var(--rule-top); }
.toc { margin: 2rem 0; }
.toc .sec { margin-top: 1.4rem; letter-spacing: .1em; }
.toc ul { list-style: none; padding: 0; margin: .3rem 0 0; }
.toc li { display: flex; align-items: baseline; max-width: none; }
.toc li > span:last-child { white-space: nowrap; }
.cover { text-align: center; }
.cover .kind { letter-spacing: .35em; margin-top: 1.2rem; }
.cover .sub { margin-top: 1.4rem; }
ul.docs { list-style: none; padding: 0; }
ul.docs li { display: flex; flex-wrap: wrap; align-items: baseline; max-width: none; margin: .5rem 0; }
ul.docs .host, ul.docs .bp { color: var(--soft); }
ul.docs .bp { white-space: nowrap; margin-left: auto; }
/* DOT LEADERS (Jason 2026-10-23): real typed periods ". . . ." like the binder, not a dotted rule. One line
   of ". " runs behind each row from the row's left edge, so the periods sit in the same columns on every row
   (the binder's alignment rule); label and value sit on top on paper-white and cover the dots behind them.
   Rows are a whole number of characters wide so a right-aligned value starts on the character grid and
   never cuts a period in half. */
.lead .row, .toc li, ul.docs li { position: relative; overflow: hidden; }
.lead, .toc ul, ul.docs { width: 100%; width: round(down, 100%, 1ch); }
.lead .row::before, .toc li::before, ul.docs li::before { content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "; position: absolute; left: 0; top: 0;
  white-space: pre; pointer-events: none; z-index: 0; }
.lead .cont::before { content: none; }
.dots { flex: 1 1 2ch; min-width: 2ch; }
.lead .k, .toc li > a, ul.docs .doc { position: relative; z-index: 1; background-color: var(--paper); padding-right: 1ch; }
.lead .v, .toc li > span:last-child, ul.docs .bp { position: relative; z-index: 1; background: var(--paper); padding-left: 1ch; }
.gl { scroll-margin-top: 1rem; }
footer { margin-top: 3rem; text-align: center; letter-spacing: .2em; }   /* full ink, full size: gray made the typed face look like a different font (Jason 2026-10-23) */
@media (max-width: 30rem) { body { font-size: 15px; } .lead .row { flex-wrap: wrap; } .lead .v { margin-left: auto; } }
@media print { header.top, nav.pn { display: none; } .pg { break-inside: avoid; } }