/* Paradigm 13 reader. Book fonts: Literata, EB Garamond, Source Serif 4 (SIL OFL). Headings: Silkscreen (OFL).
   Silkscreen only at multiples of 8px so it stays sharp (FFF docs/FONTS.md). Hovers invert, never a grey wash. */
@font-face{font-family:"Silkscreen";src:url(../../assets/fonts/pixel/Silkscreen-Regular.ttf)}
@font-face{font-family:"Departure Mono";src:url(../../assets/fonts/pixel/DepartureMono-Regular.woff2)}
@font-face{font-family:"Literata";src:url(../../assets/fonts/book/Literataopsz-wght.ttf);font-weight:200 900}
@font-face{font-family:"Literata";src:url(../../assets/fonts/book/Literata-Italicopsz-wght.ttf);font-weight:200 900;font-style:italic}
@font-face{font-family:"EB Garamond";src:url(../../assets/fonts/book/EBGaramondwght.ttf);font-weight:400 800}
@font-face{font-family:"EB Garamond";src:url(../../assets/fonts/book/EBGaramond-Italicwght.ttf);font-weight:400 800;font-style:italic}
@font-face{font-family:"Source Serif 4";src:url(../../assets/fonts/book/SourceSerif4opsz-wght.ttf);font-weight:200 900}
@font-face{font-family:"Source Serif 4";src:url(../../assets/fonts/book/SourceSerif4-Italicopsz-wght.ttf);font-weight:200 900;font-style:italic}

:root{--paper:#EDE6D6;--ink:#1E1C19;--book:"Literata",Georgia,serif;--size:20px}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--book);font-size:var(--size);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ink)}

.bar{position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:2px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:8px 16px;
  font-family:"Silkscreen",monospace;font-size:16px;line-height:24px}
.bar .where{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.bar .mark{text-decoration:none;padding:0 4px}
.bar .crumb{padding:0 2px}
.bar .mark:hover{background:var(--ink);color:var(--paper)}
.bar .tools{display:flex;gap:8px;flex-wrap:wrap}
button{font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--ink);
  padding:0 8px;height:32px;cursor:pointer;border-radius:0}
button:hover,button:focus-visible{background:var(--ink);color:var(--paper);outline:none}

main{max-width:34em;margin:0 auto;padding:48px 24px 96px}
.kicker{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;margin:0 0 8px;text-transform:uppercase}
h1{font-family:"Silkscreen",monospace;font-weight:400;font-size:32px;line-height:40px;margin:0 0 48px}
.draft{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;border:2px solid var(--ink);
  padding:8px;margin:0 0 48px;display:inline-block}

.prose p{margin:0;hyphens:none}
.prose p+p{text-indent:1.4em}
/* scene break: three 1-bit checker squares */
.break{border:0;height:8px;width:56px;margin:1.6em auto;
  background:
    conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/4px 4px;
  -webkit-mask:linear-gradient(90deg,#000 0 8px,transparent 0 24px,#000 0 32px,transparent 0 48px,#000 0) ;
          mask:linear-gradient(90deg,#000 0 8px,transparent 0 24px,#000 0 32px,transparent 0 48px,#000 0)}

.end{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;display:flex;gap:16px;justify-content:space-between;
  margin-top:64px;border-top:2px solid var(--ink);padding-top:16px}
.end a,.end span{text-decoration:none;padding:0 4px;flex:1}
.end a:nth-child(2){flex:0 0 auto;text-align:center}
.end a:last-child,.end span:last-child{text-align:right}
.end a:hover{background:var(--ink);color:var(--paper)}

/* contents page */
.toc{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.toc a{display:flex;gap:16px;align-items:baseline;padding:12px 4px;border-bottom:2px solid var(--ink);text-decoration:none}
.toc a:hover{background:var(--ink);color:var(--paper)}
.toc .num{font-family:"Silkscreen",monospace;font-size:16px;min-width:2em}
.toc .nm{flex:1}
.toc .mins{font-family:"Silkscreen",monospace;font-size:16px;white-space:nowrap}
.carry a{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;display:inline-block;
  border:2px solid var(--ink);padding:8px 12px;margin:0 0 32px;text-decoration:none}
.carry a:hover{background:var(--ink);color:var(--paper)}
.meta{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;margin-top:24px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);
  font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;padding:8px 16px;display:none}

/* phones: buttons keep the word (PAPER, TYPE) and drop the value; the toast names the choice (Tom, 29 Oct 2026) */
@media (max-width:600px){
  main{padding:32px 20px 80px} h1{font-size:24px;line-height:32px}
  .bar{padding:8px 12px} .bar .val{display:none} .bar .tools{gap:6px} button{padding:0 6px}
  .end{flex-wrap:wrap} .end a:nth-child(2){order:-1;flex-basis:100%;text-align:left}
}

/* machine voices: Departure Mono at 22px (its sharp size is a multiple of 11) */
.prose pre.screen{font-family:"Departure Mono",monospace;font-size:22px;line-height:33px;white-space:pre-wrap;word-break:break-word;
  margin:1.2em 0;padding:12px 16px;border-left:4px solid var(--ink)}
.prose pre.screen+p{text-indent:0}
.draft.wip{margin-top:-32px;background:var(--ink);color:var(--paper)}