@import url('https://fonts.googleapis.com/css2?family=Rye&family=Roboto+Slab:wght@400;500;600;700&family=Special+Elite&display=swap');

/* One shared frontier finish for every public OutLaw page. */
:root {
  --west-ink: #30190d;
  --west-ink-soft: #59331a;
  --west-paper: #e6c993;
  --west-paper-light: #f4dfb3;
  --west-paper-deep: #cfad72;
  --west-leather: #4a2816;
  --west-leather-dark: #261308;
  --west-copper: #c66c29;
  --west-gold: #e3a151;
  --west-line: rgba(92, 49, 22, .42);
}

html { background: #6b4024; }
body {
  min-height: 100vh;
  color: var(--west-ink) !important;
  font-family: 'Roboto Slab', Georgia, serif !important;
  background:
    radial-gradient(circle at 18% 5%, rgba(255,245,210,.62), transparent 27rem),
    radial-gradient(circle at 85% 22%, rgba(113,61,27,.16), transparent 32rem),
    repeating-linear-gradient(0deg, rgba(93,55,29,.045) 0 1px, transparent 1px 4px),
    #cfad78 !important;
}
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(68,33,14,.10), transparent 15%, transparent 85%, rgba(68,33,14,.11)),
    repeating-linear-gradient(90deg, transparent 0 83px, rgba(104,57,24,.026) 84px 85px) !important;
}

header {
  min-height: 70px !important;
  height: auto !important;
  padding: 0 clamp(18px, 4vw, 72px) !important;
  background: #050505 !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(235, 148, 67, .28) !important;
  box-shadow: 0 7px 22px rgba(0,0,0,.4) !important;
}
header .logo {
  color: #f5f1e8 !important;
  font-family: 'Roboto Slab', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}
header .logo span { color: #ec7923 !important; }
header nav a {
  min-height: 66px !important;
  color: #ded9d2 !important;
  font-family: 'Roboto Slab', Georgia, serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}
header nav a::after { height: 2px !important; background: #ed7923 !important; }
header nav a:hover, header nav a.active, header nav a[style*="cfa85c"] {
  color: #fff !important;
  background: rgba(237,121,35,.08) !important;
}
header .header-right .discord-btn {
  color: #22140b !important;
  background: linear-gradient(135deg, #eeb36d, #be702d) !important;
  border: 1px solid #dfa35c !important;
  border-bottom: 3px solid #6c3213 !important;
  border-radius: 0 !important;
  font-family: 'Roboto Slab', Georgia, serif !important;
  box-shadow: 2px 3px 0 rgba(0,0,0,.24) !important;
}
header .header-right .discord-btn[title] { color: #f5dfb6 !important; background: #482315 !important; border-color: #9d6233 !important; border-bottom-color: #1d0d05 !important; }

footer {
  color: #e4c796 !important;
  background: linear-gradient(180deg, #3f2113, #211006) !important;
  border-top: 4px solid #9e5524 !important;
  font-family: 'Roboto Slab', Georgia, serif !important;
  box-shadow: inset 0 1px rgba(255,220,161,.12) !important;
}
footer a, .footer-links a { color: #edaa5c !important; }

/* Common documents and forms: every screen should read like a field ledger. */
.rules-container, .lore-container, .allowlist-page, .content-wrap, .story-page,
.story-editor, .privacy-main, .form-box, .login-box, .admin-shell,
.laws-page, .lore-chronicle {
  color: var(--west-ink) !important;
}
.rules-container, .lore-container, .privacy-main, .form-box, .login-box, .story-page,
.story-editor {
  background:
    repeating-linear-gradient(0deg, rgba(93,53,26,.045) 0 1px, transparent 1px 4px),
    linear-gradient(115deg, #ead4a5, #d8b978) !important;
  border: 1px solid #8c5b32 !important;
  border-radius: 0 !important;
  box-shadow: 9px 11px 0 rgba(64,32,12,.18), inset 0 0 0 5px rgba(108,64,28,.09) !important;
}
.rules-title, .lore-title, .login-box h2, .form-box h2,
.profile-box h2, .story-intro h1, .editor-head h1 {
  color: #3a1a0b !important;
  font-family: 'Rye', Georgia, serif !important;
  text-shadow: 1px 1px 0 rgba(255,239,198,.5) !important;
}
.frontier-kicker, .privacy-kicker, .section-kicker, .profile-eyebrow,
.story-kicker, .editor-head .kicker { color: #a64f1f !important; }

.rule-block, .lore-chapter, .example-box, .punishment-box, .status-box,
.story-entry, .story-closing, .story-narrator, .law-office, .rule-guides,
.privacy-grid, .privacy-note, .character-card, .next-step, .private-note,
.server-record, .story-body, .story-gallery, .editor-panel {
  color: var(--west-ink) !important;
  background:
    repeating-linear-gradient(0deg, rgba(91,51,25,.035) 0 1px, transparent 1px 4px),
    #f0d9aa !important;
  border-color: #ad7845 !important;
  border-left-color: #b65e25 !important;
  box-shadow: inset 0 0 0 1px rgba(255,241,204,.28) !important;
}
.rule-block h3, .lore-chapter h3, .drop-cap, .example-title,
.story-entry h2, .story-narrator h2, .law-office-copy h2,
.rule-guides-copy h2, .privacy-grid h2, .character-copy h3,
.next-step strong, .private-note h3, .story-gallery h2 {
  color: #592510 !important;
  font-family: 'Rye', Georgia, serif !important;
  text-shadow: none !important;
}
.rule-block p, .lore-chapter p, .lore-intro, .story-entry p, .story-closing,
.story-narrator p, .law-office-copy p, .rule-guides-copy p, .privacy-grid p,
.privacy-note, .character-copy p, .next-step, .private-note > p, .story-body,
.editor-head p, .hint, .record-list dt, .record-list dd, .record-note { color: #593920 !important; }
.rule-block li, .lore-chapter li, .privacy-grid li { color: #593920 !important; }

/* Rules, laws and lore use the same worn-paper material but preserve their individual layout. */
.laws-page, .lore-chronicle { background: transparent !important; }
.rules-page, .laws-page, .lore-chronicle, .privacy-main { box-shadow: none !important; }
.story-hero, .rules-hero, .laws-hero, .privacy-hero,
.laws-page .laws-hero, .lore-chronicle .story-hero {
  border-color: #74401e !important;
  border-bottom-color: #bd6629 !important;
}
.story-hero::before, .rules-hero::before, .laws-hero::before, .privacy-hero::before {
  background: linear-gradient(90deg, rgba(46,22,9,.80), rgba(74,36,13,.48), rgba(52,24,8,.14)) !important;
}
.story-hero h1, .rules-hero h1, .laws-hero h1, .privacy-hero h1,
.laws-page .laws-hero h1, .lore-chronicle .story-hero h1 {
  color: #f9e6bb !important;
  font-family: 'Rye', Georgia, serif !important;
  text-shadow: 3px 3px 0 rgba(33,15,5,.54) !important;
}
.story-hero p, .rules-hero p, .laws-hero p, .privacy-hero p,
.laws-page .laws-hero p, .lore-chronicle .story-hero p { color: #f0d6a8 !important; }
.laws-page .law-office, .laws-page .law-proclamation,
.lore-chronicle .story-narrator, .lore-chronicle .story-entry,
.lore-chronicle .story-closing {
  color: var(--west-ink) !important;
  background:
    repeating-linear-gradient(0deg, rgba(83,47,20,.05) 0 1px, transparent 1px 4px),
    #e6c68e !important;
  border-color: #93623a !important;
}
.laws-page .law-sheriff-card { background: #6a3a20 !important; border-color: #9b6535 !important; }
.laws-page .law-sheriff-card figcaption { color: #f0d5a5 !important; }
.laws-page .law-dossier, .laws-page .law-dossier summary,
.laws-page .dossier-body, .laws-page .rule-block,
.lore-chronicle .story-contents a {
  color: var(--west-ink) !important;
  background: #efd7a6 !important;
  border-color: #a87545 !important;
}
.laws-page .law-dossier summary:hover, .lore-chronicle .story-contents a:hover {
  color: #351505 !important;
  background: #e8b26a !important;
}
.laws-page .law-dossier strong, .lore-chronicle .story-entry h2,
.lore-chronicle .story-narrator h2 { color: #4b200d !important; }
.laws-page .law-dossier small, .lore-chronicle .story-contents small { color: #67472d !important; }
.laws-page .dossier-index, .laws-page .rule-dossier-number, .rule-number {
  color: #351505 !important;
  background: #df9347 !important;
}
.laws-page .punishment-box span { color: #5a361d !important; background: #e8c78f !important; border-left-color: #b65e25 !important; }
.lore-chronicle::before { background: linear-gradient(#a64f20, rgba(166,79,32,.16)) !important; }
.lore-chronicle .story-entry-mark { color: #ae5723 !important; }

/* Allowlist and profile retain the important game image areas, framed as a paper register. */
.allowlist-page {
  background:
    repeating-linear-gradient(0deg, rgba(79,43,19,.05) 0 1px, transparent 1px 4px),
    #dec391 !important;
  border-color: #87552f !important;
  box-shadow: 10px 12px 0 rgba(62,30,11,.18), inset 0 0 0 6px rgba(94,53,22,.13) !important;
}
.allowlist-progress, .application-panel, .application-heading,
.allowlist-section { color: var(--west-ink) !important; border-color: rgba(102,57,25,.32) !important; }
.application-panel { background: transparent !important; box-shadow: none !important; }
.application-heading h2, .section-title { color: #4d210d !important; font-family: 'Rye', Georgia, serif !important; }
.section-copy, .input-group label, .form-grid label, .allowlist-progress { color: #5b3a20 !important; }
.input-group input, .input-group select, .input-group textarea,
.private-note-form textarea, .story-editor input[type="text"], .story-editor textarea,
.story-editor input[type="file"] {
  color: #402211 !important;
  background: rgba(255,247,217,.58) !important;
  border-color: #b4804d !important;
  font-family: 'Roboto Slab', Georgia, serif !important;
}
.input-group select option { color: #402211; background: #f0d9aa; }
.application-panel .status-msg {
  color: #513019 !important;
  background: #ead19d !important;
  border-color: #a66a36 !important;
  border-left-color: #b75d25 !important;
}
.allowlist-submit, .application-panel > .btn, .save-button,
.profile-box .small-btn, .profile-box .btn, .office-action, body > form button {
  color: #321405 !important;
  background: linear-gradient(135deg, #efb36c, #bf6528) !important;
  border-color: #f5ca83 !important;
  border-bottom-color: #6b3214 !important;
  font-family: 'Roboto Slab', Georgia, serif !important;
}
.content-wrap { background: transparent !important; }
.profile-box { background: #e0c18a !important; border: 1px solid #87532e !important; box-shadow: 9px 11px 0 rgba(60,29,11,.18) !important; }
.profile-head, .story-intro {
  border-bottom-color: #9c5224 !important;
  background-color: #442313 !important;
}
.profile-content, .story-layout { background: transparent !important; }
.profile-badges span { color: #54321b !important; background: #ebd2a2 !important; border-color: #ae7741 !important; }
.allowlist-badge { background: rgba(44,21,10,.78) !important; border-left-color: #dfa057 !important; }
.allowlist-badge strong { color: #f8dfaf !important; }
.profile-box .panel-title { color: #86401a !important; border-color: rgba(100,55,24,.36) !important; }
.join-game { color: #f5dfb4 !important; background: #4a2614 !important; border-color: #9e5c30 !important; border-left-color: #db9349 !important; }
.join-game small, .join-game > i { color: #f0b565 !important; }

/* Single story, login, privacy and administration. */
.story-intro h1 { color: #f9e3b5 !important; }
.story-facts dt, .story-facts dd, .story-gallery h2, .story-body::before { color: #9a481e !important; }
.story-gallery a { background: #d6b476 !important; border-color: #936039 !important; }
.not-found { color: var(--west-ink) !important; background: #ead09b !important; }
.not-found h1 { color: #4a210d !important; }
.login-box, .form-box, body > form { color: var(--west-ink) !important; }
body > form input { color: #402211 !important; background: #f5dfb3 !important; border-color: #ad7542 !important; }
.admin-shell .admin-masthead, .admin-shell .application-desk {
  color: var(--west-ink) !important;
  background: #dec08a !important;
  border-color: #895530 !important;
}
.admin-shell .application-card, .admin-shell .admin-stat {
  color: var(--west-ink) !important;
  background: #efd7a6 !important;
  border-color: #ad7846 !important;
  border-left-color: #b45a24 !important;
}
.admin-shell .desk-heading h2, .admin-shell .application-card,
.admin-shell .application-meta dd, .admin-shell .discord-number { color: var(--west-ink) !important; }

@media (max-width: 850px) {
  header { min-height: 83px !important; padding: 10px 12px 12px !important; }
  header nav a { min-height: 30px !important; color: #e5cfa4 !important; }
  .rules-container, .lore-container, .story-page, .story-editor,
  .allowlist-page { width: min(100% - 24px, 1180px) !important; }
  .laws-page .law-office, .lore-chronicle .story-narrator { background: #e6c68e !important; }
}