:root{
  --gold:#f6e9b6; --ivory:#fff9e6;
  --wood1:#6f4d31; --wood2:#4b3523; --wood3:#372515;
  --bg1:#1a2612; --bg2:#0c1208; --bg3:#070a05;
}
html,body{height:100%}
body{
  margin:0; display:flex; align-items:center; justify-content:center; flex-direction:column;
  background: radial-gradient(1200px 800px at 50% -20%, var(--bg1), var(--bg2) 55%, var(--bg3) 100%);
  color:#f5f1dc; font-family: "Georgia", serif; padding:18px 10px;
}
h1{margin:.2rem 0 .5rem; font-size:1.25rem; opacity:.9; letter-spacing:.02em}
.stage{position:relative; width:min(1000px, 96vw); aspect-ratio:1/1;}

svg{width:100%; height:100%}

.outer{fill:var(--wood3); stroke:#2b1b10; stroke-width:14px}
.mid{fill:var(--wood2); stroke:#2b1b10; stroke-width:14px}
.inner{fill:var(--wood1); stroke:#2b1b10; stroke-width:10px}

.names text{font-weight:800; font-size:26px; fill:var(--gold); letter-spacing:.02em}
.dates text{font-weight:700; font-size:20px; fill:var(--ivory); letter-spacing:.01em}

.leaf{fill:#5aa15a; stroke:#366b36; stroke-width:1}
.holly{fill:#2f6b2f; stroke:#1b3f1b; stroke-width:1}
.berry{fill:#c13b3b}

.cross{stroke:#ffffff22; stroke-width:1}

/* Centre scene */
#scene .ground{fill:#5c7a39}
#scene .trunk{fill:#5a3b22}
#scene .leafball{fill:#2f6f2f}
#scene .cloud{fill:#dfe8f3}
#scene .snow{fill:#e9f2ff}
#scene .raindrop{fill:#9ec6ff}
#scene .sun{fill:#ffd36b; stroke:#f2b23e; stroke-width:4}
#scene .bee{fill:#ffcc00; stroke:#222; stroke-width:1}
#scene .bee-wing{fill:#ffffffbb}
#scene .walker{fill:#8eb1ff}
#scene .dog{fill:#c6b29a}
#scene .van{fill:#f7b7c3; stroke:#852b48; stroke-width:2}

/* Popup panel */
.popup{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(680px,92vw); max-height:78vh; overflow:auto;
  background:linear-gradient(180deg,#6a4a2d,#4b3523);
  border:6px solid #2b1b10; border-radius:16px; padding:16px 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 80px rgba(255,247,210,.06);
  color:#f9edd0; display:none;
}
.popup h3{margin:.2em 0 .3em; font-size:1.4rem; color:#f6e9b6; text-shadow:0 0 10px rgba(246,233,182,.35)}
.popup .grid{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.popup .chip{background:#3b281a; border:1px solid #2b1b10; padding:6px 10px; border-radius:10px}
.popup .close{position:sticky; top:-8px; float:right; background:#2b1b10; color:#f6e9b6; border:none; padding:6px 10px; border-radius:8px; cursor:pointer}
.helper{opacity:.7; font-size:.95rem; margin-top:.4rem}