@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; src: url('fonts/EBGaramond-Regular.ttf') format('truetype'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; src: url('fonts/EBGaramond-Italic.ttf') format('truetype'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; src: url('fonts/EBGaramond-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 600; src: url('fonts/EBGaramond-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Tangerine'; font-style: normal; font-weight: 700; src: url('fonts/Tangerine-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Homemade Apple'; font-style: normal; font-weight: 400; src: url('fonts/HomemadeApple-Regular.ttf') format('truetype'); }

@page { size: A4 portrait; margin: 0; }
:root {
  --ink: #140c08;
  --ink-soft: rgba(20, 12, 8, 0.88);
  --gall: #5a2a12;
  --oxblood: #8f1410;
  --gold: #c9a24a;
  --paper: #e6d3ae;
  --night: #0c0806;
  --rule: #8a4e1c;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 12pt/1.48 'EB Garamond', 'Times New Roman', serif;
  font-optical-sizing: auto;
}
main { width: 210mm; margin: 0 auto; counter-reset: folio; }
.download-bar { width: 210mm; margin: 0 auto; padding: 10px 22mm; background: var(--night); text-align: right; }
.download-bar a { color: #e4cf9f; font: 600 11pt 'EB Garamond', serif; text-decoration: none; border-bottom: 1px solid var(--rule); }

.entry {
  min-height: 297mm;
  height: 297mm;
  max-height: 297mm;
  break-after: page;
  page-break-after: always;
  break-inside: avoid;
  page-break-inside: avoid;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  position: relative;
  overflow: hidden;
  padding: 22mm 21mm 16mm 23mm;
  background-color: var(--paper);
  background-image: url('textures/paper-rag.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: inset 8mm 0 16mm -12mm rgba(20, 8, 2, 0.28);
  counter-increment: folio;
  color: var(--ink);
}
.veil {
  position: absolute;
  inset: 0;
  background:
    url('textures/soot-edge.jpg') center / cover no-repeat,
    url('textures/paper-500.jpg') center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 72% 76% at 34% 30%, transparent 48%, rgba(0,0,0,0.22) 68%, #000 92%);
  -webkit-mask-image: radial-gradient(ellipse 72% 76% at 34% 30%, transparent 48%, rgba(0,0,0,0.22) 68%, #000 92%);
  pointer-events: none;
  z-index: 0;
}
.entry::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}
.entry[data-hand="wizard"]::before {
  background-image: url('textures/overlay-wizard.jpg');
  opacity: 0.48;
  mask-image: radial-gradient(ellipse 70% 72% at 34% 32%, transparent 46%, #000 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 34% 32%, transparent 46%, #000 78%);
}
.entry[data-hand="witch"]::before {
  background-image: url('textures/overlay-witch.jpg');
  opacity: 0.42;
  mask-image: radial-gradient(ellipse 70% 72% at 34% 32%, transparent 46%, #000 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 34% 32%, transparent 46%, #000 78%);
}
.entry[data-hand="inherit"]::before {
  background-image: url('textures/overlay-inherit.jpg');
  opacity: 0.38;
  mask-image: radial-gradient(ellipse 70% 72% at 36% 34%, transparent 48%, #000 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 36% 34%, transparent 48%, #000 80%);
}
.entry[data-hand="water"]::before {
  background-image: url('textures/overlay-water.jpg');
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 70% 70% at 36% 30%, transparent 46%, #000 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 36% 30%, transparent 46%, #000 80%);
}
.dress {
  position: absolute;
  left: 52%;
  right: 0;
  bottom: 0;
  height: 44%;
  background: url('textures/dress-gold.jpg') right bottom / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.62;
  pointer-events: none;
  z-index: 0;
}
.entry--text .dress { left: 38%; }
.entry:nth-child(3n) .dress { opacity: 0.74; }
.entry:nth-child(4n) .dress { opacity: 0.48; transform: scaleX(-1); transform-origin: right center; }

.entry__text, .portrait { position: relative; z-index: 1; }
.entry__text {
  color: var(--ink);
  background: radial-gradient(ellipse at 40% 8%, rgba(247, 233, 204, 0.78) 0%, rgba(247, 233, 204, 0.58) 62%, rgba(247, 233, 204, 0.16) 100%);
  padding: 1mm 2.5mm 3mm 1.5mm;
}
.running-head {
  position: absolute;
  top: 9mm;
  left: 24mm;
  right: 24mm;
  margin: 0;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 9pt;
  letter-spacing: 0.38em;
  text-transform: lowercase;
  color: rgba(90, 48, 18, 0.55);
  z-index: 2;
}
.entry::after {
  content: counter(folio, decimal-leading-zero);
  position: absolute;
  bottom: 9mm;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: 9pt;
  letter-spacing: 0.32em;
  color: rgba(90, 40, 12, 0.5);
  z-index: 2;
  pointer-events: none;
}

.entry--spread { display: block; }
.entry--spread .entry__text { width: 83mm; min-width: 0; }

h1, h2, h3 {
  color: var(--oxblood);
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  font-style: italic;
  line-height: 1.12;
  text-wrap: balance;
  text-shadow: 0.45px 0.3px 0 rgba(120, 20, 8, 0.35);
}
h1 { margin: 2mm 0 8mm; font-size: 26pt; letter-spacing: 0.01em; }
h2 { margin: 4mm 0 3.5mm; font-size: 16.5pt; }
h3 { margin: 6mm 0 3mm; font-size: 13pt; }
p { margin: 0 0 2.7mm; hyphens: auto; text-align: justify; }
ul, ol { margin: 0 0 3mm; padding-left: 7mm; }
li { margin-bottom: 1.2mm; }
hr {
  border: 0;
  height: 8mm;
  margin: 6mm 0 2mm;
  background: url('textures/pentacle-ink.jpg') center / 11mm no-repeat;
  opacity: 0.4;
  mix-blend-mode: multiply;
}

.entry__text h2 + p::first-letter,
#introduction-aux-elements .entry__text > p:nth-of-type(3)::first-letter {
  float: left;
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  font-style: italic;
  font-size: 2.7em;
  line-height: 0.8;
  padding: 0.02em 0.05em 0 0;
  margin: 0 0.04em 0 0;
  color: var(--oxblood);
}

#introduction-aux-elements .entry__text > p:nth-of-type(1) {
  margin: 6mm 0 1.5mm;
  font-size: 10pt;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  font-style: italic;
  text-align: left;
  color: var(--gall);
}
#introduction-aux-elements .entry__text > p:nth-of-type(2) {
  margin: 0 0 5mm;
  font-size: 20pt;
  line-height: 1.08;
  font-style: italic;
  font-weight: 600;
  text-align: left;
  color: var(--oxblood);
  text-shadow: 0.4px 0.3px 0 rgba(120, 20, 8, 0.35);
}

pre, code {
  font-family: 'EB Garamond', serif;
  font-style: italic;
}
pre {
  margin: 5mm 0;
  padding: 4mm 5mm;
  white-space: pre-wrap;
  background: rgba(80, 30, 8, 0.1);
  border-top: 1px solid rgba(120, 50, 16, 0.4);
  border-bottom: 1px solid rgba(120, 50, 16, 0.4);
  font-size: 11pt;
  line-height: 1.45;
  color: #1a0c08;
}
p code {
  display: block;
  margin: 3mm 0 4mm;
  padding: 3mm 0 3mm 4mm;
  border-left: 1px solid rgba(163, 22, 18, 0.55);
  font-style: italic;
  font-size: 11pt;
  line-height: 1.42;
  color: #4a100c;
  background: transparent;
}
blockquote {
  margin: 5mm 0;
  padding: 1mm 0 1mm 5mm;
  border-left: 1px solid rgba(120, 50, 16, 0.5);
  font-style: italic;
  color: var(--gall);
}

.portrait {
  position: absolute;
  top: 24mm;
  right: 16mm;
  width: 72mm;
  margin: 0;
  padding: 4mm 4mm 8mm;
  background: #1a1008;
  box-shadow:
    1.2mm 1.4mm 0 var(--gold),
    5px 8px 18px rgba(10, 4, 0, 0.5);
  transform: rotate(-0.65deg);
  break-inside: avoid;
  page-break-inside: avoid;
  z-index: 2;
}
.entry:nth-child(even) .portrait { transform: rotate(0.55deg); }
.entry:nth-child(3n) .portrait { transform: rotate(-1.15deg); }
.portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  filter: sepia(0.28) contrast(1.12) saturate(1.15);
}
.portrait figcaption {
  padding-top: 2.4mm;
  color: var(--gold);
  font-family: Tangerine, 'EB Garamond', cursive;
  font-size: 16pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: none;
}

.ornament { display: none; }

.trace {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  line-height: 1.05;
  white-space: nowrap;
}
.trace--wizard {
  font-family: Tangerine, cursive;
  font-size: 22pt;
  font-weight: 700;
  color: var(--gold);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  left: 6.5mm;
  top: 38mm;
  max-height: 120mm;
  opacity: 0.78;
  text-shadow: 0 0 1px rgba(20, 8, 0, 0.4);
}
.trace--witch {
  font-family: 'Homemade Apple', cursive;
  font-size: 13.5pt;
  color: #c41c14;
  top: 252mm;
  left: auto;
  right: 16mm;
  max-width: 58mm;
  white-space: normal;
  text-align: right;
  transform: rotate(var(--rot, -4deg));
  opacity: 0.82;
}

.seal {
  position: absolute;
  top: 6mm;
  right: 7mm;
  width: 21mm;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.96;
  transform: rotate(8deg);
  z-index: 3;
  pointer-events: none;
  background: transparent;
}
.entry:nth-child(even) .seal { transform: rotate(-11deg); top: 8mm; right: 10mm; }
.sigil {
  position: absolute;
  right: 18mm;
  top: 232mm;
  width: 28mm;
  mix-blend-mode: multiply;
  opacity: 0.38;
  transform: rotate(-6deg);
  z-index: 1;
  pointer-events: none;
}

@media screen {
  body { padding: 28px 0 48px; }
  .entry {
    box-shadow:
      inset 8mm 0 16mm -12mm rgba(20, 8, 2, 0.28),
      0 18px 48px rgba(0, 0, 0, 0.55);
    margin-bottom: 28px;
  }
}
@media print {
  .download-bar { display: none; }
  body, html { background: #fff; }
  .entry { box-shadow: inset 8mm 0 16mm -12mm rgba(20, 8, 2, 0.28); }
}
@media screen and (max-width: 800px) {
  body { padding: 0; }
  .entry, main { width: 100%; min-height: 100vh; }
  .entry { padding: 16mm 14mm 18mm; }
  .entry--spread .entry__text { width: auto; }
  .portrait { position: static; max-width: 58%; margin: 0 0 5mm 5mm; float: right; }
  .trace, .seal, .sigil, .running-head, .veil, .dress { display: none; }
}