:root{
    --black:#0E0914;
    --black-soft:#150C1E;
    --blood:#5E2B8A;
    --blood-bright:#8E44C4;
    --blood-deep:#3A1458;
    --ember:#FF8C2A;
    --bone:#F0E6D0;
    --bone-dim:#B5A6C6;
    --gold:#C9943A;
    --gold-deep:#7A5A1E;
    --gold-lt:#E8C87A;
    --red-glow:#A85FD9;
  }

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

  html{ scroll-behavior: smooth; }

  html,body{
    background: var(--black);
    color: var(--bone);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    overflow-x: hidden;
  }

  /* Grain overlay */
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.12 0 0 0 0 0.55 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.18;
    mix-blend-mode: overlay;
  }

  /* Floating embers */
  .embers{ position: fixed; inset:0; pointer-events:none; z-index: 4; }
  .ember{
    position: absolute;
    width: 2px; height: 2px;
    background: var(--ember);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--ember), 0 0 12px var(--blood-bright);
    animation: rise linear infinite;
    opacity: 0;
  }
  @keyframes rise{
    0%{ transform: translateY(100vh) translateX(0) scale(1); opacity: 0; }
    8%{ opacity: 0.9; }
    100%{ transform: translateY(-10vh) translateX(60px) scale(0.3); opacity: 0; }
  }

  /* ============== NAV ============== */
  nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 1.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(12px);
    background: linear-gradient(to bottom, rgba(14,9,20,0.85), rgba(14,9,20,0.2));
    border-bottom: 1px solid rgba(201,148,58, 0.18);
  }
  .crest{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bone);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-shadow: 0 0 20px rgba(142,68,196, 0.4);
    text-decoration: none;
  }
  .crest svg{ width: 30px; height: 30px; color: var(--blood-bright); filter: drop-shadow(0 0 6px var(--blood-bright)); }

  nav ul{ display: flex; list-style: none; gap: 2.4rem; }
  nav ul a{
    color: var(--bone-dim);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    transition: all 0.4s;
    position: relative;
  }
  nav ul a:hover{
    color: var(--blood-bright);
    text-shadow: 0 0 14px var(--blood-bright);
  }
  nav ul a::before{
    content: "✦";
    margin-right: 0.6rem;
    opacity: 0;
    color: var(--blood-bright);
    transition: opacity 0.4s;
  }
  nav ul a:hover::before{ opacity: 1; }

  /* Mobile nav toggle */
  .nav-toggle{
    display: none;
    background: none;
    border: 1px solid var(--blood);
    color: var(--bone);
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    font-size: 1.2rem;
  }

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

  /* Background video */
  .hero-video{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.42; /* lower opacity per request */
    /* footage was graded crimson; re-grade it amethyst */
    filter: hue-rotate(262deg) saturate(0.92);
  }

  /* Tint + vignette over video for legibility */
  .hero::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(ellipse at center, rgba(14,9,20,0.35) 0%, rgba(14,9,20,0.85) 90%),
      linear-gradient(180deg, rgba(14,9,20,0.6) 0%, rgba(14,9,20,0.4) 50%, rgba(14,9,20,0.9) 100%);
  }
  /* Crimson wash */
  .hero::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(ellipse at 50% 40%, rgba(142,68,196,0.18) 0%, transparent 60%);
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .hero-content{
    position: relative;
    z-index: 10;
    max-width: 900px;
  }

  .eyebrow{
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.7em;
    color: var(--blood-bright);
    margin-bottom: 1.8rem;
    text-transform: uppercase;
    text-shadow: 0 0 14px var(--blood-bright);
    display: flex;
    align-items: center;
    gap: 1.2rem;
    justify-content: center;
  }
  .eyebrow::before, .eyebrow::after{
    content: "";
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--blood-bright));
  }
  .eyebrow::after{ background: linear-gradient(90deg, var(--blood-bright), transparent); }

  h1.title{
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 7.5vw, 6.5rem);
    line-height: 1.05;
    letter-spacing: 0.08em;
    color: var(--bone);
    text-shadow:
      0 0 40px rgba(142,68,196,0.6),
      0 0 90px rgba(94,43,138,0.4),
      0 4px 0 rgba(0,0,0,0.7);
    margin-bottom: 1rem;
    text-transform: uppercase;
    filter: drop-shadow(0 6px 0 rgba(58,20,88,0.6));
  }

  .subtitle{
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
    color: var(--gold);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    text-shadow: 0 0 18px rgba(201,148,58,0.5);
  }

  .lead{
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--bone);
    max-width: 40rem;
    margin: 0 auto 3rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  }

  .cta-row{
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .btn-primary{
    padding: 1.1rem 2.4rem;
    background: linear-gradient(180deg, var(--blood-deep), var(--blood));
    border: 1px solid var(--blood-bright);
    color: var(--bone);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.4em;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.4s;
    box-shadow: 0 0 30px rgba(142,68,196,0.4), inset 0 0 20px rgba(0,0,0,0.5);
    cursor: pointer;
  }
  .btn-primary:hover{
    background: linear-gradient(180deg, var(--blood), var(--blood-bright));
    box-shadow: 0 0 50px rgba(142,68,196,0.7), inset 0 0 20px rgba(0,0,0,0.4);
    letter-spacing: 0.5em;
  }

  .btn-ghost{
    padding: 1.1rem 2.4rem;
    color: var(--bone);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    border: 1px solid var(--gold-deep);
    transition: all 0.4s;
    background: rgba(14,9,20,0.4);
    backdrop-filter: blur(4px);
  }
  .btn-ghost:hover{
    color: var(--gold);
    border-color: var(--gold);
    text-shadow: 0 0 10px var(--gold);
  }

  /* Scroll indicator */
  .scroll-cue{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.5em;
    color: var(--bone-dim);
    text-transform: uppercase;
  }
  .scroll-cue::after{
    content: "";
    display: block;
    width: 1px; height: 40px;
    background: var(--gold-deep);
    margin: 0.8rem auto 0;
    animation: extend 2s ease-in-out infinite;
  }
  @keyframes extend{
    0%,100%{ transform: scaleY(0.3); transform-origin: top; }
    50%{ transform: scaleY(1); }
  }

  /* ============== DIVIDER ============== */
  .divider{
    display: flex; align-items: center; justify-content: center;
    gap: 1.5rem; padding: 5rem 0;
    color: var(--blood-bright);
    position: relative;
    z-index: 5;
  }
  .divider .line{
    width: 240px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--blood), transparent);
  }
  .divider svg{ width: 40px; height: 40px; filter: drop-shadow(0 0 10px var(--blood-bright)); }

  /* ============== SECTIONS ============== */
  section.content{
    padding: 4rem 2rem;
    position: relative;
    z-index: 5;
  }
  .container{
    max-width: 1200px;
    margin: 0 auto;
  }

  .section-head{
    text-align: center;
    margin-bottom: 5rem;
  }
  .section-head .small{
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.6em;
    color: var(--blood-bright);
    text-transform: uppercase;
    display: block;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 12px rgba(142,68,196,0.5);
  }
  .section-head h2{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--bone);
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 24px rgba(142,68,196,0.4);
  }
  .section-head p{
    margin-top: 1.5rem;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--bone-dim);
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
  }

  /* ============== ABOUT ============== */
  .about-grid{
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5rem;
    align-items: center;
  }
  .about-portrait{
    position: relative;
    aspect-ratio: 3/4;
    background:
      linear-gradient(180deg, rgba(142,68,196,0.15) 0%, rgba(14,9,20,0.6) 100%),
      radial-gradient(ellipse at 50% 30%, #3A1458 0%, #190D24 70%);
    border: 1px solid rgba(201,148,58, 0.3);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7), inset 0 0 80px rgba(142,68,196,0.1);
  }
  .about-portrait::before{
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(201,148,58, 0.15);
    pointer-events: none;
    z-index: 3;
  }
  .about-portrait svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .about-text h3{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 2rem;
    color: var(--bone);
    margin-bottom: 1.5rem;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(142,68,196,0.3);
  }
  .about-text h3 em{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--blood-bright);
    display: block;
    font-size: 0.7em;
    margin-top: 0.4rem;
  }
  .about-text p{
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--bone);
    margin-bottom: 1.4rem;
    opacity: 0.85;
  }
  .about-text p:first-of-type::first-letter{
    font-family: 'Cinzel Decorative', serif;
    font-size: 4.5rem;
    float: left;
    line-height: 0.9;
    margin: 0.2rem 0.7rem 0 0;
    color: var(--blood-bright);
    text-shadow: 0 0 14px rgba(142,68,196,0.5);
  }
  .about-sign{
    margin-top: 2.5rem;
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.2rem;
    color: var(--gold);
    letter-spacing: 0.08em;
  }
  .about-role{
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    color: var(--bone-dim);
    margin-top: 0.4rem;
    text-transform: uppercase;
  }

  /* ============== COURSES ============== */
  .course-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
  .course-card{
    position: relative;
    padding: 3rem 2.5rem;
    border: 1px solid rgba(201,148,58, 0.25);
    background: linear-gradient(180deg, rgba(36,16,52,0.4), rgba(14,9,20,0.7));
    transition: all 0.6s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
  }
  .course-card::before{
    content: "";
    position: absolute;
    top: 12px; left: 12px; right: 12px; bottom: 12px;
    border: 1px solid rgba(201,148,58, 0.1);
    pointer-events: none;
    transition: all 0.5s;
  }
  .course-card:hover{
    transform: translateY(-8px);
    border-color: var(--blood-bright);
    background: linear-gradient(180deg, rgba(107, 13, 16, 0.3), rgba(14,9,20,0.8));
    box-shadow: 0 30px 60px -20px rgba(142,68,196,0.4);
  }
  .course-card:hover::before{
    border-color: rgba(201,148,58, 0.4);
    top: 18px; left: 18px; right: 18px; bottom: 18px;
  }
  .course-num{
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.6rem;
    color: var(--blood-bright);
    text-shadow: 0 0 12px rgba(142,68,196,0.5);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
  }
  .course-icon{
    width: 70px; height: 70px;
    color: var(--gold);
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(201,148,58,0.4));
  }
  .course-card h3{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--bone);
    margin-bottom: 1rem;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .course-card .tag{
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
  }
  .course-card p{
    color: var(--bone);
    line-height: 1.7;
    font-size: 1rem;
    font-style: italic;
    opacity: 0.8;
    margin-bottom: 2rem;
  }
  .course-meta{
    padding-top: 1.5rem;
    border-top: 1px solid rgba(201,148,58, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .course-meta .price{
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.6rem;
    color: var(--blood-bright);
    letter-spacing: 0.04em;
  }
  .course-meta a{
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--bone-dim);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s;
  }
  .course-meta a:hover{ color: var(--blood-bright); }

  /* ============== RETREATS ============== */
  .retreats{
    background:
      linear-gradient(180deg, rgba(58,20,88,0.2) 0%, transparent 30%, transparent 70%, rgba(58,20,88,0.2) 100%);
  }
  .retreat-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 5rem;
    align-items: center;
  }
  .retreat-row:nth-child(even){
    direction: rtl;
  }
  .retreat-row:nth-child(even) > *{ direction: ltr; }

  .retreat-visual{
    aspect-ratio: 4/3;
    position: relative;
    background:
      radial-gradient(ellipse at 50% 100%, rgba(142,68,196,0.25), transparent 60%),
      linear-gradient(180deg, #1a0608 0%, #0E0914 100%);
    border: 1px solid rgba(201,148,58, 0.2);
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0,0,0,0.7);
  }
  .retreat-visual svg{ width: 100%; height: 100%; display: block; }

  .retreat-info .tag{
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.5em;
    color: var(--blood-bright);
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(142,68,196,0.4);
  }
  .retreat-info h3{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--bone);
    margin-bottom: 0.5rem;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .retreat-info .place{
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    color: var(--gold);
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
  }
  .retreat-info p{
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--bone);
    opacity: 0.85;
    margin-bottom: 1.8rem;
    font-style: italic;
  }
  .retreat-info .details{
    list-style: none;
    margin-bottom: 2rem;
  }
  .retreat-info .details li{
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(201,148,58, 0.12);
    display: flex;
    justify-content: space-between;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    color: var(--bone-dim);
    text-transform: uppercase;
  }
  .retreat-info .details li span{ color: var(--bone); }

  /* ============== GALLERY ============== */
  .gallery{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .gallery-item{
    aspect-ratio: 3/4;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(201,148,58, 0.15);
    transition: all 0.5s;
    background: radial-gradient(ellipse at center, #251130 0%, #0E0914 100%);
  }
  .gallery-item.wide{ grid-column: span 2; aspect-ratio: 8/5; }
  .gallery-item:hover{
    transform: scale(1.02);
    border-color: var(--blood-bright);
    z-index: 2;
    box-shadow: 0 20px 50px rgba(142,68,196,0.3);
  }
  .gallery-item svg{ width: 100%; height: 100%; display: block; }
  .gallery-item .overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(14,9,20,0.95) 100%);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.4s;
  }
  .gallery-item:hover .overlay{ opacity: 1; }
  .gallery-item .overlay span{
    font-family: 'Cinzel Decorative', serif;
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 0.2em;
  }
  .gallery-item .play-icon{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 50px; height: 50px;
    border: 1px solid var(--bone);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14,9,20,0.5);
    backdrop-filter: blur(4px);
    z-index: 3;
  }
  .gallery-item .play-icon::before{
    content: "";
    width: 0; height: 0;
    border-left: 12px solid var(--bone);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 3px;
  }

  /* ============== INVOCATION ============== */
  .invocation{
    padding: 8rem 2rem;
    text-align: center;
    position: relative;
    z-index: 5;
  }
  .invocation blockquote{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.7rem, 2.8vw, 2.6rem);
    line-height: 1.55;
    color: var(--bone);
    max-width: 50rem;
    margin: 0 auto;
  }
  .invocation blockquote em{
    color: var(--blood-bright);
    text-shadow: 0 0 14px rgba(142,68,196,0.6);
  }
  .invocation blockquote::before,
  .invocation blockquote::after{
    content: "☩";
    display: block;
    font-size: 2rem;
    color: var(--blood-bright);
    margin: 2rem 0;
    text-shadow: 0 0 18px var(--blood-bright);
  }
  .invocation cite{
    display: block;
    margin-top: 2rem;
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-size: 0.85rem;
    letter-spacing: 0.5em;
    color: var(--blood-bright);
  }

  /* ============== CONTACT ============== */
  .contact{
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
    z-index: 5;
  }
  .contact h2{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone);
    margin-bottom: 1rem;
    text-shadow: 0 0 24px rgba(142,68,196,0.4);
  }
  .contact p{
    font-style: italic;
    color: var(--bone-dim);
    max-width: 36rem;
    margin: 0 auto 2.5rem;
    font-size: 1.1rem;
    line-height: 1.7;
  }
  .contact-form{
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .contact-form input,
  .contact-form textarea{
    padding: 1rem 1.2rem;
    background: rgba(14,9,20,0.6);
    border: 1px solid rgba(201,148,58, 0.3);
    color: var(--bone);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-style: italic;
    transition: border 0.3s;
  }
  .contact-form input:focus,
  .contact-form textarea:focus{
    outline: none;
    border-color: var(--blood-bright);
    box-shadow: 0 0 20px rgba(142,68,196,0.2);
  }
  .contact-form textarea{ min-height: 120px; resize: vertical; }
  .contact-form button{
    border: none;
    margin-top: 0.5rem;
  }

  /* ============== FOOTER ============== */
  footer{
    padding: 4rem 2rem 2rem;
    border-top: 1px solid rgba(142,68,196,0.2);
    text-align: center;
    position: relative;
    z-index: 5;
    background: rgba(14,9,20,0.7);
  }
  .footer-grid{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
    text-align: left;
  }
  .footer-grid h4{
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    color: var(--blood-bright);
    margin-bottom: 1.4rem;
    text-transform: uppercase;
  }
  .footer-grid ul{ list-style: none; }
  .footer-grid li{ margin-bottom: 0.7rem; }
  .footer-grid a{
    color: var(--bone-dim);
    text-decoration: none;
    font-style: italic;
    transition: color 0.3s;
  }
  .footer-grid a:hover{ color: var(--bone); }
  .footer-grid p{
    color: var(--bone-dim);
    line-height: 1.7;
    font-style: italic;
    max-width: 22rem;
  }
  .footer-grid p strong{
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-style: normal;
    color: var(--bone);
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
  }
  .footer-marks{
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.4rem;
    color: var(--blood-bright);
    letter-spacing: 0.5em;
    margin-bottom: 1rem;
    text-shadow: 0 0 16px rgba(142,68,196,0.5);
  }
  .footer-tag{
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    color: var(--bone-dim);
    text-transform: uppercase;
  }

  /* ============== CATEGORY CARDS ============== */
  .cat-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-bottom: 0;
  }
  .cat-card{
    position: relative;
    background: linear-gradient(160deg, #190D24 0%, #221130 55%, #150A1E 100%);
    border: 1px solid rgba(201,148,58, 0.28);
    border-radius: 6px;
    padding: 2.4rem 1.8rem 2rem;
    color: inherit;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.5s, box-shadow 0.5s;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    isolation: isolate;
  }
  .cat-card::before{
    content: "";
    position: absolute;
    top: 14px; left: 14px; right: 14px; bottom: 14px;
    border: 1px solid rgba(201,148,58, 0.12);
    pointer-events: none;
    transition: all 0.5s;
    z-index: 1;
  }
  .cat-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(142,68,196,0.18) 0%, transparent 65%);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
  }
  .cat-card > *{ position: relative; z-index: 2; }
  .cat-card:hover{
    transform: translateY(-6px);
    border-color: var(--blood-bright);
    box-shadow:
      0 30px 60px -20px rgba(142,68,196, 0.45),
      0 0 80px -10px rgba(142,68,196, 0.3);
  }
  .cat-card:hover::before{
    border-color: rgba(240,230,208, 0.4);
    top: 20px; left: 20px; right: 20px; bottom: 20px;
  }
  .cat-card[aria-expanded="true"]{
    border-color: var(--blood-bright);
    background: linear-gradient(160deg, #261338 0%, #341846 55%, #1D0C28 100%);
    box-shadow:
      0 30px 60px -20px rgba(142,68,196, 0.6),
      0 0 100px -10px rgba(142,68,196, 0.4),
      inset 0 0 30px rgba(142,68,196, 0.15);
  }
  .cat-card[aria-expanded="true"] .cat-glow{ opacity: 1; }

  /* Pulsing glow that intensifies on hover */
  .cat-glow{
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle at 50% 100%, rgba(142,68,196,0.4) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.6s;
    pointer-events: none;
    z-index: 0;
  }
  .cat-card:hover .cat-glow{ opacity: 0.7; }

  .cat-num{
    font-family: 'Cinzel Decorative', serif;
    font-size: 2rem;
    color: var(--blood-bright);
    text-shadow: 0 0 14px rgba(142,68,196,0.5);
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
  }
  .cat-icon{
    width: 60px; height: 60px;
    color: var(--gold);
    margin-bottom: 1.4rem;
    filter: drop-shadow(0 0 10px rgba(201,148,58,0.45));
    transition: transform 0.6s, filter 0.6s;
  }
  .cat-icon svg{ width: 100%; height: 100%; display: block; }
  .cat-card:hover .cat-icon{
    transform: scale(1.08) rotate(-3deg);
    filter: drop-shadow(0 0 18px rgba(142,68,196,0.6));
  }
  .cat-title{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--bone);
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
  }
  .cat-meta{
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.35em;
    color: var(--bone-dim);
    text-transform: uppercase;
    margin-bottom: auto;
    padding-bottom: 1.2rem;
  }
  .cat-line{
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,148,58,0.4), transparent);
    margin-bottom: 1rem;
  }
  .cat-cta{
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: var(--blood-bright);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition: letter-spacing 0.4s, color 0.4s;
  }
  .cat-card:hover .cat-cta{
    letter-spacing: 0.4em;
    color: var(--bone);
    text-shadow: 0 0 12px var(--blood-bright);
  }

  /* ============== IN-PAGE CAROUSEL STAGE ============== */
  .carousel-stage{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s cubic-bezier(.2,.8,.2,1), margin 0.6s, opacity 0.6s;
    opacity: 0;
    margin: 0;
  }
  .carousel-stage.open{
    max-height: 2000px;
    opacity: 1;
    margin: 3rem 0 0;
  }
  .carousel-inner{
    background: linear-gradient(180deg, rgba(36,16,52,0.7) 0%, rgba(14,9,20,0.8) 100%);
    border: 1px solid rgba(142,68,196, 0.4);
    padding: 2.5rem 2rem;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7), inset 0 0 80px rgba(142,68,196,0.06);
  }
  .carousel-inner::before{
    content: "";
    position: absolute;
    top: 14px; left: 14px; right: 14px; bottom: 14px;
    border: 1px solid rgba(201,148,58,0.12);
    pointer-events: none;
  }
  .carousel-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
  }
  .carousel-eyebrow{
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.5em;
    color: var(--blood-bright);
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 12px rgba(142,68,196,0.5);
  }
  .carousel-title{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--bone);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .carousel-close{
    background: rgba(14,9,20,0.6);
    border: 1px solid rgba(201,148,58,0.3);
    color: var(--bone);
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
    flex-shrink: 0;
  }
  .carousel-close:hover{
    border-color: var(--blood-bright);
    color: var(--blood-bright);
    transform: rotate(90deg);
  }

  .carousel-viewport{
    position: relative;
    overflow: hidden;
    margin: 0 -0.5rem;
  }
  .carousel-track{
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
  }
  .carousel-card{
    flex: 0 0 calc(33.333% - 1rem);
    background: linear-gradient(180deg, rgba(36,16,52,0.6), rgba(14,9,20,0.8));
    border: 1px solid rgba(201,148,58,0.25);
    padding: 1.8rem 1.5rem 1.5rem;
    position: relative;
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 280px;
  }
  .carousel-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(142,68,196,0.15) 0%, transparent 60%);
    pointer-events: none;
  }
  .carousel-card:hover{
    border-color: var(--blood-bright);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(142,68,196,0.4);
  }
  .carousel-card > *{ position: relative; z-index: 2; }
  .carousel-card .cc-tag{
    position: absolute;
    top: 12px; right: 12px;
    font-family: 'Cinzel', serif;
    font-size: 8.5px;
    letter-spacing: 0.28em;
    color: var(--gold);
    background: rgba(201,148,58,0.12);
    border: 1px solid rgba(201,148,58,0.4);
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    z-index: 3;
  }
  .carousel-card .cc-name{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--bone);
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.4rem;
  }
  .carousel-card .cc-desc{
    color: var(--bone);
    opacity: 0.75;
    font-style: italic;
    line-height: 1.6;
    font-size: 0.95rem;
    flex: 1;
  }
  .carousel-card .cc-weeks{
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: var(--bone-dim);
    text-transform: uppercase;
  }
  .carousel-card .cc-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(201,148,58,0.18);
    margin-top: 0.4rem;
    gap: 0.6rem;
  }
  .carousel-card .cc-price{
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3rem;
    color: var(--gold);
    letter-spacing: 0.04em;
  }
  .carousel-card .cc-enroll{
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    color: var(--blood-bright);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
  }
  .carousel-card .cc-enroll:hover{
    color: var(--bone);
    text-shadow: 0 0 10px var(--blood-bright);
    letter-spacing: 0.36em;
  }

  .carousel-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(14,9,20,0.85);
    border: 1px solid rgba(142,68,196,0.5);
    color: var(--bone);
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.3s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carousel-nav.prev{ left: -10px; }
  .carousel-nav.next{ right: -10px; }
  .carousel-nav:hover{
    background: var(--blood-deep);
    border-color: var(--blood-bright);
    box-shadow: 0 0 20px rgba(142,68,196,0.5);
  }
  .carousel-nav:disabled{
    opacity: 0.25;
    cursor: not-allowed;
  }

  .carousel-dots{
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.8rem;
    position: relative;
    z-index: 2;
  }
  .carousel-dots .dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(201,148,58,0.25);
    border: 1px solid rgba(201,148,58,0.4);
    cursor: pointer;
    transition: all 0.3s;
  }
  .carousel-dots .dot.active{
    background: var(--blood-bright);
    border-color: var(--blood-bright);
    box-shadow: 0 0 12px var(--blood-bright);
    transform: scale(1.3);
  }

  /* ============== ADEPT'S LIBRARY MEGA-CARD ============== */
  .library-card{
    background: linear-gradient(135deg, #1D0E2B 0%, #251234 50%, #180A23 100%);
    border: 1.5px solid rgba(201,148,58, 0.5);
    border-radius: 8px;
    padding: 2.4rem 2.2rem 2rem;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, transform .25s;
  }
  .library-card:hover{
    border-color: rgba(240,230,208, 0.85);
    transform: translateY(-3px);
  }
  .library-card::before{
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 80% at 50% 0%, rgba(142,68,196,0.35) 0%, transparent 65%),
      radial-gradient(ellipse 30% 50% at 100% 100%, rgba(201,148,58,0.12) 0%, transparent 70%);
    pointer-events: none;
  }
  .library-card > *{ position: relative; }
  .library-badge{
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.4em;
    background: rgba(201,148,58, 0.15);
    border: 1px solid rgba(201,148,58, 0.5);
    color: var(--gold);
    padding: 7px 22px;
    border-radius: 22px;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
  }
  .library-title{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    color: var(--bone);
    margin-bottom: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .library-desc{
    font-size: 1.05rem;
    color: var(--bone);
    opacity: 0.85;
    line-height: 1.7;
    max-width: 580px;
    margin-bottom: 1.4rem;
    font-style: italic;
  }
  .library-savings-line{
    font-style: italic;
    font-size: 1rem;
    color: var(--gold);
    margin-bottom: 1.4rem;
    opacity: 0.95;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .library-savings-line strong{
    font-family: 'Cinzel Decorative', serif;
    font-style: normal;
    font-size: 1.3rem;
    color: var(--bone);
    margin: 0 0.2rem;
  }
  .library-pricing{
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
  }
  .lib-price-main{
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.4rem;
    color: var(--bone);
    letter-spacing: 0.04em;
  }
  .lib-price-old{
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.4rem;
    color: var(--bone);
    text-decoration: line-through;
    text-decoration-color: rgba(201,148,58,0.7);
    opacity: 0.5;
  }
  .library-installments{
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--bone);
    margin-bottom: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.85;
  }
  .library-installments strong{ color: var(--gold); }
  .library-actions{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.5rem;
  }

  /* ============== TAROT PULL SECTION ============== */
  section.tarot{
    padding: 6rem 2rem 8rem;
    position: relative;
    z-index: 5;
    background:
      radial-gradient(ellipse at center, rgba(58,20,88,0.25) 0%, transparent 70%);
  }
  .tarot-stage{
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }
  .tarot-deck{
    margin: 4rem auto 0;
    position: relative;
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    perspective: 1500px;
    min-height: 320px;
    align-items: center;
  }
  .tarot-card{
    width: 160px;
    height: 280px;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(.2,.8,.2,1), opacity 0.6s;
  }
  .tarot-card:nth-child(1){ transform: rotate(-6deg) translateY(8px); }
  .tarot-card:nth-child(2){ transform: rotate(-2deg); }
  .tarot-card:nth-child(3){ transform: rotate(2deg); }
  .tarot-card:nth-child(4){ transform: rotate(6deg) translateY(8px); }
  .tarot-card:hover:not(.flipped):not(.dimmed){
    transform: translateY(-20px) rotate(0deg) scale(1.04);
  }
  .tarot-card.dimmed{
    opacity: 0.2;
    pointer-events: none;
    transform: scale(0.92) translateY(20px);
  }
  .tarot-card.flipped{
    transform: translateY(-30px) rotate(0deg) scale(1.1) rotateY(180deg);
    z-index: 10;
  }
  .tarot-face{
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border: 1px solid var(--gold);
    border-radius: 6px;
    box-shadow:
      0 20px 50px rgba(0,0,0,0.7),
      0 0 30px rgba(142,68,196,0.3),
      inset 0 0 30px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    overflow: hidden;
  }
  .tarot-back{
    background:
      radial-gradient(ellipse at center, #251130 0%, #120818 100%);
  }
  .tarot-back::before{
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201,148,58, 0.4);
    border-radius: 3px;
  }
  .tarot-back svg{
    width: 75%;
    height: auto;
    color: var(--gold);
    filter: drop-shadow(0 0 8px rgba(201,148,58,0.5));
  }
  .tarot-front{
    background:
      radial-gradient(ellipse at center top, #3A1458 0%, #190D24 70%, #0E0914 100%);
    transform: rotateY(180deg);
    color: var(--bone);
  }
  .tarot-front::before{
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201,148,58, 0.5);
    border-radius: 3px;
    pointer-events: none;
  }
  .tarot-front .tarot-symbol{
    color: var(--blood-bright);
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 12px rgba(142,68,196,0.6));
    animation: tarot-pulse 3s ease-in-out infinite;
  }
  @keyframes tarot-pulse{
    0%,100%{ opacity: 0.85; transform: scale(1); }
    50%{ opacity: 1; transform: scale(1.05); }
  }
  .tarot-front .tarot-symbol svg{
    width: 60px;
    height: 60px;
  }
  .tarot-front .tarot-roman{
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.4rem;
    color: var(--gold);
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
  }
  .tarot-front .tarot-name{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--bone);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
  }

  .tarot-reveal{
    max-width: 600px;
    margin: 3rem auto 0;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s, transform 0.8s;
  }
  .tarot-reveal.show{
    opacity: 1;
    transform: translateY(0);
  }
  .tarot-reveal .tr-eyebrow{
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.5em;
    color: var(--blood-bright);
    text-transform: uppercase;
    margin-bottom: 1rem;
  }
  .tarot-reveal h4{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 2rem;
    color: var(--bone);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }
  .tarot-reveal .tr-message{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--bone);
    opacity: 0.9;
    line-height: 1.8;
    margin-bottom: 2rem;
  }
  .tarot-reset{
    background: transparent;
    border: 1px solid var(--gold-deep);
    color: var(--bone);
    padding: 0.9rem 2rem;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s;
  }
  .tarot-reset:hover{
    border-color: var(--blood-bright);
    color: var(--blood-bright);
    text-shadow: 0 0 10px var(--blood-bright);
    letter-spacing: 0.5em;
  }

  /* ============== SACRED OFFERINGS (Glowing Red Elegant Cards) ============== */
  section.offerings{
    padding: 4rem 2rem 6rem;
    position: relative;
    z-index: 5;
  }
  .offerings-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  .offering-card{
    position: relative;
    background:
      linear-gradient(180deg, rgba(50,24,76, 0.85) 0%, rgba(20,10,30, 0.95) 100%);
    border: 1px solid var(--blood);
    border-radius: 8px;
    padding: 3rem 2rem 2.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(.2,.8,.2,1);
    isolation: isolate;
  }
  /* Outer glow */
  .offering-card::before{
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blood-bright), var(--blood), var(--blood-deep), var(--blood-bright));
    background-size: 200% 200%;
    z-index: -2;
    opacity: 0.6;
    animation: offering-glow 6s ease infinite;
    filter: blur(8px);
  }
  @keyframes offering-glow{
    0%, 100%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
  }
  /* Inner radial sheen */
  .offering-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 80% at 50% 0%, rgba(142,68,196, 0.35) 0%, transparent 60%),
      radial-gradient(ellipse 100% 40% at 50% 100%, rgba(142,68,196, 0.2) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .offering-card > *{ position: relative; z-index: 2; }

  .offering-card:hover{
    transform: translateY(-8px) scale(1.01);
    border-color: var(--bone);
    box-shadow:
      0 30px 80px -20px rgba(142,68,196, 0.7),
      0 0 100px -10px rgba(142,68,196, 0.5);
  }
  .offering-card:hover::before{
    opacity: 1;
    inset: -4px;
  }

  /* Filigree corner ornaments */
  .offering-card .filigree{
    position: absolute;
    width: 40px; height: 40px;
    color: var(--gold);
    opacity: 0.55;
    transition: opacity 0.4s;
    z-index: 3;
  }
  .offering-card .filigree.tl{ top: 12px; left: 12px; }
  .offering-card .filigree.tr{ top: 12px; right: 12px; transform: scaleX(-1); }
  .offering-card .filigree.bl{ bottom: 12px; left: 12px; transform: scaleY(-1); }
  .offering-card .filigree.br{ bottom: 12px; right: 12px; transform: scale(-1, -1); }
  .offering-card:hover .filigree{ opacity: 0.9; }

  .offering-icon{
    width: 64px; height: 64px;
    margin: 0.5rem auto 1.5rem;
    color: var(--bone);
    filter: drop-shadow(0 0 12px rgba(255,140,42, 0.5));
    animation: offering-icon-pulse 3.5s ease-in-out infinite;
  }
  @keyframes offering-icon-pulse{
    0%, 100%{ filter: drop-shadow(0 0 12px rgba(255,140,42, 0.5)); }
    50%{ filter: drop-shadow(0 0 22px rgba(255,140,42, 0.85)); }
  }
  .offering-icon svg{ width: 100%; height: 100%; display: block; }

  .offering-name{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--bone);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 18px rgba(255,140,42, 0.4);
  }
  .offering-tag{
    text-align: center;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 0.2em;
    margin-bottom: 1.4rem;
  }
  .offering-desc{
    text-align: center;
    color: var(--bone);
    opacity: 0.9;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
  }
  .offering-foot{
    text-align: center;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(240,230,208, 0.18);
  }
  .offering-price{
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.6rem;
    color: var(--bone);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 0.8rem;
  }
  .offering-cta{
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: var(--bone);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.7rem 1.4rem;
    border: 1px solid rgba(240,230,208, 0.4);
    transition: all 0.4s;
  }
  .offering-cta:hover{
    background: rgba(14,9,20, 0.4);
    border-color: var(--bone);
    letter-spacing: 0.5em;
  }

  /* ============== SPOTIFY ORB PLAYER ============== */
  .spotify-orb{
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 90;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    cursor: pointer;
    background: radial-gradient(circle at 30% 30%, var(--blood-bright) 0%, var(--blood) 40%, var(--blood-deep) 100%);
    border: 1px solid rgba(240,230,208, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bone);
    transition: transform 0.6s cubic-bezier(.34,1.56,.64,1), box-shadow 0.6s, opacity 0.6s;
    box-shadow:
      0 10px 30px rgba(0,0,0,0.6),
      0 0 30px rgba(142,68,196, 0.5),
      inset 0 0 20px rgba(0,0,0,0.3);
  }
  /* Pulsing aura around the orb */
  .spotify-orb::before{
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(142,68,196,0.5) 0%, transparent 65%);
    animation: orb-pulse 3s ease-in-out infinite;
    z-index: -1;
  }
  .spotify-orb::after{
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(142,68,196,0.25) 0%, transparent 70%);
    animation: orb-pulse 4.5s ease-in-out infinite reverse;
    z-index: -1;
  }
  @keyframes orb-pulse{
    0%, 100%{ opacity: 0.4; transform: scale(1); }
    50%{ opacity: 1; transform: scale(1.18); }
  }
  .spotify-orb:hover{
    transform: scale(1.12) rotate(-10deg);
    box-shadow:
      0 15px 40px rgba(0,0,0,0.7),
      0 0 60px rgba(142,68,196, 0.8),
      inset 0 0 20px rgba(0,0,0,0.3);
  }
  .spotify-orb svg{
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition: transform 0.4s;
  }
  .spotify-orb.playing svg{
    animation: orb-spin 6s linear infinite;
  }
  @keyframes orb-spin{ to { transform: rotate(360deg); } }

  /* Floating notes that drift up when playing */
  .spotify-notes{
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
  }
  .spotify-note{
    position: absolute;
    bottom: 50%;
    left: 50%;
    color: var(--gold);
    font-size: 0.9rem;
    opacity: 0;
    animation: note-rise 3s ease-out infinite;
    text-shadow: 0 0 8px rgba(201,148,58,0.6);
  }
  .spotify-orb.playing .spotify-note:nth-child(1){ animation-delay: 0s; }
  .spotify-orb.playing .spotify-note:nth-child(2){ animation-delay: 1s; }
  .spotify-orb.playing .spotify-note:nth-child(3){ animation-delay: 2s; }
  @keyframes note-rise{
    0%{ opacity: 0; transform: translate(-50%, 0) scale(0.5) rotate(0deg); }
    20%{ opacity: 1; }
    100%{ opacity: 0; transform: translate(calc(-50% + 20px), -80px) scale(1.2) rotate(40deg); }
  }

  /* Hide notes when not playing */
  .spotify-orb:not(.playing) .spotify-note{ display: none; }

  /* Expanded Spotify panel */
  .spotify-panel{
    position: fixed;
    bottom: 6.5rem;
    right: 2rem;
    z-index: 89;
    width: 380px;
    max-width: calc(100vw - 4rem);
    background: linear-gradient(180deg, rgba(36,16,52, 0.97) 0%, rgba(14,9,20, 0.98) 100%);
    border: 1px solid var(--blood-bright);
    border-radius: 12px;
    padding: 1.4rem;
    backdrop-filter: blur(20px);
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(.34,1.56,.64,1), opacity 0.5s;
    box-shadow:
      0 30px 80px rgba(0,0,0,0.8),
      0 0 80px rgba(142,68,196, 0.4),
      inset 0 0 60px rgba(142,68,196, 0.08);
  }
  .spotify-panel.open{
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  /* Animated gradient border */
  .spotify-panel::before{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blood-bright), var(--blood-deep), var(--gold), var(--blood-bright));
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0.7;
    animation: panel-shimmer 8s ease infinite;
    filter: blur(2px);
  }
  @keyframes panel-shimmer{
    0%, 100%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
  }

  .spotify-panel-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
  }
  .spotify-panel-head .label{
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.5em;
    color: var(--blood-bright);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    text-shadow: 0 0 10px rgba(142,68,196,0.5);
  }
  .spotify-panel-head .title{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bone);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
  }
  .spotify-panel-head .artist{
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 0.18em;
    margin-top: 0.2rem;
  }
  .spotify-panel-close{
    background: rgba(14,9,20,0.6);
    border: 1px solid rgba(201,148,58,0.3);
    color: var(--bone);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.4s;
    flex-shrink: 0;
  }
  .spotify-panel-close:hover{
    border-color: var(--blood-bright);
    color: var(--blood-bright);
    transform: rotate(90deg);
  }

  .spotify-iframe-wrap{
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(201,148,58,0.2);
    position: relative;
    background: rgba(14,9,20,0.5);
  }
  .spotify-iframe-wrap iframe{
    display: block;
    width: 100%;
    height: 152px;
    border: none;
  }
  .spotify-panel-foot{
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(201,148,58,0.18);
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.88rem;
    color: var(--bone);
    opacity: 0.7;
    line-height: 1.5;
  }
  .spotify-panel-foot a{
    color: var(--gold);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 0.4rem;
    transition: color 0.3s, text-shadow 0.3s;
  }
  .spotify-panel-foot a:hover{
    color: var(--blood-bright);
    text-shadow: 0 0 10px var(--blood-bright);
  }

  /* ============== CUSTOM CURSOR (desktop only) ============== */
  @media (hover: hover) and (pointer: fine){
    .cursor-glow{
      position: fixed;
      top: 0; left: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 999;
      transform: translate(-50%, -50%);
      mix-blend-mode: screen;
      background: radial-gradient(circle, rgba(142,68,196, 0.6) 0%, rgba(142,68,196, 0.2) 40%, transparent 70%);
      transition: width 0.3s, height 0.3s, opacity 0.3s;
    }
    .cursor-glow.hover{
      width: 60px;
      height: 60px;
      background: radial-gradient(circle, rgba(255,140,42, 0.8) 0%, rgba(142,68,196, 0.3) 50%, transparent 75%);
    }
    .cursor-trail{
      position: fixed;
      top: 0; left: 0;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 998;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(201,148,58, 0.4);
      transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
    }
  }

  /* ============== REVEAL-ON-SCROLL ============== */
  .reveal{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
  }
  .reveal.in-view{
    opacity: 1;
    transform: translateY(0);
  }
  .reveal.stagger-1{ transition-delay: 0.1s; }
  .reveal.stagger-2{ transition-delay: 0.25s; }
  .reveal.stagger-3{ transition-delay: 0.4s; }
  .reveal.stagger-4{ transition-delay: 0.55s; }
  .reveal.stagger-5{ transition-delay: 0.7s; }
  .reveal.stagger-6{ transition-delay: 0.85s; }

  /* Sliding reveal — sweeps in from a side */
  .reveal-left{
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 1.2s cubic-bezier(.2,.8,.2,1), transform 1.2s cubic-bezier(.2,.8,.2,1);
  }
  .reveal-left.in-view{
    opacity: 1;
    transform: translateX(0);
  }
  .reveal-right{
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 1.2s cubic-bezier(.2,.8,.2,1), transform 1.2s cubic-bezier(.2,.8,.2,1);
  }
  .reveal-right.in-view{
    opacity: 1;
    transform: translateX(0);
  }

  /* Section heading: title splits and slides in */
  .reveal-title{
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
    transition: opacity 1.2s, transform 1.2s, filter 1.2s;
  }
  .reveal-title.in-view{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  /* ============== PAGE LOAD ANIMATION ============== */
  .page-enter{
    position: fixed;
    inset: 0;
    background: var(--black);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1.2s ease-out 0.4s, transform 1.5s ease-in-out;
    pointer-events: none;
  }
  .page-enter.hidden{
    opacity: 0;
    transform: scale(1.1);
  }
  .page-enter-sigil{
    width: 200px;
    height: 200px;
    color: var(--blood-bright);
    animation: enter-pulse 1.4s ease-out;
    filter: drop-shadow(0 0 30px rgba(142,68,196,0.7));
  }
  @keyframes enter-pulse{
    0%{ transform: scale(0.6) rotate(-90deg); opacity: 0; }
    50%{ opacity: 1; }
    100%{ transform: scale(1.4) rotate(0deg); opacity: 0; }
  }

  /* Hero title — letter-by-letter rise on load */
  .hero-content{
    animation: hero-rise 1.6s cubic-bezier(.2,.8,.2,1) 1.5s both;
  }
  @keyframes hero-rise{
    0%{ opacity: 0; transform: translateY(40px); filter: blur(10px); }
    100%{ opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  /* ============== MAGNETIC CARDS (subtle tilt on hover) ============== */
  .cat-card, .offering-card, .carousel-card{
    transform-style: preserve-3d;
    will-change: transform;
  }

  /* ============== ENHANCED CAROUSEL TRANSITION ============== */
  .carousel-card{
    transition:
      all 0.6s cubic-bezier(.34,1.56,.64,1),
      opacity 0.5s;
  }
  .carousel-track.transitioning .carousel-card{
    opacity: 0.4;
    filter: blur(2px);
  }

  /* ============== RESPONSIVE ============== */
  @media (max-width: 1100px){
    .cat-grid{ grid-template-columns: repeat(2, 1fr); }
    .offerings-grid{ grid-template-columns: repeat(2, 1fr); }
    .carousel-card{ flex: 0 0 calc(50% - 0.75rem); }
  }

  @media (max-width: 900px){
    nav{ padding: 1rem 1.2rem; }
    nav ul{
      display: none;
      position: fixed;
      top: 70px; left: 0; right: 0;
      flex-direction: column;
      background: rgba(14,9,20,0.98);
      padding: 2rem;
      gap: 1.5rem;
      border-bottom: 1px solid rgba(142,68,196,0.3);
    }
    nav ul.open{ display: flex; }
    .nav-toggle{ display: block; }
    .crest{ font-size: 1.1rem; }
    .crest svg{ width: 24px; height: 24px; }
    .about-grid{ grid-template-columns: 1fr; gap: 3rem; }
    .cat-grid{ grid-template-columns: 1fr; gap: 1.2rem; }
    .carousel-card{ flex: 0 0 calc(100% - 0.5rem); min-height: 240px; }
    .carousel-inner{ padding: 1.8rem 1.2rem; }
    .carousel-head{ flex-direction: column; gap: 1rem; align-items: stretch; }
    .carousel-nav.prev{ left: 0; }
    .carousel-nav.next{ right: 0; }
    .library-card{ padding: 1.8rem 1.4rem 1.6rem; }
    .library-actions{ flex-direction: column; align-items: stretch; }
    .offerings-grid{ grid-template-columns: 1fr; gap: 2rem; }
    .tarot-deck{ gap: 0.6rem; min-height: 280px; }
    .tarot-card{ width: 120px; height: 210px; }
    .tarot-front .tarot-symbol svg{ width: 44px; height: 44px; }
    .library-actions .btn-primary, .library-actions .btn-ghost{ text-align: center; }
    .retreat-row{ grid-template-columns: 1fr; gap: 2rem; direction: ltr !important; }
    .retreat-row:nth-child(even){ direction: ltr; }
    .gallery{ grid-template-columns: repeat(2, 1fr); }
    .gallery-item.wide{ grid-column: span 2; }
    .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2rem; }
    .divider .line{ width: 80px; }
    .spotify-orb{ bottom: 1.2rem; right: 1.2rem; width: 56px; height: 56px; }
    .spotify-orb svg{ width: 24px; height: 24px; }
    .spotify-panel{ bottom: 5.5rem; right: 1.2rem; left: 1.2rem; width: auto; max-width: none; }
  }
  @media (max-width: 500px){
    .footer-grid{ grid-template-columns: 1fr; }
    section.content{ padding: 3rem 1.2rem; }
  }

  /* ============================================================
     INTERIOR PAGES — shared components (added for multi-page site)
     ============================================================ */

  /* Active nav item */
  nav ul a.active{
    color: var(--blood-bright);
    text-shadow: 0 0 14px var(--blood-bright);
  }
  nav ul a.active::before{ opacity: 1; }

  /* ---------- Page hero (interior banner, no video) ---------- */
  .page-hero{
    position: relative;
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 11rem 2rem 5rem;
    overflow: hidden;
    z-index: 5;
  }
  .page-hero::before{
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(142,68,196,0.22) 0%, transparent 60%),
      radial-gradient(ellipse at center, rgba(58,20,88,0.32) 0%, rgba(14,9,20,0.92) 82%);
  }
  .page-hero-sigil{
    position: absolute;
    left: 50%; top: 48%;
    transform: translate(-50%, -50%);
    width: 440px; height: 440px;
    max-width: 86vw; max-height: 86vw;
    color: var(--blood);
    opacity: 0.13;
    z-index: 1;
    pointer-events: none;
    animation: sigil-spin 90s linear infinite;
  }
  @keyframes sigil-spin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }
  .page-hero > .hero-content,
  .page-hero > .eyebrow,
  .page-hero > h1,
  .page-hero > .lead{ position: relative; z-index: 2; }
  .page-hero h1{
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: 1.05;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone);
    text-shadow: 0 0 40px rgba(142,68,196,0.5), 0 4px 0 rgba(0,0,0,0.7);
    margin-bottom: 1.2rem;
  }

  /* ---------- Prose (long-form text) ---------- */
  .prose{ max-width: 46rem; margin: 0 auto; }
  .prose p{
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.18rem;
    line-height: 1.9;
    color: var(--bone);
    opacity: 0.88;
    margin-bottom: 1.6rem;
  }
  .prose p em, .prose em{ color: var(--blood-bright); font-style: italic; }
  .prose p.drop::first-letter{
    font-family: 'Cinzel Decorative', serif;
    font-size: 4.5rem;
    float: left;
    line-height: 0.9;
    margin: 0.2rem 0.7rem 0 0;
    color: var(--blood-bright);
    text-shadow: 0 0 14px rgba(142,68,196,0.5);
  }
  .prose h3{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--bone);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 2.8rem 0 1rem;
    text-shadow: 0 0 18px rgba(142,68,196,0.3);
  }
  .prose blockquote{
    border-left: 1px solid var(--blood);
    padding-left: 1.6rem;
    margin: 2.2rem 0;
    font-style: italic;
    color: var(--gold);
    font-size: 1.3rem;
    line-height: 1.7;
  }

  /* ---------- Creed / three-doors grid ---------- */
  .creed-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }
  .creed{
    position: relative;
    padding: 2.8rem 1.8rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(36,16,52,0.4), rgba(14,9,20,0.7));
    border: 1px solid rgba(201,148,58, 0.25);
    border-radius: 6px;
    transition: all 0.5s cubic-bezier(.2,.8,.2,1);
  }
  .creed:hover{
    transform: translateY(-6px);
    border-color: var(--blood-bright);
    box-shadow: 0 30px 60px -20px rgba(142,68,196,0.4);
  }
  .creed .creed-icon{
    width: 58px; height: 58px;
    margin: 0 auto 1.3rem;
    color: var(--gold);
    filter: drop-shadow(0 0 10px rgba(201,148,58,0.4));
  }
  .creed .creed-icon svg{ width: 100%; height: 100%; display: block; }
  .creed h3{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--bone);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
  }
  .creed .creed-sub{
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.95rem;
    color: var(--blood-bright);
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
  }
  .creed p{
    font-style: italic;
    color: var(--bone);
    opacity: 0.8;
    line-height: 1.7;
    font-size: 1rem;
  }

  /* ---------- Steps / how it works ---------- */
  .steps{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .step{ position: relative; padding: 2rem 1.4rem; text-align: center; }
  .step .step-num{
    font-family: 'Cinzel Decorative', serif;
    font-size: 3rem;
    color: var(--blood-bright);
    text-shadow: 0 0 16px rgba(142,68,196,0.5);
    margin-bottom: 0.6rem;
  }
  .step h4{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--bone);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
  }
  .step p{ font-style: italic; color: var(--bone); opacity: 0.8; line-height: 1.7; }

  /* ---------- Rune list (what's included) ---------- */
  .rune-list{ list-style: none; max-width: 640px; margin: 0 auto; }
  .rune-list li{
    padding: 1rem 0 1rem 2.2rem;
    border-bottom: 1px solid rgba(201,148,58, 0.14);
    position: relative;
    font-size: 1.1rem;
    color: var(--bone);
    opacity: 0.88;
    line-height: 1.6;
  }
  .rune-list li::before{
    content: "✦";
    position: absolute; left: 0; top: 1rem;
    color: var(--blood-bright);
    font-size: 0.9rem;
  }

  /* ---------- Grimoire post cards ---------- */
  .post-list{
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  .post-card{
    display: block;
    text-decoration: none;
    position: relative;
    padding: 2.2rem;
    border: 1px solid rgba(201,148,58, 0.22);
    background: linear-gradient(180deg, rgba(36,16,52,0.35), rgba(14,9,20,0.65));
    transition: all 0.5s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
  }
  .post-card::before{
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--blood-bright), transparent);
    opacity: 0;
    transition: opacity 0.5s;
  }
  .post-card:hover{
    transform: translateX(6px);
    border-color: var(--blood-bright);
    box-shadow: 0 20px 50px -20px rgba(142,68,196,0.4);
  }
  .post-card:hover::before{ opacity: 1; }
  .post-meta{
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--blood-bright);
    margin-bottom: 0.9rem;
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  .post-meta .dot{ color: var(--gold-deep); }
  .post-card h3{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--bone);
    letter-spacing: 0.05em;
    line-height: 1.25;
    margin-bottom: 0.8rem;
  }
  .post-card p{
    font-style: italic;
    color: var(--bone);
    opacity: 0.8;
    line-height: 1.75;
    font-size: 1.05rem;
    margin-bottom: 1rem;
  }
  .post-card .read{
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .post-card:hover .read{ color: var(--bone); text-shadow: 0 0 10px var(--blood-bright); }

  /* ---------- Testimonials (vow cards) ---------- */
  .vow-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .vow-card{
    position: relative;
    padding: 3rem 2.2rem 2.2rem;
    border: 1px solid rgba(201,148,58, 0.22);
    background: linear-gradient(180deg, rgba(36,16,52,0.4), rgba(14,9,20,0.7));
    transition: all 0.5s;
    overflow: hidden;
  }
  .vow-card::before{
    content: "\201C";
    position: absolute;
    top: 0.2rem; left: 1.2rem;
    font-family: 'Cinzel Decorative', serif;
    font-size: 5rem;
    color: var(--blood);
    opacity: 0.4;
    line-height: 1;
  }
  .vow-card:hover{
    border-color: var(--blood-bright);
    transform: translateY(-4px);
    box-shadow: 0 24px 60px -24px rgba(142,68,196,0.45);
  }
  .vow-stars{ color: var(--blood-bright); letter-spacing: 0.3em; font-size: 0.8rem; }
  .vow-card blockquote{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--bone);
    opacity: 0.92;
    margin: 1rem 0 1.6rem;
  }
  .vow-card .vow-by{
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .vow-card .vow-role{
    font-style: italic;
    color: var(--bone-dim);
    font-size: 0.95rem;
    margin-top: 0.3rem;
  }

  /* ---------- Info cards (contact channels) ---------- */
  .info-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    max-width: 1000px;
    margin: 0 auto;
  }
  .info-card{
    text-align: center;
    padding: 2.6rem 1.6rem;
    border: 1px solid rgba(201,148,58, 0.2);
    background: linear-gradient(180deg, rgba(36,16,52,0.35), rgba(14,9,20,0.65));
    border-radius: 6px;
    transition: all 0.5s;
  }
  .info-card:hover{ border-color: var(--blood-bright); transform: translateY(-4px); }
  .info-card .info-icon{
    width: 48px; height: 48px;
    margin: 0 auto 1.2rem;
    color: var(--blood-bright);
    filter: drop-shadow(0 0 10px rgba(142,68,196,0.4));
  }
  .info-card .info-icon svg{ width: 100%; height: 100%; display: block; }
  .info-card h4{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--bone);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
  }
  .info-card p{ font-style: italic; color: var(--bone-dim); line-height: 1.6; font-size: 1rem; }
  .info-card a{ color: var(--gold); text-decoration: none; transition: color 0.3s; }
  .info-card a:hover{ color: var(--blood-bright); }

  /* ---------- FAQ ---------- */
  .faq{ max-width: 760px; margin: 0 auto; }
  .faq details{ border-bottom: 1px solid rgba(201,148,58, 0.18); }
  .faq summary{
    cursor: pointer;
    list-style: none;
    padding: 1.4rem 2.2rem 1.4rem 0;
    position: relative;
    font-family: 'Cinzel', serif;
    font-weight: 500;
    font-size: 1.12rem;
    color: var(--bone);
    letter-spacing: 0.04em;
    transition: color 0.3s;
  }
  .faq summary::-webkit-details-marker{ display: none; }
  .faq summary::after{
    content: "+";
    position: absolute; right: 0; top: 1.1rem;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.6rem;
    color: var(--blood-bright);
    transition: transform 0.4s;
  }
  .faq details[open] summary::after{ transform: rotate(45deg); }
  .faq summary:hover{ color: var(--blood-bright); }
  .faq details p{
    padding: 0 0 1.5rem;
    font-style: italic;
    color: var(--bone);
    opacity: 0.82;
    line-height: 1.8;
    font-size: 1.05rem;
  }

  /* ---------- Centered CTA band ---------- */
  .cta-band{ text-align: center; max-width: 640px; margin: 0 auto; }
  .cta-band h2{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone);
    margin-bottom: 1.2rem;
    text-shadow: 0 0 24px rgba(142,68,196,0.4);
  }
  .cta-band p{
    font-style: italic;
    color: var(--bone-dim);
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 2.2rem;
  }

  /* ---------- Teaser link wrapper (home → page) ---------- */
  .section-more{ text-align: center; margin-top: 3.5rem; }

  @media (max-width: 900px){
    .creed-grid{ grid-template-columns: 1fr; }
    .steps{ grid-template-columns: 1fr; }
    .vow-grid{ grid-template-columns: 1fr; }
    .info-grid{ grid-template-columns: 1fr; }
    .page-hero{ padding: 9rem 1.4rem 4rem; min-height: 50vh; }
  }

  /* ============================================================
     WITCHY-LUXURY LAYER — match the Sentire Occulta landing page
     (red + gold, Cinzel Decorative display, fire & ember ground,
      all-seeing-eye seal). Added on top of the base styles.
     ============================================================ */

  /* ---------- Display headings: Cinzel Decorative ---------- */
  h1.title,
  .page-hero h1,
  .section-head h2,
  .carousel-title,
  .library-title,
  .contact h2,
  .cta-band h2,
  .invocation blockquote,
  .tarot-reveal h4,
  .retreat-info h3,
  .about-text h3,
  .offering-name{
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
  }
  /* Bright-gold accent on the big section headings for that gilded feel */
  .section-head h2,
  .cta-band h2,
  .library-title{
    color: var(--gold-lt);
    text-shadow: 0 2px 22px rgba(94,43,138,0.55), 0 0 2px rgba(232,200,122,0.3);
  }
  h1.title{
    color: var(--cream, var(--bone));
    text-shadow: 0 2px 34px rgba(94,43,138,0.7);
  }
  /* Gild the "Occulta" crest + small caps in warm gold */
  .crest{ color: var(--gold-lt); }
  .crest svg{ color: var(--gold); filter: drop-shadow(0 0 6px rgba(201,148,58,0.6)); }
  nav ul a{ font-family: 'Cinzel', serif; }

  /* Soften the film grain (landing has none; keep just a whisper) */
  body::before{ opacity: 0.07; }

  /* ---------- Luxe gold-gradient primary button ---------- */
  .btn-primary{
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--gold) 50%, #a8801f 100%);
    border: 1px solid rgba(232,200,122,0.6);
    color: #190C22;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    box-shadow: 0 4px 22px rgba(201,148,58,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: none;
  }
  .btn-primary:hover{
    background: linear-gradient(135deg, #f3dca0 0%, var(--gold-lt) 50%, var(--gold) 100%);
    box-shadow: 0 8px 34px rgba(201,148,58,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
    color: #150A1F;
    letter-spacing: 0.45em;
  }
  .btn-ghost{
    border: 1px solid rgba(201,148,58,0.5);
    color: var(--gold-lt);
    font-family: 'Cinzel', serif;
    background: rgba(14,9,20,0.45);
  }
  .btn-ghost:hover{
    border-color: rgba(232,200,122,0.9);
    color: var(--gold-lt);
    background: rgba(142,68,196,0.18);
    text-shadow: 0 0 10px rgba(201,148,58,0.6);
  }

  /* ============== MYSTIC BACKGROUND (red glow + gold stars) ============== */
  .bg-canvas{ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .bg-canvas::before{
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(94,43,138,0.55) 0%, transparent 65%),
      radial-gradient(ellipse 60% 50% at 50% 110%, rgba(58,20,88,0.4) 0%, transparent 60%),
      radial-gradient(ellipse 40% 40% at 0% 50%, rgba(94,43,138,0.18) 0%, transparent 60%),
      radial-gradient(ellipse 40% 40% at 100% 50%, rgba(94,43,138,0.18) 0%, transparent 60%);
  }
  .bg-canvas::after{
    content: ''; position: absolute; inset: 0;
    background-image:
      radial-gradient(1.5px 1.5px at 8%  12%, rgba(201,148,58,0.5) 0%,transparent 100%),
      radial-gradient(1px   1px   at 22% 5%,  rgba(240,230,208,0.2) 0%,transparent 100%),
      radial-gradient(2px   2px   at 38% 18%, rgba(201,148,58,0.3) 0%,transparent 100%),
      radial-gradient(1px   1px   at 55% 3%,  rgba(240,230,208,0.15)0%,transparent 100%),
      radial-gradient(1.5px 1.5px at 70% 14%, rgba(201,148,58,0.4) 0%,transparent 100%),
      radial-gradient(1px   1px   at 85% 7%,  rgba(240,230,208,0.2) 0%,transparent 100%),
      radial-gradient(1px   1px   at 93% 25%, rgba(201,148,58,0.3) 0%,transparent 100%),
      radial-gradient(1.5px 1.5px at 5%  42%, rgba(201,148,58,0.25)0%,transparent 100%),
      radial-gradient(1px   1px   at 18% 60%, rgba(240,230,208,0.12)0%,transparent 100%),
      radial-gradient(1px   1px   at 32% 75%, rgba(201,148,58,0.2) 0%,transparent 100%),
      radial-gradient(1.5px 1.5px at 48% 88%, rgba(240,230,208,0.15)0%,transparent 100%),
      radial-gradient(1px   1px   at 62% 65%, rgba(201,148,58,0.25)0%,transparent 100%),
      radial-gradient(1px   1px   at 78% 82%, rgba(240,230,208,0.1) 0%,transparent 100%),
      radial-gradient(1.5px 1.5px at 90% 55%, rgba(201,148,58,0.3) 0%,transparent 100%);
  }

  /* ============== CRACKLING FIRE GLOW (bottom) ============== */
  .mist{
    position: fixed; bottom: 0; left: 0; right: 0; height: 280px; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 60% 100% at 20% 100%, rgba(255,120,40,0.18) 0%, transparent 60%),
      radial-gradient(ellipse 70% 100% at 80% 100%, rgba(255,80,30,0.16) 0%, transparent 60%),
      radial-gradient(ellipse 100% 80% at 50% 100%, rgba(142,68,196,0.32) 0%, transparent 70%),
      linear-gradient(to top, rgba(58,20,88,0.45) 0%, rgba(94,43,138,0.15) 30%, transparent 100%);
    animation: fireCrackle 0.18s steps(3) infinite, fireGlow 3s ease-in-out infinite alternate;
  }
  @keyframes fireCrackle{ 0%{opacity:1} 33%{opacity:0.94} 66%{opacity:1} 100%{opacity:0.97} }
  @keyframes fireGlow{
    from{ filter: brightness(0.95) hue-rotate(-3deg); }
    to  { filter: brightness(1.12) hue-rotate(4deg); }
  }

  /* ============== RISING FIRE / SPARK / ASH PARTICLES ============== */
  .ember-particle{
    position: absolute; bottom: -10px;
    width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  }
  .ember-particle.fire{ background: #FFC966; box-shadow: 0 0 6px #FF8C2A, 0 0 12px rgba(255,120,40,0.7); }
  .ember-particle.spark{ background: #FFEEC4; box-shadow: 0 0 4px #FFD580, 0 0 8px rgba(255,200,100,0.6); width: 2px; height: 2px; }
  .ember-particle.ash{ background: #7a6a5a; opacity: 0; width: 2.5px; height: 2.5px; box-shadow: 0 0 3px rgba(120,100,90,0.4); }
  @keyframes riseEmber{
    0%{ bottom:-10px; opacity:0; transform:translateX(0) scale(1); }
    8%{ opacity:1; }
    50%{ transform:translateX(20px) scale(1.1); }
    85%{ opacity:0.6; }
    100%{ bottom:105vh; opacity:0; transform:translateX(-15px) scale(0.4); }
  }
  @keyframes riseAsh{
    0%{ bottom:-10px; opacity:0; transform:translateX(0) rotate(0deg); }
    10%{ opacity:0.5; }
    50%{ transform:translateX(-30px) rotate(180deg); }
    85%{ opacity:0.3; }
    100%{ bottom:105vh; opacity:0; transform:translateX(40px) rotate(360deg); }
  }
  .embers .ember-particle:nth-child(1)  {left:4%;  animation:riseEmber 9s linear infinite}
  .embers .ember-particle:nth-child(2)  {left:10%; animation:riseEmber 11s linear infinite -2s}
  .embers .ember-particle:nth-child(3)  {left:16%; animation:riseAsh 14s linear infinite -4s}
  .embers .ember-particle:nth-child(4)  {left:22%; animation:riseEmber 8s linear infinite -1s}
  .embers .ember-particle:nth-child(5)  {left:28%; animation:riseEmber 12s linear infinite -6s}
  .embers .ember-particle:nth-child(6)  {left:34%; animation:riseAsh 16s linear infinite -3s}
  .embers .ember-particle:nth-child(7)  {left:40%; animation:riseEmber 10s linear infinite -8s}
  .embers .ember-particle:nth-child(8)  {left:46%; animation:riseEmber 9.5s linear infinite -5s}
  .embers .ember-particle:nth-child(9)  {left:52%; animation:riseAsh 13s linear infinite -10s}
  .embers .ember-particle:nth-child(10) {left:58%; animation:riseEmber 11.5s linear infinite -7s}
  .embers .ember-particle:nth-child(11) {left:64%; animation:riseEmber 8.5s linear infinite -2.5s}
  .embers .ember-particle:nth-child(12) {left:70%; animation:riseAsh 15s linear infinite -9s}
  .embers .ember-particle:nth-child(13) {left:76%; animation:riseEmber 10.5s linear infinite -4.5s}
  .embers .ember-particle:nth-child(14) {left:82%; animation:riseEmber 9s linear infinite -11s}
  .embers .ember-particle:nth-child(15) {left:88%; animation:riseAsh 14.5s linear infinite -6.5s}
  .embers .ember-particle:nth-child(16) {left:94%; animation:riseEmber 12.5s linear infinite -3.5s}
  .embers .ember-particle:nth-child(17) {left:7%;  animation:riseEmber 13s linear infinite -8.5s}
  .embers .ember-particle:nth-child(18) {left:37%; animation:riseAsh 17s linear infinite -12s}
  .embers .ember-particle:nth-child(19) {left:67%; animation:riseEmber 11s linear infinite -1.5s}
  .embers .ember-particle:nth-child(20) {left:91%; animation:riseAsh 15.5s linear infinite -7.5s}

  /* ============== ALL-SEEING-EYE SEAL (replaces pentagram) ============== */
  .sigil-outer{ transform-origin: 100px 100px; animation: spinSlow 60s linear infinite; }
  @keyframes spinSlow{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
  .sigil-inner-ring{ transform-origin: 100px 100px; animation: spinSlowReverse 90s linear infinite; }
  @keyframes spinSlowReverse{ from{transform:rotate(0)} to{transform:rotate(-360deg)} }
  .sigil-eye{ transform-origin: 100px 100px; animation: eyePulse 3.5s ease-in-out infinite; }
  @keyframes eyePulse{
    0%,100%{ opacity:0.85; filter: drop-shadow(0 0 4px rgba(232,200,122,0.6)); }
    50%{ opacity:1; filter: drop-shadow(0 0 14px rgba(255,200,100,0.9)); }
  }
  .sigil-iris{ animation: irisGlow 2.5s ease-in-out infinite; }
  @keyframes irisGlow{ 0%,100%{opacity:0.9} 50%{opacity:1} }
  .sigil-triangle{ transform-origin: 100px 100px; animation: triBreathe 4s ease-in-out infinite; }
  @keyframes triBreathe{ 0%,100%{opacity:0.85;transform:scale(1)} 50%{opacity:1;transform:scale(1.02)} }

  /* Interior page-hero seal: a fully visible centered crown above the text,
     never cropped, never behind the title. */
  .page-hero-sigil{
    animation: none;
    color: var(--gold);
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 220px;
    height: 220px;
    max-width: 58vw;
    max-height: 58vw;
    margin: 0 auto 1.6rem;
    opacity: 0.9;
    filter: drop-shadow(0 0 28px rgba(201,148,58,0.35));
  }
  .page-enter-sigil{ color: var(--gold); filter: drop-shadow(0 0 30px rgba(201,148,58,0.55)); }

  /* ---------- Gilded ornament divider helper ---------- */
  .ornament{
    display:flex; align-items:center; justify-content:center;
    gap:0.6em; color: var(--gold); font-size:18px; letter-spacing:0.6em;
    opacity:0.7; margin: 1.2rem 0;
    position: relative; z-index: 2;
    animation: ornamentFloat 4s ease-in-out infinite;
  }
  @keyframes ornamentFloat{
    0%,100%{ opacity:0.55; letter-spacing:0.6em; }
    50%{ opacity:0.85; letter-spacing:0.7em; }
  }

  /* ---------- Locked brand detail: gold emphasis on "Occulta" ---------- */
  .crest{ color: var(--bone); }
  .crest .gilt{ color: var(--gold-lt); }
  .footer-grid p strong .gilt{ color: var(--gold-lt); }

  /* ---------- Gold accent word in hero titles ---------- */
  h1.title em,
  .page-hero h1 em{
    font-style: normal;
    color: var(--gold-lt);
    text-shadow: 0 2px 26px rgba(201,148,58,0.45), 0 0 60px rgba(94,43,138,0.6);
  }

  /* ---------- Gilded text selection ---------- */
  ::selection{ background: rgba(201,148,58,0.4); color: #FFEEC4; }

  /* ---------- Gilded scrollbar ---------- */
  html{ scrollbar-width: thin; scrollbar-color: #7A5A1E #0E0914; }
  ::-webkit-scrollbar{ width: 10px; }
  ::-webkit-scrollbar-track{ background: #0E0914; }
  ::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, #C9943A, #7A5A1E);
    border-radius: 5px;
    border: 2px solid #0E0914;
  }
  ::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, #E8C87A, #C9943A); }

  /* ---------- Keyboard focus ---------- */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
    outline: 1px solid var(--gold-lt);
    outline-offset: 3px;
  }

  /* ============================================================
     CHAMBER OF SECRETS LAYER — 3D doors, torchlight, depth
     ============================================================ */

  /* ---------- The Gilded Invitation (mouse-synced entrance) ---------- */
  .page-enter.invite{
    pointer-events: auto;
    cursor: pointer;
    flex-direction: column;
    gap: 1.8rem;
    perspective: 1200px;
    background:
      radial-gradient(ellipse 85% 70% at 50% 18%, rgba(94,43,138,0.4) 0%, transparent 70%),
      linear-gradient(rgba(9,5,14,0.78), rgba(9,5,14,0.9)),
      url("tarot-nebula.jpg") center / cover no-repeat,
      #07030c;
  }
  .invite-rise{
    animation: inviteRise 1.2s cubic-bezier(.2,.8,.2,1) 0.15s both;
    transform-style: preserve-3d;
  }
  @keyframes inviteRise{
    from{ opacity: 0; transform: translateY(70px) rotateX(16deg) scale(0.94); }
    to{ opacity: 1; transform: none; }
  }
  .invite-card{
    position: relative;
    width: min(440px, 88vw);
    padding: 3.2rem 2.6rem 2.8rem;
    border-radius: 12px;
    border: 1px solid rgba(232,200,122,0.6);
    text-align: center;
    transform-style: preserve-3d;
    will-change: transform;
    background:
      radial-gradient(ellipse 95% 55% at 50% 0%, rgba(142,68,196,0.2) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 50% 105%, rgba(201,148,58,0.1) 0%, transparent 70%),
      linear-gradient(165deg, #20102f 0%, #2a1438 48%, #160b24 100%);
    box-shadow:
      0 50px 120px rgba(0,0,0,0.9),
      0 0 90px rgba(142,68,196,0.35),
      0 0 30px rgba(201,148,58,0.15),
      inset 0 0 70px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(232,200,122,0.25);
    animation: inviteSway 7s ease-in-out infinite;
  }
  .invite-card.tilting{ animation: none; }
  @keyframes inviteSway{
    0%,100%{ transform: rotateX(2.5deg) rotateY(-3deg); }
    50%{ transform: rotateX(-2deg) rotateY(3.5deg); }
  }
  /* Double gold frame with corner stars */
  .invite-card::before{
    content: ''; position: absolute; inset: 12px;
    border: 1px solid rgba(201,148,58,0.45);
    border-radius: 7px;
    pointer-events: none;
    background:
      radial-gradient(circle 2.2px at 9px 9px, var(--gold-lt) 0 1.6px, transparent 2.4px),
      radial-gradient(circle 2.2px at calc(100% - 9px) 9px, var(--gold-lt) 0 1.6px, transparent 2.4px),
      radial-gradient(circle 2.2px at 9px calc(100% - 9px), var(--gold-lt) 0 1.6px, transparent 2.4px),
      radial-gradient(circle 2.2px at calc(100% - 9px) calc(100% - 9px), var(--gold-lt) 0 1.6px, transparent 2.4px);
  }
  /* Gold foil sheen that follows the cursor */
  .invite-sheen{
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--shx, 50%) var(--shy, 28%),
      rgba(255,238,196,0.18) 0%, rgba(232,200,122,0.06) 38%, transparent 62%);
    mix-blend-mode: screen;
  }
  .page-enter.invite .page-enter-sigil{
    width: 118px; height: 118px;
    margin: 0 auto 1.1rem;
    animation: sigilBreathe 4.5s ease-in-out infinite;
    opacity: 1;
    filter: drop-shadow(0 0 26px rgba(201,148,58,0.5));
  }
  @keyframes sigilBreathe{
    0%,100%{ transform: scale(1); filter: drop-shadow(0 0 18px rgba(201,148,58,0.4)); }
    50%{ transform: scale(1.04); filter: drop-shadow(0 0 32px rgba(232,200,122,0.65)); }
  }
  .invite-eyebrow{
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.85;
    margin-bottom: 0.9rem;
  }
  .invite-brand{
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.5rem, 5vw, 2rem);
    color: var(--bone);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    text-shadow: 0 2px 24px rgba(94,43,138,0.8);
  }
  .invite-brand .gilt{ color: var(--gold-lt); }
  .invite-ornament{
    color: var(--gold);
    font-size: 1rem;
    letter-spacing: 0.7em;
    margin: 1rem 0 0.9rem;
    opacity: 0.8;
  }
  .invite-text{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.12rem;
    color: var(--bone-dim);
    line-height: 1.6;
    margin-bottom: 1.7rem;
  }
  .invite-enter{
    display: inline-block;
    padding: 0.95rem 2.6rem;
    border: 1px solid rgba(232,200,122,0.6);
    border-radius: 40px;
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--gold) 50%, #a8801f 100%);
    color: #190c22;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 26px rgba(201,148,58,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    transition: box-shadow 0.4s, letter-spacing 0.4s, filter 0.4s;
  }
  .invite-enter:hover{
    filter: brightness(1.12);
    letter-spacing: 0.5em;
    box-shadow: 0 10px 40px rgba(232,200,122,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  .invite-hint{
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--bone-dim);
    animation: hintPulse 3.2s ease-in-out infinite;
  }
  @keyframes hintPulse{ 0%,100%{ opacity: 0.35; } 50%{ opacity: 0.85; } }
  /* Accepting the invitation: it rises past you into the chamber */
  .page-enter.invite.leaving{ pointer-events: none; }
  .page-enter.invite.leaving .invite-rise{
    transition: transform 1s cubic-bezier(.5,0,.8,.4), opacity 0.9s ease, filter 0.9s;
    transform: translateY(-60px) translateZ(300px) rotateX(8deg);
    opacity: 0;
    filter: blur(7px);
  }
  .page-enter.invite.leaving .invite-hint{ opacity: 0; transition: opacity 0.4s; }
  .page-enter.invite.hidden{ transform: none; }

  /* ---------- Torchlight that follows the cursor ---------- */
  .torchlight{
    position: fixed; inset: 0;
    z-index: 50;
    pointer-events: none;
    --mx: 50vw; --my: 40vh;
    background: radial-gradient(640px circle at var(--mx) var(--my),
      transparent 30%, rgba(9,5,14,0.30) 80%);
  }

  /* ---------- Gold dust motes drifting in the light ---------- */
  .dust-mote{
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: rgba(232,200,122,0.55);
    box-shadow: 0 0 5px rgba(232,200,122,0.45);
    filter: blur(0.4px);
    animation: dustDrift linear infinite;
  }
  @keyframes dustDrift{
    0%{ transform: translate(0,0); opacity: 0; }
    12%{ opacity: 0.7; }
    85%{ opacity: 0.45; }
    100%{ transform: translate(34px, -42vh); opacity: 0; }
  }

  /* ---------- 3D depth on scroll reveals (stepping deeper in) ---------- */
  .reveal{ transform: perspective(900px) rotateX(7deg) translateY(46px); }
  .reveal.in-view{ transform: perspective(900px) rotateX(0deg) translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .invite-card{ animation: none; }
    .reveal{ transform: none; }
    .torchlight, .dust-mote{ display: none; }
  }

  /* ============================================================
     CELESTIAL TAROT — generated card art, floating deck, stardust
     ============================================================ */
  section.tarot{
    background:
      linear-gradient(180deg, rgba(14,9,20,0.94) 0%, rgba(14,9,20,0.55) 16%, rgba(22,11,38,0.45) 50%, rgba(14,9,20,0.6) 84%, rgba(14,9,20,0.96) 100%),
      url("tarot-nebula.jpg") center / cover no-repeat;
  }

  /* The cards hang in the air at different depths, drifting */
  .tarot-deck{ min-height: 410px; }
  .tarot-card{ --tilt: 0deg; --tx: 0px; --ty: 0px; --tz: 0px; --sc: 1; }
  .tarot-deck .tarot-card:nth-child(1){ --tilt: -14deg; --tx: -18px; --ty: -36px; --tz: -85px; --sc: 0.88; animation-delay: -1.3s; }
  .tarot-deck .tarot-card:nth-child(2){ --tilt: -5deg;  --tx: 6px;   --ty: 24px;  --tz: 35px;  --sc: 1.06; animation-delay: -3.6s; }
  .tarot-deck .tarot-card:nth-child(3){ --tilt: 7deg;   --tx: -6px;  --ty: -28px; --tz: -45px; --sc: 0.97; animation-delay: -5.2s; }
  .tarot-deck .tarot-card:nth-child(4){ --tilt: 15deg;  --tx: 18px;  --ty: 32px;  --tz: -105px; --sc: 0.84; animation-delay: -2.4s; }
  .tarot-deck .tarot-card{
    transform: translate3d(var(--tx), var(--ty), var(--tz)) rotate(var(--tilt)) scale(var(--sc));
    animation: cardFloat 8s ease-in-out infinite;
  }
  @keyframes cardFloat{
    0%, 100%{ transform: translate3d(var(--tx), var(--ty), var(--tz)) rotate(var(--tilt)) scale(var(--sc)); }
    50%{ transform: translate3d(calc(var(--tx) + 9px), calc(var(--ty) - 20px), var(--tz)) rotate(calc(var(--tilt) * 0.6)) scale(var(--sc)); }
  }
  /* Dimmed cards keep floating, just recede */
  .tarot-deck .tarot-card.dimmed{
    transform: translate3d(var(--tx), var(--ty), calc(var(--tz) - 60px)) rotate(var(--tilt)) scale(0.78);
    opacity: 0.15;
  }
  /* Hover lift, flip and dim take back control of the transform */
  .tarot-deck .tarot-card:hover,
  .tarot-deck .tarot-card.flipped,
  .tarot-deck .tarot-card.dimmed{ animation: none; }

  /* Generated celestial card back */
  .tarot-back{
    background: url("tarot-back.jpg") center / cover no-repeat,
                radial-gradient(ellipse at center, #251130 0%, #120818 100%);
  }
  .tarot-back svg{ display: none; }
  .tarot-back::before{ border-color: rgba(232,200,122,0.35); }

  /* Gold-lit edges; brighter when the hand hovers */
  .tarot-face{
    box-shadow:
      0 20px 50px rgba(0,0,0,0.7),
      0 0 26px rgba(142,68,196,0.35),
      0 0 12px rgba(201,148,58,0.18),
      inset 0 0 30px rgba(0,0,0,0.35);
  }
  .tarot-card:hover:not(.flipped) .tarot-face{
    box-shadow:
      0 26px 60px rgba(0,0,0,0.75),
      0 0 44px rgba(168,95,217,0.5),
      0 0 24px rgba(232,200,122,0.4),
      inset 0 0 30px rgba(0,0,0,0.3);
  }

  /* The revealed face: your card floats on the nebula */
  .tarot-front{
    background:
      linear-gradient(180deg, rgba(24,12,40,0.55) 0%, rgba(14,9,20,0.88) 100%),
      url("tarot-nebula.jpg") center / cover no-repeat;
  }

  /* Stardust twinkling around the deck */
  .tarot-deck::before,
  .tarot-deck::after{
    content: '';
    position: absolute;
    inset: -50px -30px;
    pointer-events: none;
    background-image:
      radial-gradient(2px 2px at 8% 24%, rgba(232,200,122,0.9), transparent 100%),
      radial-gradient(1.5px 1.5px at 22% 70%, rgba(240,230,208,0.7), transparent 100%),
      radial-gradient(2.5px 2.5px at 37% 12%, rgba(201,148,58,0.8), transparent 100%),
      radial-gradient(1.5px 1.5px at 52% 84%, rgba(232,200,122,0.75), transparent 100%),
      radial-gradient(2px 2px at 66% 20%, rgba(240,230,208,0.65), transparent 100%),
      radial-gradient(1.5px 1.5px at 81% 64%, rgba(201,148,58,0.85), transparent 100%),
      radial-gradient(2px 2px at 93% 32%, rgba(232,200,122,0.8), transparent 100%);
    animation: deckTwinkle 4.5s ease-in-out infinite;
  }
  .tarot-deck::after{
    background-image:
      radial-gradient(1.5px 1.5px at 14% 50%, rgba(201,148,58,0.8), transparent 100%),
      radial-gradient(2px 2px at 28% 8%, rgba(232,200,122,0.7), transparent 100%),
      radial-gradient(1.5px 1.5px at 45% 92%, rgba(240,230,208,0.7), transparent 100%),
      radial-gradient(2.5px 2.5px at 60% 38%, rgba(232,200,122,0.85), transparent 100%),
      radial-gradient(1.5px 1.5px at 74% 78%, rgba(201,148,58,0.7), transparent 100%),
      radial-gradient(2px 2px at 88% 10%, rgba(240,230,208,0.75), transparent 100%);
    animation-delay: -2.2s;
  }
  @keyframes deckTwinkle{
    0%, 100%{ opacity: 0.3; }
    50%{ opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce){
    .tarot-deck .tarot-card{ animation: none; }
    .tarot-deck::before, .tarot-deck::after{ animation: none; }
  }

  /* ============================================================
     REAL PHOTOGRAPHY — Yasmine's portraits in frames & gallery
     ============================================================ */
  .about-portrait img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .gallery-item img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
  }
  .gallery-item:hover img{ transform: scale(1.05); }

  /* ============================================================
     THE TRIPTYCH — blended collage showpiece
     ============================================================ */
  .collage-band{ max-width: 1400px; margin: 0 auto; }
  .collage-frame{
    position: relative;
    border: 1px solid rgba(201,148,58,0.45);
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
      0 40px 110px rgba(0,0,0,0.8),
      0 0 90px rgba(142,68,196,0.28),
      inset 0 0 60px rgba(0,0,0,0.3);
  }
  .collage-frame::before{
    content: ''; position: absolute; inset: 12px;
    border: 1px solid rgba(232,200,122,0.25);
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
  }
  /* Edge mist + vignette so the collage melts into the page */
  .collage-frame::after{
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(14,9,20,0.55) 100%),
      linear-gradient(180deg, rgba(14,9,20,0.25) 0%, transparent 18%, transparent 82%, rgba(14,9,20,0.4) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .collage-frame img{
    display: block;
    width: 100%;
    height: auto;
    animation: collageDrift 22s ease-in-out infinite alternate;
  }
  @keyframes collageDrift{
    from{ transform: scale(1.03) translateX(-0.7%); }
    to{ transform: scale(1.07) translateX(0.7%); }
  }
  .collage-caption{
    text-align: center;
    margin-top: 1.5rem;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.85;
  }
  @media (prefers-reduced-motion: reduce){
    .collage-frame img{ animation: none; }
  }

  /* ============================================================
     ATMOSPHERIC BACKDROPS — hero film + scene photos behind cards
     ============================================================ */
  .page-hero-video{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.34;
    filter: hue-rotate(262deg) saturate(0.92);
  }
  .page-hero::after{
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
      radial-gradient(ellipse at center, rgba(14,9,20,0.25) 0%, rgba(14,9,20,0.75) 85%),
      linear-gradient(180deg, rgba(14,9,20,0.55) 0%, transparent 40%, rgba(14,9,20,0.9) 100%);
    pointer-events: none;
  }
  .page-hero > *:not(.page-hero-video){ position: relative; z-index: 2; }

  .creed{ overflow: hidden; isolation: isolate; }
  .creed-bg{
    position: absolute; inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    filter: saturate(1.05);
    transition: opacity 0.6s, transform 0.8s;
  }
  .creed-bg::after{
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,9,20,0.35) 0%, rgba(14,9,20,0.7) 100%);
  }
  .creed:hover .creed-bg{ opacity: 0.24; transform: scale(1.04); }

  /* ---------- Fine typographic + spacing polish (Yasmine's notes) ---------- */
  /* Breathing room inside the gilt name: Del Maro, not DelMaro */
  .page-hero h1{ word-spacing: 0.12em; }
  .page-hero h1 em{ word-spacing: 0.5em; }
  /* The invocation and the closing call no longer stack a void between them */
  .invocation{ padding: 5rem 2rem 3rem; }
  section.contact{ padding-top: 3.5rem; }
  /* Walk With Me: centered, with more air above the two doors */
  .cta-band{ text-align: center; }
  .cta-band h2{ margin-bottom: 0.6rem; }
  .cta-band .cta-row{ margin-top: 2.6rem; justify-content: center; }

  /* ---------- Centered jewel footer ---------- */
  .footer-crest{
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bone);
    margin-bottom: 2rem;
  }
  .footer-crest .gilt{ color: var(--gold-lt); }
  .footer-links{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 0;
    margin: 0 auto 0.9rem;
    padding: 0;
    max-width: 920px;
  }
  .footer-links li{ display: flex; align-items: center; }
  .footer-links li + li::before{
    content: '·';
    color: var(--gold-deep);
    margin: 0 1.1rem;
  }
  .footer-links a{
    color: var(--bone-dim);
    text-decoration: none;
    font-style: italic;
    font-size: 1.05rem;
    transition: color 0.3s, text-shadow 0.3s;
  }
  .footer-links a:hover{
    color: var(--gold-lt);
    text-shadow: 0 0 12px rgba(201,148,58,0.4);
  }
  .footer-links.secondary a{ font-size: 0.98rem; opacity: 0.85; }
  .footer-marks{ margin-top: 1.8rem; }
  @media (max-width: 600px){
    .footer-links{ flex-direction: column; gap: 0.55rem; }
    .footer-links li + li::before{ display: none; }
  }

  /* ---------- Grander gold frames on the letter form ---------- */
  .contact-form input,
  .contact-form textarea{
    border: 2px solid rgba(201,148,58,0.55);
    padding: 1.15rem 1.4rem;
    box-shadow: inset 0 0 24px rgba(0,0,0,0.35), 0 0 18px rgba(201,148,58,0.07);
  }
  .contact-form input:focus,
  .contact-form textarea:focus{
    border-color: var(--gold-lt);
    box-shadow: inset 0 0 24px rgba(0,0,0,0.3), 0 0 26px rgba(201,148,58,0.25);
  }

  /* ---------- Four clickable channel slots ---------- */
  .social-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    max-width: 1000px;
    margin: 1.6rem auto 0;
  }
  a.social-card{
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  a.social-card h4{ transition: color 0.3s; }
  a.social-card:hover{
    border-color: var(--gold-lt);
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -20px rgba(142,68,196,0.45), 0 0 30px rgba(201,148,58,0.15);
  }
  a.social-card:hover h4{ color: var(--gold-lt); }
  a.social-card:hover .info-icon{
    color: var(--gold-lt);
    filter: drop-shadow(0 0 14px rgba(232,200,122,0.5));
  }
  @media (max-width: 900px){
    .social-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px){
    .social-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- Recommended courses (Baal Kadmon, linked to the school) ---------- */
  .reco-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }
  .reco-card{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 340px;
    border: 1px solid rgba(201,148,58,0.35);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.5s, box-shadow 0.5s;
  }
  .reco-art{
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center 20%;
    /* the school's art is graded crimson; re-grade it amethyst */
    filter: hue-rotate(262deg) saturate(0.9);
    opacity: 0.85;
    transition: opacity 0.5s, transform 0.7s;
    z-index: 0;
  }
  .reco-veil{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,9,20,0.15) 0%, rgba(14,9,20,0.55) 55%, rgba(14,9,20,0.95) 100%);
    z-index: 1;
  }
  .reco-body{ position: relative; z-index: 2; padding: 1.6rem 1.5rem 1.4rem; }
  .reco-card:hover{
    transform: translateY(-6px);
    border-color: var(--gold-lt);
    box-shadow: 0 30px 60px -20px rgba(142,68,196,0.5), 0 0 40px rgba(201,148,58,0.18);
  }
  .reco-card:hover .reco-art{ opacity: 1; transform: scale(1.04); }
  .reco-title{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.12rem;
    color: var(--bone);
    letter-spacing: 0.06em;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }
  .reco-desc{
    font-style: italic;
    color: var(--bone);
    opacity: 0.85;
    font-size: 0.98rem;
    line-height: 1.55;
    margin-bottom: 1rem;
  }
  .reco-foot{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(201,148,58,0.25);
  }
  .reco-price{
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--gold-lt);
  }
  .reco-cta{
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    transition: color 0.3s, letter-spacing 0.3s;
  }
  .reco-card:hover .reco-cta{ color: var(--gold-lt); letter-spacing: 0.38em; }

  /* ---------- The eight pathways ---------- */
  .path-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
  }
  .path-card{
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 2rem 1.2rem 1.8rem;
    border: 1px solid rgba(201,148,58,0.28);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(36,16,52,0.5), rgba(14,9,20,0.75));
    transition: all 0.45s;
  }
  .path-card:hover{
    border-color: var(--gold-lt);
    transform: translateY(-5px);
    box-shadow: 0 22px 44px -18px rgba(142,68,196,0.45);
  }
  .path-name{
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--bone);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
  }
  .path-meta{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--bone-dim);
    font-size: 0.98rem;
  }
  .path-meta strong{
    font-family: 'Cinzel', serif;
    font-style: normal;
    color: var(--gold-lt);
  }

  /* ---------- Abstract art behind the contact info cards ---------- */
  .info-card{ position: relative; overflow: hidden; isolation: isolate; }
  .info-bg{
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.22;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.5s;
  }
  .info-card > *:not(.info-bg){ position: relative; z-index: 1; }
  .info-card:hover .info-bg{ opacity: 0.34; }

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

  /* The letter form sits a little lower, with air above it */
  .contact-form{ margin-top: 3rem; }

  /* ---------- Floating footer links with gold underlines ---------- */
  .footer-links{ gap: 0.8rem 1.1rem; }
  .footer-links li + li::before{ content: none; }
  .footer-links a{
    position: relative;
    display: inline-block;
    padding: 0.3em 0.55em 0.42em;
    animation: linkFloat 5.5s ease-in-out infinite;
  }
  .footer-links li:nth-child(2n) a{ animation-delay: -1.8s; }
  .footer-links li:nth-child(3n) a{ animation-delay: -3.4s; }
  .footer-links li:nth-child(5n) a{ animation-delay: -0.9s; }
  @keyframes linkFloat{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-4px); }
  }
  .footer-links a::after{
    content: '';
    position: absolute;
    left: 0.55em; right: 0.55em; bottom: 0.12em;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,148,58,0.7), transparent);
    transition: left 0.35s, right 0.35s, box-shadow 0.35s, background 0.35s;
  }
  .footer-links a:hover::after{
    left: 0; right: 0;
    background: linear-gradient(90deg, transparent, var(--gold-lt), transparent);
    box-shadow: 0 0 10px rgba(232,200,122,0.45);
  }
  @media (prefers-reduced-motion: reduce){
    .footer-links a{ animation: none; }
  }


  /* ---------- THE FLOATING DECK: 72 cards in the nebula ---------- */
  .tarot-controls{ text-align: center; margin-top: 2.2rem; }
  .tarot-shuffle{
    background: rgba(14,9,20,0.55);
    border: 1px solid rgba(201,148,58,0.55);
    color: var(--gold-lt);
    padding: 0.85rem 2.2rem;
    border-radius: 30px;
    font-family: 'Cinzel', serif;
    font-size: 0.76rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.35s;
  }
  .tarot-shuffle:hover{
    border-color: var(--gold-lt);
    box-shadow: 0 0 24px rgba(232,200,122,0.3);
    letter-spacing: 0.42em;
  }
  .tarot-deck.tarot-sky{
    display: block;
    position: relative;
    min-height: 560px;
    max-width: 1100px;
    margin: 2.4rem auto 0;
    perspective: 1400px;
  }
  .tarot-deck .tarot-card.sky-card{
    position: absolute;
    width: 92px;
    height: 158px;
    transform: translate(-50%,-50%) translateZ(var(--cz,0px)) rotate(var(--crot,0deg)) scale(var(--csc,1));
    animation: skyFloat var(--fdur,8s) ease-in-out var(--fdel,0s) infinite;
    cursor: pointer;
    transform-style: preserve-3d;
  }
  @keyframes skyFloat{
    0%, 100%{ transform: translate(-50%,-50%) translateZ(var(--cz,0px)) rotate(var(--crot,0deg)) scale(var(--csc,1)); }
    50%{ transform: translate(-50%, calc(-50% - 13px)) translateZ(var(--cz,0px)) rotate(calc(var(--crot,0deg) * 0.55)) scale(var(--csc,1)); }
  }
  .tarot-deck .tarot-card.sky-card.shuffling{
    transition: left 0.95s cubic-bezier(.45,0,.2,1), top 0.95s cubic-bezier(.45,0,.2,1);
  }
  .tarot-deck .tarot-card.sky-card:hover:not(.drawn):not(.dimmed){
    animation: none;
    transform: translate(-50%,-54%) translateZ(90px) rotate(0deg) scale(calc(var(--csc,1) * 1.18));
    transition: transform 0.3s;
    z-index: 30;
  }
  .tarot-deck .tarot-card.sky-card.drawn{
    animation: none;
    z-index: 60;
    transition: left 0.8s cubic-bezier(.2,.8,.2,1), top 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1);
    transform: translate(-50%,-50%) translateZ(150px) rotate(0deg) scale(1.9) rotateY(180deg);
  }
  .tarot-deck .tarot-card.sky-card.dimmed{
    animation: none;
    opacity: 0.12;
    pointer-events: none;
    transition: opacity 0.7s, transform 0.7s;
    transform: translate(-50%,-50%) translateZ(calc(var(--cz,0px) - 90px)) rotate(var(--crot,0deg)) scale(calc(var(--csc,1) * 0.8));
  }
  /* smaller faces for the small cards */
  .sky-card .tarot-symbol svg{ width: 34px; height: 34px; }
  .sky-card .tarot-roman{ font-size: 0.85rem; margin-bottom: 0.2rem; }
  .sky-card .tarot-name{ font-size: 0.6rem; letter-spacing: 0.08em; }
  .sky-card .tarot-face{ padding: 0.8rem 0.5rem; border-radius: 5px; }
  @media (max-width: 700px){
    .tarot-deck.tarot-sky{ min-height: 440px; }
    .tarot-deck .tarot-card.sky-card{ width: 64px; height: 110px; }
  }
  @media (prefers-reduced-motion: reduce){
    .tarot-deck .tarot-card.sky-card{ animation: none; }
  }

  /* ---------- Floating gold underlines in the top nav ---------- */
  nav ul a{
    position: relative;
    display: inline-block;
    padding-bottom: 0.45em;
    animation: linkFloat 6s ease-in-out infinite;
  }
  nav ul li:nth-child(2n) a{ animation-delay: -2.2s; }
  nav ul li:nth-child(3n) a{ animation-delay: -4.1s; }
  nav ul li:nth-child(5n) a{ animation-delay: -1.1s; }
  nav ul a::after{
    content: '';
    position: absolute;
    left: 12%; right: 12%; bottom: 0.18em;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,148,58,0.65), transparent);
    transition: left 0.35s, right 0.35s, box-shadow 0.35s, background 0.35s;
  }
  nav ul a:hover::after, nav ul a.active::after{
    left: 0; right: 0;
    background: linear-gradient(90deg, transparent, var(--gold-lt), transparent);
    box-shadow: 0 0 10px rgba(232,200,122,0.45);
  }
  @media (prefers-reduced-motion: reduce){ nav ul a{ animation: none; } }

  /* ---------- Three-card daily reading ---------- */
  .tarot-deck .tarot-card.sky-card.drawn{
    transform: translate(-50%,-50%) translateZ(150px) rotate(0deg) scale(1.45) rotateY(180deg);
  }
  .tarot-deck .tarot-card.sky-card.instant{ transition: none !important; }
  .tarot-readings{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1040px;
    margin: 3rem auto 0;
    text-align: center;
  }
  .tr-slot{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s, transform 0.9s;
  }
  .tr-slot.show{ opacity: 1; transform: translateY(0); }
  .tr-slot .tr-eyebrow{
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.4em;
    color: var(--blood-bright);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
  }
  .tr-slot h4{
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--gold-lt);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
    text-shadow: 0 2px 18px rgba(94,43,138,0.6);
  }
  .tr-slot .tr-message{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.08rem;
    color: var(--bone);
    opacity: 0.9;
    line-height: 1.75;
  }
  .tarot-lock{
    display: none;
    text-align: center;
    margin-top: 2.6rem;
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--bone-dim);
  }
  .tarot-lock.show{ display: block; animation: hintPulse 4s ease-in-out infinite; }
  @media (max-width: 800px){
    .tarot-readings{ grid-template-columns: 1fr; gap: 2.2rem; }
  }

  /* ---------- Reading synthesis + export ---------- */
  .tarot-synthesis{
    display: none;
    max-width: 640px;
    margin: 3rem auto 0;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.22rem;
    line-height: 1.8;
    color: var(--gold-lt);
    text-shadow: 0 2px 18px rgba(94,43,138,0.5);
  }
  .tarot-synthesis.show{ display: block; animation: inviteRise 1s cubic-bezier(.2,.8,.2,1) both; }
  .tarot-export{
    display: none;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: 2.4rem;
  }
  .tarot-export.show{ display: flex; }
  .tarot-export button{ cursor: pointer; }

  /* ---------- The Trio: a triangle of goddesses ---------- */
  .reco-grid.trio{
    grid-template-columns: repeat(2, minmax(0, 340px));
    justify-content: center;
    gap: 2rem;
    max-width: 760px;
    margin: 0 auto;
  }
  .reco-grid.trio .reco-card:first-child{
    grid-column: 1 / -1;
    width: min(360px, 100%);
    margin: 0 auto;
    transform: translateY(-6px);
  }
  .reco-grid.trio .reco-card:nth-child(2){ transform: rotate(-1.2deg); }
  .reco-grid.trio .reco-card:nth-child(3){ transform: rotate(1.2deg); }
  .reco-grid.trio .reco-card:hover{ transform: translateY(-8px) rotate(0deg); }
  .reco-goddess{
    position: absolute;
    top: 1.1rem;
    left: 0; right: 0;
    text-align: center;
    z-index: 2;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-lt);
    text-shadow: 0 2px 16px rgba(0,0,0,0.9), 0 0 26px rgba(94,43,138,0.8);
  }
  /* the grand door */
  .btn-grand{
    font-size: 1.05rem;
    padding: 1.4rem 3.6rem;
    letter-spacing: 0.32em;
    border-radius: 4px;
    box-shadow: 0 10px 44px rgba(201,148,58,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .btn-grand:hover{ letter-spacing: 0.4em; }
  @media (max-width: 700px){
    .reco-grid.trio{ grid-template-columns: 1fr; }
    .reco-grid.trio .reco-card:first-child{ width: 100%; }
  }

  /* fourth card closes the diamond */
  .reco-grid.trio .reco-card:nth-child(4){
    grid-column: 1 / -1;
    width: min(360px, 100%);
    margin: 0 auto;
    transform: translateY(6px);
  }
  .reco-grid.trio .reco-card:nth-child(4):hover{ transform: translateY(-4px); }

  /* ---------- Retreat announcement banner ---------- */
  .tba-banner{
    position: relative;
    min-height: 480px;
    border: 1px solid rgba(201,148,58,0.45);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    isolation: isolate;
  }
  .tba-art{
    position: absolute; inset: 0;
    background: url('retreat-tba.jpg') center / cover no-repeat, linear-gradient(180deg, #1d0f30, #0e0914);
    z-index: 0;
    transform: scale(1.02);
  }
  .tba-veil{
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(10,5,16,0.25) 0%, rgba(10,5,16,0.78) 100%);
    z-index: 1;
  }
  .tba-body{ position: relative; z-index: 2; padding: 3rem 1.6rem; max-width: 620px; }
  .tba-eyebrow{
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--blood-bright);
    margin-bottom: 1.2rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  }
  .tba-body h3{
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.2;
    color: var(--gold-lt);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 4px 30px rgba(0,0,0,0.9), 0 0 50px rgba(94,43,138,0.6);
    margin-bottom: 1.2rem;
  }
  .tba-body p{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--bone);
    line-height: 1.7;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
  }

  /* more air between the diamond and the grand door */
  .reco-grid.trio + .section-more{ margin-top: 9rem; }

  /* ---------- The Threshold Key (private preview gate) ---------- */
  .site-gate{
    position: fixed; inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
      radial-gradient(ellipse 80% 65% at 50% 30%, rgba(94,43,138,0.3) 0%, transparent 70%),
      rgba(7,3,12,0.97);
    backdrop-filter: blur(10px);
    transition: opacity 0.8s ease;
  }
  .site-gate.open{ opacity: 0; pointer-events: none; }
  .gate-card{
    width: min(420px, 92vw);
    text-align: center;
    padding: 3rem 2.4rem 2.6rem;
    border: 1px solid rgba(232,200,122,0.55);
    border-radius: 12px;
    background: linear-gradient(165deg, #20102f 0%, #2a1438 48%, #160b24 100%);
    box-shadow: 0 50px 120px rgba(0,0,0,0.9), 0 0 80px rgba(142,68,196,0.3), inset 0 0 60px rgba(0,0,0,0.45);
  }
  .gate-card.shake{ animation: gateShake 0.5s; }
  @keyframes gateShake{
    0%,100%{ transform: translateX(0); }
    20%{ transform: translateX(-9px); } 40%{ transform: translateX(8px); }
    60%{ transform: translateX(-6px); } 80%{ transform: translateX(4px); }
  }
  .gate-eyebrow{
    font-family: 'Cinzel', serif;
    font-size: 0.66rem; letter-spacing: 0.5em; text-transform: uppercase;
    color: var(--blood-bright); margin-bottom: 1rem;
  }
  .gate-brand{
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.6rem; color: var(--bone);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 1rem;
  }
  .gate-brand .gilt{ color: var(--gold-lt); }
  .gate-text{
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.08rem; color: var(--bone-dim); line-height: 1.6;
    margin-bottom: 1.6rem;
  }
  .gate-input{
    width: 100%;
    padding: 1rem 1.2rem;
    background: rgba(10,5,16,0.65);
    border: 2px solid rgba(201,148,58,0.5);
    border-radius: 6px;
    color: var(--bone);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
  }
  .gate-input:focus{ outline: none; border-color: var(--gold-lt); box-shadow: 0 0 22px rgba(232,200,122,0.25); }
  .gate-enter{
    display: inline-block;
    padding: 0.9rem 2.6rem;
    border: 1px solid rgba(232,200,122,0.6);
    border-radius: 40px;
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--gold) 50%, #a8801f 100%);
    color: #190c22;
    font-family: 'Cinzel', serif; font-weight: 600;
    font-size: 0.8rem; letter-spacing: 0.4em; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 26px rgba(201,148,58,0.4);
    transition: filter 0.3s, letter-spacing 0.3s;
  }
  .gate-enter:hover{ filter: brightness(1.12); letter-spacing: 0.48em; }
  .gate-wrong{
    display: none;
    margin-top: 1.1rem;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--blood-bright);
  }
  .gate-wrong.show{ display: block; }