/* Better Story global restyle: design tokens, Astra header/footer skin, footer decorations.
   Loads site-wide. The menu system itself stays Astra's (Appearance > Menus). */

:root {
  --ink: #1d1512;
  --ochre: #C25F30;
  --ochre-bright: #D97A45;
  --white: #FFFFFF;
  --bone: #F6F1E6;
  --cream: #EADFC4;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
}

/* ---- Astra header skin ---- */
.site-header, .main-header-bar, .ast-primary-header-bar {
  background: var(--cream);
  border-bottom: 1px solid rgba(29,21,18,0.08);
}
.site-title a, .site-title a:hover, .site-title a:focus {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
}
.site-description { color: #7a6a5a; font-family: var(--sans); }
.main-header-menu .menu-item > .menu-link,
.ast-builder-menu .menu-item > .menu-link {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(29,21,18,0.72);
}
.main-header-menu .menu-item > .menu-link:hover,
.ast-builder-menu .menu-item > .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link,
.ast-builder-menu .current-menu-item > .menu-link {
  color: var(--ochre);
}
.main-header-menu .sub-menu {
  background: var(--white);
  border: 1px solid rgba(29,21,18,0.1);
  box-shadow: 0 18px 44px rgba(29,21,18,0.12);
}
.main-header-menu .sub-menu .menu-link { text-transform: none; letter-spacing: 0.04em; }
/* (stale pre-real-markup guess removed — see the #masthead rule below, which is the one that actually applies) */

/* ---- Astra footer skin + Better Story decorations ---- */
.site-footer, .ast-footer-overlay, footer.site-footer {
  background: var(--bone);
  color: #5a4c40;
  font-family: var(--sans);
}
.site-footer a { color: #4a3d33; }
.site-footer a:hover { color: var(--ochre); }
.site-footer .widget-title { 
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a08f7c;
}

/* decorative arc above / wordmark below the Astra footer (added via hooks; menus untouched) */
.bs-foot-arc { background: var(--bone); line-height: 0; }
.bs-foot-arc svg { width: 100%; height: auto; display: block; }
.bs-foot-mark {
  background: var(--bone);
  position: relative;
  height: 190px;
  overflow: hidden;
}
.bs-foot-mark span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 16px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(100px, 14.5vw, 210px);
  line-height: 1;
  white-space: nowrap;
  color: rgba(29,21,18,0.055);
  letter-spacing: -0.02em;
  user-select: none;
}
.bs-foot-mark span i { font-style: normal; color: rgba(194,95,48,0.6); }
@media (max-width: 900px) { .bs-foot-mark { height: 110px; } }

/* ---- sticky header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 99;
}
.admin-bar .site-header { top: 32px; }

/* ---- footer content grid (brand + Explore/Elsewhere menus + legal, output via hooks) ---- */
.bs-foot-body { background: var(--bone); padding: 90px 0 0; }
.bs-foot-body .bs-wrap { max-width: 1140px; margin: 0 auto; padding: 0 48px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; padding-bottom: 70px; }
.foot-brand .foot-name { font-family: var(--serif); font-weight: 300; font-size: 24px; color: var(--ink); margin: 0 0 16px; }
.foot-brand .foot-name b { font-style: normal; font-weight: 400; color: var(--ochre); }
.foot-brand p { font-family: var(--sans); font-size: 14px; color: #7a6a5a; max-width: 300px; margin: 0; }
.foot-col h4 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #a08f7c; margin: 0 0 22px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li + li { margin-top: 12px; }
.foot-col a { font-family: var(--sans); font-size: 14.5px; color: #4a3d33; text-decoration: none; transition: color 0.25s; }
.foot-col a:hover { color: var(--ochre); }
.foot-legal { border-top: 1px solid rgba(29,21,18,0.12); padding: 26px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-family: var(--sans); font-size: 12.5px; color: #8a7a6a; }
.foot-legal .legal-links { display: flex; gap: 26px; }
.foot-legal a { color: #7a6a5a; text-decoration: none; transition: color 0.25s; }
.foot-legal a:hover { color: var(--ochre); }
@media (max-width: 900px) {
  .bs-foot-body .bs-wrap { padding: 0 26px; }
  .foot-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
}

/* ===== v2 header/footer skin: real Astra selectors, correct positioning ===== */

/* Sticky elsewhere; fixed on the home template (body overflow-x there breaks sticky) */
#masthead.site-header { position: sticky; top: 0; z-index: 99; background: var(--cream); }
body.page-template-template-home #masthead.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
}
body.admin-bar #masthead.site-header { top: 32px; }
#masthead .ast-primary-header-bar { background: transparent; border-bottom: 1px solid rgba(29,21,18,0.08); transition: background 0.4s, border-color 0.4s; }
#masthead .site-title a { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ink); transition: color 0.3s; }
#masthead .main-header-menu .menu-item > .menu-link {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(29,21,18,0.72);
  transition: color 0.25s;
}
#masthead .main-header-menu .menu-item > .menu-link:hover,
#masthead .main-header-menu .current-menu-item > .menu-link,
#masthead .main-header-menu .current-menu-ancestor > .menu-link { color: var(--ochre); }
#masthead .main-header-menu .sub-menu { background: var(--white); border: 1px solid rgba(29,21,18,0.1); box-shadow: 0 18px 44px rgba(29,21,18,0.12); }
#masthead .main-header-menu .sub-menu .menu-link { text-transform: none; letter-spacing: 0.04em; font-size: 13px; }

/* CTA menu item (class bs-menu-cta in Appearance > Menus) */
#masthead .main-header-menu .menu-item.bs-menu-cta > .menu-link {
  height: auto !important;
  flex: 0 0 auto;
  color: var(--white);
  background: var(--ochre);
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.4;
  padding: 9px 16px;
  margin-left: 10px;
  letter-spacing: 0.08em;
  transition: background 0.25s, transform 0.25s;
}
#masthead .main-header-menu .menu-item.bs-menu-cta > .menu-link:hover {
  background: var(--ochre-bright);
  color: var(--white);
  transform: translateY(-2px);
}

/* dark bar once scrolled (home template, toggled by home.js) */
#masthead.bs-scrolled { background: rgba(29,21,18,0.92); backdrop-filter: blur(8px); }
#masthead.bs-scrolled .ast-primary-header-bar { border-bottom-color: rgba(246,241,230,0.06); }
#masthead.bs-scrolled .site-title a { color: var(--bone); }
#masthead.bs-scrolled .main-header-menu .menu-item > .menu-link { color: rgba(246,241,230,0.7); }
#masthead.bs-scrolled .main-header-menu .menu-item > .menu-link:hover { color: var(--ochre-bright); }
#masthead.bs-scrolled .main-header-menu .menu-item.bs-menu-cta > .menu-link { color: var(--white); }
#masthead.bs-scrolled .main-header-menu .sub-menu { background: #241a15; border-color: rgba(246,241,230,0.1); }
#masthead.bs-scrolled .main-header-menu .sub-menu .menu-link { color: rgba(246,241,230,0.75); }

/* ===== footer: match the v3 composition ===== */
#colophon.site-footer { background: var(--bone); }
#colophon .site-below-footer-wrap { background: var(--bone); }
#colophon .ast-footer-copyright { font-family: var(--sans); font-size: 12.5px; color: #8a7a6a; }
#colophon .ast-footer-copyright p { color: #8a7a6a; margin: 0; }
#colophon .ast-footer-copyright a { color: #7a6a5a; }
#colophon .ast-footer-copyright a:hover { color: var(--ochre); }
#colophon .ast-footer-copyright { display: none; } /* legal now lives in .foot-legal above, not Astra's copyright bar */
/* ===== header update 2026-07-29: cream bar site-wide (matches the homepage hero on arrival) ===== */
/* On the home template the bar fully merges with the cream hero until scroll */
body.page-template-template-home #masthead:not(.bs-scrolled) .ast-primary-header-bar {
  border-bottom-color: transparent;
}
/* Astra mobile popup menu in palette colors */
.ast-mobile-popup-drawer .ast-mobile-popup-inner { background: var(--cream); }
.ast-mobile-popup-drawer .menu-item > .menu-link { color: rgba(29,21,18,0.8); font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; }
.ast-mobile-popup-drawer .menu-item > .menu-link:hover { color: var(--ochre); }
.ast-mobile-popup-drawer .menu-toggle-close { color: var(--ink); }
.ast-header-break-point .main-header-menu { background: var(--cream); }
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg { fill: var(--ink) !important; stroke: var(--ink) !important; }
#masthead.bs-scrolled [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg { fill: var(--bone) !important; stroke: var(--bone) !important; }
#masthead.bs-scrolled [data-section="section-header-mobile-trigger"] .ast-button-wrap { color: var(--bone); }
/* mobile menu: spacing + palette styling (added 2026-08-07).
   The inline dropdown under the header bar (the mode this site uses) was
   falling through to Astra defaults; these rules bring it into the design
   system — cream ground, uppercase ink links, ochre hover — and cover the
   popup-drawer mode too in case the header mode ever changes. */
