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

:root{
  --ink:#23322B;
  --ink-70: rgba(35,50,43,.7);
  --paper:#FBF7F2;
  --paper-dim:#F3ECE3;
  --blush:#E7C9C2;
  --rose:#B8746B;
  --rose-dark:#96594F;
  --brass:#9C7A3C;
  --brass-light:#E6D3AC;
  --sage:#7C8B72;
  --line: rgba(35,50,43,.14);
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 12px 40px rgba(35,50,43,.10);
  --shadow-lift: 0 20px 60px rgba(35,50,43,.18);
  --ff-display: "Fraunces", serif;
  --ff-body: "Inter", sans-serif;
  --ff-mono: "Space Mono", monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--ff-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--ff-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
p{ margin:0; line-height:1.6; color: var(--ink-70); }
a{ color: inherit; }
button{ font-family: var(--ff-body); cursor:pointer; }
::selection{ background: var(--blush); color: var(--ink); }

.eyebrow{
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose-dark);
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px; background: var(--rose);
  display:inline-block;
}

.container{ max-width: 1180px; margin:0 auto; padding: 0 32px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  text-decoration:none;
  white-space: nowrap;
}
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover{ border-color: var(--ink); }
.btn-rose{ background: var(--rose); color: #fff; }
.btn-rose:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(184,116,107,.35); }
.btn-brass{ background: linear-gradient(135deg, var(--brass) 0%, #C7A15C 100%); color: #2A2110; }
.btn-brass:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(156,122,60,.4); }
.btn-sm{ padding: 9px 18px; font-size: 13px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ---------- Nav ---------- */
.site-nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(251,247,242,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; height: 76px; }
.brand{ font-family: var(--ff-display); font-size: 21px; font-weight:600; display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .brand-mark{ width: 30px; height:30px; border-radius: 50%; background: conic-gradient(from 210deg, var(--rose), var(--brass), var(--sage), var(--rose)); display:inline-block; }
.nav-links{ display:flex; align-items:center; gap: 28px; }
.nav-links a{ font-size:14.5px; font-weight:500; text-decoration:none; color: var(--ink-70); }
.nav-links a:hover{ color: var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:12px; }

/* ---------- Modal ---------- */
.modal-overlay{ position: fixed; inset:0; background: rgba(35,50,43,.45); backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center; z-index: 200; padding: 20px; animation: fadeIn .2s ease; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.modal-card{ background: var(--paper); border-radius: var(--radius); width: 100%; max-width: 420px; padding: 34px 32px; box-shadow: var(--shadow-lift); position: relative; animation: modalIn .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes modalIn{ from{ opacity:0; transform: translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-close{ position:absolute; top:18px; right:18px; border:none; background:none; font-size: 20px; color: var(--ink-70); line-height:1; }
.modal-tabs{ display:flex; gap:4px; margin-bottom:22px; background: var(--paper-dim); padding:4px; border-radius: 999px; }
.modal-tab{ flex:1; text-align:center; padding:9px 0; border-radius:999px; border:none; background:none; font-size:13.5px; font-weight:600; color: var(--ink-70); }
.modal-tab.active{ background: var(--ink); color: var(--paper); }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color: var(--ink-70); }
.field input, .field textarea, .field select{ width:100%; padding: 11px 13px; border-radius: var(--radius-sm); border:1px solid var(--line); background:#fff; font-family: var(--ff-body); font-size:14px; color: var(--ink); }
.field input:focus, .field textarea:focus{ outline: 2px solid var(--rose); outline-offset:1px; }
.field-error{ color: var(--rose-dark); font-size: 12.5px; margin-top:8px; min-height: 1em; }
.field-hint{ font-size:12px; color: var(--ink-70); margin-top:6px; }

/* ---------- Cards ---------- */
.card{ background:#fff; border-radius: var(--radius); border:1px solid var(--line); box-shadow: var(--shadow-soft); }

/* ---------- Watermark (used inside published pages, injected via PHP) ---------- */
.ee-watermark{
  position:fixed; left:16px; bottom:16px; z-index:999;
  opacity:.2;
  display:block; line-height:0;
}
.ee-watermark img{ height:28px; width:auto; display:block; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius:99px; }

.skip-link:focus{ position:fixed; top:8px; left:8px; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:8px; z-index:999; }
:focus-visible{ outline: 2px solid var(--rose); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}