/* ==========================================================
   Parapet: A Fourth Wing Fanlisting
   Change the colours here and they update everywhere.
   ========================================================== */
:root {
  --black:      #0a0806;
  --panel:      #120e0a;
  --gold:       #d4af37;
  --gold-light: #f0d98a;
  --gold-dark:  #8a6d1f;
  --scarlet:    #9c2a1c;   /* rider red */
  --text:       #e8dcc0;
  --muted:      #a89a78;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--black) radial-gradient(ellipse at top, #1a1209 0%, var(--black) 60%) no-repeat;
  color: var(--text);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  line-height: 1.7;
}

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--gold-light); }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
  --d: clamp(280px, 38vw, 400px);   /* diameter of the medallion; the title scales with it */
  position: relative;
  height: calc(var(--d) + 36px);
  overflow: hidden;
  border-bottom: 2px solid var(--gold);
}
.header-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Dragon parts (colours can be overridden per dragon in header.php) */
.dragon-body  { fill: var(--dfill, #0b0907); stroke: var(--dstroke, #d4af37); stroke-width: .8; stroke-opacity: .85; stroke-linejoin: round; }
.dragon-wing  { fill: var(--wfill, #18110a); fill-opacity: .93; stroke: var(--dstroke, #d4af37); stroke-width: .8; stroke-opacity: .85; stroke-linejoin: round; }
.dragon-bone  { fill: none; stroke: var(--dstroke, #d4af37); stroke-width: .9; stroke-opacity: .8; stroke-linecap: round; }
.dragon-bone.thick { stroke-width: 2.2; }
.dragon-spine { fill: var(--dstroke, #d4af37); fill-opacity: .55; stroke: none; }
.dragon-plates { fill: none; stroke: var(--dstroke, #d4af37); stroke-width: .8; stroke-opacity: .55; stroke-dasharray: 1.4 2.4; }
.cloud { fill: #160e07; stroke: #d4af37; stroke-width: 1; stroke-opacity: .5; stroke-linejoin: round; }
.cloud-curl { fill: none; stroke: #d4af37; stroke-width: .9; stroke-opacity: .5; stroke-linecap: round; }
.dragon-eye   { fill: #ffd25a; }

.header-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.9));
}
/* Cover-style medallion sits behind the title and centres on it */
.medallion {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--d);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.header-title h1 {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: calc(var(--d) * .19);
  line-height: 1;
  letter-spacing: .08em;
  padding-left: .08em; /* balances the letter-spacing so the word looks centred */
}
/* Gold-foil lettering, like the book cover */
.header-title h1 a {
  color: var(--gold);
  background: linear-gradient(180deg, #fbefb8 0%, #e6c35a 42%, #9a7a22 52%, #f0d98a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}
.subtitle {
  margin: .6rem 0 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: calc(var(--d) * .047);
  letter-spacing: .16em;
  color: var(--gold-light);
}

/* One slow drift on the dragons; switched off if the visitor prefers less motion */
.drift-a { animation: drift 16s ease-in-out infinite alternate; }
.drift-b { animation: drift 20s ease-in-out infinite alternate-reverse; }
.drift-c { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-14px, -8px); } }
@media (prefers-reduced-motion: reduce) { .drift-a, .drift-b, .drift-c { animation: none; } }

@media (max-width: 640px) {
  .site-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%); }
  .header-title { z-index: 1; }
}

/* ---------- Menu ---------- */
.site-nav {
  background: #050403;
  border-bottom: 1px solid var(--gold-dark);
}
.site-nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0 .5rem;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.site-nav a {
  display: block;
  padding: .85rem 1.15rem;
  font-family: "Cinzel", Georgia, serif;
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold-light); border-bottom-color: var(--gold-dark); }
.site-nav a.current { color: var(--gold); border-bottom-color: var(--scarlet); }

/* ---------- Content (single column) ---------- */
.content {
  max-width: 760px;
  margin: 2rem auto;
  padding: 2rem clamp(1.1rem, 4vw, 2.5rem) 2.5rem;
  background: var(--panel);
  border: 1px solid var(--gold-dark);
  box-shadow: 0 0 0 4px var(--black), 0 0 0 5px var(--gold-dark);
}
@media (max-width: 800px) { .content { margin: 1rem .6rem; box-shadow: none; } }

.content h2, .content h3 { font-family: "Cinzel", Georgia, serif; color: var(--gold); line-height: 1.25; }
.content h2 {
  margin: 0 0 1.2rem;
  padding-bottom: .6rem;
  font-size: 1.7rem;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--gold-dark);
}
.content h3 { margin: 2rem 0 .5rem; font-size: 1.2rem; letter-spacing: .04em; }
.content p { margin: 0 0 1.1rem; }
.content ul, .content ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
.content li { margin-bottom: .4rem; }
.content li::marker { color: var(--gold); }
.content blockquote {
  margin: 1.5rem 0; padding: .2rem 1.2rem;
  border-left: 3px solid var(--scarlet);
  font-style: italic; color: var(--gold-light);
}

/* Dagger divider: use <hr> between sections */
hr {
  border: 0;
  height: 44px;
  margin: 1.8rem 0;
  background: url(images/dagger-divider.svg) center / contain no-repeat;
}

/* ---------- Forms, tables and code boxes (for the Fanatically script) ---------- */
label { display: block; margin: 1rem 0 .25rem; color: var(--gold-light); }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], select, textarea {
  width: 100%;
  padding: .6rem .75rem;
  background: #0a0806;
  color: var(--text);
  border: 1px solid var(--gold-dark);
  font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold-light); outline: none; box-shadow: 0 0 0 2px rgba(212,175,55,.35); }
textarea { min-height: 7rem; font-family: Consolas, Menlo, monospace; font-size: .95rem; }
input[type="submit"], button, .button {
  margin-top: 1.2rem;
  padding: .6rem 1.6rem;
  background: var(--gold);
  color: #0a0806;
  border: 0;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}
input[type="submit"]:hover, button:hover, .button:hover { background: var(--gold-light); }

.content table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; }
.content th { text-align: left; font-family: "Cinzel", Georgia, serif; color: var(--gold); border-bottom: 2px solid var(--gold-dark); padding: .5rem; }
.content td { padding: .5rem; border-bottom: 1px solid #2a2015; }
.content tr:hover td { background: #1a140d; }

.stats { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: .8rem 1rem; margin: 1.5rem 0; border: 1px solid var(--gold-dark); background: #0d0a07; }
.stats span { color: var(--muted); }
.stats strong { color: var(--gold-light); font-weight: 500; }

.affiliates { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.affiliates img { display: block; border: 1px solid var(--gold-dark); }

/* ---------- Footer ---------- */
.site-footer { max-width: 760px; margin: 0 auto; padding: 0 1rem 2.5rem; text-align: center; font-size: .95rem; color: var(--muted); }
.site-footer p { margin: 0 0 .8rem; }