/* =========================================================
   ROSICRUCIANISTS.COM — Design System
   Palette: alchemical vellum & sealing wax
   ========================================================= */

:root{
  --ink:        #120a08;   /* near-black, warm */
  --ground:     #1c0f0e;   /* burgundy-black page bg */
  --ground-2:   #26130f;   /* raised panel bg */
  --burgundy:   #4a1420;
  --red:        #7c1d2b;   /* rosicrucian red */
  --red-bright: #a3283a;
  --gold:       #b6893f;   /* aged brass */
  --gold-bright:#d9b565;   /* gilt highlight */
  --vellum:     #e9dfc9;   /* primary text on dark */
  --vellum-dim: #b7ab90;   /* secondary text */
  --hairline:   rgba(214,181,101,0.18);
  --white-rose: #f1e8d8;

  --f-display: 'Cinzel', serif;
  --f-body:    'Cormorant Garamond', serif;
  --f-quote:   'Frank Ruhl Libre', serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --maxw: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(124,29,43,0.25), transparent 60%),
    var(--ground);
  color:var(--vellum);
  font-family:var(--f-body);
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

a{color:var(--gold-bright);}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--white-rose);
  margin:0 0 0.5em;
}
h1{font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.1; letter-spacing:0.03em;}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);}
h3{font-size:1.3rem; color:var(--gold-bright);}

