:root {
  --bg: #090909;
  --bg-2: #111111;
  --panel: rgba(24,24,24,.94);
  --paper: #d9d0bd;
  --paper-2: #bfb49d;
  --ink: #eee9de;
  --muted: #aaa49a;
  --red: #a51f1f;
  --red-bright: #d23a32;
  --rust: #76533e;
  --line: #34312d;
  --green: #6d8f66;
  --amber: #c49552;
  --max: 1180px;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(128,29,29,.13), transparent 26rem),
    radial-gradient(circle at 84% 24%, rgba(93,70,48,.11), transparent 25rem),
    linear-gradient(180deg, #0a0a0a, #0d0d0d 45%, #080808);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
  z-index: 20;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button, .button { -webkit-tap-highlight-color: transparent; }

.wrap { width: min(var(--max), calc(100% - 36px)); margin-inline: auto; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8,8,8,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.header-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand { text-decoration: none; display: inline-flex; flex-direction: column; line-height: .9; letter-spacing: .04em; }
.brand-top { font-size: 1.08rem; font-weight: 950; color: #efede7; text-transform: uppercase; }
.brand-bottom { font-size: 1.32rem; font-weight: 950; color: var(--red-bright); text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 5px; }
.nav a {
  color: #cbc6bc;
  text-decoration: none;
  font-weight: 750;
  font-size: .88rem;
  padding: 9px 10px;
  border-radius: 8px;
}
.nav a:hover, .nav a[aria-current="page"] { background: #1a1817; color: white; }
.header-actions { display:flex; gap:8px; }
.mobile-toggle { display:none; border:1px solid var(--line); background:#171717; color:white; border-radius:8px; padding:8px 10px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 15px;
  border: 1px solid #4a4843;
  border-radius: 7px;
  background: #181818;
  color: #f1eee8;
  text-decoration: none;
  font-weight: 850;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); border-color:#76716a; background:#222; }
.button.primary { background: var(--red); border-color: #ce3f38; color:white; box-shadow: 0 8px 28px rgba(147,25,25,.22); }
.button.primary:hover { background:#b52725; }
.button.ghost { background: transparent; }
.button.small { padding:8px 11px; font-size:.88rem; }
.button.block { width:100%; }

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:140px;
  background:linear-gradient(transparent, var(--bg));
  pointer-events:none;
}
.hero-grid {
  min-height: 660px;
  display:grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 48px;
  align-items:center;
  padding: 66px 0 96px;
}
.kicker {
  color: var(--red-bright);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 13px;
}
.display {
  margin: 0;
  font-size: clamp(3.6rem, 8vw, 7.2rem);
  line-height: .82;
  letter-spacing: -.055em;
  text-transform: uppercase;
  font-weight: 1000;
  text-wrap: balance;
}
.display .red { color: var(--red-bright); }
.lede { max-width: 680px; font-size: 1.13rem; color:#c7c2b9; margin: 25px 0 28px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:26px; color:#969087; font-size:.88rem; }
.hero-meta strong { color:#e6e1d8; }
.hero-art {
  position:relative;
  perspective: 1200px;
}
.hero-art img {
  border: 1px solid #3a3530;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transform: rotate(1.2deg);
  width:100%;
  max-height: 500px;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.03) saturate(.92);
}
.hero-art::before {
  content:"TRANSMISSION // KNOX COUNTY";
  position:absolute;
  top:-16px;
  left:-18px;
  background:#d9d0bd;
  color:#171410;
  padding:7px 12px;
  z-index:2;
  font: 900 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.08em;
  transform: rotate(-2deg);
  box-shadow:0 7px 22px rgba(0,0,0,.28);
}

.status-strip { margin-top:-34px; position:relative; z-index:8; }
.status-card {
  background: linear-gradient(180deg, #171717, #111);
  border:1px solid #3b3834;
  border-radius:10px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns: 1.25fr repeat(3, .7fr) auto;
  gap: 1px;
  overflow:hidden;
}
.status-item { padding: 18px 20px; border-right:1px solid #2b2926; }
.status-label { color:#868077; font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; font-weight:850; }
.status-value { font-weight:950; margin-top:4px; font-size:1.02rem; }
.status-value.online { color:#82b77f; }
.status-value.offline { color:#d45d56; }
.status-value.unknown { color:#d0a562; }
.status-action { display:flex; align-items:center; justify-content:center; padding:12px 15px; }

.section { padding: 88px 0; }
.section.compact { padding: 58px 0; }
.section.alt { background: rgba(255,255,255,.018); border-block:1px solid rgba(255,255,255,.045); }
.section-head { max-width: 780px; margin-bottom: 34px; }
.eyebrow { color: var(--red-bright); text-transform: uppercase; letter-spacing: .16em; font-size:.72rem; font-weight:950; }
.section h2, .page-title { margin: 7px 0 10px; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height:1; letter-spacing:-.035em; text-transform:uppercase; font-weight:1000; }
.section-head p, .page-intro { color:#aaa49b; font-size:1.04rem; }

.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.card {
  background: linear-gradient(180deg, rgba(27,27,27,.96), rgba(18,18,18,.96));
  border:1px solid #302e2b;
  border-radius:10px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.card h3 { margin:0 0 8px; font-size:1.1rem; }
.card p { color:#a9a39a; margin:.45rem 0 0; }
.icon-box { width:42px; height:42px; display:grid; place-items:center; border:1px solid #443f39; border-radius:8px; background:#151312; margin-bottom:15px; font-size:1.28rem; }

.feature-card { min-height:180px; }
.feature-card strong { display:block; font-size:1.06rem; margin-bottom:5px; }
.feature-card span { color:#9f998f; font-size:.93rem; }

.paper {
  background:
    linear-gradient(rgba(96,70,46,.06) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 28px;
  color:#211e19;
  border-radius:5px;
  padding:30px;
  box-shadow:var(--shadow);
  position:relative;
}
.paper::after { content:""; position:absolute; inset:0; border:1px solid rgba(77,55,37,.28); pointer-events:none; border-radius:inherit; }
.paper h2, .paper h3 { color:#211e19; }
.paper p { color:#4e473d; }
.paper .red-ink { color:#861f1e; }

.broadcast {
  border:1px solid #4a3d34;
  background: linear-gradient(135deg, rgba(95,25,20,.23), rgba(20,20,20,.95) 35%);
  border-radius:10px;
  padding:28px;
  position:relative;
  overflow:hidden;
}
.broadcast::before { content:"EMERGENCY BROADCAST"; position:absolute; top:14px; right:-38px; transform:rotate(33deg); color:rgba(210,58,50,.09); font-size:2rem; font-weight:1000; letter-spacing:.08em; }
.broadcast p { max-width:780px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#c8c2b8; }

.poster-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.poster-card { position:relative; overflow:hidden; border-radius:8px; border:1px solid #3c3833; background:#111; box-shadow:var(--shadow); }
.poster-card img { aspect-ratio: .74; width:100%; object-fit:cover; object-position:top; transition:transform .3s ease, filter .3s ease; }
.poster-card:hover img { transform:scale(1.02); filter:brightness(1.05); }
.poster-card .poster-info { position:absolute; left:0; right:0; bottom:0; padding:48px 18px 17px; background:linear-gradient(transparent, rgba(0,0,0,.95)); }
.poster-card h3 { margin:0; font-size:1.2rem; }
.poster-card p { margin:3px 0 0; color:#bbb4ab; font-size:.88rem; }
.poster-card a { position:absolute; inset:0; z-index:3; }

.page-hero { padding:76px 0 50px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(139,26,24,.08), transparent); }
.breadcrumbs { font-size:.8rem; color:#8c867d; text-transform:uppercase; letter-spacing:.12em; margin-bottom:12px; }

.server-connect { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start; }
.connection-box { background:#101010; border:1px solid #3d3935; border-radius:10px; overflow:hidden; }
.connection-row { display:grid; grid-template-columns:120px 1fr auto; gap:14px; align-items:center; padding:16px 18px; border-bottom:1px solid #2a2825; }
.connection-row:last-child { border-bottom:0; }
.connection-row .label { color:#827d75; text-transform:uppercase; font-size:.72rem; letter-spacing:.12em; font-weight:900; }
.connection-row code { color:#f0ece5; font-weight:900; font-size:1rem; overflow-wrap:anywhere; }

.steps { counter-reset: steps; display:grid; gap:14px; }
.step { counter-increment:steps; display:grid; grid-template-columns:48px 1fr; gap:15px; align-items:start; }
.step::before { content:counter(steps); width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--red); color:#fff; font-weight:1000; border:2px solid #cc443d; }
.step h3 { margin:2px 0 4px; }
.step p { margin:0; color:#9f998f; }

.rule-list { display:grid; gap:12px; counter-reset:rules; }
.rule { counter-increment:rules; display:grid; grid-template-columns:70px 1fr; gap:18px; padding:20px; border:1px solid #302d29; border-radius:8px; background:#121212; }
.rule::before { content:"0" counter(rules); font:1000 1.65rem/1 ui-monospace, monospace; color:var(--red-bright); }
.rule h3 { margin:0 0 5px; }
.rule p { margin:0; color:#aaa39a; }

.form-panel { background:#111; border:1px solid #37332f; border-radius:10px; padding:24px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { color:#c8c1b7; font-size:.85rem; font-weight:850; }
.field input, .field textarea, .field select {
  width:100%;
  border:1px solid #3a3733;
  border-radius:7px;
  background:#0c0c0c;
  color:#f0ece6;
  padding:11px 12px;
  outline:none;
}
.field textarea { min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:#80504a; box-shadow:0 0 0 3px rgba(165,31,31,.12); }
.form-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:15px; }
.helper { color:#817b73; font-size:.82rem; }

.mod-toolbar { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.search-input { flex:1; min-width:220px; border:1px solid #3b3733; border-radius:7px; background:#101010; color:#eee; padding:11px 13px; }
.mod-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mod-card { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:start; padding:16px; background:#121212; border:1px solid #302e2b; border-radius:8px; }
.mod-card h3 { margin:0 0 4px; font-size:1rem; }
.mod-card p { margin:0; color:#989289; font-size:.88rem; }
.mod-id { display:block; color:#716c64; font:700 .74rem ui-monospace, monospace; margin-top:7px; }

.timeline { position:relative; margin-left:8px; }
.timeline::before { content:""; position:absolute; left:9px; top:4px; bottom:4px; width:1px; background:#413d38; }
.timeline-item { position:relative; padding-left:42px; margin-bottom:26px; }
.timeline-item::before { content:""; position:absolute; left:3px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--red); border:3px solid #2f1010; }
.timeline-date { color:#a79f95; text-transform:uppercase; letter-spacing:.11em; font-size:.75rem; font-weight:900; }
.timeline-item h3 { margin:3px 0 5px; }
.timeline-item p { margin:0; color:#9f998f; }

.gallery-modal { position:fixed; inset:0; background:rgba(0,0,0,.88); display:none; place-items:center; z-index:80; padding:20px; }
.gallery-modal.open { display:grid; }
.gallery-modal img { max-height:90vh; max-width:min(900px,95vw); border:1px solid #514b44; box-shadow:0 25px 90px #000; }
.gallery-modal button { position:fixed; top:18px; right:18px; }

.notice { border-left:4px solid var(--amber); background:#18150f; padding:15px 17px; color:#c4b9a9; border-radius:4px; }
.notice strong { color:#e4d8c7; }
.notice.danger { border-left-color:var(--red-bright); background:#1b1110; }
.notice.success { border-left-color:var(--green); background:#101711; }

.tag-row { display:flex; flex-wrap:wrap; gap:7px; }
.tag { border:1px solid #383430; background:#161514; color:#b7b1a8; border-radius:999px; padding:5px 9px; font-size:.76rem; font-weight:800; }

.cta {
  background:linear-gradient(135deg, #171313, #0e0e0e 60%);
  border:1px solid #49312f;
  border-radius:12px;
  padding:40px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
}
.cta h2 { margin:0 0 8px; font-size:clamp(1.8rem,4vw,3rem); }
.cta p { margin:0; color:#aaa39a; }

.site-footer { border-top:1px solid #2a2825; margin-top:60px; background:#070707; }
.footer-inner { display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:38px; padding:48px 0; }
.footer-title { font-weight:1000; font-size:1.25rem; text-transform:uppercase; }
.footer-title span { color:var(--red-bright); }
.footer-copy { color:#858078; font-size:.88rem; max-width:420px; }
.footer-links { display:grid; gap:7px; }
.footer-links a { color:#a9a39a; text-decoration:none; font-size:.9rem; }
.footer-links a:hover { color:white; }
.footer-bottom { border-top:1px solid #20201e; color:#6f6a63; padding:16px 0 24px; font-size:.78rem; }

.toast { position:fixed; right:18px; bottom:18px; background:#e6ddd0; color:#1b1713; border-radius:8px; padding:11px 14px; font-weight:850; box-shadow:0 12px 45px rgba(0,0,0,.4); transform:translateY(25px); opacity:0; pointer-events:none; transition:.2s ease; z-index:100; }
.toast.show { opacity:1; transform:translateY(0); }

@media (max-width: 1020px) {
  .nav { display:none; position:absolute; top:74px; left:0; right:0; background:#0a0a0a; padding:12px 18px 18px; border-bottom:1px solid #2f2d2a; flex-direction:column; align-items:stretch; }
  .nav.open { display:flex; }
  .nav a { padding:11px 12px; }
  .mobile-toggle { display:block; }
  .header-actions .button.ghost { display:none; }
  .hero-grid { grid-template-columns:1fr; min-height:auto; padding-top:52px; }
  .hero-art { max-width:720px; }
  .status-card { grid-template-columns:repeat(2,1fr); }
  .status-item { border-bottom:1px solid #2b2926; }
  .status-action { grid-column:1/-1; }
  .server-connect { grid-template-columns:1fr; }
  .poster-grid { grid-template-columns:repeat(2,1fr); }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr 1fr; }
}

@media (max-width: 700px) {
  .wrap { width:min(100% - 24px, var(--max)); }
  .header-inner { min-height:66px; }
  .nav { top:66px; }
  .brand-top { font-size:.95rem; }
  .brand-bottom { font-size:1.13rem; }
  .header-actions .button.primary { display:none; }
  .hero-grid { gap:34px; padding-bottom:75px; }
  .display { font-size:clamp(3.2rem,17vw,5.3rem); }
  .lede { font-size:1rem; }
  .hero-art img { max-height:430px; }
  .status-strip { margin-top:-26px; }
  .status-card { grid-template-columns:1fr 1fr; }
  .status-item { padding:14px; }
  .section { padding:64px 0; }
  .grid-2, .grid-3, .grid-4, .poster-grid, .mod-list, .footer-inner { grid-template-columns:1fr; }
  .poster-grid { gap:14px; }
  .poster-card img { aspect-ratio:.85; }
  .connection-row { grid-template-columns:1fr auto; gap:7px; }
  .connection-row .label { grid-column:1/-1; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .rule { grid-template-columns:52px 1fr; gap:10px; padding:16px; }
  .cta { grid-template-columns:1fr; padding:26px; }
  .cta .hero-actions { width:100%; }
}

/* Website submissions / donation flow */
.button:disabled { opacity:.58; cursor:not-allowed; transform:none; }
.form-status {
  margin-top:14px;
  border-left:4px solid var(--amber);
  background:#18150f;
  padding:12px 14px;
  color:#c4b9a9;
  border-radius:4px;
  font-size:.9rem;
}
.form-status.success { border-left-color:var(--green); background:#101711; color:#c7d8c4; }
.form-status.danger { border-left-color:var(--red-bright); background:#1b1110; color:#e1b4af; }
.account-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px;
  border:1px solid #37332f;
  border-radius:10px;
  background:#111;
}
.account-status { margin-top:5px; color:#c5bfb5; }
.account-actions { margin-top:0; justify-content:flex-end; }
.donation-amounts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.mini-steps .step { grid-template-columns:40px 1fr; gap:11px; }
.mini-steps .step::before { width:34px; height:34px; font-size:.86rem; }
.mini-steps .step h3 { font-size:.95rem; }
.mini-steps .step p { font-size:.86rem; }

@media (max-width: 700px) {
  .account-card { align-items:stretch; flex-direction:column; }
  .account-actions { justify-content:flex-start; }
}