/* ============================================================
   THEOSŌPHISM INSTITUTE — shared design system
   Dark marble · midnight · gold leaf · cosmic · editorial serif
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* ground */
  --void:#05060c;
  --midnight:#0a0f22;
  --midnight-2:#0d1430;
  --marble:#0b0b12;
  --panel:#10142a;
  --panel-2:#141a38;
  --line:rgba(201,164,76,0.16);
  --line-strong:rgba(201,164,76,0.34);

  /* gold family */
  --gold:#c9a44c;
  --gold-bright:#e6c476;
  --gold-deep:#a07d33;
  --bronze:#8a6d3b;
  --copper:#b07445;

  /* light */
  --ivory:#f2ead6;
  --warm-white:#efe7d4;
  --stone:#b8b09a;
  --stone-dim:#8a8574;
  --lapis:#3a5aa8;

  --serif:"Cormorant Garamond", Georgia, serif;
  --display:"Cinzel", Georgia, serif;
  --ui:"Jost", "Helvetica Neue", sans-serif;

  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--ivory);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---- starfield (fixed behind everything) ---- */
.starfield{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(58,90,168,0.22), transparent 60%),
    radial-gradient(900px 600px at 10% 4%, rgba(201,164,76,0.07), transparent 55%),
    linear-gradient(180deg, #060812 0%, #080b18 40%, #05060c 100%);
}
.starfield::before, .starfield::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,247,224,.9), transparent),
    radial-gradient(1.2px 1.2px at 70% 20%, rgba(255,247,224,.7), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(230,196,118,.8), transparent),
    radial-gradient(1.3px 1.3px at 85% 55%, rgba(255,247,224,.7), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,247,224,.6), transparent),
    radial-gradient(1.1px 1.1px at 12% 80%, rgba(230,196,118,.7), transparent),
    radial-gradient(1px 1px at 92% 82%, rgba(255,247,224,.6), transparent),
    radial-gradient(1.2px 1.2px at 33% 12%, rgba(255,247,224,.7), transparent);
  background-repeat:repeat;
  background-size:auto;
  animation:twinkle 7s ease-in-out infinite;
}
.starfield::after{ animation-delay:3.5s; opacity:.55; transform:scale(1.4); }
@keyframes twinkle{ 0%,100%{opacity:.55} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce){ .starfield::before,.starfield::after{animation:none} }

/* ---- shell ---- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,52px); }
main{ position:relative; z-index:1; }

/* ============ TOP BAR ============ */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(6,8,16,0.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .row{
  display:flex; align-items:center; justify-content:space-between;
  height:74px; gap:24px;
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand .sigil{ width:38px; height:38px; flex:none; color:var(--gold); }
.brand .name{ line-height:1; }
.brand .name b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:19px; letter-spacing:.14em; color:var(--gold-bright);
}
.brand .name span{
  display:block; font-family:var(--ui); font-weight:300;
  font-size:10px; letter-spacing:.42em; color:var(--stone); margin-top:3px;
}
.mainnav{ display:flex; gap:26px; }
.mainnav a{
  font-family:var(--ui); font-size:12px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--stone);
  padding:6px 0; position:relative; transition:color .3s var(--ease);
}
.mainnav a:hover{ color:var(--gold-bright); }
.mainnav a.active{ color:var(--gold-bright); }
.mainnav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.btn-join{
  font-family:var(--ui); font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--void);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  padding:11px 22px; border-radius:999px; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow:0 0 0 1px rgba(230,196,118,.4), 0 8px 24px -12px rgba(230,196,118,.6);
}
.btn-join:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(230,196,118,.6), 0 14px 34px -12px rgba(230,196,118,.75); }
.nav-burger{ display:none; background:none; border:0; color:var(--gold); cursor:pointer; }

@media (max-width:1080px){
  .mainnav{ display:none; }
  .nav-burger{ display:block; }
}

