/* ============================================================
   THEORIES OF ANYTHING — shared design system
   Loaded by every page (root pages: href="_shared/styles.css",
   research/ pages: href="../_shared/styles.css").
   Contains only what's identical across all pages: palette
   variables, base reset, header/nav/footer, constellation
   canvas, and the shared responsive/motion media queries.
   Page-specific styles (hero, cards, content sections) stay
   inline in each page's own <style> block.

   NOTE: url() paths below resolve relative to THIS file's
   location (_shared/), not the including page — hence '../images/'.
   ============================================================ */

:root{
  /* —— TIER PALETTE = BRAND PALETTE —— */
  --gold:#E8B84B;        /* Tier 1 Verified  · wordmark, sandstone, torch */
  --gold-deep:#C0913F;
  --cyan:#45D6DF;        /* Tier 2 Credible  · ankh, neural nets, science */
  --cyan-deep:#1f9aa5;
  --violet:#9B5DE5;      /* Tier 3 Speculative · the cosmic unknown */
  --stone-tier:#9a8a7a;  /* Tier 4 Dubious   · eroded rock */
  --amber:#EF9F27;       /* torch fire */

  /* —— SURFACES —— */
  --space:#0A0A12;       /* deep cosmos (page) */
  --space-2:#10101c;
  --stone:#2b1d0e;       /* ancient stone (header/footer) */
  --stone-line:#5a3d1c;
  --card:#12121e;
  --card-line:#24243a;

  /* —— TEXT —— */
  --ink:#F2EDE0;
  --ink-soft:#9a9ab0;
  --ink-stone:#b89a6a;

  --maxw:1120px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--space);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* —— drifting constellation behind everything —— */
#constellation{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ====================== STONE HEADER ====================== */
.site-header{
  position:relative;z-index:2;
  background:
    linear-gradient(180deg,rgba(20,14,5,.30) 0%,rgba(20,14,5,.72) 100%),
    url('../images/banner.jpg?v=2');
  background-size:cover;
  background-position:center center;
  min-height:200px;
  border-bottom:2px solid var(--stone-line);
  box-shadow:0 8px 40px -12px rgba(0,0,0,.8);
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
/* inner-page variant: flat stone gradient, no banner photo */
.site-header.inner{
  background:linear-gradient(180deg,#3a280f 0%,#2b1d0e 100%);
  justify-content:center;
}
.glyphs{position:absolute;inset:0;display:flex;justify-content:space-around;align-items:center;
  font-size:34px;color:#000;opacity:.10;pointer-events:none;user-select:none;letter-spacing:14px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.header-inner{position:relative;display:flex;align-items:center;justify-content:center;
  padding:30px 0 24px}
.center-stack{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}

/* —— the ankh medallion: left-anchored, scaled relative to the centered
   text block's height (65%) —— */
.medallion{position:absolute;left:0;top:50%;transform:translateY(-50%);height:65%;width:auto;flex-shrink:0;
  filter:drop-shadow(0 0 14px rgba(69,214,223,.45))}
.medallion .ankh{stroke:var(--cyan)}
.medallion-sm{width:22px;height:22px;flex-shrink:0;vertical-align:middle;margin-right:8px;
  filter:drop-shadow(0 0 6px rgba(69,214,223,.4))}
footer .foot-brand{display:inline-flex;align-items:center}

.wordmark{display:flex;flex-direction:column;align-items:center;gap:14px}
.wordmark h1{
  font-size:clamp(22px,4.4vw,40px);font-weight:800;letter-spacing:2px;line-height:1;
  background:linear-gradient(180deg,#FBE7A6 0%,#E8B84B 45%,#9c6e22 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);
  text-shadow:0 1px 0 rgba(0,0,0,.3)}
.wordmark .tag{color:var(--gold-deep);font-size:clamp(11px,1.6vw,15px);letter-spacing:4px}

nav{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:center;position:relative}
nav a{color:var(--ink-stone);text-decoration:none;font-size:14px;letter-spacing:.5px;transition:color .2s}
nav a:hover{color:var(--gold)}
nav a.active{color:var(--gold)}
nav a.research{color:var(--cyan)}
nav .search-ic{margin-left:2px;color:var(--ink-stone);font-size:17px;cursor:pointer}

/* ====================== STONE FOOTER ====================== */
footer{background:linear-gradient(0deg,#34250f 0%,#241809 100%);border-top:2px solid var(--stone-line);
  position:relative;z-index:2}
footer .row{display:flex;align-items:center;justify-content:space-between;padding:20px 0;flex-wrap:wrap;gap:12px}
footer .tagline{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--ink-stone)}
footer .social{display:flex;gap:16px}
footer .social a{color:var(--ink-stone);font-size:18px;text-decoration:none;transition:.2s}
footer .social a:hover{color:var(--gold)}

@media (max-width:760px){
  .header-inner{flex-direction:column;padding:24px 0 18px}
  .medallion{position:static;transform:none;height:39px;width:39px;margin-bottom:14px}
  nav{gap:12px 18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}