@layer sections {
  .detail {
    background: var(--c-basalt-up);
    border-block-start: var(--rule);
    overflow: hidden;
  }

  .detail__grid {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
  }

  @media (min-width: 62rem) {
    .detail__grid {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 24rem);
      gap: clamp(2rem, 5vw, 6rem);
    }
  }

  .detail__art {
    inline-size: min(118%, 1100px);
    margin-inline-start: calc(var(--gutter) * -1);
  }

  .tank-detail { inline-size: 100%; height: auto; overflow: visible; }
  .tank-detail * { vector-effect: non-scaling-stroke; }

  .tank-detail .paint { fill: var(--paint); transition: fill var(--d-slow) var(--e-out); }
  .tank-detail .scallop { fill: var(--paint-hi); opacity: 0.8; transition: fill var(--d-slow) var(--e-out); }
  .tank-detail .edge { fill: none; stroke: var(--c-bone); stroke-width: 2.5; opacity: 0.45; }

  .tank-detail .cap-ring {
    fill: var(--c-basalt-hi);
    stroke: var(--c-ash-hi);
    stroke-width: 4;
  }
  .tank-detail .cap-core { fill: var(--c-basalt-up); stroke: var(--c-ash); stroke-width: 2; }
  .tank-detail .cap-slot { stroke: var(--c-ash-hi); stroke-width: 5; stroke-linecap: round; }

  .tank-detail .specks circle { fill: var(--c-bone); opacity: 0.18; }

  /* Hand-applied coachlines draw themselves on. */
  .tank-detail .lines path {
    fill: none;
    stroke: var(--paint-line);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: var(--len, 900);
    stroke-dashoffset: var(--len, 900);
    transition: stroke-dashoffset 1.4s var(--e-expo), stroke var(--d-slow) var(--e-out);
  }

  .tank-detail .line-b { transition-delay: 0.18s; }

  .detail.is-in .tank-detail .lines path { stroke-dashoffset: 0; }

  /* Badge lifts in after the lines land. */
  .tank-detail .badge {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.6s var(--e-out), transform 0.6s var(--e-out);
    transition-delay: 0.85s;
  }

  .detail.is-in .tank-detail .badge { opacity: 1; transform: none; }

  .tank-detail .badge-word {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 56px;
    letter-spacing: 0.06em;
    fill: var(--c-bone);
  }

  .detail__notes { display: grid; gap: var(--space-lg); }

  .detail__note {
    display: grid;
    gap: var(--space-3xs);
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule);
  }

  .detail__note h3 { font-size: var(--t-lg); }
  .detail__note p { font-size: var(--t-sm); color: var(--c-ash); }

  @media (max-width: 61.9375rem) {
    .detail__art { inline-size: 120%; margin-inline: -10%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .tank-detail .lines path { stroke-dashoffset: 0; transition: none; }
    .tank-detail .badge { opacity: 1; transform: none; transition: none; }
  }
}