/* ===========================================================
   HUNTER'S CODEX / THE AGED PARCHMENT THEME
   -----------------------------------------------------------
   CUSTOMIZE HERE: change the colors in :root first.
   The original layout and responsive behavior are in styles.css.
   This file changes its appearance without hiding functionality.
   =========================================================== */
:root {
  --old-ink: #35291c;           /* Main ink on parchment */
  --old-faded: #6e5940;         /* Lighter ink */
  --old-wine: #853c2b;          /* Red wax-seal accent */
  --old-leather: #342417;       /* Dark wood / leather */
  --old-leather-light: #5a3d27;
  --old-paper: #eddbb4;        /* Paper body */
  --old-paper-light: #f5e7c5;  /* Raised paper */
  --old-paper-deep: #d4b88a;   /* Older edges */
  --old-line: #98774d;
  --heading: 'Cinzel', Georgia, serif;
  --body: 'EB Garamond', Georgia, serif;
  --ink: var(--old-ink);
  --copper: var(--old-wine);
  --content: 1160px;
}
body {
  background: var(--old-leather);
  color: var(--old-ink);
  font-size: 17px;
}
/* A faint fibrous texture across the scroll, made entirely in CSS. */
.site-grain { opacity: .34; mix-blend-mode: multiply; z-index: 80; }
.progress-track span { background: #aa6a3c; box-shadow: none; }
:focus-visible { outline-color: var(--old-wine); }

/* THE LEATHER SPINE / NAVIGATION */
.site-header,
.site-header.is-scrolled {
  background:
    repeating-linear-gradient(94deg, transparent 0 7px, #120c080e 8px 9px),
    linear-gradient(#4c3423, #2c1b12);
  border-bottom: 3px double #a08155;
  box-shadow: 0 7px 19px #24160db3;
  backdrop-filter: none;
}
.site-header { height: 82px; }
.site-header.is-scrolled { height: 73px; }
.brand-wordmark { color: #f5e2b4; }
.brand-wordmark > span { color: #d5b079; }
.brand-wordmark small { color: #d1b589; }
.header-nav a { color: #f0dab0; font-size: 12px; font-family: var(--heading); }
.header-nav a:hover { color: #f9e7c8; text-decoration: underline; text-underline-offset: 5px; }
.effects-toggle { background: #291b12; border-color: #b58b53; color: #f3dfb8; }
.effect-indicator { background: #d8a35b; }
.mobile-nav { background: #352317; border-bottom: 2px solid #a78251; }
.mobile-nav a { font-family: var(--heading); }

/* AN ANTIQUE MAP AND PAPER TITLE SHEET */
.hero {
  background: #69533d;
  padding-top: 134px;
  padding-bottom: 86px;
  min-height: 800px;
  min-height: 100svh;
}
.landscape { filter: sepia(.95) saturate(.52) brightness(1.12) contrast(.85); opacity: .85; }
.hero-vignette {
  background:
    linear-gradient(180deg, #2b1d14b0 0%, #5e493461 22%, #55402c77 77%, #382619e3 100%),
    radial-gradient(ellipse at 50% 46%, transparent 0 29%, #2a1c12b8 98%);
}
.stars { opacity: .06; }
.firefly { background: #f3df9f; box-shadow: 0 0 9px 3px #e1c17b66; }
.hero-content {
  max-width: 800px;
  padding: 47px 62px 34px;
  color: var(--old-ink);
  background:
    radial-gradient(ellipse at 8% 0%, #fff1ccbd, transparent 41%),
    radial-gradient(ellipse at 99% 100%, #9869444d, transparent 46%),
    repeating-linear-gradient(0deg, transparent 0 26px, #69482606 27px 28px),
    linear-gradient(110deg, #dfc399, #f1dfb7 13%, #f3e4c0 52%, #dec296 100%);
  border: 2px solid #5f442b;
  outline: 6px solid #c5a16f;
  outline-offset: -13px;
  box-shadow: 0 0 0 6px #3e2a1bc9, 0 28px 60px #160e0ac7, inset 0 0 50px #986f3e5e;
}
.hero-content::before {
  content: '✦                                     ✦';
  position: absolute;
  top: 13px;
  left: 20px;
  right: 20px;
  font-family: var(--heading);
  font-size: 15px;
  color: #8e6036;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.hero-content::after {
  content: '✥  ·  ✥  ·  ✥';
  display: block;
  margin-top: 19px;
  color: #8d6139;
  letter-spacing: .25em;
  font-size: 13px;
}
.crest-frame { margin-bottom: 13px; width: 74px; height: 74px; }
.crest-frame::before,.crest-frame::after { border-color: #a47f4b; }
.crest-frame img { width: 53px; filter: sepia(.8) brightness(.65); }
.hero-eyebrow, .eyebrow { color: #8d3d2b; font-family: var(--heading); font-size: 11px; letter-spacing: .2em; }
.flourish { background: linear-gradient(90deg, transparent, #8b5c3b); }
.hero h1 { font-size: clamp(44px, 5.45vw, 75px); color: #37271d; line-height: 1.22; text-shadow: 1px 1px 0 #fff4d077; letter-spacing: .025em; }
.hero h1 em { color: var(--old-wine); letter-spacing: .12em; }
.hero-description { color: #52432e; font-size: 18px; line-height: 1.45; max-width: 520px; margin: 17px 0 25px; }
.diamond { color: #8d3d2b; }
.hero-menu { max-width: 435px; gap: 8px; }
.menu-choice {
  height: 51px;
  color: #f8e8c4;
  background: linear-gradient(#5a3b27, #3a271d);
  border: 2px ridge #a58256;
  outline: 1px solid #9d7b51;
  outline-offset: -6px;
  font: 700 11px var(--heading);
  letter-spacing: .055em;
}
.menu-choice:hover,.menu-choice:focus-visible {
  background: linear-gradient(#794b32, #563222);
  color: #fff0d2;
  border-color: #a96343;
  transform: translateX(3px);
}
.menu-choice-primary,
.menu-choice-primary:hover { background: linear-gradient(#a24b35, #773723); color: #fff1cf; border-color: #bd8d58; }
.menu-number { color: #e1b67d; opacity: 1; }
.menu-choice::before { background: #d4b17c; }
.hero-hint { color: #76563e; font-family: var(--heading); font-size: 9px; margin: 14px 0 0; }
.hint-asterisk { color: #a24b35; }
.hero-vertical { color: #ead4a3; }
.scroll-cue, .hero-coordinates { color: #f0dab0; }
.scroll-line { background: linear-gradient(#f1dab1,transparent); }
.record-strip {
  background: repeating-linear-gradient(90deg, #3a2619 0 12px, #402a1c 13px 25px);
  border-top: 3px double #b18855;
  border-bottom: 3px double #b18855;
  color: #e1c49b;
  font-family: var(--heading);
  font-size: 9px;
}
.record-strip strong, .record-end { color: #f3d9ae; }
.live-dot { background: #bca06c; box-shadow: none; }

/* ALL CHAPTERS NOW SHARE THE SAME OLD PAPER */
.quests-section,
.hunter-section,
.armory-section {
  color: var(--old-ink);
  background-color: var(--old-paper);
  background-image:
    radial-gradient(ellipse at 0 0, #fbefcf 0, transparent 47%),
    radial-gradient(ellipse at 100% 100%, #a36f3b40 0, transparent 46%),
    repeating-linear-gradient(87deg, transparent 0 38px, #51371807 39px 40px);
  border-bottom: 11px solid #503522;
  box-shadow: inset 0 10px 20px #6c4a262b, inset 0 -10px 24px #7e532a30;
}
.section { padding-top: 94px; padding-bottom: 102px; }
.section + .section { border-top: 2px solid #967349; }
.section-head { margin-bottom: 38px; }
.section-head .eyebrow { color: #8b432d; }
.section h2 { color: #3a2b1d; text-shadow: 1px 1px 0 #f6e6c4; }
.section h2 em, .hunter-section h2 em { color: #863f2e; }
.section-intro, .hunter-section .section-intro { color: #70563c; font-size: 18px; line-height: 1.65; }
.line-decoration { background: #8b6842; }
.section-stamp { filter: sepia(.9); transform: rotate(-11deg); }

/* QUEST POSTINGS ARE INDIVIDUAL AGED LETTERS */
.board-frame {
  padding: 11px;
  background: #87623f;
  border: 7px ridge #765333;
  box-shadow: 0 16px 35px #5b3b1e4f, inset 0 0 0 2px #d3b17b;
}
.board-frame::before { border-color: #e8cf9b7d; }
.board-heading {
  background: linear-gradient(0deg,#3a2519,#513522);
  border: 2px double #9e7544;
  color: #f8e6bc;
  font-family: var(--heading);
}
.board-heading-right { color: #ecd4a5; }
.quest-filters, .quest-grid, .board-footnote {
  background-color: #d6be92;
  background-image: repeating-linear-gradient(0deg,transparent 0 30px,#61422108 31px 32px);
}
.filter-button { color: #60442e; border-color: #a18259; font: 700 10px var(--heading); }
.filter-button:hover { background: #edd7aa; }
.filter-button.is-active { background: #6f3927; color: #f6e6c8; border-color: #6f3927; }
.quest-card {
  background:
    radial-gradient(circle at 97% 97%, #be98655c, transparent 35%),
    radial-gradient(circle at 0% 0%, #fff2cf, transparent 45%),
    #eedab1;
  border: 1px solid #8d6b43;
  outline: 1px solid #b99b70;
  outline-offset: -7px;
  box-shadow: 3px 4px 0 #7f593785, 0 10px 17px #4e311c2b;
}
.quest-card:hover { transform: translateY(-4px) rotate(-.25deg); box-shadow: 4px 8px 0 #78533270,0 16px 21px #51321a35; }
.quest-art { height: 156px; border-bottom: 3px double #a58455; background: #63513b; }
.quest-art svg { filter: sepia(1) saturate(.55); opacity: .84; }
.quest-art--server, .quest-art--hook, .quest-art--web, .quest-art--team { background: radial-gradient(ellipse at 50% 50%, #a78c66, #56432d); }
.quest-art::after { border-color: #e9d2a644; }
.quest-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: sepia(.24) contrast(.95); }
.quest-rank { background: #e9d5a9; color: #613825; border: 1px solid #865d35; }
.quest-status { background: #743b2cdb; color: #f6e5be; }
.quest-card h3 { color: #342619; font-size: clamp(19px,2.1vw,24px); }
.quest-meta { color: #813e2e; }
.quest-meta span { color: #8f6d4c; }
.quest-description { color: #604a31; font-size: 16px; line-height: 1.45; }
.quest-tools span, .skill-tags span { background: #e1c99e; color: #5b422c; border: 1px solid #af8b5f; font: 600 13px var(--body); }
.quest-inspect { border-top: 1px dashed #9d7c51; color: #893f30; font: 700 10px var(--heading); }
.quest-inspect:hover { color: #4c291e; }
.board-footnote { color: #735235; font-family: var(--heading); }

/* A LEATHER-FRAMED HUNTER'S PASSPORT */
.hunter-section::before { opacity: .13; }
.profile-card {
  background: linear-gradient(140deg,#ecd8ad,#f5e5c4 52%,#d4b787);
  border: 9px solid #785032;
  outline: 2px solid #d6b487;
  outline-offset: -14px;
  box-shadow: 9px 12px 0 #5c402545,0 18px 36px #543a2052;
  color: var(--old-ink);
}
.profile-ring { background: #d8c49d; border-color: #83613c; }
.profile-ring img { filter: sepia(.85); }
.profile-details dd { color: #4b3a27; }
.profile-details dt { color: #8c402e; }
.small-label { color: #8b432f; font-family: var(--heading); }
.hunter-copy h3 { color: #3a2b1d; }
.hunter-copy h3 em { color: #883d2b; }
.hunter-copy>p:not(.small-label) { color: #5a4631; font-size: 19px; line-height: 1.65; }
.hunter-highlights { border-top: 1px dashed #a8875e; }
.hunter-highlights strong { color: #44311f; font-size: 17px; }
.hunter-highlights small { color: #7e5d3b; font-size: 15px; }
.highlight-symbol { color: #8f412b; border-color: #a6875e; }
.text-link { color: #883c29; border-color: #8f402d; font-family: var(--heading); }

/* SKILL GROUPS AS CATALOGUED ARMORY ENTRIES */
.armory-card {
  background: linear-gradient(120deg,#f3e2bd,#e4cca1);
  border: 2px solid #94734c;
  outline: 1px solid #c4a57b;
  outline-offset: -8px;
  box-shadow: 4px 5px 0 #96744f6e;
}
.armory-icon { background: #66452d; border: 4px double #c4a16c; color: #ffdfab; }
.armory-index { color: #8a402d; font-family: var(--heading); }
.armory-card h3 { color: #3a2b1d; }
.armory-card p { color: #74573b; font-size: 16px; line-height: 1.5; }

/* SEND A RAVEN / FINAL LEATHER COVER */
.contact-section {
  background:
    radial-gradient(ellipse at 50% 28%, #66472b, transparent 70%),
    repeating-linear-gradient(90deg,#3a271b 0 10px,#3b291c 11px 20px);
  border-top: 6px double #aa8152;
}
.contact-decoration { color: #eec89111; }
.contact-inner h2 { color: #f8e6c2; }
.contact-inner h2 em { color: #e1b77c; }
.contact-inner .eyebrow { color: #d9b27d; }
.contact-inner>p:not(.eyebrow,.contact-help) { color: #ead5b3; font-size: 18px; }
.contact-actions a { font-family: var(--heading); }
.contact-primary { background: #ddba86; color: #412719; border: 2px double #edcf9f; }
.contact-secondary { border: 2px double #d4b27d; color: #f4e0b9; }
.contact-help, .contact-help code { color: #e4cb9d; font-size: 13px; }
.contact-help a { text-decoration: underline; }
.site-footer { background: #291b13; color: #d8bb8f; border-top: 2px solid #ab8050; }
.site-footer>span:first-child { color: #f1dbb3; }
.site-footer a { color: #f1d4a2; }

/* QUEST DETAILS / UNROLLED SCROLL */
.quest-modal {
  background: radial-gradient(circle at 0 0,#f9ecc9,transparent 45%),#e8d0a4;
  color: #38291c;
  border: 9px ridge #a87e4d;
  outline-color: #5a422b;
  box-shadow: 0 32px 70px #1d0f09bf, inset 0 0 35px #a7793d44;
}
.quest-modal::backdrop { background: #140c08d1; }
.modal-close { background: #f0dbaf; border-color: #805a36; color: #523521; }
.modal-topline, .quest-modal h3, .quest-modal .eyebrow, .modal-caption { color: #8c422c; }
.quest-modal #dialog-description { color: #5d472e; font-size: 18px; line-height: 1.5; }
.modal-tags span { border-color: #ae8657; color: #513720; }
.modal-action a { background: #753d2c; border-color: #603221; color: #fce7be; }

/* MOBILE: parchment keeps ample writing space */
@media (max-width: 850px) {
  .site-header { height: 73px; }
  .site-header .brand-wordmark { font-size: 12px; }
}
@media (max-width: 680px) {
  .hero { padding: 111px 18px 76px; min-height: 740px; }
  .hero-content { padding: 35px 25px 23px; outline-offset: -10px; }
  .hero-content::before { font-size: 11px; left: 13px; right: 13px; top: 11px; }
  .hero h1 { font-size: clamp(34px,7.6vw,54px); }
  .hero-description { font-size: 16px; }
  .hero-eyebrow { font-size: 8px; }
  .section { padding: 74px 19px; }
  .quest-description { font-size: 16px; }
  .board-heading { font-size: 10px; }
  .filter-button { font-size: 9px; }
  .quest-grid { gap: 17px; }
  .hunter-copy>p:not(.small-label) { font-size: 18px; }
  .armory-card p { font-size: 16px; }
  .contact-section { padding: 96px 21px; }
}
@media (max-width: 390px) {
  .hero-content { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: 32px; }
  .menu-choice { letter-spacing: 0; font-size: 9px; padding: 0 11px; }
}

/* A readable warning instead of a blank page when content.js fails to load. */
.content-warning{position:relative;z-index:200;background:#f5e3bd;color:#4e2c20;border-bottom:3px solid #8e4734;padding:14px 22px;text-align:center;font:600 14px/1.5 Georgia,serif;}