@font-face{
  font-family:"IronHorse";
  src:url("../assets/fonts/IronHorse.woff2") format("woff2"),
      url("../assets/fonts/IronHorse.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:block;
}

:root{
  --bg1:#070707;
  --accent:#e6e6e6;
  --muted:rgba(230,230,230,0.75);
  --brand:#fff;
  --container:980px;
  --texture-scale:1.5;
  --logo-opacity:0.26;
  --vignette-strength:0.86;
  --bg-y: 0px;
  --bg-x: 47%;
  /* Wider = tighter/zoomed in. Smaller = “further back”. */
  --bg-focus-width: clamp(340px, 82vw, 1100px);
  /* Higher blur reduces visible texture/grain. */
  --bg-back-blur: 14px;
  /* Watermark/skull visibility (bump these to make it pop). */
  /* Lower brightness + higher contrast usually reveals the dark watermark more. */
  --bg-focus-brightness: 1.50;
  --bg-focus-contrast: 0.98;
  --bg-focus-blur: 0.25px;
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:var(--accent);background-color:var(--bg1);-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:1rem}

.ironhorse-title{
  font-family:"IronHorse", Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  display:inline-block;
  padding:0.12em 0.38em 0.18em;
  border-radius:10px;
  background:rgba(0,0,0,0.42);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 14px 45px rgba(0,0,0,0.65);
  letter-spacing:0.105em;
  word-spacing:0.14em;
  line-height:1.0;
  transform:scaleX(1.08);
  text-shadow:0 2px 0 rgba(0,0,0,0.65), 0 14px 30px rgba(0,0,0,0.75);
  -webkit-text-stroke:0.6px rgba(0,0,0,0.55);
}

.hero-inner h1.ironhorse-title{font-size:3.35rem}
.container.section > h1.ironhorse-title{font-size:2.75rem}

.tagline{margin:.25rem 0 .9rem;color:rgba(255,255,255,0.82);letter-spacing:0.22em;text-transform:uppercase;font-weight:700}

.site-bg{
  min-height:100vh;
  background:#000;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* If you place the provided mock image at assets/mockup.png, add class `use-mock` to `.site-bg` for a pixel-exact overlay */
.site-bg.use-mock{
  background-image: url('../assets/mockup.png'), linear-gradient(180deg, rgba(54,36,24,0.96), rgba(18,10,6,0.98)), radial-gradient(circle at 50% 8%, rgba(255,255,255,0.03), transparent 18%), url('../assets/moto-pattern.svg');
  background-blend-mode: normal, normal, overlay, multiply;
  background-size: cover, cover, cover, calc(260px * var(--pattern-scale));
  background-position: top center, center top, center top, center top;
}

.site-bg.use-mock::before,
.site-bg.use-mock::after{
  content:none;
}

.site-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:url('../assets/bg.png');
  background-image:-webkit-image-set(url('../assets/bg-blur.webp') 1x, url('../assets/bg.png') 1x);
  background-image:image-set(url('../assets/bg-blur.webp') type('image/webp'), url('../assets/bg.png') type('image/png'));
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  transform:scale(1.08);
  opacity:0.9;
}

.site-bg::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  background-image:
    radial-gradient(circle at 55% 78%, rgba(255, 145, 0, 0.10), transparent 58%),
    radial-gradient(circle at 35% 92%, rgba(255, 60, 0, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,var(--vignette-strength)), rgba(0,0,0,0.84)),
    url('../assets/bg.png');
  background-image:
    radial-gradient(circle at 55% 78%, rgba(255, 145, 0, 0.10), transparent 58%),
    radial-gradient(circle at 35% 92%, rgba(255, 60, 0, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,var(--vignette-strength)), rgba(0,0,0,0.84)),
    -webkit-image-set(url('../assets/bg.webp') 1x, url('../assets/bg.png') 1x);
  background-image:
    radial-gradient(circle at 55% 78%, rgba(255, 145, 0, 0.10), transparent 58%),
    radial-gradient(circle at 35% 92%, rgba(255, 60, 0, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,var(--vignette-strength)), rgba(0,0,0,0.84)),
    image-set(url('../assets/bg.webp') type('image/webp'), url('../assets/bg.png') type('image/png'));
  background-repeat:no-repeat;
  background-position:center, center, center, var(--bg-x) calc(0px + var(--bg-y));
  background-size:cover, cover, cover, var(--bg-focus-width) auto;
  background-blend-mode:screen, screen, normal, normal;
  filter:saturate(1.15) contrast(var(--bg-focus-contrast)) brightness(var(--bg-focus-brightness));
}

