/* ============================================================================
   Chatham / siler-city.com — shared design system
   "Piedmont" palette: pine green, warm paper, Georgia serif display + system sans.
   Ported from ~/siler-city/mockup-homepage-v1.html (approved homepage concept)
   and extended with article/content-page components for the 12 guide pages.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --paper:#F4F6F2; --surface:#FFFFFF; --surface-2:#FBFCFA;
  --ink:#17241D; --ink-soft:#54615A; --ink-faint:#8A968E;
  --line:#E1E6DD; --line-strong:#CFD7CD;
  --pine:#2E6B4E; --pine-deep:#22513B; --pine-tint:#E8F0EA;
  --wheat:#B98A3E; --wheat-tint:#F4EAD6;
  --knock:var(--surface);
  --shadow:0 1px 2px rgba(23,36,29,.04), 0 8px 24px -12px rgba(23,36,29,.14);
  --shadow-lift:0 2px 4px rgba(23,36,29,.05), 0 18px 40px -16px rgba(23,36,29,.22);
  --r:14px; --r-sm:10px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E1512; --surface:#16201B; --surface-2:#131C17;
    --ink:#E9F0E9; --ink-soft:#A3B2A8; --ink-faint:#6E7E74;
    --line:#243029; --line-strong:#2F3D34;
    --pine:#5FB88C; --pine-deep:#7BCAA1; --pine-tint:#182A20;
    --wheat:#CDA25C; --wheat-tint:#241E12;
    --knock:var(--surface);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -12px rgba(0,0,0,.5);
    --shadow-lift:0 2px 4px rgba(0,0,0,.35), 0 20px 44px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{
  --paper:#F4F6F2; --surface:#FFFFFF; --surface-2:#FBFCFA;
  --ink:#17241D; --ink-soft:#54615A; --ink-faint:#8A968E;
  --line:#E1E6DD; --line-strong:#CFD7CD;
  --pine:#2E6B4E; --pine-deep:#22513B; --pine-tint:#E8F0EA;
  --wheat:#B98A3E; --wheat-tint:#F4EAD6;
  --knock:var(--surface);
  --shadow:0 1px 2px rgba(23,36,29,.04), 0 8px 24px -12px rgba(23,36,29,.14);
  --shadow-lift:0 2px 4px rgba(23,36,29,.05), 0 18px 40px -16px rgba(23,36,29,.22);
}
:root[data-theme="dark"]{
  --paper:#0E1512; --surface:#16201B; --surface-2:#131C17;
  --ink:#E9F0E9; --ink-soft:#A3B2A8; --ink-faint:#6E7E74;
  --line:#243029; --line-strong:#2F3D34;
  --pine:#5FB88C; --pine-deep:#7BCAA1; --pine-tint:#182A20;
  --wheat:#CDA25C; --wheat-tint:#241E12;
  --knock:var(--surface);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -12px rgba(0,0,0,.5);
  --shadow-lift:0 2px 4px rgba(0,0,0,.35), 0 20px 44px -16px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.display{font-family:var(--serif);font-weight:400;line-height:1.08}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
.lede{max-width:52ch;color:var(--ink-soft);font-size:17.5px;line-height:1.62}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--sans);
  font-size:14.5px;font-weight:600;padding:.62em 1.1em;border-radius:999px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn.solid{background:var(--pine);color:#fff;border-color:var(--pine)}
.btn.solid:hover{background:var(--pine-deep);border-color:var(--pine-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--ink-soft)}
.btn.block{width:100%;padding:.85em 1.1em;font-size:15.5px}
.btn.onpine{background:#fff;color:var(--pine);border-color:#fff}
.btn.onpine:hover{background:#eef5f0}
.btn:disabled{opacity:.65;cursor:not-allowed;transform:none !important}
.btn:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.btn:hover{transform:translateY(-1px)}}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.brand svg{display:block;color:var(--pine)}
.brand .co{color:var(--ink-faint);font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;align-self:center;padding-left:2px}
.menu{display:flex;gap:24px;margin-left:8px}
.menu a{font-size:14.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.menu a:hover,.menu a.active{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;
  border:1px solid var(--line-strong);border-radius:8px;cursor:pointer;padding:.5em .6em;margin-left:auto}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
@media (max-width:1140px){.nav-cta .ghost{display:none}}
@media (max-width:820px){
  .menu{display:none}
  .nav-hamburger{display:flex}
  .nav-cta{margin-left:0}
  .menu.open{
    display:flex;position:absolute;top:100%;left:0;right:0;background:var(--surface);
    flex-direction:column;gap:0;padding:6px 24px 14px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lift);
  }
  .menu.open a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu.open a:last-child{border-bottom:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.ridge{position:absolute;inset:0;pointer-events:none;opacity:.5}
.ridge svg{position:absolute;left:-6%;bottom:-10%;width:70%;min-width:560px;height:auto;color:var(--pine)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center;
  padding:72px 24px 80px;position:relative}
.hero h1{font-size:clamp(38px,5.2vw,58px);margin:18px 0 20px}
.hero h1 em{font-style:italic;color:var(--pine)}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px}
.trust span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-soft);font-weight:500}
.trust svg{color:var(--pine);flex:none}

/* guide capture card (hero lead form) */
.guide-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lift);padding:26px;max-width:400px;margin-left:auto}
.guide-card .kick{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pine)}
.guide-card h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:8px 0 4px}
.guide-card .sub{color:var(--ink-soft);font-size:14px;margin-bottom:18px}
.field{display:grid;gap:6px;margin-bottom:12px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.field input,.field select{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:.72em .9em;width:100%}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus,.field select:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-tint)}
.guide-card .fine{font-size:12px;color:var(--ink-faint);margin-top:12px;text-align:center}
.form-msg{display:none;text-align:center;margin-top:10px;font-size:13.5px;font-weight:600}
.form-msg.success{color:var(--pine-deep)}
.form-msg.error{color:#B3382C}
@media (prefers-color-scheme:dark){.form-msg.error{color:#E38077}}
:root[data-theme="dark"] .form-msg.error{color:#E38077}

/* ---------- Sections ---------- */
section.block{padding:72px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.section-head h2{font-size:clamp(26px,3.4vw,34px)}
.section-head p{color:var(--ink-soft);max-width:40ch}
.see-all{font-size:14px;font-weight:600;color:var(--pine);white-space:nowrap}

/* topic grid */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.cat:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lift)}
@media (prefers-reduced-motion:no-preference){.cat:hover{transform:translateY(-3px)}}
.cat .ico{width:40px;height:40px;border-radius:10px;background:var(--pine-tint);color:var(--pine);
  display:grid;place-items:center;margin-bottom:16px}
.cat h3{font-size:18px;margin-bottom:6px}
.cat p{color:var(--ink-soft);font-size:14px;line-height:1.5}
.cat .meta{margin-top:14px;font-size:12.5px;color:var(--pine);font-weight:600}

/* guides */
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.guide{display:block}
.guide .img{height:190px;border-radius:var(--r);overflow:hidden;position:relative;border:1px solid var(--line)}
.guide .img span{position:absolute;left:14px;top:14px;z-index:2;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:#fff;background:rgba(23,36,29,.55);
  backdrop-filter:blur(4px);padding:.32em .6em;border-radius:6px}
.g1{background:linear-gradient(150deg,#3E7C63,#20463A)}
.g2{background:linear-gradient(150deg,#6E7F53,#3B4A2C)}
.g3{background:linear-gradient(150deg,#3C6A78,#22414A)}
.g4{background:linear-gradient(150deg,#7C6B3E,#463620)}
.g5{background:linear-gradient(150deg,#5B6E8A,#28344A)}
.g6{background:linear-gradient(150deg,#7C4E3E,#462820)}
.guide h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:16px 0 6px;line-height:1.2}
.guide:hover h3{color:var(--pine)}
.guide p{color:var(--ink-soft);font-size:14px}
.guide .by{margin-top:10px;font-size:12.5px;color:var(--ink-faint)}

/* partner band */
.partner{background:var(--pine);color:#fff}
.partner-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:64px 24px}
.partner .eyebrow{color:rgba(255,255,255,.7)}
.partner h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,38px);margin:14px 0 16px;color:#fff}
.partner .lede{color:rgba(255,255,255,.82);max-width:46ch}
.plist{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:12px}
.plist li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.92)}
.plist svg{flex:none;margin-top:3px;color:#fff}
.pcard{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:var(--r);
  padding:26px;backdrop-filter:blur(2px)}
.pcard .num{font-family:var(--serif);font-size:40px;line-height:1;color:#fff}
.pcard .lbl{color:rgba(255,255,255,.8);font-size:14px;margin-top:6px}
.pcard hr{border:none;border-top:1px solid rgba(255,255,255,.16);margin:20px 0}

/* evolution strip */
.evolve{border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-2);
  padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.evolve .lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--wheat)}
.evolve h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:6px 0 4px}
.evolve p{color:var(--ink-soft);font-size:14.5px;max-width:60ch}
.evolve .pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.evolve .pill{font-size:12px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:.32em .7em}

/* footer */
footer.site{background:var(--surface-2);border-top:1px solid var(--line);padding:56px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot-brand p{color:var(--ink-soft);font-size:14px;max-width:30ch;margin-top:12px}
.fcol h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;font-weight:700}
.fcol a{display:block;color:var(--ink-soft);font-size:14px;padding:5px 0}
.fcol a:hover{color:var(--pine)}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:13px}

@media (max-width:900px){
  .hero-grid,.partner-grid{grid-template-columns:1fr;gap:36px}
  .cat-grid,.guide-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .cat-grid,.guide-grid,.foot-grid{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:flex-start}
}

/* ============================================================================
   Article / content-page components
   Same visual language as above — for the 12 long-form guide pages.
   ========================================================================== */

.page-wrap{max-width:1140px;margin:0 auto;padding:56px 24px 88px;display:grid;
  grid-template-columns:1fr;gap:40px}
@media (min-width:900px){
  .page-wrap{grid-template-columns:1fr 340px;align-items:start}
}

/* article body */
.article-body{min-width:0}
.article-body .eyebrow{margin-bottom:10px;display:block}
.article-body h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,44px);
  margin-bottom:14px}
.article-body .lede{font-size:17.5px;margin-bottom:8px}
.article-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.8vw,28px);
  color:var(--ink);margin:44px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.article-body h3{font-size:18px;font-weight:700;color:var(--pine-deep);margin:26px 0 8px}
.article-body p{margin-bottom:18px;font-size:16px;line-height:1.72;color:var(--ink)}
.article-body ul,.article-body ol{margin:8px 0 20px 22px;padding:0}
.article-body li{margin-bottom:9px;font-size:15.5px;line-height:1.6;color:var(--ink)}
.article-body a{color:var(--pine);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--pine-tint);transition:border-color .15s ease,color .15s ease}
.article-body a:hover{border-color:var(--pine)}
.article-body img{border-radius:var(--r);border:1px solid var(--line);margin:8px 0 20px}
.article-body strong{color:var(--ink)}

/* in-content CTA button — bug fix: keep readable text even though
   `.article-body a` above sets color; higher-specificity rule below wins */
.btn-cta{display:block;width:100%;text-align:center;background:var(--pine);color:#fff;
  font-weight:700;font-size:15.5px;padding:.9em 1.2em;border-radius:999px;text-decoration:none;
  border:1px solid var(--pine);transition:background .15s ease,transform .15s ease}
.btn-cta:hover{background:var(--pine-deep);border-color:var(--pine-deep)}
.article-body a.btn-cta{color:#fff}
.article-body a.btn-cta:hover{color:#fff}
@media (prefers-reduced-motion:no-preference){.btn-cta:hover{transform:translateY(-1px)}}

/* pull quote */
.pull-quote{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);
  border-left:4px solid var(--pine);padding:.9em 1.2em;margin:28px 0;
  background:var(--pine-tint);border-radius:0 var(--r-sm) var(--r-sm) 0}

/* stat grid (article kpis) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:20px 0 28px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:18px 16px;text-align:center;box-shadow:var(--shadow)}
.stat-card .stat-num{font-family:var(--serif);font-size:28px;color:var(--ink);line-height:1.1}
.stat-card .stat-num span{color:var(--pine)}
.stat-card .stat-label{font-size:12.5px;color:var(--ink-soft);margin-top:6px;font-weight:600;letter-spacing:.02em}

/* info table */
.info-table{width:100%;border-collapse:collapse;margin:16px 0 26px;font-size:14.5px;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.info-table thead tr{background:var(--pine);color:#fff}
.info-table th,.info-table td{padding:.7em 1em;text-align:left;border-bottom:1px solid var(--line)}
.info-table tr:last-child td{border-bottom:none}
.info-table tr:nth-child(even){background:var(--surface-2)}
.info-table td:first-child{font-weight:600;color:var(--ink)}
@media (max-width:640px){
  .info-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* sidebar */
.sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px}
@media (max-width:900px){.sidebar{position:static}}

.toc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.toc-card h4{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-faint);margin-bottom:12px}
.toc-card ol{list-style:decimal;margin:0 0 0 1.2em;padding:0}
.toc-card li{font-size:14px;margin-bottom:8px;color:var(--ink-soft)}
.toc-card a{color:var(--ink-soft);border-bottom:none}
.toc-card a:hover{color:var(--pine)}

.cta-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-lift)}
.cta-card.accent{border-color:var(--pine)}
.cta-card .cta-badge{display:inline-block;background:var(--pine);color:#fff;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.3em .7em;border-radius:999px;
  margin-bottom:12px}
.cta-card h3{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink);margin-bottom:8px}
.cta-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:14px}
.cta-card ul{list-style:none;margin:0 0 16px;padding:0}
.cta-card ul li{font-size:13.5px;padding:.25em 0;color:var(--ink);display:flex;gap:8px;align-items:flex-start}
.cta-card ul li::before{content:"✓";color:var(--pine);font-weight:700;flex:none}

/* FAQ */
.faq{margin:16px 0 28px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  padding:16px 20px;margin-bottom:12px}
.faq-item h3,.faq-item .faq-q{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
.faq-item p,.faq-item .faq-a{font-size:15px;color:var(--ink-soft);line-height:1.65;margin:0}

/* article eyebrow / meta */
.article-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-faint);margin-bottom:18px}