:root {
  --paper:     #FAF9F6;
  --paper-2:   #F5F0EB;
  --paper-3:   #EFE8DF;
  --ink:       #2B2926;
  --muted:     #6B6B6B;
  --gold:      #C9B99A;
  --gold-deep: #B5A380;
  --sage:      #A3B18A;
  --line:      #E4DED4;

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Lora', Georgia, serif;

  --radius-card: 1rem;
  --radius-input: 0.375rem;
  --radius-full:  9999px;

  --shadow-card:       0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-card-hover: 0 30px 60px -30px rgba(80,60,30,.18);
  --shadow-map:        0 20px 50px -30px rgba(80,60,30,.2);
  --shadow-button:     0 14px 28px -16px rgba(150,120,60,.45);
}

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

html {
  scroll-behavior: smooth;
}

html, body {
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(rgba(120,100,60,.035) 1px, transparent 1px),
    radial-gradient(rgba(120,100,60,.025) 1px, transparent 1px),
    linear-gradient(180deg, #FAF9F6 0%, #F7F4EE 100%);
  background-size: 3px 3px, 7px 7px, 100% 100%;
  background-position: 0 0, 1px 2px, 0 0;
}

::selection {
  background: rgba(201,185,154,.45);
  color: #2B2926;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  font-size: 0.875rem;
  text-decoration: none;
  z-index: 200;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}