/* KOBE — layout */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-12);
}
@media (min-width: 1024px) {
  .section { padding-block: var(--space-16); }
}

.section--graphite { background: var(--kobe-graphite); }
.section--black    { background: var(--kobe-black); }

.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-6); }

.grid {
  display: grid;
  gap: var(--space-4);
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.center-text { text-align: center; }
.max-prose   { max-width: 65ch; }
.mx-auto     { margin-inline: auto; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}