/* Squirrelhog — brand-grounded: red + charcoal + cream */
:root{
  --cream: #F5F1EA;
  --cream-2: #ECE6D8;
  --paper: #FFF6E5;
  --ink: #1a1815;
  --charcoal: #404040;
  --red: #E1251B;
  --red-deep: #B31C13;
  --yellow: #FFC93C;
  --sky: #A8D8E8;
  --pink: #FFD2C4;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);
  --shadow-red: 6px 6px 0 var(--red);
  --border: 3px solid var(--ink);
  --border-thick: 4px solid var(--ink);
  --r: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--cream);
  color: var(--ink);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(64,64,64,0.04) 0, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(225,37,27,0.025) 0, transparent 1.5px),
    radial-gradient(circle at 40% 80%, rgba(64,64,64,0.04) 0, transparent 1.5px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
}

h1,h2,h3,h4{
  font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.mono{font-family:'JetBrains Mono', monospace; font-size: 0.85em; letter-spacing: 0.02em;}

a{color: inherit}

.wrap{max-width: 1280px; margin: 0 auto; padding: 0 28px;}

/* NAV */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: var(--border);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 28px; max-width: 1280px; margin: 0 auto;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color: inherit}
.brand-mark{height: 44px; width:auto; display:block}
.nav-links{display:flex; gap: 4px; align-items:center}
.nav-links a{
  padding: 8px 14px; border-radius: 99px; text-decoration:none;
  font-weight: 600; font-size: 15px;
}
.nav-links a:hover{background: var(--cream-2)}
.nav-cta{
  padding: 10px 18px !important; background: var(--red); color: #fff !important;
  border: var(--border); border-radius: 99px !important; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.nav-cta:hover{transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); background: var(--red) !important}

/* Marquee */
.marquee{
  background: var(--ink); color: var(--cream);
  border-top: var(--border); border-bottom: var(--border);
  overflow: hidden; padding: 12px 0;
  font-family:'Bricolage Grotesque'; font-weight: 700; font-size: 18px;
  letter-spacing: 0.02em;
}
.marquee-track{
  display:flex; gap: 36px; white-space: nowrap;
  animation: scroll 32s linear infinite;
  width: max-content;
}
.marquee span{display:inline-flex; align-items:center; gap: 36px}
.marquee .dot{display:inline-block; width:10px; height:10px; border-radius:50%; background: var(--red)}
.marquee .star{color: var(--yellow); font-size: 22px}
@keyframes scroll{
  from{transform: translateX(0)}
  to{transform: translateX(-50%)}
}

section{position:relative; padding: 80px 0;}
.eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink); color: var(--cream);
  padding: 6px 12px; border-radius: 99px;
  margin-bottom: 18px;
  font-weight: 600;
}
.eyebrow.red{background: var(--red); color: #fff}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px; border: var(--border-thick); border-radius: 99px;
  background: var(--red); color: #fff;
  font-weight: 700; font-size: 16px; text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
}
.btn:hover{transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink)}
.btn:active{transform: translate(2px,2px); box-shadow: 4px 4px 0 var(--ink)}
.btn.secondary{background: var(--cream); color: var(--ink)}
.btn.dark{background: var(--ink); color: var(--cream)}
.btn.yellow{background: var(--yellow); color: var(--ink)}

.sticker{
  background: var(--cream);
  border: var(--border-thick);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 24px;
}

.tape{
  position:absolute;
  width: 86px; height: 24px;
  background: rgba(255,201,60,0.7);
  border: 1px dashed rgba(0,0,0,0.25);
  transform: rotate(-6deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.halftone{
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.4px);
  background-size: 10px 10px;
}
.halftone.red{background-image: radial-gradient(var(--red) 1.2px, transparent 1.4px);}

.row{display:flex; gap: 20px; flex-wrap: wrap}
.center{text-align:center}
.muted{color: var(--charcoal)}

@keyframes bob{
  0%,100%{transform: translateY(0) rotate(var(--r,0deg))}
  50%{transform: translateY(-10px) rotate(var(--r,0deg))}
}
.bob{animation: bob 3s ease-in-out infinite}
.bob-slow{animation: bob 4.5s ease-in-out infinite}

@keyframes spin-slow{from{transform: rotate(0)} to{transform: rotate(360deg)}}
.spin-slow{animation: spin-slow 30s linear infinite}

.scribble{font-family:'Caveat', cursive; font-size: 22px; color: var(--red); transform: rotate(-4deg); display:inline-block}

@media (max-width: 820px){
  section{padding: 56px 0}
  .nav-links a:not(.nav-cta){display:none}
  .wrap{padding: 0 18px}
}