/* Fonts: all under the SIL Open Font License, served from this site */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/eb-garamond-italic-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/eb-garamond-italic-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/eb-garamond-normal-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/eb-garamond-normal-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IM Fell English';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/im-fell-english-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/literata-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/literata-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/literata-normal-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/literata-normal-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/source-sans-3-normal-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/source-sans-3-normal-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout: full-width paper. A slim device status bar on top, a location bar at the bottom.
   Indexes sit on one 68rem column; reading text sits on a centred 36rem measure. No motion, no shadows, 1px rules. */
:root {
  --paper: #ECEBE6;
  --ink: #1B1B19;
  --ink-2: #5E5D58;
  --line: #C4C3BC;
  --flash: #2A2A27;
  --serif: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --fell: "IM Fell English", "EB Garamond", Georgia, serif;
  --sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --fzb: 1.1; /* Garamond has a small x-height, so reading sizes scale up */
  --sz: 1;
  --fz: calc(var(--fzb) * var(--sz));
  --wide: 68rem;
  --measure: 36rem;
}
:root[data-paper="grey"] { --paper: #E2E2DF; --line: #BEBEBA; }
:root[data-font="literata"] { --serif: Literata, "Iowan Old Style", Georgia, serif; --fzb: 1; }
:root[data-font="charter"] { --serif: Charter, "Bitstream Charter", "Charis SIL", Literata, Georgia, serif; --fzb: 1; }
:root[data-size="s"] { --sz: 0.92; }
:root[data-size="l"] { --sz: 1.15; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #161615; --ink: #E4E2DB; --ink-2: #9B9992; --line: #3B3A37; --flash: #D9D7D0; color-scheme: dark; }
}
:root[data-theme="dark"] { --paper: #161615; --ink: #E4E2DB; --ink-2: #9B9992; --line: #3B3A37; --flash: #D9D7D0; color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.5 var(--sans); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 25; background: var(--paper); }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
main:focus { outline: none; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.blk { text-decoration: none; }
.blk:hover { background: transparent; color: inherit; }
.t { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.blk:hover .t { background: var(--ink); color: var(--paper); }

.gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.label { font: 500 11px/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }

/* Status bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--ink); }
.topbar .in { max-width: var(--wide); margin: 0 auto; height: 40px; display: flex; align-items: center; gap: 1rem; position: relative; font-size: 13px; }
.mark { font-weight: 600; text-decoration: none; padding: 3px 4px; margin-left: -4px; }
.nav { display: flex; gap: 0.25rem; }
.nav a { text-decoration: none; padding: 3px 6px; }
.nav a:hover { background: transparent; color: inherit; text-decoration: underline; }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); text-decoration: none; }
.status { margin-left: auto; display: flex; align-items: center; gap: 0.85rem; font-variant-numeric: tabular-nums; }
.place { color: var(--ink-2); }
.aa { font: 500 14px/1 var(--serif); height: 26px; padding: 0 0.55rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.aa[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 480px) { .place { display: none; } .topbar .in { gap: 0.6rem; } }

.panel { position: absolute; top: calc(100% + 1px); right: max(16px, env(safe-area-inset-right, 0px)); width: min(17.5rem, calc(100vw - 32px)); background: var(--paper); border: 1px solid var(--ink); padding: 1rem; display: grid; gap: 1rem; z-index: 30; }
.panel .grp { display: grid; gap: 0.45rem; }
.seg { display: flex; border: 1px solid var(--ink); }
.seg button { flex: 1; min-width: 0; padding: 0.42rem 0.4rem; border: 0; border-left: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 500 12.5px/1.2 var(--sans); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.panel p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); }

/* Location bar */
.botbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--paper); border-top: 1px solid var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px); }
.botbar .in { max-width: var(--wide); margin: 0 auto; height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#loc { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hint { white-space: nowrap; }
@media (max-width: 600px) { #hint { display: none; } }

/* Refresh: the old page turns negative for a moment, as a real panel does */
#flash { position: fixed; left: 0; right: 0; z-index: 15; background: var(--flash); }
@supports ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
  #flash { background: transparent; -webkit-backdrop-filter: invert(1) hue-rotate(180deg); backdrop-filter: invert(1) hue-rotate(180deg); }
}
#flash.paper { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Progress rule and page-turn buttons on the location bar */
#prog { position: absolute; left: 0; top: -3px; height: 3px; width: 0; background: var(--ink); }
.right { display: flex; align-items: center; gap: 0.75rem; flex: none; }
#turn { display: flex; gap: 6px; }
#turn button { width: 34px; height: 22px; padding: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 500 13px/1 var(--sans); cursor: pointer; }
#turn button:hover { background: var(--ink); color: var(--paper); }
#turn button:disabled { border-color: var(--line); background: var(--paper); color: var(--ink-2); cursor: default; }

/* Footnote sheet, docked above the location bar */
#note { position: fixed; left: 0; right: 0; bottom: calc(31px + env(safe-area-inset-bottom, 0px)); z-index: 18; background: var(--paper); border-top: 1px solid var(--ink); }
#note .in { max-width: var(--wide); margin: 0 auto; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding-top: 0.9rem; padding-bottom: 1.1rem; }
.note-body { display: grid; gap: 0.4rem; max-width: var(--measure); min-width: 0; }
#note p { margin: 0; font: 400 calc(1rem * var(--fz))/1.45 var(--serif); }
#note-close { font: 500 12.5px/1 var(--sans); flex: none; }

main { display: block; padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
.wrap { max-width: var(--wide); margin: 0 auto; padding-top: 2.5rem; }
.measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }

/* Dithered plates */
.plate { border: 1px solid var(--line); line-height: 0; overflow: hidden; }
.plate canvas { display: block; width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

/* Home */
.intro { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 3rem; align-items: end; padding-bottom: 2.5rem; border-bottom: 1px solid var(--ink); }
.lede { margin: 0; font: 400 calc(1.75rem * var(--fz))/1.3 var(--serif); text-wrap: pretty; max-width: 21em; }
.now { margin: 1.75rem 0 0; display: flex; gap: 0.75rem; align-items: baseline; font-size: 14px; color: var(--ink-2); }
.now .label { flex: none; }
@media (max-width: 760px) {
  .intro { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .lede { font-size: calc(1.4rem * var(--fz)); }
  .intro-plate { max-width: 20rem; }
}
.section { padding-block: 2rem; border-bottom: 1px solid var(--ink); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.75rem; }
.section-head a { font-size: 13px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li + li { border-top: 1px solid var(--line); }

.row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding-block: 1rem; }
.row .t { font: 600 calc(1.25rem * var(--fz))/1.25 var(--serif); }
.sub { display: block; margin-top: 0.3rem; font: 400 calc(1rem * var(--fz))/1.45 var(--serif); color: var(--ink-2); }
.yr { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .row { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; }
  .row .yr { display: none; }
  .row .t { font-size: 1.1rem; }
  .row .sub { font-size: 0.9375rem; }
}

.entry { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: baseline; padding-block: 0.9rem; }
.entry time, .entry .min { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.entry .t { font: 500 calc(1.125rem * var(--fz))/1.35 var(--serif); }
@media (max-width: 560px) {
  .entry { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; }
  .entry time { grid-column: 1 / -1; }
}
.sample { margin: 0; padding-top: 1.5rem; font-size: 13px; color: var(--ink-2); }

/* Index pages */
.page-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ink); margin-bottom: 2rem; }
.page-head h1 { margin: 0; font: 500 2.25rem/1.1 var(--serif); }
.page-head .yr { font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
@media (max-width: 680px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; gap: 0.75rem; }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 1px solid var(--ink); padding-top: 0.6rem; }
.card .t { font: 600 calc(1.25rem * var(--fz))/1.25 var(--serif); }
.card p { margin: 0; font: 400 calc(1rem * var(--fz))/1.45 var(--serif); color: var(--ink-2); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.btn { border: 1px solid var(--ink); padding: 0.45rem 0.8rem; text-decoration: none; }
.btn.off { border-color: var(--line); color: var(--ink-2); }

/* Reading views */
.back { font-size: 13px; text-decoration: none; padding: 2px 4px; margin-left: -4px; }
.meta { margin: 1.5rem 0 0.75rem; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.title { margin: 0; font: 500 2.5rem/1.12 var(--serif); text-wrap: balance; }
.dek { margin: 1rem 0 0; font: 400 calc(1.3rem * var(--fz))/1.45 var(--serif); color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 560px) { .title { font-size: 2rem; } .dek { font-size: 1.15rem; } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem auto 2rem; padding-block: 0.8rem; border-block: 1px solid var(--ink); }
.facts div { display: grid; gap: 0.35rem; min-width: 0; }
.facts dd { margin: 0; font: 400 1rem/1.35 var(--serif); }
.hero { margin: 0 0 2.25rem; }
.prose { font: 400 calc(1.125rem * var(--fz))/1.6 var(--serif); hyphens: auto; }
/* Book setting: indented paragraphs, justified on wide screens, a drop cap and small caps to open */
.prose p { margin: 0; }
.prose p + p { text-indent: 1.4em; }
@media (min-width: 640px) { .prose p { text-align: justify; text-wrap: pretty; } }
.prose .lead::first-letter { float: left; font: 400 3.5em/0.8 var(--serif); padding: 0.06em 0.09em 0 0; }
.prose .lead::first-line { font-variant-caps: small-caps; letter-spacing: 0.05em; }
.prose p.endmark { margin: 2.2rem 0 0; text-indent: 0; text-align: center; font: italic 400 1.1rem/1 var(--fell); letter-spacing: 0.7em; color: var(--ink-2); }
.prose sup { line-height: 0; }
.nref { border: 0; background: none; color: var(--ink); padding: 0 0.3em; font: 600 0.72em/1 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.nref:hover, .nref[aria-expanded="true"] { background: var(--ink); color: var(--paper); text-decoration: none; }
.prose h2 { font: 600 1.25rem/1.3 var(--serif); margin: 2.2em 0 0.6em; }
.prose code { font: 400 0.88em var(--mono); }
.prose pre { margin: 1.5em 0; padding: 1rem; border: 1px solid var(--ink); overflow-x: auto; font: 400 13.5px/1.6 var(--mono); hyphens: none; }
.prose pre code { font: inherit; }
.prose sup a { text-decoration: none; padding: 0 2px; font-family: var(--sans); font-size: 0.75em; }
.prose figure { margin: 2em 0; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cap { display: block; margin-top: 0.5rem; font: 400 12px/1.4 var(--sans); color: var(--ink-2); }
figcaption { margin-top: 0.75rem; font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
.notes { margin: 2.5rem 0 0; padding: 1rem 0 0 1.25rem; border-top: 1px solid var(--line); font: 400 0.9375rem/1.5 var(--serif); color: var(--ink-2); }
.note { margin-top: 2rem; padding: 1rem; border: 1px solid var(--ink); font: 400 14px/1.5 var(--sans); }
.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--ink); }
.post-nav a { display: grid; gap: 0.35rem; padding: 0.6rem; text-decoration: none; min-width: 0; }
.post-nav a:hover .label { color: var(--paper); }
.post-nav .nx { text-align: right; grid-column: 2; }
.post-nav .pt { font: 500 1.05rem/1.3 var(--serif); }

/* Ghosting: a faint trace of the page you just left */
#ghost { position: fixed; left: 0; right: 0; z-index: 5; overflow: hidden; pointer-events: none; opacity: 0.028; }
#ghost.fresh { opacity: 0.06; }

/* Partial refresh of one block */
.inv, .inv * { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }

/* Portrait lens */
.lensable { position: relative; }
.lens { position: absolute; top: 0; left: 0; background: var(--paper); clip-path: inset(100%); pointer-events: none; }
.lensable.on .lens { clip-path: inset(var(--ly) calc(100% - var(--lx) - 96px) calc(100% - var(--ly) - 96px) var(--lx)); }
.lens-box { position: absolute; left: var(--lx); top: var(--ly); width: 96px; height: 96px; border: 1px solid var(--ink); outline: 1px solid var(--paper); display: none; pointer-events: none; }
.lensable.on .lens-box { display: block; }

/* Live strip */
.dash { padding-block: 1.5rem 1.1rem; border-bottom: 1px solid var(--ink); }
.dash-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
.dash-cell { display: grid; gap: 0.45rem; align-content: start; min-width: 0; }
.dash-cell + .dash-cell { border-left: 1px solid var(--line); padding-left: 2rem; }
.dash-cell .v { font: 500 calc(1.3rem * var(--fz))/1.2 var(--serif); overflow-wrap: anywhere; }
.dash-cell .s { font: 400 13px/1.4 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.dash-foot { margin: 1.1rem 0 0; font: 400 12px/1.3 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 760px) {
  .dash-cells { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dash-cell + .dash-cell { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 0.9rem; padding-top: 0.9rem; }
  .dash-foot { text-align: left; }
}

/* Highlights banner */
.hl { padding-block: 1.5rem 1.75rem; border-bottom: 1px solid var(--ink); }
.hl-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hl-ctl { display: flex; gap: 4px; }
.hl-ctl button { width: 30px; height: 26px; border: 1px solid var(--ink); background: none; color: var(--ink); font: 500 13px/1 var(--sans); cursor: pointer; }
.hl-ctl button:hover { background: var(--ink); color: var(--paper); }
.hl blockquote { margin: 1.1rem 0 0; min-height: 7.5rem; }
.hl blockquote p { margin: 0; max-width: 34em; font: italic 400 calc(1.6rem * var(--fz))/1.5 var(--serif); text-wrap: pretty; }
.hi { padding: 0.08em 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background-image: radial-gradient(var(--ink-2) 0.5px, transparent 0.65px); background-size: 4px 4px; }
.hl blockquote footer { margin-top: 0.9rem; font: 400 13px/1.4 var(--sans); color: var(--ink-2); }
@media (max-width: 560px) { .hl blockquote p { font-size: calc(1.25rem * var(--fz)); } .hl blockquote { min-height: 9rem; } }

/* Artwork: three directions, chosen in the Aa menu */
main { position: relative; }
main .wrap { position: relative; z-index: 1; }
.plate, .vig, .depth, .hl-ctl button, .btn, .facts, .prose pre, .note { background: var(--paper); }
.art { margin: 0; }
.art-box { line-height: 0; overflow: hidden; }
.art canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.art-cap { font: 400 11px/1.4 var(--sans); color: var(--ink-2); }
/* A. Margin: the picture dissolves into the page from the right edge */
.art-margin { position: fixed; top: 41px; bottom: 31px; right: 0; width: min(48vw, 680px); z-index: 0; pointer-events: none; }
.art-margin .art-box { position: absolute; inset: 0; }
.art-margin .art-cap { position: absolute; right: 10px; bottom: 8px; max-width: 15rem; text-align: right; background: var(--paper); padding: 2px 5px; }
@media (min-width: 1101px) {
  /* content stays centred; index pages are a little narrower so the portrait has a margin to live in */
  :root[data-art="margin"] { --wide: 56rem; }
}
@media (max-width: 1100px) {
  .art-margin { position: absolute; top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 190px; }
  .art-margin .art-cap { display: none; }
  :root[data-art="margin"] main .wrap { padding-top: 150px; }
}
/* B. Plate: a framed colour strip beside the page, like a bookmark */
.wrap.with-plate { display: grid; grid-template-columns: minmax(0, 1fr) 156px; gap: 2.75rem; align-items: start; }
.art-plate { position: sticky; top: 66px; }
.art-plate .art-box { height: calc(100vh - 41px - 31px - 7.5rem); min-height: 300px; border: 1px solid var(--ink); }
.art-plate .art-cap { display: block; margin-top: 0.5rem; }
@media (max-width: 900px) {
  .wrap.with-plate { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .art-plate { position: static; order: -1; }
  .art-plate .art-box { height: 116px; min-height: 0; }
  .art-plate .art-cap { text-align: right; }
}
/* C. Band: a strip across the head of each section, greys with one metal */
.art-band { margin: 0 0 2rem; }
.art-band .art-box { height: 136px; border-block: 1px solid var(--ink); }
.art-band .art-cap { display: block; margin-top: 0.4rem; text-align: right; }
@media (max-width: 560px) { .art-band .art-box { height: 96px; } .art-band { margin-bottom: 1.5rem; } }

/* Cover: the home page as a title page */
.cover { padding-top: 2rem; }
.cover-main { max-width: 30rem; }
.cover-name { margin: 0.9rem 0 0; font: 500 clamp(2.5rem, 11vw, 3.9rem)/1 var(--serif); letter-spacing: -0.015em; }
.cover-lede { margin: 1.2rem 0 0; font: italic 400 calc(1.65rem * var(--fz))/1.2 var(--serif); }
.cover-sub { margin: 0.7rem 0 0; max-width: 27em; font: 400 calc(1rem * var(--fz))/1.5 var(--serif); color: var(--ink-2); }
.epi { margin-top: 1.4rem; padding: 0.15rem 0 0.15rem 1rem; border-left: 1px solid var(--ink); min-height: 7.6rem; display: grid; align-content: space-between; gap: 0.5rem; }
.epi blockquote { margin: 0; }
.epi p { margin: 0; font: italic 400 calc(1.02rem * var(--fz))/1.5 var(--serif); text-wrap: pretty; }
.epi footer { margin-top: 0.45rem; font: 400 12px/1.4 var(--sans); color: var(--ink-2); }
.epi-ctl { display: flex; align-items: center; gap: 0.7rem; font: 400 12px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.epi-ticks { display: flex; gap: 2px; }
.epi-ticks i { width: 9px; height: 5px; border: 1px solid var(--ink-2); }
.epi-ticks i.on { background: var(--ink); border-color: var(--ink); }
.epi-n { margin-right: auto; }
.epi-ctl .linkish { text-decoration: none; padding: 3px 5px; font-size: 13px; color: var(--ink); }
.epi-ctl .linkish:hover { background: var(--ink); color: var(--paper); }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.cover-toc-head { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--ink); }
.toc.slim a { grid-template-columns: 1.4rem auto minmax(1rem, 1fr) auto; gap: 0.75rem; align-items: baseline; padding-block: 0.58rem; }
.toc.slim .n { display: inline; }
.toc.slim .t { font: 500 calc(1.22rem * var(--fz))/1.25 var(--serif); }
.toc.slim .lead-dots { display: block; transform: translateY(-0.3em); }
.toc.slim .lead-dots:has(+ .yr:empty) { margin-right: -0.75rem; }
.cover-status { margin: 1.1rem 0 0; font: 400 12.5px/1.65 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cover-status a { color: var(--ink); }
.cover-upd { display: block; }
.cover-foot { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 2rem; align-items: start; max-width: 42rem; margin-top: 6rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.cover-foot .portrait figcaption { display: grid; gap: 0.5rem; justify-items: start; }
.cover-foot .colo { margin: 0.8rem 0 0; font: italic 400 15px/1.55 var(--serif); color: var(--ink-2); }
@media (max-width: 560px) { .cover-foot { grid-template-columns: minmax(0, 1fr); } .cover-foot .portrait { max-width: 14rem; } .cover { padding-top: 2rem; } }

/* Icons */
.ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
.ico .f { fill: currentColor; stroke: none; }
.mark, .nav a { display: inline-flex; align-items: center; gap: 0.35rem; }
.mark { padding: 4px 5px; margin-left: -5px; }
.mark[aria-current="page"] { background: var(--ink); color: var(--paper); }
#power { display: inline-flex; align-items: center; padding: 0 0.4rem; }
@media (max-width: 980px) {
  .nav { gap: 0; }
  .nav a { padding: 4px 6px; }
  .nav .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 380px) { .nav a { padding: 4px 4px; } }

/* Contents vignettes: 1-bit pictures that advance a frame at a time */
.vig { display: block; box-sizing: content-box; width: 96px; border: 1px solid var(--line); line-height: 0; }
.vig canvas { display: block; width: 100%; aspect-ratio: 8 / 5; image-rendering: pixelated; image-rendering: crisp-edges; }
.toc a:hover .vig, .toc a:focus-visible .vig { border-color: var(--ink); }

/* Boot and sleep screen */
#boot { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: grid; place-items: center; cursor: pointer; }
#boot.black { background: var(--ink); }
#boot.black .boot-in, #boot.blank .boot-in { visibility: hidden; }
.boot-in { display: grid; justify-items: center; gap: 1rem; padding: 1rem; }
.boot-pic { width: min(220px, 56vw); }
#boot.sleeping .boot-pic { width: min(360px, 74vw, 48vh); }
.boot-name { margin: 0.25rem 0 0; font: 500 1.5rem/1 var(--serif); }
.boot-bar { display: flex; gap: 3px; }
.boot-bar span { width: 14px; height: 8px; border: 1px solid var(--ink); }
.boot-bar span.on { background: var(--ink); }
#boot.sleeping .boot-bar { display: none; }
.boot-msg { margin: 0; }

/* Contents */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li + li { border-top: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 1.5rem 98px auto minmax(1.5rem, 1fr) auto; gap: 1.1rem; align-items: center; padding-block: 0.9rem; }
.toc .n { font: 500 13px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.toc .t { font: 500 calc(1.6rem * var(--fz))/1.2 var(--serif); }
.toc .lead-dots { border-bottom: 1px dotted var(--ink-2); }
.toc .lead-dots:has(+ .yr:empty) { margin-right: -1rem; }
@media (max-width: 560px) {
  .toc a { grid-template-columns: 98px minmax(0, 1fr) auto; gap: 0.75rem; }
  .toc .n { display: none; }
  .toc .lead-dots { display: none; }
  .toc .t { font-size: calc(1.25rem * var(--fz)); }
}
.mono { font-family: var(--mono); }
.prose h2 .mono { font-size: 0.85em; font-weight: 500; }
.kv { margin: 0; }
.kv div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-block: 0.55rem; border-top: 1px solid var(--line); break-inside: avoid; }
.kv dt { font: 500 13px/1.9 var(--sans); color: var(--ink-2); }
.kv dd { margin: 0; text-align: left; hyphens: none; }
.kv cite { font-style: italic; }

/* Fleeting thoughts */
.thoughts { list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.thought { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; padding-block: 1.5rem; align-items: baseline; }
.thought + .thought { border-top: 1px solid var(--line); }
.thought .n { font: 500 12px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.thought p { margin: 0; font: 400 calc(1.4rem * var(--fz))/1.35 var(--serif); text-wrap: pretty; }
.thought .src { display: block; margin-top: 0.6rem; font: 400 12.5px/1.3 var(--sans); color: var(--ink-2); }
@media (max-width: 560px) { .thought { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } .thought p { font-size: calc(1.2rem * var(--fz)); } }

/* Music */
.music { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: end; padding-bottom: 2.5rem; border-bottom: 1px solid var(--ink); }
@media (max-width: 760px) { .music { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.tracks { list-style: none; margin: 0; padding: 0; }
.tracks li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: 0.9rem; }
.tracks li + li { border-top: 1px solid var(--line); }
.tracks .n { font: 500 13px/1 var(--sans); color: var(--ink-2); }
.tracks .t { font: 500 calc(1.35rem * var(--fz))/1.25 var(--serif); }

/* Portrait: the one picture you can re-render */
.portrait { margin: 0; }
.portrait .plate { cursor: pointer; }
.portrait figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.6rem; }
.depth { flex: none; border: 1px solid var(--ink); background: none; color: var(--ink); padding: 0.3rem 0.5rem; font: 500 12px/1 var(--sans); cursor: pointer; }
.depth:hover { background: var(--ink); color: var(--paper); }

/* Sleep screen */
.sleep { max-width: 44rem; margin: 0 auto; }
.sleep h1 { margin: 2rem 0 0.5rem; font: 500 2rem/1.15 var(--serif); }
.sleep p { margin: 0; font: 400 calc(1.125rem * var(--fz))/1.55 var(--serif); color: var(--ink-2); }

/* IM Fell English Italic: accents only (dates, years, captions), never running text */
:root:not([data-font]) :is(.entry time, .meta, figcaption, .cap, .row .yr, .card-meta .yr, .page-head .yr, .now span:last-child) {
  font-family: var(--fell); font-style: italic; font-weight: 400; font-size: 15.5px; letter-spacing: 0.005em;
  font-variant-numeric: oldstyle-nums;
}
:root:not([data-font]) .now span:last-child { font-size: 17px; color: var(--ink); }

.colophon { padding-top: 2.5rem; text-align: center; }
.colophon .colo { margin: 0 auto; max-width: 31em; font: italic 400 16px/1.55 var(--serif); color: var(--ink-2); text-wrap: balance; }

/* Paged reading: the post is set in screen-sized columns and turned one page at a time */
.paged main { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
.paged .reader { max-width: var(--measure); margin: 0 auto; overflow: hidden; }
.paged .flow { height: 100%; column-fill: auto; }
.paged .flow .measure { max-width: none; }
.paged .back { margin-left: 0; }
.paged .hero { margin-bottom: 1.5rem; }
.paged figure, .paged .plate, .paged pre, .paged .facts, .paged .post-nav, .paged .note { break-inside: avoid; }
.paged h1, .paged h2 { break-after: avoid; }
.paged .prose p { orphans: 2; widows: 2; }

.empty { margin: 0; font: italic 400 calc(1.2rem * var(--fz))/1.5 var(--serif); color: var(--ink-2); }
.cover-links p { margin: 0.8rem 0 0; font: 400 calc(1rem * var(--fz))/1.5 var(--serif); }
.cover-links .fine { font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); }