/* ============================================================
   Prosequences — shared depth & typography layer (site.css)
   One system for every page:
   1. .site-bg  — a fixed, layered ambient background that lives
      entirely BEHIND content (z-index:-1, pointer-events:none).
      Pure CSS gradients + an inline SVG Wellness Wheel motif +
      a whisper of SVG grain. Nothing in it can overlap, intercept
      or dim the words on the page.
   2. Type      — Fraunces (display serif) for headings over the
      system sans for body, a calmer hierarchy, 1.6 line-height.
   3. Surfaces  — the pages' own panels keep their colour but go
      slightly translucent, so the depth shows around them while
      text stays on a solid-enough surface to stay crisp.
   Honours prefers-reduced-motion: all drift/spin switches off.
   ============================================================ */

:root{
  --ps-deep:#08130d;          /* forest black-green — the base */
  --ps-pine:#0e2417;
  --ps-moss:#2e7d4f;
  --ps-sage:#57c7a3;
  --ps-gold:#f5b942;
  --ps-cream:#f7f2e7;
  --ps-serif:"Fraunces", Georgia, "Times New Roman", serif;
}

html{ background:var(--ps-deep); }
body{ line-height:1.6; }

/* ---------- 1. The background layer ---------- */
.site-bg{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1100px 700px at 88% -12%, rgba(245,185,66,.10), transparent 60%),
    radial-gradient(900px 900px at -12% 28%, rgba(46,125,79,.24), transparent 62%),
    radial-gradient(1000px 820px at 112% 88%, rgba(87,199,163,.12), transparent 60%),
    radial-gradient(760px 520px at 50% 118%, rgba(245,185,66,.07), transparent 65%),
    linear-gradient(180deg, #0a1a12 0%, #0d1a26 52%, #08130d 100%);
}
/* Slow-breathing light field (transform only — cheap to paint) */
.site-bg::before{
  content:""; position:absolute; inset:-12%;
  background:
    radial-gradient(560px 380px at 22% 18%, rgba(247,242,231,.055), transparent 70%),
    radial-gradient(660px 460px at 78% 62%, rgba(46,125,79,.15), transparent 70%),
    radial-gradient(430px 300px at 58% 6%,  rgba(245,185,66,.06), transparent 70%);
  animation:ps-drift 72s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes ps-drift{
  from{ transform:translate3d(-1.6%,-1%,0) scale(1); }
  to  { transform:translate3d( 1.6%, 1.3%,0) scale(1.045); }
}
/* Fine grain, so gradients never band and the dark feels like paper */
.site-bg::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
/* The Wellness Wheel — eight spokes, eight points, turning so slowly
   it reads as stillness. Kept at whisper opacity, behind everything. */
.site-bg .wheel{
  position:absolute; color:var(--ps-gold);
  fill:none; stroke:currentColor; stroke-width:.7;
}
.site-bg .wheel-a{
  width:min(92vmin, 900px); height:auto;
  top:-24vmin; right:-19vmin; opacity:.085;
  animation:ps-spin 280s linear infinite; will-change:transform;
}
.site-bg .wheel-b{
  width:min(54vmin, 540px); height:auto;
  bottom:-17vmin; left:-13vmin; opacity:.06; color:var(--ps-sage);
  animation:ps-spin-rev 340s linear infinite; will-change:transform;
}
@keyframes ps-spin{ to{ transform:rotate(360deg); } }
@keyframes ps-spin-rev{ to{ transform:rotate(-360deg); } }

@media (prefers-reduced-motion: reduce){
  .site-bg::before, .site-bg .wheel-a, .site-bg .wheel-b{ animation:none !important; }
}

/* ---------- 2. Typography ---------- */
h1, h2, h3{ font-family:var(--ps-serif); text-wrap:balance; }
h1{
  font-weight:650; letter-spacing:-.015em; line-height:1.12;
  font-size:clamp(1.95rem, 4.6vw, 2.65rem);
}
h2{ font-weight:600; letter-spacing:.14em; }
h3{ font-weight:600; letter-spacing:.005em; line-height:1.3; }
p{ line-height:1.65; }
.tag, .blurb{ line-height:1.6; }

a{ text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--ps-gold); outline-offset:2px;
}
::selection{ background:rgba(245,185,66,.38); color:#fff; }

/* ---------- 3. Surfaces & controls (gentle, shared) ---------- */
/* Same hues the pages already use, a breath of translucency + shadow,
   so panels float over the depth instead of sitting on flat colour. */
.card, .step, .who, .how, .formbox, .note, .mission{
  background-color:rgba(20,32,56,.80);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
a.btn, a.buy, .support-btns a{
  box-shadow:0 8px 22px rgba(0,0,0,.30);
  transition:transform .16s ease, filter .16s ease, background .16s ease,
             border-color .16s ease, box-shadow .16s ease;
}
a.btn:hover, a.buy:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.34); }
.topnav a{ transition:color .15s ease; }

/* ---------- Home page (index.html) ----------
   The home page ships without its own stylesheet, so the shared
   layer gives it the full treatment: a centred measure, a serif
   hero, pill navigation and a soft panel for the support section. */
.home-wrap{
  max-width:780px; margin:0 auto; padding:56px 22px 72px;
  color:var(--ink, #f2f5fb);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.home-wrap h1{
  text-align:center; font-size:clamp(2.7rem, 7vw, 4.1rem); margin:0 0 .35em;
  color:var(--ps-cream);
}
.home-wrap > p{ max-width:66ch; margin:0 auto 1.15em; font-size:1.06rem; }
.home-wrap > p:first-of-type{
  text-align:center; font-family:var(--ps-serif); font-style:italic;
  font-size:clamp(1.25rem, 3vw, 1.55rem); color:var(--ps-gold); max-width:34ch;
}
.home-wrap > p:nth-of-type(2){ text-align:center; color:#c9d6c8; }
.home-wrap nav{ text-align:center; margin:26px 0 30px; }
.home-wrap nav p{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.home-wrap nav a{
  color:var(--ps-cream); text-decoration:none; font-size:.95rem; font-weight:600;
  border:1px solid rgba(247,242,231,.22); border-radius:999px; padding:8px 16px;
  background:rgba(247,242,231,.05); transition:all .16s ease;
}
.home-wrap nav a:hover{ border-color:rgba(245,185,66,.65); color:var(--ps-gold); transform:translateY(-1px); }
.home-wrap section{
  background:linear-gradient(180deg, rgba(247,242,231,.065), rgba(247,242,231,.03));
  border:1px solid rgba(247,242,231,.13); border-radius:20px;
  padding:30px 30px 24px; box-shadow:0 18px 44px rgba(0,0,0,.32);
}
.home-wrap section h2{
  font-size:1.45rem; letter-spacing:.01em; text-transform:none; color:var(--ps-cream); margin:0 0 .5em;
}
.home-wrap section h3{ color:var(--ps-cream); margin:1.3em 0 .4em; }
.home-wrap section p{ color:#dde7dd; }
.home-wrap section a{ color:var(--ps-sage); }
.home-wrap a{ color:var(--ps-sage); }
.home-wrap .support-btns a{
  color:#fff;
  background:linear-gradient(135deg, #2e7d4f, #256b42);
  box-shadow:0 8px 22px rgba(0,0,0,.32);
}
.home-wrap .support-btns a:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.home-wrap footer{
  text-align:center; color:#9fb4a4; font-size:.92rem; margin-top:34px; line-height:1.65;
}
@media (max-width:560px){ .home-wrap section{ padding:22px 18px 16px; } }