/* ============================================================
   Smash n' Krisp — shared stylesheet
   Inspired by the reference: deep brick-red + cream, serif display,
   rounded pill buttons, rounded image corners, clean airy layout.
   ============================================================ */
:root{
  color-scheme: light;
  --red:#882621;        /* deep brick red (hero / nav) — matched to reference */
  --red-2:#7A1B15;
  --maroon:#7D241E;     /* fan-favorites band (brighter maroon in reference) */
  --maroon-2:#5E120E;   /* deepest accent */
  --cream:#F6EFE6;      /* page cream — warm off-white from reference */
  --cream-2:#EFE4CE;
  --paper:#FBF5EC;
  --ink:#2A1712;        /* body text on cream */
  --muted:#6E4A40;      /* secondary text */
  --line:rgba(42,23,18,.12);
  --accent:#C25A3A;     /* warm clay used sparingly */
  --maxw:1200px;
  --r:14px;             /* card/image radius */
  --rpill:999px;        /* pill buttons */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.display{font-family:'Playfair Display',Georgia,serif;font-weight:800;line-height:1.02;letter-spacing:-.01em}
.script{font-family:'Dancing Script',cursive;font-weight:700}
.eyebrow{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.74rem}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- nav (logo left, links right) ---------- */
header.nav{background:var(--red);color:var(--cream);position:sticky;top:0;z-index:80}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:104px}
.nav .brand{height:76px;display:inline-flex;align-items:center;line-height:0;transform:translateY(6px);transition:transform .2s ease}
.nav .brand:hover{transform:translateY(6px) scale(1.04)}
.nav .brand img{height:100%;width:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-left,.nav-right{display:contents}
@media(max-width:720px){.nav-inner{height:84px}.nav .brand{height:60px}}
.nav-links a{color:var(--cream);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9;padding:4px 0;border-bottom:2px solid transparent;transition:.18s}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;border-bottom-color:var(--cream)}
.nav-cta{background:var(--cream);color:var(--red)!important;border-radius:var(--rpill);padding:12px 24px!important;font-weight:700!important;letter-spacing:.08em!important;opacity:1!important;border:0!important;display:inline-flex;gap:8px;align-items:center;transition:.18s}
.nav-cta:hover{background:#fff;transform:translateY(-1px)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:26px;height:2px;background:var(--cream);margin:6px 0;transition:.3s}

/* ---------- buttons (rounded pills, like reference) ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:var(--rpill);font-family:'DM Sans',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:2px solid transparent;transition:.18s}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(3px)}
.btn-cream{background:var(--cream);color:var(--red)}
.btn-cream:hover{background:#fff}
.btn-red{background:var(--red);color:var(--cream)}
.btn-red:hover{background:var(--maroon)}
.btn-outline{background:transparent;color:var(--cream);border-bottom:2px solid var(--cream);border-radius:0;padding:8px 2px;letter-spacing:.14em}
.btn-outline:hover{color:#fff}
.btn-outline-red{background:transparent;color:var(--red);border:2px solid rgba(142,32,24,.35)}
.btn-outline-red:hover{background:var(--red);color:var(--cream);border-color:var(--red)}

/* ---------- page hero band (inner pages) ---------- */
.pagehead{background:var(--red);color:var(--cream);position:relative;overflow:hidden}
.pagehead::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border:2px solid rgba(245,237,221,.14);border-radius:50%}
.pagehead .wrap{position:relative;padding:70px 32px}
.pagehead .eyebrow{color:var(--cream);opacity:.85;margin-bottom:14px;display:block}
.pagehead h1{font-size:clamp(2.6rem,6vw,4.4rem);color:var(--cream)}
.pagehead h1 .script{color:var(--cream);font-weight:700}
.pagehead p{max-width:58ch;margin-top:14px;color:#EAD9C4;font-size:1.08rem}

/* ---------- sections ---------- */
section{padding:88px 0}
.sec-head{max-width:640px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head .eyebrow{color:var(--red);margin-bottom:14px;display:block}
.sec-head h2{font-size:clamp(2.2rem,4.6vw,3.3rem);color:var(--red)}
.sec-head p{margin-top:14px;color:var(--muted)}

/* ---------- rounded image frame ---------- */
.frame{border-radius:var(--r);overflow:hidden;box-shadow:0 24px 50px -28px rgba(42,23,18,.5)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- feature icon row ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);background:var(--cream)}
.feature{padding:14px 26px;text-align:center;border-right:1px solid var(--line)}
.feature:last-child{border-right:0}
.feature .ico{width:42px;height:42px;margin:0 auto 14px;color:var(--red)}
.feature h3{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.86rem;color:var(--red);margin-bottom:8px}
.feature p{color:var(--muted);font-size:.92rem;max-width:22ch;margin:0 auto}

/* ---------- footer ---------- */
footer{background:var(--red);color:var(--cream)}
.foot-main{display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1.2fr;gap:44px;padding:64px 0 52px}
.foot-about p{color:#EAD9C4;max-width:34ch;font-size:.96rem;margin-bottom:20px}
.foot-brand{height:64px;display:inline-flex;line-height:0;margin-bottom:16px}
.foot-brand img{height:100%;width:auto}
.foot-col h4{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.82rem;margin-bottom:12px}
.foot-col a,.foot-col p{display:block;color:#EAD9C4;font-size:.94rem;padding:4px 0}
.foot-col a:hover{color:#fff}
.foot-social,.socials{display:flex;gap:12px}
.foot-social a,.socials a{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(245,237,221,.35);display:inline-flex;align-items:center;justify-content:center;color:var(--cream);transition:.18s}
.foot-social a svg,.socials a svg{width:20px;height:20px}
.foot-social a:hover,.socials a:hover{background:var(--cream);color:var(--red);border-color:var(--cream);transform:translateY(-2px)}
.copyright{border-top:1px solid rgba(245,237,221,.16);padding:22px 0 28px;text-align:center;color:#EAD9C4;font-size:.86rem}

/* ---------- utilities ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.marquee{background:var(--maroon);color:var(--cream);overflow:hidden;white-space:nowrap}
.marquee ul{display:inline-flex;padding:12px 0;list-style:none;animation:scroll 32s linear infinite}
.marquee li{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.82rem;padding:0 26px;position:relative;opacity:.9}
.marquee li::after{content:"◆";position:absolute;right:-4px;opacity:.5}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .two{grid-template-columns:1fr;gap:32px}
  .foot-main{grid-template-columns:1fr 1fr;gap:32px}
  .features{grid-template-columns:1fr 1fr}
  .feature{border-bottom:1px solid var(--line)}
  .feature:nth-child(odd){border-right:1px solid var(--line)}
  .feature:nth-child(even){border-right:0}
}
@media(max-width:720px){
  .nav-inner{display:flex;justify-content:space-between}
  .nav .brand{justify-self:auto}
  .nav-links{display:flex;position:fixed;inset:92px 0 auto 0;background:var(--maroon);flex-direction:column;gap:0;padding:8px 0;transform:translateY(-160%);transition:transform .3s}
  .nav-links.open{transform:translateY(0)}
  .nav-left,.nav-right{display:contents}
  .nav-links a{width:100%;padding:15px 32px;border-bottom:1px solid rgba(245,237,221,.12)}
  .nav-links a.active{border-bottom-color:rgba(245,237,221,.12)}
  .nav-cta{margin:8px 32px}
  .burger{display:block}
  .features{grid-template-columns:1fr}
  .feature{border-right:0}
  section{padding:60px 0}
  .foot-main{grid-template-columns:1fr;gap:30px;padding:48px 0 40px}
}
/* ---------- scroll reveal animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}

/* entrance for the hero (plays on load) */
.hero .eyebrow,.hero h1 .line,.hero p.lead,.hero-actions,.hero-photo{opacity:0;transform:translateY(20px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .line:nth-child(1){animation-delay:.12s}
.hero h1 .line:nth-child(2){animation-delay:.22s}
.hero h1 .line:nth-child(3){animation-delay:.32s}
.hero p.lead{animation-delay:.42s}
.hero-actions{animation-delay:.52s}
.hero-photo{animation-delay:.30s}
@keyframes rise{to{opacity:1;transform:none}}

/* nav underline grows on hover */
.nav-links a{position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--cream);opacity:.9;transition:right .28s cubic-bezier(.2,.7,.2,1)}
.nav-links a:not(.nav-cta):hover::after{right:0}
.nav-links a.active{border-bottom-color:transparent}
.nav-links a.active::after{right:0}

/* smoother, springier lifts on interactive cards/buttons */
.card,.item,.stat,.info-card,.hours-card{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.card:hover,.item:hover{transform:translateY(-6px)}
.item:hover{box-shadow:0 26px 52px -30px rgba(42,23,18,.6)}
.card .go,.socials a{transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s}
.card:hover .go{transform:translateX(4px)}
.frame img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.frame:hover img{transform:scale(1.05)}

/* ---------- deep-link highlight (menu item arrival flash) ---------- */
.item.flash{animation:itemflash 1.6s cubic-bezier(.2,.7,.2,1)}
@keyframes itemflash{
  0%{box-shadow:0 0 0 0 rgba(194,90,58,0);transform:none}
  14%{box-shadow:0 0 0 4px rgba(194,90,58,.55),0 26px 52px -30px rgba(42,23,18,.6);transform:translateY(-6px)}
  100%{box-shadow:0 18px 40px -30px rgba(42,23,18,.55);transform:none}
}

/* ---------- page transitions (fade between site pages) ---------- */
.page-enter{opacity:0;transform:translateY(8px);transition:opacity .42s cubic-bezier(.2,.7,.2,1),transform .42s cubic-bezier(.2,.7,.2,1)}
.page-enter.page-in{opacity:1;transform:none}
body.page-leave{opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero .eyebrow,.hero h1 .line,.hero p.lead,.hero-actions,.hero-photo{opacity:1!important;transform:none!important}
  .hero-photo img{animation:none!important}
  .page-enter,.page-enter.page-in,body.page-leave{opacity:1!important;transform:none!important}
  .item.flash{animation:none!important}
}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}