/* =====================================================================
   wildwest.online — "RDR Cinematic Frontier" Design System
   Built on Bootstrap 5.3 (import Bootstrap CSS before this file)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Palette */
  --ww-dust-brown:      #8a6b4f;
  --ww-dust-brown-dark: #6b5138;
  --ww-blood-red:       #7a0a0a;
  --ww-blood-red-bright:#a31414;
  --ww-frontier-gold:   #c9a45b;
  --ww-gunsmoke-grey:   #3a3a3a;
  --ww-gunsmoke-black:  #1c1a17;
  --ww-weathered-paper: #f2e6d2;
  --ww-paper-dark:      #e4d3b0;
  --ww-ink:             #241d15;

  /* Semantic aliases */
  --ww-bg:              var(--ww-gunsmoke-black);
  --ww-bg-alt:          #26221c;
  --ww-surface:         var(--ww-weathered-paper);
  --ww-text-on-dark:    #e9dcc2;
  --ww-text-on-paper:   var(--ww-ink);
  --ww-accent:          var(--ww-frontier-gold);
  --ww-danger:          var(--ww-blood-red);

  /* Typography */
  --ww-font-display: "Rye", "Bebas Neue", Georgia, "Times New Roman", serif;
  --ww-font-body:    "Special Elite", "Courier New", monospace;
  --ww-font-sans:    "Oswald", "Arial Narrow", Arial, sans-serif;

  /* Radii / shadows */
  --ww-radius: 2px;
  --ww-shadow-deep: 0 10px 30px rgba(0,0,0,0.55);
  --ww-border-worn: 1px solid rgba(201,164,91,0.35);
}

/* ---------------------------------------------------------------------
   2. FONT IMPORTS (self-host in production; CDN fallback shown here)
   --------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Rye&family=Special+Elite&family=Oswald:wght@300;400;600;700&display=swap');

/* ---------------------------------------------------------------------
   3. BASE / RESET LAYER
   --------------------------------------------------------------------- */
body {
  background-color: var(--ww-bg);
  color: var(--ww-text-on-dark);
  font-family: var(--ww-font-sans);
  font-weight: 300;
  letter-spacing: 0.01em;
  position: relative;
}

/* Subtle overall grain/dust texture across the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 0, transparent 1px),
    repeating-radial-gradient(circle at 70% 80%, rgba(0,0,0,0.5) 0, transparent 1px);
  background-size: 3px 3px, 4px 4px;
}

h1, h2, h3, h4, .display-font {
  font-family: var(--ww-font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ww-frontier-gold);
}

a { color: var(--ww-frontier-gold); text-decoration: none; }
a:hover, a:focus { color: #e9c98a; text-decoration: underline; }

/* Accessible focus ring — WCAG 2.4.7 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ww-frontier-gold);
  outline-offset: 2px;
}

::selection { background: var(--ww-blood-red); color: #fff; }

/* ---------------------------------------------------------------------
   4. TEXTURES
   --------------------------------------------------------------------- */
.tex-wood {
  background-color: var(--ww-dust-brown-dark);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
}

.tex-leather {
  background-color: var(--ww-gunsmoke-grey);
  background-image:
    radial-gradient(circle at 25% 25%, rgba(0,0,0,0.25) 0, transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.25) 0, transparent 60%);
}

.tex-paper {
  background-color: var(--ww-weathered-paper);
  background-image:
    radial-gradient(rgba(139,107,79,0.08) 1px, transparent 1px);
  background-size: 4px 4px;
  color: var(--ww-text-on-paper);
}

/* Torn paper edge — used on card/panel bottoms */
.tex-torn-edge {
  position: relative;
}
.tex-torn-edge::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 10px;
  background:
    linear-gradient(135deg, transparent 50%, var(--ww-weathered-paper) 50%) 0 0/10px 10px repeat-x,
    linear-gradient(-135deg, transparent 50%, var(--ww-weathered-paper) 50%) 0 0/10px 10px repeat-x;
  background-position: 0 0, 5px 0;
}

/* Subtle bullet-hole overlay accents */
.tex-bullet-holes { position: relative; }
.tex-bullet-holes::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle 3px at 12% 40%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.15) 60%, transparent 61%),
    radial-gradient(circle 2px at 85% 20%, rgba(0,0,0,0.45) 40%, transparent 61%),
    radial-gradient(circle 2.5px at 60% 85%, rgba(0,0,0,0.4) 40%, transparent 61%);
}

/* ---------------------------------------------------------------------
   5. NAVBAR
   --------------------------------------------------------------------- */
