:root{
  --black:#070707;
  --ink:#11100d;
  --paper:#fff2cf;
  --paper-deep:#f1d997;
  --bone:#fff8df;
  --green:#8cff00;
  --green-dim:#5da316;
  --purple:#a229ff;
  --purple-deep:#6b1fb3;
  --yellow:#ffd400;
  --gold:#d49a22;
  --muted:#5a4d35;
  --line:#101010;
  --max:1180px;
  --font-head: Georgia, 'Times New Roman', serif;
  --font-body: Arial, Helvetica, sans-serif;
  --font-condensed: 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--black);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.62;
  text-rendering:optimizeLegibility;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(140,255,0,.11), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(162,41,255,.12), transparent 28%),
    linear-gradient(transparent 95%, rgba(255,212,0,.08) 96%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 4px);
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 24px; position:relative; z-index:1}
.skip{position:absolute; left:-999px; top:0; background:var(--yellow); color:#000; padding:10px 14px; z-index:5}
.skip:focus{left:12px; top:12px}
.site-header{
  position:relative; z-index:2;
  background:#060606;
  border-bottom:4px solid var(--purple);
  box-shadow:0 4px 0 var(--green), 0 8px 0 var(--black);
}
.nav-wrap{max-width:var(--max); margin:0 auto; padding:18px 24px; display:flex; align-items:flex-end; gap:28px; justify-content:space-between}
.brand{display:block; text-decoration:none; min-width:260px}
.brand-main{
  display:block; color:var(--bone); font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.07em; font-size:2rem; line-height:.9; font-weight:900;
  text-shadow:3px 0 0 #000, 0 3px 0 #000;
}
.brand-main .green{color:var(--green)}
.brand-tag{display:block; color:var(--purple); font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.13em; font-size:.82rem; font-weight:800; margin-top:8px}
.nav{display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
.nav a{color:var(--bone); text-decoration:none; font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.1em; font-size:.86rem; font-weight:900; padding:6px 0; border-bottom:3px solid transparent}
.nav a:hover,.nav a.active{color:var(--green); border-bottom-color:var(--green)}
.page-shell{padding:42px 0 54px}
.paper{
  background:var(--paper);
  border:4px solid var(--line);
  outline:4px solid var(--yellow);
  box-shadow:0 0 0 8px var(--purple), 0 14px 0 rgba(0,0,0,.4);
  padding:clamp(24px,4vw,56px);
  position:relative;
}
.paper:before,.paper:after{content:""; position:absolute; width:46px; height:46px; border-color:var(--line); opacity:.85}
.paper:before{top:12px; left:12px; border-left:3px solid; border-top:3px solid}
.paper:after{right:12px; bottom:12px; border-right:3px solid; border-bottom:3px solid}
.page-title,.hero-title{
  margin:0;
  font-family:var(--font-condensed);
  line-height:.96;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:1000;
  color:#060606;
  text-wrap:balance;
}
.hero-title{font-size:clamp(3.4rem,9vw,7.5rem); max-width:760px}
.hero-title .purple{color:var(--purple)}
.page-title{font-size:clamp(3rem,7vw,6.2rem); text-align:center}
.kicker{font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.16em; color:var(--green-dim); font-weight:900; margin:0 0 12px}
.subtitle{font-family:var(--font-head); font-size:clamp(1.25rem,3vw,2rem); color:var(--purple); font-style:italic; line-height:1.25; margin:16px 0 0; text-wrap:balance}
.lead{font-size:clamp(1.1rem,2vw,1.35rem); max-width:790px; margin:26px 0 0}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.callout{
  border:3px solid var(--line);
  padding:28px;
  background:#fff7dc;
  box-shadow:8px 8px 0 var(--yellow);
}
.callout h2{margin:0 0 10px; font-family:var(--font-condensed); text-transform:uppercase; color:var(--green-dim); letter-spacing:.08em; font-size:1.25rem}
.callout p{margin:0}
.actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:10px; border:3px solid #000; color:#050505; text-decoration:none; padding:12px 18px; font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.08em; font-weight:900; background:var(--green); box-shadow:5px 5px 0 #000; transition:transform .08s ease, box-shadow .08s ease}
.btn:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 #000}
.btn.alt{background:var(--paper); color:#000; border-color:#000}
.btn.purple{background:var(--purple); color:var(--bone)}
.divider{margin:36px 0 24px; display:flex; align-items:center; gap:16px; color:var(--purple); font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.16em; font-weight:900}
.divider:before,.divider:after{content:""; height:3px; background:#000; flex:1; box-shadow:0 5px 0 var(--yellow)}
.grid{display:grid; gap:18px}
.grid.four{grid-template-columns:repeat(4,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{border:3px solid #000; padding:20px; background:#fff8df; box-shadow:5px 5px 0 var(--purple)}
.card.green{box-shadow:5px 5px 0 var(--green)}
.card.yellow{box-shadow:5px 5px 0 var(--yellow)}
.card h2,.card h3{font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.07em; font-size:1.5rem; line-height:1; margin:0 0 10px}
.card p{margin:.35rem 0 0}
.card .status{display:inline-block; background:#000; color:var(--yellow); border:2px solid var(--yellow); padding:5px 9px; font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.1em; font-weight:900; margin-top:12px}
.icon{display:inline-grid; place-items:center; width:52px; height:52px; background:#000; color:var(--green); border:3px solid var(--purple); border-radius:50%; font-weight:900; font-size:1.25rem; margin-bottom:12px}
.text-cols{columns:2 360px; column-gap:46px; max-width:980px; margin:24px auto 0}
.text-cols p{break-inside:avoid; margin-top:0}
.notice{background:#070707; color:var(--bone); border:4px solid var(--yellow); padding:22px; margin-top:28px}
.notice strong{color:var(--green); font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.08em}
.notice a{color:var(--yellow); font-weight:700}
.center{text-align:center}.center .lead{margin-left:auto; margin-right:auto}
.email-box{display:inline-block; background:#000; color:var(--green); border:3px solid var(--yellow); padding:14px 18px; font-size:clamp(1.05rem,3vw,1.45rem); font-weight:800; text-decoration:none; overflow-wrap:anywhere; box-shadow:6px 6px 0 var(--purple); margin:14px 0}
.site-footer{position:relative; z-index:2; background:#050505; color:var(--bone); border-top:4px solid var(--purple); padding:32px 0; font-size:.95rem}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px}
.site-footer h2,.site-footer h3{font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.08em; margin:0 0 8px; color:var(--green)}
.site-footer ul{list-style:none; padding:0; margin:0; columns:2}
.site-footer a{color:var(--bone); text-decoration:none}
.site-footer a:hover{color:var(--yellow)}
.motto{margin-top:16px; padding-top:14px; border-top:1px solid #333; color:var(--yellow); font-family:var(--font-condensed); text-transform:uppercase; letter-spacing:.16em; font-weight:900}
.tiny{font-size:.85rem; color:#b7b095}
@media (max-width:820px){
  body{font-size:17px}
  .nav-wrap{display:block; padding:16px}
  .brand{min-width:0; margin-bottom:14px}
  .brand-main{font-size:1.6rem}
  .nav{justify-content:flex-start; gap:12px}
  .nav a{font-size:.78rem; padding:6px 0}
  .page-shell{padding:28px 0 40px}
  .container{padding:0 14px}
  .paper{padding:26px 18px; outline-width:3px; box-shadow:0 0 0 5px var(--purple), 0 10px 0 rgba(0,0,0,.4)}
  .hero-grid,.grid.two,.grid.four,.footer-grid{grid-template-columns:1fr}
  .hero-title{font-size:clamp(3rem,16vw,5.4rem)}
  .page-title{font-size:clamp(2.6rem,14vw,5rem)}
  .actions{display:grid; grid-template-columns:1fr}
  .btn{justify-content:center}
  .callout{box-shadow:5px 5px 0 var(--yellow); padding:20px}
  .email-box{display:block; text-align:center}
  .site-footer ul{columns:1}
}