:root{
  --black:#020302;
  --green:#3f7628;
  --green-bright:#74a84a;
  --bone:#eee7d8;
  --muted:#c2baaa;
  --line:rgba(238,231,216,.32);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--black);
  color:var(--bone);
  font-family:Impact,Haettenschweiler,"Arial Narrow",Arial,sans-serif;
  letter-spacing:.08em;
}
a{color:inherit;text-decoration:none}
p{font-family:Arial,Helvetica,sans-serif;letter-spacing:.06em;line-height:1.7}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.art-hero{
  position:relative;
  width:100%;
  background:#000;
}
.hero-art{
  display:block;
  width:100%;
  height:auto;
  filter:contrast(1.08) brightness(1.03);
}
.real-fort-banner{
  position:absolute;
  left:61.4%;
  top:76.9%;
  width:33.6%;
  height:17.1%;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.18) 54%,rgba(0,0,0,.46) 100%),
    linear-gradient(0deg,rgba(0,0,0,.42),rgba(0,0,0,.42)),
    url("assets/spike-fort.jpg") center center/cover no-repeat;
  border-left:1px solid rgba(238,231,216,.12);
  filter:grayscale(1) contrast(1.22) brightness(.72);
  pointer-events:none;
}
.hotspot{
  position:absolute;
  z-index:2;
  display:block;
  overflow:hidden;
  color:transparent;
  text-indent:-999px;
  border:1px solid transparent;
}
.hotspot:focus-visible,.mobile-enter:focus-visible{
  outline:2px solid var(--green-bright);
  outline-offset:2px;
}
.nav-home{left:21.5%;top:4.7%;width:4.9%;height:3.7%}
.nav-info{left:28.1%;top:4.7%;width:8.3%;height:3.7%}
.nav-challenge{left:38.1%;top:4.7%;width:12.8%;height:3.7%}
.nav-how{left:52.2%;top:4.7%;width:11.7%;height:3.7%}
.nav-location{left:64.6%;top:4.7%;width:9.6%;height:3.7%}
.nav-faq{left:74.2%;top:4.7%;width:5.2%;height:3.7%}
.nav-enter{left:84.1%;top:3.8%;width:11.4%;height:5.1%}
.hero-enter{left:74.6%;top:44.1%;width:14.7%;height:4.8%}
.hero-learn{left:74.6%;top:50.6%;width:14.7%;height:4.8%}
.event-info-link{left:8.4%;top:87.2%;width:10.8%;height:4.6%}
.mobile-enter{display:none}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.section{
  padding:86px 0;
  border-top:1px solid rgba(215,208,194,.1);
  background:
    linear-gradient(180deg,rgba(0,0,0,.84),rgba(0,0,0,.97)),
    url("assets/spike-fort.jpg") center/cover fixed;
}
.section:nth-of-type(even){background-color:#050605}
.eyebrow{
  margin:0 0 12px;
  color:var(--green-bright);
  text-transform:uppercase;
}
h2{
  margin:0 0 18px;
  color:var(--green);
  text-transform:uppercase;
  line-height:1;
  font-size:clamp(2.2rem,5vw,4.8rem);
}
.two-col{display:grid;grid-template-columns:1fr .9fr;gap:54px;align-items:start}
.info-panel,.challenge-grid article,.enter-box,.location-card{
  border:1px solid var(--line);
  background:rgba(0,0,0,.78);
  box-shadow:inset 0 0 42px rgba(63,118,40,.12),0 16px 40px rgba(0,0,0,.32);
  padding:30px;
}
.info-panel h3,.challenge-grid h3{
  margin:0 0 12px;
  color:var(--bone);
  text-transform:uppercase;
}
.info-panel li{margin:12px 0;font-family:Arial,Helvetica,sans-serif;letter-spacing:.05em}
.legal-note{color:var(--muted);border-left:3px solid var(--green);padding-left:14px}
.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps{margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding:18px 0 18px 70px;border-bottom:1px solid var(--line)}
.steps li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:15px;
  width:42px;
  height:42px;
  border:2px solid var(--green);
  display:grid;
  place-items:center;
  color:var(--green-bright);
}
.steps strong{display:block;text-transform:uppercase}
.steps span{display:block;margin-top:4px;color:var(--muted);font-family:Arial,Helvetica,sans-serif;letter-spacing:.05em}
.location-card{display:flex;align-items:center;justify-content:space-between;gap:28px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 24px;
  border:2px solid var(--green);
  text-transform:uppercase;
  color:var(--green-bright);
  font-weight:900;
  letter-spacing:.16em;
}
.button.primary{background:linear-gradient(180deg,#5b8837,#315f20);color:#020302}
.button.secondary{background:rgba(0,0,0,.56)}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;text-transform:uppercase;color:var(--bone)}
.faq p{max-width:760px;color:var(--muted)}
.enter-box{text-align:center;max-width:780px;margin:auto}
.interest-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;text-align:left}
.interest-form label{display:grid;gap:8px;text-transform:uppercase;color:var(--muted);font-size:.86rem}
.interest-form input,.interest-form select{
  width:100%;
  min-height:48px;
  padding:12px;
  border:1px solid var(--line);
  background:#020302;
  color:var(--bone);
  font:inherit;
  letter-spacing:.06em;
}
.interest-form label:nth-child(3),.interest-form button{grid-column:1/-1}
@media (max-width: 900px){
  .desktop-hotspots{display:none}
  .real-fort-banner{display:none}
  .art-hero{min-height:100vh}
  .hero-art{
    min-height:100vh;
    object-fit:cover;
    object-position:center top;
  }
  .mobile-enter{
    position:absolute;
    left:15%;
    right:15%;
    bottom:5.4%;
    display:block;
    height:7%;
    overflow:hidden;
    color:transparent;
    text-indent:-999px;
  }
  .two-col,.challenge-grid{grid-template-columns:1fr}
  .section{padding:64px 0;background-attachment:scroll}
  .location-card{display:block}
  .interest-form{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .container{width:calc(100% - 28px)}
  h2{font-size:clamp(2rem,12vw,3.35rem)}
  .info-panel,.challenge-grid article,.enter-box,.location-card{padding:22px}
}
