/* ============================================================
   SAVE THE SAND — brand v2 overlay
   Loaded AFTER each page's inline styles, so its :root remap
   re-skins every page through the shared token system.
   Source of truth for the look: Save The Sand_Brand Identity.pdf
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* ---------- 1. Token remap: brand-kit palette ---------- */
:root{
  --sts-sage:      #7F8C75;
  --sts-sage-hi:   #8B987D;
  --sts-sage-dp:   #6E7B64;

  --forest:        #273C2E;   /* softer than the old #1C2B1A */
  --forest-mid:    #35513E;
  --forest-light:  #46684F;
  --parchment:     #E6E0D6;   /* kit cream */
  --parchment-dark:#D8D0C2;
  --white:         #F1ECE3;   /* warm, never cold */
  --gold:          #A09078;   /* signal color is now kit tan */
  --gold-light:    #C3B49A;
  --sand:          #A09078;
  --text-dark:     #243024;
  --text-mid:      #46523F;
  --text-light:    #7A8474;
}

/* ---------- 2. One typeface: Josefin Sans ---------- */
body, body *:not(script):not(style){
  font-family:"Josefin Sans", sans-serif !important;
}

/* Josefin sits higher on the baseline than Cormorant — give big serif-role
   headlines a touch more breathing room */
h1, h2, .hero-headline{line-height:1.08}

/* ---------- 3. CTA buttons: river rises, letters spread ---------- */
.sts-rise{position:relative;overflow:hidden;
  transition:letter-spacing .5s cubic-bezier(.16,1,.3,1), color .45s ease, border-color .45s ease !important}
.sts-rise .sts-btn-label{position:relative;z-index:2}
.sts-rise::before{content:"";position:absolute;inset:0;z-index:1;
  background:var(--gold);transform:translateY(101%);
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.sts-rise:hover{letter-spacing:.24em !important;color:var(--white) !important}
.sts-rise:hover::before{transform:translateY(0)}
a.track-link{transition:gap .3s ease, letter-spacing .4s ease}
a.track-link:hover{letter-spacing:.2em}

/* ---------- 4. Wavy section boundaries ---------- */
.sts-wave{position:relative;height:88px;margin-top:-88px;z-index:6;
  overflow:hidden;pointer-events:none;line-height:0}
.sts-wave svg{position:absolute;left:0;top:0;width:200%;height:100%;display:block}
.sts-wave[data-drift="l"] svg{animation:stsDriftL 26s linear infinite}
.sts-wave[data-drift="r"] svg{animation:stsDriftR 32s linear infinite}
@keyframes stsDriftL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes stsDriftR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.sts-wave .sts-wave-line{fill:none;stroke:var(--gold);stroke-width:1.3;opacity:.45}

/* ---------- 5. Scroll reveals ---------- */
.sts-reveal{opacity:0;transform:translateY(30px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1)}
.sts-reveal.sts-in{opacity:1;transform:none}

/* ---------- 6. Hero life: slow Ken Burns ---------- */
.hero-video, .hero > img, .page-hero > img, .story-hero > img{
  animation:stsKenburns 30s ease-in-out infinite alternate}
@keyframes stsKenburns{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ---------- 7. Homepage hero: river underlines the last word ---------- */
.sts-riverword{display:inline-block;position:relative}
.sts-riverword > svg{position:absolute;left:-3%;bottom:-.28em;width:106%;height:.36em;overflow:visible}
.sts-riverword > svg path{fill:none;stroke:var(--gold-light);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:640;stroke-dashoffset:640;animation:stsRiverDraw 2.4s cubic-bezier(.16,1,.3,1) .7s forwards}
@keyframes stsRiverDraw{to{stroke-dashoffset:0}}

/* ---------- 8. Homepage tracks: the sage panel + growing trees ---------- */
.tracks-section{background:var(--sts-sage) !important}
.tracks-section .section-label{color:var(--white) !important}
.tracks-section .section-label::before{background:var(--white) !important}
.tracks-section .tracks-headline,
.tracks-section h2{color:#fff !important}
.tracks-section .tracks-grid{background:rgba(255,255,255,.22) !important}
.tracks-section .track-card{background:var(--sts-sage) !important;
  position:relative;overflow:hidden;padding-left:72px !important;
  transition:background .5s ease !important}
.tracks-section .track-card:hover{background:var(--sts-sage-hi) !important}
.tracks-section .track-num{color:rgba(255,255,255,.45) !important;font-size:15px !important;
  letter-spacing:.3em}
.tracks-section .track-title{color:#fff !important;
  transition:transform .55s cubic-bezier(.16,1,.3,1) !important}
.tracks-section .track-card:hover .track-title{transform:translateX(8px)}
.tracks-section .track-body{color:rgba(255,255,255,.85) !important}
.tracks-section .track-link{color:var(--white) !important}

.sts-sapling{position:absolute;left:12px;top:28px;bottom:26px;width:50px;
  overflow:visible;pointer-events:none}
.track-card:hover .sts-sapling, body.sts-demo .sts-sapling{
  --grow:0;--leafop:.55;--fruitop:1;--fruitsc:1;--dropY:250px}

/* tree internals — all class-scoped so nothing leaks onto page paths */
.sts-treeart path{fill:none;stroke:var(--gold-light);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:100;stroke-dashoffset:var(--grow,100);
  transition:stroke-dashoffset .85s cubic-bezier(.16,1,.3,1)}
.sts-treeart .root  {transition-duration:.8s;opacity:.62}
.sts-treeart .ground{transition-duration:.7s;opacity:.5}
.sts-treeart .trunk {transition-duration:1s;transition-delay:.05s}
.sts-treeart .branch{transition-duration:.65s;transition-delay:.5s}
.sts-treeart .twig  {transition-duration:.55s;transition-delay:.72s}
.sts-treeart .leaf  {fill:var(--gold-light);fill-opacity:var(--leafop,0);
  transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1) .85s, fill-opacity .65s ease 1.1s}
.sts-treeart .fruit {fill:var(--gold-light);stroke:none;opacity:var(--fruitop,0);
  transform:scale(var(--fruitsc,.2));transform-box:fill-box;transform-origin:center;
  transition:opacity .5s ease 1.3s, transform .55s cubic-bezier(.34,1.56,.64,1) 1.3s}
.sts-treeart .drop  {fill:var(--gold-light);stroke:none;opacity:var(--fruitop,0);
  transform:translateY(var(--dropY,0px));transform-box:fill-box;transform-origin:center}
.sts-treeart .drop1{transition:opacity .5s ease 1.3s, transform 1.05s cubic-bezier(.6,.04,.98,.34) 1.95s}
.sts-treeart .drop2{transition:opacity .5s ease 1.5s, transform 1.15s cubic-bezier(.6,.04,.98,.34) 2.4s}

/* ---------- 9. Demo/capture mode (?sts-demo=1): cap vh heroes ---------- */
body.sts-demo .hero, body.sts-demo section[class*="hero"]{
  min-height:620px !important;height:620px !important}
body.sts-demo .home-map-section, body.sts-demo .home-map-section *{
  max-height:640px !important}
body.sts-demo .home-hero-band, body.sts-demo .home-hero-band img{
  min-height:0 !important;height:620px !important;max-height:620px !important}

/* ---------- 10. Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .sts-wave svg, .hero-video, .hero > img, .page-hero > img, .story-hero > img{animation:none !important}
  .sts-reveal{opacity:1 !important;transform:none !important}
  .sts-riverword > svg path{animation:none !important;stroke-dashoffset:0}
}