@font-face{font-family:"Sedgwick";src:url(fonts/SedgwickAveDisplay-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Marker";src:url(fonts/PermanentMarker-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bebas";src:url(fonts/BebasNeue-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{
  --night:#130806; --night-2:#1d0f0b; --brick:#2a1712; --line:rgba(255,220,85,.18);
  --yellow:#ffdc55; --yellow-2:#ffc93c; --cream:#fff5c5; --white:#fffaf0;
  --red:#d7262b; --amber:#bf6c32; --blue:#1f5fae; --muted:#d9c7a8;
  --brush:"Sedgwick","Marker",Impact,sans-serif; --marker:"Marker","Sedgwick",sans-serif;
  --cond:"Bebas",Impact,"Arial Narrow",sans-serif; --body:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--white);font:400 1.06rem/1.6 var(--body);overflow-x:hidden;
  background-image:
   radial-gradient(1200px 600px at 110% 10%,rgba(191,108,50,.16),transparent 60%),
   radial-gradient(900px 500px at -10% 60%,rgba(31,95,174,.12),transparent 60%),
   repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 46px),
   repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 2px,transparent 2px 92px);}
img{max-width:100%;height:auto;display:block}
a{color:var(--yellow)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--yellow);color:#000;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
h1,h2,h3{margin:0;line-height:1.05}
p{margin:0 0 1rem}

/* wordmark (from the Canva flyers: white HUMO &, yellow TAMBOR, brush letters, crown) */
.mark{font-family:var(--brush);text-decoration:none;color:var(--white);font-size:1.35rem;letter-spacing:.02em;white-space:nowrap;
  text-shadow:2px 2px 0 #000}
.mark em{font-style:normal}
.mark .m-tambor{color:var(--yellow)}

.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2.5rem);background:rgba(19,8,6,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:3px solid var(--yellow)}
.topbar nav{display:flex;gap:1.4rem}
.topbar nav a{color:var(--white);text-decoration:none;font:400 1.25rem/1 var(--cond);letter-spacing:.06em}
.topbar nav a:hover{color:var(--yellow)}
@media (max-width:760px){.topbar nav{display:none}}

/* buttons: yellow sticker boxes with black outline + hard shadow */
.btn{display:inline-block;background:var(--yellow);color:#120a05;text-decoration:none;font:400 1.3rem/1 var(--cond);letter-spacing:.06em;
  padding:.8rem 1.25rem .7rem;border:3px solid #000;border-radius:12px;box-shadow:4px 4px 0 #000;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.btn-sm{font-size:1.1rem;padding:.55rem .9rem .45rem;box-shadow:3px 3px 0 #000}
.btn-lg{font-size:1.65rem;padding:1rem 1.6rem .9rem}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--white);box-shadow:4px 4px 0 rgba(0,0,0,.6)}

/* hero */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:saturate(1.15) contrast(1.05)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
   radial-gradient(600px 380px at 85% 18%,rgba(255,201,60,.32),transparent 65%),
   linear-gradient(180deg,rgba(19,8,6,.35) 0%,rgba(19,8,6,.55) 45%,rgba(19,8,6,.96) 88%,var(--night) 100%)}
