/* The zine layer. Only layout and spreads: colours, type and corners come from bft.css. */
html { scroll-padding-bottom: 48px; }

/* Spreads: one screen of the magazine. Long spreads simply run on. */
.z-spread { min-height: calc(100svh - 41px); display: flex; flex-direction: column; gap: calc(var(--k-u) * 6); }
.z-spread > .z-end { margin-top: auto; }
.z-notes > * { padding-bottom: calc(var(--k-u) * 2); }
.z-notes p + p { text-indent: 0; }

/* Folio: the running foot of every spread. */
.z-folio {
  position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--k-gutter);
  max-width: none; min-height: 41px; padding-inline: var(--k-margin); background: var(--k-bg); color: var(--k-fg); border-top: var(--k-hair) solid var(--k-rule);
}
.z-folio p { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-folio a { text-decoration: none; }
.z-folio a:hover { text-decoration: underline; }
.z-folio .k-btn { min-height: 32px; width: 32px; border-color: transparent; }

/* Contents */
.z-toc li { border-top: var(--k-hair) solid var(--k-rule); }
.z-toc li:last-child { border-bottom: var(--k-hair) solid var(--k-rule); }
.z-toc a { display: grid; grid-template-columns: 4ch minmax(0, 1fr) auto; gap: var(--k-gutter); align-items: baseline; padding-block: 5px; text-decoration: none; }
.z-toc--large a { padding-block: 12px; }
.z-toc--large a > span:nth-child(2) { font-size: var(--k-t-lead); font-weight: 300; }
.z-parts { columns: 2; column-gap: calc(var(--k-gutter) * 3); }
.z-parts > li { break-inside: avoid; padding-bottom: calc(var(--k-u) * 5); }
.z-parts h3 { padding-bottom: var(--k-u); }
@media (max-width: 720px) { .z-parts { columns: 1; } }
.z-toc a:hover, .z-toc a:focus-visible { background: var(--k-fg); color: var(--k-bg); }
.z-toc a:hover .k-quiet, .z-toc a:focus-visible .k-quiet { color: inherit; }

/* Long reading: the one place body text gets room to breathe. */
.z-prose { max-width: 62ch; line-height: 1.55; text-wrap: pretty; }
.z-prose p + p { text-indent: 3ch; }
.z-prose h3 { margin-block: calc(var(--k-u) * 4) var(--k-u); font-weight: 500; }
.z-prose h3 + p { text-indent: 0; }

/* Images through the bit filter. See filterImage in zine.js. */
.z-bit { display: flex; flex-direction: column; gap: var(--k-u); }
.z-bit img, .z-bit canvas { display: block; width: 100%; height: auto; }
.z-bit canvas { image-rendering: pixelated; }
.z-bit img:not([hidden]) { filter: grayscale(1); }
.z-bit--screen img, .z-bit--screen canvas { max-width: calc((100svh - 190px) * var(--ratio, 1.5)); }
.z-dial { display: grid; grid-template-columns: auto minmax(0, 1fr) 9ch; gap: var(--k-gutter); align-items: center; }
.z-dial output { text-align: right; font-variant-numeric: tabular-nums; }

/* Rectangles drawn on one scale. Set --w and --h in the same units as the largest, --max-w and --max-h. */
.z-scale { position: relative; width: 100%; aspect-ratio: var(--max-w) / var(--max-h); }
.z-scale > p {
  position: absolute; left: 0; bottom: 0; width: calc(var(--w) / var(--max-w) * 100%); height: calc(var(--h) / var(--max-h) * 100%);
  padding: 2px 6px; text-align: right; white-space: nowrap; max-width: none; font: var(--k-t-note) var(--k-mono); border: var(--k-hair) solid var(--k-fg);
}

/* Big type always fits the screen, and essay titles leave room for the opening lines. */
.z-spread k-display svg { width: auto; max-width: 100%; max-height: calc(100svh - 170px); }
.z-spread header k-display svg { max-height: 45svh; }

/* Numbered remarks, as in the Tractatus. --depth is how many digits follow the point. */
.z-props { display: flex; flex-direction: column; gap: calc(var(--k-u) * 2); }
.z-prop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--k-gutter); align-items: baseline; scroll-margin-top: var(--k-margin); }
.z-prop-n { grid-column: 1 / span 3; padding-left: calc((var(--depth) - 1) * 1ch); }
.z-prop-text { grid-column: 4 / span 6; max-width: 62ch; line-height: 1.55; text-wrap: pretty; }
.z-prop-text--main { font-size: var(--k-t-lead); font-weight: 300; line-height: 1.25; }
.z-prop-text p + p { margin-top: var(--k-u); }
.z-prop-note { grid-column: 10 / span 3; }
.z-prop:target .z-prop-n { background: var(--k-signal); color: var(--k-on-signal); }
@media (max-width: 720px) { .z-prop-n, .z-prop-text, .z-prop-note { grid-column: 1 / -1; } .z-truth--list { display: block; overflow-x: auto; } }
.z-opener-text { font-size: var(--k-t-lead); font-weight: 300; line-height: 1.25; max-width: 30ch; }
@media (min-width: 721px) { .z-m { white-space: nowrap; } }
.z-m i { font-family: var(--k-serif); font-size: 1.1em; }
.z-binom { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1; font-size: 0.8em; text-align: center; }
.z-truths, .z-quoted { display: flex; flex-wrap: wrap; gap: calc(var(--k-u) * 3); align-items: flex-start; margin-block: calc(var(--k-u) * 2); }
.z-quoted { align-items: center; }
.z-truth { width: auto; min-width: 0; font-family: var(--k-mono); }
.z-truth th, .z-truth td { text-align: center; padding-inline: 12px; }
.z-truth th { text-transform: none; font-family: var(--k-serif); font-style: italic; font-size: var(--k-t-body); letter-spacing: 0; color: var(--k-fg); }
.z-truth--list td { text-align: left; }
.z-truth--list td:first-child { white-space: nowrap; }
.z-fig { max-width: 420px; margin-block: calc(var(--k-u) * 2); }
.z-sign { margin-top: calc(var(--k-u) * 3); text-indent: 0; }

