/* ed-shared.css: shared stylesheet for the Emotional Downshift brand pages
   (index.html, program.html, why-it-works.html and future pages in the same look).
   One source of truth for fonts, palette tokens (light + dark), base type, the
   top nav, buttons, footer and the rise animation. Page-specific sections stay
   in a small inline <style> on each page and override this file.
   The check-tool pages use ed-check.css instead. */

/* Self-hosted brand fonts - no third-party requests */
  @font-face{
    font-family:'Fraunces';
    src:url('fonts/Fraunces.woff2') format('woff2');
    font-weight:100 900; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Satoshi';
    src:url('fonts/Satoshi-Variable.woff2') format('woff2');
    font-weight:300 900; font-style:normal; font-display:swap;
  }

:root{
    --paper:#F5F0E8;--paper-2:#EFE7DA;--ink:#1C1C17;--ink-soft:#5F5A4F;
    --teal:#01696F;--teal-deep:#014A4F;--line:rgba(28,28,23,.14);--line-soft:rgba(28,28,23,.08);
    --maxw:1080px;
  }
  html.dark{
    --paper:#13201F;--paper-2:#192B29;--ink:#F1ECE0;--ink-soft:#A7A091;
    --teal:#5BBFC4;--teal-deep:#7FD2D6;--line:rgba(241,236,224,.16);--line-soft:rgba(241,236,224,.08);
  }
  @media (prefers-color-scheme:dark){
    html:not(.light){--paper:#13201F;--paper-2:#192B29;--ink:#F1ECE0;--ink-soft:#A7A091;
      --teal:#5BBFC4;--teal-deep:#7FD2D6;--line:rgba(241,236,224,.16);--line-soft:rgba(241,236,224,.08);}
  }

*{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
  body{font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.14;letter-spacing:-.005em}
  .eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
  .lead{font-size:1.18rem;color:var(--ink-soft);max-width:58ch}

/* top nav */
  header.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
  .wordmark{font-family:"Fraunces",serif;font-size:1.22rem;font-weight:700}
  .wordmark span{color:var(--teal)}
  .nav-right{display:flex;align-items:center;gap:1.8rem}
  .nav-links{display:flex;gap:1.6rem}
  .nav-links a{font-size:.94rem;color:var(--ink-soft);transition:.15s}
  .nav-links a:hover{color:var(--ink)}
  .toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:.2s}
  .toggle:hover{border-color:var(--teal);color:var(--teal)}.toggle svg{width:18px;height:18px}
  .burger{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;place-items:center;transition:.2s}
  .burger:hover{border-color:var(--ink-soft)}
  .burger svg{width:20px;height:20px}
  @media(max-width:820px){.nav-links{display:none}.burger{display:grid}.nav-links.open{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:1.2rem 28px 1.5rem;z-index:60}.nav-links.open a{font-size:1.05rem;color:var(--ink)}}

/* buttons */
  .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.5rem;border-radius:999px;font-weight:500;font-size:1rem;border:1px solid var(--line);transition:.2s;cursor:pointer}
  .btn:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
  .btn.solid{background:var(--teal);color:var(--paper);border-color:var(--teal)}
  html.dark .btn.solid{color:#0c1413}
  .btn.solid:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:var(--paper)}
  html.dark .btn.solid:hover{color:#0c1413}

/* extras used across pages */
  .nav-links a.active{color:var(--teal);font-weight:700}

/* footer */
  footer{border-top:1px solid var(--line-soft);padding:34px 0}
  footer .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;color:var(--ink-soft);font-size:.88rem}
  footer a{color:var(--ink-soft)}footer a:hover{color:var(--teal)}
  footer .fl{display:flex;gap:1.3rem}

/* entrance animation */
  .rise{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.32s}
  @keyframes rise{to{opacity:1;transform:none}}