/* journey.css — Our Journey page redesign
 * Loaded only on page 169 (our-journey)
 * v1.0.0
 */

/* ─── Full-width breakout from WP content container ─── */
.sl-journey-wrap {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ─── Custom cursor — pointer devices only, not touch ─── */
@media (pointer: fine) {
  body, a, button { cursor: none !important; }
}

#slj-cur {
  position: fixed;
  top: 0; left: 0;           /* GSAP translates from this origin */
  width: 22px; height: 22px;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}
#slj-cur-dot {
  position: fixed;
  top: 0; left: 0;
  width: 5px; height: 5px;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100001;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.35);
}

/* ─── Grain overlay (page-wide) ─── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.032;
  pointer-events: none;
  z-index: 9000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── Design tokens ─── */
.sl-journey-wrap {
  --cream:      #F6EFE3;
  --parchment:  #E8D5B0;
  --lav-deep:   #231442;
  --lav:        #4A2C7A;
  --lav-mid:    #7153A6;
  --lav-light:  #A882C8;
  --lav-pale:   #EAE0F5;
  --sage:       #3D5C3B;
  --sage-pale:  #D2E8CF;
  --warm-brown: #4A2E1A;
  --parch-dark: #C4A070;
  --charcoal:   #1A120E;
  --rose:       #B87060;
}

/* ════════════════════════════════
   HERO
════════════════════════════════ */
.slj-hero {
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--lav-deep);
  padding: 7rem 2rem 5rem;
}
.slj-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 45% at 50% 58%, rgba(113,83,166,.5) 0%, transparent 70%),
    radial-gradient(ellipse 35% 28% at 22% 28%, rgba(168,130,200,.18) 0%, transparent 60%);
  pointer-events: none;
}

.slj-hero-eyebrow {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.63rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lav-pale);
  opacity: 0;
  margin-bottom: 2.2rem;
  position: relative;
  z-index: 1;
}
.slj-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(5.5rem, 14vw, 13rem);
  font-weight: 300;
  font-style: italic;
  line-height: 0.87;
  color: var(--cream);
  text-align: center;
  position: relative;
  z-index: 1;
  opacity: 0;
}
.slj-hero-title em {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--lav-pale);
  font-size: 0.72em;
}
.slj-hero-rule {
  width: 48px; height: 1px;
  background: var(--lav-pale);
  opacity: 0;
  margin: 2.6rem auto;
  position: relative;
  z-index: 1;
}
.slj-hero-tag {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-style: italic;
  color: var(--lav-pale);
  opacity: 0;
  text-align: center;
  max-width: 480px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* Botanical SVG decorations */
.slj-bot {
  position: absolute;
  top: 50%;
  transform: translateY(-47%);
  width: 200px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}
.slj-bot.left  { left: -20px; }
.slj-bot.right { right: -20px; transform: translateY(-47%) scaleX(-1); }

/* Scroll cue */
.slj-scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--lav-pale);
  opacity: 0.42;
  z-index: 1;
}
.slj-scroll-cue span {
  font-family: 'Crimson Pro', serif;
  font-size: 0.57rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.slj-scroll-line {
  width: 1px; height: 42px;
  background: var(--lav-pale);
  transform-origin: top;
  animation: slj-scr 2.2s ease-in-out infinite;
}
@keyframes slj-scr {
  0%,100% { transform: scaleY(0.5); opacity: 0.3; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}

/* ════════════════════════════════
   MARQUEE
════════════════════════════════ */
.slj-marquee {
  background: var(--charcoal);
  padding: 1.05rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.slj-marquee-track {
  display: inline-flex;
  animation: slj-tick 30s linear infinite;
}
.slj-m-item {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.73rem, 1.3vw, 0.88rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment);
  padding: 0 1.6rem;
}
.slj-m-dot { color: var(--lav-light); }
@keyframes slj-tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ════════════════════════════════
   STATS
════════════════════════════════ */
.slj-stats {
  background: var(--cream);
  padding: 6rem 5rem 5.5rem;
}
.slj-stats-label {
  font-family: 'Crimson Pro', serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lav);
  margin-bottom: 3.2rem;
  opacity: 0;
}
.slj-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.slj-stat {
  border-top: 1px solid var(--parchment);
  padding-top: 1.3rem;
  opacity: 0;
}
.slj-stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.2rem, 5.2vw, 5.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--lav);
  display: flex;
  align-items: baseline;
  gap: 0.05em;
}
.slj-stat-sfx {
  font-size: 0.36em;
  font-weight: 300;
  color: var(--lav-light);
}
.slj-stat-lbl {
  margin-top: 0.4rem;
  font-family: 'Crimson Pro', serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.62;
}

