@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Cinzel+Decorative:wght@700;900&display=swap");

:root {
  color-scheme: light;
  --bg: #f7f1df;
  --panel: #fffaf0;
  --ink: #23170f;
  --muted: #715f4f;
  --line: #d9c8a8;
  --accent: #b86516;
  --accent-2: #1f6b68;
  --gold: #f5b21f;
  --danger: #9f2f1d;
  --success: #27734d;
  --shadow: 0 18px 50px rgba(55, 34, 16, 0.16);
  --display-font: "Cinzel", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --text-font: "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(247, 241, 223, .92), rgba(247, 241, 223, .92)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='%23d2b47a' fill-opacity='.22' d='M0 0h120v120H0z'/%3E%3Cpath fill='none' stroke='%238c6b3f' stroke-opacity='.22' d='M0 18h120M0 54h120M0 92h120M20 0v120M61 0v120M101 0v120'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--text-font);
}
a { color: var(--accent); }
.topbar { align-items: center; background: rgba(35, 23, 15, .96); border-bottom: 1px solid #5c3b20; display: flex; gap: 24px; justify-content: space-between; min-height: 64px; padding: 0 28px; position: sticky; top: 0; z-index: 20; }
.brand { color: #fff4d4; font-weight: 900; text-decoration: none; }
.brand-title {
  background: linear-gradient(180deg, #fff0a0 0%, #f0b334 34%, #9c4c12 68%, #f5c94e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #ffd86a;
  display: inline-block;
  font-family: "Cinzel Decorative", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-weight: 900;
  letter-spacing: 0;
  line-height: .95;
  position: relative;
  text-transform: uppercase;
  transform: scaleX(1.08);
  transform-origin: left center;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #1b466e;
  text-shadow:
    0 1px 0 #fff0ad,
    0 2px 0 #b36a16,
    0 3px 0 #5c2a10,
    0 0 0 3px #123b66,
    0 0 12px rgba(70, 160, 220, .44),
    0 5px 10px rgba(0, 0, 0, .5);
}
.brand-title::after {
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 38%);
  content: attr(data-shine);
  inset: 0;
  overflow: hidden;
  position: absolute;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  opacity: .34;
}
.topbar .brand-title {
  font-size: 1.18rem;
  -webkit-text-stroke-width: .7px;
  text-shadow:
    0 1px 0 #fff0ad,
    0 2px 0 #6f3514,
    0 0 10px rgba(64, 150, 214, .42),
    0 3px 7px rgba(0, 0, 0, .52);
}
.topbar nav { display: flex; gap: 8px; }
.topbar nav a { border-radius: 6px; color: #e6d4ad; font-family: var(--display-font); font-weight: 900; padding: 10px 12px; text-decoration: none; }
.topbar nav a:hover, .topbar nav a.active { background: #4a2e18; color: var(--gold); }
.landing, .track-page, .quest-home { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 56px; }
.quest-hero { align-items: center; background: linear-gradient(90deg, rgba(255,250,240,.96) 0%, rgba(255,250,240,.96) 74%, rgba(57,35,21,.96) 74%, rgba(57,35,21,.96) 100%); border: 1px solid #6b4526; border-radius: 8px; box-shadow: var(--shadow); color: var(--ink); display: flex; min-height: 430px; overflow: hidden; padding: 42px; position: relative; }
.hero-copy { max-width: 760px; position: relative; width: calc(74% - 42px); z-index: 1; }
.quest-hero h1 { color: #5a3517; font-size: 4rem; line-height: 1; margin: 0 0 14px; text-shadow: 0 2px 0 #f4cf86; }
.quest-hero h1.hero-wordmark {
  color: #ffd86a;
  font-size: 4.55rem;
  margin-bottom: 18px;
  max-width: 760px;
  -webkit-text-stroke: 2px #1b466e;
  text-shadow:
    0 1px 0 #fff5b8,
    0 3px 0 #c77b18,
    0 5px 0 #5d2a12,
    0 0 0 5px #0f3459,
    0 0 18px rgba(59, 153, 218, .55),
    0 12px 18px rgba(0, 0, 0, .42);
}
.hero-lead { color: #6b4b32; font-size: 1.18rem; line-height: 1.65; max-width: 720px; }
.quest-kicker, .eyebrow { color: var(--gold); font-size: .82rem; font-weight: 900; letter-spacing: .04em; margin: 0 0 8px; text-transform: uppercase; }
.quest-marker-card { align-items: center; background: transparent; border: 0; bottom: 0; box-shadow: none; display: flex; flex-direction: column; justify-content: center; outline: 0; padding: 0; position: absolute; right: 0; top: 0; width: 26%; }
.quest-marker-card img { display: block; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .34)) drop-shadow(0 0 18px rgba(255, 181, 32, .2)); height: 194px; margin: 0 auto; width: auto; }
.quest-marker-card span { color: #ffe4a3; font-weight: 900; margin-top: 4px; text-shadow: 0 2px 8px rgba(0,0,0,.45); text-transform: uppercase; }
.landing-hero, .track-hero, .questline-panel, .feedback-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 34px; }
h1 { font-family: var(--display-font); font-size: 2.2rem; font-weight: 900; line-height: 1.12; margin: 0 0 12px; }
h2, h3 { font-family: var(--display-font); letter-spacing: 0; margin-top: 0; }
p { line-height: 1.58; }
.landing-hero p, .track-hero p { color: var(--muted); font-size: 1.05rem; max-width: 760px; }
.hero-actions, .card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.primary-action, .secondary-action, .resource-card a { border-radius: 6px; display: inline-flex; font-family: var(--display-font); font-weight: 900; padding: 12px 15px; text-decoration: none; }
.primary-action { background: #d97819; border: 1px solid #f0a63a; color: #fffaf0; }
.primary-action.alt { background: #1f6b68; border-color: #3fa39d; }
.secondary-action, .resource-card a { background: #eadcc0; color: var(--ink); }
.briefing-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.briefing-grid article, .track-card, .resource-card, .quest-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.briefing-grid article span, .track-card span, .resource-card span, .quest-card span { color: var(--accent); display: block; font-family: var(--display-font); font-size: .82rem; font-weight: 900; letter-spacing: .04em; margin-bottom: 8px; text-transform: uppercase; }
.briefing-grid article p, .track-card p, .resource-card p, .quest-card p { color: var(--muted); }
.questline-panel, .feedback-panel { margin-top: 18px; }
.quest-card-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.track-grid, .resource-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.quest-card { position: relative; }
.quest-card.coming-soon { background: linear-gradient(180deg, #fffaf0, #f3e6ca); border-style: dashed; }
.quest-card-icon { align-items: center; background: #fff2c9; border: 1px solid #e3bd57; border-radius: 8px; display: flex; height: 56px; justify-content: center; margin-bottom: 14px; width: 56px; }
.quest-card-icon img { height: 42px; width: auto; }
.status-pill { background: #4a2e18; border-radius: 999px; color: #ffe4a3; display: inline-flex; font-family: var(--display-font); font-size: .86rem; font-weight: 900; margin-top: 12px; padding: 8px 12px; text-transform: uppercase; }
.feedback-panel { align-items: center; display: flex; gap: 24px; justify-content: space-between; }
.metric-band { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.metric-band div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.metric-band strong { display: block; font-family: var(--display-font); font-size: 1.8rem; }
.metric-band span { color: var(--muted); font-family: var(--display-font); font-weight: 700; }
.doc-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 56px; }
.doc-sidebar { align-self: start; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-height: calc(100vh - 96px); overflow: auto; padding: 18px; position: sticky; top: 80px; }
.doc-sidebar h2 { font-family: var(--text-font); font-size: 1rem; line-height: 1.35; margin: 12px 0; }
.back-link { font-weight: 800; text-decoration: none; }
.toc { display: grid; gap: 4px; }
.toc a { border-radius: 6px; color: var(--muted); font-size: .92rem; line-height: 1.3; padding: 7px 8px; text-decoration: none; }
.toc a:hover { background: #f7ecd2; color: var(--accent); }
.toc-level-3 { padding-left: 18px !important; }
.doc-content { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 32px; }
.doc-content, .doc-content h1, .doc-content h2, .doc-content h3, .doc-content p, .doc-content li, .doc-content table, .doc-content code, .toc, .toc a { font-family: var(--text-font); }
.doc-content h1 { font-size: 2rem; }
.doc-content h2 { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 26px; }
.doc-content h3 { margin-top: 24px; }
.doc-content li { line-height: 1.55; margin: 6px 0; }
.doc-content code { background: #eadcc0; border-radius: 4px; padding: 2px 5px; }
pre { background: #1d1813; border-radius: 8px; color: #f8fafc; overflow: auto; padding: 16px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; margin: 16px 0; min-width: 680px; width: 100%; }
th, td { border: 1px solid var(--line); padding: 10px; text-align: left; vertical-align: top; }
th { background: #efe2c9; }
@media (max-width: 960px) {
  .quest-hero { background: linear-gradient(180deg, rgba(255,250,240,.96) 0%, rgba(255,250,240,.96) 68%, rgba(57,35,21,.96) 68%, rgba(57,35,21,.96) 100%); display: block; padding-bottom: 260px; }
  .briefing-grid { grid-template-columns: 1fr; }
  .hero-copy { width: 100%; }
  .quest-marker-card { height: 220px; top: auto; width: 100%; }
  .quest-hero h1 { font-size: 3rem; }
  .quest-hero h1.hero-wordmark {
    font-size: 2.7rem;
    max-width: 100%;
    transform: none;
    -webkit-text-stroke-width: 1.4px;
  }
}
@media (max-width: 860px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 8px; padding: 14px 16px; position: static; }
  .topbar .brand-title { font-size: 1.05rem; transform: none; }
  .track-grid, .resource-grid, .metric-band, .doc-layout, .quest-card-grid { grid-template-columns: 1fr; }
  .doc-sidebar { max-height: none; position: static; }
  .landing-hero, .track-hero, .doc-content, .questline-panel, .feedback-panel { padding: 24px; }
  .feedback-panel { align-items: flex-start; flex-direction: column; }
}