/* ==========================================================================
   Bridging Nations — shared stylesheet
   Tokens, reset, nav, mobile menu, footer, reveal system, shared components.
   Page-specific rules stay in each page's own <style> block.
   ========================================================================== */

:root{
  --logo:url('logo.jpg');

  /* Greens */
  --forest:#1E3D32; --forest-deep:#112019; --forest-mid:#2B5345;

  /* Accents — base values are tuned for DARK surfaces */
  --clay:#BC6B43; --ochre:#C9953F; --sage:#8DA284;

  /* Accessible variants — for text on LIGHT surfaces, and for surfaces
     that must carry light body text at WCAG AA. Verified:
     clay-deep on parchment 5.72:1 · sage-ink on paper 5.64:1
     parchment-2 on clay-deep 6.18:1 */
  --clay-deep:#8F4A28; --sage-ink:#5A6B53; --clay-lit:#D9906A; --ochre-lt:#CE9C4B;

  /* Neutrals */
  --parchment:#F4EEE1; --parchment-2:#FBF7EE; --paper:#FFFDF8;
  --ink:#1C1F1B; --stone:#6A6557; --line:rgba(28,31,27,.13);

  /* Type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  /* Elevation */
  --sh-md:0 18px 50px rgba(17,32,25,.14);
  --sh-lg:0 40px 90px rgba(17,32,25,.22);

  /* Layout */
  --nav-h:84px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* Anchor targets clear the fixed header */
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

body{
  font-family:var(--sans);color:var(--ink);background:var(--parchment);
  line-height:1.62;-webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;
}

/* Fixed grain overlay — promoted to its own layer so it never forces
   repaints of the content scrolling beneath it. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.04;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
a{color:inherit;text-decoration:none}

/* Visible keyboard focus everywhere. */
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;border-radius:2px}

/* ===== SKIP LINK ===== */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:16px;top:-100px;z-index:200;
  background:var(--ochre);color:var(--forest-deep);
  padding:12px 20px;border-radius:3px;font-weight:600;font-size:.9rem;
  transition:top .2s;
}
.skip:focus{top:16px}

/* ===== LOGO MARK =====
   Served through the Netlify Image CDN at the size actually rendered. */
.logo-mark{
  width:46px;height:46px;flex:none;border-radius:50%;display:inline-block;
  background-image:url('/.netlify/images?url=/logo.jpg&w=92&fm=webp&q=80');
  background-size:cover;background-position:center;
}

/* ===== NAV ===== */
nav.site{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:14px}
.brand-text{display:flex;flex-direction:column}
.brand .name{font-family:var(--serif);font-weight:600;font-size:1.26rem;line-height:1;letter-spacing:.2px}
.brand .sub{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;margin-top:5px}
.links{display:flex;gap:38px;align-items:center}
.links a{font-size:.84rem;letter-spacing:.04em;position:relative;padding:6px 0;transition:color .2s}
.links a.active::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px}
.links a.cta{padding:12px 22px;border-radius:3px;font-size:.8rem;font-weight:600;transition:background .25s,transform .25s,color .25s}

/* Nav on pages whose masthead sits on a DARK surface */
body[data-nav="dark"] nav.site.solid{background:rgba(17,32,25,.92);backdrop-filter:blur(14px);border-color:rgba(244,238,225,.12)}
body[data-nav="dark"] .brand{color:var(--parchment-2)}
body[data-nav="dark"] .brand .sub{color:var(--sage)}
body[data-nav="dark"] .links a{color:rgba(244,238,225,.86)}
body[data-nav="dark"] .links a.active{color:var(--ochre)}
body[data-nav="dark"] .links a.active::after{background:var(--ochre)}
body[data-nav="dark"] .links a:not(.active):hover{color:var(--parchment-2)}
body[data-nav="dark"] .links a.cta{background:var(--ochre);color:var(--forest-deep)}
body[data-nav="dark"] .links a.cta:hover{background:var(--clay-deep);color:var(--parchment-2);transform:translateY(-2px)}
body[data-nav="dark"] .menu-btn span{background:var(--parchment-2)}

