/* High contrast — forced-colors and prefers-contrast. Black, white and one yellow; large type, thick underlines and a
   focus ring you can see from the door. In forced-colors mode it steps aside and lets the system's colours through.
   Designed by machine for the Slopwright. */
:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #fff;
  --hi: #ffef00;
  --rule: 4px solid var(--fg);
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { min-width: 320px; margin: 0; background: var(--bg); color: var(--fg); font: 22px/1.65 Verdana, "DejaVu Sans", Tahoma, sans-serif; letter-spacing: .01em; word-spacing: .06em; }
a { color: var(--hi); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
a:hover { background: var(--hi); color: var(--bg); }
:where(a, [tabindex]):focus-visible { outline: 6px solid var(--hi); outline-offset: 4px; box-shadow: 0 0 0 12px var(--bg), 0 0 0 16px var(--fg); background: var(--bg); color: var(--hi); }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 8px; top: -200px; z-index: 10; padding: 14px 20px; border: 4px solid var(--hi); background: var(--bg); color: var(--hi); font-weight: 700; }
.skip:focus { top: 8px; }
.page { max-width: 60rem; margin: auto; padding: 0 20px; }
.main:focus { outline: none; }
.extra { display: none; }
h1, h2 { margin: 0; font-weight: 700; line-height: 1.15; }

.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 0; border-bottom: var(--rule); }
.masthead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.masthead .brand { display: inline-flex; align-items: center; min-height: 48px; padding: 6px 10px; background: var(--fg); }
.masthead .brand img { display: block; height: 30px; width: auto; }
.masthead .brand:hover { background: var(--hi); }
.site-name { display: inline-flex; align-items: center; min-height: 48px; padding-left: 16px; border-left: var(--rule); font-weight: 700; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }

.title-block { padding: 48px 0 32px; }
.edition { margin: 0 0 16px; font-weight: 700; }
.edition::before { content: "■ "; color: var(--hi); }
.title { font-size: clamp(44px, 8vw, 88px); }
.subtitle { margin: 20px 0 0; font-size: 1.15em; }

.contents { padding: 24px; border: var(--rule); }
.contents-title { font-size: 1.1em; }
.contents-list { margin: 12px 0 0; padding-left: 1.6em; }
.contents-list li { padding: 4px 0; }
.contents-list li::marker { color: var(--hi); font-weight: 700; }
.contents-list a { display: inline-block; min-height: 44px; padding-top: 4px; }

.chapter { padding: 48px 0 24px; border-bottom: var(--rule); scroll-margin-top: 16px; }
.chapter-title { font-size: clamp(32px, 5vw, 52px); }
.chapter-num { display: inline-grid; place-items: center; min-width: 1.4em; margin-right: .3em; padding: 0 .2em; background: var(--hi); color: var(--bg); }
.chapter-body { max-width: 60ch; }
.first { font-size: 1.1em; }
.plate { margin: 32px 0; border: var(--rule); }
.plate img { display: block; width: 100%; }
.plate figcaption { padding: 12px 16px; border-top: var(--rule); font-weight: 700; }
.tools, .rules { padding-left: 1.4em; }
.tools li, .rules li { margin: 12px 0; }
.tools li::marker, .rules li::marker { color: var(--hi); font-weight: 700; }
b, strong, dt { color: var(--hi); }
.note { margin: 28px 0; padding: 20px 24px; border: 6px solid var(--hi); }
.note p { margin: 0; }
.saying { margin: 32px 0; padding: 0 0 0 24px; border-left: 10px solid var(--hi); font-size: 1.25em; font-weight: 700; }
.saying p { margin: 0; }
.saying footer { margin-top: 10px; font-size: .8em; font-weight: 400; }
.saying footer::before { content: "— "; }
.table-wrap { overflow-x: auto; border: var(--rule); }
table { width: 100%; border-collapse: collapse; font-size: .9em; }
caption { padding: 10px 14px; text-align: left; font-weight: 700; }
th, td { padding: 12px 14px; border: 2px solid var(--fg); text-align: left; vertical-align: top; }
thead th { background: var(--fg); color: var(--bg); }
tbody th { color: var(--hi); }
.hazards { margin: 0; }
.hazard { margin: 0 0 16px; padding: 16px 20px; border: var(--rule); }
.hazard dd { margin: 6px 0 0; }
.glossary dd { margin: 0 0 16px 0; padding-left: 20px; border-left: 4px solid var(--fg); }
.sign-off { font-weight: 700; }

.outfits { padding: 48px 0; }
.outfits-title { font-size: clamp(32px, 5vw, 52px); }
.outfit-list { margin: 24px 0 0; padding: 0; list-style: none; }
.outfit { padding: 14px 0; border-top: 2px solid var(--fg); }
.outfit-link { font-weight: 700; display: inline-block; min-height: 44px; padding-top: 4px; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; font-size: .85em; }
#th-contrast { padding: 18px 20px; border: 6px solid var(--hi); }
#th-contrast .outfit-link::before { content: "You are wearing: "; color: var(--fg); text-decoration: none; }
#th-contrast .outfit-by, #th-contrast .outfit-note { display: block; font-size: .85em; }

.site-foot { padding: 32px 0 64px; border-top: var(--rule); font-size: .85em; }

@media (max-width: 600px) {
  body { font-size: 19px; }
  .page { padding: 0 16px; }
}
@media (prefers-contrast: more) {
  :root { --hi: #ffff00; }
  body { font-weight: 500; }
}
@media (forced-colors: active) {
  :root { --bg: Canvas; --fg: CanvasText; --hi: LinkText; }
  .chapter-num, thead th { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .masthead .brand { background: Canvas; border: 2px solid CanvasText; }
  :where(a, [tabindex]):focus-visible { outline-color: Highlight; box-shadow: none; }
}

/* 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; } }