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

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0a0f;
  --bg-card:#12121a;
  --gold:#d4af37;
  --gold-dim:#b8962e;
  --gold-glow:rgba(212,175,55,.15);
  --text:#e0ddd5;
  --text-dim:#8a8780;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}

/* ── hero ── */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:2rem;
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%,var(--gold-glow),transparent 70%),
    radial-gradient(circle at 20% 80%,rgba(212,175,55,.06),transparent 50%),
    radial-gradient(circle at 80% 20%,rgba(212,175,55,.04),transparent 40%);
  pointer-events:none;
}

.hero-glyph{
  font-size:4rem;
  margin-bottom:1.5rem;
  animation:float 6s ease-in-out infinite;
  filter:drop-shadow(0 0 24px var(--gold-glow));
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

.hero h1{
  font-family:var(--serif);
  font-size:clamp(3rem,8vw,6.5rem);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--gold);
  line-height:1.1;
  animation:reveal 1.2s cubic-bezier(.22,1,.36,1) both;
}

@keyframes reveal{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

.hero .subtitle{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.1rem,2.5vw,1.6rem);
  color:var(--text-dim);
  margin-top:1rem;
  animation:reveal 1.2s .3s cubic-bezier(.22,1,.36,1) both;
}

.hero .hero-byline{
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dim);
  opacity:.5;
  margin-top:.6rem;
  animation:reveal 1.2s .45s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-byline a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(212,175,55,.25);}
.hero .hero-byline a:hover{opacity:.8;}

.hero .cta{
  margin-top:2.5rem;
  animation:reveal 1.2s .6s cubic-bezier(.22,1,.36,1) both;
}

.hero .cta a{
  display:inline-block;
  padding:.75rem 2.4rem;
  border:1px solid var(--gold-dim);
  color:var(--gold);
  text-decoration:none;
  font-family:var(--sans);
  font-weight:500;
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:all .35s ease;
}

.hero .cta a:hover{
  background:var(--gold);
  color:var(--bg);
  box-shadow:0 0 30px var(--gold-glow);
}

/* ── divider ── */
.divider{
  width:60px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
  margin:0 auto;
}

/* ── about ── */
.about{
  max-width:680px;
  margin:0 auto;
  padding:6rem 2rem;
  text-align:center;
}

.about h2{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1.5rem;
}

.about p{
  font-size:1.05rem;
  color:var(--text-dim);
  line-height:1.9;
}

/* ── features ── */
.features{
  max-width:1080px;
  margin:0 auto;
  padding:2rem 2rem 8rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}

.card{
  background:var(--bg-card);
  border:1px solid rgba(212,175,55,.1);
  padding:2.5rem 2rem;
  transition:all .4s ease;
  position:relative;
  overflow:hidden;
}

.card::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;
  transition:opacity .4s ease;
}

.card:hover{
  border-color:rgba(212,175,55,.3);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}

.card:hover::after{opacity:1}

.card-icon{
  font-size:2rem;
  margin-bottom:1rem;
}

.card h3{
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:.75rem;
}

.card p{
  font-size:.95rem;
  color:var(--text-dim);
  line-height:1.8;
}

/* ── principles ── */
.principles{
  max-width:900px;
  margin:0 auto;
  padding:6rem 2rem 8rem;
  text-align:center;
}

.principles h2{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1.5rem;
}

.principles-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:1.5rem;
  margin-top:3rem;
  text-align:left;
}

.principles-list li{
  display:flex;
  gap:1.2rem;
  align-items:flex-start;
  background:var(--bg-card);
  border:1px solid rgba(212,175,55,.1);
  padding:1.8rem;
  transition:all .4s ease;
}

.principles-list li:hover{
  border-color:rgba(212,175,55,.3);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}

.principle-num{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:600;
  color:var(--gold-dim);
  opacity:.55;
  min-width:2rem;
  line-height:1.2;
  flex-shrink:0;
}

.principle-body h3{
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:.5rem;
}

.principle-body blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-size:.88rem;
  color:var(--text-dim);
  line-height:1.7;
  margin:0;
  padding:0;
}

.principle-explanation{
  font-size:.82rem;
  color:var(--text-dim);
  line-height:1.75;
  margin-top:.75rem;
  padding-top:.65rem;
  border-top:1px solid rgba(212,175,55,.08);
  opacity:.85;
}

/* ── correspondences ── */
.correspondences{
  max-width:1080px;
  margin:0 auto;
  padding:6rem 2rem 8rem;
  text-align:center;
}

.correspondences h2{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1.5rem;
}

.section-intro{
  max-width:620px;
  margin:0 auto 3rem;
  font-size:1.05rem;
  color:var(--text-dim);
  line-height:1.9;
}

.corr-grid{
  display:grid;
  grid-template-columns:1fr;
  border:1px solid rgba(212,175,55,.12);
  overflow:hidden;
}

.corr-row{
  display:grid;
  grid-template-columns:1fr 1.4fr 1.4fr 1.2fr 1.2fr;
  border-bottom:1px solid rgba(212,175,55,.08);
  transition:background .3s ease;
}

.corr-row:last-child{border-bottom:none}

.corr-head{
  background:rgba(212,175,55,.06);
}

.corr-head div{
  padding:.9rem 1.2rem;
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dim);
  border-right:1px solid rgba(212,175,55,.08);
}

.corr-head div:last-child{border-right:none}

.corr-row div{
  padding:1.2rem 1.2rem;
  border-right:1px solid rgba(212,175,55,.06);
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.25rem;
}

.corr-row div:last-child{border-right:none}

.corr-row[data-element]:hover{
  background:rgba(212,175,55,.04);
}

.corr-element{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--text);
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:.6rem;
}

.elem-mark{
  font-size:.85rem;
  line-height:1;
}

