/* ============================================================
   CHOWDOWN OUTTA TOWN, shared base
   Skinned to the live chwdwn.com feel: charcoal + cream +
   saffron bands + organic blobs + hot pink + chunky black
   display + retro script accents. Lora body.
   Tokens are the authoritative chwdwn brand values.
   ============================================================ */
:root{
  --cream:#fff7d3;       /* page background, site is LIGHT */
  --ink:#363636;         /* near-black headings/text/borders */
  --charcoal:#3a3633;    /* header/footer bars */
  --saffron:#fab52b;     /* primary CTA, gold tier */
  --orange:#ff751f;      /* hover/accent */
  --pink:#ff2273;        /* chwdwn hot pink */
  --purple:#5c4875;      /* blob/section accent */
  --blue:#36a8c5;        /* blob/section accent */
  --sage:#5a6954;        /* confirm states */
  --paid:#8f3230;        /* deep red, paid reference */
  --burgundy:#70384f;   /* real chwdwn secondary */  --radius:1.5rem;
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:"Lora",Georgia,serif;line-height:1.55;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit}
img{max-width:100%}

/* Display / heading stack. Supreme + Supreme stand in for the
   licensed "Supreme" face used on chwdwn.com; Supreme is the loaded
   web fallback. Swap in the Supreme @font-face here when the licensed
   files are available, the rest of the system inherits it. */
.display{font-family:"Supreme","Supreme",sans-serif;text-transform:uppercase;font-weight:900;letter-spacing:-.01em;line-height:.95;color:var(--ink)}
.script{font-family:"Shrikhand",cursive;font-weight:400;letter-spacing:.01em}
.chip{
  display:inline-block;font-family:"Supreme",sans-serif;font-weight:800;
  text-transform:uppercase;font-size:12px;letter-spacing:.12em;
  background:var(--orange);color:var(--cream);
  padding:6px 14px;border-radius:999px;
}

/* buttons: rounded-full pills like the live site */
.btn{
  font-family:"Supreme",sans-serif;text-transform:uppercase;font-weight:800;letter-spacing:.05em;
  border:2px solid var(--ink);border-radius:999px;padding:14px 28px;font-size:14px;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;text-decoration:none;
  transition:transform .2s cubic-bezier(.34,1,.64,1),background .2s,color .2s;
  background:transparent;color:var(--ink);
}
.btn:hover{transform:translateY(-2px)}
.btn-yellow{background:var(--saffron)}
.btn-yellow:hover{background:var(--orange);color:var(--cream)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:#000}
.btn-pink{background:var(--pink);color:var(--cream);border-color:var(--ink)}
.btn-pink:hover{background:#e01765}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:13px}

/* organic blobs */
.blob{position:absolute;pointer-events:none;z-index:0}
.b1{border-radius:46% 54% 62% 38% / 48% 42% 58% 52%}
.b2{border-radius:58% 42% 40% 60% / 52% 60% 40% 48%}
.b3{border-radius:40% 60% 55% 45% / 60% 38% 62% 40%}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:var(--charcoal);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;height:92px;gap:16px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.brand img{height:80px;width:auto;display:block}
.brand .o{font-family:"Supreme",sans-serif;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.28em;color:var(--saffron);align-self:center;white-space:nowrap}
.foot-logo{display:inline-block;text-decoration:none;flex:none}
.foot-logo img{width:min(300px,72vw);height:auto;display:block}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-family:"Supreme",sans-serif;text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.08em;text-decoration:none;color:var(--cream);opacity:.85}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1;color:var(--saffron)}
.nav-right{display:flex;align-items:center;gap:12px;flex:none}

/* hamburger toggle (hidden on desktop) */
.nav-toggle{display:none;background:rgba(255,247,211,.06);border:2px solid rgba(255,247,211,.6);border-radius:10px;width:42px;height:38px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav-toggle span{display:block;position:relative;width:20px;height:2px;background:var(--cream);transition:background .15s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--cream);transition:transform .2s}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:880px){
  .nav{height:70px}
  .brand img{height:56px}
  .brand .o{font-size:11px;letter-spacing:.24em}
  .nav-links{
    position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--charcoal);border-top:1px solid rgba(255,247,211,.14);
    padding:8px 0 16px;box-shadow:0 16px 24px rgba(0,0,0,.28);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .22s ease,opacity .22s ease;z-index:55;
  }
  body.menu-open .nav-links{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links a{padding:15px 24px;font-size:15px;border-bottom:1px solid rgba(255,247,211,.08);opacity:.9}
  .nav-toggle{display:inline-flex}
  /* the wide CTA pill would crowd the toggle off small screens; the menu
     carries the Nominate / Book links, so drop the header pill here */
  .nav-right .btn{display:none}
}

/* ---------- footer ---------- */
footer{background:var(--charcoal);color:var(--cream);padding:48px 0 36px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot p{font-size:14px;color:rgba(255,247,211,.75);max-width:42ch;margin-top:12px}
.foot-links{display:flex;flex-direction:column;gap:9px;font-family:"Supreme",sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.foot-links a{opacity:.85;text-decoration:none}
.foot-links a:hover{opacity:1;color:var(--saffron)}
.foot-base{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,247,211,.18);font-family:"Supreme",sans-serif;font-size:12px;color:rgba(255,247,211,.6)}

/* shared section-head used on several pages */
.sec-head{text-align:center;max-width:720px;margin:0 auto 44px;position:relative;z-index:1}
.sec-head .chip{margin-bottom:16px}
.sec-head h2{font-size:clamp(30px,4.6vw,52px)}
.sec-head p{font-size:18px;margin-top:16px}

/* ---------- owner application modal ---------- */
.cot-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(54,54,51,.55);backdrop-filter:blur(2px)}
.cot-modal.open{display:flex;animation:cotFade .18s ease}
@keyframes cotFade{from{opacity:0}to{opacity:1}}
.cot-modal-card{position:relative;width:min(440px,100%);max-height:92vh;overflow-y:auto;background:var(--cream);border:3px solid var(--ink);border-radius:var(--radius);padding:34px 30px 30px;box-shadow:10px 10px 0 var(--ink);animation:cotPop .22s cubic-bezier(.34,1.4,.64,1)}
@keyframes cotPop{from{transform:translateY(12px) scale(.97)}to{transform:translateY(0) scale(1)}}
.cot-modal-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:2px solid var(--ink);background:var(--cream);cursor:pointer;font-size:18px;font-weight:800;line-height:1;display:grid;place-items:center}
.cot-modal-card h3{font-family:"Supreme",sans-serif;text-transform:uppercase;font-size:24px;line-height:1.04;margin:14px 0 8px}
.cot-modal-card > p{font-size:15px;margin-bottom:18px}
.cot-modal-form label{font-family:"Supreme",sans-serif;font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.08em;display:block;margin:0 0 6px}
.cot-modal-form input{width:100%;border:2px solid rgba(58,54,51,.35);border-radius:12px;padding:11px 14px;font-family:"Supreme",sans-serif;font-size:15px;margin-bottom:14px;background:#fff;color:var(--ink)}
.cot-modal-form input:focus{outline:none;border-color:var(--orange)}
.cot-modal-form .btn{width:100%;justify-content:center;margin-top:4px}
@media(prefers-reduced-motion:reduce){.cot-modal.open,.cot-modal-card{animation:none}}
