/* ============================================================
   VILLA SERENO — design tokens
   Art direction: limewash, terracotta, olive, sun-bleached.
   Light, editorial, generous margins. The counterweight to
   Marapu Cliff's dark cinema.
   ============================================================ */

:root {
  /* ---- palette ---- */
  --lime-50:  #faf7f1;
  --lime-100: #f3ede2;
  --lime-200: #e8dfd0;
  --lime-300: #d6c9b4;
  --clay-400: #b89a7c;
  --clay-500: #a3714c;
  --terra:    #b4552f;
  --olive:    #6b7053;
  --olive-dk: #4a4f38;
  --ink-900:  #221f1a;
  --ink-700:  #3d382f;
  --ink-500:  #6b6355;

  --bg:        var(--lime-50);
  --bg-raised: var(--lime-100);
  --bg-deep:   var(--ink-900);
  --ink:       var(--ink-900);
  --ink-dim:   var(--ink-700);
  --ink-faint: var(--ink-500);
  --rule:      color-mix(in oklab, var(--ink-900) 16%, transparent);
  --rule-soft: color-mix(in oklab, var(--ink-900) 9%, transparent);

  /* ---- type ---- */
  --serif: "Fraunces", "Georgia", serif;
  --sans:  "Inter Tight", "Inter", -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.18vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.06rem + 0.55vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.25rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.4rem + 3.2vw, 4rem);
  --step-4:  clamp(2.9rem, 1.5rem + 6.5vw, 7rem);

  /* ---- space ---- */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4.5rem; --s-7: 7rem;    --s-8: 10rem;

  --gutter: clamp(1.25rem, 6vw, 6rem);
  --measure: 60ch;
  --maxw: 84rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.06; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--terra); color: var(--lime-50); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

/* ---- primitives ---- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--s-7); }

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  letter-spacing: -0.015em;
  line-height: 0.98;
}
.display--xl { font-size: var(--step-4); }
.display--lg { font-size: var(--step-3); }
.display--md { font-size: var(--step-2); }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay-500);
}

.lede {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-dim);
  max-width: var(--measure);
  font-weight: 300;
}
.body-dim { color: var(--ink-dim); max-width: var(--measure); }

.link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in oklab, currentColor 35%, transparent);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.link:hover { border-bottom-color: currentColor; color: var(--terra); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1em 2em;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink-900);
  background: transparent;
  color: var(--ink-900);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.btn:hover { background: var(--ink-900); color: var(--lime-50); }
.btn--solid {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--lime-50);
}
.btn--solid:hover { background: var(--ink-900); border-color: var(--ink-900); }

/* ---- reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}