*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#070707;
  color:#fff;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:radial-gradient(circle at top,#4b160b,transparent 44%),linear-gradient(180deg,#070707,#170604);
}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
  background:rgba(5,5,5,.88);
  border-bottom:1px solid rgba(198,51,34,.45);
  backdrop-filter:blur(10px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.brand img{
  width:72px;
  height:54px;
  object-fit:contain;
}
.nav-rsvp{
  color:#fff;
  text-decoration:none;
  font-weight:950;
  text-transform:uppercase;
  padding:11px 17px;
  border-radius:999px;
  background:linear-gradient(90deg,#b61515,#d49128);
}
.hero{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  padding:80px 24px;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:url("assets/poster.png") center/cover no-repeat;
  opacity:.28;
  z-index:-2;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.58),rgba(0,0,0,.86));
  z-index:-1;
}
.hero-content{
  max-width:1040px;
  margin:0 auto;
  width:100%;
}
.eyebrow{
  color:#ffc14d;
  text-transform:uppercase;
  letter-spacing:2.5px;
  font-weight:950;
  margin:0 0 10px;
}
h1{
  font-size:clamp(46px,8vw,106px);
  line-height:.88;
  margin:0;
  max-width:980px;
  text-transform:uppercase;
  text-shadow:0 10px 30px #000;
}
.subtitle{
  font-size:clamp(22px,3vw,34px);
  color:#ffdba3;
  font-weight:850;
  margin:18px 0 0;
}
.event-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:28px 0;
}
.event-pills span{
  padding:11px 15px;
  background:rgba(12,12,12,.86);
  border:1px solid #a8792b;
  border-radius:999px;
  font-weight:850;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.primary-btn,.secondary-btn,button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:13px;
  color:white;
  padding:16px 24px;
  font-weight:950;
  font-size:16px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
}
.primary-btn,button{
  background:linear-gradient(90deg,#b61515,#d49128);
}
.secondary-btn{
  background:rgba(12,12,12,.8);
  border:1px solid #d49128;
}
.btn-icon{
  width:20px;
  height:20px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.intro,.rsvp-section,.info-strip{
  max-width:1180px;
  margin:34px auto;
  padding:0 24px;
}
.intro>div{
  background:rgba(17,17,17,.88);
  border:1px solid rgba(143,36,24,.9);
  border-radius:24px;
  padding:30px;
  box-shadow:0 22px 70px rgba(0,0,0,.45);
}
h2{
  font-size:clamp(34px,5vw,58px);
  text-transform:uppercase;
  line-height:.95;
  margin:0 0 14px;
}
.intro p,.form-note{
  color:#ddd;
  font-size:18px;
  line-height:1.5;
}
.rsvp-section{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:28px;
  align-items:start;
}
.rsvp-card,.poster-card,.info-strip div{
  background:#111;
  border:1px solid #8f2418;
  border-radius:24px;
  box-shadow:0 22px 70px rgba(0,0,0,.52);
}
.rsvp-card{
  padding:30px;
}
.poster-card{
  padding:14px;
}
.poster-card img{
  display:block;
  width:100%;
  border-radius:18px;
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
label{
  display:block;
  color:#ffc14d;
  font-weight:950;
  margin:15px 0;
}
input,select,textarea{
  width:100%;
  margin-top:8px;
  padding:14px;
  border-radius:10px;
  border:1px solid #565656;
  background:#1a1a1a;
  color:#fff;
  font-size:16px;
  font-family:inherit;
}
textarea{resize:vertical}
button{width:100%;margin-top:10px}
.success{
  margin-top:20px;
  padding:18px;
  border:1px solid #43bd68;
  border-radius:16px;
  background:rgba(45,130,70,.22);
}
.success h3{margin:0 0 8px}
.hidden{display:none}
.setup-warning{
  margin-top:18px;
  padding:14px;
  border-radius:12px;
  background:rgba(255,193,77,.12);
  color:#ffdba3;
  font-size:13px;
  line-height:1.35;
}
.info-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.info-strip div{
  padding:22px;
}
.info-strip strong{
  display:block;
  color:#ffc14d;
  font-size:20px;
  margin-bottom:6px;
}
.info-strip span{color:#ddd}
footer{
  text-align:center;
  padding:34px 20px;
  color:#aaa;
}

@media(max-width:900px){
  .rsvp-section,.info-strip{grid-template-columns:1fr}
  .poster-card{order:-1}
  .brand span{display:none}
}
@media(max-width:560px){
  .hero{min-height:68vh;padding:58px 18px}
  .topbar{padding:10px 16px}
  .brand img{width:58px}
  .two-col{grid-template-columns:1fr}
  .hero-actions a{width:100%;text-align:center}
  .intro,.rsvp-section,.info-strip{padding:0 16px}
  .rsvp-card{padding:22px}
}