/* Curtain up — view timelines. The walnut theatre with the house lights down. The front of house (the masthead, the
   title and the contents) plays in front of the closed curtain; when the first chapter scrolls into view, the two
   halves of the curtain draw apart on a named view() timeline, the footlights come up and the painted set behind
   them (the Slopwright's bench under the lamp) is revealed. The chapters are lit cards standing on that stage.
   Everything is gradients: velvet folds from repeating-linear-gradient, the fringe from a mask, the set from radial
   and conic gradients. Without scroll timelines (Firefox, today) the curtain is simply open; under reduced motion it
   is open and nothing moves.
   Designed by machine for the Slopwright. */
@property --rise { syntax: "<number>"; inherits: false; initial-value: 1; }
:root {
  color-scheme: dark;
  --velvet: #7a1020;
  --velvet-hi: #b3243a;
  --velvet-lo: #2c040b;
  --gilt: #e9c46f;
  --gilt-lo: #8f6721;
  --house: #0d0507;
  --card: #150b0a;
  --card-ink: #f4e7c9;
  --card-soft: #d9c6a0;
  --link: #ffd98a;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --open: 88%;
}
* { box-sizing: border-box; }
html { overflow-x: clip; background: var(--house); timeline-scope: --welcome; }
body {
  min-width: 320px; margin: 0; color: var(--card-ink); font: 18px/1.62 var(--serif);
  background: var(--house);
}
a { color: var(--link); text-underline-offset: 3px; }
:where(a, [tabindex]):focus-visible { outline: 3px solid var(--gilt); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; top: -80px; left: 8px; z-index: 60; padding: 8px 14px; background: var(--gilt); color: #1b0d05; }
.skip:focus { top: 8px; }
.main:focus { outline: none; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.08; }
.page { position: relative; z-index: 5; max-width: 860px; margin: auto; padding: 0 22px; }

/* ------------------------------------------------------------------ the theatre, back to front
   .extra-3  the painted set: the bench, the lamp's pool of light, the shelf of containers (behind everything)
   .extra-1  the left half of the house curtain   .extra-2  the right half
   body::before  the pelmet and its gilt fringe     .extra-4  the footlights along the front of the stage
   body::after   the proscenium arch, framing it all */
.extra { position: fixed; pointer-events: none; }
.extra-3 {
  inset: 0; z-index: 0;
  background:
    /* the lamp's pool of light on the backcloth */
    radial-gradient(ellipse 34% 40% at 64% 46%, rgb(255 214 130 / .55), rgb(255 170 80 / .16) 55%, transparent 75%),
    /* the lamp: a glass chimney and a flame */
    radial-gradient(ellipse 7px 16px at 64% 46%, #fffbe8 0 30%, #ffc94a 60%, transparent 66%),
    radial-gradient(ellipse 34px 52px at 64% 47%, rgb(255 255 255 / .22) 0 60%, transparent 63%),
    radial-gradient(ellipse 60px 34px at 64% 60%, #e2b356, #9b6c1c 70%, transparent 72%),
    /* three containers on a painted shelf: a tin, a walnut, a watch */
    radial-gradient(ellipse 52px 22px at 22% 30%, #c9ced6 0 60%, #7c818a 62%, transparent 66%),
    radial-gradient(ellipse 30px 24px at 32% 30%, #8a5a2b 0 70%, transparent 73%),
    radial-gradient(circle at 41% 29%, #f4ead2 0 12px, #b88a2e 13px 17px, transparent 18px),
    linear-gradient(#4a2c18, #2b1709) 0 calc(30% + 22px) / 100% 12px no-repeat,
    /* the bench top and its front edge */
    linear-gradient(#5b3b22, #3a2312) 0 66% / 100% 34% no-repeat,
    linear-gradient(#7a5332, #5b3b22) 0 calc(66% - 10px) / 100% 12px no-repeat,
    /* the backcloth: a dim workshop wall */
    repeating-linear-gradient(90deg, rgb(0 0 0 / .18) 0 2px, transparent 2px 120px),
    linear-gradient(#2a1c16, #1b110d 60%, #120a08);
}
.extra-1, .extra-2 {
  top: 0; bottom: 0; z-index: 2; width: 52vw;
  background:
    linear-gradient(180deg, rgb(0 0 0 / .45), transparent 14%, transparent 80%, rgb(0 0 0 / .35)),
    repeating-linear-gradient(90deg, var(--velvet-lo) 0 4px, var(--velvet) 16px, var(--velvet-hi) 25px, var(--velvet) 34px, var(--velvet-lo) 46px);
  box-shadow: 0 0 60px rgb(0 0 0 / .8);
  will-change: transform;
}
.extra-1 { left: 0; transform-origin: 0 0; transform: translateX(calc(var(--open) * -1)); border-bottom-right-radius: 60% 6%; }
.extra-2 { right: 0; transform-origin: 100% 0; transform: translateX(var(--open)); border-bottom-left-radius: 60% 6%; }
/* a tie-back on each curtain, so the open curtain reads as gathered */
.extra-1::after, .extra-2::after {
  content: ""; position: absolute; top: 58%; width: 26px; height: 54px; border-radius: 40%;
  background: radial-gradient(circle at 40% 35%, #fff1c2, var(--gilt) 40%, var(--gilt-lo) 75%);
  box-shadow: 0 4px 10px rgb(0 0 0 / .6);
}
.extra-1::after { right: 4px; } .extra-2::after { left: 4px; }
.extra-4 {
  left: 0; right: 0; bottom: 0; z-index: 3; height: 120px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%, rgb(255 205 120 / .32), transparent 72%),
    radial-gradient(circle at 50% 100%, #fff4cf 0 5px, rgb(255 210 120 / .7) 6px, transparent 14px) 0 100% / 90px 26px repeat-x,
    linear-gradient(transparent 92px, #1a0c08 92px);
  opacity: var(--rise);
  transform: translateY(calc((1 - var(--rise)) * 40px));
}
body::before {
  content: ""; position: fixed; z-index: 4; top: 0; left: 0; right: 0; height: 34px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--gilt) 0 2px, var(--gilt-lo) 2px 5px) 0 24px / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--velvet-lo) 0 6px, var(--velvet) 20px, var(--velvet-lo) 34px);
  -webkit-mask: linear-gradient(#000 0 24px, transparent 24px), repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 5px);
  mask: linear-gradient(#000 0 24px, transparent 24px), repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 5px);
}
body::after {
  content: ""; position: fixed; z-index: 4; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #3a2410, var(--gilt-lo) 6px, #3a2410 12px, transparent 12px) left / 12px 100% no-repeat,
    linear-gradient(270deg, #3a2410, var(--gilt-lo) 6px, #3a2410 12px, transparent 12px) right / 12px 100% no-repeat;
}

/* ------------------------------------------------------------------ the curtain call: scroll-driven */
@supports (animation-timeline: view()) {
  #welcome { view-timeline: --welcome block; }
  @media (prefers-reduced-motion: no-preference) {
    /* closed while you read the front of house; drawn apart as the first chapter comes up from the bottom */
    .extra-1 { animation: draw-left linear both; animation-timeline: --welcome; animation-range: entry 0% cover 45%; }
    .extra-2 { animation: draw-right linear both; animation-timeline: --welcome; animation-range: entry 0% cover 45%; }
    .extra-4 { animation: footlights linear both; animation-timeline: --welcome; animation-range: entry 10% cover 40%; }
  }
}
@keyframes draw-left { from { transform: translateX(0); } to { transform: translateX(calc(var(--open) * -1)); } }
@keyframes draw-right { from { transform: translateX(0); } to { transform: translateX(var(--open)); } }
@keyframes footlights { from { --rise: .15; } to { --rise: 1; } }

/* ambient: the lamp on the painted set breathes, and a follow-spot drifts across the front of house */
.extra-3::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 30% 36% at 64% 46%, rgb(255 220 150 / .35), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .extra-3::after { animation: breathe 3.6s ease-in-out infinite alternate; }
  .extra-4::before {
    content: ""; position: absolute; left: 50%; bottom: 60px; width: 70vw; height: 70vh; translate: -50% 0;
    background: radial-gradient(ellipse 30% 40% at 50% 60%, rgb(255 236 190 / .10), transparent 70%);
    animation: follow-spot 14s ease-in-out infinite alternate;
  }
}
@keyframes breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes follow-spot { from { transform: translateX(-18vw); } to { transform: translateX(18vw); } }

/* ------------------------------------------------------------------ front of house: plays in front of the curtain */
.site-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px;
  margin: 48px 0 0; padding: 10px 18px; border: 1px solid var(--gilt-lo); border-radius: 999px;
  background: rgb(13 5 7 / .92); box-shadow: 0 10px 30px rgb(0 0 0 / .5);
}
.masthead { display: flex; align-items: center; gap: 12px; }
.masthead .brand { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px; border-radius: 999px; background: var(--card-ink); }
.masthead .brand img { display: block; height: 22px; width: auto; }
.site-name { display: inline-flex; align-items: center; min-height: 40px; padding-left: 12px; border-left: 1px solid var(--gilt-lo); color: var(--gilt); font-weight: 700; letter-spacing: .12em; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 15px; font-style: italic; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--card-ink); }

.title-block {
  margin: 12vh auto 0; max-width: 680px; padding: 40px 30px 36px; text-align: center;
  border: 2px solid var(--gilt); border-radius: 50% 50% 14px 14px / 70px 70px 14px 14px;
  background: radial-gradient(ellipse at 50% 0%, #2a1309, #120705 70%);
  box-shadow: 0 0 0 6px #1a0905, 0 0 0 8px var(--gilt-lo), 0 30px 80px rgb(0 0 0 / .7);
}
.edition { margin: 0; color: var(--card-soft); font-style: italic; letter-spacing: .1em; }
.edition::before, .edition::after { content: " ✦ "; color: var(--gilt); }
.title {
  margin: 12px 0; font-size: clamp(40px, 7.4vw, 84px); letter-spacing: .02em; color: var(--gilt);
  text-shadow: 0 1px 0 #fff3c4, 0 2px 0 #b8892e, 0 3px 0 #7a5418, 0 8px 18px rgb(0 0 0 / .8), 0 0 40px rgb(255 200 90 / .3);
}
.subtitle { max-width: 34ch; margin: 0 auto; color: var(--card-ink); font-size: 20px; font-style: italic; }
.contents {
  margin: 28px auto 46vh; max-width: 680px; padding: 18px 24px; text-align: center;
  border-radius: 12px; background: rgb(13 5 7 / .92); border: 1px solid var(--gilt-lo);
}
.contents-title { font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--gilt); }
.contents-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.contents-list li + li::before { content: "·"; margin: 0 8px; color: var(--gilt-lo); }
.contents-list a { display: inline-flex; align-items: center; min-height: 32px; font-style: italic; }

/* ------------------------------------------------------------------ the play: chapters as lit cards on the stage */
.chapter, .outfits {
  position: relative; margin: 0 0 34px; padding: 30px 34px;
  border-radius: 8px; background: var(--card);
  box-shadow: inset 0 0 0 1px rgb(233 196 111 / .45), 0 -24px 60px -20px rgb(255 214 140 / .25), 0 30px 60px rgb(0 0 0 / .65);
  scroll-margin-top: 60px;
}
.chapter::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gilt), transparent);
}
.chapter-title { margin-bottom: 16px; text-align: center; font-size: clamp(26px, 4vw, 38px); color: var(--gilt); }
.chapter-num { display: block; margin-bottom: 4px; color: var(--card-soft); font-size: 13px; letter-spacing: .32em; text-transform: uppercase; }
.chapter-num::before { content: "Scene "; }
.chapter-body { max-width: 62ch; margin: auto; }
.first { font-size: 20px; }
.first::first-line { font-variant: small-caps; letter-spacing: .03em; }
.plate { margin: 24px 0 0; padding: 8px; border: 1px solid var(--gilt-lo); border-radius: 6px; background: #0b0504; }
.plate img { display: block; width: 100%; border-radius: 3px; filter: sepia(.25) contrast(1.05); }
.plate figcaption { margin-top: 8px; color: var(--card-soft); font-style: italic; text-align: center; }
.tools, .rules { padding-left: 1.4em; }
.tools li::marker { content: "✦  "; color: var(--gilt); }
.rules li::marker { color: var(--gilt); font-weight: 700; }
.tools li, .rules li { margin: 8px 0; }
b, strong { color: #fff3d6; }
.note { margin: 20px 0; padding: 14px 18px; border-left: 4px solid var(--gilt); background: #24110a; }
.note p { margin: 0; }
.saying { margin: 26px 0 0; text-align: center; font-size: 24px; font-style: italic; color: var(--gilt); }
.saying p { margin: 0; }
.saying footer { margin-top: 6px; color: var(--card-soft); font-size: 14px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
caption { padding-bottom: 8px; color: var(--card-soft); font-style: italic; }
th, td { padding: 8px 10px; border-bottom: 1px solid #4a3220; text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--gilt-lo); color: var(--gilt); font-variant: small-caps; letter-spacing: .05em; }
tbody th { color: #fff3d6; }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; }
.hazard { padding: 14px; border: 1px solid #4a3220; border-radius: 6px; background: #1d0e0a; }
.hazard dt { color: var(--gilt); font-weight: 700; font-variant: small-caps; font-size: 19px; }
.hazard dd { margin: 4px 0 0; font-size: 16px; }
.glossary dt { color: var(--gilt); font-weight: 700; font-variant: small-caps; }
.glossary dd { margin: 0 0 10px 1.5em; }
.sign-off { text-align: center; font-style: italic; }

.outfits-title { text-align: center; font-size: clamp(24px, 4vw, 34px); color: var(--gilt); }
.outfits-lede { text-align: center; font-style: italic; color: var(--card-soft); }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.outfit { padding: 8px 0; border-bottom: 1px dotted #4a3220; font-size: 15px; }
.outfit-link { display: inline-flex; align-items: center; min-height: 28px; font-weight: 700; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; color: var(--card-soft); font-size: 14px; font-style: italic; }
#th-curtain { padding: 10px 12px; border: 1px solid var(--gilt); border-radius: 6px; background: #2a0c10; }
#th-curtain .outfit-link::before { content: "Tonight: "; color: var(--card-ink); font-weight: 400; font-style: italic; }
#th-curtain .outfit-note { display: block; font-size: 14px; }

.site-foot { position: relative; z-index: 5; max-width: 760px; margin: 0 auto 150px; padding: 18px 22px; border-radius: 10px; background: rgb(13 5 7 / .92); color: var(--card-soft); text-align: center; font-size: 15px; }
.site-foot p { margin: 4px 0; }

/* phones: a narrower stage; the curtain still parts, but its open halves are just a hand's width */
@media (max-width: 700px) {
  :root { --open: 92%; }
  .page { padding: 0 16px; }
  .site-head { margin-top: 42px; border-radius: 16px; }
  .title-block { margin-top: 6vh; padding: 30px 18px; border-radius: 40% 40% 12px 12px / 46px 46px 12px 12px; }
  .chapter, .outfits { padding: 24px 18px; }
  .extra-1::after, .extra-2::after { display: none; }
  .extra-4 { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .extra-1, .extra-2, .extra-4, .extra-3::after { 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; } }