/* On the bench — the manual lying on the Slopwright's workbench, seen from the front at an angle. Shows off real 3D:
   every page is tilted back in its own perspective() with transform-style: preserve-3d, so its shadow sheet, its
   paper clip and its page-number tab sit at different depths and shift as the page moves. Hover a page, or tab into
   it, and it lifts up flat toward you. The bench, the ruler, the tweezers and the lamp are gradients on the .extra divs.
   Designed by machine for the Slopwright. */
@font-face { font-family: "Archivo Black"; src: url(/fonts/archivo-black-latin.woff2) format("woff2"); font-weight: 400 1000; font-display: swap; }
:root {
  color-scheme: light;
  --wood: #6e4526;
  --wood-dark: #4a2c16;
  --paper: #f7f1e1;
  --paper-edge: #e3d8bd;
  --ink: #1f1a12;
  --muted: #5d5241;
  --brass: #c89a3c;
  --focus: #1d5fbf;
  --tilt: 16deg;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  min-width: 320px; margin: 0; color: var(--ink);
  font: 17px/1.6 Georgia, "Iowan Old Style", "Times New Roman", serif;
  /* the bench top: long planks, grain, knots and a warm pool of lamplight */
  background:
    radial-gradient(ellipse 60% 900px at 82% 0, rgb(255 205 120 / .32), transparent 70%) 0 0 / 100% 900px no-repeat,
    radial-gradient(ellipse 6px 3px at 23% 37%, #2c180a 0 60%, transparent 100%) 0 0 / 520px 900px,
    radial-gradient(ellipse 9px 4px at 71% 63%, #2c180a 0 60%, transparent 100%) 0 0 / 610px 1300px,
    repeating-linear-gradient(90deg, rgb(0 0 0 / .32) 0 2px, transparent 2px 180px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgb(255 230 190 / .05) 7px 9px, transparent 9px 23px, rgb(0 0 0 / .06) 23px 24px),
    linear-gradient(90deg, var(--wood-dark), var(--wood) 18%, #7c5030 50%, var(--wood) 82%, var(--wood-dark));
}
a { color: #6a2a00; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:where(a, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 30; padding: 10px 16px; border-radius: 6px; background: var(--paper); color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }
.page { position: relative; max-width: 1060px; margin: auto; padding: 0 5% 40px; }
.main:focus { outline: none; }
h1, h2 { margin: 0; font-family: "Archivo Black", "Arial Black", Arial, sans-serif; font-weight: 1000; font-synthesis: none; line-height: 1.05; letter-spacing: -.02em; }

/* the masthead is a brass name plate screwed to the front of the bench */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin: 22px 0 10px; padding: 8px 16px; border-radius: 6px;
  background: linear-gradient(180deg, #ecd28e, var(--brass) 45%, #9d7424); box-shadow: inset 0 1px 0 #fff4c8, inset 0 -2px 0 #7a5718, 0 6px 14px rgb(0 0 0 / .4); }
.masthead { display: flex; align-items: center; min-width: 0; }
.masthead .brand { display: flex; align-items: center; min-height: 42px; }
.masthead .brand img { display: block; width: auto; height: 26px; }
.site-name { display: inline-flex; align-items: center; min-height: 42px; margin-left: 14px; padding-left: 14px; border-left: 1px solid rgb(31 26 18 / .4); color: var(--ink); font: 700 16px Arial, Helvetica, sans-serif; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 16px; font: 700 14px Arial, Helvetica, sans-serif; }
.site-nav a { display: inline-flex; align-items: center; min-height: 42px; color: var(--ink); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- the pages, in 3D */
.manual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 40px; padding: 40px 0 10px; }
.title-block, .contents, .chapter, .outfits {
  position: relative; padding: 28px 30px 30px; border-radius: 2px;
  background: linear-gradient(180deg, #fbf7ea, var(--paper) 30%, #f1e9d3);
  box-shadow: 0 1px 0 var(--paper-edge), 0 2px 0 #d6c9a8, 0 3px 0 #ebe2cc, 0 18px 18px -8px rgb(20 10 2 / .55);
  transform: perspective(1300px) rotateX(var(--tilt)) rotateZ(var(--turn, 0deg));
  transform-origin: 50% 50%;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
/* the title card is the one page built in depth (preserve-3d): its shadow is a separate sheet below the paper, so
   it slides as the card lifts. (Doing this for every page cost too many composited layers when scrolling.) */
.title-block { transform-style: preserve-3d; }
.title-block::before {
  content: ""; position: absolute; inset: 10px -6px -14px 10px; z-index: -1; border-radius: 4px;
  background: radial-gradient(closest-side, rgb(20 10 2 / .55), rgb(20 10 2 / .3) 70%, transparent); transform: translateZ(-20px);
}
/* a paper clip standing up off the top edge of every chapter, and a page tab folded back */
.chapter::after {
  content: ""; position: absolute; top: -16px; left: 34px; width: 16px; height: 42px; border: 3px solid #9aa3ad; border-radius: 8px 8px 9px 9px;
  border-bottom-color: #c3cad1;
}
.title-block { grid-column: 1 / -1; --turn: -1deg; padding: 40px 40px 36px; background: linear-gradient(180deg, #fffaf0, #f5ecd6); }
.contents { --turn: 1.6deg; }
.chapter:nth-of-type(odd) { --turn: -1.4deg; }
.chapter:nth-of-type(even) { --turn: 1.1deg; }
.chapter-1, .chapter-5 { grid-column: span 2; }
.outfits { grid-column: 1 / -1; --turn: -.6deg; --tilt: 5deg; margin-top: 46px; }

/* pick a page up: hover, or tab into it, and it lifts and comes flat toward you */
@media (hover: hover) and (min-width: 761px) {
  .title-block:hover, .contents:hover, .chapter:hover { transform: perspective(1300px) rotateX(0deg) translateZ(16px) rotateZ(0deg); z-index: 5; }
}
@media (min-width: 761px) {
  .title-block:focus-within, .contents:focus-within, .chapter:focus-within { transform: perspective(1300px) rotateX(0deg) translateZ(16px) rotateZ(0deg); z-index: 5; }
}

/* the text on the pages */
.edition { margin: 0 0 10px; color: var(--muted); font: 700 12px Arial, Helvetica, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.title { font-size: clamp(44px, 7.4vw, 96px); }
.subtitle { max-width: 34ch; margin: 14px 0 0; font-size: 20px; font-style: italic; color: #3b3224; }
.contents-title { font-size: 22px; margin-bottom: 8px; }
.contents-list { margin: 0; padding-left: 22px; line-height: 1.9; }
.contents-list a { display: inline-block; min-height: 24px; }
.chapter-title { display: flex; align-items: baseline; gap: 12px; font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 12px; }
.chapter-num { display: inline-grid; place-items: center; min-width: 38px; height: 38px; border-radius: 50%; background: var(--wood-dark); color: var(--paper); font: 700 17px Arial, Helvetica, sans-serif; }
.chapter-body > :first-child { margin-top: 0; }
.first { font-size: 19px; }
.plate { margin: 18px 0 0; padding: 10px 10px 6px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .25); transform: rotate(-1.2deg); }
.plate img { display: block; width: 100%; }
.plate figcaption { margin-top: 6px; color: var(--muted); font-size: 14px; font-style: italic; }
.tools, .rules { padding-left: 22px; }
.tools li, .rules li { margin: 6px 0; }
.note { margin: 18px 0; padding: 12px 16px; border-left: 5px solid #b2401d; background: #fdecc8; }
.note p { margin: 0; }
.saying { margin: 20px 0 0; padding: 12px 18px; border-left: 3px solid var(--wood); font-style: italic; font-size: 19px; }
.saying p { margin: 0; }
.saying footer { margin-top: 6px; color: var(--muted); font-size: 14px; font-style: normal; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { text-align: left; color: var(--muted); font-style: italic; padding-bottom: 6px; }
th, td { padding: 8px 10px 8px 0; border-top: 1px solid var(--paper-edge); text-align: left; vertical-align: top; }
thead th { border-top: 0; border-bottom: 2px solid var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.hazard { padding: 10px 12px; border: 1.5px dashed #b2401d; }
.hazard dt { font-weight: 700; }
.hazard dd { margin: 4px 0 0; font-size: 15px; }
.glossary dt { font-weight: 700; margin-top: 8px; }
.glossary dd { margin: 0 0 0 18px; }
.sign-off { font-style: italic; }

.outfits-title { font-size: clamp(26px, 3.4vw, 40px); }
.outfits-lede { color: var(--muted); max-width: 60ch; }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 22px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; }
.outfit { padding: 6px 0; border-top: 1px dotted var(--paper-edge); }
.outfit-link { display: inline-flex; min-height: 24px; align-items: center; font-weight: 700; }
.outfit-by, .outfit-technique, .outfit-note { display: none; }
#th-bench { padding: 8px 10px; border: 2px solid var(--wood-dark); background: #ffe9a8; }
#th-bench .outfit-link::before { content: "✎ on the bench now: "; font-weight: 400; }
#th-bench .outfit-technique { display: block; color: var(--muted); }

.site-foot { margin: 40px 0 0; padding: 18px 22px; border-radius: 4px; background: var(--paper); box-shadow: 0 6px 14px rgb(0 0 0 / .4); font-size: 14px; }
.site-foot p { margin: 4px 0; }

/* ---------------------------------------------------------------- around the pages: tools on the bench */
.extra { position: absolute; pointer-events: none; display: none; }
@media (min-width: 1180px) {
  .extra { display: block; }
  /* a steel ruler down the left side */
  .extra-1 { top: 520px; left: calc(50% - 600px); width: 44px; height: 900px; border-radius: 3px; transform: rotate(4deg);
    background: repeating-linear-gradient(180deg, #2b2f33 0 1px, transparent 1px 10px) right 4px top 0 / 10px 100% no-repeat, repeating-linear-gradient(180deg, #2b2f33 0 2px, transparent 2px 50px) right 4px top 0 / 18px 100% no-repeat, linear-gradient(90deg, #8d959c, #dfe5ea 40%, #a7afb6); box-shadow: 6px 8px 10px rgb(0 0 0 / .45); }
  /* tweezers, open, on the right */
  .extra-2 { top: 1500px; right: calc(50% - 560px); width: 60px; height: 360px;
    background: linear-gradient(#c9d0d6, #8f979e) 0 0 / 8px 100% no-repeat, linear-gradient(#c9d0d6, #8f979e) 100% 0 / 8px 100% no-repeat;
    clip-path: polygon(8% 0, 14% 0, 50% 100%, 86% 0, 92% 0, 52% 100%, 48% 100%); filter: drop-shadow(5px 6px 4px rgb(0 0 0 / .5)); transform: rotate(-14deg); }
  /* the lamp at the back of the bench, top right, always on, with its glow */
  .extra-3 { position: fixed; top: -40px; right: 30px; width: 170px; height: 230px; z-index: 0;
    background:
      radial-gradient(ellipse 10px 24px at 50% 64%, #fffbe6 0 30%, #ffd46a 55%, #ff8a1f 80%, transparent 84%),
      radial-gradient(ellipse 52px 70px at 50% 64%, rgb(255 255 255 / .22) 0 92%, rgb(255 255 255 / .55) 94%, transparent 97%),
      radial-gradient(ellipse 60px 20px at 50% 98%, #e5bd62, #9d7424 80%, transparent 84%); }
  .extra-4 { position: fixed; top: -160px; right: 0; width: 440px; height: 520px; z-index: 0; transform-origin: 100% 0;
    background: radial-gradient(circle at 100% 30%, rgb(255 210 120 / .32), rgb(255 190 90 / .12) 45%, transparent 70%); animation: bench-flicker 3.2s ease-in-out infinite alternate; }
}
@keyframes bench-flicker { 0% { opacity: .75; transform: scale(1); } 45% { opacity: 1; transform: scale(1.04); } 100% { opacity: .85; transform: scale(.98); } }

/* ---------------------------------------------------------------- phones: pages flat on the bench */
@media (max-width: 760px) {
  .manual { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 20px; }
  .chapter-1, .chapter-5 { grid-column: auto; }
  .title-block, .contents, .chapter, .outfits { transform: rotateZ(calc(var(--turn, 0deg) * .5)); padding: 22px 18px; }
  .title-block { padding: 26px 20px; }
  .chapter::after { left: 22px; transform: none; }
  .site-head { padding: 6px 12px; }
  .masthead .brand img { height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .title-block, .contents, .chapter, .outfits { transition: none; }
  .extra-4 { animation: 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; } }