.ast-header-break-point .ast-mobile-header-content .main-header-menu .menu-item > .menu-link,
.ast-header-break-point .main-header-bar-navigation .menu-item > .menu-link,
.ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.ast-header-break-point .ast-mobile-header-content .sub-menu .menu-item > .menu-link,
.ast-header-break-point .main-header-bar-navigation .sub-menu .menu-item > .menu-link,
.ast-mobile-popup-drawer .sub-menu .menu-item > .menu-link {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.ast-header-break-point .ast-mobile-header-content,
.ast-header-break-point .main-header-bar-navigation,
.ast-header-break-point .ast-mobile-header-content .main-header-menu,
.ast-header-break-point .main-header-bar-navigation .main-header-menu,
.ast-header-break-point .ast-mobile-header-content .sub-menu,
.ast-header-break-point .main-header-bar-navigation .sub-menu {
  background: var(--cream) !important;
}
.ast-header-break-point .ast-mobile-header-content .menu-item > .menu-link,
.ast-header-break-point .main-header-bar-navigation .menu-item > .menu-link {
  color: rgba(29,21,18,0.8) !important;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-color: rgba(29,21,18,0.08) !important;
}
.ast-header-break-point .ast-mobile-header-content .menu-item > .menu-link:hover,
.ast-header-break-point .main-header-bar-navigation .menu-item > .menu-link:hover,
.ast-header-break-point .ast-mobile-header-content .current-menu-item > .menu-link,
.ast-header-break-point .main-header-bar-navigation .current-menu-item > .menu-link {
  color: var(--ochre) !important;
}
.ast-header-break-point .ast-mobile-header-content .sub-menu .menu-item > .menu-link,
.ast-header-break-point .main-header-bar-navigation .sub-menu .menu-item > .menu-link {
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.04em;
}