.ww-navbar {
  background: linear-gradient(180deg, #1c1a17 0%, #14120f 100%);
  border-bottom: 3px solid var(--ww-frontier-gold);
  box-shadow: var(--ww-shadow-deep);
}
.ww-navbar .navbar-brand {
  font-family: var(--ww-font-display);
  font-size: 1.6rem;
  color: var(--ww-frontier-gold);
  letter-spacing: 0.05em;
}
.ww-navbar .nav-link {
  font-family: var(--ww-font-sans);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--ww-text-on-dark);
  padding: 0.5rem 0.9rem !important;
}
.ww-navbar .nav-link:hover,
.ww-navbar .nav-link.active { color: var(--ww-frontier-gold); }

/* ---------------------------------------------------------------------
   6. CINEMATIC HERO BANNER
   --------------------------------------------------------------------- */
.ww-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.ww-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,26,23,0.15) 0%, rgba(28,26,23,0.55) 55%, rgba(20,18,15,0.95) 100%);
  z-index: 1;
}
.ww-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.ww-hero-content { position: relative; z-index: 2; padding: 3rem 0; }
.ww-hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--ww-weathered-paper);
  text-shadow: 0 4px 24px rgba(0,0,0,0.8);
  margin-bottom: 0.5rem;
}
.ww-hero-tagline {
  font-family: var(--ww-font-body);
  color: var(--ww-frontier-gold);
  font-size: 1.15rem;
  max-width: 640px;
}

/* ---------------------------------------------------------------------
   7. DUST-BLOWN SECTION DIVIDERS
   --------------------------------------------------------------------- */
.ww-divider {
  height: 60px;
  background: linear-gradient(90deg, transparent, var(--ww-frontier-gold) 20%, var(--ww-frontier-gold) 80%, transparent);
  opacity: 0.5;
  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent),
              repeating-linear-gradient(100deg, black 0 3px, transparent 3px 5px);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.ww-divider-simple {
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ww-frontier-gold), transparent);
  margin: 3rem 0;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------
   8. WANTED-STYLE CHARACTER CARDS
   --------------------------------------------------------------------- */
.wanted-card {
  background: var(--ww-weathered-paper);
  color: var(--ww-text-on-paper);
  border: 6px double var(--ww-ink);
  border-radius: var(--ww-radius);
  box-shadow: var(--ww-shadow-deep);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.wanted-card:hover {
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}
.wanted-card__label {
  text-align: center;
  font-family: var(--ww-font-display);
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  padding-top: 0.75rem;
  color: var(--ww-blood-red);
}
.wanted-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: sepia(0.55) contrast(1.05) saturate(0.85);
  border-top: 2px solid var(--ww-ink);
  border-bottom: 2px solid var(--ww-ink);
}
.wanted-card__body { padding: 0.9rem 1rem 1.2rem; text-align: center; }
.wanted-card__name {
  font-family: var(--ww-font-display);
  font-size: 1.25rem;
  color: var(--ww-ink);
  margin-bottom: 0.25rem;
}
.wanted-card__tagline {
  font-family: var(--ww-font-body);
  font-size: 0.85rem;
  color: #4a3d2c;
}

/* ---------------------------------------------------------------------
   9. FRONTIER BADGES
   --------------------------------------------------------------------- */
.ww-badge {
  display: inline-block;
  font-family: var(--ww-font-sans);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.25);
}
.badge-outlaw     { background: var(--ww-blood-red);      color: #fff; }
.badge-lawman     { background: var(--ww-frontier-gold);  color: var(--ww-ink); }
.badge-gunslinger { background: var(--ww-gunsmoke-grey);  color: #f2e6d2; }
.badge-native     { background: #5a7247;                  color: #fff; }
.badge-woman      { background: #7a4a6a;                  color: #fff; }
.badge-settler    { background: var(--ww-dust-brown);     color: #fff; }

/* ---------------------------------------------------------------------
   10. BUTTONS
   --------------------------------------------------------------------- */
.btn-frontier {
  font-family: var(--ww-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  padding: 0.65rem 1.6rem;
  background: var(--ww-blood-red);
  border: 1px solid var(--ww-frontier-gold);
  color: #fff;
  border-radius: var(--ww-radius);
  transition: background 0.2s ease;
}
.btn-frontier:hover { background: var(--ww-blood-red-bright); color: #fff; }
.btn-frontier-outline {
  font-family: var(--ww-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  padding: 0.6rem 1.5rem;
  background: transparent;
  border: 1px solid var(--ww-frontier-gold);
  color: var(--ww-frontier-gold);
  border-radius: var(--ww-radius);
}
.btn-frontier-outline:hover { background: rgba(201,164,91,0.12); color: var(--ww-frontier-gold); }

/* ---------------------------------------------------------------------
   11. NEWSPAPER-STYLE STORY CARDS
   --------------------------------------------------------------------- */
.newspaper-card {
  background: var(--ww-weathered-paper);
  color: var(--ww-ink);
  border: 1px solid rgba(36,29,21,0.3);
  padding: 1.25rem;
  font-family: var(--ww-font-body);
}
.newspaper-card h3 {
  font-family: var(--ww-font-display);
  color: var(--ww-ink);
  text-transform: none;
  border-bottom: 2px solid var(--ww-ink);
  padding-bottom: 0.4rem;
}
.newspaper-card .eyebrow {
  font-family: var(--ww-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ww-blood-red);
}

/* ---------------------------------------------------------------------
   12. TIMELINE
   --------------------------------------------------------------------- */
.ww-timeline { position: relative; padding-left: 2.5rem; }
.ww-timeline::before {
  content: "";
  position: absolute; left: 0.9rem; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--ww-frontier-gold), var(--ww-dust-brown));
}
.ww-timeline-item { position: relative; margin-bottom: 2.5rem; }
.ww-timeline-item::before {
  content: "";
  position: absolute; left: -2.13rem; top: 0.3rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ww-blood-red);
  border: 3px solid var(--ww-frontier-gold);
}
.ww-timeline-year {
  font-family: var(--ww-font-display);
  color: var(--ww-frontier-gold);
  font-size: 1.4rem;
}

/* ---------------------------------------------------------------------
   13. MAP EXPLORER
   --------------------------------------------------------------------- */
.ww-map-wrap {
  position: relative;
  background: var(--ww-paper-dark);
  border: 4px solid var(--ww-ink);
  filter: sepia(0.3);
}
.ww-map-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  width: 22px; height: 22px;
  background: var(--ww-blood-red);
  border: 2px solid var(--ww-frontier-gold);
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -100%) rotate(-45deg);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  transition: transform 0.15s ease;
}
.ww-map-marker:hover,
.ww-map-marker:focus-visible { transform: translate(-50%, -100%) rotate(-45deg) scale(1.25); }
.ww-map-marker--fort     { background: var(--ww-gunsmoke-grey); }
.ww-map-marker--trail    { background: var(--ww-dust-brown); }
.ww-map-marker--battle_site { background: #4a0606; }
.ww-map-marker--landmark { background: #5a7247; }
.ww-map-tooltip {
  position: absolute;
  z-index: 20;
  background: var(--ww-weathered-paper);
  color: var(--ww-ink);
  border: 2px solid var(--ww-ink);
  padding: 0.6rem 0.8rem;
  max-width: 240px;
  font-size: 0.85rem;
  box-shadow: var(--ww-shadow-deep);
  display: none;
}
.ww-map-marker:hover + .ww-map-tooltip,
.ww-map-marker:focus-visible + .ww-map-tooltip { display: block; }

/* ---------------------------------------------------------------------
   14. GALLERY
   --------------------------------------------------------------------- */
.ww-gallery-item {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ww-ink);
  cursor: pointer;
}
.ww-gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.65) contrast(1.05);
  transition: transform 0.35s ease, filter 0.35s ease;
}
.ww-gallery-item:hover img { transform: scale(1.06); filter: sepia(0.2) contrast(1.1); }
.ww-gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   15. FOOTER
   --------------------------------------------------------------------- */
.ww-footer {
  background: #14120f;
  border-top: 3px solid var(--ww-frontier-gold);
  color: var(--ww-text-on-dark);
  font-size: 0.9rem;
}
.ww-footer a { color: var(--ww-text-on-dark); }
.ww-footer a:hover { color: var(--ww-frontier-gold); }

/* ---------------------------------------------------------------------
   16. UTILITIES
   --------------------------------------------------------------------- */
.text-blood   { color: var(--ww-blood-red); }
.text-gold    { color: var(--ww-frontier-gold); }
.bg-paper     { background: var(--ww-weathered-paper); color: var(--ww-ink); }
.font-display { font-family: var(--ww-font-display); }
.font-body    { font-family: var(--ww-font-body); }
.section-heading {
  font-family: var(--ww-font-display);
  font-size: 2rem;
  border-bottom: 3px solid var(--ww-blood-red);
  display: inline-block;
  padding-bottom: 0.3rem;
  margin-bottom: 1.5rem;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ww-frontier-gold); color: var(--ww-ink);
  padding: 0.75rem 1.25rem; z-index: 10000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------------
   17. ACCESSIBILITY: reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------------
   18. OLD NEWSPAPER MODE (optional toggle: <body class="mode-newspaper">)
   --------------------------------------------------------------------- */
body.mode-newspaper {
  background: var(--ww-weathered-paper);
  color: var(--ww-ink);
}
body.mode-newspaper .ww-navbar { background: var(--ww-ink); }
body.mode-newspaper h1, body.mode-newspaper h2, body.mode-newspaper h3 { color: var(--ww-ink); }