/* ==========================================================================
   Tokens (STYLE.md)
   ========================================================================== */
:root {
  --bg: oklch(0.938 0.008 278.6);
  --surface: #FFFFFF;
  --surface-subtle: #F5F6FA;
  --text-strong: oklch(0.35 0.024 278);
  --text: oklch(0.54 0.006 275);
  --text-muted: #A6AABF;
  --border: #DFE1EB;
  --accent: oklch(0.537 0.159 274.3);
  --accent-hover: oklch(0.48 0.159 274.3);
  --accent-soft: color-mix(in oklch, var(--accent) 10%, transparent);
  --accent-text: #5461C8;
  --dark: oklch(0.22 0.031 278.8);
  --on-dark: #DFE1F0;
  --amber: #FFB84D;

  --shadow-key: 0 0 0 1px rgba(9, 11, 21, .08), 0 1px 0 rgba(9, 11, 21, .05), 0 2px 4px -1px rgba(9, 11, 21, .05);
  --shadow-lift: 0 54px 69px rgba(11, 27, 46, .12), 0 27px 35px rgba(11, 27, 46, .09), 0 16px 21px rgba(11, 27, 46, .08), 0 6px 9px rgba(11, 27, 46, .06), 0 1px 1.5px rgba(11, 27, 46, .03);
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* project wall geometry */
  --w: clamp(200px, 23.6vw, 460px);   /* card size */
  --gap: clamp(10px, 1.26vw, 22px);
  --step: calc(var(--w) + var(--gap)); /* distance between column slots */
  /* vertical offset of each slot: edges highest, centre lowest */
  --off-edge: 0px;
  --off-side: max(calc(var(--w) * .28), 84px);
  --off-center: calc(var(--off-side) + var(--w) * .12);
  --slide: 900ms;                      /* wall slide duration */
  --ease-slide: cubic-bezier(.6, 0, .25, 1); /* wall carousel: gentle start and stop */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.4 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 64px;
}

@media (max-width: 1024px) { .container { padding: 0 24px; } }
@media (max-width: 560px)  { .container { padding: 0 16px; } }

/* content fades and rises into view on scroll (js/reveal.js) */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

/* in-page links (header navigation) glide to their section */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}