/* =========================================================
   Cestia — tokens, reset, shared keyframes
   ========================================================= */

:root {
  /* colors */
  --c-bg: #f6f4ee;
  --c-surface: #fcfaf6;
  --c-white: #ffffff;
  --c-ink: #0b2216;
  --c-ink-soft: #3b4740;
  --c-muted: #5d635e;
  --c-muted-2: #8a8e88;
  --c-eyebrow: #6f736d;
  --c-green: #20673d;
  --c-green-600: #1b5a35;
  --c-green-500: #2b7a4c;
  --c-green-100: #e4eedf;
  --c-green-50: #eef5ef;
  --c-track: #dfeee3;

  /* type */
  --f-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* desktop scale unit: 1u = 1px of the 1280px desktop mockup */
  --page-w: min(100vw, 1440px);
  --u: calc(var(--page-w) / 1280);
}

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, figure { margin: 0; }

:focus-visible {
  outline: 3px solid var(--c-green-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.page {
  position: relative;
  width: var(--page-w);
  margin: 0 auto;
  overflow-x: clip; /* decor and the tilted phone may stick out */
}

/* entrance */
.reveal {
  animation: rise .9s var(--ease-out) both;
  animation-delay: calc(.12s + var(--d, 0) * .09s);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shine {
  0%        { transform: translateX(-120%); }
  30%, 100% { transform: translateX(120%); }
}

/* reduced motion: keep layout, drop movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}