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

:root {
  --cream:    #F5F0EA;
  --sand:     #E8DDD0;
  --stone:    #C4B5A5;
  --charcoal: #2C2824;
  --warm:     #8B6F5E;
  --white:    #FDFAF7;
  --bg:       #FFFFFF;  /* page + section background */

  /* Gallery 'open photo' cursor — cream circle with a thin plus; falls back to zoom-in */
  --cursor-view: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='%23FDFAF7' fill-opacity='0.92' stroke='%238B6F5E' stroke-width='1'/%3E%3Cpath d='M24 16v16M16 24h16' stroke='%232C2824' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 24 24, zoom-in;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Grows past 1440px viewports so big monitors don't get a narrow, small-type column: 1200px → 1760px at 2560px */
  --max-w: clamp(1200px, calc(1200px + (100vw - 1440px) * 0.5), 1760px);
  --section-pad: 6rem 2rem;
}

html {
  scroll-behavior: smooth;
  /* Scales every rem (type + spacing) on big monitors: 100% up to 1440px, 125% from ~2400px */
  font-size: clamp(100%, calc(100% + (100vw - 1440px) * 0.004), 125%);
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--bg);
  color: var(--charcoal);
  line-height: 1.7;
  font-size: 1rem;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
}

h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.4rem; }

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 0.75rem;
}

.btn-primary {
  display: inline-block;
  background: var(--warm);
  color: var(--white);
  padding: 0.85rem 2.2rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--charcoal); transform: translateY(-1px); }

.btn-outline {
  display: inline-block;
  border: 1px solid var(--warm);
  color: var(--warm);
  padding: 0.85rem 2.2rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: var(--warm); color: var(--white); }