/* Styles this one work needs and the rest of the site has no reason to carry: image grids and a numbered sequence. Both grids are two columns wide inside the text measure, so images line up with the paragraphs. This lives beside the work's assets rather than inside each page's , because the work has twelve language versions and they are maintained by hand. Inline, this block would be twelve copies of the same rules, and the twelfth would eventually stop matching the first. Language versions differ; the layout of the work does not. */ /* The same bottom margin a paragraph carries. Without it the list ran straight into the paragraph after it, since paragraphs here have no top margin. */ ol { margin: 0 0 var(--space-para); padding-inline-start: 1.4em; } ol li { margin-bottom: 0.75rem; } ol li:last-child { margin-bottom: 0; } ul.plain { margin: 0 0 var(--space-para); padding-inline-start: 1.4em; } ul.plain li { margin-bottom: 0.75rem; } ul.plain li:last-child { margin-bottom: 0; } .lead { font-size: 1.125rem; } .note { font-size: 0.9375rem; } /* Work pages are set justified; the index is not. A work page is long-form reading, and a flush right edge holds the column steady over that distance. The index is four short paragraphs, where it would earn little. `hyphens: auto` is not decoration, it is what makes justification readable. A flush right edge has to be paid for somewhere, and with no word-internal breaks the browser pays entirely in word spacing — at this measure that opens gaps wide enough to line up down the page and lead the eye vertically. Hyphenation moves most of that slack inside the words. The dictionary comes from the `lang` attribute, which every page declares. The -webkit- prefix covers Safari before 17, where the unprefixed property is not recognised and the reader would otherwise get justification with no hyphenation at all — precisely the failure this pairing exists to prevent. The lists are included because they are running prose, not labels: the postscript entries are full paragraphs. Captions, the byline and the colophon are left ragged — one to three lines, where justifying stretches a line and buys nothing. Both are set for every language rather than a listed few. Hyphenation is driven by the `lang` attribute, so a language with no dictionary simply gets none, and CJK and Arabic are not hyphenated at all — declaring it costs them nothing and means nothing has to be revisited if a dictionary appears. */ section p, ol li, ul.plain li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* Indonesian is the one language where the pairing does not hold, so it is left ragged. The browser has no hyphenation dictionary for it, and the language builds long words by affixing — menangkapnya, membesarkannya and mendaftarkannya are ordinary words, not outliers. A line that cannot break inside them pays the whole slack in word spacing, and the result was visibly looser than every other language here. A ragged edge reads better than a flush one bought that way. Revisit if a dictionary appears. `start`, not `left`, so the rule would still mean the right thing if a right-to-left language ever needed the same treatment. */ :lang(id) section p, :lang(id) ol li, :lang(id) ul.plain li { text-align: start; } .shots, .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1rem; margin: 2.5rem 0; } .shots figure { margin: 0; } .shots img, .pair img { width: 100%; } .shots figcaption, .pair figcaption { margin-top: 0.6rem; } .pair figcaption { grid-column: 1 / -1; } @media (max-width: 32rem) { .shots, .pair { grid-template-columns: 1fr; } } .colophon { margin-top: var(--space-section); font-size: 0.875rem; color: var(--fg-muted); }