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

/* ===== Section shell =====
   reference: py-24 md:py-36 px-8 md:px-16 */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst {
  width: 100%;
  padding: 96px 32px;   /* py-24 = 6rem, px-8 = 2rem */
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst {
    padding: 144px 64px;  /* py-36 = 9rem, px-16 = 4rem */
  }
}

/* Inner container — reference: max-w-6xl mx-auto */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__inner {
  max-width: 1152px;
  margin: 0 auto;
}

/* ===== Header =====
   reference: text-center mb-14 md:mb-20 */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__header {
  text-align: center;
  margin-bottom: 56px;   /* mb-14 = 3.5rem */
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__header {
    margin-bottom: 80px;  /* md:mb-20 = 5rem */
  }
}

/* ===== Eyebrow — FadeUp =====
   reference FadeUp: opacity 0→1, y 14→0, duration 0.9s, ease EASE=[0.22,1,0.36,1]
   viewport: once:true, margin:'-10% 0px'
   text-[10px] uppercase tracking-[0.42em] mb-4 var(--text-muted) */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin: 0 0 16px;   /* mb-4 = 1rem */
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__eyebrow--inview {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Headline =====
   reference: font-display font-light clamp(2.2rem,8vw,4.8rem) leading-[0.95] */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 8vw, 4.8rem);
  font-weight: 300;
  line-height: 1.05;
  color: #1A1A1A;
  margin: 0;
  display: block;
}

/* MaskedLines — overflow:hidden wrapper + inner rises from y:115%→0 */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__line-wrap {
  display: block;
  overflow: hidden;
  padding-top: 0.12em;
  margin-top: -0.12em;
  padding-bottom: 0.55em;
  margin-bottom: -0.55em;
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__line-inner {
  display: block;
  transform: translateY(115%);
  will-change: transform;
  transition: transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__line-inner--0.arcana-tst__line-inner--inview {
  transform: translateY(0);
  transition-delay: 0s;
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__line-inner--1.arcana-tst__line-inner--inview {
  transform: translateY(0);
  transition-delay: 0.08s;
}

/* Italic metallic accent */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__accent {
  font-style: italic;
  background-image: linear-gradient(180deg, #d9dbdf 0%, #bdc0c5 32%, #9a9ea3 66%, #84888d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)) drop-shadow(0 1px 4px rgba(0,0,0,0.1));
}

/* ===== Carousel track =====
   reference: flex gap-5 md:gap-4 overflow-x-auto snap-x snap-mandatory pb-1
   [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__track {
  display: flex;
  gap: 20px;           /* gap-5 = 1.25rem */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px; /* pb-1 = 0.25rem */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__track {
    gap: 16px;  /* md:gap-4 = 1rem */
  }
}

/* ===== Slide wrapper =====
   reference: snap-start shrink-0 w-full md:w-[calc((100%-2rem)/3)] flex */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__slide {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  display: flex;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__slide {
    width: calc((100% - 2rem) / 3);  /* 3 cards per view with 2×gap-4=2rem total gap */
  }
}

/* ===== Card =====
   reference motion.div: border p-8 flex flex-col w-full cursor-default
   initial:{opacity:0, y:28}, animate:{opacity:1,y:0} when sectionInView
   transition: duration:0.85, delay:Math.min(i,2)*0.14
   Entrance triggered when .arcana-tst--inview is on the section.
   nth-child maps to slide positions (1-indexed). */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__card {
  border: 1px solid rgba(0, 0, 0, 0.08);   /* var(--border) */
  padding: 32px;                             /* p-8 = 2rem */
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: default;
  background: #ffffff;
  opacity: 0;
  transform: translateY(28px);
  /* All three transitioning props covered so inline-style overrides from tilt handlers stay consistent */
  transition: opacity 0.85s ease,
              transform 0.85s ease,
              border-color 0.5s ease;
}

/* Entrance stagger: delay = Math.min(i, 2) * 0.14 */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst--inview .arcana-tst__slide:nth-child(1) .arcana-tst__card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst--inview .arcana-tst__slide:nth-child(2) .arcana-tst__card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.14s;
}

/* All remaining cards: delay capped at 0.28s (Math.min(i,2)*0.14 where i≥2) */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst--inview .arcana-tst__slide:nth-child(n+3) .arcana-tst__card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.28s;
}

/* Border brightens on hover — reference: hover:border-black/[0.14] */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__card:hover {
  border-color: rgba(0, 0, 0, 0.14);
}

/* ===== Quote mark =====
   reference motion.div: font-display leading-none mb-5 select-none
   font-size:4.5rem color:rgba(0,0,0,0.06) display:inline-block transformOrigin:'left top'
   whileHover:{scale:1.18} duration:0.7 ease:[0.16,1,0.3,1] */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4.5rem;
  line-height: 1;
  margin-bottom: 20px;  /* mb-5 = 1.25rem */
  color: rgba(0, 0, 0, 0.06);
  display: inline-block;
  transform-origin: left top;
  user-select: none;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scale on direct hover of the quote mark element */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__quote-mark:hover {
  transform: scale(1.18);
}

/* ===== Quote text =====
   reference: font-display font-light italic leading-[1.65] flex-1 mb-8
   font-size:1.1rem color:var(--text-secondary) transition-colors duration-500 */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: #4F4F4F;
  flex: 1;
  margin: 0 0 32px;   /* mb-8 = 2rem */
}

