/* ============================================================
   FODDAL — base.css
   Variables, reset, typography, global utilities & reveal anims
   Aesthetic : editorial / organic / terre & forêt
   ============================================================ */

:root {
  /* palette */
  --ink: #0f3d2e;           /* deep forest */
  --ink-2: #1a5840;         /* forest */
  --ink-soft: #2a6b50;
  --accent: #c8691a;        /* terracotta */
  --accent-soft: #e08a3c;
  --gold: #d4a84b;
  --sand: #f4efe4;          /* paper */
  --sand-2: #ebe3d2;
  --cream: #faf6ee;
  --white: #ffffff;
  --line: rgba(15, 61, 46, .12);
  --line-strong: rgba(15, 61, 46, .22);
  --muted: rgba(15, 61, 46, .65);
  --shadow-sm: 0 1px 2px rgba(15, 61, 46, .06);
  --shadow: 0 10px 40px -15px rgba(15, 61, 46, .25);
  --shadow-lg: 0 30px 80px -30px rgba(15, 61, 46, .35);

  --ff-display: "Fraunces", Georgia, serif;
  --ff-body: "DM Sans", system-ui, sans-serif;

  --radius: 14px;
  --radius-lg: 22px;

  --container: 1320px;
  --pad: clamp(20px, 4vw, 56px);

  /* terracotta darkened for accessible text on cream (≥ 4.5:1) */
  --accent-text: #a8500f;
}

/* =================== RESET =================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input, textarea, select {
  font: inherit; color: inherit; background: transparent; border: none; outline: none; width: 100%;
}
::selection { background: var(--accent); color: var(--sand); }

/* =================== FOCUS (a11y) =================== */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* keep default outline off only when not keyboard-focusing */
:focus:not(:focus-visible) { outline: none; }

/* skip link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 11000;
  background: var(--ink);
  color: var(--sand);
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  font-size: 14px;
  font-weight: 600;
  transition: top .25s ease;
}
.skip-link:focus { top: 0; }

/* =================== UTILITIES =================== */
.section-head { max-width: 900px; margin: 0 auto 60px; padding: 0 var(--pad); text-align: center; }
.section-label {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 18px;
  font-weight: 600;
}
.section-title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink);
}
.section-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-text);
}
.section-intro {
  margin-top: 24px;
  font-size: 18px;
  color: var(--muted);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* =================== REVEAL ANIMATIONS =================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-line {
  display: block;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal-line.visible { opacity: 1; transform: translateY(0); }
.reveal-line:nth-child(1) { transition-delay: .1s; }
.reveal-line:nth-child(2) { transition-delay: .25s; }
.reveal-line:nth-child(3) { transition-delay: .4s; }

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