@import url('https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.css');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap');

:root{--brand-red:#D90429;--brand-black:#0B0B0C;--brand-white:#FFFFFF;--text:#111;--muted:#555;--link:#D90429;--t5150-logo:url('/assets/img/trust5150-logo-red.png');--font-ui:'Orbitron',sans-serif;--font-body:'Hack',ui-monospace,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace}
:root.font-hack{--font-body:'Hack',ui-monospace,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace}
:root.font-share{--font-body:'Share Tech Mono',ui-monospace,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace}
:root.font-vt{--font-body:'VT323',ui-monospace,monospace}
:root.font-futurism{--font-ui:'Orbitron',sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);line-height:1.6;color:var(--text);background:#0B0B0C;background-image:linear-gradient(180deg, rgba(11,11,12,.75), rgba(11,11,12,.82)), url('/assets/img/texture-bg.png');background-size:cover;background-repeat:no-repeat;background-attachment:fixed}

/* Use UI font for headers and nav */
h1,h2,h3,h4,h5,h6,.brand-name,header nav,header .brand{font-family:var(--font-ui);letter-spacing:.5px}

/* Minor tuning for VT323 readability */
.font-vt body{font-size:17px;letter-spacing:.2px}
header,main,footer{max-width:960px;margin:0 auto;padding:1rem}
main{background:rgba(255,255,255,.9);border-radius:12px;padding:1rem;backdrop-filter:saturate(1.2) blur(2px);box-shadow:0 8px 22px rgba(0,0,0,.15)}
footer{background:rgba(255,255,255,.85);border-radius:12px;margin-top:1rem}
/* Social icons */
.social{display:flex;gap:.6rem;align-items:center;margin-top:.5rem}
.social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.9)}
.social a:hover{border-color:var(--brand-red);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.social a svg{width:18px;height:18px;fill:#1b1e23}
header{display:flex;flex-direction:column;gap:.5rem;border-bottom:3px solid var(--brand-black)}
/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#000;color:#fff;padding:.5rem .75rem;border-radius:.35rem;z-index:100000;outline:2px solid var(--brand-red)}
/* Brand styles */
header h1{margin:0}
header h1 a{text-decoration:none;color:var(--brand-black)}
header .brand{display:inline-flex;align-items:center;gap:.65rem;margin:.25rem 0}
.brand-logo{width:44px;height:44px;border-radius:.35rem;border:1px solid #ddd;box-shadow:0 3px 12px rgba(0,0,0,.2);background:#fff;object-fit:contain}
.brand-name{display:inline-flex;align-items:baseline;gap:.35rem;letter-spacing:.02em;font-weight:800;text-transform:uppercase;color:var(--brand-black);font-size:clamp(1.4rem,2.4vw,2.2rem)}
.brand-trust{opacity:.95}
.brand-5150{background:var(--brand-red);color:#fff;padding:.05rem .35rem;border-radius:.3rem;letter-spacing:.04em}
.brand-sol{font-weight:700;opacity:.9}
/* Links */
nav a{color:var(--link);text-decoration:none}
a{color:var(--link)}
/* Buttons */
.btn{display:inline-block;background:var(--brand-red);color:#fff;padding:.5rem .9rem;border-radius:.5rem;text-decoration:none}
.btn.secondary{background:#1f2937;color:#fff;border:1px solid #111}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap}
.section{margin:1rem 0}
/* Lists */
.itemlist li{margin:.5rem 0}
.catlist li{margin:.5rem 0}
/* News list */
.news{list-style:none;padding:0;margin:.5rem 0}
.news li{margin:.4rem 0;padding:.4rem .6rem;border:1px solid rgba(0,0,0,.08);border-radius:.5rem;background:rgba(255,255,255,.92)}
.news small{color:#666;margin-left:.4rem}
/* Notes & footer */
.note{color:var(--muted);font-size:.9rem}
footer{border-top:1px solid #eee;color:var(--muted)}

/* --- Visual upgrade: header, brand, and navigation --- */
/* Full header refresh with dark brand bar and improved navigation */
header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem 1rem;
  background:var(--brand-black);
  color:var(--brand-white);
  border:0;
  border-radius:12px;
  padding:12px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}
header::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--t5150-logo);
  background-repeat:no-repeat;
background-position:center center;
  background-size:90% auto;
  opacity:.18;
  pointer-events:none;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.35));
}
/* Brand: bigger, cleaner logo and high-contrast wordmark */
.brand-logo{
  display:none !important;
}
header h1{ margin:0 }
header h1 a{ text-decoration:none; color:var(--brand-white) }
header .brand{ display:inline-flex; align-items:center; gap:.75rem; margin:.25rem 0 }
.brand-name{ color:var(--brand-white); font-weight:800; letter-spacing:.02em; text-transform:uppercase; font-size:clamp(1.4rem,2.4vw,2.2rem) }
.brand-trust{ opacity:.95 }
.brand-5150{ background:var(--brand-red); color:#fff; padding:.05rem .4rem; border-radius:.35rem; letter-spacing:.04em }
.brand-sol{ font-weight:700; opacity:.9 }

/* Navigation: pill links with subtle hover */
header nav{ display:flex; flex-wrap:wrap; gap:.5rem }
header nav a{
  color:#eee;
  text-decoration:none;
  padding:.3rem .6rem;
  border-radius:.45rem;
  border:1px solid rgba(255,255,255,.08);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
header nav a:hover, header nav a:focus{
  background: rgba(217,4,41,.25);
  border-color: rgba(217,4,41,.65);
  color: #fff;
  outline: none;
}

/* Tagline inside header */
header > p{ margin:.25rem 0 0; color:#cfd1d4 }

/* Content links remain brand red; override header only */
body > main a{ color:var(--link) }

/* Responsive tweaks */
@media (max-width: 640px){
  .brand-logo{ width:48px; height:48px }
  header{ padding:10px 12px }
}