:root {
  --bg: #08090d;
  --bg2: #11131a;
  --paper: #eee8dc;
  --text: #f4f0e7;
  --muted: #a9a7a0;
  --yellow: #f7c948;
  --red: #ff4d3d;
  --blue: #55a9ff;
  --line: rgba(255,255,255,.12);
  --mono: "DM Mono", monospace;
  --display: "Bebas Neue", Impact, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 70% 5%, rgba(85,169,255,.12), transparent 30%),
    radial-gradient(circle at 20% 40%, rgba(255,77,61,.07), transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}
body::selection { background: var(--yellow); color: #000; }

.grain {
  pointer-events:none;
  position: fixed; inset:0; z-index:20; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.warning-tape {
  height: 25px;
  overflow: hidden;
  white-space: nowrap;
  font: 700 11px/25px var(--mono);
  letter-spacing: .18em;
  text-align: center;
  color: #111;
  background: repeating-linear-gradient(135deg, var(--yellow) 0 20px, #121212 20px 40px);
  text-shadow: none;
}
.warning-top { position: relative; z-index: 30; }

.nav {
  position: absolute; top: 25px; left:0; right:0; z-index:15;
  padding: 22px clamp(20px, 4vw, 64px);
  display:flex; justify-content:space-between; align-items:center;
}
.brand { color:var(--text); text-decoration:none; display:flex; align-items:center; gap:10px; font:500 10px/1.15 var(--mono); letter-spacing:.08em; }
.brand-mark {
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.5); border-radius:50%;
  font:700 13px var(--display); letter-spacing:.05em;
}
.brand b { font-weight:800; }
.nav-cta {
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.2); color:#fff; padding:12px 16px;
  font:700 10px var(--mono); letter-spacing:.12em; cursor:pointer;
  backdrop-filter:blur(8px);
}
.nav-cta span { color:var(--yellow); margin-left:8px; }

.hero {
  min-height: 88vh;
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  padding: clamp(115px, 16vw, 170px) clamp(20px, 6vw, 100px) 80px;
  isolation:isolate;
}
.hero-photo {
  position:absolute; inset:0; z-index:-3;
  background:
    linear-gradient(90deg, rgba(3,4,7,.82), rgba(3,4,7,.32) 52%, rgba(3,4,7,.72)),
    url("images/12-festa.jpg") center 28% / cover no-repeat;
  transform: scale(1.045);
}
.hero-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(0deg, #08090d 1%, transparent 42%); }
.hero-copy { max-width: 760px; position:relative; }
.eyebrow, .section-kicker {
  color: var(--yellow); font:700 11px var(--mono); letter-spacing:.17em; text-transform:uppercase;
}
.eyebrow .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red); margin-right:8px; box-shadow:0 0 15px var(--red); }
.hero h1 {
  margin:14px 0 8px; font:400 clamp(76px, 11vw, 165px)/.77 var(--display);
  letter-spacing:.015em; text-transform:uppercase;
  text-shadow: 0 8px 30px rgba(0,0,0,.34);
}
.hero h1 em { color:var(--yellow); font-style:normal; }
.hero-sub { font-size:clamp(15px, 1.55vw, 20px); line-height:1.5; color:#efede5; max-width:550px; }
.hero-meta {
  display:flex; gap:18px; align-items:center; margin:30px 0; font-family:var(--mono);
}
.hero-meta div:not(.arrow) { display:flex; flex-direction:column; gap:5px; }
.hero-meta span { color:#aeb0b5; font-size:9px; letter-spacing:.16em; }
.hero-meta strong { font-size:12px; letter-spacing:.06em; }
.hero-meta .arrow { color:var(--red); font-size:24px; }
.primary-btn {
  display:inline-flex; align-items:center; gap:22px; border:0; cursor:pointer;
  background:var(--yellow); color:#0b0c0f; padding:16px 18px 16px 20px;
  font:800 11px var(--mono); letter-spacing:.11em;
  box-shadow: 8px 8px 0 rgba(255,77,61,.72);
  transition:.2s transform, .2s box-shadow;
}
.primary-btn:hover { transform:translate(3px,3px); box-shadow:4px 4px 0 rgba(255,77,61,.72); }
.primary-btn b { font-size:18px; }
.primary-btn.light { background:var(--paper); box-shadow:8px 8px 0 var(--red); }
.hero-stamp {
  position:absolute; right:clamp(22px, 6vw, 100px); top:35%;
  width:100px; height:100px; border:2px solid var(--red); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(8deg); color:var(--red); background:rgba(0,0,0,.08); backdrop-filter:blur(5px);
  text-align:center;
}
.hero-stamp span { font:700 8px var(--mono); letter-spacing:.14em; }
.hero-stamp strong { font:400 36px/.78 var(--display); }
.hero-stamp small { font:700 9px var(--mono); margin-top:7px; }
.hero-polaroid {
  position:absolute; right:7vw; bottom:65px; width:190px; padding:10px 10px 26px;
  background:#ece8dc; color:#242424; transform:rotate(-5deg); box-shadow:0 22px 42px rgba(0,0,0,.35);
}
.hero-polaroid img { width:100%; height:170px; display:block; object-fit:cover; filter:saturate(.85); }
.hero-polaroid span { font:700 9px var(--mono); letter-spacing:.12em; display:block; margin-top:9px; text-align:center; text-transform:uppercase; }

.marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:15px 0; background:#0c0d12; }
.marquee div { white-space:nowrap; width:max-content; font:400 28px var(--display); color:#d8d2c4; letter-spacing:.05em; animation:marquee 24s linear infinite; }
.marquee div::first-letter { color:var(--yellow); }
@keyframes marquee { to { transform:translateX(-50%); } }

.countdown-section, .dossier, .gallery, .rules { padding:120px clamp(20px, 7vw, 112px); }
.countdown-section { background:linear-gradient(180deg,#08090d,#101218); }
.countdown-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-top:12px; }
.countdown-heading h2, .dossier h2, .gallery h2, .rules h2 {
  font:400 clamp(60px, 8vw, 122px)/.83 var(--display);
  text-transform:uppercase; margin:10px 0;
}
.countdown-heading p { max-width:420px; color:var(--muted); line-height:1.6; margin:0 0 5px; }
.classified { border:1px solid rgba(255,77,61,.55); color:var(--red); padding:11px; text-align:center; font:700 9px/1.35 var(--mono); letter-spacing:.13em; transform:rotate(-2deg); }
.classified span { letter-spacing:2px; }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:55px; }
.time-card {
  background:rgba(255,255,255,.03); border:1px solid var(--line); padding:24px 22px 18px;
  position:relative; min-height:150px; overflow:hidden;
}
.time-card::after { content:""; position:absolute; width:70px; height:70px; border-radius:50%; background:rgba(247,201,72,.08); right:-18px; bottom:-30px; }
.time-card strong { display:block; font:400 clamp(60px,7vw,100px)/.9 var(--display); color:var(--yellow); }
.time-card span { display:block; margin-top:14px; font:700 9px var(--mono); letter-spacing:.16em; color:#bababa; }
.countdown-note { font:10px var(--mono); letter-spacing:.08em; color:#8d9098; margin-top:16px; }
.countdown-note b { color:#eee; }

.dossier { background:#eee8dc; color:#121316; }
.dossier .section-kicker { color:#b25a00; }
.dossier-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:70px; margin-top:16px; }
.dossier h2 { color:#121316; }
.dossier h2 em { color:#cf3c30; font-style:normal; }
.lead { max-width:420px; color:#5f5c56; font-size:17px; line-height:1.6; }
.fact-stack { display:grid; gap:0; border-top:1px solid rgba(0,0,0,.18); }
.fact { display:grid; grid-template-columns:56px 1fr; gap:18px; padding:28px 0; border-bottom:1px solid rgba(0,0,0,.18); }
.fact-no { font:400 28px var(--display); color:#bfbbb1; }
.fact small { font:700 9px var(--mono); letter-spacing:.17em; color:#88837a; }
.fact h3 { margin:4px 0 4px; font:400 32px var(--display); text-transform:uppercase; }
.fact p { margin:0; color:#67635c; line-height:1.5; max-width:580px; }
.fact.highlight { background:#e6dfd1; padding-left:16px; padding-right:16px; }
.fact.highlight .fact-no, .fact.highlight h3 { color:#cf3c30; }

.manifesto { position:relative; overflow:hidden; background:#0d0f14; padding:140px 8vw; min-height:560px; display:flex; align-items:center; }
.manifesto::before {
  content:""; position:absolute; width:50vw; height:50vw; max-width:700px; max-height:700px; border:1px solid rgba(255,255,255,.09);
  border-radius:50%; right:-17vw; bottom:-30vw;
}
.manifesto-inner { position:relative; z-index:1; }
.manifesto h2 { font:400 clamp(72px,9vw,145px)/.78 var(--display); margin:14px 0; }
.manifesto h2 span { color:var(--yellow); }
.manifesto p:last-child { color:#b0b3ba; font:500 15px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.scribble { position:absolute; right:8vw; top:26%; color:#7e8188; font:400 14px/1.35 var(--mono); transform:rotate(8deg); opacity:.75; }

.gallery { background:#f1ede4; color:#131417; }
.gallery .section-kicker { color:#bf5200; }
.gallery-head { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:40px; }
.gallery-head p { max-width:460px; color:#66625a; line-height:1.65; }
.gallery h2 { margin-top:0; }
.photo-grid { columns:3 280px; column-gap:18px; }
.photo { display:block; break-inside:avoid; margin:0 0 18px; position:relative; overflow:hidden; cursor:zoom-in; background:#ccc; }
.photo img { display:block; width:100%; height:auto; transition:transform .5s ease, filter .5s ease; }
.photo:hover img { transform:scale(1.04); filter:saturate(1.12) contrast(1.04); }
.photo figcaption { position:absolute; left:9px; bottom:9px; background:rgba(5,6,9,.76); color:#fff; padding:6px 8px; font:700 8px var(--mono); letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(6px); }

.rules { background:#15171d; }
.rules-grid { display:grid; grid-template-columns:.4fr 1fr; align-items:center; gap:50px; margin-top:20px; }
.rule-number { font:400 clamp(180px,24vw,380px)/.7 var(--display); color:rgba(255,255,255,.08); }
.rules h2 { color:var(--yellow); }
.big { font:400 clamp(32px,4vw,55px)/1.15 var(--display); text-transform:uppercase; margin:0; }
.small-note { max-width:520px; color:#8f9299; font:11px/1.7 var(--mono); margin-top:28px; }

.finale { min-height:620px; position:relative; display:grid; place-items:center; text-align:center; overflow:hidden; }
.finale-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.83)),
    url("images/12-festa.jpg") center 30%/cover;
  filter:saturate(.8);
}
.finale-content { position:relative; z-index:1; padding:60px 20px; }
.finale h2 { font:400 clamp(90px,14vw,190px)/.78 var(--display); margin:16px 0 8px; color:var(--paper); }
.finale p:not(.eyebrow) { color:#d5d0c6; font:15px/1.6 var(--mono); margin-bottom:30px; }
.finale p b { color:var(--yellow); }

.footer { padding:25px clamp(20px, 5vw, 70px); border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:30px; color:#9ea1a9; font:9px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.footer b { color:#f1eee7; }
.footer-right { text-align:right; }

.lightbox {
  position:fixed; inset:0; z-index:50; display:none; place-items:center; padding:35px;
  background:rgba(0,0,0,.9); backdrop-filter:blur(12px);
}
.lightbox.open { display:grid; }
.lightbox img { max-width:min(1100px, 92vw); max-height:82vh; object-fit:contain; box-shadow:0 25px 80px rgba(0,0,0,.6); }
.lightbox-close { position:absolute; right:20px; top:14px; background:none; border:0; color:#fff; font-size:48px; cursor:pointer; line-height:1; }
.lightbox-caption { position:absolute; bottom:16px; left:0; right:0; text-align:center; font:10px var(--mono); letter-spacing:.12em; color:#c8c7c1; text-transform:uppercase; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width: 900px) {
  .hero { min-height:760px; padding-bottom:55px; }
  .hero-photo { background-position: 63% center; }
  .hero-stamp, .hero-polaroid { display:none; }
  .countdown { grid-template-columns:repeat(2,1fr); }
  .dossier-grid { grid-template-columns:1fr; gap:40px; }
  .gallery-head { flex-direction:column; align-items:flex-start; }
  .rules-grid { grid-template-columns:1fr; gap:5px; }
  .rule-number { display:none; }
}
@media (max-width: 600px) {
  .warning-tape { font-size:9px; }
  .nav { padding:15px 16px; }
  .nav-cta { padding:10px 12px; }
  .hero { min-height:720px; padding:120px 20px 46px; }
  .hero-photo { background-position:67% center; }
  .hero h1 { font-size:78px; }
  .hero-sub { font-size:14px; }
  .hero-meta { gap:10px; }
  .hero-meta strong { font-size:10px; }
  .primary-btn { width:100%; justify-content:space-between; }
  .countdown-section, .dossier, .gallery, .rules { padding:85px 20px; }
  .countdown-heading { align-items:flex-start; flex-direction:column; }
  .countdown-heading h2, .dossier h2, .gallery h2, .rules h2 { font-size:68px; }
  .countdown { gap:8px; }
  .time-card { min-height:125px; padding:18px 14px; }
  .time-card strong { font-size:64px; }
  .photo-grid { columns:2 135px; column-gap:10px; }
  .photo { margin-bottom:10px; }
  .photo figcaption { font-size:7px; max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .manifesto { padding:95px 20px; min-height:480px; }
  .manifesto h2 { font-size:76px; }
  .scribble { display:none; }
  .footer { flex-direction:column; }
  .footer-right { text-align:left; }
}