/* Wound daily — @property and conic gradients. A pocket-watch face drawn with conic and radial gradients in the
   .extra boxes: enamel dial, minute track, brass case. Its hand turns because @property registers --hand as an
   <angle>, so the browser can interpolate it; under reduced motion it stands still.
   Designed by machine for the Slopwright. */
@property --hand { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --storm { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root {
  color-scheme: light;
  --brass: #b08a3e;
  --brass-hi: #f1d79a;
  --brass-lo: #6b4f1a;
  --enamel: #fbf8ef;
  --ink: #1c1a16;
  --blue: #1d3f8f;
  --dial: min(420px, 80vw);
  --serif: Didot, "Bodoni MT", "Bodoni 72", Georgia, serif;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { min-width: 320px; margin: 0; color: var(--ink); font: 17px/1.6 Georgia, "Times New Roman", serif;
  background: radial-gradient(circle at 50% 0%, #fffaf0, #efe5cc 60%, #e2d3ae); }
a { color: var(--blue); text-underline-offset: 3px; }
:where(a, [tabindex]):focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; top: -80px; left: 8px; z-index: 10; padding: 8px 14px; background: var(--ink); color: var(--enamel); }
.skip:focus { top: 8px; }
.page { position: relative; max-width: 900px; margin: auto; padding: 0 20px; }
.main:focus { outline: none; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.1; }

/* the watch, at the top of the page: case, dial, track, hand, and the hurricane inside */
.extra { position: absolute; left: 50%; pointer-events: none; }
.extra-1 { /* the bow and crown */
  top: 108px; width: 64px; height: 64px; margin-left: -32px; border: 10px solid var(--brass); border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--brass-lo), 0 0 0 2px var(--brass-lo);
}
.extra-2 { /* case and dial */
  top: 160px; width: var(--dial); aspect-ratio: 1; margin-left: calc(var(--dial) / -2); border-radius: 50%;
  background:
    radial-gradient(circle, var(--ink) 0 3.2%, transparent 3.4%),
    radial-gradient(circle, var(--enamel) 0 62%, transparent 62.3%) content-box,
    repeating-conic-gradient(from -1deg, var(--ink) 0 2deg, transparent 2deg 30deg) content-box,
    repeating-conic-gradient(from -.3deg, rgba(28,26,22,.55) 0 .6deg, transparent .6deg 6deg) content-box,
    radial-gradient(circle, var(--enamel) 0 76%, transparent 76.3%) content-box,
    conic-gradient(var(--brass-hi), var(--brass), var(--brass-lo), var(--brass), var(--brass-hi), var(--brass), var(--brass-lo), var(--brass), var(--brass-hi));
  padding: 22px;
  -webkit-mask: radial-gradient(circle, #000 70.5%, transparent 70.8%); mask: radial-gradient(circle, #000 70.5%, transparent 70.8%);
  box-shadow: 0 18px 40px rgba(60, 40, 0, .35);
}
.extra-3 { /* the storm in the middle of the dial */
  top: calc(160px + var(--dial) * .3); width: calc(var(--dial) * .4); aspect-ratio: 1; margin-left: calc(var(--dial) * -.2); border-radius: 50%;
  background: repeating-conic-gradient(from var(--storm), rgba(29, 63, 143, .0) 0 20deg, rgba(29, 63, 143, .22) 40deg, rgba(29,63,143,0) 60deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
  animation: storm 9s linear infinite;
}
.extra-4 { /* the hand */
  top: calc(160px + var(--dial) * .14); width: 6px; height: calc(var(--dial) * .36); margin-left: -3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(var(--blue), var(--blue)) ;
  transform-origin: 50% 100%; transform: rotate(var(--hand));
  animation: tick 60s steps(60) infinite;
}
@keyframes tick { to { --hand: 360deg; } }
@keyframes storm { to { --storm: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .extra-3, .extra-4 { animation: none; }
  .extra-4 { --hand: 300deg; }
}

.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 22px; padding: 22px 0 14px; border-bottom: 3px double var(--brass-lo); }
.masthead { display: flex; align-items: center; gap: 14px; }
.masthead .brand { display: flex; align-items: center; min-height: 40px; }
.masthead .brand img { display: block; height: 24px; width: auto; }
.site-name { display: inline-flex; align-items: center; min-height: 40px; padding-left: 14px; border-left: 1px solid var(--brass-lo); color: var(--ink); font-family: var(--serif); font-size: 18px; text-decoration: none; letter-spacing: .1em; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 15px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); }

.title-block { padding-top: calc(var(--dial) + 120px); text-align: center; }
.edition { margin: 0; font-style: italic; color: #5a4a2a; }
.title { margin: 8px 0; font-size: clamp(40px, 7vw, 76px); letter-spacing: .04em; }
.subtitle { max-width: 34ch; margin: 0 auto; font-style: italic; }

.contents { margin: 40px auto; padding: 22px 26px; max-width: 640px; border-radius: 999px; background: var(--enamel); box-shadow: 0 0 0 4px var(--brass), 0 0 0 6px var(--brass-lo); text-align: center; }
.contents-title { font-size: 14px; letter-spacing: .3em; text-transform: uppercase; font-family: Georgia, serif; }
.contents-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: c; }
.contents-list li { counter-increment: c; }
.contents-list a { display: inline-block; min-height: 30px; color: var(--ink); }
.contents-list a::before { content: counter(c, upper-roman) " "; color: var(--blue); }

.chapter { margin: 0 0 32px; padding: 30px 34px; border-radius: 24px; background: var(--enamel); box-shadow: inset 0 0 0 1px rgba(107, 79, 26, .3), 0 0 0 5px var(--brass), 0 0 0 7px var(--brass-lo), 0 10px 24px rgba(60, 40, 0, .2); scroll-margin-top: 16px; }
.chapter-title { margin-bottom: 14px; font-size: clamp(26px, 4vw, 36px); }
.chapter-num { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: .4em; border: 2px solid var(--blue); border-radius: 50%; color: var(--blue); font-size: .7em; }
.chapter-body { max-width: 64ch; }
.plate { margin: 22px 0; }
.plate img { display: block; width: 100%; border-radius: 50% / 12%; border: 4px solid var(--brass); }
.plate figcaption { margin-top: 8px; font-style: italic; text-align: center; color: #5a4a2a; }
.tools li::marker, .rules li::marker { color: var(--blue); }
.rules { list-style: upper-roman; }
.tools li, .rules li { margin: 6px 0; }
.note { margin: 20px 0; padding: 14px 18px; border-radius: 12px; border: 2px solid var(--blue); }
.note p { margin: 0; }
.saying { margin: 24px 0 0; font-family: var(--serif); font-size: 24px; font-style: italic; text-align: center; }
.saying p { margin: 0; }
.saying footer { font-family: Georgia, serif; font-size: 14px; font-style: normal; color: #5a4a2a; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { padding-bottom: 8px; font-style: italic; }
th, td { padding: 8px 10px; border-bottom: 1px solid #d6c79f; text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--brass-lo); }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0; }
.hazard { padding: 14px 16px; border-radius: 14px; background: #f3ecd9; }
.hazard dt { font-weight: 700; color: var(--blue); }
.hazard dd { margin: 4px 0 0; font-size: 15px; }
.glossary dt { font-weight: 700; color: var(--blue); }
.glossary dd { margin: 0 0 10px 1.5em; }

.outfits { margin: 40px 0; padding: 30px 34px; border-radius: 24px; background: var(--enamel); box-shadow: 0 0 0 5px var(--brass), 0 0 0 7px var(--brass-lo); }
.outfits-title { font-size: clamp(26px, 4vw, 34px); text-align: center; }
.outfits-lede { text-align: center; font-style: italic; }
.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 solid #e3d8bb; font-size: 14px; }
.outfit-link { display: inline-block; min-height: 26px; font-weight: 700; font-size: 16px; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; font-style: italic; }
#th-pocketwatch { padding: 10px 14px; border-radius: 999px; background: var(--blue); color: var(--enamel); }
#th-pocketwatch .outfit-link { color: #fff; }
#th-pocketwatch .outfit-link::before { content: "⌚ wearing: "; font-weight: 400; }

.site-foot { padding: 18px 0 48px; border-top: 3px double var(--brass-lo); font-size: 14px; text-align: center; }
.site-foot p { margin: 4px 0; }

@media (max-width: 600px) {
  .chapter, .outfits { padding: 24px 18px; }
  .contents { border-radius: 24px; }
  .extra-1 { top: 140px; }
  .extra-2 { top: 192px; }
  .extra-3 { top: calc(192px + var(--dial) * .3); }
  .extra-4 { top: calc(192px + var(--dial) * .14); }
  .title-block { padding-top: calc(var(--dial) + 100px); }
}

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