/* stylelint-disable selector-list-comma-newline-after */


.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.blog-header {
  border-bottom: 1px solid #e5e5e5;
}

.blog-header-logo {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
  font-size: 2.25rem;
}

.blog-header-logo:hover {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
}

.display-4 {
  font-size: 2.5rem;
}
@media (min-width: 768px) {
  .display-4 {
    font-size: 3rem;
  }
}

.flex-auto {
  flex: 0 0 auto;
}

.h-250 { height: 250px; }
@media (min-width: 768px) {
  .h-md-250 { height: 250px; }
}

/* Pagination */
.blog-pagination {
  margin-bottom: 4rem;
}

/*
 * Blog posts
 */
.blog-post {
  margin-bottom: 4rem;
}
.blog-post-title {
  font-size: 2.5rem;
}
.blog-post-meta {
  margin-bottom: 1.25rem;
  color: #727272;
}

/*
 * Footer
 */
.blog-footer {
  padding: 2.5rem 0;
  color: #727272;
  text-align: center;
  background-color: #f9f9f9;
  border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
  margin-bottom: 0;
}

@media (max-width: 460px) {
	.breakpoint td {
	  display: block;
	  padding: 8px 0px;
	  font-size: 14px;
	}
}
  
  .breakpoint td {
	border-top: 1px solid rgb(237, 237, 237);
	padding: 10px 5px;
	vertical-align: top;
  }

  blockquote {
	  font-family: "DM Serif Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
    font-style: italic;
  }

  .plugin-tags .plugin-content{
  display: flex;
  align-items: center;
  justify-content: center;
} 
  
  .plugin-tags ul {
    list-style: none;
    padding-left: 2px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /*line-height: 2.75rem;
    --bs-link-color-rgb: 0,0,0;*/
  }

  .plugin-tags ul li {
    /*flex: 1 auto;*/
  } 

  .plugin-tags ul a {
    font-family: "DM Serif Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
    display: block;
    font-size: calc(var(--size) * 0.25rem + 0.5rem);
    padding: 0.125rem 0.25rem;
    text-decoration: none;
    text-transform: lowercase;
    position: relative;
  }

  [data-size="0"] {
    --size: 0;
  }
  [data-size="1"] {
    --size: 1;
  }
  [data-size="2"] {
    --size: 2;
  }
  [data-size="3"] {
    --size: 3;
  }
  [data-size="4"] {
    --size: 4;
  }
  [data-size="5"] {
    --size: 5;
  }

/* Tarot start */
        body.tarot {
            background-color: #f8f9fa;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .tarot-deck {
            position: relative;
            width: 200px;
            height: 300px;
            margin: 50px auto;
        }
        .tarot-card {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 16px;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
            transform-style: preserve-3d;
            transition: transform 0.8s ease, bottom 0.8s ease;
        }
        .tarot-card .front,
        .tarot-card .back {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 16px;
            background-size: cover;
            background-position: center;
            backface-visibility: hidden;
            border: 12px solid #fff;
        }
        .tarot-card .front {
            transform: rotateY(180deg);
        }
        .tarot-card .back {
            background-image: url('https://memoiri.app/bl-content/uploads/pages/16aa81bff77d0db2786bbb3e6d937839/backside.webp');
        }
        .tarot-card .card-number {
            position: absolute;
            font-size: 1.2rem;
            font-weight: bold;
            background: #fff;
            color: #333;
            border-radius: 4px;
            text-align: center;
            line-height: 32px;
            width: 32px;
            height: 32px;
        }
        .tarot-card .card-number.top-left {
            top: -3px;
            left: -3px;
            border-radius: 0 0 12px 0;
        }
        .tarot-card .card-number.bottom-right {
            bottom: -3px;
            right: -3px;
            border-radius: 12px 0 0 0;
        }
        .tarot-card-flipped {
            transform: rotateY(180deg);
        }
        #pull-card-btn {
            margin-top: 20px;
        }
        .card-description {
            margin-top: 10px;
            font-size: 1.2rem;
            color: #333;
        }
/* Tarot End */

    /* ---------- HERO ---------- */
    .hero-title{font-size:clamp(2.7rem,6vw,4.6rem);font-weight:700;line-height:1.15;letter-spacing:-.4px}
    .hero-sub{font-size:1.25rem;color:#7d7d7d}

    /* phone wrapper + layers */
    .phone-wrapper{width:340px;max-width:85vw;position:relative;display:inline-block;box-shadow:0 25px 60px rgba(0,0,0,.18); border-radius: 4rem;}
    .phone-screen{width:100%;display:block;border-radius:4rem; padding:10px;}
    .phone-frame{position:absolute;inset:0;width:105%;height: 103%; pointer-events:none;display:block;margin:-10px;}

    /* pop‑in + gentle float */
    @keyframes pop{to{opacity:1;transform:scale(1) rotate(var(--angle))}}
    @keyframes bob{0%,100%{transform:translateY(0) rotate(var(--angle))}50%{transform:translateY(-20px) rotate(var(--angle))}}
    .floating{position:absolute;width:180px;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.25);opacity:0;transform:scale(.9) rotate(var(--angle));animation:pop .6s ease-out forwards,bob 12s ease-in-out infinite}

    /* card placements and angles */
    .card-1{top:58%;left:13%; --angle:-12deg;animation-delay:.2s}
    .card-2{top:48%;left:31%; --angle:  8deg;animation-delay:.4s}
    .card-3{top:65%;left:37%; --angle: -7deg;animation-delay:.6s}
    .card-4{top:79%;left:20%; --angle:  6deg;animation-delay:.8s}
    .card-5{top:52%;right:34%;--angle: 10deg;animation-delay:1s; z-index: 2;}
    .card-6{top:45%;right:16%;--angle: -6deg;animation-delay:1.2s; z-index: 2;}
    .card-7{top:60%;right: 7%;--angle:  9deg;animation-delay:1.4s}
    .card-8{top:78%;right:22%;--angle: -9deg;animation-delay:1.6s; z-index: 2;}


    /* minimal custom styling */
    .number-circle{
      width:48px;
      height:48px;
      min-width:48px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50% !important;
    }
    .feature-item{cursor:pointer;}
    .feature-item.active .number-circle{background-color:#0d6efd!important;color:#fff!important;}

    /* phone mock‑up */
    .phone-mockup{position:relative;display:inline-block;width:100%;max-width:300px;}
    .features .phone-screen{
      position:absolute;
      top:9%;
      left:11%;
      width:78%;
      height:73%;
      object-fit:cover;
      border-radius:12px;
      z-index:1; /* sit behind the frame */
    }


    #story-wrapper {
      position: relative;
      overflow: hidden;
    }
    #story-container {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      margin: 0 0;
      scrollbar-width: none;
    }
    #story-container::-webkit-scrollbar {
      display: none;
    }
    .story-item {
      flex: 0 0 auto;
      width: 300px;
      height: 450px;
      margin-right: 1rem;
      scroll-snap-align: start;
    }
    .story-card {
      position: relative;
      height: 100%;
      border-radius: 1rem;
      overflow: hidden;
      background-color: #000;
      color: white;
    }
    .story-card img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }
    .story-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.85));
      z-index: 1;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .story-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .story-caption {
      font-size: 0.9rem;
      margin-bottom: 1rem;
      color: #ddd;
    }
    .story-button {
      align-self: start;
    }
    .story-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.5);
      border: none;
      color: white;
      font-size: 2rem;
      z-index: 2;
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 50%;
    }
    .story-nav.left { left: 0.5rem; }
    .story-nav.right { right: 0.5rem; }