/* Yachtora — layout primitives (v2). */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); }

/* Asymmetric split */
.split { display: grid; gap: clamp(var(--sp-4), 5vw, var(--sp-7)); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-left .split__media { order: -1; }
}

.grid { display: grid; gap: clamp(var(--sp-3), 3vw, var(--sp-4)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stack > * + * { margin-top: var(--sp-3); }
.flow > * + * { margin-top: var(--sp-2); }

.media-frame { position: relative; overflow: hidden; background: var(--sand); }
.media-frame img { width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease-silk); }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-1-1 { aspect-ratio: 1 / 1; }

.prose { max-width: 62ch; }
.prose p { color: var(--text-dim); }

.skip-link {
  position: absolute; left: var(--sp-2); top: -60px; z-index: 1000;
  background: var(--ink); color: var(--paper); padding: var(--sp-1) var(--sp-2);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-2); color: var(--paper); }