/* pasture-chrome.css: ONLY the Pasture nav and footer (PART 2 of pasture-site.css), for pages that keep their own look
   (audit, methodology, example dashboard, sample reports, client guide, case studies). The colour and type variables are
   scoped to the nav, menu and footer so nothing leaks into the page. Addason Digital, 2026-11-05. If PART 2 of
   pasture-site.css changes, regenerate this file: node scripts/build-pasture-chrome.mjs */
.audits-nav,.audits-mobile-menu,.audits-footer{
  --cream:#F2EDE1;--paper:#FAF6EC;--cream-2:#E8E1D0;
  --ink:#2B2926;--ink-2:#3A3733;
  --muted:#6B665F;--line:rgba(43,41,38,.2);
  --moss:#3F5E36;--moss-w:#5E7F52;--saddle:#7A4E2D;--sand:#D9BFA0;--sage:#9DB08A;--clay:#B07A50;--terra:#B5653A;
  --green:var(--moss);--green-w:var(--moss-w);--leaf:var(--sage);
  --display:'Bricolage Grotesque','Bricolage Fallback',system-ui,sans-serif;
  --serif:'Fraunces','Fraunces Fallback',Georgia,serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --gutter:clamp(20px,4vw,72px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* ---------- PART 2: the shared nav and footer ---------- */
.audits-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(var(--gutter),env(safe-area-inset-right,0px)) 10px max(var(--gutter),env(safe-area-inset-left,0px));
  background:rgba(242,237,225,.94);-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.audits-nav.scrolled{background:rgba(242,237,225,.97)}
.pn-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink)}
.pn-brand img{width:40px;height:auto}
.pn-brand b{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.01em}
.pn-brand small{font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.audits-nav-links{display:none;align-items:center;gap:26px;font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.audits-nav-links a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.audits-nav-links a:not(.audits-nav-cta):hover{color:var(--moss)}
.audits-nav-links a[aria-current="page"]{color:var(--moss);text-decoration:underline;text-underline-offset:6px}
.audits-nav-cta{border:1.5px solid var(--ink);border-radius:999px;padding:0 18px;transition:background .18s var(--ease),color .18s var(--ease)}
.audits-nav-cta:hover{background:var(--ink);color:var(--cream)}
.audits-hamburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;cursor:pointer}
.audits-hamburger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s var(--ease),opacity .2s}
.audits-hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.audits-hamburger.active span:nth-child(2){opacity:0}
.audits-hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* after the button's own rules, so the wide screen hides it */
@media(min-width:900px){.audits-nav-links{display:flex}.audits-hamburger{display:none}.pn-brand small{display:inline}}
@media(max-width:899px){.pn-brand small{display:none}}
.audits-mobile-menu{position:fixed;inset:0;z-index:45;display:none;flex-direction:column;gap:22px;overflow-y:auto;background:var(--cream);
  padding:calc(84px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
.audits-mobile-menu.open{display:flex}
.audits-mobile-section{display:flex;flex-direction:column;gap:4px}
.audits-mobile-section a{display:flex;align-items:center;min-height:48px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid var(--line)}
.audits-mobile-section.small a{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;border:0;color:var(--muted)}
.audits-mobile-section a.audits-nav-cta{justify-content:center;margin-top:14px;border:1.5px solid var(--ink);border-radius:999px;font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.audits-nav-spacer{display:none}
.audits-footer{background:var(--ink);color:var(--cream);margin-top:0;padding:0;border:0;font-family:var(--body);font-size:16px;letter-spacing:normal;text-transform:none;text-align:left}  /* clears the /pasture/ page's own footer rule */
.pf-inner{max-width:1400px;margin:0 auto;padding:clamp(48px,6vw,80px) max(var(--gutter),env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));display:grid;gap:36px}
.pf-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px)}
@media(max-width:760px){.pf-top{grid-template-columns:1fr}}
.pf-brand{display:flex;flex-direction:column;gap:12px;min-width:0}
.pf-brand .pn-brand{color:var(--cream)}
.pf-brand p{margin:0;max-width:48ch;font-size:15.5px;line-height:1.6;color:rgba(242,237,225,.8)}
.pf-brand a.pf-mail{color:var(--cream);font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:none;text-underline-offset:4px;align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
.pf-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px;align-content:start;font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.pf-links a{color:var(--cream);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pf-links a:hover{color:var(--sage)}
.pf-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:20px;border-top:1px solid rgba(242,237,225,.2);font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:rgba(242,237,225,.72)}
.pf-bottom a{color:inherit;text-underline-offset:4px}
.audits-footer a:focus-visible,.audits-nav a:focus-visible,.audits-hamburger:focus-visible,.audits-mobile-menu a:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.audits-nav a:focus-visible,.audits-hamburger:focus-visible,.audits-mobile-menu a:focus-visible{outline-color:var(--moss)}