:root{
  --bg: #FFFCF9;
  --surface: #FFFFFF;
  --text: #1F2937;
  --muted-text: #475569;
  --accent: #2D6A4F;
  --accent-2: #DA2C6A;
  --accent-3: #F59E0B;
  --muted: #F3EEE8;
  --border: rgba(15, 23, 42, 0.08);
  --shadow: rgba(17, 24, 39, 0.06);
  --focus: #0EA5E9;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --maxw: 980px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 18px;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: var(--space-6) var(--space-4); }
h1,h2,h3,h4 { font-family: 'Playfair Display', Georgia, serif; color: var(--text); line-height:1.2; margin:0 0 var(--space-4); }
h1{ font-size:46px; } h2{ font-size:34px; } h3{ font-size:24px; }
p{ margin:0 0 var(--space-4); color: var(--muted-text);}
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Nav */
.nav{ position:sticky; top:0; background: rgba(255,252,249,.9); backdrop-filter: blur(6px); border-bottom:1px solid var(--border); z-index:10;}
.nav .inner{ display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding: var(--space-3) var(--space-4);}
.nav a{ margin-left: var(--space-4); font-weight:600; color: var(--text);}

/* Buttons - high contrast */
.button{
  display:inline-block;
  background: var(--accent);
  color:#ffffff;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px var(--shadow);
  transition: background .2s ease, transform .12s ease, box-shadow .2s ease;
}
.button:hover{ transform: translateY(-1px); }
.button:active{ transform: translateY(0); }
.button.alt{
  background: var(--accent-2);
  color: #ffffff;
}
.button.muted{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* Sections */
.section{ padding: var(--space-7) var(--space-4); }
.section.alt{ background: var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}

/* Grid & cards */
.grid-3{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--space-5);}
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 10px 30px var(--shadow);
}

.quote{ font-family:'Crimson Pro', Georgia, serif; font-size:21px; color: var(--text);}
.cite{ margin-top:6px; color: var(--muted-text); font-size:16px; }

/* Badges & tags */
.badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 14px;
}

/* Footer */
.footer{ border-top:1px solid var(--border); background: var(--surface);}
.footer .inner{ max-width:var(--maxw); margin:0 auto; padding:var(--space-6) var(--space-4); font-size:16px; color: var(--muted-text);}

/* Utilities */
.center{ text-align:center; }
.mt5{ margin-top: var(--space-5);}
.mb5{ margin-bottom: var(--space-5);}
.maxw{ max-width: var(--maxw); margin: 0 auto; }

/* Focus & motion */
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form label {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(218, 44, 106, 0.15);
}

.contact-form fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.contact-form legend {
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.contact-form input[type="checkbox"] {
  margin-right: 8px;
  accent-color: var(--accent);
}

.contact-form button[type="submit"] {
  align-self: flex-start;
  margin-top: var(--space-5);
}