/* Illuminated — the manual as a vellum manuscript: red rubrics, versal capitals from ::first-letter, old-style
   figures, text-wrap: pretty for the paragraphs and margins wide enough for notes.
   Designed by machine for the Slopwright. */
:root {
  color-scheme: light;
  --vellum: #f3e7c9;
  --vellum-deep: #e8d6aa;
  --ink: #2a1d10;
  --rubric: #9b1c12;
  --gold: #76540b;
  --blue: #1f3a78;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  min-width: 320px; margin: 0; color: var(--ink);
  font: 19px/1.65 var(--serif); font-variant-numeric: oldstyle-nums proportional-nums;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 80, 20, .18) 100%),
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .35), transparent 40%),
    var(--vellum);
  background-attachment: fixed;
}
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rubric); }
:where(a, [tabindex]):focus-visible { outline: 3px solid var(--rubric); outline-offset: 4px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
p, li, dd { text-wrap: pretty; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 8px 16px; background: var(--rubric); color: #fff; }
.skip:focus { top: 12px; }
.extra { display: none; }
.page {
  max-width: 980px; margin: 0 auto; padding: 0 clamp(18px, 7vw, 110px);
  border-inline: 1px solid rgba(138, 100, 16, .35);
  box-shadow: inset 0 0 0 6px var(--vellum), inset 0 0 0 7px rgba(138, 100, 16, .3);
}
.main:focus { outline: none; }

/* masthead, inked lightly */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding: 26px 0 14px; border-bottom: 3px double var(--gold); }
.masthead { display: flex; align-items: center; }
.masthead .brand { display: flex; align-items: center; min-height: 40px; }
.masthead .brand img { display: block; height: 26px; width: auto; filter: sepia(.6); }
.site-name { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--gold); color: var(--rubric); font-variant: small-caps; font-size: 20px; font-weight: 700; letter-spacing: .08em; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 18px; font-variant: small-caps; letter-spacing: .05em; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--rubric); text-decoration: underline; }

/* title page */
.title-block { padding: 56px 0 30px; text-align: center; }
.edition { margin: 0; color: var(--rubric); font-variant: small-caps; letter-spacing: .2em; font-size: 16px; }
.edition::before, .edition::after { content: " ❦ "; color: var(--gold); }
.title { margin: 14px 0 0; font-size: clamp(42px, 8vw, 84px); font-weight: 400; line-height: 1.05; letter-spacing: .01em; }
.title::first-letter { float: none; color: var(--rubric); font-size: 1.25em; }
.subtitle { max-width: 30em; margin: 18px auto 0; font-style: italic; font-size: 21px; }
.title-block::after { content: "✠"; display: block; margin-top: 24px; color: var(--gold); font-size: 26px; }

.contents { margin: 0 auto 20px; max-width: 34em; padding: 22px 26px; border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: 4px; background: rgba(255, 250, 235, .5); }
.contents-title { margin: 0 0 8px; color: var(--rubric); font-size: 22px; font-weight: 400; font-variant: small-caps; letter-spacing: .1em; text-align: center; }
.contents-list { margin: 0; padding: 0; list-style: none; counter-reset: c; }
.contents-list li { counter-increment: c; display: flex; gap: 10px; }
.contents-list li::before { content: counter(c, lower-roman) "."; min-width: 2.2em; color: var(--rubric); font-style: italic; text-align: right; }
.contents-list a { display: inline-block; padding: 2px 0; }