.fire-mark{color:#e8622a}
.water-mark{color:#4a90d9}
.air-mark{color:#c8d4de;font-size:.7rem}
.earth-mark{color:#7a9a6a;font-size:.7rem}
.spirit-mark{color:#d4af37;font-size:.75rem}

.corr-row strong{
  font-family:var(--serif);
  font-weight:600;
  font-size:.95rem;
  color:var(--text);
}

.corr-row span{
  font-size:.78rem;
  color:var(--text-dim);
  line-height:1.4;
}

.corr-note{
  margin-top:2rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:.95rem;
  color:var(--text-dim);
}

@media(max-width:680px){
  .corr-row{
    grid-template-columns:1fr 1fr;
    gap:0;
  }

  .corr-head{display:none}

  .corr-row[data-element]{
    grid-template-columns:1fr 1fr;
    padding:.5rem 0;
  }

  .corr-row div{
    border-right:none;
    border-bottom:1px solid rgba(212,175,55,.06);
    padding:.7rem 1rem;
  }

  .corr-row div:nth-child(1){
    grid-column:1/-1;
    background:rgba(212,175,55,.05);
    flex-direction:row !important;
  }

  .corr-row div::before{
    content:attr(data-label);
    font-size:.65rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--gold-dim);
    margin-bottom:.15rem;
    display:block;
  }
}

/* ── four worlds ── */
.worlds{
  max-width:1080px;
  margin:0 auto;
  padding:6rem 2rem 8rem;
  text-align:center;
}

.worlds h2{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1.5rem;
}

.worlds-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-top:3rem;
}

.world-card{
  background:var(--bg-card);
  border:1px solid rgba(212,175,55,.1);
  border-top-width:2px;
  border-top-style:solid;
  padding:2rem 1.5rem;
  text-align:left;
  transition:all .4s ease;
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

.world-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  border-color:rgba(212,175,55,.25);
}

.world-card[data-world="atziluth"] { border-top-color:#c04a20; }
.world-card[data-world="briah"]    { border-top-color:#2060a0; }
.world-card[data-world="yetzirah"] { border-top-color:#7050a0; }
.world-card[data-world="assiah"]   { border-top-color:#4a7040; }

.world-card[data-world="atziluth"]:hover { border-color:#c04a20; }
.world-card[data-world="briah"]:hover    { border-color:#2060a0; }
.world-card[data-world="yetzirah"]:hover { border-color:#7050a0; }
.world-card[data-world="assiah"]:hover   { border-color:#4a7040; }

.world-mark{
  font-size:1.6rem;
  margin-bottom:.6rem;
  line-height:1;
}

.world-card[data-world="atziluth"] .world-mark { color:#e06030; }
.world-card[data-world="briah"]    .world-mark { color:#4080c0; }
.world-card[data-world="yetzirah"] .world-mark { color:#9070c0; }
.world-card[data-world="assiah"]   .world-mark { color:#6a9060; }

.world-heb{
  font-family:var(--serif);
  font-size:1.4rem;
  color:var(--text-dim);
  margin-bottom:.5rem;
  direction:rtl;
  opacity:.6;
}

.world-card h3{
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:.2rem;
}

.world-subtitle{
  font-family:var(--serif);
  font-style:italic;
  font-size:.82rem;
  color:var(--text-dim);
  margin-bottom:1.2rem;
}

.world-attrs{
  list-style:none;
  margin-bottom:1.2rem;
}

.world-attrs li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:.3rem 0;
  border-bottom:1px solid rgba(212,175,55,.06);
  font-size:.8rem;
  gap:.5rem;
}

.world-attrs li:last-child{border-bottom:none}

.world-attrs .attr-label{
  font-family:var(--sans);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dim);
  flex-shrink:0;
}

.world-attrs .attr-value{
  color:var(--text);
  text-align:right;
}

.world-essence{
  font-size:.78rem;
  line-height:1.8;
  color:var(--text-dim);
  padding-top:.75rem;
  border-top:1px solid rgba(212,175,55,.08);
}

@media(max-width:900px){
  .worlds-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:480px){
  .worlds-grid{
    grid-template-columns:1fr;
  }
}

/* ── great work / magnum opus ── */
.great-work{
  max-width:1080px;
  margin:0 auto;
  padding:6rem 2rem 8rem;
  text-align:center;
}

.great-work h2{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1.5rem;
}

.opus-stages{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:3rem;
  border:1px solid rgba(212,175,55,.12);
  overflow:hidden;
}

.stage{
  padding:2.5rem 1.8rem;
  text-align:left;
  border-right:1px solid rgba(212,175,55,.08);
  border-top-width:2px;
  border-top-style:solid;
  transition:background .4s ease;
}

.stage:last-child{border-right:none}

.stage:hover{background:rgba(212,175,55,.03)}

.stage[data-phase="nigredo"]{border-top-color:#2d2d3d}
.stage[data-phase="albedo"]{border-top-color:#8888a0}
.stage[data-phase="citrinitas"]{border-top-color:var(--gold-dim)}
.stage[data-phase="rubedo"]{border-top-color:#8a2020}

.stage-marker{
  font-size:1.5rem;
  margin-bottom:1.2rem;
  line-height:1;
}

.stage[data-phase="nigredo"] .stage-marker{color:#4a4a60}
.stage[data-phase="albedo"] .stage-marker{color:#b0b0c8}
.stage[data-phase="citrinitas"] .stage-marker{color:var(--gold)}
.stage[data-phase="rubedo"] .stage-marker{color:#c03030}

.stage-label{
  font-family:var(--sans);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dim);
  display:block;
  margin-bottom:.6rem;
}

.stage h3{
  font-family:var(--serif);
  font-size:1.45rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:.3rem;
}

.stage-desc{
  font-family:var(--serif);
  font-style:italic;
  font-size:.88rem;
  color:var(--text-dim);
  margin-bottom:1rem;
}

.stage p:last-child{
  font-size:.88rem;
  color:var(--text-dim);
  line-height:1.8;
}

.stage-expand-btn{
  display:block;
  width:100%;
  margin-top:.8rem;
  padding:.35rem 0 0;
  background:none;
  border:none;
  border-top:1px solid rgba(212,175,55,.08);
  color:var(--gold-dim);
  font-size:.58rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:.45;
  transition:opacity .2s, color .2s;
  text-align:center;
}
.stage-expand-btn:hover{opacity:.85; color:var(--gold);}
.stage.expanded .stage-expand-btn{opacity:.7; color:var(--gold);}

.stage-deeper{
  display:none;
  font-family:var(--serif);
  font-size:.75rem;
  color:var(--text-dim);
  line-height:1.78;
  margin-top:.65rem;
  animation:stageDeepFade .3s ease;
}
.stage.expanded .stage-deeper{display:block;}

@keyframes stageDeepFade{
  from{opacity:0; transform:translateY(-4px);}
  to{opacity:1; transform:translateY(0);}
}

.stage-deeper p{
  margin-bottom:.65rem;
  font-size:.75rem;
}
.stage-deeper p:last-child{
  margin-bottom:0;
  font-size:.75rem;
}

.stage-ops{
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.04em;
  color:var(--text-dim);
  opacity:.75;
  border-bottom:1px solid rgba(212,175,55,.07);
  padding-bottom:.4rem;
  margin-bottom:.55rem;
}
.stage-ops-label{
  font-weight:600;
  color:var(--gold-dim);
  margin-right:.3em;
  letter-spacing:.05em;
}
.stage-symbol{border-left:2px solid rgba(212,175,55,.15); padding-left:.6rem; margin:.55rem 0;}
.stage-cross{opacity:.85;}

@media(max-width:900px){
  .opus-stages{
    grid-template-columns:repeat(2,1fr);
  }
  .stage:nth-child(2){border-right:none}
  .stage:nth-child(3){
    border-top:1px solid rgba(212,175,55,.08);
    border-top-width:1px;
  }
  .stage:nth-child(3),.stage:nth-child(4){
    border-top:1px solid rgba(212,175,55,.08);
  }
}

@media(max-width:560px){
  .opus-stages{grid-template-columns:1fr}
  .stage{
    border-right:none;
    border-top-width:2px;
    border-bottom:1px solid rgba(212,175,55,.06);
  }
  .stage:last-child{border-bottom:none}
}

/* ── planetary spheres ── */
.planets{
  max-width:1080px;
  margin:0 auto;
  padding:6rem 2rem 8rem;
  text-align:center;
}

.planets h2{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1.5rem;
}

.planets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1rem;
  margin-top:3rem;
}

.planet-card{
  background:var(--bg-card);
  border:1px solid rgba(212,175,55,.1);
  border-top-width:2px;
  border-top-style:solid;
  padding:1.8rem 1.2rem 1.6rem;
  text-align:center;
  transition:all .4s ease;
  position:relative;
}

.planet-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}

/* planet accent colors */
.planet-card[data-planet="saturn"]  { border-top-color:#6b5a8a; }
.planet-card[data-planet="jupiter"] { border-top-color:#3d6b8a; }
.planet-card[data-planet="mars"]    { border-top-color:#8a2d2d; }
.planet-card[data-planet="sun"]     { border-top-color:var(--gold); }
.planet-card[data-planet="venus"]   { border-top-color:#4a8a5a; }
.planet-card[data-planet="mercury"] { border-top-color:#7a8a4a; }
.planet-card[data-planet="moon"]    { border-top-color:#707888; }

.planet-card[data-planet="saturn"]:hover  { border-color:#6b5a8a; }
.planet-card[data-planet="jupiter"]:hover { border-color:#3d6b8a; }
.planet-card[data-planet="mars"]:hover    { border-color:#8a2d2d; }
.planet-card[data-planet="sun"]:hover     { border-color:var(--gold); }
.planet-card[data-planet="venus"]:hover   { border-color:#4a8a5a; }
.planet-card[data-planet="mercury"]:hover { border-color:#7a8a4a; }
.planet-card[data-planet="moon"]:hover    { border-color:#707888; }

.planet-glyph{
  font-size:2.2rem;
  margin-bottom:.8rem;
  line-height:1;
}

.planet-card[data-planet="saturn"]  .planet-glyph { color:#9b80c8; }
.planet-card[data-planet="jupiter"] .planet-glyph { color:#5a9acc; }
.planet-card[data-planet="mars"]    .planet-glyph { color:#c05050; }
.planet-card[data-planet="sun"]     .planet-glyph { color:var(--gold); }
.planet-card[data-planet="venus"]   .planet-glyph { color:#6aaa7a; }
.planet-card[data-planet="mercury"] .planet-glyph { color:#a8b050; }
.planet-card[data-planet="moon"]    .planet-glyph { color:#a0aab8; }

.planet-card h3{
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:1rem;
}

.planet-attrs{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

.planet-attrs li{
  display:flex;
  flex-direction:column;
  gap:.1rem;
}

.attr-label{
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-dim);
  opacity:.7;
}

.attr-value{
  font-family:var(--serif);
  font-size:.88rem;
  color:var(--text-dim);
}

@media(max-width:700px){
  .planets-grid{
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  }
}

@media(max-width:480px){
  .planets-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ── navigation ── */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.7rem 2rem;
  background:rgba(10,10,15,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,175,55,.1);
}

.nav-brand{
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:600;
  color:var(--gold);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.45rem;
  letter-spacing:.04em;
  transition:opacity .25s ease;
}

.nav-brand:hover{opacity:.8}

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.8rem;
}

.nav-links a{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  text-decoration:none;
  transition:color .25s ease;
}

.nav-links a:hover{color:var(--gold)}

.nav-links a.nav-active{
  color:var(--gold);
  position:relative;
}

.nav-links a.nav-active::after{
  content:'';
  position:absolute;
  bottom:-3px;
  left:0;right:0;
  height:1px;
  background:var(--gold-dim);
  opacity:.7;
}

.nav-toggle{display:none}

/* ensure scroll targets don't hide under nav */
section[id]{scroll-margin-top:56px}

@media(max-width:640px){
  .nav-toggle{
    display:flex;
    background:none;
    border:1px solid rgba(212,175,55,.2);
    color:var(--gold-dim);
    padding:.3rem .6rem;
    cursor:pointer;
    font-size:1.05rem;
    line-height:1;
  }

  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:rgba(10,10,15,.97);
    border-bottom:1px solid rgba(212,175,55,.1);
    padding:.5rem 0;
  }

  .nav-links.open{display:flex}

  .nav-links li{width:100%}

  .nav-links a{
    display:block;
    padding:.75rem 2rem;
    font-size:.75rem;
  }

  .nav-links a:hover{background:rgba(212,175,55,.04)}
}

/* ── footer ── */
footer{
  text-align:center;
  padding:3rem 2rem;
  border-top:1px solid rgba(212,175,55,.08);
  color:var(--text-dim);
  font-size:.8rem;
  letter-spacing:.06em;
}

footer span{color:var(--gold)}

/* ── scroll-reveal ── */
.scroll-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);
}

.scroll-reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* stagger siblings so groups cascade in */
.features .card.scroll-reveal:nth-child(2){transition-delay:.13s}
.features .card.scroll-reveal:nth-child(3){transition-delay:.26s}

.principles-list li.scroll-reveal:nth-child(2){transition-delay:.07s}
.principles-list li.scroll-reveal:nth-child(3){transition-delay:.14s}
.principles-list li.scroll-reveal:nth-child(4){transition-delay:.21s}
.principles-list li.scroll-reveal:nth-child(5){transition-delay:.28s}
.principles-list li.scroll-reveal:nth-child(6){transition-delay:.35s}
.principles-list li.scroll-reveal:nth-child(7){transition-delay:.42s}

.planets-grid .planet-card.scroll-reveal:nth-child(2){transition-delay:.07s}
.planets-grid .planet-card.scroll-reveal:nth-child(3){transition-delay:.14s}
.planets-grid .planet-card.scroll-reveal:nth-child(4){transition-delay:.21s}
.planets-grid .planet-card.scroll-reveal:nth-child(5){transition-delay:.28s}
.planets-grid .planet-card.scroll-reveal:nth-child(6){transition-delay:.35s}
.planets-grid .planet-card.scroll-reveal:nth-child(7){transition-delay:.42s}

.opus-stages .stage.scroll-reveal:nth-child(2){transition-delay:.11s}
.opus-stages .stage.scroll-reveal:nth-child(3){transition-delay:.22s}
.opus-stages .stage.scroll-reveal:nth-child(4){transition-delay:.33s}

/* ── three veils of negative existence ── */
.veils-block{
  max-width:900px;
  margin:2.5rem auto 0;
  border:1px dashed rgba(212,175,55,.18);
  padding:2.5rem 2rem 2rem;
  position:relative;
  background:rgba(212,175,55,.02);
}

.veils-title{
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-dim);
  opacity:.65;
  margin-bottom:1rem;
  text-align:center;
}

.veils-intro{
  font-size:.9rem;
  color:var(--text-dim);
  line-height:1.85;
  text-align:center;
  max-width:620px;
  margin:0 auto 2rem;
  opacity:.8;
}

.veils-triad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-bottom:1.5rem;
}

.veil-card{
  border:1px dashed rgba(212,175,55,.15);
  padding:1.6rem 1.2rem 1.4rem;
  text-align:center;
  background:rgba(10,10,15,.6);
  transition:background .4s ease, border-color .4s ease;
}

.veil-card:hover{
  background:rgba(212,175,55,.03);
  border-color:rgba(212,175,55,.28);
}

.veil-card--light{
  border-color:rgba(212,175,55,.28);
  background:rgba(212,175,55,.025);
}

.veil-heb{
  font-family:var(--serif);
  font-size:1.6rem;
  color:rgba(212,175,55,.4);
  margin-bottom:.5rem;
  line-height:1.3;
  direction:rtl;
  unicode-bidi:bidi-override;
}

.veil-card--light .veil-heb{
  color:rgba(212,175,55,.65);
}

.veil-name{
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
  color:rgba(212,175,55,.55);
  margin-bottom:.2rem;
}

.veil-card--light .veil-name{
  color:rgba(212,175,55,.8);
}

.veil-meaning{
  font-family:var(--serif);
  font-style:italic;
  font-size:.75rem;
  color:var(--text-dim);
  opacity:.6;
  margin-bottom:.9rem;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(212,175,55,.07);
}

.veil-desc{
  font-size:.78rem;
  color:var(--text-dim);
  opacity:.7;
  line-height:1.75;
  text-align:left;
}

.veils-note{
  font-family:var(--serif);
  font-style:italic;
  font-size:.82rem;
  color:var(--text-dim);
  opacity:.55;
  text-align:center;
  margin-top:0;
}

@media(max-width:680px){
  .veils-triad{
    grid-template-columns:1fr;
  }
}

/* ── sephiroth ── */
.sephiroth{
  max-width:1080px;
  margin:0 auto;
  padding:6rem 2rem 8rem;
  text-align:center;
}

.sephiroth h2{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1.5rem;
}

.sephiroth-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:1rem;
  margin-top:3rem;
}

.seph-card{
  background:var(--bg-card);
  border:1px solid rgba(212,175,55,.1);
  border-top-width:2px;
  border-top-style:solid;
  padding:1.6rem 1rem 1.4rem;
  text-align:center;
  transition:all .4s ease;
}

.seph-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}

.seph-num{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:600;
  margin-bottom:.5rem;
  line-height:1;
}

.seph-card h3{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.25rem;
}

.seph-meaning{
  font-family:var(--serif);
  font-style:italic;
  font-size:.8rem;
  color:var(--text-dim);
  margin-bottom:.6rem;
}

.seph-desc{
  font-size:.75rem;
  color:var(--text-dim);
  opacity:.8;
  line-height:1.55;
  margin-bottom:1rem;
  text-align:left;
}

.seph-attrs{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  text-align:left;
}

.seph-attrs li{
  display:flex;
  flex-direction:column;
  gap:.08rem;
}

.sa-label{
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-dim);
  opacity:.7;
}

.sa-val{
  font-family:var(--serif);
  font-size:.85rem;
  color:var(--text-dim);
}

/* sephirah accent colors — top border */
.seph-card[data-seph="kether"]    { border-top-color:#d0d0e8; }
.seph-card[data-seph="chokmah"]   { border-top-color:#7080a8; }
.seph-card[data-seph="binah"]     { border-top-color:#4a3060; }
.seph-card[data-seph="chesed"]    { border-top-color:#2858a0; }
.seph-card[data-seph="geburah"]   { border-top-color:#8a2020; }
.seph-card[data-seph="tiphareth"] { border-top-color:var(--gold); }
.seph-card[data-seph="netzach"]   { border-top-color:#2a6a42; }
.seph-card[data-seph="hod"]       { border-top-color:#c06020; }
.seph-card[data-seph="yesod"]     { border-top-color:#5828a0; }
.seph-card[data-seph="malkuth"]   { border-top-color:#6a7030; }

/* sephirah hover border color */
.seph-card[data-seph="kether"]:hover    { border-color:#d0d0e8; }
.seph-card[data-seph="chokmah"]:hover   { border-color:#7080a8; }
.seph-card[data-seph="binah"]:hover     { border-color:#4a3060; }
.seph-card[data-seph="chesed"]:hover    { border-color:#2858a0; }
.seph-card[data-seph="geburah"]:hover   { border-color:#8a2020; }
.seph-card[data-seph="tiphareth"]:hover { border-color:var(--gold); }
.seph-card[data-seph="netzach"]:hover   { border-color:#2a6a42; }
.seph-card[data-seph="hod"]:hover       { border-color:#c06020; }
.seph-card[data-seph="yesod"]:hover     { border-color:#5828a0; }
.seph-card[data-seph="malkuth"]:hover   { border-color:#6a7030; }

/* sephirah numeral colors */
.seph-card[data-seph="kether"]    .seph-num { color:#c8c8e8; }
.seph-card[data-seph="chokmah"]   .seph-num { color:#7080a8; }
.seph-card[data-seph="binah"]     .seph-num { color:#8070b0; }
.seph-card[data-seph="chesed"]    .seph-num { color:#4878d0; }
.seph-card[data-seph="geburah"]   .seph-num { color:#c04040; }
.seph-card[data-seph="tiphareth"] .seph-num { color:var(--gold); }
.seph-card[data-seph="netzach"]   .seph-num { color:#4a9a62; }
.seph-card[data-seph="hod"]       .seph-num { color:#d88040; }
.seph-card[data-seph="yesod"]     .seph-num { color:#8050d0; }
.seph-card[data-seph="malkuth"]   .seph-num { color:#909050; }

/* ── sephirah pillar labels (via CSS content on ::before) ── */
.seph-card{position:relative}

.seph-card[data-pillar="severity"]::before{
  content:'Pillar of Severity';
}
.seph-card[data-pillar="mercy"]::before{
  content:'Pillar of Mercy';
}
.seph-card[data-pillar="middle"]::before{
  content:'Pillar of Equilibrium';
}

.seph-card[data-pillar]::before{
  display:block;
  font-family:var(--sans);
  font-size:.5rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:.6rem;
  opacity:.65;
}

.seph-card[data-pillar="severity"]::before{color:#c04040}
.seph-card[data-pillar="mercy"]::before{color:#4878d0}
.seph-card[data-pillar="middle"]::before{color:var(--gold-dim)}

/* scroll-reveal stagger for sephiroth grid */
.sephiroth-grid .seph-card.scroll-reveal:nth-child(2) {transition-delay:.05s}
.sephiroth-grid .seph-card.scroll-reveal:nth-child(3) {transition-delay:.10s}
.sephiroth-grid .seph-card.scroll-reveal:nth-child(4) {transition-delay:.15s}
.sephiroth-grid .seph-card.scroll-reveal:nth-child(5) {transition-delay:.20s}
.sephiroth-grid .seph-card.scroll-reveal:nth-child(6) {transition-delay:.25s}
.sephiroth-grid .seph-card.scroll-reveal:nth-child(7) {transition-delay:.30s}
.sephiroth-grid .seph-card.scroll-reveal:nth-child(8) {transition-delay:.35s}
.sephiroth-grid .seph-card.scroll-reveal:nth-child(9) {transition-delay:.40s}
.sephiroth-grid .seph-card.scroll-reveal:nth-child(10){transition-delay:.45s}

@media(max-width:480px){
  .sephiroth-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── 22 paths of the tree ── */
.paths{
  max-width:1080px;
  margin:0 auto;
  padding:6rem 2rem 8rem;
  text-align:center;
}

.paths h2{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1.5rem;
}

.paths-legend{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-top:-.5rem;
  margin-bottom:.5rem;
  flex-wrap:wrap;
}

.legend-item{
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.5rem;
}

.legend-item::before{
  content:'';
  width:20px;
  height:2px;
  display:inline-block;
  flex-shrink:0;
}

.legend-item.mother        { color:#e8622a; }
.legend-item.mother::before { background:#e8622a; }
.legend-item.double        { color:var(--gold-dim); }
.legend-item.double::before { background:var(--gold-dim); }
.legend-item.simple        { color:#7aacce; }
.legend-item.simple::before { background:#5a80a8; }

/* ── path filter ── */
.paths-filter{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin-top:1.5rem;
  margin-bottom:.5rem;
  flex-wrap:wrap;
}

.pf-btn{
  background:none;
  border:1px solid rgba(212,175,55,.2);
  color:var(--text-dim);
  padding:.38rem 1rem;
  font-family:var(--sans);
  font-size:.67rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .25s ease;
  display:inline-flex;
  align-items:center;
  gap:.38rem;
}

.pf-btn:hover{
  border-color:rgba(212,175,55,.4);
  color:var(--text);
}

.pf-btn.pf-active{
  background:rgba(212,175,55,.08);
  border-color:var(--gold-dim);
  color:var(--gold);
}

.pf-count{
  font-family:var(--serif);
  font-size:.78rem;
  font-weight:400;
  opacity:.7;
}

.path-card.pf-hidden{
  display:none;
}

.paths-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:1rem;
  margin-top:2rem;
}

.path-card{
  background:var(--bg-card);
  border:1px solid rgba(212,175,55,.1);
  border-top-width:2px;
  border-top-style:solid;
  border-top-color:rgba(212,175,55,.25);
  padding:1.3rem .9rem 1.1rem;
  text-align:center;
  transition:all .4s ease;
}

.path-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}

.path-card[data-type="mother"] { border-top-color:#c0521a; }
.path-card[data-type="double"] { border-top-color:var(--gold-dim); }
.path-card[data-type="simple"] { border-top-color:#3d6080; }

.path-card[data-type="mother"]:hover { border-color:#c0521a; }
.path-card[data-type="double"]:hover { border-color:var(--gold-dim); }
.path-card[data-type="simple"]:hover { border-color:#3d6080; }

.path-badge{
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  opacity:.55;
  margin-bottom:.55rem;
}

.path-heb{
  font-family:var(--serif);
  font-size:1.9rem;
  line-height:1;
  margin-bottom:.2rem;
}

.path-card[data-type="mother"] .path-heb { color:#e8622a; }
.path-card[data-type="double"] .path-heb { color:var(--gold); }
.path-card[data-type="simple"] .path-heb { color:#7aacce; }

.path-letter-name{
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dim);
  opacity:.5;
  margin-bottom:.75rem;
}

.path-letter-meaning{
  font-family:var(--serif);
  font-style:italic;
  font-size:.64rem;
  color:var(--text-dim);
  opacity:.6;
  margin-bottom:.65rem;
  letter-spacing:.02em;
}

.path-tarot-num{
  font-family:var(--serif);
  font-size:.78rem;
  font-weight:600;
  color:var(--gold-dim);
  display:block;
  margin-bottom:.12rem;
}

.path-tarot-name{
  font-family:var(--serif);
  font-size:.93rem;
  font-weight:600;
  color:var(--text);
  display:block;
  margin-bottom:.55rem;
  line-height:1.3;
}

.path-attrib{
  font-size:.7rem;
  color:var(--text-dim);
  letter-spacing:.06em;
}
.path-attrib .elem-mark{
  margin-right:.3em;
  font-size:.65rem;
}

.path-connects{
  font-family:var(--serif);
  font-style:italic;
  font-size:.65rem;
  color:var(--gold-dim);
  opacity:.65;
  margin-top:.4rem;
  letter-spacing:.03em;
}

.path-essence{
  font-family:var(--serif);
  font-style:italic;
  font-size:.72rem;
  color:var(--text-dim);
  opacity:.65;
  line-height:1.65;
  margin-top:.55rem;
  padding-top:.5rem;
  border-top:1px solid rgba(212,175,55,.07);
  text-align:left;
}

.path-expand-btn{
  display:block;
  width:100%;
  margin-top:.6rem;
  padding:.3rem 0 0;
  background:none;
  border:none;
  border-top:1px solid rgba(212,175,55,.08);
  color:var(--gold-dim);
  font-size:.58rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:.45;
  transition:opacity .2s, color .2s;
  text-align:center;
}
.path-expand-btn:hover{opacity:.85; color:var(--gold);}
.path-card.expanded .path-expand-btn{opacity:.7; color:var(--gold);}

.path-deeper{
  display:none;
  font-family:var(--serif);
  font-size:.7rem;
  color:var(--text-dim);
  line-height:1.78;
  margin-top:.55rem;
  padding-top:.5rem;
  border-top:1px solid rgba(212,175,55,.07);
  text-align:left;
  animation:pathDeepFade .3s ease;
}
.path-card.expanded .path-deeper{display:block;}

@keyframes pathDeepFade{
  from{opacity:0; transform:translateY(-4px);}
  to{opacity:1; transform:translateY(0);}
}

/* stagger for 22 path cards */
.paths-grid .path-card.scroll-reveal:nth-child(2)  {transition-delay:.04s}
.paths-grid .path-card.scroll-reveal:nth-child(3)  {transition-delay:.08s}
.paths-grid .path-card.scroll-reveal:nth-child(4)  {transition-delay:.12s}
.paths-grid .path-card.scroll-reveal:nth-child(5)  {transition-delay:.16s}
.paths-grid .path-card.scroll-reveal:nth-child(6)  {transition-delay:.20s}
.paths-grid .path-card.scroll-reveal:nth-child(7)  {transition-delay:.24s}
.paths-grid .path-card.scroll-reveal:nth-child(8)  {transition-delay:.28s}
.paths-grid .path-card.scroll-reveal:nth-child(9)  {transition-delay:.32s}
.paths-grid .path-card.scroll-reveal:nth-child(10) {transition-delay:.36s}
.paths-grid .path-card.scroll-reveal:nth-child(11) {transition-delay:.40s}
.paths-grid .path-card.scroll-reveal:nth-child(12) {transition-delay:.44s}
.paths-grid .path-card.scroll-reveal:nth-child(13) {transition-delay:.48s}
.paths-grid .path-card.scroll-reveal:nth-child(14) {transition-delay:.52s}
.paths-grid .path-card.scroll-reveal:nth-child(15) {transition-delay:.56s}
.paths-grid .path-card.scroll-reveal:nth-child(16) {transition-delay:.60s}
.paths-grid .path-card.scroll-reveal:nth-child(17) {transition-delay:.64s}
.paths-grid .path-card.scroll-reveal:nth-child(18) {transition-delay:.68s}
.paths-grid .path-card.scroll-reveal:nth-child(19) {transition-delay:.72s}
.paths-grid .path-card.scroll-reveal:nth-child(20) {transition-delay:.76s}
.paths-grid .path-card.scroll-reveal:nth-child(21) {transition-delay:.80s}
.paths-grid .path-card.scroll-reveal:nth-child(22) {transition-delay:.84s}

@media(max-width:480px){
  .paths-grid{grid-template-columns:repeat(2,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .scroll-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ── scroll progress bar ── */
#scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:0%;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold));
  z-index:200;
  transition:width .1s linear;
  pointer-events:none;
}

/* ── back to top ── */
#back-to-top{
  position:fixed;
  bottom:2rem;
  right:2rem;
  width:2.6rem;
  height:2.6rem;
  background:rgba(10,10,15,.88);
  border:1px solid rgba(212,175,55,.3);
  color:var(--gold-dim);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:opacity .3s ease,transform .3s ease,background .25s ease,border-color .25s ease,color .25s ease;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  z-index:90;
}

#back-to-top.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

#back-to-top:hover{
  background:rgba(212,175,55,.12);
  border-color:var(--gold);
  color:var(--gold);
}

/* ── tree of life diagram ── */
.tree-section{
  max-width:560px;
  margin:0 auto;
  padding:6rem 2rem 8rem;
  text-align:center;
}

.tree-section h2{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1.5rem;
}

.tree-diagram{
  margin:3rem auto 0;
  width:100%;
  max-width:340px;
}

.tree-diagram svg{
  width:100%;
  height:auto;
  overflow:visible;
}

@media(prefers-reduced-motion:reduce){
  #back-to-top{transition:opacity .3s ease}
  #scroll-progress{transition:none}
}

/* ── tree path legend ── */
.tree-path-legend{
  display:flex;
  justify-content:center;
  gap:1.6rem;
  margin-top:1.4rem;
  flex-wrap:wrap;
}

.tpl-item{
  font-size:.58rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.45rem;
}

.tpl-item::before{
  content:'';
  width:18px;
  height:2px;
  display:inline-block;
  flex-shrink:0;
}

.tpl-mother        { color:rgba(232,98,42,.8); }
.tpl-mother::before { background:rgba(232,98,42,.7); }
.tpl-double        { color:rgba(212,175,55,.75); }
.tpl-double::before { background:rgba(212,175,55,.65); }
.tpl-simple        { color:rgba(122,172,206,.7); }
.tpl-simple::before { background:rgba(122,172,206,.6); }

/* ── tree hint ── */
.tree-hint{
  margin-top:1.5rem;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dim);
  opacity:.5;
}

/* ── tree tooltip ── */
#tree-tooltip{
  position:fixed;
  z-index:300;
  background:var(--bg-card);
  border:1px solid rgba(212,175,55,.35);
  padding:.85rem 1rem;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
  text-align:left;
  width:210px;
  box-shadow:0 8px 32px rgba(0,0,0,.55);
}

#tree-tooltip.visible{opacity:1}

.tt-num{
  font-family:var(--serif);
  font-size:.72rem;
  color:var(--gold-dim);
  display:block;
  opacity:.7;
}

.tt-name{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--gold);
  display:block;
  margin-bottom:.05rem;
  line-height:1.2;
}

.tt-meaning{
  font-family:var(--serif);
  font-style:italic;
  font-size:.8rem;
  color:var(--text-dim);
  display:block;
  margin-bottom:.55rem;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(212,175,55,.1);
}

.tt-attrs{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.28rem;
}

.tt-attrs li{
  display:flex;
  flex-direction:column;
  gap:.05rem;
}

.tt-label{
  font-size:.52rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-dim);
  opacity:.65;
}

.tt-val{
  font-family:var(--serif);
  font-size:.83rem;
  color:var(--text-dim);
}

/* ── path cross-reference links in Sephirah cards ── */
.sa-paths{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  align-items:center;
}

.seph-path-link{
  display:inline-block;
  padding:.1rem .4rem;
  border:1px solid var(--gold-dim);
  border-radius:3px;
  font-family:var(--mono, monospace);
  font-size:.72rem;
  color:var(--gold-dim);
  text-decoration:none;
  opacity:.8;
  transition:opacity .15s, color .15s, border-color .15s, background .15s;
}

.seph-path-link:hover{
  opacity:1;
  color:var(--gold);
  border-color:var(--gold);
  background:rgba(212,175,55,.08);
}

/* ── color swatches — Sephirah cards & Tree tooltips ── */
.sa-color{
  display:flex;
  align-items:center;
  gap:.4rem;
}

.color-swatch{
  display:inline-block;
  width:.75rem;
  height:.75rem;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  flex-shrink:0;
}

/* Malkuth: quartered citrine/olive/russet/black */
.color-swatch--malkuth{
  display:inline-block;
  width:.75rem;
  height:.75rem;
  border-radius:50%;
  flex-shrink:0;
  background:conic-gradient(
    #c8b400 0deg 90deg,
    #556b2f 90deg 180deg,
    #8b4513 180deg 270deg,
    #1a1a1a 270deg 360deg
  );
  border:1px solid rgba(255,255,255,.1);
}

.tt-color{
  display:flex;
  align-items:center;
  gap:.35rem;
}

.tt-swatch{
  display:inline-block;
  width:.65rem;
  height:.65rem;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}

.tt-swatch--malkuth{
  display:inline-block;
  width:.65rem;
  height:.65rem;
  border-radius:50%;
  flex-shrink:0;
  background:conic-gradient(
    #c8b400 0deg 90deg,
    #556b2f 90deg 180deg,
    #8b4513 180deg 270deg,
    #1a1a1a 270deg 360deg
  );
  border:1px solid rgba(255,255,255,.08);
}

/* ─── Tarot Section ──────────────────────────────────────────── */

.tarot{
  padding:var(--section-pad) var(--side-pad);
  max-width:var(--content-width);
  margin:0 auto;
}

.tarot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;
  margin-top:2rem;
}

.tarot-card{
  background:var(--bg-card);
  border:1px solid rgba(212,175,55,.1);
  border-top:2px solid rgba(212,175,55,.3);
  padding:1.2rem .9rem 1rem;
  text-align:center;
  transition:all .4s ease;
  position:relative;
}

.tarot-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  border-top-color:var(--gold-dim);
}

.tarot-trump{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:700;
  color:var(--gold);
  line-height:1;
  margin-bottom:.3rem;
  letter-spacing:.04em;
}

.tarot-name{
  font-family:var(--serif);
  font-size:.95rem;
  font-weight:600;
  color:var(--text);
  margin:0 0 .55rem;
  line-height:1.25;
}

.tarot-path-badge{
  display:inline-block;
  font-size:.55rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-dim);
  border:1px solid rgba(212,175,55,.25);
  padding:.15rem .45rem;
  border-radius:2px;
  margin-bottom:.6rem;
  text-decoration:none;
  opacity:.7;
  transition:opacity .2s, border-color .2s;
}

.tarot-path-badge:hover{
  opacity:1;
  border-color:var(--gold-dim);
}

.tarot-meta{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.4rem;
  margin-bottom:.5rem;
}

.tarot-heb{
  font-family:var(--serif);
  font-size:1.5rem;
  line-height:1;
  color:var(--gold);
}

.tarot-heb-info{
  font-family:var(--serif);
  font-size:.6rem;
  color:var(--text-dim);
  opacity:.5;
  letter-spacing:.03em;
}

.tarot-attrib{
  font-size:.7rem;
  color:var(--text-dim);
  letter-spacing:.06em;
  margin-bottom:.35rem;
}

.tarot-attrib .elem-mark{
  margin-right:.3em;
  font-size:.65rem;
}

.tarot-seph{
  font-family:var(--serif);
  font-style:italic;
  font-size:.63rem;
  color:var(--gold-dim);
  opacity:.6;
  letter-spacing:.03em;
  margin-bottom:.55rem;
}

.tarot-meaning{
  font-family:var(--serif);
  font-style:italic;
  font-size:.7rem;
  color:var(--text-dim);
  opacity:.65;
  line-height:1.65;
  margin:0 0 0;
  padding-top:.45rem;
  border-top:1px solid rgba(212,175,55,.07);
  text-align:left;
}

.tarot-expand-btn{
  display:block;
  width:100%;
  margin-top:.6rem;
  padding:.3rem 0 0;
  background:none;
  border:none;
  border-top:1px solid rgba(212,175,55,.08);
  color:var(--gold-dim);
  font-size:.58rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:.45;
  transition:opacity .2s, color .2s;
  text-align:center;
}

.tarot-expand-btn:hover{opacity:.85; color:var(--gold);}
.tarot-card.expanded .tarot-expand-btn{opacity:.7; color:var(--gold);}

.tarot-deeper{
  display:none;
  font-family:var(--serif);
  font-size:.7rem;
  color:var(--text-dim);
  line-height:1.78;
  margin-top:.55rem;
  padding-top:.5rem;
  border-top:1px solid rgba(212,175,55,.07);
  text-align:left;
  animation:pathDeepFade .3s ease;
}

.tarot-card.expanded .tarot-deeper{display:block;}

/* stagger for 22 tarot cards */
.tarot-grid .tarot-card.scroll-reveal:nth-child(2)  {transition-delay:.04s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(3)  {transition-delay:.08s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(4)  {transition-delay:.12s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(5)  {transition-delay:.16s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(6)  {transition-delay:.20s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(7)  {transition-delay:.24s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(8)  {transition-delay:.28s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(9)  {transition-delay:.32s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(10) {transition-delay:.36s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(11) {transition-delay:.40s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(12) {transition-delay:.44s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(13) {transition-delay:.48s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(14) {transition-delay:.52s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(15) {transition-delay:.56s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(16) {transition-delay:.60s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(17) {transition-delay:.64s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(18) {transition-delay:.68s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(19) {transition-delay:.72s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(20) {transition-delay:.76s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(21) {transition-delay:.80s}
.tarot-grid .tarot-card.scroll-reveal:nth-child(22) {transition-delay:.84s}

@media(max-width:600px){
  .tarot-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Entrance Hall Navigation Styles ── */

/* Planet cards as anchor elements */
a.planet-card {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

/* Sephirah card title links */
.card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color .25s;
}
.card-title-link:hover {
  color: var(--gold);
}

/* Path badge as link */
a.path-badge {
  text-decoration: none;
  display: block;
  color: var(--text-dim);
  transition: color .2s, opacity .2s;
}
a.path-badge:hover {
  color: var(--gold);
  opacity: 1;
}

/* Section "Browse all" explore CTA */
.section-explore-cta {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(212,175,55,.25);
  padding-bottom: 2px;
  margin-bottom: 1.8rem;
  transition: color .2s, border-color .2s;
}
.section-explore-cta:hover {
  color: var(--gold);
  border-color: var(--gold);
}