/* Nav on pages whose masthead sits on a LIGHT surface */
body[data-nav="light"] nav.site.solid{background:rgba(251,247,238,.92);backdrop-filter:blur(14px);border-color:var(--line)}
body[data-nav="light"] .brand{color:var(--forest)}
body[data-nav="light"] .brand .sub{color:var(--stone)}
body[data-nav="light"] .links a{color:var(--ink)}
body[data-nav="light"] .links a.active{color:var(--clay-deep)}
body[data-nav="light"] .links a.active::after{background:var(--clay-deep)}
body[data-nav="light"] .links a:not(.active):hover{color:var(--forest)}
body[data-nav="light"] .links a.cta{background:var(--forest);color:var(--parchment-2)}
body[data-nav="light"] .links a.cta:hover{background:var(--clay-deep);transform:translateY(-2px)}
body[data-nav="light"] .menu-btn span{background:var(--forest)}

/* ===== MOBILE MENU ===== */
.menu-btn{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:0;z-index:120;
}
.menu-btn span{display:block;width:26px;height:2px;border-radius:2px;transition:transform .3s,opacity .3s;margin:0 auto}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  display:none;flex-direction:column;background:var(--forest-deep);
  border-top:1px solid rgba(244,238,225,.12);padding:8px 24px 24px;
}
.mobile-menu a{color:var(--parchment-2);font-size:1.05rem;padding:16px 0;border-bottom:1px solid rgba(244,238,225,.1);letter-spacing:.02em}
.mobile-menu a.active{color:var(--ochre)}
.mobile-menu a.mm-cta{margin-top:16px;background:var(--ochre);color:var(--forest-deep);text-align:center;border-radius:4px;border:none;font-weight:600;padding:15px}
.mobile-menu.open{display:flex}
body.menu-open{overflow:hidden}

/* ===== SHARED TYPE ===== */
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--clay-deep);font-weight:600}
.on-dark .eyebrow{color:var(--ochre-lt)}
h2 em,h1 em{font-style:italic}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:3px;
  font-size:.92rem;letter-spacing:.02em;font-weight:500;
  transition:transform .25s,background .25s,color .25s,border-color .25s;
}
.btn-primary{background:var(--ochre);color:var(--forest-deep)}
.btn-primary:hover{background:var(--parchment-2);transform:translateY(-3px)}
.btn-ghost{border:1px solid rgba(244,238,225,.32);color:var(--parchment-2)}
.btn-ghost:hover{border-color:var(--ochre);color:var(--ochre);transform:translateY(-3px)}
.btn-dark{background:var(--forest);color:var(--parchment-2)}
.btn-dark:hover{background:var(--clay-deep);transform:translateY(-3px)}

/* ===== FOOTER — identical on every page ===== */
footer{background:var(--forest-deep);color:rgba(244,238,225,.7);padding:84px 0 42px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(244,238,225,.14)}
.foot-grid .fb .name{font-family:var(--serif);font-weight:600;font-size:1.26rem;color:var(--parchment-2)}
.foot-grid .fb .sub{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ochre);margin-top:5px;margin-bottom:18px}
.foot-blurb{font-size:.95rem;max-width:360px}
.foot-col h2{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ochre);margin-bottom:18px;font-weight:600}
.foot-col a{display:block;font-size:.93rem;margin-bottom:11px;color:rgba(244,238,225,.78);transition:color .2s}
.foot-col a:hover{color:var(--parchment-2)}
.foot-col a.cta-link{color:var(--ochre);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.foot-col a.cta-link:hover{color:var(--parchment-2)}
.foot-note{font-size:.93rem;color:rgba(244,238,225,.78)}
.disclaimer{font-size:.82rem;color:rgba(244,238,225,.62);max-width:660px;margin:30px 0;line-height:1.6}
.disclaimer b{color:rgba(244,238,225,.85)}
.foot-base{display:flex;justify-content:space-between;font-size:.8rem;color:rgba(244,238,225,.62);flex-wrap:wrap;gap:10px}

/* ===== SCROLL REVEAL =====
   Hiding is opt-in and only applies once JS has confirmed it is running,
   so content is always visible if the script fails or is blocked. */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.js .rv.in{opacity:1;transform:none}

/* ===== RESPONSIVE ===== */
@media(max-width:920px){
  .links{display:none}
  .menu-btn{display:flex}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .wrap{padding:0 24px}
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js .rv{opacity:1!important;transform:none!important}
}