.rnk-timeline {
      position: relative;
      padding-left: 2rem;
    }
    .rnk-timeline::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.5rem;
      bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, var(--rnk-color-accent), var(--rnk-color-border));
    }
    .rnk-timeline__step {
      position: relative;
      padding-bottom: var(--rnk-spacing-xl);
    }
    .rnk-timeline__step:last-child { padding-bottom: 0; }
    .rnk-timeline__step::before {
      content: "";
      position: absolute;
      left: -2rem;
      top: 0.5rem;
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
      background-color: var(--rnk-color-accent);
      border: 2px solid var(--rnk-color-bg);
      transform: translateX(-50%);
      left: calc(-2rem + 1px);
    }
    .rnk-timeline__year {
      font-family: var(--rnk-font-body);
      font-size: 0.75rem;
      font-weight: var(--rnk-fw-medium);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--rnk-color-accent);
      margin-bottom: var(--rnk-spacing-xs);
    }

    .rnk-story-split {
      display: grid;
      gap: var(--rnk-spacing-xl);
      align-items: center;
    }
    .rnk-story-split--top { align-items: start; }
    @media (min-width: 64rem) {
      .rnk-story-split { grid-template-columns: 1fr 1fr; gap: var(--rnk-spacing-3xl); }
      .rnk-story-split--reverse > :first-child { order: 2; }
      .rnk-story-split--reverse > :last-child { order: 1; }
      /* Re-balance the fabrication split: left column (text + photo) stays
         anchored to the top, right column (process list) centers vertically
         so it visually sits between the heading and the bottom of the image. */
      .rnk-story-split--top > :nth-child(2) { align-self: center; }
    }

    .rnk-story-img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--rnk-radius-lg);
      box-shadow: var(--rnk-shadow-md);
    }

    .rnk-values-list {
      display: grid;
      gap: var(--rnk-spacing-xl);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .rnk-values-list__item {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--rnk-spacing-md);
      align-items: start;
    }
    .rnk-values-list__icon {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 50%;
      background-color: var(--rnk-color-accent-soft);
      color: var(--rnk-color-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .rnk-values-list__icon svg { width: 1.25rem; height: 1.25rem; }
    .rnk-values-list__title {
      font-size: 1.0625rem;
      margin: 0 0 var(--rnk-spacing-xs);
    }
    .rnk-values-list__desc {
      margin: 0;
      color: var(--rnk-color-text-muted);
      font-size: 0.9375rem;
      line-height: 1.6;
    }

    .rnk-quote {
      font-family: var(--rnk-font-heading);
      font-size: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);
      font-style: italic;
      line-height: 1.4;
      color: var(--rnk-color-dark-text);
      max-width: 38rem;
      margin: 0 auto;
      text-align: center;
      position: relative;
      padding: var(--rnk-spacing-lg) 0;
    }
    .rnk-quote::before {
      content: "\201C";
      position: absolute;
      top: -0.25rem;
      left: 50%;
      transform: translateX(-50%);
      font-size: 4rem;
      line-height: 1;
      color: var(--rnk-color-accent);
      opacity: 0.4;
    }

    .rnk-craft__lead {
      max-width: 36rem;
      color: var(--rnk-color-text-muted);
      font-size: 1.0625rem;
      line-height: 1.6;
      margin-bottom: var(--rnk-spacing-xl);
    }
    .rnk-craft__list {
      display: grid;
      gap: var(--rnk-spacing-lg);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .rnk-craft__item {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--rnk-spacing-md);
      align-items: start;
    }
    .rnk-craft__icon {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: var(--rnk-radius-md);
      background-color: var(--rnk-color-accent-soft);
      color: var(--rnk-color-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .rnk-craft__icon svg { width: 1.25rem; height: 1.25rem; }
    .rnk-craft__title {
      font-size: 1.0625rem;
      margin: 0 0 var(--rnk-spacing-xs);
    }
    .rnk-craft__desc {
      margin: 0;
      color: var(--rnk-color-text-muted);
      font-size: 0.9375rem;
      line-height: 1.6;
    }

    /* ===== Motion ===== */

    /* Page-load choreography on the dark intro is now driven by the global
       .rnk-story-intro rule in main.css (shared with universe heroes and
       category banners). No local override needed here. */

    /* Subtle hover on craft items: tile glows accent-soft, icon nudges right.
       Hint at progression along the process without any layout movement. */
    .rnk-craft__item .rnk-craft__icon {
      transition:
        transform 280ms var(--rnk-ease-out-expo),
        box-shadow 280ms var(--rnk-ease-out-expo);
    }
    .rnk-craft__item:hover .rnk-craft__icon {
      transform: translateX(2px);
      box-shadow: 0 0 0 4px var(--rnk-color-accent-soft);
    }

    /* Scroll-driven reveals - gated, with reduced-motion fallback already global. */
    @supports (animation-timeline: view()) {
      /* Each story chapter: text rises, image scales gently. Diptych stays alive. */
      .rnk-story-split > :not(.rnk-story-img) {
        animation: rnk-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
      }
      .rnk-story-img {
        animation: rnk-reveal-scale linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
      }

      /* Quote: the open-quote glyph blooms in; the line itself stays still. */
      .rnk-quote::before {
        animation: rnk-quote-bloom linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 45%;
      }
      @keyframes rnk-quote-bloom {
        from { opacity: 0; transform: translateX(-50%) scale(0.7); }
        to   { opacity: 0.4; transform: translateX(-50%) scale(1); }
      }

      /* Fabrication list: each step rises in turn. */
      .rnk-craft__list .rnk-craft__item {
        animation: rnk-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
      }
      .rnk-craft__list .rnk-craft__item:nth-child(2) { animation-delay:  60ms; }
      .rnk-craft__list .rnk-craft__item:nth-child(3) { animation-delay: 120ms; }
      .rnk-craft__list .rnk-craft__item:nth-child(4) { animation-delay: 180ms; }
      .rnk-craft__list .rnk-craft__item:nth-child(5) { animation-delay: 240ms; }

      /* Timeline: each step rises; the dot pops in. */
      .rnk-timeline__step {
        animation: rnk-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
      }
      .rnk-timeline__step:nth-child(2) { animation-delay:  60ms; }
      .rnk-timeline__step:nth-child(3) { animation-delay: 120ms; }
      .rnk-timeline__step:nth-child(4) { animation-delay: 180ms; }
      .rnk-timeline__step:nth-child(5) { animation-delay: 240ms; }

      .rnk-timeline__step::before {
        animation: rnk-dot-pop linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 35%;
      }
      @keyframes rnk-dot-pop {
        from { transform: translateX(-50%) scale(0); }
        to   { transform: translateX(-50%) scale(1); }
      }

      /* Values list: stagger, matching the reassurance pattern site-wide. */
      .rnk-values-list > .rnk-values-list__item {
        animation: rnk-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
      }
      .rnk-values-list > .rnk-values-list__item:nth-child(2) { animation-delay:  60ms; }
      .rnk-values-list > .rnk-values-list__item:nth-child(3) { animation-delay: 120ms; }
      .rnk-values-list > .rnk-values-list__item:nth-child(4) { animation-delay: 180ms; }
    }