/* ============================================================
   SOMA — shared site system
   One source of truth for tokens, header, footer, base.
   Linked by every page so style flows through together.
   ============================================================ */

:root{
  /* canonical palette */
  --paper:#F1ECE0; --paper-2:#E9E3D4; --paper-3:#DFD6C1;
  --ink:#191A14; --ink-soft:#3C3C30; --muted:#736A5C;
  --rule:#CCC3AE; --rule-soft:#DCD4C2;
  --care:#3B6B4C; --care-deep:#2B5239; --care-soft:#7CA489; --sage-soft:#DBE2D3;
  --forest:#22402F; --forest-2:#1C3124; --on-dark:#ECE6D7; --muted-dark:#93A08C;

  /* aliases so older pages using the bone names stay consistent */
  --bone:var(--paper); --bone-2:var(--paper-2); --bone-3:var(--paper-3);

  --serif:'Spectral',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --site-max:1120px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;font-size:16px;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
::selection{background:var(--care);color:var(--paper);}
a{color:inherit;}
img,svg{display:block;}

.micro{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.micro.care{color:var(--care);}
em{font-style:italic;}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);}
.site-head .bar{max-width:var(--site-max);margin:0 auto;padding:0 clamp(24px,5vw,52px);height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.site-head .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:none;}
.site-head .brand svg{width:30px;height:30px;}
.site-head .brand circle{fill:none;stroke:var(--care);}
.site-head .brand line{stroke:var(--care);stroke-linecap:round;}
.site-head .brand .nm{font-family:var(--serif);font-size:20px;font-weight:500;letter-spacing:.01em;}
.site-head .nav{display:flex;gap:clamp(14px,2.4vw,30px);align-items:center;}
.site-head .nav a{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.005em;color:var(--ink-soft);text-decoration:none;transition:color .2s;white-space:nowrap;}
.site-head .nav a:hover,.site-head .nav a.here{color:var(--care);}
.site-head .nav a.cta{background:var(--care);color:var(--paper);padding:9px 18px;border-radius:2px;}
.site-head .nav a.cta:hover{background:var(--care-deep);color:var(--paper);}
.site-head .nav-toggle{display:none;width:40px;height:40px;flex:none;border:1px solid var(--rule);border-radius:2px;background:none;cursor:pointer;align-items:center;justify-content:center;}
.site-head .nav-toggle span,.site-head .nav-toggle span::before,.site-head .nav-toggle span::after{content:"";display:block;width:18px;height:1.5px;background:var(--ink);position:relative;transition:transform .25s,opacity .25s;}
.site-head .nav-toggle span::before{position:absolute;top:-6px;left:0;}
.site-head .nav-toggle span::after{position:absolute;top:6px;left:0;}
.site-head.open .nav-toggle span{background:transparent;}
.site-head.open .nav-toggle span::before{transform:translateY(6px) rotate(45deg);}
.site-head.open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg);}
@media(max-width:680px){
  .site-head .nav-toggle{display:flex;}
  .site-head .bar{position:relative;}
  .site-head .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:6px 0 12px;display:none;box-shadow:0 14px 24px -16px rgba(25,26,20,.4);}
  .site-head.open .nav{display:flex;}
  .site-head .nav a{padding:13px clamp(24px,5vw,52px);font-size:15px;}
  .site-head .nav a:not(.cta){border-top:1px solid var(--rule-soft);}
  .site-head .nav a.cta{margin:12px clamp(24px,5vw,52px) 4px;text-align:center;border-radius:2px;}
}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);background:var(--paper);}
.site-foot .bar{max-width:var(--site-max);margin:0 auto;padding:clamp(30px,4vw,46px) clamp(24px,5vw,52px);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
.site-foot .links{display:flex;gap:18px;flex-wrap:wrap;}
.site-foot a{color:var(--muted);text-decoration:none;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.02em;transition:color .2s;}
.site-foot a:hover{color:var(--care);}
.site-foot .reg{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}

/* ---------- shared buttons ---------- */
.btn{font-size:14px;font-weight:600;letter-spacing:.02em;padding:14px 26px;border-radius:2px;text-decoration:none;transition:transform .2s,background .2s;display:inline-block;}
.btn.primary{background:var(--care);color:var(--paper);}
.btn.primary:hover{background:var(--care-deep);transform:translateY(-2px);}
.btn.ghost{color:var(--care-deep);border:1px solid var(--rule);}
.btn.ghost:hover{border-color:var(--care);transform:translateY(-2px);}

/* ---------- reveal (progressive enhancement) ---------- */
/* Base state is VISIBLE. Hidden-then-animate only when JS confirms it's running. */
.js [data-reveal]{opacity:0;transform:translateY(15px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);}
.js [data-reveal].in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;}}