@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&family=DM+Sans:wght@400;500;600;700&display=swap');

:root { 
  --green:#203a31; --sage:#a9b5a2; --gold:#be9b52; --ivory:#f6f1e4; --ink:#1d2a25; --bad:#a3322b;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
  margin:0; 
  font-family: var(--sans); 
  background: linear-gradient(135deg, var(--ivory) 0%, #faf6ec 100%);
  color: var(--ink); 
  line-height:1.6;
  min-height: 100vh;
}
body.center { min-height:100vh; display:grid; place-items:center; padding:1rem; }

h1,h2,h3 { 
  color: var(--green); 
  font-family: var(--serif);
  font-weight:600; 
  margin:.2em 0 .5em;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 500; }
h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 500; }

.brand { 
  font-size:1.2rem; 
  letter-spacing:.12em; 
  text-transform:uppercase; 
  color:var(--green); 
  text-decoration:none; 
  font-weight:700;
  font-family: var(--serif);
}

.card { 
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border:1px solid rgba(227,220,199,0.6); 
  border-radius:20px; 
  padding:2.5rem; 
  box-shadow: 0 8px 32px rgba(32,58,49,.12), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover { 
  box-shadow: 0 16px 48px rgba(32,58,49,.15), inset 0 1px 0 rgba(255,255,255,0.8);
  transform: translateY(-2px);
  border-color: rgba(190,155,82,0.4);
}

.narrow { width:100%; max-width:420px; }

label { 
  display:block; 
  margin:.9rem 0 .3rem; 
  font:600 .9rem var(--sans);
  color: var(--green);
  letter-spacing: 0.3px;
}

input, select, textarea { 
  width:100%; 
  padding:.8rem .9rem; 
  border:2px solid #e3dcc7; 
  border-radius:12px; 
  font:1rem var(--sans);
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  transition: all 0.2s;
}
input:focus, select:focus, textarea:focus { 
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(190,155,82,0.1);
  background: #fff;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: var(--sage);
}

input[type="color"] {
  width: 100%;
  height: 60px;
  padding: 8px;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 4px;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(32,58,49,0.15);
}

.color-input {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.color-input small {
  font-size: 0.75rem;
  color: #7a8580;
  font-weight: 500;
  letter-spacing: 0.2px;
}

button, .btn { 
  display:inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top:1rem; 
  padding:.85rem 1.8rem; 
  border:0; 
  border-radius:12px; 
  background: linear-gradient(135deg, var(--green) 0%, #1b2f2a 100%);
  color:#fff; 
  font:600 1rem var(--sans); 
  cursor:pointer; 
  text-decoration:none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(32,58,49,0.2);
  letter-spacing: 0.3px;
}
button:hover, .btn:hover { 
  background: linear-gradient(135deg, #16291f 0%, #0f1e1a 100%);
  box-shadow: 0 8px 24px rgba(32,58,49,0.3);
  transform: translateY(-2px);
}
button:active, .btn:active { transform: translateY(0); }

button.link { 
  background:none; 
  color:var(--gold); 
  text-decoration:underline; 
  padding:.3rem 0; 
  margin:.5rem 0 0; 
  font-weight:600;
  box-shadow: none;
}
button.link:hover { color: var(--green); }

button.ghost { 
  background: rgba(255,255,255,0.7);
  color:var(--green); 
  border:2px solid var(--green);
  box-shadow: none;
}
button.ghost:hover { background: rgba(255,255,255,1); }

.row { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

.notice { 
  background: linear-gradient(135deg, #eef5ee 0%, #f0ede4 100%);
  border:1px solid #b9d3bb; 
  padding:1rem; 
  border-radius:12px; 
  font:.95rem var(--sans);
  color: var(--green);
  animation: slideIn 0.3s ease-out;
}
.notice.bad { 
  background: linear-gradient(135deg, #fbeceb 0%, #f9e5e2 100%);
  border-color:#e3b3af; 
  color:var(--bad);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fine { 
  font:.85rem var(--sans); 
  color:#7a8580; 
  margin-top:1.2rem;
  letter-spacing: 0.2px;
}

.wrap { 
  max-width:1000px; 
  margin:0 auto; 
  padding:2rem 1.5rem;
}

.top { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  gap:1rem; 
  flex-wrap:wrap; 
  margin-bottom:2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(32,58,49,0.1);
}

.grid { 
  display:grid; 
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); 
  gap:2rem;
  margin-top: 2rem;
}

#weddings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

#weddings-grid .card {
  display: flex;
  flex-direction: column;
}

#weddings-grid .card .row {
  margin-top: auto;
}

.tag { 
  display:inline-block; 
  padding:.25rem .8rem; 
  border-radius:20px; 
  font:600 .75rem var(--sans);
  background: rgba(240,234,215,0.8);
  color:#6b5520;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.tag.live { 
  background: linear-gradient(135deg, #e2f0e4 0%, #d4e8d8 100%);
  color:#1f5a2c;
}

.swatches { 
  display:flex; 
  gap:.6rem; 
  margin:.8rem 0;
  align-items: center;
  flex-wrap: wrap;
}
.swatches span { 
  width:42px; 
  height:42px; 
  border-radius:50%; 
  border:3px solid rgba(32,58,49,0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(32,58,49,0.15);
}
.swatches span:hover { 
  transform: scale(1.15);
  border-color: var(--green);
  box-shadow: 0 6px 20px rgba(32,58,49,0.25);
}

.hero { 
  text-align:center; 
  padding:6rem 1rem 3rem;
  background: linear-gradient(135deg, rgba(32,58,49,0.05) 0%, transparent 100%);
  border-radius: 20px;
  margin-bottom: 2rem;
}
.hero h1 { 
  font-size:clamp(2rem,6vw,3.4rem);
  font-family: var(--serif);
  font-weight: 400;
  margin-bottom: 1rem;
}
.hero p { color: #7a8580; font-size: 1.1rem; margin: 0.5rem 0; }

table { 
  width:100%; 
  border-collapse:collapse; 
  font:.95rem var(--sans);
  background: rgba(255,255,255,0.8);
  border-radius: 12px;
  overflow: hidden;
}
th { 
  background: linear-gradient(135deg, rgba(32,58,49,0.05) 0%, transparent 100%);
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.3px;
}
th, td { 
  text-align:left; 
  padding:.75rem 1rem; 
  border-bottom:1px solid #eee6d0;
}
tr:hover td { background: rgba(32,58,49,0.02); }

.sr { position:absolute; left:-9999px; }

/* Color picker improvements */
.palette-editor { display: flex; flex-direction: column; gap: 1rem; }
.color-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.color-input { 
  display: flex; 
  flex-direction: column;
  gap: 0.5rem;
}
.color-input input[type="color"] { 
  width: 100%;
  height: 60px;
  cursor: pointer;
  border: 2px solid #e3dcc7;
  border-radius: 12px;
  padding: 2px;
}
.color-input input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-input input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}