/* Medieval parchment theme — readable but old-worldly */
:root{
  --paper: #f5edd6;
  --paper-ink: #2f261c;
  --ink-muted: #5a4a3a;
  --edge: #c7b98b;
  --accent: #7a0b0b;
  --maxw: 1000px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  color:var(--paper-ink);
  background:
    radial-gradient(1200px 600px at 10% 20%, rgba(255,255,255,.25), rgba(255,255,255,0)),
    radial-gradient(800px 400px at 90% 10%, rgba(0,0,0,.06), rgba(0,0,0,0)),
    linear-gradient(180deg, #efe6c9, #f5edd6 60%, #efe6c9);
  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  line-height: 1.55;
}

/* Containers & parchment cards */
.container{max-width:var(--maxw); padding:1.25rem; margin:0 auto}
.parchment{
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 2px, rgba(0,0,0,0.02) 2px 4px),
              linear-gradient(180deg, #fbf5df, #efe4c4);
  border: 1px solid var(--edge);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 0 0 1px rgba(0,0,0,.04),
    0 10px 30px rgba(0,0,0,.08);
}

/* Header */
.site-header{padding: 1rem 0 0.25rem; position: sticky; top: 0; z-index: 5; backdrop-filter:saturate(140%) blur(2px)}
.site-header .title{
  font-family:"UnifrakturCook", serif;
  letter-spacing:1px;
  font-size: clamp(32px, 5vw, 56px);
  text-align:center;
  margin: .5rem 0 0;
}
.subtitle{ text-align:center; margin:.25rem 0 1rem; color:var(--ink-muted) }
.decor-left,.decor-right{color:var(--accent); opacity:.85}

/* nav */
.toc{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:center; padding-bottom:.5rem; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
.toc a{
  text-decoration:none;
  color:var(--paper-ink);
  padding:.35rem .6rem;
  border:1px solid rgba(0,0,0,.1);
  border-radius:999px;
  background:rgba(255,255,255,.4);
}
.toc a:hover{ background:rgba(255,255,255,.8) }

/* Sections */
.block{ margin: 1.25rem auto }
h2{
  font-family:"UnifrakturCook", serif;
  font-size: clamp(28px, 4vw, 42px);
  margin:0 0 .5rem 0;
}
h3{ font-size: 1.25rem; margin:.5rem 0; }

.dropcap::first-letter{
  font-family:"UnifrakturCook", serif;
  float:left;
  font-size:3.2rem;
  line-height:.85;
  padding:.05rem .4rem 0 0;
  color:var(--accent);
}

figure{ margin:1rem 0; }
figure.wide img{ width:100%; display:block; border-radius:10px; border:1px solid var(--edge); }
figcaption{ font-size:.95rem; color:var(--ink-muted); margin-top:.25rem }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}
.card{
  background:linear-gradient(180deg, #faf3db, #efe4c4);
  border:1px solid var(--edge);
  border-radius:10px;
  padding: .75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.card img{ width:100%; border-radius:8px; border:1px solid var(--edge); display:block; }

.list{ padding-left:1.2rem }
.list li{ margin:.4rem 0 }

.bestiary article{ margin:.6rem 0 }

.timeline{
  margin:0;
  padding-left:1.1rem;
}
.timeline li{ padding:.25rem 0 }
.timeline time{
  font-weight:700;
  font-variant-numeric: oldstyle-nums;
}

/* Footer */
.site-footer{ text-align:center; color:var(--ink-muted); padding:2rem 1rem; }

/* Small helpers */
a{ color: var(--accent); }
img{ max-width:100%; height:auto }