/* Public home. Sits on rent.css and events.css for header, footer and event cards. */
.hero{background:
  linear-gradient(90deg, rgb(23 10 34 / .72) 0%, rgb(23 10 34 / .55) 34%, rgb(23 10 34 / .12) 62%, rgb(23 10 34 / 0) 100%),
  url('/hero.jpg') center 40% / cover no-repeat, #170a22;
  color:#f7f3ea;border-bottom:3px solid var(--accent)}
/* Phones: the whole tall picture. Dark behind the words at the top, clear at
   the bottom so the brothers at the grill show. */
@media (max-width:700px){
  .hero{background:
    linear-gradient(180deg, rgb(23 10 34 / .8) 0%, rgb(23 10 34 / .66) 42%, rgb(23 10 34 / .12) 64%, rgb(23 10 34 / 0) 100%),
    url('/hero-tall.jpg') center bottom / cover no-repeat, #170a22}
  .hero-in{min-height:min(178vw,860px);padding-top:28px}
}
/* Only top and bottom: the side padding comes from .wrap, so copy never touches the screen edge. */
.hero-in{padding-top:clamp(56px,9vw,128px);padding-bottom:clamp(48px,7vw,104px)}
.hero h1{font-size:clamp(2.25rem,6vw,3.75rem);margin:.2em 0;color:#f7f3ea;max-width:16ch}
.hero .eyebrow{color:#f7f3ea}
.hero-tag{font-size:1.125rem;max-width:44ch;color:#f7f3ea}
.hero-acts{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.hero-acts .btn{display:inline-flex;align-items:center}
.ghost-btn{background:transparent;color:#f7f3ea;border:1px solid #f1dc8f}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin:var(--space-8) 0}
.door{display:block;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);padding:var(--space-4);color:var(--ink);text-decoration:none}
.door:hover h2{text-decoration:underline}
.door h2{margin:0 0 .3em;color:var(--link)}
.door p{margin:0;color:var(--muted)}
.coming-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.coming .ebody h3{margin:.15em 0}
.rideband{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4);margin:var(--space-8) 0;padding:var(--space-6);border-radius:var(--r);background:var(--badge-bg);color:var(--badge-ink)}
.rideband h2{margin:0;color:var(--badge-ink)}
.rideband p{margin:.3em 0 0;color:#ece3f3}
.rideband .ride-link{color:var(--badge-ink)}
/* The words carry their own soft shadow, so the picture can show through. */
.hero h1,.hero .hero-tag,.hero .eyebrow{text-shadow:0 2px 14px rgb(10 4 16 / .85),0 1px 3px rgb(10 4 16 / .9)}
@media (min-width:701px){.hero-in{min-height:min(52vw,720px)}}