/* Gone Stumpin' - shared styles */
:root{
  --green:#1d4634;
  --green-dark:#123324;
  --green-mid:#2a5c43;
  --orange:#f26d21;
  --orange-dark:#c95412;
  --cream:#f7f1df;
  --cream-2:#fdfaf0;
  --ink:#23301f;
  --radius:18px;
  --shadow:0 10px 30px rgba(18,51,36,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  font-size:17px;
  overflow-x:hidden;
}
h1,h2,h3,.chunky{
  font-family:"Arial Black","Avenir Next Heavy","Avenir Next","Segoe UI",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.12;
  color:var(--green-dark);
}
img{max-width:100%;height:auto}
a{color:var(--orange-dark)}

/* ---------- drifting wood chips (ambient background) ---------- */
.chips{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.chip{
  position:absolute;top:-40px;border-radius:3px;
  background:linear-gradient(135deg,#d9a05b,#b97f36);
  opacity:.5;
  animation:drift linear infinite;
}
@keyframes drift{
  0%{transform:translateY(-40px) rotate(0deg)}
  100%{transform:translateY(110vh) rotate(340deg)}
}

/* ---------- opening banner ---------- */
.opening-banner{
  position:relative;z-index:5;
  background:repeating-linear-gradient(45deg,var(--orange) 0 26px,var(--orange-dark) 26px 52px);
  color:#fff;text-align:center;
  font-weight:800;letter-spacing:.02em;
  padding:.6rem 1rem;font-size:.98rem;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.opening-banner .pulse{display:inline-block;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---------- header ---------- */
header.site-head{
  position:sticky;top:0;z-index:10;
  background:rgba(247,241,223,.94);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--green);
}
.head-inner{
  max-width:1120px;margin:0 auto;padding:.5rem 1rem;
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{
  width:52px;height:52px;border-radius:50%;
  border:3px solid var(--orange);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover img{transform:rotate(-12deg) scale(1.1)}
.brand .brand-name{
  font-family:"Arial Black",sans-serif;font-weight:900;font-size:1.25rem;color:var(--green-dark);
}
.brand .brand-name span{color:var(--orange-dark)}
nav.main-nav{margin-left:auto;display:flex;gap:.35rem;flex-wrap:wrap}
nav.main-nav a{
  text-decoration:none;font-weight:800;color:var(--green-dark);
  padding:.45rem .8rem;border-radius:999px;border:2px solid transparent;
  transition:all .2s;
}
nav.main-nav a:hover,nav.main-nav a.active{
  background:var(--green);color:var(--cream-2);
  transform:translateY(-2px) rotate(-1deg);
  box-shadow:0 5px 12px rgba(18,51,36,.3);
}

/* ---------- layout ---------- */
main{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 1rem 3rem}
section{margin-top:3rem}
.section-title{font-size:clamp(1.6rem,4.5vw,2.3rem);margin-bottom:.6rem}
.section-title .accent{color:var(--orange-dark)}

/* ---------- hero ---------- */
.hero{
  margin-top:1.2rem;border-radius:26px;overflow:hidden;
  box-shadow:var(--shadow);position:relative;
  border:4px solid var(--green);
  animation:heroIn .8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes heroIn{from{opacity:0;transform:translateY(26px) scale(.99)}to{opacity:1;transform:none}}
.hero img{display:block;width:100%}
.hero-caption{
  background:var(--green-dark);color:var(--cream);
  padding:1.4rem 1.4rem 1.6rem;position:relative;
}
.hero-caption h1{color:#fff;font-size:clamp(1.9rem,6vw,3.1rem)}
.hero-caption h1 .accent{color:var(--orange)}
.hero-caption p{max-width:640px;margin-top:.5rem;font-size:1.08rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--orange);color:#fff;text-decoration:none;
  font-weight:900;font-size:1.05rem;padding:.8rem 1.6rem;border-radius:999px;
  border:3px solid var(--orange-dark);
  box-shadow:0 6px 0 var(--orange-dark);
  transition:transform .15s,box-shadow .15s;
  cursor:pointer;font-family:inherit;
}
.btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 9px 0 var(--orange-dark)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--orange-dark)}
.btn.green{background:var(--green);border-color:var(--green-dark);box-shadow:0 6px 0 var(--green-dark)}
.btn.green:hover{box-shadow:0 9px 0 var(--green-dark)}
.btn.green:active{box-shadow:0 2px 0 var(--green-dark)}
.btn-row{margin-top:1.2rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- playful tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1.2rem}
.tile{
  background:var(--cream-2);border:3px solid var(--green);border-radius:var(--radius);
  padding:1.2rem;box-shadow:0 5px 0 rgba(18,51,36,.25);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.tile:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 12px 22px rgba(18,51,36,.25)}
.tile h3{font-size:1.15rem;margin-bottom:.35rem}
.tile .big{font-size:2rem;font-family:"Arial Black",sans-serif;color:var(--orange-dark)}
.tile p{font-size:.98rem}

/* ---------- town links ---------- */
.town-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.9rem;margin-top:1.2rem}
.town-card{
  display:block;text-decoration:none;background:var(--green);color:var(--cream-2);
  border-radius:var(--radius);padding:1.1rem 1rem;text-align:center;
  font-family:"Arial Black",sans-serif;font-weight:900;font-size:1.1rem;
  border:3px solid var(--green-dark);box-shadow:0 5px 0 var(--green-dark);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s;
}
.town-card small{display:block;font-family:inherit;font-weight:700;font-size:.8rem;margin-top:.3rem;color:#ffd9b0}
.town-card:hover{transform:translateY(-5px) rotate(1.2deg) scale(1.03);background:var(--green-mid)}

/* ---------- mascot ---------- */
.mascot-wrap{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.mascot{flex:0 0 auto;width:150px;height:150px;cursor:pointer}
.mascot .face-scared{display:none}
.mascot:hover .face-calm,.mascot.flee .face-calm{display:none}
.mascot:hover .face-scared,.mascot.flee .face-scared{display:block}
.mascot:hover,.mascot.flee{animation:wiggle .45s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg) translateX(-2px)}75%{transform:rotate(3deg) translateX(2px)}}
.mascot-bubble{
  background:#fff;border:3px solid var(--green-dark);border-radius:16px;
  padding:.9rem 1.1rem;max-width:420px;position:relative;font-weight:700;
  box-shadow:var(--shadow);
}
.mascot-bubble::before{
  content:"";position:absolute;left:-14px;top:38px;
  border:8px solid transparent;border-right-color:var(--green-dark);
}

/* ---------- about / owner ---------- */
.about-card{
  display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center;
  background:var(--cream-2);border:3px solid var(--green);border-radius:26px;
  padding:1.6rem;box-shadow:var(--shadow);
}
.about-card img.photo{
  width:300px;max-width:100%;border-radius:18px;border:4px solid var(--orange);
  transform:rotate(-1.5deg);transition:transform .3s;
}
.about-card img.photo:hover{transform:rotate(0) scale(1.02)}
.about-card .about-text{flex:1 1 300px}

/* ---------- pricing table ---------- */
.price-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:1.2rem;
  background:var(--cream-2);border:3px solid var(--green);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);font-size:1rem}
.price-table th{background:var(--green);color:var(--cream-2);text-align:left;padding:.85rem 1rem;font-size:1.02rem}
.price-table td{padding:.85rem 1rem;border-top:2px dashed #d8cba6}
.price-table tr{transition:background .15s}
.price-table tbody tr:hover{background:#fdf3d8}
.price-table .price{font-weight:900;color:var(--orange-dark);white-space:nowrap}
.floor-badge{
  display:inline-block;background:var(--orange);color:#fff;font-weight:900;
  padding:.45rem 1.1rem;border-radius:999px;border:3px solid var(--orange-dark);
  font-size:1.15rem;transform:rotate(-2deg);
  animation:bob 2s ease-in-out infinite;
}

/* ---------- join form ---------- */
.join-card{
  background:linear-gradient(160deg,var(--green) 0%,var(--green-dark) 100%);
  border-radius:26px;padding:2rem 1.6rem;color:var(--cream);
  box-shadow:var(--shadow);border:4px solid var(--green-dark);
  position:relative;overflow:hidden;
}
.join-card::after{
  content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,109,33,.4),transparent 70%);
  pointer-events:none;
}
.join-card h2{color:#fff}
.join-card p{max-width:560px}
.join-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.3rem;position:relative;z-index:1}
.join-form label{font-weight:800;font-size:.92rem;display:block}
.join-form input,.join-form select{
  width:100%;margin-top:.3rem;padding:.75rem .9rem;border-radius:12px;
  border:3px solid transparent;font-size:1rem;font-family:inherit;background:var(--cream-2);color:var(--ink);
}
.join-form input:focus,.join-form select:focus{outline:none;border-color:var(--orange)}
.join-form .full{grid-column:1/-1}
.join-msg{margin-top:1rem;font-weight:800;min-height:1.4em;position:relative;z-index:1}
.join-msg.ok{color:#ffb27a}
.join-msg.err{color:#ff9d9d}
@media(max-width:560px){.join-form{grid-column:1/-1;grid-template-columns:1fr}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.2rem;counter-reset:step}
.step{
  background:var(--cream-2);border:3px solid var(--green);border-radius:var(--radius);
  padding:1.2rem;position:relative;transition:transform .25s;
}
.step:hover{transform:translateY(-5px) rotate(.6deg)}
.step .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--orange);color:#fff;
  font-family:"Arial Black",sans-serif;font-size:1.15rem;border:3px solid var(--orange-dark);
  margin-bottom:.5rem;
}
.step h3{font-size:1.08rem;margin-bottom:.3rem}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:1;margin-top:4rem;
  background:var(--green-dark);color:var(--cream);
  padding:2.4rem 1rem 2rem;text-align:center;
}
footer img.foot-logo{max-width:420px;width:90%;border-radius:14px;margin-bottom:1rem}
footer nav{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:.8rem 0}
footer nav a{color:#ffd9b0;font-weight:800;text-decoration:none}
footer nav a:hover{color:#fff;text-decoration:underline}
footer .fine{font-size:.85rem;opacity:.85;max-width:640px;margin:.6rem auto 0}

/* ---------- action shot ---------- */
.action-shot{margin-top:1.4rem;border-radius:22px;overflow:hidden;border:4px solid var(--green);box-shadow:var(--shadow)}
.action-shot img{display:block;width:100%;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.action-shot:hover img{transform:scale(1.04)}
.action-shot figcaption{background:var(--green-dark);color:var(--cream);font-weight:800;padding:.7rem 1.1rem;font-size:.98rem}
.action-shot figcaption span{color:var(--orange)}

/* ---------- join section photo ---------- */
.join-photo{margin-bottom:1.2rem;border-radius:22px;overflow:hidden;border:4px solid var(--orange);box-shadow:var(--shadow);transform:rotate(.6deg);transition:transform .3s}
.join-photo:hover{transform:rotate(0) scale(1.01)}
.join-photo img{display:block;width:100%}
.join-photo figcaption{background:var(--cream-2);font-weight:800;padding:.65rem 1.1rem;font-size:.95rem;color:var(--green-dark)}

@media(max-width:640px){
  body{font-size:16px}
  .head-inner{justify-content:center}
  nav.main-nav{margin-left:0;justify-content:center}
  .hero-caption{padding:1.1rem}
  .about-card{padding:1.1rem}
}