/* chapters */
.chapter { padding: 30px 0 18px; }
.chapter-title { margin: 0 0 14px; text-align: center; font-weight: 400; font-size: clamp(26px, 4vw, 36px); color: var(--rubric); line-height: 1.15; }
.chapter-num { display: block; font-size: 16px; color: var(--gold); font-variant: small-caps; letter-spacing: .25em; }
.chapter-num::before { content: "Caput "; }
.chapter-body { max-width: 36em; margin: 0 auto; }
.chapter-body p { margin: 0 0 .9em; hyphens: auto; }
.first::first-letter {
  float: left; margin: .06em .12em 0 0; padding: .02em .12em;
  font-size: 3.6em; line-height: .85; color: var(--rubric);
  background: radial-gradient(circle, #fff6dc 55%, #f6e3b0); border: 3px double var(--gold); box-shadow: inset 0 0 0 2px var(--blue);
}
.first::first-line { font-variant: small-caps; letter-spacing: .04em; }
.chapter + .chapter::before { content: "❧"; display: block; text-align: center; color: var(--gold); font-size: 24px; margin-bottom: 10px; }
.plate { margin: 26px 0; padding: 12px; border: 1px solid var(--gold); background: var(--vellum-deep); }
.plate img { display: block; width: 100%; filter: sepia(.35) contrast(1.05); }
.plate figcaption { margin-top: 8px; font-style: italic; text-align: center; font-size: 17px; }
q { font-style: italic; }
.tools { padding-left: 1.4em; list-style: "☙ "; }
.tools li::marker { color: var(--rubric); }
.tools li { margin-bottom: .4em; }
.tools b, .rules b, .hazard dt, .glossary dt { color: var(--rubric); font-weight: 700; }
.note { margin: 20px 0; padding: 14px 20px; border-left: 4px solid var(--rubric); background: rgba(155, 28, 18, .07); font-style: italic; }
.note p { margin: 0; }
.note strong { color: var(--rubric); font-style: normal; font-variant: small-caps; letter-spacing: .05em; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 17px; }
caption { caption-side: top; padding-bottom: 6px; color: var(--rubric); font-style: italic; }
th, td { padding: 8px 10px; border-bottom: 1px solid rgba(138, 100, 16, .45); text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--gold); font-variant: small-caps; letter-spacing: .05em; color: var(--rubric); }
tbody th { font-weight: 400; font-style: italic; }
.rules { padding-left: 2em; list-style: upper-roman; }
.rules li { margin-bottom: .5em; }
.rules li::marker { color: var(--rubric); }
.saying { margin: 26px 0 0; text-align: center; font-size: 23px; font-style: italic; }
.saying p { margin: 0; }
.saying p::before { content: "“"; color: var(--rubric); } .saying p::after { content: "”"; color: var(--rubric); }
.saying footer { font-size: 16px; font-style: normal; font-variant: small-caps; letter-spacing: .1em; color: var(--gold); }
.saying footer::before { content: "— "; }
.hazards { margin: 0; }
.hazard { margin-bottom: .8em; }
.hazard dd, .glossary dd { margin: 0 0 0 1.4em; }
.glossary dd { margin-bottom: .5em; }
.sign-off { margin-top: 1.4em; text-align: center; font-style: italic; }

/* the other outfits */
.outfits { margin-top: 30px; padding: 30px 0; border-top: 3px double var(--gold); }
.outfits-title { text-align: center; color: var(--rubric); font-weight: 400; font-size: clamp(26px, 4vw, 34px); }
.outfits-lede { max-width: 34em; margin: 10px auto 20px; text-align: center; font-style: italic; }
.outfit-list { columns: 2 260px; column-gap: 40px; column-rule: 1px solid rgba(138, 100, 16, .4); margin: 0; padding: 0 0 0 1.6em; list-style: lower-roman; }
.outfit { break-inside: avoid; margin-bottom: .5em; }
.outfit::marker { color: var(--rubric); }
.outfit-link { font-weight: 700; }
.outfit-by, .outfit-technique, .outfit-note { display: none; }
#th-manuscript { margin-left: -1.6em; padding: 10px 12px 10px 1.6em; border: 1px solid var(--gold); background: rgba(155, 28, 18, .08); list-style: none; }
#th-manuscript .outfit-link { color: var(--rubric); }
#th-manuscript .outfit-link::before { content: "☞ "; }
#th-manuscript .outfit-technique { display: inline; font-style: italic; }
#th-manuscript .outfit-by { display: block; font-size: 16px; font-variant: small-caps; letter-spacing: .05em; }
#th-manuscript .outfit-technique::before { content: "Now worn. "; color: var(--rubric); font-style: normal; font-variant: small-caps; }

.site-foot { padding: 24px 0 50px; border-top: 3px double var(--gold); text-align: center; font-size: 16px; }
.site-foot p { margin: 0 0 8px; }
.made { font-variant: small-caps; letter-spacing: .05em; }

@media (max-width: 600px) {
  body { font-size: 18px; }
  .page { border: 0; box-shadow: none; }
  .contents { padding: 16px; }
}

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