@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: 280vh, sticky inner ─────────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps {
  position: relative;
  width: 100%;
  height: 280vh;
}

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  gap: 20px;
}

/* ── Warm vignette ─────────────────────────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(180, 150, 90, 0.07) 0%, transparent 68%);
}

/* ── Section header ────────────────────────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__header {
  text-align: center;
  will-change: opacity, transform;
  padding: 0 24px;
  flex-shrink: 0;
}

/* Eyebrow — font-body 10px tracking-[0.36em] uppercase color #9A9A9A */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin: 0 0 14px;
}

/* Headline — font-display font-light clamp(2rem,6vw,4rem) line-height 0.96 */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.29rem, 6vw, 4.579rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: #1A1A1A;
  margin: 0;
}

/* Italic metallic accent — "tek ruh." line */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__headline-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.10));
}

/* ── Grid wrapper (contains grid + raking light + mobile CTA) ─────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__grid-wrap {
  position: relative;
  width: 100%;
  max-width: 64rem;   /* max-w-5xl ≈ 64rem */
  padding: 0 24px;
  flex-shrink: 0;
}

/* 3-column grid — gap-3 mobile, gap-8 md, gap-12 lg */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__grid { gap: 32px; }
}
@media (min-width: 1024px) {
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__grid { gap: 48px; }
}

/* ── Plinth column ─────────────────────────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__plinth {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  will-change: opacity, transform, filter;
}
@media (min-width: 768px) {
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__plinth { gap: 14px; }
}

/* ── Archive index row: numeral · rule · dot · model code ──────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__idx-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__idx-num {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 1.832rem;
  line-height: 1;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__idx-rule {
  display: block;
  height: 1px;
  width: 20px;
  background: rgba(0,0,0,0.14);
  flex-shrink: 0;
}

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__idx-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(180, 150, 90, 0.55);
  flex-shrink: 0;
}

/* Model code — hidden on mobile, shown sm+ */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__idx-model {
  display: none;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #9A9A9A;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__idx-model { display: inline; }
}

/* ── Atmosphere video ──────────────────────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__video-wrap {
  width: 100%;
  max-width: 230px;
  transition: transform 900ms ease;
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__video-wrap:hover {
  transform: scale(1.05);
}

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__video-link {
  display: block;
}

/* AtmosphereVideo inner elements */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__atm-wrap {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__atm-poster, .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__atm-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.7s ease-out;
}

/* ── Name link ─────────────────────────────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__name-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 0;
}

/* Name h3 — clamp(1.5rem, 2.6vw, 2.2rem), hover -translateY(2px) */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.488rem, 2.6vw, 2.519rem);
  line-height: 1.1;
  color: #1A1A1A;
  margin: 0;
  transition: transform 500ms cubic-bezier(0.16,1,0.3,1);
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__name-link:hover .arcana-ps__name {
  transform: translateY(-2px);
}

