@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Great+Vibes&display=swap");

:root { --bg:#ffffff; --card:#f5f8f5; --ink:#1b2a21; --green:#1d3b2a; --red:#1d3b2a; --line:#d3ddd5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Cormorant Garamond", Georgia, serif; font-size:19px; line-height:1.45; }
main { max-width:640px; margin:0 auto; padding:16px; }

.nav { position:sticky; top:0; z-index:10; display:flex; justify-content:center; gap:4px; padding:8px; background:var(--green); }
.nav a { color:#fff; text-decoration:none; padding:8px 14px; border-radius:20px; font-weight:600; font-size:17px; }
.nav a.on { background:#fff; color:var(--green); }

.hero { text-align:center; padding:28px 0 8px; }
.hero .names { font-family:"Great Vibes", cursive; font-size:3.4rem; color:var(--red); line-height:1.1; }
.hero .date { letter-spacing:.3em; color:var(--red); font-size:1rem; margin-top:6px; }

h2 { font-size:1.5rem; letter-spacing:.12em; text-transform:uppercase; text-align:center; color:var(--green); margin:36px 0 12px; }
h2::after { content:"◆"; display:block; font-size:.6rem; color:var(--green); margin-top:2px; }
h3 { font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:18px 0 6px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.card ul { list-style:none; margin:0; padding:0; }
.card li { padding:3px 0; }
.center { text-align:center; }
.link { color:var(--green); font-weight:600; }
.soon { text-align:center; color:#6f7f74; font-style:italic; }

.btns { display:grid; gap:10px; margin:20px 0; }
.btn { display:block; text-align:center; text-decoration:none; background:var(--red); color:#fff; font-weight:700; font-size:1.2rem; padding:14px; border-radius:12px; }
.btn.alt { background:#fff; color:var(--green); border:2px solid var(--green); }

.tabs { display:flex; gap:8px; justify-content:center; margin-bottom:12px; }
.tabs button { font:inherit; font-weight:600; padding:8px 16px; border-radius:20px; border:1px solid var(--green); background:transparent; color:var(--green); cursor:pointer; }
.tabs button.on { background:var(--green); color:#fff; }

.map img { width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--line); }
.legend { columns:2; column-gap:16px; margin-top:12px; font-size:17px; }
.legend li { break-inside:avoid; }
.legend b { display:inline-block; min-width:1.7em; height:1.7em; line-height:1.7em; text-align:center; border-radius:50%; background:var(--red); color:#fff; font-size:.8em; margin-right:6px; font-family:Georgia, serif; }

footer { text-align:center; padding:32px 0 40px; font-family:"Great Vibes", cursive; font-size:1.8rem; color:var(--red); }

/* desktop: hărțile primesc toată lățimea, textul rămâne pe coloană îngustă */
@media (min-width:900px) {
  main { max-width:1200px; }
  main > *:not(.map):not(svg) { max-width:720px; margin-left:auto; margin-right:auto; }
  main > svg { max-width:900px; margin:0 auto; }
  .legend { columns:4; }
}