/* ============================================================
   TRAILSIDE — shared brand kit
   National Park typeface · topographic texture · earthy palette
   ============================================================ */

/* Self-hosted National Park — no third-party font request, in keeping
   with our privacy-first stance. Two weights ship; map the thin cut to
   the light range and the regular cut to everything heavier. */
@font-face{
  font-family:'National Park';
  src:url('/media/NationalPark-Thin.otf') format('opentype');
  font-weight:100 350; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'National Park';
  src:url('/media/NationalPark-Regular.otf') format('opentype');
  font-weight:351 900; font-style:normal; font-display:swap;
}

:root{
  --np: "National Park", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* core earthy palette */
  --ink:    #2f3733;   /* warm charcoal-green text */
  --ink-soft:#5d6661;
  --paper:  #f7f3ec;   /* warm off-white */
  --paper-2:#efe9dd;
  --line:   #ddd5c6;

  --moss:   #46603f;   /* forest green accent */
  --moss-d: #2c4128;
  --moss-l: #6f8a63;
  --bark:   #6b4f34;   /* brown */
  --tan:    #b98c5a;   /* topo / sand */
  --clay:   #c2562a;   /* burnt orange marker */

  /* shared dark-section tokens (nav, heroes, footers) */
  --forest:  #1e2b1a;
  --forest-2:#273422;
  --sand:    #f0e8d8;
  --amber:   #b98c5a;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--np);
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
}
h1,h2,h3,h4{ font-weight:200; line-height:1.04; letter-spacing:.005em; margin:0; text-wrap:balance; }
p{ text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---- topographic texture helpers ---- */
.topo{ background-image:url('/media/topo-tan.svg'); background-size:1400px auto; background-position:center; }

/* ---- utilities ---- */
.wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }
.eyebrow{ font-size:13px; letter-spacing:.26em; text-transform:uppercase; font-weight:500; color:var(--moss); }
.rule{ height:1px; background:var(--line); border:0; }
@media (max-width:720px){ .wrap{ padding:0 22px; } }

/* ============================================================
   SHARED NAV  (fixed, dark forest, blurred)
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 48px; background:rgba(30,43,26,.90);
  backdrop-filter:blur(12px); border-bottom:1px solid rgba(185,140,90,.18);
}
.nav .mark{ display:flex; align-items:center; gap:14px; color:var(--sand); text-decoration:none; }
.nav .mark img{ width:40px; height:40px; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.nav .mark .word{ font-size:16px; letter-spacing:.32em; font-weight:400; text-indent:.32em; }
.nav .nav-links{ display:flex; gap:34px; font-size:14px; letter-spacing:.08em; align-items:center; }
.nav .nav-links a{ color:rgba(240,232,216,.74); text-transform:uppercase; transition:color .15s; white-space:nowrap; }
.nav .nav-links a:hover{ color:var(--sand); }
.nav .nav-links a.active{ color:var(--sand); border-bottom:1px solid rgba(185,140,90,.5); padding-bottom:2px; }

/* hamburger */
.nav-burger{ display:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer; background:none; border:none; }
.nav-burger span{ display:block; width:22px; height:1.5px; background:rgba(240,232,216,.88); border-radius:2px; transition:transform .22s, opacity .22s; }
.nav-burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.mobile-nav{
  display:none; position:fixed; inset:0; z-index:19;
  background:rgba(22,32,18,.97); backdrop-filter:blur(16px);
  flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:80px 32px 40px;
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
  font-size:28px; font-weight:200; color:rgba(240,232,216,.85);
  letter-spacing:.08em; text-transform:uppercase; padding:14px 24px;
  border-radius:12px; width:100%; text-align:center; transition:background .15s, color .15s;
}
.mobile-nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.mobile-nav .mob-divider{ width:40px; height:1px; background:rgba(185,140,90,.25); margin:6px 0; }
.mobile-nav .mob-sub{ font-size:20px; color:rgba(240,232,216,.6); }

@media(max-width:860px){
  .nav{ padding:18px 24px; }
  .nav .nav-links{ display:none; }
  .nav-burger{ display:flex; }
}

/* ============================================================
   SHARED FOOTER
   ============================================================ */
footer.site-foot{
  background:var(--forest); padding:32px 48px;
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  font-size:14px; color:rgba(240,232,216,.5);
}
footer.site-foot a{ color:var(--amber); text-decoration:underline; text-decoration-color:rgba(185,140,90,.35); text-underline-offset:3px; }
footer.site-foot .sep{ opacity:.3; }
footer.site-foot .sig{ width:26px; height:26px; flex:none; }

/* ============================================================
   STORE BADGE  (static "coming soon")
   ============================================================ */
.badges{ display:flex; flex-wrap:wrap; gap:12px; }
.badge{
  display:inline-flex; align-items:center; gap:11px;
  padding:10px 18px 10px 15px; border-radius:13px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.badge:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.badge svg{ width:23px; height:23px; flex:none; }
.badge .bt{ display:flex; flex-direction:column; line-height:1.12; text-align:left; }
.badge .bt small{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.72; font-weight:500; }
.badge .bt span{ font-size:17px; font-weight:400; letter-spacing:.01em; }
/* on dark hero backgrounds */
.badge-wrap .badge{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.15); color:var(--sand); }
.badge-wrap .badge:hover{ background:rgba(255,255,255,.18); }