/* ==========================================================================
   VILLA ATOUTA — Brand foundation
   Derived from "Villa Atouta Brand Presentation, Dec 2024"
   Headline: Barlow Condensed Medium   Body: Josefin Sans
   ========================================================================== */

:root {
  /* --- Palette (exact values from the brand book) --- */
  --ochre:  #D3972A;   /* C17  M42 Y99 K1   R211 G151 B42  */
  --blue:   #38537B;   /* C86  M69 Y30 K12  R56  G83  B123 */
  --brown:  #622C17;   /* C36  M80 Y91 K51  R98  G44  B23  */
  --cream:  #FFFDEA;   /* C0   M0  Y8  K0   R255 G253 B234 */
  --sand:   #E6CDA8;   /* C9   M17 Y35 K0   R230 G205 B168 */
  --sage:   #A0AE79;   /* C40  M20 Y64 K1   R160 G174 B121 */

  /* Tonal helpers built from the six */
  --brown-90: rgba(98, 44, 23, 0.90);
  --brown-60: rgba(98, 44, 23, 0.60);
  --brown-40: rgba(98, 44, 23, 0.40);
  --brown-15: rgba(98, 44, 23, 0.15);
  --brown-08: rgba(98, 44, 23, 0.08);
  --cream-70: rgba(255, 253, 234, 0.70);
  --cream-40: rgba(255, 253, 234, 0.40);
  --ink:      #2E1409;  /* deepest brown, for dark grounds */

  /* --- Type --- */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "Josefin Sans", "Century Gothic", sans-serif;
  --arabic:  "Aref Ruqaa", "Scheherazade New", serif;

  /* --- Rhythm --- */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* --- Shared display-type behaviour --- */
.display {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.005em;
}

.arabic {
  font-family: var(--arabic);
  direction: rtl;
  font-weight: 400;
}

/* Eyebrow / small caps label, used across all three options */
.label {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8125rem;
}

/* --- Motion --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Anchor targets clear the fixed/sticky header */
:where(section, header, footer, form)[id] { scroll-margin-top: 96px; }

/* --- Focus --- */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}