/* ===== Footer — hairline + author/badge row =====
   reference: border-t pt-5 flex items-center justify-between */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 20px;   /* pt-5 = 1.25rem */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== Author name =====
   reference: font-body text-[12px] tracking-wide color:var(--text-primary)
   group-hover:opacity-80 transition-colors duration-400 */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__author {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.025em;   /* tracking-wide */
  color: #1A1A1A;
  margin: 0;
  transition: opacity 0.4s ease;
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__card:hover .arcana-tst__author {
  opacity: 0.8;
}

/* ===== Location =====
   reference: font-body text-[10px] tracking-[0.15em] mt-0.5 color:var(--text-muted) */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__location {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #9A9A9A;
  margin: 2px 0 0;    /* mt-0.5 = 0.125rem ≈ 2px */
}

/* ===== Edition badge =====
   reference: font-body text-[9px] tracking-[0.2em] uppercase px-2.5 py-1 border
   border: var(--border), hover:border-black/20, color comes from editionColor() inline */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__badge {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;   /* py-1=0.25rem, px-2.5=0.625rem */
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: border-color 0.5s ease;
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__card:hover .arcana-tst__badge {
  border-color: rgba(0, 0, 0, 0.20);
}

/* ===== Controls =====
   reference: flex items-center justify-center gap-5 md:gap-7 mt-9 md:mt-11 */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;           /* gap-5 = 1.25rem */
  margin-top: 36px;    /* mt-9 = 2.25rem */
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__controls {
    gap: 28px;          /* md:gap-7 = 1.75rem */
    margin-top: 44px;   /* md:mt-11 = 2.75rem */
  }
}

/* ===== Prev / Next arrow buttons =====
   reference: w-10 h-10 border rounded-full transition-all duration-500
   disabled:opacity-25 disabled:cursor-default hover:enabled:border-black/30
   borderColor:var(--border-mid) color:var(--text-primary) */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;          /* w-10 */
  height: 40px;         /* h-10 */
  border: 1px solid rgba(0, 0, 0, 0.12);   /* --border-mid */
  border-radius: 100%;
  background: none;
  color: #1A1A1A;
  cursor: pointer;
  padding: 0;
  transition: all 0.5s ease;
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__nav:not(:disabled):hover {
  border-color: rgba(0, 0, 0, 0.30);
}

/* ===== Dot indicators =====
   reference: h-2 rounded-full transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
   width/background via inline style (dynamic: 22px active / 8px inactive) */
.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__dots {
  display: flex;
  align-items: center;
  gap: 8px;    /* gap-2 = 0.5rem */
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__dots {
    gap: 10px;  /* md:gap-2.5 = 0.625rem */
  }
}

.cc_xzKzT14X1H_DYGvcM4mYX .arcana-tst__dot {
  height: 8px;          /* h-2 = 0.5rem */
  border-radius: 100px;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}