/* Yogi's Bliss — the site theme. ONE copy of the visual system for every page
   served under yogisbliss.com: the tokens, the ground and the sky, the type,
   the pill, the focus ring, the skip link, the top bar, the content column,
   the panel card, the footer. A page links this first and then its own sheet
   for what is specific to it (landing.css is the model). Rules and the reasons
   behind them: docs/brand/design-system.md; the decision: ADR-0024.

   The tokens are the app's own (client/yogis-bliss-demo.html :root), kept
   identical by hand until that file's styling is split out (ADR-0005) — the
   click from / into /app/ must change the content and nothing else.

   No inline code anywhere on the site: every page ships under script-src
   'self', and the pages tree is heading to style-src 'self' as well. */

/* ------------- tokens ------------- */
:root{
  --bg:#070a13;                       /* the ground: near-black indigo */
  --panel:rgba(20,26,44,.55);         /* card / panel fill over the sky */
  --panel2:rgba(28,36,60,.55);        /* a lifted panel, one step lighter */
  --line:rgba(150,170,220,.16);       /* every hairline border */
  --text:#e9eefb;                     /* body text */
  --dim:#98a5c6;                      /* secondary text, nav, captions */
  --teal:#7ee8d0;                     /* action: links, focus, the live dot */
  --lav:#a9b8ff;                      /* secondary accent, pairs with teal */
  --warm:#ffc9a0;                     /* attention: primary focus, badges */
  --bad:#ff8f8f;                      /* errors and stop signals only */
  --r:20px;                           /* panel radius; pills are 999px */
}

/* ------------- ground ------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{margin:0;color:var(--text);background:
  radial-gradient(1200px 700px at 75% -10%, #131c36 0%, transparent 60%),
  radial-gradient(900px 600px at 10% 110%, #171230 0%, transparent 55%),
  var(--bg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden}

/* ------------- type ------------- */
/* Marcellus is display only — the brand word and headings — and always
   weight 400; the page must link the Google Fonts face for it to appear. */
.serif{font-family:'Marcellus',Georgia,'Times New Roman',serif;font-weight:400}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* ------------- sky ------------- */
/* The app scatters 70 stars with a script; here the sky is six tiled
   gradient layers at unrelated periods, so no script and no visible grid.
   A page opts in with <div class="stars" aria-hidden="true"></div>. */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:
    radial-gradient(1.2px 1.2px at 22px 31px,#cfd9ff 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 141px 97px,#cfd9ff 50%,transparent 51%),
    radial-gradient(1px 1px at 68px 203px,#cfd9ff 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 210px 160px,#cfd9ff 50%,transparent 51%),
    radial-gradient(1px 1px at 300px 44px,#cfd9ff 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 92px 330px,#cfd9ff 50%,transparent 51%);
  background-size:277px 311px,349px 293px,431px 389px,367px 457px,503px 421px,419px 479px;
  animation:tw 5s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.14}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stars{animation:none;opacity:.3}
  .pill,.pill.primary{transition:none}
}

/* ------------- pills (verbatim from the app) ------------- */
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:rgba(24,31,52,.6);color:var(--text);border-radius:999px;
  padding:9px 20px;cursor:pointer;transition:.25s;backdrop-filter:blur(8px);font:inherit}
.pill:hover{border-color:var(--teal);box-shadow:0 0 18px rgba(126,232,208,.15);text-decoration:none}
.pill.primary{background:linear-gradient(135deg,rgba(126,232,208,.92),rgba(146,166,255,.92));
  color:#0a0f1c;font-weight:600;border:0;padding:14px 38px;font-size:17px}
.pill.primary:hover{box-shadow:0 0 30px rgba(126,232,208,.35)}
.pill.primary:focus-visible{outline-color:var(--warm)}

/* ------------- skip link ------------- */
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--teal);color:#0a0f1c;
  padding:8px 14px;border-radius:999px;font-weight:600}
.skip:focus{top:12px;text-decoration:none}

/* ------------- frame: top bar, column, footer ------------- */
.top,main,.foot{position:relative;z-index:1}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;max-width:1120px;margin:0 auto;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-size:19px;
  letter-spacing:.05em}
.brand:hover{text-decoration:none}
.brand img{width:36px;height:36px;filter:drop-shadow(0 0 10px rgba(201,151,63,.4))}
.topnav{display:flex;gap:6px;flex-wrap:wrap}
.topnav a{color:var(--dim);padding:7px 14px;border-radius:999px;font-size:14px;letter-spacing:.02em}
.topnav a:hover{color:var(--text);background:rgba(24,31,52,.6);text-decoration:none}

section{max-width:1120px;margin:0 auto;padding:0 22px}
h2.serif{font-size:clamp(24px,3vw,32px);margin:0 0 20px;letter-spacing:.05em;text-align:center}

.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px 18px;backdrop-filter:blur(10px)}

.foot{color:var(--dim);font-size:12.5px;padding:0 22px 30px;max-width:1120px;margin:0 auto;
  border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:10px;
  align-items:center;text-align:center}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}
.foot nav a{color:var(--dim);padding:4px 8px}
.foot nav a:hover{color:var(--teal)}
.foot .foothome{margin:0}
.foot .foothome span{letter-spacing:.06em}

@media (max-width:480px){
  .top{justify-content:center}
  .pill.primary{width:min(100%,360px);justify-content:center}
}