/* ============ TYPE HELPERS ============ */
.eyebrow{
  font-family:var(--ui); font-size:11px; font-weight:400;
  letter-spacing:.4em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before, .eyebrow.two::after{
  content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold));
}
.eyebrow.two::after{ background:linear-gradient(90deg,var(--gold),transparent); }

h1,h2,h3{ font-weight:500; letter-spacing:.005em; }
.display{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; line-height:1.05;
}
.serif-h{ font-family:var(--serif); font-weight:400; }
.gold-text{ color:var(--gold-bright); }
.dim{ color:var(--stone); }

/* gold section divider with lozenge */
.divider{ display:flex; align-items:center; justify-content:center; gap:16px; margin:0 auto; }
.divider .ln{ height:1px; width:min(120px,18vw); background:linear-gradient(90deg,transparent,var(--gold-deep)); }
.divider .ln.r{ background:linear-gradient(90deg,var(--gold-deep),transparent); }
.divider .dot{ width:6px; height:6px; transform:rotate(45deg); background:var(--gold); }

/* section title cluster */
.sec-head{ text-align:center; max-width:64ch; margin:0 auto; }
.sec-head .eyebrow{ margin-bottom:20px; }
.sec-head h2{
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; font-size:clamp(26px,3.6vw,44px); color:var(--ivory);
  margin:0 0 16px; line-height:1.1;
}
.sec-head p{ font-size:clamp(17px,1.7vw,21px); color:var(--stone); margin:0 auto; max-width:56ch; }

/* ============ BUTTONS ============ */
.btn{
  font-family:var(--ui); font-size:12.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px; border-radius:999px; cursor:pointer; transition:all .3s var(--ease);
  border:1px solid transparent;
}
.btn .ar{ transition:transform .3s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn--gold{
  color:var(--void);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  box-shadow:0 12px 30px -14px rgba(230,196,118,.7);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 18px 42px -14px rgba(230,196,118,.85); }
.btn--ghost{ color:var(--gold-bright); border-color:var(--line-strong); background:rgba(201,164,76,0.04); }
.btn--ghost:hover{ border-color:var(--gold); background:rgba(201,164,76,0.09); }

/* ============ REVEAL ANIMATION ============ */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; }
.rv.d3{ transition-delay:.24s; } .rv.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; } }

/* ============ CARD / IMAGE PLACEHOLDER ============ */
.imgph{
  position:relative; background:
    repeating-linear-gradient(135deg, rgba(201,164,76,.05) 0 10px, rgba(201,164,76,.02) 10px 20px),
    var(--panel);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.imgph .lab{ font-family:var(--ui); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--stone-dim); }

/* ============ FOOTER ============ */
.foot{
  position:relative; z-index:1; border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,15,34,0) , rgba(6,8,16,.85));
  padding:64px 0 40px; margin-top:0;
}
.foot .cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; }
.foot h4{ font-family:var(--ui); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; }
.foot a{ display:block; color:var(--stone); font-size:16px; margin-bottom:10px; transition:color .25s; }
.foot a:hover{ color:var(--gold-bright); }
.foot .fbrand p{ color:var(--stone); font-size:16px; max-width:40ch; margin:16px 0 0; }
.foot .fbot{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-dim);
}
@media (max-width:820px){ .foot .cols{ grid-template-columns:1fr 1fr; gap:32px; } }

/* mobile menu drawer */
.mdrawer{ position:fixed; inset:0; z-index:80; background:rgba(6,8,16,.97); display:none; flex-direction:column; padding:28px; }
.mdrawer.open{ display:flex; }
.mdrawer .mhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.mdrawer a{ font-family:var(--display); font-size:20px; letter-spacing:.08em; text-transform:uppercase; color:var(--ivory); padding:14px 0; border-bottom:1px solid var(--line); }
.mdrawer button{ background:none; border:0; color:var(--gold); cursor:pointer; }