/* ════════════════════════════════
   INTRO (split)
════════════════════════════════ */
.slj-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.slj-intro-left {
  background: var(--lav-pale);
  padding: 5.5rem 4.5rem;
  display: flex;
  align-items: center;
  opacity: 0;
}
.slj-pull {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  color: var(--lav-deep);
}
.slj-intro-right {
  background: var(--cream);
  padding: 5.5rem 4.5rem;
  display: flex;
  align-items: center;
  opacity: 0;
}
.slj-intro-body {
  font-family: 'Crimson Pro', serif;
  font-size: 1.22rem;
  line-height: 1.82;
  color: var(--charcoal);
  opacity: 0.82;
}
.slj-intro-body p + p { margin-top: 1rem; }
.slj-intro-body em { font-style: italic; }

/* ════════════════════════════════
   ERA SECTIONS
════════════════════════════════ */
/* era colour themes via CSS vars */
.slj-era-1 { --era-bg: var(--lav-deep); --era-text: var(--cream);      --era-accent: var(--lav-pale); --era-muted: rgba(234,224,245,.45); }
.slj-era-2 { --era-bg: var(--sage);     --era-text: var(--cream);      --era-accent: var(--sage-pale); --era-muted: rgba(210,232,207,.45); }
.slj-era-3 { --era-bg: var(--parchment);--era-text: var(--warm-brown); --era-accent: #7A3520;           --era-muted: rgba(74,46,26,.18);    }
.slj-era-4 { --era-bg: var(--lav-pale); --era-text: var(--lav-deep);   --era-accent: var(--lav);       --era-muted: rgba(35,20,66,.18);    }

.slj-era {
  background: var(--era-bg);
  color: var(--era-text);
  padding: 6.5rem 5rem;
  position: relative;
  overflow: hidden;
}

/* Ghost year in background */
.slj-era-ghost {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(6rem, 13vw, 14rem);
  font-weight: 700;
  line-height: 1;
  color: var(--era-text);
  opacity: 0.052;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.02em;
  will-change: transform;
}

.slj-era-header {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 3.2rem;
}
.slj-era-index {
  font-family: 'Crimson Pro', serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.4;
}
/* Era 3 has a light background — index label needs more opacity to stay readable */
.slj-era-3 .slj-era-index { opacity: 0.65; }
/* Era 1 + 2 have dark backgrounds — era name title in pure white for maximum legibility */
.slj-era-1 .slj-era-name,
.slj-era-2 .slj-era-name { color: #ffffff; }
/* Era 3 (parchment bg) — all text matches the sage green from the era-2 block above */
.slj-era-3 .slj-era-name,
.slj-era-3 .slj-event-year,
.slj-era-3 .slj-event-text { color: var(--sage); }
/* Era 4 (lav-pale bg) — title in vivid purple */
.slj-era-4 .slj-era-name { color: var(--lav); }
.slj-era-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 0.92;
  opacity: 0;
}

.slj-era-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2.4rem;
  position: relative;
  z-index: 1;
}
.slj-event { opacity: 0; }

.slj-event-year {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  color: var(--era-accent);
}
.slj-event-bar {
  width: 20px; height: 1px;
  background: currentColor;
  opacity: 0.3;
  margin: 0.75rem 0;
}
.slj-event-text {
  font-family: 'Crimson Pro', serif;
  font-size: 1.15rem;
  line-height: 1.65;
  opacity: 0.8;
}
.slj-event-text em { font-style: italic; }

/* ════════════════════════════════
   FOUNDER QUOTE
════════════════════════════════ */
.slj-quote {
  background: var(--charcoal);
  padding: 9rem 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.slj-quote::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(168,130,200,.13) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.slj-quote-orn {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 8rem;
  font-weight: 700;
  line-height: 0.4;
  color: var(--lav-mid);
  display: block;
  opacity: 0;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.slj-quote-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.45rem, 2.8vw, 2.7rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.46;
  color: var(--cream);
  max-width: 840px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  clip-path: inset(0 100% 0 0);
}
.slj-quote-attr {
  margin-top: 2.4rem;
  font-family: 'Crimson Pro', serif;
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--lav-light);
  position: relative;
  z-index: 1;
  opacity: 0;
}

