/* Canopy — Meinong's jungle overhead. Six palm fans in three layers: each is one pseudo-element, a repeating conic
   gradient of narrow blades fanned from a point on the edge and ended in a soft arc by a radial mask. The nearest
   fan sways; fireflies wander and blink; vines run down both sides of the page. Where the browser has scroll
   timelines, the fans swing up out of the way at different rates as you scroll down from the top (animation-timeline:
   scroll(root)). Elsewhere, and under reduced motion, the canopy holds still.
   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: dark;
  --deep: #0b1a12;
  --panel: #f2efdc;
  --panel-2: #e7e3c8;
  --ink: #16241a;
  --dim: #46553f;
  --moss: #2f5a32;
  --leaf: #3f7a3a;
  --accent: #1f5e2e;
  --glow: #e8ff8a;
  --focus: #d9ff5c;
  --head: "Archivo Black", "Arial Black", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { overflow-x: clip; background: var(--deep); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  position: relative; overflow-x: clip; /* the leaves hang from the top of the body, and are cut off at its edges */
  min-width: 320px; margin: 0; color: var(--ink); font: 17px/1.65 Georgia, "Iowan Old Style", serif;
  background:
    /* vines down both edges: leaf ellipses on a tall tile, repeated down the page */
    radial-gradient(ellipse 46px 12px at 64px 60px, #2f6a2e 60%, transparent 64%) 0 0 / 150px 200px repeat-y,
    radial-gradient(ellipse 40px 11px at 28px 150px, #275e2a 60%, transparent 64%) 0 0 / 150px 200px repeat-y,
    linear-gradient(#1d4420, #1d4420) 22px 0 / 3px 100% no-repeat,
    radial-gradient(ellipse 46px 12px at 86px 110px, #2f6a2e 60%, transparent 64%) 100% 0 / 150px 200px repeat-y,
    radial-gradient(ellipse 40px 11px at 122px 180px, #275e2a 60%, transparent 64%) 100% 0 / 150px 200px repeat-y,
    linear-gradient(#1d4420, #1d4420) calc(100% - 22px) 0 / 3px 100% no-repeat,
    radial-gradient(ellipse 50% 40% at 70% 0, rgb(210 255 170 / .28), transparent 70%) 0 0 / 100% 100vh no-repeat,
    linear-gradient(#1c3a22, #0f2416 30%, #0b1c12);
}
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: #0b2a12; }
:where(a, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 3px; box-shadow: 0 0 0 6px #10301a; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--glow); color: #10301a; font: 700 15px Arial, sans-serif; text-decoration: none; }
.skip:focus { top: 12px; }
.main:focus { outline: none; }

/* ---------------------------------------------------------------- the canopy: palm fans, fireflies, vines */
/* Each frond is one pseudo-element: a repeating conic gradient fans narrow blades out from a point on the edge,
   two greens and a gap, and a radial mask ends the blades in a soft arc. Six fans in three layers. */
.extra { position: fixed; z-index: 0; pointer-events: none; }
.extra-1, .extra-2, .extra-3 { position: absolute; top: 0; height: 80vh; }
.extra-1::before, .extra-1::after, .extra-2::before, .extra-2::after, .extra-3::before, .extra-3::after { content: ""; position: absolute; inset: 0; }
/* far: two dark fans hanging from the top edge */
.extra-1 { left: 0; right: 0; }
.extra-1::before {
  background: repeating-conic-gradient(from 90deg at 28% 0, #173a1d 0 4deg, #1d4724 4deg 7deg, transparent 7deg 9deg);
  -webkit-mask: radial-gradient(circle at 28% 0, #000 0 300px, transparent 380px); mask: radial-gradient(circle at 28% 0, #000 0 300px, transparent 380px);
}
.extra-1::after {
  background: repeating-conic-gradient(from 92deg at 76% 0, #183d1e 0 4deg, #21502a 4deg 7deg, transparent 7deg 9.5deg);
  -webkit-mask: radial-gradient(circle at 76% 0, #000 0 340px, transparent 430px); mask: radial-gradient(circle at 76% 0, #000 0 340px, transparent 430px);
}
/* middle: two fans from the left edge */
.extra-2 { left: 0; width: 60vw; transform-origin: 0 0; }
.extra-2::before {
  background: repeating-conic-gradient(from 0deg at 0 0, #3f8a3a 0 3.5deg, #2f6e2f 3.5deg 6deg, transparent 6deg 8deg);
  -webkit-mask: radial-gradient(circle at 0 0, #000 0 420px, transparent 520px); mask: radial-gradient(circle at 0 0, #000 0 420px, transparent 520px);
}
.extra-2::after {
  background: repeating-conic-gradient(from 10deg at 0 42%, #356f33 0 4deg, #26582a 4deg 6.5deg, transparent 6.5deg 9deg);
  -webkit-mask: radial-gradient(circle at 0 42%, #000 0 260px, transparent 340px); mask: radial-gradient(circle at 0 42%, #000 0 260px, transparent 340px);
}
/* near: two bright fans from the right edge; the big one sways */
.extra-3 { right: 0; width: 56vw; transform-origin: 100% 0; }
.extra-3::before {
  transform-origin: 100% 0; will-change: transform;
  background: repeating-conic-gradient(from 180deg at 100% 0, #6cbf55 0 3deg, #4b9a42 3deg 5.5deg, transparent 5.5deg 7.5deg);
  -webkit-mask: radial-gradient(circle at 100% 0, #000 0 460px, transparent 560px); mask: radial-gradient(circle at 100% 0, #000 0 460px, transparent 560px);
  animation: sway 6.5s ease-in-out infinite alternate;
}
.extra-3::after {
  background: repeating-conic-gradient(from 190deg at 100% 55%, #5aa84a 0 3.5deg, #3d8838 3.5deg 6deg, transparent 6deg 8.5deg);
  -webkit-mask: radial-gradient(circle at 100% 55%, #000 0 230px, transparent 300px); mask: radial-gradient(circle at 100% 55%, #000 0 230px, transparent 300px);
}
@keyframes sway { from { transform: translate3d(0, -8px, 0) scaleX(.985); } to { transform: translate3d(0, 6px, 0) scaleX(1); } }
/* fireflies: four small clusters (one pseudo-element each) that wander and blink; small layers, so cheap to move */
.extra-4 { top: 20vh; left: 0; right: 0; height: 70vh; }
.extra-4::before, .extra-4::after { content: ""; position: absolute; width: 260px; height: 240px; will-change: transform, opacity;
  background:
    radial-gradient(circle at 18% 22%, rgb(232 255 138 / .95) 0 2px, rgb(232 255 138 / .25) 4px, transparent 9px),
    radial-gradient(circle at 64% 58%, rgb(232 255 138 / .9) 0 1.6px, rgb(232 255 138 / .2) 3.5px, transparent 8px),
    radial-gradient(circle at 82% 14%, rgb(232 255 138 / .85) 0 1.4px, rgb(232 255 138 / .2) 3px, transparent 7px),
    radial-gradient(circle at 34% 84%, rgb(232 255 138 / .8) 0 1.4px, rgb(232 255 138 / .2) 3px, transparent 7px);
}
.extra-4::before { left: 2vw; top: 10%; animation: fly 26s ease-in-out infinite alternate, blink 4.2s ease-in-out infinite alternate; }
.extra-4::after { right: 2vw; top: 45%; animation: fly 33s ease-in-out infinite alternate-reverse, blink 5.6s ease-in-out infinite alternate-reverse; }
@keyframes fly { from { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(40px, -60px, 0); } to { transform: translate3d(-30px, -120px, 0); } }
@keyframes blink { from { opacity: .25; } to { opacity: 1; } }

/* scroll timelines: the canopy parts as you go down: the fronds swing up about their outer corners (never out past
   the edge of the page), the far leaves rise */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .extra-1, .extra-2, .extra-3 { animation: linear both; animation-timeline: scroll(root); animation-range: 0 150vh; }
    .extra-1 { animation-name: part-far; }
    .extra-2 { animation-name: part-left; }
    .extra-3 { animation-name: part-right; }
  }
}
@keyframes part-far { to { transform: translate3d(0, -22vh, 0); } }
@keyframes part-left { to { transform: translate3d(0, -12vh, 0) rotate(-28deg); } }
@keyframes part-right { to { transform: translate3d(0, -12vh, 0) rotate(28deg); } }

@media (prefers-reduced-motion: reduce) {
  .extra-3::before, .extra-4::before, .extra-4::after { animation: none; }
}

/* ---------------------------------------------------------------- the manual: field notes on pale paper */
.page { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 0 16px 90px; }
.site-head, .title-block, .contents, .chapter, .outfits, .site-foot {
  position: relative; margin: 20px 0 0; padding: 22px 26px; border-radius: 10px;
  background: linear-gradient(var(--panel), var(--panel-2));
  box-shadow: 0 18px 40px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .4);
}
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 10px 18px; }
.masthead { display: flex; align-items: center; }
.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 #b9b591; color: var(--ink); font: 700 16px Arial, sans-serif; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 16px; font: 14px Arial, 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 title sits low, under the leaves, on a dark sign */
.title-block { margin-top: 270px; padding: 34px 28px; background: #10261a; color: #eef6dc; box-shadow: 0 20px 50px rgb(0 0 0 / .5), inset 0 0 0 2px #2f5a32; }
.edition { margin: 0; color: var(--glow); font: 700 12px Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--head); font-weight: 1000; font-synthesis: none; line-height: 1.04; letter-spacing: -.02em; }
.title { margin-top: 10px; font-size: clamp(42px, 7vw, 86px); color: #f4ffe0; }
.subtitle { margin: 14px 0 0; max-width: 36ch; color: #cfe0bb; font-size: 20px; }

.contents-title { color: var(--dim); font: 700 12px Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.contents-list { margin: 8px 0 0; padding-left: 1.4em; columns: 2 220px; }
.contents-list a { display: inline-block; padding: 3px 0; }

.chapter { padding-top: 28px; }
.chapter-title { font-size: clamp(26px, 3.2vw, 36px); }
.chapter-num { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: 8px; border-radius: 50% 0; background: var(--moss); color: #f2ffe0; font-size: .7em; vertical-align: .12em; }
.chapter-body > :first-child { margin-top: 14px; }
.first { font-size: 19px; }
.plate { margin: 20px 0 6px; }
.plate img { display: block; width: 100%; border-radius: 8px; }
.plate figcaption { margin-top: 6px; color: var(--dim); font-style: italic; font-size: 14px; }
.tools { padding-left: 1.1em; }
.tools li { margin: 6px 0; }
.tools li::marker { content: "❧ "; color: var(--moss); }
.note { margin: 18px 0; padding: 14px 18px; border-left: 5px solid var(--moss); border-radius: 4px; background: #e2ecc7; }
.note p { margin: 0; }
.rules { padding-left: 1.4em; }
.rules li { margin: 8px 0; }
.saying { margin: 22px 0 0; padding-left: 18px; border-left: 3px solid var(--moss); }
.saying p { margin: 0; font-size: 22px; font-style: italic; }
.saying footer { color: var(--dim); font: 14px Arial, sans-serif; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { padding-bottom: 6px; color: var(--dim); font-style: italic; text-align: left; }
th, td { padding: 8px 10px 8px 0; border-bottom: 1px solid #c9c6a4; text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--moss); font: 700 13px Arial, sans-serif; }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0; }
.hazard { padding: 12px 14px; border-radius: 8px; background: #fbf9ec; border: 1px solid #cfcba8; }
.hazard dt { font-weight: 700; }
.hazard dd { margin: 2px 0 0; }
.glossary dt { margin-top: 10px; font-weight: 700; }
.glossary dd { margin: 0; }
.sign-off { font-style: italic; }

.outfits-title { font-size: clamp(28px, 3.4vw, 40px); }
.outfits-lede { color: var(--dim); }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.outfit { padding: 8px 12px; border-radius: 8px; background: #fbf9ec; border: 1px solid #cfcba8; font-size: 14px; }
.outfit-link { display: inline-block; padding: 2px 0; font-weight: 700; }
.outfit-by, .outfit-note, .outfit-technique { display: none; }
#th-canopy { background: #10261a; border-color: #10261a; }
#th-canopy .outfit-link { color: var(--glow); }
#th-canopy .outfit-link::after { content: " · under it now"; color: #dbe9c4; font-weight: 400; }

.site-foot { color: var(--dim); font-size: 14px; }
.site-foot p { margin: 4px 0; }

@media (max-width: 720px) {
  .page { padding: 0 12px 70px; }
  .site-head, .title-block, .contents, .chapter, .outfits, .site-foot { padding: 18px 16px; }
  .title-block { margin-top: 190px; }
  .extra-2 { width: 80vw; }
  .extra-3 { width: 76vw; }
}

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