@font-face {
  font-family: "Garamond delle parti";
  src: local("Garamond Bold"), url("/fonts/eb-garamond-bold-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #233443;
  --paper: #faf6ed;
  --gold: #957643;
  --rule: #d5c9b5;
  --serif: Garamond, Baskerville, Georgia, serif;
  --sans: "Instrument Sans", "Segoe UI", Arial, sans-serif;
  --sidebar: clamp(190px, 18vw, 258px);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.5 var(--sans); }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #b28a4d; outline-offset: 4px; }
.visually-hidden, .skip:not(:focus) {
  position: absolute; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%);
}
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 10; padding: 10px; background: white; }
header { background: var(--ink); color: #fbf7ef; padding: 44px 24px; }
.wordmark { display: flex; flex-direction: column; gap: 20px; text-decoration: none; font: 600 23px/1.2 var(--serif); }
.linkmark { position: relative; display: block; width: 25px; height: 27px; color: #dcc396; }
.linkmark::before, .linkmark::after {
  content: ""; position: absolute; width: 8px; height: 15px; border: 1.5px solid;
  border-radius: 999px; transform: rotate(38deg);
}
.linkmark::before { top: 0; left: 11px; }
.linkmark::after { top: 10px; left: 4px; }
nav { display: flex; flex-direction: column; margin-top: 48px; }
nav a { padding-block: 12px; text-decoration: none; border-bottom: 1px solid #ffffff25; font-size: 15px; }
nav a[aria-current="page"] { color: #f7ddac; font-weight: 700; }
nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.menu-button { border: 1px solid #75818a; background: transparent; color: inherit; padding: 6px 14px; border-radius: 3px; }
@media (min-width: 900px) {
  header { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); overflow-y: auto; }
  main { margin-left: var(--sidebar); }
}
.frontispiece {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100svh; padding: clamp(26px,5vh,60px) 6vw; gap: clamp(25px,5vh,60px);
  background: radial-gradient(ellipse at 50% 35%, #fffcf7, #f4eddd 85%);
}
.cover-stage { text-align: center; line-height: 0; }
.cover-button { padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.cover-button img {
  display: block; width: auto; height: auto; max-height: min(64svh,630px); max-width: 75vw;
  box-shadow: 2px 3px 6px #342b2029, 10px 17px 30px #35261129;
}
.opening-quote { font: italic clamp(23px,2.5vw,39px)/1.25 var(--serif); text-align: center; margin: 0; text-wrap: balance; }
.book-page { max-width: 53rem; margin-inline: auto; padding: clamp(38px,7vw,94px) clamp(22px,5vw,74px); }
.book-page h1 { font: 400 clamp(39px,4.9vw,66px)/1.08 var(--serif); letter-spacing: -.04em; margin: 0 0 .7em; }
.book-page p { font: 400 clamp(19px,1.55vw,23px)/1.65 var(--serif); margin: 0 0 1em; }
.book-page .chapter-label { font: 600 14px/1.4 var(--sans); color: #736049; margin-bottom: .8rem; }
.index-page { max-width: 49rem; }
.parts-list { padding: 0; margin: 2.5rem 0 0; list-style: none; }
.parts-list li {
  display: flex; align-items: baseline; gap: .65em; margin-bottom: 1.1em;
  font: 700 18pt/1.2 "Garamond delle parti", Garamond, Georgia, serif;
}
.parts-list span { flex: none; }
.parts-list li::before { content: ""; order: 1; flex: 1; border-bottom: 2px dotted #ab9d86; }
.parts-list strong { order: 2; font-size: 14pt; font-weight: 700; text-align: right; }
.facts { margin: 2rem 0; }
.facts div { display: flex; flex-wrap: wrap; gap: 5px 15px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { flex: 0 0 125px; font-size: 14px; }
.facts dd { margin: 0; font: 20px/1.3 var(--serif); }
.materials { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; text-underline-offset: 4px; }
dialog { max-width: 96vw; max-height: 96dvh; padding: 12px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
dialog::backdrop { background: #172028d9; }
dialog img { display: block; max-height: 79dvh; max-width: 84vw; }
.close { display: block; margin: 10px 0 0 auto; padding: 5px 12px; border: 1px solid var(--rule); background: transparent; color: inherit; }
@media (max-width: 899px) {
  header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 5%; }
  .wordmark { flex-direction: row; align-items: center; gap: 7px; font-size: 19px; }
  nav { width: 100%; margin-top: 0; }
  nav a { padding: 11px 4px; }
  .frontispiece { min-height: calc(100svh - 64px); gap: 25px; padding: 28px 6vw; }
  .cover-button img { max-height: 58svh; max-width: 76vw; }
  .parts-list li { gap: .35em; }
}