p{margin:0 0 1.1em;}
.eyebrow{
  font-family:var(--f-mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-block;
  margin-bottom:0.9em;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.rule{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
  border:0; margin:3.2em 0;
}

/* ---------- Header / Nav ---------- */
header.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(18,10,8,0.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.head-row{
  max-width:var(--maxw); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-size:1.05rem; letter-spacing:0.06em;
  color:var(--white-rose); text-decoration:none;
}
.brand svg{width:26px; height:26px; flex:none;}
nav.main-nav{display:flex; gap:2rem;}
nav.main-nav a{
  font-family:var(--f-mono); font-size:0.76rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--vellum-dim); text-decoration:none;
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{
  color:var(--gold-bright); border-color:var(--gold-bright);
}

.menu-btn{
  display:none; background:none; border:1px solid var(--hairline); border-radius:4px;
  width:42px; height:38px; cursor:pointer; position:relative;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after{
  content:''; position:absolute; left:10px; right:10px; height:1.5px; background:var(--gold-bright);
  transition:transform .25s ease, opacity .25s ease;
}
.menu-btn span{top:50%; transform:translateY(-50%);}
.menu-btn span::before{top:-8px;}
.menu-btn span::after{top:8px;}
.menu-btn[aria-expanded="true"] span{background:transparent;}
.menu-btn[aria-expanded="true"] span::before{transform:rotate(45deg) translate(-1px,1px); top:0;}
.menu-btn[aria-expanded="true"] span::after{transform:rotate(-45deg) translate(-1px,-1px); top:0;}

.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:40;
}
.nav-backdrop.open{opacity:1; pointer-events:auto;}

@media (max-width:860px){
  nav.main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--ink); border-left:1px solid var(--hairline);
    flex-direction:column; gap:0; padding:88px 28px 28px;
    transform:translateX(100%); transition:transform .3s ease; z-index:45;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{padding:14px 0; border-bottom:1px solid var(--hairline); width:100%;}
  .menu-btn{display:block;}
}
body.nav-locked{overflow:hidden;}

/* ---------- Hero ---------- */
.hero{
  padding:88px 0 64px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
}
.hero .lede{font-family:var(--f-body); font-size:1.28rem; color:var(--vellum-dim); max-width:46ch;}
.hero-art{display:flex; justify-content:center; align-items:center;}
.hero-cta{display:flex; gap:16px; margin-top:1.8em; flex-wrap:wrap;}
.btn{
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:12px 22px; border-radius:2px; text-decoration:none; display:inline-block;
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.btn-primary{background:var(--red); color:var(--white-rose); border:1px solid var(--red-bright);}
.btn-primary:hover{background:var(--red-bright); transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--hairline); color:var(--vellum-dim);}
.btn-ghost:hover{border-color:var(--gold-bright); color:var(--gold-bright);}

@media (max-width:860px){
  .hero{grid-template-columns:1fr; padding-top:48px;}
  .hero-art{order:-1;}
}

/* ---------- Cards / grid ---------- */
.grid{display:grid; gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:linear-gradient(180deg, rgba(214,181,101,0.05), transparent 40%), var(--ground-2);
  border:1px solid var(--hairline); border-radius:3px; padding:26px 24px;
  text-decoration:none; color:inherit; display:block;
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{border-color:var(--gold); transform:translateY(-2px);}
.card .eyebrow{margin-bottom:0.6em;}
.card p{color:var(--vellum-dim); font-size:1.02rem; margin-bottom:0;}

/* ---------- Timeline ---------- */
.timeline{position:relative; padding-left:32px; border-left:1px solid var(--hairline);}
.tl-item{position:relative; padding-bottom:2.4em;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:''; position:absolute; left:-37px; top:6px; width:9px; height:9px;
  border-radius:50%; background:var(--gold-bright); box-shadow:0 0 0 4px var(--ground);
}
.tl-date{font-family:var(--f-mono); font-size:0.82rem; color:var(--gold); letter-spacing:0.06em;}

/* ---------- Pull quote / manifesto excerpt ---------- */
.quote-block{
  font-family:var(--f-quote); font-style:italic; font-size:1.32rem; line-height:1.55;
  color:var(--white-rose); border-left:2px solid var(--gold); padding:0.2em 0 0.2em 1.4em;
  margin:1.6em 0;
}
.quote-cite{
  display:block; font-family:var(--f-mono); font-style:normal; font-size:0.76rem;
  letter-spacing:0.08em; color:var(--vellum-dim); margin-top:0.6em;
}

/* ---------- Callout / caveat ---------- */
.callout{
  background:rgba(124,29,43,0.14); border:1px solid rgba(124,29,43,0.4); border-radius:3px;
  padding:20px 22px; margin:1.8em 0;
}
.callout .eyebrow{color:var(--red-bright);}
.callout p:last-child{margin-bottom:0;}

/* ---------- Source-text link ---------- */
.src-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.05em;
  color:var(--gold-bright); text-decoration:none;
  border:1px solid var(--hairline); border-radius:2px;
  padding:8px 14px; margin:0.4em 0 1.6em;
  transition:border-color .2s ease, background .2s ease;
}
.src-link:hover{border-color:var(--gold-bright); background:rgba(214,181,101,0.08);}
.src-link svg{width:14px; height:14px; flex:none;}

/* ---------- Content page layout ---------- */
.page-head{padding:64px 0 24px;}
.page-head .eyebrow{margin-bottom:0.4em;}
.content{padding:12px 0 80px;}
.content h2{margin-top:1.6em;}
.content > .wrap > *:first-child{margin-top:0;}
.lede-lg{font-size:1.2rem; color:var(--vellum-dim); max-width:62ch;}

/* ---------- Glossary ---------- */
.gloss-term{
  font-family:var(--f-mono); color:var(--gold-bright); font-size:1rem; letter-spacing:0.02em;
}
.gloss-item{border-bottom:1px solid var(--hairline); padding:18px 0;}
.gloss-item:last-child{border-bottom:0;}

/* ---------- Footer ---------- */
footer.site-foot{
  border-top:1px solid var(--hairline); padding:48px 0; margin-top:40px;
}
.foot-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.foot-links{display:flex; gap:24px; flex-wrap:wrap;}
.foot-links a{font-family:var(--f-mono); font-size:0.76rem; letter-spacing:0.06em; text-decoration:none; color:var(--vellum-dim);}
.foot-links a:hover{color:var(--gold-bright);}
.foot-note{font-family:var(--f-mono); font-size:0.72rem; color:var(--vellum-dim); opacity:0.7;}

/* ---------- Rose-Cross SVG hero animation ---------- */
.rc-emblem{width:100%; max-width:340px; height:auto;}
.rc-petal{
  animation:bloom 1.1s cubic-bezier(0.22,0.9,0.35,1) backwards;
}
@keyframes bloom{
  0%{transform:scale(0.1); opacity:0;}
  100%{transform:scale(1); opacity:1;}
}
.rc-dew{
  animation:dewfall 4.5s ease-in infinite;
  animation-delay:2.6s;
}
@keyframes dewfall{
  0%{transform:translateY(0); opacity:0;}
  8%{opacity:1;}
  70%{transform:translateY(46px); opacity:1;}
  85%{opacity:0;}
  100%{transform:translateY(46px); opacity:0;}
}