:root{
  --bg:#0f2016; --panel:#12261b; --text:#eaf4ed; --muted:#a9c0b0; --accent:#6bd39b; --gold:#ffd166;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); line-height:1.45}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
header{position:sticky; top:0; z-index:20; background:linear-gradient(180deg, rgba(18,38,27,.98), rgba(18,38,27,.92)); border-bottom:1px solid #1f3a2b}
.container{max-width:1200px; margin:0 auto; padding:18px 20px}
.nav{display:flex; gap:16px; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#ffb703); box-shadow:0 0 0 2px #1f3a2b}
.brand h1{margin:0;font-size:1.1rem;letter-spacing:.5px}
.menu a{padding:8px 10px;border-radius:8px}
.menu a:hover{background:#0d1b13; text-decoration:none}
.hero{position:relative;overflow:hidden;border-bottom:1px solid #1f3a2b}
.hero .container{padding:48px 20px}
.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
h2{margin:.25rem 0 0 0; font-size:2rem}
.hero p{color:var(--muted); max-width:60ch}
.cta{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.btn{display:inline-block; padding:10px 14px; border:1px solid #2c5; border-radius:10px; color:var(--text)}
.btn.secondary{border-color:#445; opacity:.9}
.section{border-top:1px solid #1f3a2b}
.section .container{padding:28px 20px}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:14px}
.card{background:var(--panel); border:1px solid #1f3a2b; border-radius:12px; padding:14px; transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2)}
.card h3{margin:0 0 6px 0; font-size:1.05rem}
.meta{color:var(--muted); font-size:.9rem; margin-bottom:8px}
.badge{display:inline-block; font-size:.75rem; border:1px solid #2c5; border-radius:999px; padding:2px 8px; margin:2px 6px 2px 0}
.footer{color:#9ab3a5; font-size:.9rem; border-top:1px solid #1f3a2b}
.searchbar{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
input,select{background:#0d1b13; color:var(--text); border:1px solid #244; border-radius:10px; padding:10px 12px}
.count{color:var(--muted); margin-left:auto}
.small{font-size:.9rem; color:var(--muted)}

/* Mockup-style hero with image */
.hero.mockup {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #1f3a2b;
  background: #0b1a12 url('/assets/hero-mengocamping.png') center/cover no-repeat;
}
.hero.mockup::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(120% 60% at 50% 0%, rgba(0,0,0,.0) 0%, rgba(11,26,18,.25) 55%, rgba(11,26,18,.65) 100%);
}
.hero .inner{position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:48px 20px;}
.brand h1 { font-family: inherit; font-weight: 800; letter-spacing: .5px;}
.brand .wordmark{font-size:1.25rem; margin:0;}
.tagline{color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font-size:.85rem}
.bigtitle{font-size:2.15rem; margin:.25rem 0 0 0}

/* --- Mock style adjustments --- */
:root{ --gold:#ffd166; --bg:#0f2016; --panel:#11251b; --text:#eaf4ed; --muted:#a9c0b0; --accent:#6bd39b; }
header .menu a{font-weight:600; letter-spacing:.3px}
.hero.mockup{min-height:62vh; background:#0b1a12 url('/assets/hero-mengocamping.png') center/cover no-repeat;}
.hero.mockup .inner{max-width:1100px}
.hero.mockup h2.bigtitle{font-size:3rem; color:var(--gold); margin:0 0 8px 0}
.sub{font-size:1.25rem; color:#ffffffd9; margin:0 0 6px 0}
.sub2{color:#ffffffb3; max-width:70ch; margin-top:4px}
.searchwrap{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.searchwrap .input{flex:1; min-width:280px; display:flex; border:1px solid #2b4; background:#0d1b13; border-radius:12px; padding:4px}
.searchwrap input{flex:1; border:0; background:transparent; color:var(--text); padding:10px 12px; outline:none}
.btn.gold{background:var(--gold); color:#1b2b22; border-color:var(--gold); font-weight:700}
.btn.gold:hover{filter:brightness(0.95); text-decoration:none}
.section .featuregrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px}
.feature{background:var(--panel); border:1px solid #1f3a2b; border-radius:14px; padding:18px}
.feature h3{color:var(--gold); margin:0 0 6px 0; font-size:1.3rem}
.feature p{color:var(--text)}
.feature .btn{margin-top:10px; display:inline-block}
header .brand h1.wordmark{color:var(--gold); font-weight:800; letter-spacing:.5px}

/* --- Newspaper page styles --- */
.newspaper { background:#0e2017; }
.newswrap{max-width:1100px; margin:0 auto; padding:28px 20px}
.news-mast{display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid #1f3a2b; padding-bottom:10px; margin-bottom:16px}
.news-mast .title{font-size:2.2rem; letter-spacing:.04em; color:var(--gold)}
.news-mast .date{color:var(--muted)}
.news-grid{display:grid; grid-template-columns:2fr 1fr; gap:18px}
.lead{background:var(--panel); border:1px solid #1f3a2b; border-radius:12px; padding:16px}
.lead h2{margin:.2rem 0; font-size:1.6rem}
.deck{color:var(--muted); margin:.3rem 0 .6rem 0}
.by{font-size:.9rem; color:#9ab3a5}
.sidebar .card{min-height:140px}
.sectionline{border-top:2px solid #1f3a2b; margin:20px 0 12px 0; padding-top:10px}
.kicker{color:var(--gold); text-transform:uppercase; letter-spacing:.15em; font-size:.8rem}
/* header search link */
.header-search{margin-left:8px; border:1px solid #2c5; border-radius:8px; padding:6px 10px; display:inline-block}
.header-search:hover{text-decoration:none; background:#0d1b13}
/* site-wide search page */
.searchpage .container{padding:28px 20px}
.result{background:var(--panel); border:1px solid #1f3a2b; border-radius:12px; padding:12px; margin:10px 0}
.result a{font-weight:600}
.result .meta{font-size:.9rem; color:var(--muted)}

/* --- Enhanced newspaper front page --- */
.news-mast .strap{color:#9ab3a5; font-size:.95rem; margin-top:4px}
.news-sections{display:grid; grid-template-columns:2fr 1fr; gap:18px; margin-top:16px}
.section-col{display:grid; gap:16px}
.story{background:var(--panel); border:1px solid #1f3a2b; border-radius:12px; padding:14px}
.story h3{margin:.2rem 0 .4rem 0; font-size:1.1rem}
.story .meta{color:var(--muted); font-size:.9rem}
.section-label{color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; margin-bottom:6px}
hr.rule{border:0; border-top:2px solid #1f3a2b; margin:12px 0}
.tag{display:inline-block; border:1px solid #2c5; border-radius:999px; padding:2px 8px; font-size:.75rem; margin-right:6px}
.lead .tagrow{margin:6px 0}
.badge-campgrounds{border-color:#58c58a}
.badge-events{border-color:#f5a623}
.badge-gear{border-color:#7abfff}
.badge-community{border-color:#ff9bb3}

/* --- Map & mockup polish --- */
.mapwrap{margin:16px 0 6px 0; border:1px solid #1f3a2b; border-radius:12px; overflow:hidden; background:#0d1b13}
#cgmap{height:400px; width:100%}
.mapnote{color:#a9c0b0; font-size:.9rem; margin-top:6px}
.detail-map{height:280px; width:100%; border-radius:12px; overflow:hidden; margin-top:10px; border:1px solid #1f3a2b}
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.info-grid .card p{margin:.3rem 0}
header .menu a{font-weight:600; letter-spacing:.3px}
.searchbar input{min-width:240px}