/* /articles (C3): the tide table. Four full-width rows alternating mist and deep, each a diptych of the post's
   photograph with its animated kit graphic on one shore (alternating sides) and the headline, the standfirst and
   the read link on the other; the rows bob on the water line at idle. Text hover: the headline opens along the
   width axis and returns. */

.ai-head { padding-bottom: clamp(20px, 2.4vw, 48px); }
.ai-head__h1 { margin-bottom: clamp(14px, 1.6vw, 28px); }
.ai-head__rule { color: var(--raven); }

.tt-row { padding-top: clamp(36px, 4.6vw, 96px); padding-bottom: clamp(36px, 4.6vw, 96px); }
.tt-row__shores { align-items: stretch; }
.tt-media { min-height: clamp(440px, 40vw, 1100px); will-change: transform; }
.tt-row--left .tt-media { border-radius: 0 4px 4px 0; }
.tt-row--right .tt-media { border-radius: 4px 0 0 4px; }
.tt-media picture img { transition: transform var(--dur-base) var(--ease-slack); }
.tt-art { position: absolute; z-index: 2; bottom: clamp(16px, 2.2vw, 48px); width: min(58%, 640px); padding: clamp(6px, .7vw, 14px);
  background: rgba(237, 240, 243, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(60, 69, 80, .22), 0 26px 44px -30px rgba(14, 24, 38, .7); will-change: transform; }
.tt-row--left .tt-art { right: clamp(16px, 2.2vw, 48px); }
.tt-row--right .tt-art { left: clamp(16px, 2.2vw, 48px); }
.tt-art::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 2px; height: 13px; margin-left: -1px; background: linear-gradient(to bottom, var(--rose), var(--iris)); }
.tt-art .art-svg { width: 100%; height: auto; display: block; }

.tt-copy { display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 1.8vw, 36px); padding-block: clamp(4px, 1vw, 24px); }
.tt-copy__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: clamp(12px, 1.2vw, 20px); border-bottom: 1px solid var(--rule); }
.tt-copy__top .rc-ico { width: clamp(30px, 2.4vw, 48px); height: clamp(30px, 2.4vw, 48px); color: var(--iris); stroke-width: 1.25; will-change: transform; }
.band--deep .tt-copy__top .rc-ico { color: var(--mist); }
.tt-title { margin: 0; }
.tt-stand { margin: 0; font-size: clamp(1.125rem, 1.4vw, 1.875rem); line-height: 1.42; }
.band--deep .tt-stand { color: var(--water); }
.tt-read { margin: 0; }
.tt-read .link { font-size: clamp(1.125rem, 1.25vw, 1.625rem); }

@media (max-width: 899.98px) {
  .tt-media { min-height: 72vw; border-radius: 0 !important; }
  .tt-art { width: 72%; }
  .tt-copy { order: -1; }   /* the heading shore first */
}
@media (prefers-reduced-motion: reduce) { .tt-media, .tt-art { will-change: auto; } }