@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --red:#df1f26;
  --black:#080808;
  --white:#f3f3ef;
  --grey:#999;
  --light:#e9e9e5;
  --max:1180px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--white); font-family:Inter,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }

.topbar {
  position:absolute; z-index:5; top:0; left:0; right:0;
  width:min(92%,var(--max)); margin:auto; padding:26px 0;
  display:flex; justify-content:space-between; align-items:center;
}
.brand { width:105px; display:block; }
.brand img { width:100%; height:auto; display:block; max-height:55px; object-fit:contain; object-position:left center; }
.topbar > span { font-size:9px; font-weight:800; letter-spacing:.16em; color:#aaa; }

.hero {
  min-height:100vh; position:relative; display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-image {
  position:absolute; inset:0; background-image:url("assets/hero.png") center/cover no-repeat;
  filter:saturate(.7); transform:scale(1.02);
}
.hero-shade {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.40) 100%),
    linear-gradient(0deg,rgba(0,0,0,.95) 0%,transparent 70%);
}
.hero-content {
  position:relative; z-index:2; width:min(92%,var(--max)); margin:auto;
  padding:170px 0 75px;
}
.eyebrow, small {
  color:var(--red); font-size:10px; font-weight:800;
  letter-spacing:.17em; text-transform:uppercase;
}
.eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:25px; }
.eyebrow i { width:38px; height:2px; background:var(--red); }
h1,h2,h3 { font-family:Anton,Impact,sans-serif; font-weight:400; }
h1 {
  margin:0; font-size:clamp(68px,10vw,150px); line-height:.84;
  letter-spacing:-.035em;
}
h1 em { color:var(--red); font-style:normal; }
.hero-content p { max-width:500px; color:#c7c7c7; font-size:14px; line-height:1.8; margin:30px 0 0; }
.hero-meta {
  margin-top:48px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15);
  max-width:700px; display:flex; justify-content:space-between;
  color:#888; font-size:9px; font-weight:800; letter-spacing:.15em;
}

.events { background:var(--white); color:var(--black); padding:120px 0; }
.intro,.event-grid,.contact,footer { width:min(92%,var(--max)); margin:auto; }
.intro {
  display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:end;
  margin-bottom:60px;
}
.intro h2,.contact h2 { margin:18px 0 0; font-size:clamp(60px,7vw,105px); line-height:.86; letter-spacing:-.03em; }
.intro h2 b,.contact h2 b { color:var(--red); font-weight:400; }
.intro > p { color:#666; max-width:420px; margin:0; font-size:13px; line-height:1.8; }

.event-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#c9c9c5; }
.event { min-height:390px; padding:42px; background:#e4e4df; display:flex; flex-direction:column; transition:.25s; }
.event:hover { transform:translateY(-5px); background:#dcdcd7; }
.number { color:var(--red); font:400 42px/1 Anton,Impact,sans-serif; margin-bottom:42px; }
.event small { color:#777; }
.event h3 { margin:18px 0 45px; font-size:clamp(42px,4.5vw,68px); line-height:.88; letter-spacing:-.02em; }
.event h3 b { color:var(--red); font-weight:400; }
.event-bottom {
  margin-top:auto; padding-top:20px; border-top:1px solid #c7c7c2;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.event-bottom > span { color:#777; font-size:9px; font-weight:800; letter-spacing:.1em; }
.event-bottom a,.contact-btn {
  min-height:52px; padding:0 20px; background:var(--black); color:#fff;
  display:inline-flex; align-items:center; gap:28px;
  font-size:10px; font-weight:900; letter-spacing:.1em; transition:.25s;
}
.event-bottom a strong { color:var(--red); }
.event-bottom a:hover,.contact-btn:hover { background:var(--red); }
.event-bottom a:hover strong { color:#fff; }

.contact {
  max-width:none; width:100%; padding:120px max(4%,calc((100vw - var(--max))/2));
  display:grid; grid-template-columns:1fr .8fr; gap:80px; align-items:end;
  background:var(--black);
}
.contact h2 { color:#fff; }
.contact-copy p { max-width:450px; color:#999; font-size:14px; line-height:1.8; margin:0 0 30px; }
.contact-btn { background:var(--red); }
.contact-btn:hover { background:#fff; color:var(--black); }

footer {
  max-width:none; width:100%; padding:35px max(4%,calc((100vw - var(--max))/2));
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:space-between; gap:25px;
  color:#777;
}
footer img { width:85px; max-height:45px; object-fit:contain; object-position:left center; }
footer span { font-size:9px; font-weight:800; letter-spacing:.1em; }

@media(max-width:800px) {
  .topbar > span { display:none; }
  .hero-content { padding-top:145px; }
  .intro,.contact { grid-template-columns:1fr; gap:35px; }
  .event-grid { grid-template-columns:1fr; }
  .event { min-height:350px; padding:32px; }
  .event-bottom { align-items:flex-start; flex-direction:column; }
  .event-bottom a { width:100%; justify-content:space-between; }
  footer { flex-direction:column; align-items:flex-start; }
}