/* ==========================================================
   StealingDawg — shared stylesheet

   BRAND COLOURS
     Scarlet   #FF2703
     Cod Grey  #1C1C1C
     Mercury   #E6E6E6

   TYPOGRAPHY
     MonteStella-XBold  — tracking -75, horizontal scale 241%
       Generated from the real MonteStella-XBold.otf. The 241%
       horizontal scale is baked into the .woff2 glyph outlines, so
       tracking -75 becomes -0.075em x 2.41 = -0.18075em. Baking the
       scale in keeps wrapping and responsive sizing working normally,
       which a CSS transform would break.
       MonteStella-XBold-natural.woff2 is the same font at 100% scale,
       used only for the homepage CTA heading.
     Neue Haas Grotesk Display Pro — tracking -10 (-0.01em), scale 100%
       45 Light (300) / 55 Roman (400) / 65 Medium (500) / 75 Bold (700)
   ========================================================== */

/* 241% horizontal scale — the default for every display heading */
@font-face{
  font-family:'MonteStella';
  src:url('fonts/MonteStella-XBold.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
/* 100% horizontal scale — used only for the homepage CTA heading */
@font-face{
  font-family:'MonteStellaNatural';
  src:url('fonts/MonteStella-XBold-natural.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
/* Neue Haas Grotesk Display Pro — the four weights the design uses.
   45 Light / 55 Roman / 65 Medium / 75 Bold. */
@font-face{
  font-family:'NeueHaasDisplay';
  src:url('fonts/NeueHaasDisplay-Light.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'NeueHaasDisplay';
  src:url('fonts/NeueHaasDisplay-Roman.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'NeueHaasDisplay';
  src:url('fonts/NeueHaasDisplay-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'NeueHaasDisplay';
  src:url('fonts/NeueHaasDisplay-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --scarlet:#FF2703;
  --scarlet-deep:#8C1400;
  --cod-grey:#1C1C1C;
  --mercury:#E6E6E6;

  /* Both brand faces are now complete and self-hosted. The system
     fallbacks only cover the moment before the woff2 files load. */
  --display:'MonteStella','Helvetica Neue',Helvetica,Arial,sans-serif;
  --display-natural:'MonteStellaNatural','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'NeueHaasDisplay','Neue Haas Grotesk Display Pro','Helvetica Neue',Helvetica,Arial,sans-serif;

  --track-display:-0.18075em;  /* -75 tracking at 241% horizontal scale */
  --track-natural:-0.075em;    /* -75 tracking at 100% horizontal scale */
  --track-body:-0.01em;        /* -10 tracking */

  --line:rgba(230,230,230,.18);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  background:var(--cod-grey);
  color:var(--mercury);
  font-family:var(--body);
  font-weight:400;
  letter-spacing:var(--track-body);
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:var(--track-display);
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1280px;margin:0 auto;padding:0 6vw;}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:var(--cod-grey);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 6vw;
  max-width:1280px;margin:0 auto;
}
.logo img{width:104px;height:auto;}
.nav-links{display:flex;gap:2.6rem;font-size:.82rem;letter-spacing:1.5px;font-weight:500;text-transform:uppercase;}
.nav-links a{opacity:.85;transition:opacity .2s,color .2s;padding:4px 0;border-bottom:2px solid transparent;}
.nav-links a:hover{opacity:1;color:var(--scarlet);}
.nav-links a.active{opacity:1;color:var(--scarlet);border-bottom-color:var(--scarlet);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;}
.nav-toggle span{width:24px;height:2px;background:var(--mercury);}

/* ---------- HOME HERO ---------- */
.hero{
  position:relative;
  background:radial-gradient(120% 90% at 50% 0%, var(--scarlet) 0%, var(--scarlet-deep) 45%, var(--cod-grey) 78%);
  overflow:hidden;
}
.stars-circle{
  position:absolute;top:-6vw;left:50%;
  transform:translateX(-50%);
  width:min(820px,104vw);
  pointer-events:none;user-select:none;
}
.hero-content{position:relative;z-index:2;padding-top:min(30vw,340px);}
.hero h1{
  /* MonteStella is 241% wide, so it needs a smaller size than a normal face */
  font-size:clamp(1.35rem,3.5vw,2.85rem);
  color:var(--mercury);
  text-shadow:0 6px 30px rgba(0,0,0,.35);
}
.hero p.lead{
  max-width:640px;margin-top:1.6rem;
  font-size:1.02rem;line-height:1.6;
  color:rgba(255,255,255,.92);
}
.stat-badge{
  margin-top:2.6rem;
  display:inline-flex;align-items:center;gap:.6rem;
  border:1.5px solid rgba(255,255,255,.7);
  border-radius:50px;padding:1rem 1.8rem;font-size:1rem;
  background:rgba(0,0,0,.12);backdrop-filter:blur(2px);
}
.stat-badge b{font-weight:500;}
.stat-badge .dot{opacity:.55;margin:0 .3rem;}

.hero-photo{
  position:relative;margin-top:5vw;
  height:min(58vw,560px);background:#0c0c0c;overflow:hidden;
}
.hero-photo img.crowd{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.15);opacity:.82;
}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, var(--cod-grey) 0%, rgba(28,28,28,0) 20%, rgba(28,28,28,0) 80%, var(--scarlet) 130%);
}
.hero-photo .wordmark{
  position:absolute;z-index:3;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(62%,720px);height:auto;
}

.cta-block{position:relative;z-index:2;padding:5vw 0 6vw;}
/* The one heading on the site set at 100% horizontal scale, not 241%.
   Because the glyphs are 2.41x narrower here, it takes a much larger
   font-size to occupy the same measure. */
.cta-block h2{
  font-family:var(--display-natural);
  letter-spacing:var(--track-natural);
  font-size:clamp(2.1rem,5.6vw,4rem);
  line-height:1;
  color:var(--mercury);
  max-width:24ch;
}
.cta-block p{margin-top:1.2rem;max-width:760px;font-size:.98rem;line-height:1.65;color:rgba(255,255,255,.92);}

/* ---------- SECTION HEADS ---------- */
.section-head{
  font-size:clamp(1.9rem,8vw,5.6rem);
  color:var(--mercury);
  margin-bottom:.2em;
}
.section-head.outline{color:transparent;-webkit-text-stroke:2px var(--mercury);}

/* ---------- EVENTS ---------- */
#events-page{
  background:radial-gradient(140% 60% at 50% 0%, var(--scarlet) 0%, var(--scarlet-deep) 40%, var(--cod-grey) 75%);
}
.events-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 2rem;margin-top:2rem;}
.event-card{border-top:2px solid var(--mercury);}
.event-thumb{
  aspect-ratio:16/11;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.14) 0 2px, transparent 2px 22px),
    linear-gradient(155deg,#FF5B34,var(--scarlet) 55%,var(--scarlet-deep));
  border:1px solid rgba(230,230,230,.9);border-top:none;
  margin-bottom:.9rem;
  display:flex;align-items:flex-end;justify-content:flex-end;padding:.9rem;
}
.event-thumb span{
  font-family:var(--body);font-weight:500;
  font-size:.62rem;letter-spacing:2px;
  color:rgba(255,255,255,.75);
}
.event-title{
  font-family:var(--display);font-weight:800;
  letter-spacing:var(--track-display);
  font-size:1.05rem;color:var(--mercury);text-transform:uppercase;
}
.event-meta{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;margin-top:.4rem;color:rgba(255,255,255,.85);
}
.event-meta .ticket{font-weight:500;text-decoration:underline;text-underline-offset:3px;}
.more-wrap{text-align:center;margin-top:2.6rem;}
.btn-outline{
  display:inline-block;border:1.5px solid var(--mercury);border-radius:40px;
  padding:.7rem 2.4rem;font-size:.85rem;letter-spacing:1px;
  transition:background .2s,color .2s;
}
.btn-outline:hover{background:var(--mercury);color:var(--cod-grey);}

.ticker{
  margin:5vw 0 -1px;
  transform:rotate(-2deg) scale(1.04);
  background:var(--mercury);color:var(--cod-grey);
  border-top:2px solid var(--cod-grey);border-bottom:2px solid var(--cod-grey);
  overflow:hidden;white-space:nowrap;padding:.7rem 0;
}
.ticker-track{display:inline-flex;align-items:center;gap:2.4rem;animation:scroll-left 26s linear infinite;}
.ticker img.tick-type{height:20px;width:auto;}
.ticker img.tick-mark{height:26px;width:auto;}
@keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.tagline-block{padding-top:6vw;}
.tagline-block h3{font-size:clamp(1.1rem,5vw,3.2rem);color:var(--mercury);}
.tagline-block p{margin-top:1rem;max-width:640px;font-size:1rem;line-height:1.6;}
.tagline-block p b{font-weight:500;}

/* ---------- ABOUT ---------- */
#about-page{background:var(--cod-grey);}
.about-photo{margin:0 0 3rem;overflow:hidden;}
.about-photo img{filter:grayscale(1) contrast(1.1);width:100%;object-fit:cover;max-height:420px;}

.about-intro{
  display:grid;grid-template-columns:1.3fr .9fr;gap:3rem;align-items:start;
  padding-bottom:3rem;border-bottom:1px solid var(--line);
}
.about-intro .kicker{font-weight:500;font-size:1.05rem;margin-bottom:.6rem;}
.about-intro p{line-height:1.65;color:rgba(255,255,255,.85);}
.seal{justify-self:end;width:150px;height:auto;opacity:.95;}

.about-row{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  padding:3.4rem 0;border-bottom:1px solid var(--line);align-items:center;
}
.chi-siamo p{font-size:1.1rem;line-height:1.55;text-align:right;color:var(--mercury);}
.chi-siamo h4{text-align:right;font-weight:500;font-size:1.05rem;margin-bottom:.6rem;}
.morebass{justify-self:center;width:min(78%,300px);height:auto;}

.cosa-facciamo h4,.missione h4{
  font-weight:500;font-size:1.05rem;margin-bottom:1rem;
  padding-bottom:.6rem;border-bottom:2px solid var(--mercury);display:inline-block;
}
.cosa-facciamo li{margin-bottom:1rem;line-height:1.6;color:rgba(255,255,255,.85);}
.cosa-facciamo li b{color:var(--mercury);font-weight:500;}

.missione-wrap{padding:3.4rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:flex-end;}
.missione{text-align:right;max-width:640px;}
.missione h4{border:0;padding:0;}
.missione li{margin-bottom:1.1rem;line-height:1.6;color:rgba(255,255,255,.85);}

/* ---------- FOOTER ---------- */
footer{background:var(--mercury);color:var(--cod-grey);}
.foot-head{
  font-size:clamp(1.45rem,6.4vw,4.8rem);
  color:var(--cod-grey);padding:5vw 0 0;
}
.foot-top{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding:1.6rem 0 2.6rem;border-bottom:1px solid rgba(28,28,28,.15);
  font-size:.85rem;line-height:1.5;
}
.foot-top .right{text-align:right;}
.foot-top a{text-decoration:underline;text-underline-offset:3px;}
.foot-cols{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:2.6rem 0 3.4rem;flex-wrap:wrap;gap:2rem;
}
.foot-logo img{width:132px;}
.foot-nav{display:flex;gap:5rem;flex-wrap:wrap;}
.foot-nav h5{font-size:.75rem;letter-spacing:2px;opacity:.6;margin-bottom:.9rem;font-weight:500;}
.foot-nav li{margin-bottom:.5rem;font-size:1.15rem;font-weight:500;}
.foot-nav li:hover{color:var(--scarlet);}
.back-top{align-self:flex-start;font-size:.85rem;font-weight:500;border-bottom:2px solid var(--cod-grey);padding-bottom:2px;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .nav-links{
    position:fixed;inset:60px 0 0 0;background:var(--cod-grey);
    flex-direction:column;padding:2rem 6vw;gap:1.6rem;
    transform:translateY(-110%);transition:transform .3s ease;font-size:1.1rem;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:flex;}
  .hero-content{padding-top:min(46vw,300px);}
  .events-grid{grid-template-columns:1fr;}
  .about-intro{grid-template-columns:1fr;}
  .seal{justify-self:start;width:120px;}
  .about-row{grid-template-columns:1fr;gap:1.6rem;}
  .chi-siamo p,.chi-siamo h4{text-align:left;}
  .morebass{justify-self:start;}
  .missione-wrap{justify-content:flex-start;}
  .missione{text-align:left;}
  .foot-cols{flex-direction:column;}
  .foot-nav{gap:3rem;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .ticker-track{animation:none;}
}