/* About section: prose left, the journal's current-issue cover drifting right.
   Namespaced ia-abc-* so nothing here can collide with the theme's own classes,
   which are rebuilt from outside this project. */

.ia-abc-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--ia-measure, 44rem)) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.ia-abc-prose { min-width: 0; }

.ia-abc {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  perspective: 1500px;
}
.ia-abc-card {
  --w: clamp(210px, 23vw, 320px);
  display: block; position: relative;
  width: var(--w);
  border-radius: 3px;
  text-decoration: none;
  transform-style: preserve-3d;
  /* two periods that do not divide evenly, so the drift never visibly loops */
  animation: ia-abc-drift 13s ease-in-out infinite,
             ia-abc-lift 9s ease-in-out infinite;
  will-change: transform;
}
.ia-abc-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 794 / 1123; object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 26px 50px -18px rgba(8, 26, 45, .55),
              0 8px 18px -8px rgba(8, 26, 45, .35);
  animation: ia-abc-shadow 9s ease-in-out infinite;
}
/* a specular sweep, as if the card catches a window */
.ia-abc-sheen {
  position: absolute; inset: 0; border-radius: 3px; overflow: hidden;
  pointer-events: none;
}
.ia-abc-sheen::before {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -40%; width: 32%;
  background: linear-gradient(100deg,
              rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(8deg);
  animation: ia-abc-sheen 13s ease-in-out infinite;
}

@keyframes ia-abc-drift {
  0%,  100% { transform: rotateY(-11deg) rotateX( 2.5deg) rotateZ(-1.4deg); }
  50%       { transform: rotateY(  4deg) rotateX(-2.0deg) rotateZ( 1.2deg); }
}
@keyframes ia-abc-lift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}
@keyframes ia-abc-shadow {
  0%, 100% { box-shadow: 0 26px 50px -18px rgba(8,26,45,.55), 0 8px 18px -8px rgba(8,26,45,.35); }
  50%      { box-shadow: 0 44px 66px -20px rgba(8,26,45,.42), 0 14px 26px -10px rgba(8,26,45,.26); }
}
@keyframes ia-abc-sheen {
  0%, 62%  { left: -40%; }
  86%,100% { left: 108%; }
}

/* hover / keyboard focus: the card squares up to the reader and comes forward */
.ia-abc-card:hover,
.ia-abc-card:focus-visible {
  animation-play-state: paused;
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.045);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.ia-abc-card:hover img,
.ia-abc-card:focus-visible img { animation-play-state: paused; }
.ia-abc-card:focus-visible { outline: 2px solid var(--th-accent, #08457E); outline-offset: 6px; }

.ia-abc-note {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--th-ink-2, #444141) 65%, transparent);
}

@media (max-width: 900px) {
  .ia-abc-grid { grid-template-columns: minmax(0, 1fr); }
  .ia-abc { order: -1; }
  .ia-abc-card { --w: min(62vw, 260px); }
}
@media (prefers-reduced-motion: reduce) {
  .ia-abc-card, .ia-abc-card img, .ia-abc-sheen::before { animation: none; }
  .ia-abc-card { transform: rotateY(-6deg); }
}