/*
Theme Name: Roam & Pine
Theme URI: https://roamandpine.com
Author: Roam & Pine
Description: Custom vintage national-park editorial theme for Roam & Pine - camping, RV and vanlife printables. Hand-built, not a template.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: roamandpine
*/

:root{
  --pine:#1E3D33; --pine2:#2F5A49; --pine3:#3C6753;
  --amber:#E9A23B; --amber-d:#D98B2A; --rust:#C75B39;
  --cream:#F4ECDD; --cream2:#EADFC8; --paper:#FBF6EC;
  --ink:#21302A; --muted:#5E6C63; --line:#dfd2ba;
  --maxw:1160px; --read:730px;
  --shadow:0 14px 38px -22px rgba(30,61,51,.45);
  --radius:16px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Lora',Georgia,serif; font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--pine2);text-decoration:none}
a:hover{color:var(--rust)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:'Oswald',sans-serif;color:var(--pine);line-height:1.12;font-weight:600;letter-spacing:.2px}
.display{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.5px;text-transform:uppercase;line-height:.98}

/* ---- top stripe ---- */
.topstripe{height:7px;background:
  linear-gradient(90deg,var(--pine) 0 33%,var(--amber) 33% 66%,var(--rust) 66% 100%)}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,246,236,.92);
  backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.brand{display:flex;align-items:center;gap:13px;color:var(--pine)}
