/* Shared reset + design tokens. Each template imports this, then layers
   its own accent color and section styles on top. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,400&display=swap');

:root {
  --color-ink: #1a1816;
  --color-paper: #faf8f5;
  --color-cream: #f2ede4;
  --color-warm-grey: #8c8579;
  --color-line: #e4ddd1;
  --accent: #1a1816; /* overridden per client */

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;

  --max-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-warm-grey);
}

/* scroll-reveal: elements start slightly lowered and faded, settle into
   place once they enter the viewport. Class toggled by shared/reveal.js */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hover-fade {
  transition: opacity 0.3s ease;
}

.hover-fade:hover {
  opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hero legibility helpers — keep white hero text readable no matter how
   bright the underlying photo is. "center" vignettes darkest behind
   middle-anchored text and fades out toward the edges so the photo still
   reads at full brightness there; "bottom" darkens a solid base for
   bottom-anchored text. Both are deliberately vignettes, not a flat scrim,
   so the photo doesn't get flattened. Pair with .hero-text-shadow, which
   inherits down to any heading/paragraph placed inside. */
.hero-overlay--center {
  background: radial-gradient(ellipse 70% 65% at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.32) 100%);
}

.hero-overlay--bottom {
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.05) 100%);
}

.hero-text-shadow {
  text-shadow: 0 2px 20px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.55);
}