@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-30%)}}

@media (prefers-reduced-motion: no-preference){
  .site-bg{animation:none}
}

.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,0.86),rgba(0,0,0,0.72));backdrop-filter:blur(6px);z-index:40;border-bottom:1px solid rgba(255,255,255,0.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 0}
.brand{display:flex;align-items:center}
.logo{height:170px;width:auto;display:block;filter:drop-shadow(1px 0 0 rgba(255,255,255,0.95)) drop-shadow(-1px 0 0 rgba(255,255,255,0.95)) drop-shadow(0 1px 0 rgba(255,255,255,0.95)) drop-shadow(0 -1px 0 rgba(255,255,255,0.95)) drop-shadow(0 0 10px rgba(0,0,0,0.65));}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav a{color:var(--accent);text-decoration:none;padding:.45rem .6rem;border-radius:6px}
.site-nav a.btn{background:#111;border:1px solid rgba(255,255,255,0.06)}
.site-nav a.btn:hover{background:#1b1b1b}
.nav-toggle{display:none;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.75);color:var(--accent);font-size:1.35rem;line-height:1;padding:.55rem .75rem;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.18);-webkit-tap-highlight-color:transparent}
.nav-toggle:hover{background:rgba(0,0,0,0.5)}
.nav-toggle:focus-visible{outline:2px solid rgba(255,255,255,0.75);outline-offset:2px}

.hero{padding:7rem 0 4rem;text-align:center}
.hero-inner h1{font-size:2.6rem;margin:0 0 .6rem;letter-spacing:0.6px}
.lead{color:var(--muted);margin-bottom:1rem}
.btn{display:inline-block;background:#fff;color:#000;padding:.6rem 1rem;border-radius:6px;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(255,255,255,0.06)}


.btn.primary{background:linear-gradient(180deg,#c99a55,#a6732f);color:#111;border:1px solid rgba(0,0,0,0.45);box-shadow:0 6px 0 rgba(0,0,0,0.25);padding:.8rem 1.2rem;border-radius:6px}
.btn.primary:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,0.22)}

.section{padding:2.5rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.event-card{background:linear-gradient(180deg, rgba(20,14,12,0.36), rgba(255,255,255,0.02));backdrop-filter:blur(6px);padding:1.25rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);box-shadow:inset 0 30px 60px rgba(0,0,0,0.35), 0 10px 24px rgba(0,0,0,0.55);}
.date{color:var(--muted);font-size:.95rem}
.small-link{color:var(--muted);text-decoration:none}

.event-list{list-style:none;padding:0;margin:1rem 0;display:grid;gap:1rem}
.event-list .event-card{margin:0}
.flyer-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:.75rem 0 0}

.donate-box{max-width:700px;margin:1rem 0;background:linear-gradient(180deg, rgba(20,14,12,0.36), rgba(255,255,255,0.02));backdrop-filter:blur(6px);padding:1.25rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);box-shadow:inset 0 30px 60px rgba(0,0,0,0.35), 0 10px 24px rgba(0,0,0,0.55);}
.donate-box h3{margin:0 0 .4rem}
.venmo-handle{margin:.4rem 0 0;font-size:1.15rem;font-weight:800}
.venmo-handle a{color:var(--accent);text-decoration:none}
.qr-block{margin-top:1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.qr-block img{width:min(320px, 100%);height:auto;border-radius:10px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 14px 38px rgba(0,0,0,0.6)}

/* Panel style used throughout the mock */
.panel{background:linear-gradient(180deg, rgba(20,14,12,0.38), rgba(46,30,23,0.22));backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,0.06);padding:1.25rem;border-radius:8px;box-shadow:inset 0 30px 60px rgba(0,0,0,0.32), 0 10px 24px rgba(0,0,0,0.50);}
.panel .panel-title{font-size:1.25rem;margin:0 0 .6rem;color:var(--accent);font-weight:700}
.page-title{font-size:2.2rem;color:var(--accent);margin:0 0 1rem;font-weight:700}
.subtle-note{background:rgba(0,0,0,0.3);padding:.6rem;border-radius:6px;border:1px solid rgba(255,255,255,0.02);color:var(--muted);font-size:.95rem}