.brand img{width:50px;height:50px;border-radius:50%}
.wordmark{font-family:'Anton',sans-serif;font-size:26px;letter-spacing:1px;text-transform:uppercase}
.wordmark em{color:var(--rust);font-style:normal}
.nav-menu{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-menu a{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.2px;
  font-size:14px;font-weight:500;color:var(--pine);padding:6px 0;border-bottom:2px solid transparent}
.nav-menu a:hover{color:var(--rust);border-color:var(--amber)}
.menu-toggle{display:none}

/* ---- hero ---- */
.hero{position:relative;background:
  radial-gradient(120% 90% at 50% -10%,#F6E7C8 0%,var(--cream) 45%,var(--cream2) 100%);
  overflow:hidden;border-bottom:1px solid var(--line)}
.hero-inner{position:relative;z-index:3;text-align:center;padding:74px 24px 220px}
.eyebrow{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:4px;
  font-size:13px;color:var(--rust);font-weight:600;margin:0 0 18px}
.hero h1{font-size:clamp(44px,7vw,92px);color:var(--pine);margin:0 0 18px}
.hero h1 .amber{color:var(--amber-d)}
.hero p.lede{max-width:620px;margin:0 auto 26px;font-size:20px;color:#3c4a42}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:680px;margin:0 auto}
.chip{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:13px;
  font-weight:500;background:#fff;border:1.5px solid var(--line);color:var(--pine);
  padding:9px 16px;border-radius:999px;transition:.18s}
.chip:hover{background:var(--pine);color:#fff;border-color:var(--pine);transform:translateY(-2px)}
.hero-range{position:absolute;left:0;right:0;bottom:-1px;z-index:1;width:100%;display:block}

/* ---- section frame ---- */
.section{padding:64px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.section-head h2{font-size:clamp(26px,3.4vw,38px);margin:0;text-transform:uppercase;letter-spacing:.5px}
.section-head .kicker{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:3px;
  font-size:12px;color:var(--rust);font-weight:600;display:block;margin-bottom:6px}
.section-head .more{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;
  font-size:13px;font-weight:600;color:var(--pine2);white-space:nowrap}
.rule{height:3px;background:repeating-linear-gradient(90deg,var(--amber) 0 22px,transparent 22px 30px);
  border:0;margin:0 0 30px}

/* ---- post grid / cards ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s;box-shadow:0 2px 0 rgba(30,61,51,.04)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:4/3;background:var(--cream2);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .thumb img{transform:scale(1.05)}
.card .thumb.placeholder{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--pine) 0%,var(--pine3) 100%)}
.card .thumb.placeholder span{font-family:'Anton',sans-serif;color:rgba(244,236,221,.5);
  font-size:30px;text-transform:uppercase;letter-spacing:2px}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.tag{align-self:flex-start;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.4px;
  font-size:11px;font-weight:600;color:#fff;background:var(--rust);padding:4px 11px;border-radius:4px}
.card h3{font-size:21px;margin:0;line-height:1.2}
.card h3 a{color:var(--pine)}
.card h3 a:hover{color:var(--rust)}
.card .excerpt{color:var(--muted);font-size:15.5px;margin:0;flex:1}
.card .meta{font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:.6px;color:#94a097;
  text-transform:uppercase}

/* ---- category tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;min-height:150px;
  display:flex;align-items:flex-end;padding:18px;color:#fff;border:1px solid rgba(0,0,0,.06);
  background:var(--pine);transition:.2s}
.tile:nth-child(4n+1){background:linear-gradient(160deg,#2F5A49,#1E3D33)}
.tile:nth-child(4n+2){background:linear-gradient(160deg,#3C6753,#244438)}
.tile:nth-child(4n+3){background:linear-gradient(160deg,#C75B39,#9c4329)}
.tile:nth-child(4n+4){background:linear-gradient(160deg,#E9A23B,#c07d1f)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:#fff}
.tile span{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.2px;
  font-weight:600;font-size:17px;position:relative;z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.tile::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 90% 110%,rgba(255,255,255,.18),transparent 60%)}

/* ---- newsletter band ---- */
.band{background:var(--pine);color:var(--cream);border-radius:var(--radius);
  padding:52px 40px;text-align:center;position:relative;overflow:hidden}
.band h2{color:#fff;font-size:clamp(26px,3.4vw,36px);margin:0 0 10px;text-transform:uppercase}
.band p{max-width:520px;margin:0 auto 22px;color:rgba(244,236,221,.85)}
.btn{display:inline-block;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.5px;
  font-weight:600;font-size:15px;background:var(--amber);color:#3a2a10;padding:14px 30px;
  border-radius:999px;border:0;cursor:pointer;transition:.18s}
.btn:hover{background:#fff;color:var(--pine);transform:translateY(-2px)}

/* ---- single post ---- */
.post-hero{background:var(--cream);border-bottom:1px solid var(--line);padding:48px 0 40px}
.post-hero .wrap{max-width:var(--read)}
.crumb{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:12px;
  font-weight:600;color:var(--rust);margin-bottom:14px}
.post-hero h1{font-size:clamp(32px,5vw,52px);margin:0 0 16px}
.post-meta{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:13px;
  color:var(--muted)}
.post-meta b{color:var(--pine2)}
.featured{max-width:var(--maxw);margin:34px auto 0;padding:0 24px}
.featured img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.article{max-width:var(--read);margin:44px auto;padding:0 24px}
.article p{margin:0 0 1.35em}
.article h2{font-size:30px;margin:1.8em 0 .5em;text-transform:none}
.article h3{font-size:23px;margin:1.5em 0 .4em;text-transform:none}
.article a{color:var(--rust);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.article img{border-radius:12px;margin:1.4em auto}
.article ul,.article ol{padding-left:1.3em;margin:0 0 1.35em}
.article li{margin:.4em 0}
.article blockquote{margin:1.6em 0;padding:14px 24px;border-left:4px solid var(--amber);
  background:var(--cream);border-radius:0 10px 10px 0;font-style:italic;color:#3c4a42}
.article .wp-block-button__link{background:var(--rust);color:#fff;border-radius:999px;
  padding:13px 26px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;
  text-decoration:none;display:inline-block;font-size:15px}
.article .wp-block-button__link:hover{background:var(--pine)}
.disclosure{max-width:var(--read);margin:0 auto;padding:14px 24px;font-size:14px;color:var(--muted);
  font-style:italic;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}

/* ---- archive header ---- */
.page-hero{background:var(--cream);border-bottom:1px solid var(--line);padding:50px 0;text-align:center}
.page-hero h1{font-size:clamp(32px,5vw,52px);margin:0;text-transform:uppercase}
.page-hero p{color:var(--muted);margin:12px 0 0}

/* ---- footer ---- */
.site-footer{background:var(--pine);color:rgba(244,236,221,.8);margin-top:30px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:54px 0 40px}
.footer-brand .wordmark{color:#fff}
.footer-brand p{margin:14px 0 0;font-size:15px;max-width:330px}
.footer-col h4{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.5px;
  font-size:14px;color:var(--amber);margin:0 0 16px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 10px}
.footer-col a{color:rgba(244,236,221,.8);font-size:15px}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:13px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:rgba(244,236,221,.6)}

/* ---- responsive ---- */
@media(max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body{font-size:17px}
  .nav-menu{display:none}
  .header-inner{height:64px}
  .brand img{width:42px;height:42px}.wordmark{font-size:22px}
  .hero-inner{padding:54px 20px 130px}
  .grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr;gap:30px}
  .section{padding:46px 0}
}