/* ==========================================================================
   Enigma — O nama: statement, year odometer + timeline, values
   ========================================================================== */

.about { padding: var(--space-xl) var(--gutter); }
.about__text {
  font-family: var(--f-serif); font-size: clamp(1.9rem, 1rem + 3vw, 4rem); line-height: 1.08; letter-spacing: -0.01em;
  max-width: 24ch; margin-left: auto; margin-right: clamp(0rem, 6vw, 7rem);
}
.about__text em { font-style: italic; color: var(--fuchsia); }

/* ---------- Years: sticky odometer, stops scroll past ---------- */
.years {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-l);
  padding: 0 var(--gutter);
}
.years__side { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; gap: 1.5rem; }
.odo { display: flex; font-family: var(--f-serif); font-size: clamp(6rem, 2rem + 13vw, 15rem); line-height: 1; letter-spacing: -0.02em; color: var(--pearl); }
.odo__col { display: block; height: 1em; overflow: hidden; }
.odo__reel {
  display: grid; text-align: center; line-height: 1;
  transform: translateY(calc(var(--d, 0) * -1em)); transition: transform 1400ms cubic-bezier(0.65, 0, 0.15, 1);
}
.odo__col:nth-child(3) .odo__reel { transition-delay: 90ms; }
.odo__col:nth-child(4) .odo__reel { transition-delay: 180ms; color: var(--blush); }

.tl { display: grid; padding-block: 30svh; }
.tl__stop { min-height: 70svh; display: grid; align-content: center; gap: 1rem; opacity: 0.22; transition: opacity 700ms; }
.tl__stop.is-active { opacity: 1; }
.tl__year { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.2em; color: var(--blush); }
.tl__title { font-family: var(--f-serif); font-size: var(--fs-h2); line-height: 0.95; max-width: 14ch; }
.tl__text { color: var(--muted); font-size: var(--fs-lead); line-height: 1.45; max-width: 34ch; }

@media (max-width: 860px) {
  .years { grid-template-columns: 1fr; gap: 0; }
  .years__side {
    top: var(--nav-h); height: auto; z-index: 2; padding-block: 1rem 1.25rem; gap: 0.5rem;
    background: linear-gradient(var(--espresso) 75%, transparent);
  }
  .odo { font-size: clamp(4.5rem, 24vw, 7rem); }
  .tl { padding-block: 10svh 20svh; }
  .tl__stop { min-height: 60svh; }
}

/* ---------- Values ---------- */
.values { display: grid; gap: var(--space-l); padding: var(--space-xl) var(--gutter); }
.values .shead { margin-bottom: 0; }
.values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.value { display: grid; gap: 0.8rem; align-content: start; padding: 1.75rem 0 0; border-top: 1px solid var(--line-strong); }
.value__n { font-family: var(--f-serif); font-style: italic; font-size: 1.6rem; color: var(--fuchsia); }
.value h3 { font-family: var(--f-serif); font-size: var(--fs-h3); max-width: 14ch; }
.value p { color: var(--muted); }
@media (max-width: 1000px) { .values__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .values__grid { grid-template-columns: 1fr; } }