/* DragonVale Games — fantasy RPG scroll / illuminated manuscript aesthetic */
:root {
  --parchment: #f4ead0;
  --parchment-2: #ede0b3;
  --ink: #2a1a06;
  --ink-soft: #5a4220;
  --crimson: #7a1b1b;
  --emerald: #2d5a3d;
  --gold: #b8932a;
  --serif: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  --body: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--parchment); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.7;
  background-image: radial-gradient(ellipse at 0% 0%, rgba(122,27,27,0.04) 0, transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(184,147,42,0.06) 0, transparent 50%);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--crimson); text-decoration: none; }
a:hover { color: var(--ink); }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 700px; margin: 0 auto; padding: 0 32px; }

/* Decorative border frame */
.frame {
  border: 2px solid var(--ink); padding: 32px;
  background: var(--parchment);
  box-shadow: inset 0 0 0 4px var(--parchment), inset 0 0 0 5px var(--gold);
  margin: 32px 0;
}

/* Header — scroll banner */
header.top { display: flex; justify-content: space-between; align-items: center; padding: 40px 0; border-bottom: 4px double var(--ink); gap: 16px; flex-wrap: wrap; }
.crest { display: flex; align-items: center; gap: 16px; }
.crest-shield { width: 48px; height: 56px; background: var(--crimson); position: relative; clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%); display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; color: var(--gold); font-family: var(--serif); font-size: 24px; font-weight: 700; }
.crest-name { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: 0.16em; text-transform: uppercase; }
.crest-name .sub { display: block; font-family: var(--body); font-style: italic; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); margin-top: 4px; text-transform: none; }
nav.scroll-nav a { margin-left: 28px; font-family: var(--serif); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
nav.scroll-nav a:hover { color: var(--crimson); }

/* Hero */
.hero { padding: 72px 0; text-align: center; }
.hero .arms { font-size: 48px; color: var(--gold); margin-bottom: 12px; }
.hero h1 { font-family: var(--serif); font-size: clamp(40px, 6vw, 72px); font-weight: 700; letter-spacing: 0.04em; line-height: 1.15; margin: 0 0 24px; text-transform: uppercase; }
.hero h1 em { font-style: italic; color: var(--crimson); text-transform: none; letter-spacing: 0; }
.hero p.lead { font-family: var(--body); font-size: 22px; max-width: 580px; margin: 0 auto; font-style: italic; color: var(--ink-soft); }
.hero .ornament { text-align: center; margin-top: 32px; color: var(--gold); font-family: var(--serif); letter-spacing: 0.5em; }

/* Sections */
section.tome { padding: 64px 0; border-top: 1px solid var(--ink); }
.tome-eyebrow { font-family: var(--serif); font-size: 13px; letter-spacing: 0.3em; color: var(--gold); text-transform: uppercase; margin-bottom: 14px; text-align: center; }
section h2 { font-family: var(--serif); font-size: clamp(32px, 4.5vw, 56px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; margin: 0 0 24px; line-height: 1.15; }
section h2 em { font-style: italic; color: var(--crimson); letter-spacing: 0; text-transform: none; }
section p.tome-sub { text-align: center; font-style: italic; max-width: 580px; margin: 0 auto 40px; color: var(--ink-soft); font-size: 19px; }

/* Codex list */
.codex { list-style: none; padding: 0; margin: 0; }
.codex li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px dotted var(--ink); }
.codex li:last-child { border-bottom: 1px solid var(--ink); }
.codex li .roman { font-family: var(--serif); color: var(--gold); font-size: 16px; min-width: 64px; letter-spacing: 0.1em; }
.codex li .title { font-family: var(--body); font-size: 22px; flex: 1; }
.codex li .title em { font-style: italic; color: var(--crimson); }
.codex li .meta { font-family: var(--serif); font-size: 12px; letter-spacing: 0.18em; color: var(--ink-soft); text-transform: uppercase; }

/* Manifesto block */
.lore { background: var(--ink); color: var(--parchment); padding: 56px; text-align: center; margin: 48px 0; }
.lore h2 { color: var(--parchment); }
.lore p { font-family: var(--body); font-style: italic; font-size: 22px; line-height: 1.6; max-width: 600px; margin: 0 auto; }

/* Contact scroll */
.scroll-foot { background: var(--parchment-2); padding: 56px 40px; text-align: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 48px 0; }
.scroll-foot h3 { font-family: var(--serif); font-size: 32px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 12px; }
.scroll-foot a.mail { font-family: var(--body); font-size: 24px; font-style: italic; }

footer.foot { padding: 40px 0; text-align: center; color: var(--ink-soft); font-family: var(--serif); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
footer.foot a { color: var(--crimson); margin: 0 8px; }

/* Legal */
.legal-page { padding: 32px 0 80px; }
.legal-page .legal-eyebrow { font-family: var(--serif); font-size: 13px; letter-spacing: 0.3em; color: var(--gold); text-transform: uppercase; text-align: center; margin-bottom: 14px; }
.legal-page h1 { font-family: var(--serif); font-size: clamp(36px, 5.5vw, 64px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; margin: 0 0 16px; }
.legal-page .back-link { display: block; text-align: center; font-family: var(--body); font-style: italic; font-size: 16px; margin-bottom: 32px; }
.legal-page .legal-body { font-family: var(--body); font-size: 17px; line-height: 1.75; border-top: 1px solid var(--ink); padding-top: 32px; }
.legal-page .legal-body h2, .legal-page .legal-body h3, .legal-page .legal-body h4 { font-family: var(--serif); color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 2em 0 0.6em; }
.legal-page .legal-body h2 { font-size: 22px; color: var(--crimson); }
.legal-page .legal-body h3 { font-size: 18px; }
.legal-page .legal-body h4 { font-size: 16px; }
.legal-page .legal-body p { margin: 0 0 1em; }
.legal-page .legal-body strong { color: var(--crimson); }
.legal-page .legal-body a { border-bottom: 1px solid var(--gold); }
.legal-page .legal-body ul, .legal-page .legal-body ol { padding-left: 1.6em; margin: 0 0 1em; }
.legal-page .legal-body li { margin-bottom: 0.4em; }
.legal-page .legal-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14px; border: 2px solid var(--ink); }
.legal-page .legal-body th, .legal-page .legal-body td { border: 1px solid var(--ink); padding: 10px 12px; vertical-align: top; text-align: left; }
.legal-page .legal-body th { background: var(--parchment-2); font-family: var(--serif); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }