@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
  --color-stone: #f5f4f0;
  --color-ink: #1a1a18;
  --color-muted: #6b6b68;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
}

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

body {
  font-family: var(--font-sans);
  font-weight: 300;
  background-color: var(--color-stone);
  color: var(--color-ink);
}

.font-designer {
  font-family: var(--font-serif);
}

/* Hero overlay — gradient from bottom for text legibility */
.hero-overlay {
  position: relative;
  overflow: hidden;
}

.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    transparent 100%
  );
  pointer-events: none;
}

/* Hero overlay — light variant (light image, dark text) */
.hero-overlay-light {
  position: relative;
  overflow: hidden;
}

.hero-overlay-light::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.10) 45%,
    transparent 100%
  );
  pointer-events: none;
}

/* Public nav */
nav a {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 400;
}

nav a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}