/* Sketchbook — wobbly hand-drawn boxes from eight-value (elliptical) border-radius, pencil lines from dashed
   borders, and squared paper from two background grids. Nothing was drawn by hand.
   Designed by machine for the Slopwright. */
:root {
  color-scheme: light;
  --paper: #fbfbf7;
  --grid: #dfe7ef;
  --pencil: #2b2d31;
  --soft: #50545b;
  --red: #b3261e;
  --blue: #1d4f91;
  --hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
  --wob1: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wob2: 15px 255px 15px 225px / 225px 15px 255px 15px;
  --wob3: 125px 10px 20px 185px / 25px 205px 205px 25px;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  min-width: 320px; margin: 0; color: var(--pencil); font: 17px/1.6 var(--hand);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--paper);
}
a { color: var(--blue); text-decoration-style: wavy; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:where(a, [tabindex]):focus-visible { outline: 2px dashed var(--red); outline-offset: 4px; border-radius: var(--wob1); }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 8px 14px; background: var(--paper); border: 2px solid var(--pencil); border-radius: var(--wob1); }
.skip:focus { top: 12px; }
.extra { display: none; }
/* a doodled spiral in the corner */
.extra-1 { display: block; position: absolute; top: 120px; right: 4%; width: 90px; height: 90px; border: 2px dashed var(--soft); border-radius: var(--wob3); transform: rotate(18deg); opacity: .5; pointer-events: none; }
.page { max-width: 1040px; margin: auto; padding: 0 5%; }
.main:focus { outline: none; }

.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 18px; padding: 22px 0 14px; border-bottom: 2px dashed var(--pencil); }
.masthead { display: flex; align-items: center; }
.masthead .brand { display: flex; align-items: center; min-height: 42px; }
.masthead .brand img { display: block; height: 26px; width: auto; }
.site-name { margin-left: 12px; padding: 2px 12px; border: 2px solid var(--pencil); border-radius: var(--wob2); color: var(--pencil); font-weight: 700; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 16px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 42px; }

.title-block { position: relative; padding: 46px 0 24px; }
.edition { display: inline-block; margin: 0; color: var(--red); transform: rotate(-3deg); }
.edition::after { content: " ✎"; }
.title { margin: 10px 0 0; max-width: 12ch; font: 700 clamp(44px, 8vw, 92px)/1 var(--hand); }
.title::after { content: ""; display: block; width: 70%; height: 10px; margin-top: 6px; border-bottom: 3px solid var(--red); border-radius: 0 0 50% 40% / 0 0 100% 60%; }
.subtitle { max-width: 30em; margin: 16px 0 0; color: var(--soft); font-size: 20px; }

.contents { margin: 10px 0 20px; padding: 18px 22px; border: 2px solid var(--pencil); border-radius: var(--wob1); background: var(--paper); transform: rotate(-.6deg); }
.contents-title { margin: 0 0 6px; font: 700 24px var(--hand); }
.contents-list { columns: 2 200px; margin: 0; padding-left: 1.4em; }
.contents-list a { display: inline-block; padding: 3px 0; }

.chapter { margin: 26px 0; padding: 22px 26px; border: 2px solid var(--pencil); background: var(--paper); }
.chapter:nth-of-type(3n+1) { border-radius: var(--wob1); }
.chapter:nth-of-type(3n+2) { border-radius: var(--wob2); transform: rotate(.4deg); }
.chapter:nth-of-type(3n) { border-radius: var(--wob3); transform: rotate(-.3deg); }
.chapter-title { margin: 0 0 12px; font: 700 clamp(26px, 4vw, 34px)/1.15 var(--hand); }
.chapter-num { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: 8px; border: 2px solid var(--red); border-radius: 50% 45% 55% 50% / 55% 50% 45% 50%; color: var(--red); font-size: .8em; }
.chapter-body { max-width: 38em; }
.chapter-body p { margin: 0 0 .8em; }
.plate { margin: 18px 0; padding: 10px; border: 2px dashed var(--soft); border-radius: var(--wob2); }
.plate img { display: block; width: 100%; border-radius: var(--wob3); filter: grayscale(.7) contrast(1.1); }
.plate figcaption { margin-top: 6px; color: var(--soft); font-size: 15px; }
.plate figcaption::before { content: "↑ "; color: var(--red); }
.tools { padding-left: 1.4em; list-style: "✓ "; }
.tools li { margin-bottom: .3em; }
.tools li::marker { color: var(--red); }
b, strong { color: var(--red); }
.note { margin: 16px 0; padding: 12px 18px; border: 2px dashed var(--red); border-radius: var(--wob2); background: #fff6d6; }
.note p { margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
caption { text-align: left; color: var(--soft); padding-bottom: 6px; }
th, td { padding: 8px 10px; border-bottom: 2px dashed #9aa3ad; text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--pencil); }
.rules { padding-left: 1.6em; }
.rules li { margin-bottom: .4em; }
.saying { margin: 20px 0 0; padding: 18px 22px; border: 2px solid var(--pencil); border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; text-align: center; font-size: 21px; }
.saying p { margin: 0; }
.saying footer { color: var(--soft); font-size: 15px; }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0; }
.hazard { padding: 12px 14px; border: 2px dashed var(--pencil); border-radius: var(--wob3); }
.hazard dt { font-weight: 700; color: var(--red); }
.hazard dd { margin: 4px 0 0; font-size: 15px; }
.glossary dt { font-weight: 700; margin-top: 8px; }
.glossary dd { margin: 0 0 0 1.2em; }
.sign-off { margin-top: 14px; }

.outfits { padding: 26px 0; border-top: 2px dashed var(--pencil); }
.outfits-title { margin: 0; font: 700 clamp(26px, 4vw, 36px) var(--hand); }
.outfits-lede { color: var(--soft); }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.outfit { padding: 8px 12px; border: 2px solid #8d96a0; border-radius: var(--wob1); background: var(--paper); font-size: 14px; }
.outfit:nth-child(even) { border-radius: var(--wob2); }
.outfit-link { display: inline-block; min-height: 24px; font-weight: 700; font-size: 16px; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; color: var(--soft); }
#th-sketch { border: 3px solid var(--red); background: #fff6d6; transform: rotate(-1.5deg); }
#th-sketch .outfit-link::after { content: " ← this one"; color: var(--red); font-weight: 400; }

.site-foot { padding: 20px 0 50px; border-top: 2px dashed var(--pencil); color: var(--soft); font-size: 15px; }
.site-foot p { margin: 0 0 6px; }

@media (max-width: 600px) {
  .chapter { padding: 18px 16px; transform: none !important; }
  .extra-1 { display: 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; } }