/* A day at the bench — the workshop window from dawn to night and back over two minutes. The sky's colours are
   registered custom properties (@property <color>) animated in one keyframe cycle, so the browser can interpolate
   them; the sun and moon ride one rotating arm (a transform), stars and the lamp's night glow fade in by opacity.
   The manual sits on paper pinned to the bench, which keeps its own light. Reduced motion stops it at noon.
   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; }

/* the sky: two colours that the browser can tween, because they're registered */
@property --sky-top { syntax: "<color>"; inherits: false; initial-value: #4f9be0; }
@property --sky-low { syntax: "<color>"; inherits: false; initial-value: #cfe7fb; }
@property --haze { syntax: "<color>"; inherits: false; initial-value: rgb(255 248 220 / 0); }

:root {
  color-scheme: light;
  --paper: #fbf6ea;
  --paper-2: #f3ead6;
  --ink: #221c14;
  --dim: #5a4e3c;
  --wood: #6e4a2c;
  --wood-dark: #3e2816;
  --brass: #c79a3a;
  --accent: #9a3d14;
  --focus: #1f5fa8;
  --head: "Archivo Black", "Arial Black", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { overflow-x: clip; background: #22324f; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { min-width: 320px; margin: 0; color: var(--ink); font: 17px/1.65 Georgia, "Iowan Old Style", "Times New Roman", serif; background: transparent; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); }
:where(a, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 3px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 15px Arial, sans-serif; text-decoration: none; }
.skip:focus { top: 12px; }
.main:focus { outline: none; }

/* ---------------------------------------------------------------- the scene: four fixed layers behind the page */
.extra { position: fixed; z-index: 0; pointer-events: none; }
/* 1. the window: the sky through four panes, with mullions and a wooden frame */
.extra-1 {
  inset: 0;
  background: linear-gradient(var(--sky-top), var(--sky-low) 70%, var(--sky-low));
  animation: sky 120s linear infinite;
}
.extra-1::before { /* stars, out at night */
  content: ""; position: absolute; inset: 0 0 30% 0; opacity: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent 100%),
    radial-gradient(1px 1px at 27% 9%, #fff, transparent 100%),
    radial-gradient(1.5px 1.5px at 41% 26%, #fff, transparent 100%),
    radial-gradient(1px 1px at 58% 12%, #fff, transparent 100%),
    radial-gradient(2px 2px at 73% 22%, #fffbe0, transparent 100%),
    radial-gradient(1px 1px at 86% 8%, #fff, transparent 100%),
    radial-gradient(1px 1px at 93% 31%, #fff, transparent 100%),
    radial-gradient(1.5px 1.5px at 6% 38%, #fff, transparent 100%),
    radial-gradient(1px 1px at 33% 40%, #fff, transparent 100%),
    radial-gradient(1px 1px at 66% 36%, #fff, transparent 100%);
  animation: stars 120s linear infinite;
}
.extra-1::after { /* the frame and the cross of the window */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 9px), #5b3b20 calc(50% - 9px) calc(50% + 9px), transparent calc(50% + 9px)),
    linear-gradient(transparent calc(42% - 9px), #5b3b20 calc(42% - 9px) calc(42% + 9px), transparent calc(42% + 9px)),
    linear-gradient(90deg, rgb(255 255 255 / .10), transparent 30%, transparent 70%, rgb(0 0 0 / .08));
  box-shadow: inset 0 0 0 22px #6b4626, inset 0 0 0 26px #3d2614, inset 0 0 90px rgb(0 0 0 / .35);
}
/* 2. the sun and the moon on one arm that turns once a cycle */
.extra-2 {
  left: 76%; bottom: -8vh; width: 0; height: 0;
  rotate: -80deg;
  animation: arc 120s linear infinite;
}
.extra-2::before, .extra-2::after { content: ""; position: absolute; border-radius: 50%; }
.extra-2::before { /* the sun */
  width: 110px; height: 110px; left: -55px; top: calc(-78vh - 55px);
  background: radial-gradient(circle, #fffbe6 0 38%, #ffe27a 52%, rgb(255 210 90 / .45) 64%, transparent 72%);
}
.extra-2::after { /* the moon, opposite */
  width: 70px; height: 70px; left: -35px; top: calc(78vh - 35px);
  background: radial-gradient(circle at 36% 36%, #fffef4 0 50%, #e6e2cf 62%, transparent 70%);
  box-shadow: 0 0 40px 10px rgb(230 235 255 / .25);
}
/* 3. the bench along the bottom, with the lamp on it */
.extra-3 {
  left: 0; right: 0; bottom: 0; height: 15vh;
  background:
    linear-gradient(#8a5e38, #6e4a2c 18%, #5a3b22 60%, #3e2816),
    var(--wood);
  box-shadow: 0 -6px 18px rgb(0 0 0 / .25);
}
.extra-3::before { /* the grain */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(178deg, transparent 0 9px, rgb(0 0 0 / .08) 9px 10px, transparent 10px 23px);
}
.extra-3::after { /* the lamp: brass font, glass chimney, flame */
  content: ""; position: absolute; right: 7vw; bottom: 70%; width: 84px; height: 150px;
  background:
    radial-gradient(ellipse 7px 17px at 50% 34%, #fffbe8 0 30%, #ffd54a 55%, #ff8a1f 80%, transparent 84%),
    radial-gradient(ellipse 30px 46px at 50% 38%, rgb(220 235 245 / .35) 0 90%, transparent 93%),
    radial-gradient(ellipse 22px 6px at 50% 66%, #e8c46a 0 80%, transparent 85%),
    radial-gradient(ellipse 40px 28px at 50% 84%, #f3d27a 0 20%, #c8952f 55%, #7c5512 88%, transparent 92%);
}
/* 4. the lamp's glow: always on, but you only see it once the sun's gone */
.extra-4 {
  right: calc(7vw - 220px); bottom: calc(15vh - 120px); width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 205 110 / .7), rgb(255 180 80 / .28) 35%, transparent 68%);
  opacity: .12;
  animation: glow 120s linear infinite;
}

/* one day, two minutes: dawn, morning, noon, afternoon, dusk, night, night, dawn */
@keyframes sky {
  0%   { --sky-top: #2e3d72; --sky-low: #f2a679; }
  10%  { --sky-top: #5d8fd0; --sky-low: #f6d3a8; }
  25%  { --sky-top: #3f8fe0; --sky-low: #cfe7fb; }
  40%  { --sky-top: #4f9be0; --sky-low: #d8ecfb; }
  52%  { --sky-top: #5b5fa8; --sky-low: #f7a46b; }
  60%  { --sky-top: #24224f; --sky-low: #b0577a; }
  68%  { --sky-top: #070b1e; --sky-low: #18203f; }
  90%  { --sky-top: #070b1e; --sky-low: #1b2547; }
  100% { --sky-top: #2e3d72; --sky-low: #f2a679; }
}
@keyframes stars { 0%, 55% { opacity: 0; } 66%, 90% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes arc { from { rotate: -80deg; } to { rotate: 280deg; } }
@keyframes glow { 0%, 10% { opacity: .35; } 25%, 48% { opacity: .1; } 62%, 92% { opacity: 1; } 100% { opacity: .35; } }

/* reduced motion: noon, still */
@media (prefers-reduced-motion: reduce) {
  .extra-1, .extra-1::before, .extra-2, .extra-4 { animation: none; }
  .extra-2 { rotate: 8deg; }
}

/* ---------------------------------------------------------------- the manual, pinned up on paper */
.page { position: relative; z-index: 1; max-width: 760px; margin: 0 0 0 max(16px, 7vw); padding: 0 0 22vh; }
.site-head, .title-block, .contents, .chapter, .outfits, .site-foot {
  position: relative; margin: 22px 0 0; padding: 22px 26px; border-radius: 4px;
  background: linear-gradient(var(--paper), var(--paper-2));
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 14px 30px rgb(0 0 0 / .28), 0 2px 4px rgb(0 0 0 / .2);
}
/* a drawing pin on each sheet */
.title-block::before, .chapter::before, .outfits::before {
  content: ""; position: absolute; top: 9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9a7a, #b1301a 60%, #6b1408);
  box-shadow: 0 3px 4px rgb(0 0 0 / .35);
}
.chapter:nth-child(odd) { rotate: -.4deg; }
.chapter:nth-child(even) { rotate: .35deg; }

.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin-top: 18px; padding: 12px 20px; }
.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 #cbbd9e; 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; }

.title-block { padding-top: 34px; }
.edition { margin: 0; color: var(--dim); font: italic 15px Georgia, serif; }
h1, h2 { margin: 0; font-family: var(--head); font-weight: 1000; font-synthesis: none; line-height: 1.04; letter-spacing: -.02em; }
.title { margin-top: 6px; font-size: clamp(42px, 7vw, 84px); color: #2a2016; }
.subtitle { margin: 12px 0 0; max-width: 36ch; font-size: 20px; color: var(--dim); }

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

.chapter { padding-top: 32px; }
.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%; background: var(--wood-dark); color: #fbe9b8; font-size: .7em; vertical-align: .12em; }
.chapter-body > :first-child { margin-top: 14px; }
.first { font-size: 19px; }
.plate { margin: 20px 0 6px; padding: 10px 10px 6px; background: #fff; box-shadow: 0 6px 16px rgb(0 0 0 / .25); rotate: 1deg; }
.plate img { display: block; width: 100%; }
.plate figcaption { margin-top: 6px; color: var(--dim); font: italic 14px Georgia, serif; }
.tools { padding-left: 1.1em; }
.tools li { margin: 6px 0; }
.note { margin: 18px 0; padding: 14px 18px; border-left: 5px solid var(--accent); background: #fff1d9; }
.note p { margin: 0; }
.rules { padding-left: 1.4em; }
.rules li { margin: 8px 0; }
.saying { margin: 22px 0 0; padding: 0 0 0 18px; border-left: 3px solid var(--brass); }
.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 #d8c9a8; text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--ink); font-family: Arial, sans-serif; font-size: 13px; }
.hazards { display: grid; gap: 10px; margin: 0; }
.hazard { padding: 10px 14px; background: #fff8ea; border: 1px solid #e0d1b0; }
.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; background: #fffaf0; border: 1px solid #e0d1b0; font-size: 14px; }
.outfit-link { display: inline-block; padding: 2px 0; font-weight: 700; }
.outfit-by, .outfit-note, .outfit-technique { display: none; }
#th-daynight { background: #2a2016; border-color: #2a2016; }
#th-daynight .outfit-link { color: #ffe39a; }
#th-daynight .outfit-link::after { content: " · the light is changing"; color: #f3e6c8; font-weight: 400; }

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

@media (max-width: 720px) {
  .page { margin: 0 12px; padding-bottom: 18vh; }
  .site-head, .title-block, .contents, .chapter, .outfits, .site-foot { padding: 18px 16px; }
  .title-block, .chapter, .outfits { padding-top: 32px; }
  .chapter:nth-child(n) { rotate: 0deg; }
  .extra-3::after { right: 4vw; scale: .8; transform-origin: bottom; }
}

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