/* No pictures — system colours and not a single image. No gradients, no background images, no image files: the plate
   and the wordmark are hidden, and the wordmark link shows its words instead. Colours come from Canvas, CanvasText and
   LinkText, so it follows the reader's light or dark setting.
   Designed by machine for the Slopwright. */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { min-width: 320px; margin: 0; background: Canvas; color: CanvasText; font: 18px/1.6 Georgia, "Times New Roman", serif; }
img { display: none !important; }
a { color: LinkText; text-underline-offset: 3px; }
a:visited { color: VisitedText; }
:where(a, [tabindex]):focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; }
.skip { position: absolute; left: 8px; top: -100px; padding: 8px 12px; background: Canvas; border: 2px solid CanvasText; }
.skip:focus { top: 8px; }
.page { max-width: 42em; margin: auto; padding: 0 20px; }
.main:focus { outline: none; }
.extra { display: none; }
h1, h2 { font-weight: 700; line-height: 1.2; }

.site-head { padding: 20px 0 12px; border-bottom: 1px solid CanvasText; }
.masthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.masthead .brand { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.masthead .brand::before { content: "slopped.site"; font-weight: 700; text-decoration: underline; }
.site-name { display: inline-flex; align-items: center; min-height: 32px; }
.site-name::before { content: "/"; margin-right: 12px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 4px; font-size: .9em; }
.site-nav a { display: inline-flex; align-items: center; min-height: 32px; }

.title-block { padding: 24px 0 8px; }
.edition { margin: 0; font-style: italic; }
.title { margin: 8px 0 0; font-size: 2.2em; }
.subtitle { margin: 8px 0 0; }
.contents { margin: 24px 0; padding: 4px 16px; border: 1px solid CanvasText; }
.contents-title { font-size: 1em; }
.contents-list a { display: inline-block; min-height: 28px; }

.chapter { padding: 8px 0; }
.chapter-title { font-size: 1.4em; margin: 24px 0 8px; }
.chapter-num::after { content: "."; }
.plate { margin: 16px 0; padding: 12px 16px; border: 1px dashed CanvasText; }
.plate::before { content: "[A picture is hidden in this outfit.]"; display: block; font-style: italic; }
.plate figcaption { margin-top: 4px; }
.tools, .rules { padding-left: 1.4em; }
.note { margin: 16px 0; padding: 4px 16px; border-left: 4px solid CanvasText; }
.saying { margin: 16px 0; font-style: italic; }
.saying footer::before { content: "— "; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9em; }
caption { text-align: left; font-style: italic; padding-bottom: 6px; }
th, td { padding: 6px 10px 6px 0; border-bottom: 1px solid CanvasText; text-align: left; vertical-align: top; }
.hazard dt, .glossary dt { font-weight: 700; margin-top: 10px; }
.hazard dd, .glossary dd { margin-left: 1.4em; }

.outfits { margin-top: 32px; padding-top: 8px; border-top: 1px solid CanvasText; }
.outfits-title { font-size: 1.4em; }
.outfit-list { padding-left: 1.4em; }
.outfit { margin: 6px 0; }
.outfit-link { display: inline-block; min-height: 28px; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { font-size: .9em; font-style: italic; }
#th-plain { margin: 10px 0; padding: 8px 12px; border: 2px solid CanvasText; list-style-position: inside; }
#th-plain .outfit-link { font-weight: 700; }
#th-plain .outfit-link::after { content: " (this one)"; }
#th-plain .outfit-technique, #th-plain .outfit-note { display: block; color: CanvasText; }

.site-foot { margin-top: 32px; padding: 12px 0 40px; border-top: 1px solid CanvasText; font-size: .9em; }

/* moving between outfits: a cross-document view transition where the browser has them (Chromium did, Firefox did not, when check.mjs last ran), with the
   masthead and the title carried across; an ordinary page load elsewhere, and under reduced motion */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.title { view-transition-name: manual-title; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }