@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Oswald:wght@400;500;600;700&display=swap');

:root {
  --outlaw-black: #050505;
  --outlaw-panel: #0d0d0d;
  --outlaw-panel-raised: #15110e;
  --outlaw-orange: #f06b19;
  --outlaw-orange-light: #ff9850;
  --outlaw-text: #f0eee9;
  --outlaw-muted: #9d9890;
  --outlaw-line: rgba(240, 107, 25, .34);
}

body {
  color: var(--outlaw-text) !important;
  font-family: 'Barlow Condensed', 'Work Sans', sans-serif !important;
  background: #050505 !important;
}
body::before {
  opacity: .2 !important;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 4px 5px) !important;
}

header {
  height: 66px !important;
  min-height: 66px !important;
  padding: 0 clamp(18px, 4vw, 72px) !important;
  background: #030303 !important;
  border-top: 2px solid var(--outlaw-orange) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 7px 24px rgba(0,0,0,.45) !important;
}
header::before, header::after { display: none !important; }
header .logo {
  color: var(--outlaw-text) !important;
  font: 800 17px/1 'Oswald', sans-serif !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
header .logo::before { display: none !important; }
header .logo span { color: var(--outlaw-orange) !important; }
header nav a {
  min-height: 64px !important;
  padding: 0 clamp(8px, 1.5vw, 24px) !important;
  color: #c9c5bf !important;
  border: 0 !important;
  font: 700 13px/1 'Oswald', sans-serif !important;
  letter-spacing: .18em !important;
}
header nav a i { display: none !important; }
header nav a::after { right: 18px !important; bottom: 0 !important; left: 18px !important; height: 3px !important; background: var(--outlaw-orange) !important; }
header nav a:hover, header nav a.active, header nav a[style*="cfa85c"] {
  color: #fff !important;
  background: rgba(240,107,25,.08) !important;
}
header .outlaw-global-nav a { white-space: nowrap; }
header .header-right { padding-left: 12px !important; }
header .header-right .discord-btn {
  min-height: 35px !important;
  padding: 8px 12px !important;
  color: #16110d !important;
  background: var(--outlaw-orange) !important;
  border: 0 !important;
  border-bottom: 3px solid #813008 !important;
  box-shadow: none !important;
  clip-path: none !important;
  font: 700 11px 'Oswald', sans-serif !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
header .header-right .discord-btn[title] { color: #f6eee5 !important; background: #201712 !important; border: 1px solid rgba(240,107,25,.45) !important; border-bottom: 3px solid #090706 !important; }

footer { color: var(--outlaw-muted) !important; background: #030303 !important; border-top: 1px solid rgba(240,107,25,.26) !important; font-family: 'Barlow Condensed', sans-serif !important; }
.footer-links a { color: var(--outlaw-orange) !important; font-family: 'Oswald', sans-serif !important; }

/* Home */
.hero { min-height: 590px !important; background-color: #080705 !important; }
.hero::before { background: linear-gradient(90deg, rgba(0,0,0,.93), rgba(0,0,0,.72) 50%, rgba(0,0,0,.42)), linear-gradient(0deg, #050505, transparent 58%) !important; }
.hero-copy { max-width: 630px; border-left-color: var(--outlaw-orange) !important; }
.eyebrow, .section-kicker { color: var(--outlaw-orange-light) !important; font-family: 'Oswald', sans-serif !important; letter-spacing: .18em !important; }
.eyebrow { background: #0a0a0a !important; border-color: var(--outlaw-orange) !important; }
.hero h1, .guide-heading h2, .stories-heading h2 { color: #fff !important; text-shadow: none !important; font-family: 'Oswald', sans-serif !important; font-weight: 600 !important; letter-spacing: .035em !important; }
.hero h1 em { color: var(--outlaw-orange) !important; }
.hero-copy > p:not(.eyebrow), .guide-heading p, .stories-heading p { color: #c6c0b8 !important; }
.btn-play, .action-buttons a { color: #170e08 !important; background: var(--outlaw-orange) !important; border-color: var(--outlaw-orange-light) !important; border-bottom-color: #7c2b08 !important; clip-path: none !important; text-shadow: none !important; }
.live-stats { background: rgba(0,0,0,.7) !important; border-color: var(--outlaw-orange) !important; }
.live-stats::before { color: var(--outlaw-orange-light) !important; background: #050505 !important; font-family: 'Oswald', sans-serif !important; }
.live-stat { color: #fff !important; background: #111 !important; border-color: rgba(240,107,25,.55) !important; border-bottom-color: #5b2108 !important; box-shadow: none !important; clip-path: none !important; }
.live-stat:nth-child(n) { transform: none !important; }.live-stat:hover { transform: translateY(-3px) !important; background: #18120f !important; }
.stat-label, .stat-note, .stat-icon { color: var(--outlaw-orange-light) !important; }.stat-value { color: #fff !important; text-shadow: none !important; }
.dispatch { background: rgba(0,0,0,.65) !important; border-left-color: var(--outlaw-orange) !important; }.dispatch-label { color: var(--outlaw-orange) !important; }.dispatch h2 { color: #fff !important; font-family: 'Oswald', sans-serif !important; }.frontier-trail { background: var(--outlaw-orange) !important; }
.guide, .stories { background: transparent !important; }.journey-card h3 { color: #fff !important; font-family: 'Oswald', sans-serif !important; }.journey-card p { color: #aaa39a !important; }.step-photo { border-color: rgba(240,107,25,.38) !important; }
.stories-heading { background: #090909 !important; border-color: rgba(240,107,25,.44) !important; border-left-color: var(--outlaw-orange) !important; }.stories-heading::after { color: rgba(240,107,25,.15) !important; }.story-controls button { color: #fff !important; border-color: var(--outlaw-orange) !important; background: #090909 !important; }.story-controls button:hover { color: #160d07 !important; background: var(--outlaw-orange) !important; }.story-card { background: #0c0c0c !important; border-color: rgba(240,107,25,.42) !important; border-bottom-color: #642307 !important; box-shadow: none !important; }.story-copy { background: linear-gradient(135deg, #111, #080808) !important; }.story-copy h3 { color: #fff !important; text-shadow: none !important; font-family: 'Oswald', sans-serif !important; }.story-copy p { color: #bdb6ad !important; }.story-meta, .story-read { color: var(--outlaw-orange-light) !important; }.story-media::after { color: #fff !important; background: rgba(240,107,25,.85) !important; border: 0 !important; }

/* Shared inner pages */
.rules-container, .lore-container, .content-wrap, .form-box, .profile-box, .login-box, .table-wrapper,
.story-page, .story-editor, .allowlist-page { background: #080808 !important; border-color: rgba(240,107,25,.42) !important; box-shadow: 0 22px 70px rgba(0,0,0,.42) !important; }
.rules-container, .lore-container { margin: 42px auto !important; }.rules-title, .lore-title { color: #fff !important; font-family: 'Oswald', sans-serif !important; }.rule-block, .lore-chapter, .example-box, .punishment-box, .status-box { background: #101010 !important; border-color: rgba(240,107,25,.28) !important; border-left-color: var(--outlaw-orange) !important; }.rule-block h3, .lore-chapter h3, .drop-cap, .example-title { color: var(--outlaw-orange-light) !important; }.rule-block p, .lore-chapter p, .lore-intro { color: #c3bdb5 !important; }

/* Allowlist */
.allowlist-page { padding-bottom: 54px !important; }.allowlist-hero { background-color: #090909 !important; border-bottom-color: var(--outlaw-orange) !important; }.allowlist-hero::before { background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.69), rgba(0,0,0,.28)) !important; }.allowlist-hero h1, .allowlist-title { color: #fff !important; font-family: 'Oswald', sans-serif !important; text-shadow: none !important; }.allowlist-hero h1 em { color: var(--outlaw-orange) !important; }.allowlist-progress { color: #c4bdb3 !important; background: #080808 !important; border-color: rgba(240,107,25,.28) !important; }.allowlist-progress b { color: var(--outlaw-orange) !important; }.application-panel { background: #0d0d0d !important; border-color: rgba(240,107,25,.34) !important; border-left-color: var(--outlaw-orange) !important; box-shadow: none !important; }.application-heading h2 { color: #fff !important; font-family: 'Oswald', sans-serif !important; }.applicant-card { color: #eee !important; border-left-color: var(--outlaw-orange) !important; }.applicant-card i, .section-number, .section-title i { color: var(--outlaw-orange) !important; }.section-title { color: #fff !important; font-family: 'Oswald', sans-serif !important; background: transparent !important; }.section-copy, .input-group label, .form-grid label { color: #c0b9af !important; }.allowlist-section { border-bottom-color: rgba(240,107,25,.24) !important; }.input-group input, .input-group select, .input-group textarea { color: #eee !important; background: #060606 !important; border-color: rgba(240,107,25,.36) !important; }.application-panel .status-msg { color: #eee !important; background: #15110e !important; border-color: rgba(240,107,25,.4) !important; border-left-color: var(--outlaw-orange) !important; }.allowlist-submit, .application-panel > .btn { color: #160d07 !important; background: var(--outlaw-orange) !important; border-color: var(--outlaw-orange-light) !important; border-bottom-color: #722706 !important; }

/* Profile, story record and character editor */
.profile-box, .story-page { background: #080808 !important; }.profile-box::before { color: var(--outlaw-orange-light) !important; background: #050505 !important; border-color: rgba(240,107,25,.5) !important; }.profile-head, .story-intro { background: linear-gradient(105deg, #17100b, #080808) !important; border-bottom-color: var(--outlaw-orange) !important; }.profile-head::after, .story-intro::after { color: rgba(240,107,25,.55) !important; }.profile-box h2, .story-intro h1, .editor-head h1 { color: #fff !important; font-family: 'Oswald', sans-serif !important; text-shadow: none !important; }.profile-eyebrow, .story-kicker, .editor-head .kicker { color: var(--outlaw-orange-light) !important; border-color: var(--outlaw-orange) !important; }.profile-content, .story-layout { background: #080808 !important; }.profile-badges span { color: #d7d0c8 !important; background: #121212 !important; border-color: rgba(240,107,25,.35) !important; }.profile-badges i { color: var(--outlaw-orange) !important; }.character-card, .next-step, .private-note, .server-record, .story-body, .story-gallery, .editor-panel { color: #ddd !important; background: #101010 !important; border-color: rgba(240,107,25,.38) !important; border-left-color: var(--outlaw-orange) !important; box-shadow: none !important; }.character-copy h3, .next-step strong, .private-note h3 { color: #fff !important; font-family: 'Oswald', sans-serif !important; }.character-copy p, .next-step, .private-note > p, .story-body { color: #c5bdb4 !important; }.record-list dt, .record-list dd, .record-note, .private-note-form label { color: #c9c0b6 !important; }.private-note-form textarea, .story-editor input[type="text"], .story-editor textarea, .story-editor input[type="file"] { color: #eee !important; background: #060606 !important; border-color: rgba(240,107,25,.4) !important; }.join-game { color: #fff !important; background: #14100d !important; border-color: rgba(240,107,25,.48) !important; border-left-color: var(--outlaw-orange) !important; box-shadow: none !important; }.join-game small, .join-game > i { color: var(--outlaw-orange-light) !important; }.story-facts dt, .story-facts dd, .story-gallery h2, .story-body::before { color: var(--outlaw-orange-light) !important; }.story-gallery a { background: #15100c !important; border-color: rgba(240,107,25,.42) !important; box-shadow: none !important; }.story-signature { color: #a89e94 !important; border-color: rgba(240,107,25,.25) !important; }.editor-panel { padding: clamp(24px,5vw,48px) !important; }.editor-head p, .hint { color: #b9b1a7 !important; }.save-button { color: #160d07 !important; background: var(--outlaw-orange) !important; border-color: var(--outlaw-orange-light) !important; }

/* Login, privacy and administration */
.login-box, .form-box { background: #0d0d0d !important; }.login-box h2, .form-box h2 { color: #fff !important; font-family: 'Oswald', sans-serif !important; }.admin-shell .admin-masthead { background: #080808 !important; border-color: rgba(240,107,25,.45) !important; border-bottom-color: var(--outlaw-orange) !important; }.admin-shell .application-desk { background: #0d0d0d !important; border-color: rgba(240,107,25,.42) !important; }.admin-shell .desk-heading h2, .admin-shell .application-card, .admin-shell .application-meta dd, .admin-shell .discord-number { color: #eee !important; }.admin-shell .application-card { background: #15110e !important; border-color: rgba(240,107,25,.3) !important; border-left-color: var(--outlaw-orange) !important; }.admin-shell .admin-stat { background: #101010 !important; border-color: rgba(240,107,25,.35) !important; border-left-color: var(--outlaw-orange) !important; }.admin-shell .admin-stat i, .admin-shell .office-action { color: #170d07 !important; background: var(--outlaw-orange) !important; }
body > form { color: #f1ebe3 !important; background: #0d0d0d !important; border-color: var(--outlaw-orange) !important; border-radius: 0 !important; box-shadow: 0 22px 65px rgba(0,0,0,.58) !important; } body > form input { color: #eee !important; background: #050505 !important; border: 1px solid rgba(240,107,25,.42) !important; } body > form button { color: #1a0d07 !important; background: var(--outlaw-orange) !important; font-family: 'Oswald', sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase; }

@media (max-width: 850px) {
  header { min-height: 82px !important; padding: 10px 12px 12px !important; } header .logo { display: none !important; } header nav { flex: 1 0 100%; } header nav a { min-height: 34px !important; padding: 0 7px !important; font-size: 10px !important; letter-spacing: .08em !important; } header .outlaw-global-nav { flex-wrap: wrap !important; } header .outlaw-global-nav a { min-height: 29px !important; padding: 0 6px !important; font-size: 9px !important; } header .header-right { flex: 1 0 100%; justify-content: center; padding-left: 0 !important; } .hero { min-height: 590px !important; }.stories-heading { padding: 22px !important; }.story-page, .allowlist-page { width: min(100% - 24px, 1080px) !important; }.story-layout { padding: 24px !important; }
}

/* Chronicle, rules, laws and legal information */
.lore-chronicle, .rules-page, .laws-page, .privacy-main { color: #d4cdc3 !important; background: #080808 !important; border-color: rgba(240,107,25,.42) !important; box-shadow: 0 22px 70px rgba(0,0,0,.42) !important; }
.story-hero, .rules-hero, .laws-hero, .privacy-hero { color: #f4eee7 !important; background-color: #090909 !important; border-bottom: 1px solid var(--outlaw-orange) !important; }
.story-hero::before, .rules-hero::before, .laws-hero::before, .privacy-hero::before { background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.56)) !important; }
.story-hero h1, .rules-hero h1, .laws-hero h1, .privacy-hero h1 { color: #fff !important; font-family: 'Oswald', sans-serif !important; text-shadow: none !important; }
.frontier-kicker, .privacy-kicker { color: var(--outlaw-orange-light) !important; font-family: 'Oswald', sans-serif !important; letter-spacing: .16em !important; }
.story-hero p, .rules-hero p, .laws-hero p, .privacy-hero p { color: #c5bdb4 !important; }
.story-narrator, .rule-guides, .law-office, .privacy-grid, .privacy-note { background: #101010 !important; border-color: rgba(240,107,25,.32) !important; box-shadow: none !important; }
.story-narrator-portrait, .rule-guide img, .law-sheriff-card img, .law-deputy-card img { border-color: var(--outlaw-orange) !important; filter: saturate(.8) contrast(1.04) !important; }
.story-narrator h2, .rule-guides-copy h2, .law-office-copy h2, .privacy-grid h2 { color: #fff !important; font-family: 'Oswald', sans-serif !important; }
.story-narrator p, .rule-guides-copy p, .law-office-copy p, .privacy-grid p, .privacy-note { color: #c7beb5 !important; }
.story-contents, .rule-index, .law-index { background: #080808 !important; border-color: rgba(240,107,25,.38) !important; }
.story-contents a, .rule-index a, .law-index a { color: #ddd5cb !important; background: #121212 !important; border-color: rgba(240,107,25,.28) !important; }
.story-contents a:hover, .rule-index a:hover, .law-index a:hover { color: #160d07 !important; background: var(--outlaw-orange) !important; }
.story-divider { color: var(--outlaw-orange-light) !important; }.story-divider::before, .story-divider::after { background: rgba(240,107,25,.38) !important; }
.story-entry { background: #101010 !important; border-color: rgba(240,107,25,.32) !important; border-left-color: var(--outlaw-orange) !important; box-shadow: none !important; }
.story-entry-mark { color: var(--outlaw-orange) !important; border-color: var(--outlaw-orange) !important; background: #080808 !important; }.story-entry h2 { color: #fff !important; font-family: 'Oswald', sans-serif !important; }.story-entry p, .story-closing { color: #ccc4ba !important; }.story-closing { background: #12100e !important; border-color: rgba(240,107,25,.42) !important; }.story-closing span { color: var(--outlaw-orange-light) !important; }
.rule-dossier, .law-dossier { background: #101010 !important; border-color: rgba(240,107,25,.34) !important; box-shadow: none !important; }.rule-dossier summary, .law-dossier summary { color: #f4eee7 !important; background: #15110e !important; }.rule-dossier[open] summary, .law-dossier[open] summary { border-bottom-color: var(--outlaw-orange) !important; }.rule-dossier-number, .dossier-index, .rule-number { color: #160d07 !important; background: var(--outlaw-orange) !important; }.rule-dossier small, .law-dossier small, .rule-dossier-action, .dossier-action { color: var(--outlaw-orange-light) !important; }.rule-dossier-body, .dossier-body { background: #0b0b0b !important; }.category-title, .law-proclamation span { color: var(--outlaw-orange-light) !important; }.law-proclamation { color: #d0c7bd !important; background: #15110e !important; border-color: rgba(240,107,25,.36) !important; }
.punishment-box { color: #e0d8cf !important; background: #15110e !important; border-color: rgba(240,107,25,.36) !important; }.punishment-box i { color: var(--outlaw-orange) !important; }
.privacy-grid li { color: #c9c1b7 !important; }.privacy-grid li::marker { color: var(--outlaw-orange) !important; }

@media (max-width: 850px) {
  .story-hero, .rules-hero, .laws-hero, .privacy-hero { min-height: 310px !important; }.story-narrator, .rule-guides, .law-office, .story-entry { padding: 22px !important; }.story-entry { display: block !important; }.story-entry-mark { margin-bottom: 18px !important; }.rule-index, .law-index, .story-contents { grid-template-columns: 1fr !important; }
}
