:root{
  --bg:#070506;
  --panel: rgba(220, 180, 180, 0.54);
  --panel2: rgba(220, 180, 180, 0.54);
  --stroke: rgba(255, 255, 255, .08);
  --text:#f5eadb;
  --muted:#6e4646;
  --gold:#d7b56d;
  --gold2:#b99142;
  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --radius:22px;
  --max: 1020px;
}

*{box-sizing:border-box}
html,body{height:100%; overscroll-behavior: none;}
body{
  margin:0;
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: #070506 url("../assets/img/bg.png") center/cover no-repeat fixed;
  background-attachment: fixed;
  background-color: #070506;
  overflow-x:hidden;
}

a{color:inherit}
img{max-width:100%; display:block}

/* .bg removed in v3 (background now on body) */


.petals{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.petals span{
  position:absolute;
  top:-12vh;
  left: calc((var(--i) * 5.2vw) - 10vw);
  width: 42px;
  height: 42px;
  background: url("../assets/img/rosseeffect.png") center/contain no-repeat;
  opacity: .42;
  transform: translate3d(0,0,0) rotate(0deg) scale(var(--s));
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
  animation: petal-fall 13s linear infinite;
  animation-delay: calc(var(--d) * -10s);
}
@keyframes petal-fall{
  0%{ transform: translate3d(0,-12vh,0) rotate(0deg) scale(var(--s)); opacity:0; }
  8%{opacity:.45}
  100%{ transform: translate3d(18vw,112vh,0) rotate(360deg) scale(var(--s)); opacity:0; }
}
@media (max-width: 720px){
  .petals span{ width: 30px; height: 30px; opacity:.35; }
}

.decor{
  position:fixed;
  width:min(520px, 55vw);
  aspect-ratio:1/1;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.85;
  filter: saturate(.95) contrast(1.05);
  pointer-events:none;
  z-index: 0;
}
.decor-tl{left:-110px; top:-110px; background-image:url("../assets/generated/rose_tl.png")}
.decor-br{right:-140px; bottom:-140px; background-image:url("../assets/generated/rose_br.png")}

.wrap{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;
  padding: 30px 18px 26px;
}

.topbar{
  position:sticky;
  top:14px;
  z-index:20;
  margin-bottom: 18px;
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(220, 180, 180, 0.9);
   border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.brand{
  text-decoration:none;
  font-family: Cinzel, ui-serif, Georgia, serif;
  letter-spacing:.06em;
  font-size: 14px;
  text-transform: uppercase;
  color: rgba(245,234,219,.92);
}

.nav{display:flex; align-items:center; gap:14px}
.nav a{
  text-decoration:none;
  font-size: 13px;
  color: rgba(245,234,219,.88);
  padding: 8px 10px;
  border-radius: 12px;
}
.nav a:hover{background: rgba(255,255,255,.06)}
.nav-cta{
  border: 1px solid rgba(110, 70, 70, 1);
  background: rgba(110, 70, 70, 1);
}
.nav-admin{opacity:.65}
.menu-btn{
  display:none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 10px;
  cursor:pointer;
}
.menu-btn span{
  display:block;
  width:20px;
  height:2px;
  background: rgba(245,234,219,.85);
  margin: 4px 2px;
  border-radius: 2px;
}

.card{
  background: var(--panel);
  border: 1px solid rgba(220, 180, 180, 0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 34px;
}
.card-hero{
  position:relative;
}
.card-hero:before{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--radius);
  background: radial-gradient(700px 320px at 50% 0%, rgba(110, 70, 70, 1), rgba(0,0,0,0) 70%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.9;
}

.hero{ text-align:center; padding-bottom: 6px;}
.hero-top{
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color: rgba(110, 70, 70, 1);
}
.hero-title{
  margin: 12px 0 6px;
  font-family: "Great Vibes", cursive;
  font-size: 64px;
  font-weight: 400;
  color: rgba(245,234,219,.96);
  text-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.hero-date{
  font-family: Cinzel, ui-serif, serif;
  color: rgba(110, 70, 70, 1);
  font-size: 16px;
  letter-spacing:.08em;
}
.hint{
  margin: 14px auto 0;
  max-width: 52ch;
  color: rgba(110, 70, 70, 1);
  font-size: 14px;
  line-height: 1.6;
}

.countdown{
  display:flex;
  gap: 12px;
  justify-content:center;
  margin: 18px 0 10px;
  flex-wrap:wrap;
}
.cd-item{
  min-width: 92px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(110, 70, 70, 1);
}
.cd-num{
  font-family: Cinzel, ui-serif, serif;
  font-size: 30px;
  font-weight: 600;
  color: rgba(110, 70, 70, 1);
}
.cd-lbl{
  font-size: 11px;
  color: rgba(110, 70, 70, 1);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top: 4px;
}

.grid2{display:grid; grid-template-columns: 1fr; gap:14px; margin-top:22px; justify-items:center;}
@media (max-width:820px){
  .grid2{grid-template-columns:1fr}
  .hero-title{font-size: 52px}
  .card{padding:22px}
  .cd-item{min-width:76px}
  .topbar{top:10px}
  .nav{display:none}
  .menu-btn{display:block}
  body.nav-open .nav{
    display:flex;
    position: fixed;
    left: 18px;
    right: 18px;
    top: 76px;
    flex-direction: column;
    padding: 12px;
    gap: 6px;
    border-radius: 18px;
    background: rgba(220, 180, 180, 0.9);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
  }
  body.nav-open .nav a{width:100%}
}

.info{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background: var(--panel2);
  border: 1px solid rgba(220, 180, 180, 0.9);
  border-radius: 18px;
  padding: 18px;
}
.info-icon{
  width: 40px; height:40px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(110, 70, 70, 1);
  flex: 0 0 40px;
}
.info-icon img{
  width:20px; height:20px;
  filter: invert(86%) sepia(19%) saturate(380%) hue-rotate(347deg) brightness(104%) contrast(96%);
  opacity:.95;
}
.info-title{
  font-family: Cinzel, ui-serif, serif;
  font-weight:600;
  letter-spacing:.06em;
}
.info-text{
  color: rgba(110, 70, 70, 1);
  margin: 6px 0 12px;
  line-height:1.5;
}

.section{margin-top:26px}
.section-title{
  font-family: Cinzel, ui-serif, serif;
  letter-spacing:.10em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  color: rgba(110, 70, 70, 1);
  margin-bottom: 12px;
}

.list{display:grid; gap:10px}
.list-item{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(220, 180, 180, 0.9);
  background: rgba(0,0,0,.18);
  color: rgba(110, 70, 70, 1);
}
.list-item strong{
  font-family: Cinzel, ui-serif, serif;
  color: rgba(245,234,219,.96);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 14px;
  padding: 11px 14px;
  text-decoration:none;
  cursor:pointer;
  font-weight: 600;
  border: 1px solid rgba(110, 70, 70, 1);
  background: linear-gradient(180deg, rgba(110, 70, 70, 1), rgba(185,145,66,.16));
  color: rgba(245,234,219,.95);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform: translateY(1px)}
.btn-ghost{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(220, 180, 180, 0.9);
  box-shadow:none;
}
.link{color: rgba(110, 70, 70, 1); text-decoration:none}
.link:hover{text-decoration:underline}

.invite img{
  border-radius: 18px;
  border: 1px solid rgba(220, 180, 180, 0.9);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}

.footer{
  padding: 22px 18px 30px;
  color: rgba(110, 70, 70, 1);
  text-align:center;
}
.footer-inner{max-width: var(--max); margin:0 auto}

/* Alerts / forms (RSVP, admin) */
.alert{border-radius:16px; padding:12px 14px; margin: 14px 0; border:1px solid}
.alert-error{background: rgba(120, 20, 20, .25); border-color: rgba(255, 120, 120, .25)}
.alert-ok{background: rgba(20, 90, 50, .25); border-color: rgba(120, 255, 190, .18)}
.form{margin-top:10px}
.form-title{
  font-family: Cinzel, ui-serif, serif;
  letter-spacing:.08em;
  color: rgba(110, 70, 70, 1);
  margin: 12px 0 10px;
}
.field{display:flex; flex-direction:column; gap:6px; margin: 12px 0}
label{color: rgba(110, 70, 70, 1); font-size:13px}
input, select, textarea{
  font: inherit;
  color: rgba(245,234,219,.95);
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(220, 180, 180, 0.9);
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(110, 70, 70, 1)
  box-shadow: 0 0 0 4px rgba(110, 70, 70, 1);
}
textarea{min-height: 92px; resize: vertical}
table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 16px;
  border:1px solid rgba(220, 180, 180, 0.9);
}
th, td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(220, 180, 180, 0.9);
  text-align:left;
  font-size:13px;
}
th{
  color: rgba(110, 70, 70, 1);
  font-family: Cinzel, ui-serif, serif;
  letter-spacing:.06em;
  font-weight:600;
  background: rgba(0,0,0,.22);
}
tr:hover td{background: rgba(220, 180, 180, 0.9)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.small{font-size:12px}
.center{text-align:center}
.muted{color: rgba(110, 70, 70, 1)}


/* Admin extra note columns */
.smalltext{display:block;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tablewrap td.note{max-width:260px;}


/* Premium grain overlay */
.grain-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: url("../assets/img/grain.png") repeat;
  opacity: .12;
  mix-blend-mode: soft-light;
}