*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --black: #07050a;
    --near-black: #0e0b13;
    --gold: #c9a84c;
    --gold-light: #e8c97a;
    --gold-dim: #7a6330;
    --white: #f0ead8;
    --white-dim: #c8c0ae;
    --white-faint: rgba(240,234,216,0.06);
  }
  html { scroll-behavior: smooth; }
  body {
    background: var(--black);
    color: var(--white);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    cursor: none;
    overflow-x: hidden;
  }

  /* CURSOR */
  #cursor {
    position: fixed; width: 8px; height: 8px;
    background: var(--gold); border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%,-50%);
    transition: transform 0.12s ease;
    mix-blend-mode: screen;
  }
  #cursor-ring {
    position: fixed; width: 28px; height: 28px;
    border: 1px solid rgba(201,168,76,0.4); border-radius: 50%;
    pointer-events: none; z-index: 9998;
    transform: translate(-50%,-50%);
    transition: width 0.2s, height 0.2s, border-color 0.2s;
  }
  .ghost-particle {
    position: fixed; pointer-events: none; z-index: 9997;
    opacity: 0; transform: translate(-50%,-50%);
    animation: ghostRise 2.4s ease-out forwards;
    color: rgba(240,234,216,0.5); font-family: serif; font-style: italic;
  }
  @keyframes ghostRise {
    0%   { opacity:0.75; transform:translate(-50%,-50%) scale(1); }
    40%  { opacity:0.35; }
    100% { opacity:0; transform:translate(-50%,-220%) scale(0.2) rotate(12deg); filter:blur(4px); }
  }

  /* FOG */
  #fog-canvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }

  /* NAV */
  nav {
    position: fixed; top:0; left:0; right:0; z-index:100;
    padding: 1.1rem 3rem;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(to bottom, rgba(7,5,10,0.97) 0%, transparent 100%);
  }
  .nav-logo {
    font-family: "Cinzel Decorative", serif; font-size: 0.8rem;
    color: var(--gold); letter-spacing: 0.1em; text-decoration: none;
  }
  .nav-links { display:flex; gap:2.5rem; list-style:none; }
  .nav-links a {
    font-family: "Cinzel", serif; font-size: 0.63rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--white-dim); text-decoration: none; transition: color 0.3s;
  }
  .nav-links a:hover { color: var(--gold); }

  /* HERO */
  .hero {
    position: relative; min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 7rem 2rem 5rem;
    overflow: hidden; z-index: 2;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 70% 55% at 50% 45%, rgba(35,18,65,0.6) 0%, transparent 70%),
      radial-gradient(ellipse 50% 35% at 15% 85%, rgba(10,22,10,0.7) 0%, transparent 55%),
      radial-gradient(ellipse 50% 35% at 85% 75%, rgba(10,22,10,0.5) 0%, transparent 55%),
      var(--black);
    z-index: -1;
  }

  /* LOGO */
  .hero-logo-wrap {
    position: relative; width: 210px; height: 210px;
    margin-bottom: 1.8rem;
    display: flex; align-items: center; justify-content: center;
  }
  .hero-logo-img {
    width: 160px; height: 160px; object-fit: contain;
    position: relative; z-index: 2;
    animation: pulseGlow 3.5s ease-in-out infinite alternate;
  }
  @keyframes pulseGlow {
    from { filter: drop-shadow(0 0 14px rgba(201,168,76,0.4)) drop-shadow(0 0 40px rgba(201,168,76,0.12)); }
    to   { filter: drop-shadow(0 0 28px rgba(201,168,76,0.75)) drop-shadow(0 0 70px rgba(201,168,76,0.28)); }
  }
  .rune-ring { position:absolute; inset:0; animation: spinRing 55s linear infinite; }
  .rune-ring-inner { position:absolute; inset:0; animation: spinRing 38s linear infinite reverse; }
  @keyframes spinRing { to { transform: rotate(360deg); } }

  /* HERO TITLE — arched like business card */
  .hero-eyebrow {
    font-family: "Cinzel", serif; font-size: 0.58rem;
    letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--gold-dim); margin-bottom: 0.5rem;
  }
  /* The main title uses an SVG arc path to match the ouija card style */
  .hero-title-svg { width: min(100%, 780px); display: block; margin: 0 auto 0.4rem; overflow: visible; }
  .hero-sub {
    font-family: "Cinzel Decorative", serif;
    font-size: clamp(0.8rem, 1.8vw, 1.1rem);
    color: var(--gold-dim); letter-spacing: 0.18em; margin-bottom: 0.4rem;
  }
  .hero-location {
    font-family: "Cinzel", serif; font-size: 0.65rem;
    letter-spacing: 0.38em; text-transform: uppercase;
    color: rgba(122,99,48,0.65); margin-bottom: 2.2rem;
  }
  .hero-tagline {
    font-family: "IM Fell English", serif; font-style: italic;
    font-size: clamp(1rem, 1.9vw, 1.25rem);
    color: var(--white-dim); max-width: 480px;
    margin-bottom: 3rem; line-height: 1.95;
    animation: candleFlicker 5s ease-in-out infinite;
  }
  @keyframes candleFlicker {
    0%,100%{opacity:1;} 18%{opacity:0.88;} 42%{opacity:1;} 58%{opacity:0.92;} 82%{opacity:1;} 91%{opacity:0.84;}
  }
  .gold-rule { display:flex; align-items:center; gap:0.8rem; margin:1.4rem auto; width:fit-content; }
  .gold-rule-line { width:55px; height:1px; background:linear-gradient(to right, transparent, var(--gold-dim)); }
  .gold-rule-line.rev { background:linear-gradient(to left, transparent, var(--gold-dim)); }
  .gold-rule-glyph { color:var(--gold-dim); font-size:0.85rem; letter-spacing:0.3em; }
  .cta-btn {
    display: inline-block; border: 1px solid var(--gold-dim);
    padding: 0.75rem 2.5rem;
    font-family: "Cinzel", serif; font-size: 0.63rem;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold); text-decoration: none;
    position: relative; overflow: hidden; transition: color 0.35s;
  }
  .cta-btn::before {
    content:""; position:absolute; inset:0; background:var(--gold);
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.4s ease; z-index:-1;
  }
  .cta-btn:hover::before { transform:scaleX(1); }
  .cta-btn:hover { color:var(--black); cursor:none; }

  /* SECTIONS */
  section { position:relative; z-index:2; padding:6rem 2rem; }
  .section-inner { max-width:1120px; margin:0 auto; }
  .section-eyebrow {
    font-family:"Cinzel",serif; font-size:0.56rem;
    letter-spacing:0.4em; text-transform:uppercase;
    color:var(--gold-dim); display:block; text-align:center; margin-bottom:0.7rem;
  }
  h2 {
    font-family:"Cinzel Decorative",serif;
    font-size:clamp(1.4rem,3.5vw,2.4rem);
    color:var(--gold-light); text-align:center;
    margin-bottom:1rem; line-height:1.3;
  }
  .section-lede {
    font-family:"IM Fell English",serif; font-style:italic;
    text-align:center; color:var(--white-dim);
    max-width:540px; margin:0 auto 3.5rem;
    font-size:1.05rem; line-height:1.9;
  }

  /* OFFERINGS — image cards */
  #offerings {
    background:
      radial-gradient(ellipse 90% 40% at 50% 0%, rgba(10,20,10,0.5) 0%, transparent 60%),
      var(--near-black);
  }
  .offerings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
  .offering-card {
    background: rgba(14,11,20,0.85);
    border: 1px solid rgba(201,168,76,0.12);
    overflow: hidden; position: relative;
    transition: border-color 0.4s, transform 0.35s;
    cursor: none;
  }
  .offering-card::after {
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(to right, transparent, var(--gold-dim), transparent);
    transform:scaleX(0); transition:transform 0.45s ease;
  }
  .offering-card:hover { border-color:rgba(201,168,76,0.38); transform:translateY(-4px); }
  .offering-card:hover::after { transform:scaleX(1); }

  .card-img-wrap {
    width: 100%; aspect-ratio: 4/3; overflow: hidden;
    background: #0d0a14;
    display: flex; align-items: center; justify-content: center;
  }
  .card-img-wrap svg { width:100%; height:100%; }
  .card-body { padding: 1.4rem 1.4rem 1.6rem; }
  .card-title {
    font-family:"Cinzel",serif; font-size:0.7rem;
    letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold);
  }

  /* MARKETS — clean list */
  #markets { background:var(--black); }
  .markets-board {
    max-width: 680px; margin: 0 auto;
    border: 1px solid rgba(201,168,76,0.2);
    background: rgba(12,9,18,0.9);
    padding: 3rem 3.5rem;
    position: relative;
  }
  .markets-board::before {
    content:""; position:absolute; inset:8px;
    border:1px solid rgba(201,168,76,0.07); pointer-events:none;
  }
  /* Corner accents */
  .markets-board .corner {
    position:absolute; width:22px; height:22px;
  }
  .markets-board .corner.tl { top:4px; left:4px; border-top:1px solid var(--gold-dim); border-left:1px solid var(--gold-dim); }
  .markets-board .corner.tr { top:4px; right:4px; border-top:1px solid var(--gold-dim); border-right:1px solid var(--gold-dim); }
  .markets-board .corner.bl { bottom:4px; left:4px; border-bottom:1px solid var(--gold-dim); border-left:1px solid var(--gold-dim); }
  .markets-board .corner.br { bottom:4px; right:4px; border-bottom:1px solid var(--gold-dim); border-right:1px solid var(--gold-dim); }

  .market-item {
    display: flex; align-items: flex-start; gap: 1.2rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(201,168,76,0.08);
  }
  .market-item:last-child { border-bottom: none; padding-bottom: 0; }
  .market-item:first-child { padding-top: 0; }
  .market-bullet {
    color: var(--gold-dim); font-size: 0.5rem;
    margin-top: 0.6rem; flex-shrink: 0;
  }
  .market-name {
    font-family:"Cinzel",serif; font-size:0.8rem;
    letter-spacing:0.12em; text-transform:uppercase;
    color:var(--gold-light); margin-bottom:0.2rem;
  }
  .market-detail {
    font-family:"Cormorant Garamond",serif; font-size:0.92rem;
    color:var(--white-dim); line-height:1.65;
  }

  /* ABOUT */
  #about {
    background:
      radial-gradient(ellipse 100% 60% at 50% 50%, rgba(30,14,55,0.3) 0%, transparent 65%),
      var(--near-black);
  }
  .about-inner { max-width:820px; margin:0 auto; text-align:center; }
  .about-body { font-size:1.08rem; color:var(--white-dim); line-height:2; margin-bottom:1.4rem; }
  .about-body em { font-family:"IM Fell English",serif; font-style:italic; color:var(--white); }
  .tarot-row { display:flex; justify-content:center; gap:1.5rem; margin:3rem 0; flex-wrap:wrap; }
  .tarot-card {
    width:148px; border:1px solid rgba(201,168,76,0.22);
    padding:1.8rem 1rem 1.4rem; text-align:center;
    background:rgba(12,8,18,0.9);
    transition:transform 0.4s, box-shadow 0.4s;
  }
  .tarot-card:hover { transform:translateY(-8px) rotate(-1deg); box-shadow:0 20px 40px rgba(0,0,0,0.7),0 0 20px rgba(201,168,76,0.12); }
  .tarot-glyph { font-size:2.2rem; margin-bottom:0.9rem; display:block; }
  .tarot-label { font-family:"Cinzel",serif; font-size:0.56rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-dim); }

  /* CONTACT — with candles */
  #contact {
    background: var(--black);
    text-align: center;
    padding-bottom: 0;
    overflow: visible;       /* let flame glow bleed if needed */
  }

  .contact-candle-scene {
    /* Wider than the grimoire so the candle row can spread out beneath it */
    max-width: 900px;
    margin: 0 auto;
    position: relative;
  }

  .contact-grimoire {
    position: relative; z-index: 2;
    background: rgba(12,9,18,0.95);
    border: 1px solid rgba(201,168,76,0.2);
    padding: 3rem 2.8rem 3rem;
    margin: 0 auto;
    max-width: 480px;
  }
  .contact-grimoire::before {
    content:""; position:absolute; inset:8px;
    border:1px solid rgba(201,168,76,0.07); pointer-events:none;
  }
  .contact-line { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1rem 0; flex-wrap:wrap; }
  .contact-line a {
    font-family:"Cormorant Garamond",serif; font-size:1.05rem;
    color:var(--white-dim); text-decoration:none; transition:color 0.3s;
    overflow-wrap:anywhere; word-break:break-word; min-width:0;
  }
  .contact-line a:hover { color:var(--gold-light); }
  .contact-icon { color:var(--gold-dim); font-size:1rem; }
  .contact-note {
    font-family:"IM Fell English",serif; font-style:italic;
    font-size:0.9rem; color:rgba(200,192,174,0.5);
    margin-top:1.8rem; line-height:1.85;
  }

  /* CANDLES — sit inside contact section, just under the grimoire.
     Canvas is tall enough that even the warm flame glow has room to render
     fully within the bitmap (clipping happens at the canvas edge regardless
     of CSS overflow), and its background is transparent so the soft edges
     of the glow blend into the contact section's black above. */
  #candle-canvas {
    display: block;
    width: 100%;
    height: 320px;
    margin-top: 1.5rem;
    margin-bottom: -2px;     /* overlap footer border so wax sits ON the line */
    pointer-events: none;
    position: relative;
    z-index: 1;
  }
  .candle-row {
    position: relative; z-index: 1;
    display: flex; justify-content: center;
    align-items: flex-end;
    gap: 0; margin-top: -1px;
    pointer-events: none;
  }
  .candle-wrap {
    display: flex; flex-direction: column; align-items: center;
    position: relative;
  }
  /* Flame glow light that illuminates the contact box */
  .candle-light {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: flamePulse 2.8s ease-in-out infinite alternate;
  }
  @keyframes flamePulse {
    0%   { opacity: 0.55; transform: scale(1); }
    30%  { opacity: 0.7; transform: scale(1.06); }
    60%  { opacity: 0.48; transform: scale(0.96); }
    80%  { opacity: 0.65; transform: scale(1.04); }
    100% { opacity: 0.52; transform: scale(0.98); }
  }

  /* FOOTER */
  footer {
    position:relative; z-index:2;
    background:var(--black);
    border-top:1px solid rgba(201,168,76,0.15);
    text-align:center; padding:2.5rem;
  }
  .footer-logo-row { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:0.6rem; }
  .footer-logo-row img { width:34px; filter:drop-shadow(0 0 6px rgba(201,168,76,0.35)); }
  .footer-name { font-family:"Cinzel Decorative",serif; font-size:0.82rem; color:var(--gold); letter-spacing:0.15em; }
  .footer-sub { font-family:"Cinzel",serif; font-size:0.56rem; letter-spacing:0.28em; text-transform:uppercase; color:rgba(200,185,140,0.65); margin-top:0.4rem; }

  /* DECO */
  .deco-rule { display:flex; align-items:center; gap:0.8rem; justify-content:center; margin:2.5rem 0; opacity:0.45; }
  .deco-rule-line { flex:1; max-width:110px; height:1px; background:linear-gradient(to right, transparent, var(--gold-dim)); }
  .deco-rule-line.rev { background:linear-gradient(to left, transparent, var(--gold-dim)); }
  .deco-rule span { font-size:0.85rem; color:var(--gold-dim); letter-spacing:0.35em; }

  /* REVEAL */
  .reveal { opacity:0; transform:translateY(22px); transition:opacity 0.85s ease, transform 0.85s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }

  @media(max-width:680px){
    nav{padding:1rem 1.3rem;}
    .nav-links{gap:1rem;}
    .nav-links a{font-size:0.56rem;}
    section{padding:4rem 1.2rem;}
    .markets-board{padding:2rem 1.4rem;}
    .contact-grimoire{padding:2rem 1.1rem;}
    .contact-line{gap:0.6rem;}
    .contact-line a{font-size:0.95rem;}
  }