@import url('/assets/fonts/fonts.css');
:root { color-scheme: light; --paper: #e8dcc2; --ink: #352d26; --muted: #695d4e; --line: #b6a183; --accent: #79553a; --slate: #4d6265; --body: "IM Fell English", Georgia, serif; --title: "Uncial Antiqua", Georgia, serif; --small: "IM Fell English SC", Georgia, serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 25px; background: var(--paper); }
body { margin: 0; color: var(--ink); background-color: var(--paper); background-image: url('/assets/realm/parchment.webp'); background-size: 900px auto; font: 400 19px/1.85 var(--body); -webkit-font-smoothing: antialiased; }
::selection { background: #bfa383; color: #2e261e; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--slate); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--slate); outline-offset: 5px; }
body > header, body > main, body > footer { width: min(1040px, calc(100% - 64px)); margin-inline: auto; }
body > header { min-height: 98px; display: flex; align-items: center; border-bottom: 3px double var(--line); font: 400 20px/1.6 var(--title); }
body > header a { color: var(--ink); }
article { max-width: 750px; margin-inline: auto; padding-bottom: 35px; }
article > header { padding-block: 47px 31px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
article > header .eyebrow { font: 400 17px/1.7 var(--small); color: var(--slate); letter-spacing: .025em; text-transform: none; margin: 0 0 21px; }
h1 { font: 400 clamp(26px, 3.1vw, 34px)/1.5 var(--title); letter-spacing: 0; margin: 0 0 22px; text-wrap: balance; }
article > header p:not(.eyebrow) { color: var(--muted); font: 400 17px/1.75 var(--body); margin: 0; }
article > header p:last-child { margin-top: 18px; color: var(--accent); font-family: var(--small); font-size: 19px; }
h2 { color: var(--ink); font: 400 26px/1.5 var(--title); letter-spacing: 0; margin: 37px 0 19px; text-wrap: balance; }
section p { color: var(--ink); font: 400 19px/1.85 var(--body); margin: 0 0 21px; overflow-wrap: break-word; }
section strong { font-weight: 400; color: var(--accent); }
section a { color: var(--accent); }
section:first-of-type { border-bottom: 1px solid var(--line); padding-bottom: 15px; margin-bottom: 34px; }
section:first-of-type h2 { font: 400 20px/1.6 var(--small); color: var(--slate); margin-top: 0; }
section:first-of-type p { font-size: 20px; line-height: 1.85; }
.references { margin-top: 45px; border-top: 3px double var(--line); padding-top: 3px; }
.references ol { padding-left: 25px; }
.references li { color: var(--muted); font: 400 17px/1.8 var(--body); margin: 0 0 16px; padding-left: 6px; overflow-wrap: anywhere; }
.references li::marker { color: var(--accent); }
body > footer { padding-block: 25px 38px; border-top: 3px double var(--line); color: var(--accent); font: 400 18px/1.7 var(--small); }
@media (max-width: 680px) {
  body > header, body > main, body > footer { width: calc(100% - 40px); }
  body > header { min-height: 87px; font-size: 19px; }
  article > header { padding-block: 31px 26px; margin-bottom: 28px; }
  h1 { font-size: 27px; line-height: 1.5; }
  h2 { font-size: 24px; line-height: 1.55; margin-top: 31px; }
  article > header .eyebrow { font-size: 16px; }
  section p { font-size: 19px; line-height: 1.85; }
  section:first-of-type p { font-size: 20px; }
  .references li { font-size: 17px; }
}
@media (max-width: 380px) { h1 { font-size: 25px; } h2 { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Illustrated chapter treatment; meaningful status and source text stays visible. */
a, a:hover, a:focus, a:active { text-decoration: none !important; }
.eyebrow { display: none !important; }
article > header { display: flow-root; }
.chapter-vignette { float: right; width: 184px; height: 123px; object-fit: cover; object-position: center; margin: 0 0 23px 26px; border: 1px solid #9d825d; border-radius: 0; box-shadow: none; }
article > header::after { content: ""; clear: both; display: block; width: 250px; max-width: 75%; height: 42px; margin: 25px 0 0; background: url('/assets/realm/ornament.webp') center / contain no-repeat; }
body > footer::before { content: ""; display: block; width: 170px; height: 30px; margin: 0 0 16px; background: url('/assets/realm/ornament.webp') center / contain no-repeat; }
.lost-page article { min-height: 56vh; }
@media (max-width: 680px) { .chapter-vignette { float: none; width: 165px; height: 110px; margin: 0 0 24px auto; } article > header::after { width: 215px; height: 36px; } }