/* Footer centered, compact */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:1rem 0;margin-top:3rem}
.footer-inner{display:flex;flex-direction:column;gap:.6rem;align-items:center}

/* Navigation: small badge-like donate button in header */
.site-nav a.donate{background:linear-gradient(180deg,#c99a55,#a6732f);color:#111;padding:.45rem .8rem;border-radius:6px;font-weight:700;border:1px solid rgba(0,0,0,0.45)}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:.8rem 0;margin-top:3rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

.contact-form{max-width:700px;margin-top:1rem;display:grid;gap:.8rem}
.contact-form label{display:block;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:.6rem;border-radius:6px;border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.02);color:var(--accent)}
.form-actions{display:flex;gap:1rem;align-items:center}
.muted{color:var(--muted)}

.google-form-embed{max-width:700px;margin-top:1rem}
.google-form-embed iframe{width:100%;height:720px;border:0;border-radius:8px;background:rgba(0,0,0,0.22)}

@media (max-width:800px){
  .logo{height:clamp(115px, 28vw, 150px)}
  .nav-toggle{display:block}
  .site-nav{position:fixed;right:1rem;top:72px;background:linear-gradient(180deg,rgba(0,0,0,0.92),rgba(0,0,0,0.98));flex-direction:column;padding:1rem;border-radius:12px;margin:0;display:none;min-width:220px;max-width:calc(100vw - 2rem);border:1px solid rgba(255,255,255,0.10);box-shadow:0 22px 55px rgba(0,0,0,0.72)}
  .site-nav.show{display:flex}
  .header-inner{gap:.5rem}
  .hero{padding:4rem 1rem}
  .hero-inner h1.ironhorse-title{font-size:2.35rem;letter-spacing:0.095em}
  .tagline{letter-spacing:0.18em}
  :root{--bg-focus-width: 92vw; --bg-back-blur: 12px}
  .google-form-embed iframe{height:860px}

  /* Mobile performance: reduce expensive paint/compositing effects. */
  .site-header{backdrop-filter:none}
  .event-card,.panel,.donate-box{backdrop-filter:none}

  /* Fixed full-screen layers + masks can be janky on mobile. */
  .site-bg::before,
  .site-bg::after{position:absolute}

  .site-bg::after{
    -webkit-mask-image:none;
    mask-image:none;
    /* Use pre-toned image so we can drop runtime filters on mobile. */
    background-image:
      linear-gradient(180deg, rgba(0,0,0,var(--vignette-strength)), rgba(0,0,0,0.84)),
      -webkit-image-set(url('../assets/bg-focus.webp') 1x, url('../assets/bg.webp') 1x, url('../assets/bg.png') 1x);
    background-image:
      linear-gradient(180deg, rgba(0,0,0,var(--vignette-strength)), rgba(0,0,0,0.84)),
      image-set(url('../assets/bg-focus.webp') type('image/webp'), url('../assets/bg.png') type('image/png'));
    background-repeat:no-repeat;
    background-position:center, var(--bg-x) calc(0px + var(--bg-y));
    background-size:cover, cover;
    background-blend-mode:normal, normal;
    filter:none;
  }
}

/* Facebook */
.fb-page-wrap{display:flex;justify-content:center;overflow:hidden;border-radius:8px;margin-top:.5rem}
.fb-page-wrap iframe{border-radius:8px;max-width:100%}
.footer-fb{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);text-decoration:none;font-size:.9rem}
.footer-fb:hover{color:var(--accent)}
.footer-fb svg{width:1rem;height:1rem;fill:currentColor;flex-shrink:0}
.btn.fb-share{background:#1877f2;color:#fff;display:inline-flex;align-items:center;gap:.4rem}
.btn.fb-share:hover{background:#166fe5}
.btn.fb-share svg{width:.95rem;height:.95rem;fill:#fff;flex-shrink:0}