/* Shakihi shared base styles — variables, reset, footer, and utilities common to every page.
   Page-specific styles (nav variant, hero, page sections) stay in each page's inline <style>. */

:root{
  --paper:#FFFFFF;
  --ink:#0F241A;
  --ink-soft:#4B5A50;
  --accent:#0F241A; /* deep pine: accents on light backgrounds; #EAD08A reserved for gold on dark */
  --line:rgba(15,36,26,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#fff}
body{font-family:'Archivo',sans-serif;background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
section{background:#fff}
a{color:inherit;text-decoration:none}
.wrap{max-width:1500px;margin:0 auto;padding:0 clamp(24px,5vw,80px)}
.serif{font-family:'Fraunces',serif;font-weight:300;letter-spacing:-.015em}
.label{font-family:'Archivo',sans-serif;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* REVEAL-ON-SCROLL */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* FOOTER: solid deep pine, shared across every page */
footer{background:var(--ink);color:var(--paper);padding:56px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;padding-bottom:40px}
.foot-grid h3{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(30px,4.2vw,60px);letter-spacing:-.02em;max-width:12ch;color:var(--paper)}
.foot-grid h3 em{font-style:italic;color:#EAD08A}
.foot-right{display:flex;flex-direction:column;justify-content:center}
.foot-col{text-align:right}
.foot-col a{display:block;font-family:'Archivo';font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;color:rgba(244,244,244,.85)}
.foot-col a:hover{color:var(--paper)}
.social-icons{display:flex;gap:16px;margin-top:18px}
.social-icons a{display:flex;align-items:center;justify-content:center;color:rgba(244,244,244,.85);transition:.3s;margin-bottom:0;padding:12px;margin:-12px}
.social-icons a:hover{color:var(--paper)}
.social-icons svg{width:20px;height:20px;display:block}
.land-ack{color:rgba(244,244,244,.5);font-size:13px;line-height:1.65;text-align:right;margin-bottom:18px}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:22px;font-size:13px;color:rgba(244,244,244,.6);flex-wrap:wrap}
.foot-bottom em{font-family:'Fraunces';font-style:italic}
.foot-bottom a{border-bottom:1px solid rgba(244,244,244,.35);padding-bottom:1px;transition:.3s}
.foot-bottom a:hover{color:var(--paper);border-color:var(--paper)}

@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr}
}

/* FOCUS VISIBLE (base — pages add their own nav/hero-specific gold-outline selectors) */
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
footer a:focus-visible,footer button:focus-visible{outline-color:#EAD08A}
</content>