@import url("fonts/ebgaramond.css");
/* The Exoteric Society — root landing (Byzantine Oxford dark) */
:root{
  --oxblood:#150a0c;
  --oxblood2:#1c0f13;
  --navy:#0e0a14;
  --gold:#c9a227;
  --gold-bright:#e0c060;
  --ivory:#f3ecdc;
  --ivory-dim:#d8c9a3;
  --muted:#9b8f74;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  color:var(--ivory);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(201,162,39,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 115%, rgba(14,10,20,.0), rgba(14,10,20,.6) 70%),
    linear-gradient(160deg, var(--oxblood) 0%, var(--oxblood2) 48%, var(--navy) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* cinematic letterbox bars */
.bar{position:fixed;left:0;right:0;z-index:40;background:#000}
.bar.top{top:0;height:9vh;border-bottom:1px solid rgba(201,162,39,.35)}
.bar.bottom{bottom:0;height:9vh;border-top:1px solid rgba(201,162,39,.35)}
@media (max-height:560px){.bar{display:none}}

/* film grain */
.grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 0.28s steps(2) infinite;
}
@keyframes grain{0%,100%{opacity:.05}50%{opacity:.09}}

.stage{
  position:relative;z-index:10;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:12vh 1.5rem;
}
.glow{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:70vmin;height:70vmin;pointer-events:none;
  background:radial-gradient(circle, rgba(201,162,39,.14), transparent 62%);
  filter:blur(10px);
  animation:breathe 11s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}

.kicker{
  display:block;
  font-size:clamp(.68rem,1.4vw,.82rem);
  letter-spacing:.52em;text-indent:.52em;
  text-transform:uppercase;color:var(--gold-bright);
}
.masthead{animation:rise 1.4s .1s both}

.title-block{margin-top:clamp(1.6rem,5vh,3rem);max-width:64rem}
.seal{
  font-size:1.05rem;color:var(--gold);letter-spacing:0;
  animation:rise 1.4s .25s both;
}
.title{
  margin-top:.9rem;
  font-weight:500;
  font-size:clamp(2.6rem,8vw,6rem);
  line-height:1.04;
  letter-spacing:.005em;
  color:var(--ivory);
  text-shadow:0 2px 40px rgba(0,0,0,.5);
  animation:rise 1.4s .35s both;
}
.title span{animation:shimmer 6s ease-in-out 2s infinite}
.period{color:var(--gold)}

.subtitle{
  margin-top:1.5rem;
  font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,2.2vw,1.5rem);
  color:var(--ivory-dim);
  animation:rise 1.4s .5s both;
}

.rule{
  width:3.4rem;height:1px;margin:2.6rem auto;position:relative;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:rise 1.4s .62s both;
}
.rule span{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:7px;height:7px;background:var(--gold);
  transform:translate(-50%,-50%) rotate(45deg);
}

.cta{
  display:inline-block;
  padding:.95rem 2.6rem;
  border:1px solid var(--gold);
  color:var(--gold-bright);
  font-size:.78rem;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;text-decoration:none;
  background:linear-gradient(rgba(201,162,39,.06),rgba(201,162,39,.06));
  background-color:rgba(201,162,39,.04);
  transition:background .5s ease,color .5s ease,border-color .5s ease;
  animation:rise 1.4s .8s both;
}
.cta:hover{background-color:var(--gold);color:#150a0c;border-color:var(--gold);box-shadow:0 6px 40px rgba(201,162,39,.35)}

.colophon{
  margin-top:4.5rem;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  animation:rise 1.4s 1s both;
}

@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{
  0%,100%{color:var(--ivory)}
  4%,9%{color:var(--gold-bright)}
  14%,100%{color:var(--ivory)}
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .glow,.title span{animation:none}
  .masthead,.title-block,.seal,.title,.subtitle,.rule,.cta,.colophon{animation:none}
}