/* ════════════════════════════════
   CTA
════════════════════════════════ */
.slj-cta {
  background: var(--cream);
  padding: 8rem 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.slj-cta-left { opacity: 0; }
.slj-cta-eyebrow {
  font-family: 'Crimson Pro', serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lav);
  margin-bottom: 1.4rem;
}
.slj-cta-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 5.5vw, 6rem);
  font-weight: 300;
  font-style: italic;
  line-height: 0.9;
  color: var(--lav-deep);
  margin-bottom: 2.4rem;
}
.slj-cta-heading strong {
  font-weight: 600;
  font-style: normal;
}
.slj-cta-btn {
  display: inline-block;
  padding: 0.82rem 2.1rem;
  border: 1.5px solid var(--lav);
  color: var(--lav);
  font-family: 'Crimson Pro', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.28s, color 0.28s;
}
.slj-cta-btn:hover { background: var(--lav); color: var(--cream); }

.slj-cta-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  opacity: 0;
}
.slj-cta-fact {
  border-left: 2px solid var(--parchment);
  padding-left: 1.4rem;
}
.slj-cta-fact-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--lav-deep);
  margin-bottom: 0.25rem;
}
.slj-cta-fact-text {
  font-family: 'Crimson Pro', serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--charcoal);
  opacity: 0.75;
}

/* ════════════════════════════════
   FOOTER STRIP
════════════════════════════════ */
.slj-foot {
  background: var(--lav-deep);
  padding: 2.2rem 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.slj-foot-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--lav-pale);
  opacity: 0.7;
}
.slj-foot-copy {
  font-family: 'Crimson Pro', serif;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  color: var(--lav-pale);
  opacity: 0.32;
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 900px) {
  .slj-stats        { padding: 4.5rem 2rem 4rem; }
  .slj-stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .slj-intro        { grid-template-columns: 1fr; }
  .slj-intro-left,
  .slj-intro-right  { padding: 3.5rem 2rem; }
  .slj-era          { padding: 5rem 2rem; }
  .slj-era-ghost    { font-size: 5rem; right: 1rem; }
  .slj-bot          { display: none; }
  .slj-cta          { grid-template-columns: 1fr; padding: 5rem 2rem; }
  .slj-quote        { padding: 6rem 2rem; }
  .slj-foot         { flex-direction: column; padding: 1.8rem 2rem; text-align: center; }
}

@media (max-width: 600px) {
  /* ── Layout ── */
  .slj-hero         { padding: 5rem 1.5rem 4rem; }
  .slj-stats        { padding: 4rem 1.5rem; }
  .slj-stats-grid   { grid-template-columns: 1fr 1fr; }
  .slj-era          { padding: 4rem 1.5rem; }
  .slj-quote        { padding: 5rem 1.5rem; }
  .slj-cta          { padding: 4rem 1.5rem; }
  .slj-foot         { padding: 1.5rem 1.5rem; }

  /* ── Hero title: fix clamp min so it scales below 630px ──
     Original min 5.5rem gets stuck at 88px on 375px screens.
     New min 2.6rem lets 14vw drive the size naturally.       */
  .slj-hero-title   { font-size: clamp(2.6rem, 14vw, 5.5rem); }
  .slj-hero-tag     { font-size: 1.05rem; max-width: 100%; }

  /* ── Body text: explicit floor so it never goes below readable ── */
  .slj-event-text   { font-size: 1.12rem; line-height: 1.7; }
  .slj-intro-body   { font-size: 1.15rem; }
  .slj-cta-fact-text{ font-size: 1.02rem; }

  /* ── Small labels: bump up so they don't disappear ── */
  .slj-stats-label,
  .slj-era-index,
  .slj-cta-eyebrow  { font-size: 0.72rem; letter-spacing: 0.18em; }
  .slj-stat-lbl     { font-size: 0.72rem; }

  /* ── Marquee ── */
  .slj-m-item       { font-size: 0.85rem; }

  /* ── Era section heading ── */
  .slj-era-name     { font-size: clamp(2rem, 8vw, 2.6rem); }

  /* ── Stats numbers ── */
  .slj-stat-num     { font-size: clamp(2.4rem, 8vw, 3.2rem); }

  /* ── Pull quote ── */
  .slj-pull         { font-size: clamp(1.5rem, 5vw, 1.8rem); }

  /* ── CTA heading ── */
  .slj-cta-heading  { font-size: clamp(2.2rem, 9vw, 2.8rem); }

  /* ── Quote text ── */
  .slj-quote-text   { font-size: clamp(1.2rem, 4.5vw, 1.45rem); }

  /* ── Ghost years ── */
  .slj-era-ghost    { font-size: 3.5rem; opacity: 0.04; }
}