/* Accent underline — h-px w-8, scale-x-0 → scale-x-100 on hover (500ms) */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__underline {
  display: block;
  height: 1px;
  width: 32px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 500ms cubic-bezier(0.16,1,0.3,1);
  margin-top: 4px;
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__name-link:hover .arcana-ps__underline {
  transform: scaleX(1);
}

/* ── Subtitle ──────────────────────────────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(0.973rem, 1.4vw, 1.145rem);
  line-height: 1.4;
  margin: 0;
}

/* ── Feature list — hidden on desktop, shown on mobile ─────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__feats {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__feat {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

/* ── CTA pill — hidden on mobile, shown sm+ ────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__pill {
  display: none;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  border-radius: 9999px;
  border: 1px solid #1A1A1A;
  padding: 6px 6px 6px 16px;
  text-decoration: none;
  color: #1A1A1A;
  transition: transform 300ms ease;
}
@media (min-width: 640px) {
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__pill { display: inline-flex; }
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__pill:active { transform: scale(0.98); }

/* Fill from left on hover */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__pill-bg {
  position: absolute;
  inset: 0;
  background: #1A1A1A;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.16,1,0.3,1);
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__pill:hover .arcana-ps__pill-bg {
  transform: scaleX(1);
}

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__pill-label {
  position: relative;
  z-index: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: color 300ms ease 100ms;
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__pill:hover .arcana-ps__pill-label {
  color: #FFFFFF;
}

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__pill-arrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1A1A1A;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: background 300ms ease, color 300ms ease;
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__pill:hover .arcana-ps__pill-arrow {
  background: #FFFFFF;
  color: #1A1A1A;
}

/* ── Raking light sweep ────────────────────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__raking {
  pointer-events: none;
  position: absolute;
  inset-y: 0;
  left: 0;
  width: 25%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.9), transparent);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* ── Mobile CTA — shown only on mobile ─────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-cta {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
@media (min-width: 640px) {
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-cta { display: none; }
}

/* Shared pill styles (same as .arcana-ps__pill) */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  border-radius: 9999px;
  border: 1px solid #1A1A1A;
  padding: 10px 10px 10px 20px;
  text-decoration: none;
  color: #1A1A1A;
  transition: transform 300ms ease;
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill:active { transform: scale(0.98); }

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill-bg {
  position: absolute;
  inset: 0;
  background: #1A1A1A;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.16,1,0.3,1);
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill:hover .arcana-ps__mobile-pill-bg { transform: scaleX(1); }

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill-label {
  position: relative;
  z-index: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: color 300ms ease 100ms;
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill:hover .arcana-ps__mobile-pill-label { color: #FFFFFF; }

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill-arrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1A1A1A;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: background 300ms ease, color 300ms ease;
}
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill:hover .arcana-ps__mobile-pill-arrow { background: #FFFFFF; color: #1A1A1A; }

/* ── Progress rail ─────────────────────────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__rail-track {
  width: 160px;
  height: 1px;
  background: rgba(0,0,0,0.12);
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__rail-track { width: 224px; }
}

.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__rail-fill {
  height: 100%;
  width: 100%;
  background: #C9A227;   /* gold-deep */
  transform-origin: left;
  will-change: transform;
}

/* ── Closing line ──────────────────────────────────────────────────────── */
.cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__closing {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: #4F4F4F;
  text-align: center;
  max-width: 40ch;
  margin: 0;
  padding: 0 24px;
  will-change: opacity, transform;
  flex-shrink: 0;
}

/* ── Mobile (< 640px): full-screen cards, sticky/parallax disabled ──────── */
@media (max-width: 639px) {
  /* Auto height so cards stack and scroll normally */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps { height: auto; }

  /* Disable sticky — normal block flow */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__sticky {
    position: relative;
    height: auto;
    overflow: visible;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 48px;
  }

  /* Header always visible */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__header {
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 24px;
  }

  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__headline {
    font-size: clamp(1.946rem, 6vw, 2.519rem);
    line-height: 1.0;
  }

  /* Grid: single column, no padding so plinths go full-width */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__grid-wrap {
    padding: 0;
    max-width: 100%;
  }

  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__grid {
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: stretch;
  }

  .cc_xzKzT14X1H_OhrKfFfAuB html {
    scroll-snap-type: y proximity;
  }

  /* Each product: full-screen snap card */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__plinth {
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    gap: 16px;
    padding: 24px 28px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    opacity: 0;
    transform: translateY(40px);
    filter: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.7s ease;
  }

  /* Larger video on full-screen card */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__video-wrap {
    max-width: 240px;
  }

  /* Subtitle visible on full-screen cards */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__subtitle {
    display: block;
    font-size: 1.088rem;
  }

  /* Show feat list */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__feats {
    display: flex;
  }

  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__name {
    font-size: clamp(1.603rem, 5vw, 2.175rem);
  }

  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__idx-num {
    font-size: 1.603rem;
  }

  /* Progress rail: hidden */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__rail-track {
    display: none;
  }

  /* Closing line: always visible after the cards */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__closing {
    opacity: 1 !important;
    transform: none !important;
    font-size: 12px;
    padding: 32px 24px;
  }

  /* Mobile CTA pill sizing */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill {
    gap: 8px;
    padding: 7px 7px 7px 16px;
  }

  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill-label {
    font-size: 11px;
    letter-spacing: 0.22em;
  }

  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__mobile-pill-arrow {
    width: 28px;
    height: 28px;
  }

  /* Raking light: hidden on mobile */
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__raking {
    display: none;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__plinth, .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__header, .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__closing, .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__rail-fill {
    transition: none !important;
    will-change: auto !important;
  }
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__video-wrap { transition: none !important; }
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__video-wrap:hover { transform: none; }
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__name { transition: none !important; }
  .cc_xzKzT14X1H_OhrKfFfAuB .arcana-ps__underline { transition: none !important; }
}
