/* ALVIS preview: "How we work". A recoloured Icons8 3D Metallic cube beside four numbered steps.
   The cube is a placeholder until the Blender render (see docs/blender-cube-prompt.md) replaces it. */
.proc { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.proc-art { width: min(400px, 90%); justify-self: center; }
.proc-art img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; animation: proc-float 6s var(--ease-in-out) infinite alternate; }
@keyframes proc-float { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-10px) rotate(-1deg); } }
.proc h2 { margin: 0 0 28px; font: 500 clamp(2rem, 3.4vw, 3rem)/1.02 var(--font-display); letter-spacing: -0.035em; max-width: 18ch; text-wrap: balance; }
.proc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.proc li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.proc-n { font: 400 12px var(--font-mono); color: var(--accent); }
.proc li b { font: 500 1.15rem var(--font-display); letter-spacing: -0.015em; }
.proc li p { margin: 6px 0 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; max-width: 52ch; }
.proc-w { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.proc-foot { margin: 18px 0 0; font-size: 0.88rem; color: var(--ink-3); }
@media (max-width: 859px) {
  .proc { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .proc-art { width: 240px; }
  .proc li { grid-template-columns: 36px minmax(0, 1fr); }
  .proc-w { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .proc-art img { animation: none; } }