/* ============================================================
   Claudify World Heritage — deep-green plaque, gold accents,
   white prose. Two years sit as markers on one unbroken line.
   Desktop = horizontal timeline; <750px = vertical left-rail.
   Fonts (Cormorant Garamond + Jost) are loaded globally.
   ============================================================ */

.claudify-heritage {
  background: transparent;
  padding: var(--sp-pt, 128px) var(--sp-pr, 96px) var(--sp-pb, 128px) var(--sp-pl, 96px);
}

/* Floating deep-green container — same 1400px grid as the other sections */
.claudify-heritage__inner {
  max-width: 1400px;
  margin: 0 auto;
  background: #0b2615;
  border-radius: 20px;
  padding: 88px 80px;
  text-align: center;
}

/* ---- Eyebrow ---- */
.claudify-heritage__eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #D4A853;
  margin: 0 0 24px;
}

/* ---- Headline ---- */
.claudify-heritage__headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1.12;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0 0 26px;
}
.claudify-heritage__headline-it {
  font-style: italic;
  color: #D4A853;
}

/* ---- Body ---- */
.claudify-heritage__body {
  font-family: 'Jost', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  max-width: 700px;
  margin: 0 auto;
}

/* ============================================================
   Timeline — desktop horizontal
   ============================================================ */
.claudify-heritage__tl-wrap { max-width: 1100px; margin: 60px auto 0; }
.claudify-heritage__tl--mobile { display: none; }

.claudify-heritage__years { display: flex; }
.claudify-heritage__year {
  flex: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 78px;
  line-height: 1;
  color: #D4A853;
}

.claudify-heritage__rail { position: relative; height: 30px; }
.claudify-heritage__rail-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -0.5px;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 83, 0.55) 18%, rgba(212, 168, 83, 0.55) 82%, transparent);
  transform-origin: left center;
}
.claudify-heritage__node {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D4A853;
  transform: translate(-50%, -50%);
}

.claudify-heritage__cites { display: flex; }
.claudify-heritage__cite { flex: 1; padding: 0 28px; }
.claudify-heritage__label {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4A853;
  margin: 0 0 10px;
}
.claudify-heritage__desc {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 260px;
  margin: 0 auto;
}

/* ---- Footnote ---- */
.claudify-heritage__footnote {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.58);
  max-width: 460px;
  margin: 48px auto 0;
}

/* ============================================================
   Line draw-in — tied to the house reveal (.cl-anim added
   before paint; .is-in-view added when the section enters view)
   ============================================================ */
.cl-anim .claudify-heritage__rail-line { transform: scaleX(0); }
.cl-anim.is-in-view .claudify-heritage__rail-line {
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.cl-anim .claudify-heritage__mtl-line { transform: scaleY(0); }
.cl-anim.is-in-view .claudify-heritage__mtl-line {
  transform: scaleY(1);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
@media (prefers-reduced-motion: reduce) {
  .cl-anim .claudify-heritage__rail-line,
  .cl-anim .claudify-heritage__mtl-line { transform: none !important; transition: none !important; }
}

/* ============================================================
   Tablet (750–989px)
   ============================================================ */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .claudify-heritage { padding-left: 40px; padding-right: 40px; }
  .claudify-heritage__inner { padding: 56px 48px; }
  .claudify-heritage__headline { font-size: 40px; }
  .claudify-heritage__year { font-size: 64px; }
  .claudify-heritage__cite { padding: 0 16px; }
}

/* ============================================================
   Mobile (<750px) — vertical left-rail timeline
   ============================================================ */
@media screen and (max-width: 749px) {
  .claudify-heritage { padding-left: 18px; padding-right: 18px; }
  .claudify-heritage__inner { padding: 40px 26px; }
  .claudify-heritage__eyebrow { margin-bottom: 18px; letter-spacing: 0.2em; }
  .claudify-heritage__headline { font-size: 31px; margin-bottom: 20px; }
  .claudify-heritage__body { font-size: 15px; }

  .claudify-heritage__tl-wrap { margin-top: 38px; }
  .claudify-heritage__tl--desktop { display: none; }
  .claudify-heritage__tl--mobile { display: block; }

  .claudify-heritage__mtl { position: relative; text-align: left; }
  .claudify-heritage__mtl-line {
    position: absolute; left: 5px; top: 14px; bottom: 14px; width: 1px;
    background: rgba(212, 168, 83, 0.5); transform-origin: top center;
  }
  .claudify-heritage__ment { position: relative; padding-left: 36px; margin-bottom: 32px; }
  .claudify-heritage__ment:last-child { margin-bottom: 0; }
  .claudify-heritage__mnode { position: absolute; left: 5px; top: 16px; transform: translate(-50%, -50%); }
  .claudify-heritage__ment .claudify-heritage__year { display: block; font-size: 48px; margin: 0 0 8px; }
  .claudify-heritage__ment .claudify-heritage__label { letter-spacing: 0.12em; }
  .claudify-heritage__ment .claudify-heritage__desc { max-width: none; margin: 0; }

  .claudify-heritage__footnote { margin-top: 36px; }
}