/* Shared structure for all three directions. Directions set tokens; this file never sets colour or type. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--body-size, 17px)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 16px; top: -48px; padding: 8px 12px; background: var(--ink); color: var(--bg); border-radius: var(--r-sm); z-index: 20; }
.skip:focus { top: 12px; }

/* 12-column grid */
.wrap { width: min(100% - 2 * var(--gutter-x), 1280px); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap); }
.blk { grid-column: span var(--s, 12); min-width: 0; }
.blk[style*="--o"] { grid-column: calc(var(--o) + 1) / span var(--s, 12); }
@media (max-width: 760px) {
  .blk, .blk[style*="--o"] { grid-column: 1 / -1; }
  .blk[data-keep] { grid-column: auto / span var(--s); }
}

/* Image placeholder for case-study blocks */
.ph { border-radius: var(--r-md); background: var(--ph); aspect-ratio: var(--ar, 4 / 3); display: grid; place-items: end start; padding: 12px 14px; font: 12px/1 var(--font-mono, ui-monospace, monospace); color: var(--ink-soft); }

/* Loops: three frames, one visible at a time */
.loop-svg { width: 100%; height: auto; overflow: visible; }
.loop-ink { fill: none; stroke: var(--loop-ink, currentColor); stroke-width: var(--loop-w, 2.4); stroke-linecap: round; stroke-linejoin: round; }
.loop-f { visibility: hidden; animation: loop-frame var(--loop-d, 0.75s) infinite; }
.loop-f0 { animation-delay: 0s; }
.loop-f1 { animation-delay: calc(var(--loop-d, 0.75s) * -2 / 3); }
.loop-f2 { animation-delay: calc(var(--loop-d, 0.75s) * -1 / 3); }
@keyframes loop-frame { 0%, 33.32% { visibility: visible; } 33.33%, 100% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .loop-f { animation: none; }
  .loop-f0 { visibility: visible; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }