:root {
  /* ── Colour tokens ── */
  --sand: #f5f3ee;
  --stone: #e8e5df;
  --paper: #fdfcfa;
  --ink: #1a1a18;
  --ink-2: #3d3d38;
  --ink-3: #6b6b64;
  --ink-4: #9b9b92;
  --accent: #2d5a4e;
  --accent-hover: #245048;
  --accent-light: #e8f0ee;
  --accent-2: #8b6f47;
  --accent-2-light: #f5ede3;
  --warm: #c4a882;
  --danger: #c0392b;
  --danger-light: #fde8e8;
  --border: rgba(26, 26, 24, 0.1);
  --border-strong: rgba(26, 26, 24, 0.18);

  /* ── Shape ── */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --radius-full: 9999px;

  /* ── Elevation ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);

  /* ── Nav ── */
  --nav-height: 60px;

  /* ── Fluid spacing scale ── */
  --space-1: clamp(4px,  0.6vw,  6px);
  --space-2: clamp(8px,  1vw,   10px);
  --space-3: clamp(10px, 1.4vw, 14px);
  --space-4: clamp(14px, 2vw,   18px);
  --space-5: clamp(18px, 2.8vw, 24px);
  --space-6: clamp(24px, 3.5vw, 32px);
  --space-7: clamp(32px, 5vw,   48px);
  --space-8: clamp(48px, 7vw,   72px);

  /* ── Fluid type scale ── */
  --text-xs:   clamp(10px, 1.4vw, 11px);
  --text-sm:   clamp(11px, 1.6vw, 13px);
  --text-base: clamp(13px, 2vw,   14px);
  --text-md:   clamp(14px, 2.2vw, 15px);
  --text-body: clamp(15px, 2.4vw, 16px);
  --text-lg:   clamp(16px, 2.8vw, 18px);
  --text-xl:   clamp(18px, 3.2vw, 22px);
  --text-2xl:  clamp(22px, 4vw,   28px);
  --text-3xl:  clamp(28px, 5vw,   36px);

  /* ── Motion ── */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}

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

html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background: var(--sand);
  color: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--text-body);
  line-height: 1.55;
}

.hidden { display: none !important; }

.section-label {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--space-2);
}

a { color: var(--accent); text-decoration: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input, select, textarea {
  font-family: inherit;
  /* Always ≥ 16px to prevent iOS auto-zoom on focus */
  font-size: 16px;
  touch-action: manipulation;
}

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

/* ── Focus management ── */
/* Remove all default outlines … */
*:focus { outline: none; }
/* … then restore only for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}