/* Camping and Getting Here — hero with anchor pills, fee boxes, rules, things to do. */

.statband.-camp{margin-top:52px}


.feebox{margin-top:34px;
  & .feebox__label{font:600 13px var(--font-mono);letter-spacing:.12em;color:var(--primary)}
  & .feebox__price{margin-top:10px;display:flex;align-items:baseline;gap:10px}
  & .feebox__price span:first-child{font:800 44px var(--font-display);color:var(--heading)}
  & .feebox__price span:last-child{font:500 13px var(--font-mono);letter-spacing:.08em;color:var(--caption)}
  & h3{margin:22px 0 0;font:700 18px var(--font-display);color:var(--heading)}
  & p{margin:14px 0 0;font:400 16px/1.8 var(--font-body)}
}
.notice{margin-top:16px;background:var(--surface);border-left:3px solid var(--primary);padding:14px 18px;font:400 15px/1.75 var(--font-body)}

/* The campground map rides alongside the copy. */
.mapcard{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:14px;position:sticky;top:20px;
  & img{width:100%;height:auto;display:block}
  & figcaption{margin-top:10px;display:flex;justify-content:space-between;font:500 12px var(--font-mono);letter-spacing:.08em;color:var(--caption)}
}

.rules{margin:36px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgb(255 255 255/.14);border:1px solid rgb(255 255 255/.14);
  & li{background:var(--secondary);padding:18px 22px;font:400 16px/1.65 var(--font-body);color:var(--on-dark-1);
    &::before{content:"—";color:var(--primary);margin-right:12px}
  }
}
.rules__out{margin-top:26px;font:600 13px var(--font-mono);letter-spacing:.06em;color:var(--on-dark-4)}

.todo{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  & article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 30px}
  & h3{margin:0;font:700 19px var(--font-display);color:var(--heading)}
  & p{margin:10px 0 0;font:400 16px/1.75 var(--font-body)}
}

@media (max-width:960px){
  .rules,.todo{grid-template-columns:1fr}
  .grid2.-dirs{grid-template-columns:1fr}
  .mapcard{position:static}
  .chero .chero__inner{padding-top:80px}
  .chero .chero__coords{display:none}
  .statband.-camp{margin-top:32px}
}
@media (min-width:961px) and (max-width:1100px){
  .todo{grid-template-columns:repeat(2,1fr)}
}