/* ═══════════════════════════════════════════════
   SIPPIN DESIGN SYSTEM v2 — shared theme
   Used by events.php / eventdetails.php / reserve.php
═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --espresso:#160f09;
  --roast:#221610;
  --roast-2:#2c1d13;
  --cream:#f4ecdd;
  --cream-2:#ece0c9;
  --cream-3:#e2d3b6;
  --caramel:#c98a4b;
  --caramel-light:#e0a866;
  --gold:#b7791f;
  --gold-light:#d4952a;
  --green:#24402e;
  --green-deep:#16281d;
  --ink:#2a1d12;
  --ink-soft:#5d4a37;
  --shadow-warm:0 22px 60px -18px rgba(43,24,10,.45);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--cream);color:var(--ink);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--gold);text-decoration:none;}
::selection{background:var(--caramel);color:#fff;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--espresso);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--caramel),var(--gold));border-radius:6px;}

/* ── Page hero band (dark, cinematic) ── */
.page-hero{
  position:relative;overflow:hidden;
  background:radial-gradient(ellipse 120% 100% at 50% -20%,#3a2617 0%,#221610 45%,#160f09 100%);
  padding:130px 20px 64px;text-align:center;
}
.page-hero::before,.page-hero::after{
  content:'';position:absolute;border-radius:50%;
  border:1.5px solid rgba(201,138,75,.25);pointer-events:none;
}
.page-hero::before{width:420px;height:420px;right:-130px;top:-140px;}
.page-hero::after{width:280px;height:280px;left:-90px;bottom:-110px;}
.page-hero h1{
  font-family:'Playfair Display',serif;font-weight:800;color:var(--cream);
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.12;
  animation:heroIn .9s var(--ease-out) .1s both;
}
.page-hero .eyebrow{
  color:var(--caramel-light);font-size:.78rem;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;margin-bottom:14px;animation:heroIn .9s var(--ease-out) both;
}
.page-hero .sub{
  color:rgba(244,236,221,.7);max-width:560px;margin:16px auto 0;line-height:1.65;font-size:1.02rem;
  animation:heroIn .9s var(--ease-out) .22s both;
}
@keyframes heroIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}

/* ── Navbar ── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,54px);
  background:rgba(22,15,9,.82);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 10px 40px -12px rgba(0,0,0,.55);
}
.nav-brand{display:flex;align-items:center;gap:12px;}
.nav-logo{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--caramel);box-shadow:0 0 0 3px rgba(201,138,75,.25);transition:transform .5s var(--ease-spring);}
.nav-brand:hover .nav-logo{transform:rotate(-8deg) scale(1.07);}
.nav-name{font-family:'Playfair Display',serif;font-weight:700;font-size:1.15rem;color:var(--cream);}
.nav-links{display:flex;gap:clamp(14px,2.4vw,32px);}
.nav-links a{color:var(--cream-2);font-weight:500;font-size:.93rem;position:relative;padding:6px 2px;transition:color .3s;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--caramel),var(--gold-light));transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);border-radius:2px;}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}
@media(max-width:760px){.nav-links{display:none;}}

/* ── Buttons ── */
.btn-primary,.btn-outline,.btn-green{
  font-family:'Inter',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;
  padding:14px 32px;border-radius:999px;position:relative;overflow:hidden;
  display:inline-block;text-align:center;
  transition:transform .35s var(--ease-spring),box-shadow .35s;
}
.btn-primary{
  border:none;color:#fff;
  background:linear-gradient(115deg,var(--caramel) 0%,var(--gold) 55%,var(--caramel) 100%);
  background-size:200% auto;
  box-shadow:0 10px 30px -8px rgba(201,138,75,.55);
}
.btn-primary::before{
  content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease-out);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 42px -10px rgba(201,138,75,.7);background-position:right center;color:#fff;}
.btn-primary:hover::before{left:130%;}
.btn-primary:active{transform:translateY(-1px) scale(.98);}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--caramel);}
.btn-outline:hover{transform:translateY(-3px);background:rgba(201,138,75,.1);}
.btn-green{border:none;color:#fff;background:linear-gradient(115deg,#2f5a3d,var(--green));box-shadow:0 10px 30px -8px rgba(36,64,46,.55);}
.btn-green:hover{transform:translateY(-3px) scale(1.03);color:#fff;box-shadow:0 16px 40px -10px rgba(36,64,46,.7);}

/* ── Cards / layout ── */
.page-body{max-width:1180px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(18px,4vw,54px);}
.card{
  background:#fffdf8;border-radius:22px;overflow:hidden;
  box-shadow:0 10px 30px -12px rgba(43,24,10,.2);
  transition:transform .5s var(--ease-out),box-shadow .5s;
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-warm);}

/* chips & pills */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(201,138,75,.14);color:var(--gold);font-weight:700;font-size:.82rem;
  padding:6px 15px;border-radius:999px;letter-spacing:.03em;
}
.chip-green{background:rgba(36,64,46,.12);color:var(--green);}
.chip-cream{background:rgba(244,236,221,.14);color:var(--cream-2);border:1px solid rgba(244,236,221,.25);}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);}
.reveal.visible{opacity:1;transform:none;}

/* footer */
.site-footer{background:var(--espresso);padding:44px 24px;border-top:1px solid rgba(201,138,75,.25);text-align:center;margin-top:60px;}
.site-footer p{color:rgba(244,236,221,.4);font-size:.87rem;line-height:1.7;}
.site-footer a{color:var(--cream-2);font-weight:600;}
.site-footer a:hover{color:var(--caramel-light);}
.footer-links{display:flex;gap:clamp(16px,3vw,34px);justify-content:center;flex-wrap:wrap;margin-bottom:20px;}

/* forms */
.form-label{font-weight:600;color:var(--ink);display:block;margin-bottom:6px;font-size:.95rem;}
.form-input{
  width:100%;padding:13px 16px;margin:0 0 18px;font-size:1rem;font-family:inherit;color:var(--ink);
  border:1.5px solid var(--cream-3);border-radius:14px;background:#fffdf8;
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
.form-input:focus{outline:none;border-color:var(--caramel);box-shadow:0 0 0 4px rgba(201,138,75,.15);transform:translateY(-1px);}

/* Phones */
@media(max-width:640px){
  .page-hero{padding:96px 18px 48px;}
  .page-hero h1{font-size:clamp(1.6rem,7.5vw,2.2rem);}
  .page-hero .eyebrow{font-size:.68rem;letter-spacing:.2em;}
  .page-hero .sub{font-size:.94rem;}
  .page-body{padding:36px 16px;}
  .btn-primary,.btn-outline,.btn-green{padding:13px 24px;font-size:.95rem;}
  .card:hover{transform:none;}          /* no hover-lift jank on touch */
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}