/* Plates: art that answers one proposition, with the words it answers. */
.z-plate .z-bit--screen img, .z-plate .z-bit--screen canvas { max-width: calc((100svh - 280px) * 1.5); }
.z-plate-quote { display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: var(--k-gutter); align-items: baseline; max-width: 52ch; font-size: var(--k-t-lead); font-weight: 300; line-height: 1.25; }
.z-plate-quote a { text-decoration: none; }
.z-compare--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.z-glyphs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--k-u) * 3) var(--k-gutter); }
.z-sixteen { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: calc(var(--k-u) * 3) var(--k-gutter); }
.z-glyphs figure, .z-sixteen figure { display: flex; flex-direction: column; gap: var(--k-u); }
.z-glyphs .z-sprite svg, .z-sixteen .z-sprite svg, .z-bits svg, .z-compare .z-sprite svg { width: 100%; height: auto; max-height: 50svh; }
.z-sixteen .z-sprite svg { outline: var(--k-hair) solid var(--k-rule); }
@media (max-width: 720px) { .z-compare--four, .z-glyphs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .z-sixteen { grid-template-columns: repeat(4, minmax(0, 1fr)); } .z-plate-quote { font-size: var(--k-t-body); } }

/* Bitmaps drawn by hand with data-sprite. */
.z-sprite svg { height: 58svh; width: auto; max-width: 100%; }
.z-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--k-u) * 3) var(--k-gutter); }
.z-compare--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.z-compare canvas, .z-compare img { width: auto; max-width: 100%; max-height: calc(50svh - 110px); }
.z-compare--three canvas, .z-compare--three img { max-height: none; }
@media (max-width: 720px) { .z-compare, .z-compare--three { grid-template-columns: minmax(0, 1fr); } }

@media print {
  .z-folio { display: none; }
  .z-spread { min-height: 100vh; break-after: page; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}