.hero-inner{width:100%;max-width:1180px;margin:0 auto;padding:6rem clamp(1.1rem,5vw,3rem) 3.2rem}
.kicker{display:flex;align-items:center;gap:.7rem;font:400 1.35rem/1 var(--cond);letter-spacing:.08em;color:var(--cream);margin-bottom:1rem}
.sticker{display:inline-block;background:var(--yellow);color:#000;border:3px solid #000;border-radius:10px;padding:.35rem .6rem .25rem;transform:rotate(-4deg);box-shadow:3px 3px 0 #000}
.wordmark{position:relative;display:inline-flex;flex-direction:column;font-family:var(--brush);font-weight:400;line-height:.86;
  font-size:clamp(4.2rem,17vw,9.5rem);letter-spacing:.01em;margin:.5em 0 1rem;
  text-shadow:4px 4px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,7px 8px 0 rgba(0,0,0,.45)}
.wordmark .w-humo{color:var(--white)}
.wordmark .w-tambor{color:var(--yellow);transform:translateX(.08em)}
.wordmark .crown{position:absolute;width:.62em;top:-.42em;left:-.06em;color:var(--yellow);transform:rotate(-10deg);filter:drop-shadow(2px 2px 0 #000)}
.tagline{font:400 clamp(1.5rem,5.4vw,2.4rem)/1.1 var(--marker);color:var(--yellow);margin:.2rem 0 .8rem;transform:rotate(-1.5deg);text-shadow:2px 2px 0 #000}
.lede{max-width:34rem;font-size:1.15rem;color:var(--cream)}
.date-chip{display:inline-flex;flex-direction:column;gap:.15rem;margin:.6rem 0 1.6rem;padding:.75rem 1.4rem .6rem 1.1rem;background:var(--red);color:#fff;
  transform:rotate(-1.5deg);clip-path:polygon(1% 8%,99% 0,100% 88%,97% 100%,0 94%,2% 50%)}
.date-chip strong{font:400 clamp(1.45rem,5.6vw,2rem)/1 var(--cond);letter-spacing:.05em}
.date-chip span{font:400 1.15rem/1 var(--cond);letter-spacing:.08em;color:#ffe9b0}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem}

/* sections */
.section{padding:clamp(3.5rem,8vw,6rem) 0;position:relative}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.1rem,5vw,3rem)}
.eyebrow{display:inline-block;font:400 1.2rem/1 var(--cond);letter-spacing:.12em;color:#000;background:var(--yellow);padding:.35rem .6rem .25rem;border-radius:6px;margin-bottom:1rem;transform:rotate(-2deg)}
h2{font-family:var(--brush);font-weight:400;font-size:clamp(2.4rem,8vw,4.2rem);line-height:.98;color:var(--white);margin-bottom:2rem;text-shadow:3px 3px 0 #000}
h3{font:400 1.7rem/1 var(--cond);letter-spacing:.04em;color:var(--yellow);margin-bottom:.5rem}
.small{font-size:.95rem;color:var(--muted)}

/* event */
.event-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:start}
@media (min-width:860px){.event-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:2.4rem}}
.flyer,.judges-img{margin:0;border:4px solid #000;border-radius:16px;overflow:hidden;box-shadow:8px 8px 0 var(--yellow)}
.flyer{transform:rotate(-1deg)}
.schedule{display:grid;gap:1.2rem}
.slot{background:var(--night-2);border:3px solid var(--yellow);border-radius:16px;padding:1.4rem 1.4rem 1.1rem;box-shadow:6px 6px 0 #000}
.slot .time{display:inline-block;font:400 2.1rem/1 var(--cond);background:var(--red);color:#fff;padding:.3rem .7rem .2rem;margin-bottom:.8rem;transform:rotate(-2deg);clip-path:polygon(2% 0,100% 6%,98% 100%,0 92%)}
.slot h3{font-size:2rem}
.price{font:400 2.4rem/1 var(--cond);color:var(--white);margin:.4rem 0 .7rem}
.price span{font-size:1.2rem;color:var(--muted);letter-spacing:.04em}
.slot-free{border-color:var(--white)}
.slot-free .time{background:var(--blue)}
.note{display:inline-block;font:400 1.1rem/1 var(--cond);letter-spacing:.08em;color:#000;background:var(--yellow);padding:.35rem .55rem .25rem;border-radius:6px;margin:0}
.facts{display:grid;gap:1.2rem;margin-top:2.4rem}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{border-top:4px solid var(--yellow);padding:1.1rem .2rem 0}
.fact .judges{font-family:var(--cond);font-size:1.3rem;letter-spacing:.04em;color:var(--cream)}
.fact .judges strong{color:var(--yellow);font-weight:400}
.link{font:400 1.25rem/1 var(--cond);letter-spacing:.06em;text-decoration:none}
.judges-img{max-width:560px;margin:2.6rem auto 0;transform:rotate(1deg);background:#000}
.judges-img figcaption{font:400 1.25rem/1.25 var(--marker);color:var(--yellow);padding:.9rem 1rem 1rem;text-align:center}
.age{margin-top:2.2rem;font:400 1.2rem/1 var(--cond);letter-spacing:.08em;color:var(--muted)}

/* reserve: yellow wall */
.reserve{background:var(--yellow);color:#140a05;border-top:5px solid #000;border-bottom:5px solid #000;
  background-image:radial-gradient(500px 300px at 90% 0%,rgba(255,255,255,.35),transparent 70%),repeating-linear-gradient(-45deg,rgba(0,0,0,.035) 0 10px,transparent 10px 20px)}
.reserve .eyebrow{background:#000;color:var(--yellow)}
.reserve h2{color:#000;text-shadow:3px 3px 0 rgba(255,255,255,.55)}
.reserve h3{color:#000}
.reserve a:not(.btn){color:#000;font-weight:800}
.reserve .small{color:#3b2a10}
.steps{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:1.2rem}
@media (min-width:760px){.steps{grid-template-columns:1fr 1fr}}
.steps li{display:flex;gap:1rem;background:#fff8dc;border:3px solid #000;border-radius:16px;padding:1.3rem;box-shadow:6px 6px 0 #000}
.num{flex:0 0 auto;width:3rem;height:3rem;display:grid;place-items:center;background:var(--red);color:#fff;font:400 2rem/1 var(--brush);border:3px solid #000;border-radius:50%}
.ath{font:400 1.5rem/1 var(--cond);letter-spacing:.04em;background:#000;color:var(--yellow);padding:.15rem .45rem .05rem;border-radius:4px}
.reserve .btn{background:#000;color:var(--yellow);box-shadow:4px 4px 0 var(--red)}

/* que es */
.split-grid{display:grid;gap:2rem;align-items:center}
@media (min-width:860px){.split-grid{grid-template-columns:1.1fr .9fr;gap:3rem}}
.features{list-style:none;padding:0;margin:1.2rem 0 1.4rem}
.features li{padding:.55rem 0 .55rem 2rem;position:relative;border-bottom:1px dashed var(--line)}
.features li::before{content:"★";position:absolute;left:0;top:.5rem;color:var(--yellow)}
.features strong{color:var(--yellow)}
.split-img{margin:0;border:4px solid #000;border-radius:16px;overflow:hidden;box-shadow:-8px 8px 0 var(--red);transform:rotate(1.2deg)}
.split-img img{aspect-ratio:4/5;object-fit:cover;width:100%}

/* gallery */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.gallery figure{margin:0;border:3px solid #000;border-radius:12px;overflow:hidden;background:#000}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;filter:saturate(1.1) contrast(1.04)}
.gallery .g-wide{grid-column:1/-1}
.gallery .g-wide img{aspect-ratio:16/9}
@media (min-width:860px){.gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:340px;gap:1rem}.gallery .g-wide{grid-column:span 2}.gallery img,.gallery .g-wide img{aspect-ratio:auto;height:100%}}

/* founders */
.founders{display:grid;gap:1.2rem}
@media (min-width:760px){.founders{grid-template-columns:1fr 1fr}}
.founder{background:var(--night-2);border:3px solid var(--white);border-radius:16px;padding:1.4rem;box-shadow:6px 6px 0 var(--blue)}
.founder:nth-child(2){box-shadow:6px 6px 0 var(--red)}
.founder h3{font-size:2rem;color:var(--white)}
.founder p{margin:0;color:var(--cream)}

/* sponsors */
.sponsor-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (min-width:760px){.sponsor-row{grid-template-columns:repeat(4,1fr)}}
.sponsor{display:grid;place-items:center;min-height:110px;text-align:center;padding:1rem;background:#fff8dc;color:#120a05;border:3px solid #000;border-radius:14px;
  font:400 1.45rem/1.05 var(--cond);letter-spacing:.04em;box-shadow:4px 4px 0 var(--yellow)}
.sponsor-logo img{max-height:70px;width:auto}
.cta-sponsor{margin-top:1.6rem;font:400 1.5rem/1.2 var(--cond);letter-spacing:.04em}

/* contact */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:.8rem;max-width:640px}
.contact-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;padding:1rem 1.1rem;background:var(--night-2);border-left:6px solid var(--yellow);border-radius:8px}
.contact-list span{font:400 1.15rem/1 var(--cond);letter-spacing:.1em;color:var(--muted);min-width:6.5rem}
.contact-list a{font-weight:600;font-size:1.12rem;word-break:break-word;text-decoration:none}

/* footer */
.footer{text-align:center;padding:3rem 1.2rem 6.5rem;border-top:3px solid var(--yellow);background:#0c0504}
.footer .mark{display:inline-block;font-size:2.4rem;margin-bottom:.4rem}
.footer p{margin:.2rem 0}
.footer p:nth-child(2){font-family:var(--marker);color:var(--yellow);font-size:1.2rem}

/* sticky CTA */
.sticky-cta{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%,160%);z-index:60;
  background:var(--yellow);color:#000;text-decoration:none;font:400 1.35rem/1 var(--cond);letter-spacing:.06em;padding:.9rem 1.4rem .8rem;
  border:3px solid #000;border-radius:999px;box-shadow:4px 4px 0 #000;transition:transform .25s;white-space:nowrap}
.sticky-cta.show{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
