:root {
  --paper: rgba(255,255,255,0.90);
  --paper-strong: rgba(255,255,255,0.97);
  --text: #43352e;
  --muted: #7a655b;
  --line: rgba(120, 94, 83, 0.14);
  --accent: #b78b7a;
  --accent-soft: rgba(183, 139, 122, 0.12);
  --accent-green: #6d8f7c;
  --danger: #8a4e47;
  --shadow: 0 18px 60px rgba(49, 31, 24, 0.14);
  --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  min-height: 100vh;
  background: #eadfd6;
  position: relative;
}
.site-bg {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(46, 31, 26, 0.28), rgba(46, 31, 26, 0.16)),
    url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1600&q=80') center/cover fixed;
  z-index: -2;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(247,241,235,0.08), rgba(247,241,235,0.28) 45%, rgba(247,241,235,0.92) 74%, rgba(247,241,235,0.98));
}
button,input,textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
.app-shell {
  width: min(calc(100% - 18px), var(--max));
  margin: 0 auto;
  padding: 14px 0 42px;
}
.card,.section-card,.guest-row {
  background: var(--paper);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.section-card { padding: 24px 18px; margin-top: 16px; }
.center-page {
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.locked-card {
  width:min(100%,760px);
  padding:42px 24px;
  text-align:center;
}
.locked-label,.eyebrow,.section-kicker,.info-label {
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  font-size:.78rem;
}
h1,h2,h3 {
  font-family:'Cormorant Garamond', serif;
  margin:0;
  font-weight:600;
}
.locked-title,.names,.section-title { font-size:clamp(2.6rem,8vw,5.6rem); line-height:.92; }
.section-title { font-size:clamp(2rem,6vw,3.2rem); text-align:center; }
.intro,.section-sub,.muted,.small-text,.note,.locked-text { color:var(--muted); line-height:1.72; }
.btn,.control-btn {
  border:none;
  border-radius:999px;
  padding:14px 18px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:.18s ease;
}
.btn:hover,.control-btn:hover { transform:translateY(-1px); }
.btn-primary { background: var(--text); color: white; }
.btn-secondary { background: var(--accent-soft); color: var(--text); border:1px solid var(--line); }
.btn-accent { background: var(--accent); color: white; }
.btn-success { background: var(--accent-green); color:white; }
.btn-light { background: rgba(255,255,255,0.8); color:var(--text); border:1px solid rgba(255,255,255,0.45); }
.btn-danger { background: var(--danger); color:white; }
.btn-lock { background: rgba(67,53,46,0.72); color: white; opacity:.92; }
.btn[disabled] { opacity:.65; cursor:not-allowed; transform:none; }
.hero {
  min-height: 78vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card {
  width:100%;
  max-width:840px;
  overflow:hidden;
}
.card-top {
  padding:72px 20px 40px;
  text-align:center;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.72), rgba(255,255,255,0.18) 55%, transparent 75%),
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08));
}
.names .amp { display:block; color:var(--accent); font-style:italic; font-size:2.1rem; }
.intro { max-width:580px; margin:0 auto; }
.meta,.quick-links,.info-grid,.personal-grid,.stats-grid,.link-grid {
  display:grid;
  gap:14px;
}
.meta { margin-top:26px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.meta-pill,.info-box,.personal-box,.stat-box {
  background: var(--paper-strong);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(60,40,30,0.05);
}
.meta-pill,.info-box,.personal-box,.stat-box { padding:18px; }
.meta-pill { text-align:center; }
.info-value {
  font-family:'Cormorant Garamond', serif;
  font-size:1.9rem;
  line-height:1.1;
  margin:8px 0;
}
.quick-links { margin-top:24px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.quick-links .btn { width:100%; }
.personal-banner { max-width:840px; margin:0 auto 14px; padding:16px 18px; text-align:center; }
.highlight { font-family:'Cormorant Garamond', serif; font-size:1.7rem; margin-top:6px; }
.info-grid,.personal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.map-wrap {
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(49,31,24,0.08);
}
.map-wrap iframe { width:100%; height:360px; border:0; display:block; }
.footer-note {
  margin-top:16px;
  padding:18px;
  border-radius:18px;
  background:var(--accent-soft);
  text-align:center;
  line-height:1.7;
}
.floating-controls {
  position: sticky;
  top: 8px;
  z-index: 50;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:12px;
}
.control-btn {
  background: rgba(67,53,46,0.72);
  color:white;
  border:1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
}
.music-btn.is-playing { background: rgba(86,115,95,.92); }
.upload-note-inline {
  margin-top: 10px;
  text-align:center;
  color: var(--muted);
  font-size:.95rem;
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.section-head .section-title {
  text-align:left;
  font-size:clamp(1.8rem,5vw,2.7rem);
}
.section-body.hidden { display:none; }
.form-grid,.link-grid { display:grid; gap:12px; }
.field { display:grid; gap:7px; }
.field label {
  font-size:.82rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.field input,.field textarea {
  width:100%;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:white;
  color:var(--text);
}
.field textarea { min-height:92px; resize:vertical; }
.inline-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.stat-box { text-align:center; }
.stat-number {
  font-family:'Cormorant Garamond', serif;
  font-size:2rem;
}
.guest-row { padding:14px; display:grid; gap:12px; }
.guest-top {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.guest-name { font-size:1rem; font-weight:700; }
.badge {
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  font-size:.82rem;
}
.guest-link {
  font-size:.9rem;
  color:var(--accent-deep);
  background:var(--accent-soft);
  padding:10px 12px;
  border-radius:14px;
  word-break:break-all;
}
.edit-panel {
  margin-top:4px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.admin-login-card { max-width:720px; margin:34px auto 0; }
.export-box {
  background: var(--paper-strong);
  border:1px solid var(--line);
  border-radius:22px;
  padding:16px;
}
.export-preview {
  width:100%;
  min-height:220px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  padding:14px;
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.88rem;
  line-height:1.5;
  white-space:pre;
  overflow:auto;
}
.upload-panel {
  margin-top: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px dashed var(--line);
  background: rgba(255,255,255,0.55);
}
.upload-status {
  margin-top: 12px;
  color: var(--muted);
}
.progress-wrap {
  margin-top: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(67,53,46,0.10);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent-green);
  transition: width .2s ease;
}
.opening-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(70,49,41,0.88), rgba(110,83,72,0.78));
  padding:24px;
  transition: opacity .9s ease, visibility .9s ease;
  backdrop-filter: blur(3px);
}
.opening-screen.hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.envelope-scene { text-align:center; color:white; max-width:420px; width:100%; }
.tap-text {
  margin-top:22px;
  font-size:.98rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.96;
}
.envelope {
  position:relative;
  width:min(78vw,300px);
  height:420px;
  margin:0 auto;
  cursor:pointer;
}
.card-shell {
  position:absolute;
  inset:0;
  border-radius:18px;
  background: linear-gradient(180deg, #f4ede6, #eee3d8);
  box-shadow:0 24px 70px rgba(0,0,0,.30);
  overflow:hidden;
}
.card-shell::before,.card-shell::after {
  content:"";
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  background: linear-gradient(180deg, #f7f0ea, #ecdfd2);
  transition: transform 1.15s ease;
  z-index:3;
}
.card-shell::before {
  left:0;
  clip-path: polygon(0 0,100% 0,100% 100%,0 72%);
  transform-origin:left center;
}
.card-shell::after {
  right:0;
  clip-path: polygon(0 0,100% 0,100% 72%,0 100%);
  transform-origin:right center;
}
.seal {
  position:absolute;
  left:50%;
  top:49%;
  transform:translate(-50%, -50%);
  width:68px;
  height:68px;
  border-radius:999px;
  background: radial-gradient(circle at 35% 35%, #cf9a81, #b7775d 58%, #9e5e49 100%);
  box-shadow: 0 10px 24px rgba(77,36,25,0.30), inset 0 2px 4px rgba(255,255,255,0.35);
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f9efe8;
  font-family:'Cormorant Garamond', serif;
  font-size:1.5rem;
  transition: transform .55s ease, opacity .45s ease;
}
.sprig {
  position:absolute;
  left:50%;
  top:38%;
  transform:translateX(-50%);
  color:#efe6db;
  font-size:1.25rem;
  z-index:4;
  opacity:.95;
  transition: opacity .45s ease;
}
.inner-letter {
  position:absolute;
  inset:18px;
  border-radius:14px;
  background: linear-gradient(180deg, #fffdfb, #fcf7f2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:26px 20px;
}
.inner-letter h3 {
  font-size:2.35rem;
  color:#5b4338;
  margin-bottom:10px;
}
.inner-letter p {
  margin:0;
  color:#8a6b5e;
  line-height:1.6;
  font-size:1rem;
}
.opening-screen.open .card-shell::before { transform: translateX(-92%) rotate(-10deg); }
.opening-screen.open .card-shell::after { transform: translateX(92%) rotate(10deg); }
.opening-screen.open .seal { transform: translate(-50%,-50%) scale(.4); opacity:0; }
.opening-screen.open .sprig { opacity:0; }

@media (max-width: 820px) {
  body::before,.site-bg { background-attachment: scroll; }
  .meta,.info-grid,.personal-grid,.stats-grid,.quick-links { grid-template-columns:1fr; }
  .map-wrap iframe { height:300px; }
  .inline-actions { display:grid; grid-template-columns: 1fr 1fr; }
  .inline-actions .btn { width:100%; }
  .envelope { width:min(82vw,290px); height:390px; }
}