:root {
  --paper: #f3ede3;
  --card: #fffdf8;
  --ink: #3b352d;
  --muted: #8a7f6f;
  --line: #e2d9ca;
  --accent: #9a6b3f;
  --serif: Georgia, 'Times New Roman', serif;
  --mono: 'Courier New', ui-monospace, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); line-height: 1.55; }
main { max-width: 640px; margin: 0 auto; padding: 48px 16px 80px; }
h1 { font-size: 34px; font-weight: normal; margin: 0 0 8px; line-height: 1.2; }
p.lede { color: var(--muted); font-size: 18px; margin: 0 0 28px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); letter-spacing: 1.5px; font-size: 13px; }
button, .btn {
  font-family: var(--sans); font-size: 15px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--ink); color: var(--card); padding: 11px 18px; text-decoration: none; display: inline-block;
}
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button:disabled { opacity: .5; cursor: default; }
input[type=text] {
  font: inherit; font-size: 20px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink); width: 100%; max-width: 280px; text-align: center;
}
.eggs { display: flex; gap: 14px; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.egg { background: var(--card); border: 2px solid transparent; border-radius: 12px; padding: 14px 12px 10px; width: 150px; cursor: pointer; color: var(--ink); }
.egg[aria-pressed=true] { border-color: var(--accent); }
.egg .label { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 6px; }
.egg:hover svg { transform: rotate(-4deg); }
.egg svg { transition: transform .2s; }
.stack > * + * { margin-top: 16px; }
.card { background: var(--card); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.06); overflow: hidden; }
.card .pad { padding: 20px 24px; }
.postcard img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.postcard .stamp { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; color: var(--accent); }
.postcard .weather { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.postcard .body { font-size: 17px; margin: 12px 0; white-space: pre-line; }
.postcard .souvenir { color: var(--muted); font-size: 15px; }
.postcard .credit { font-family: var(--sans); font-size: 11px; color: var(--muted); padding: 0 24px 16px; }
.postcard .credit a { color: inherit; }
.pet-bob { animation: bob 2.4s ease-in-out infinite; display: inline-block; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.leave { animation: leave 2.2s ease-in forwards; display: inline-block; }
@keyframes leave { 20% { transform: translateX(-10px); } 100% { transform: translateX(420px); opacity: 0; } }
.error { color: #b5483b; font-family: var(--sans); font-size: 14px; min-height: 20px; }
#map { height: 380px; border-radius: 8px; margin: 20px 0 28px; }
.leaflet-container { font-family: var(--sans); }
footer { margin-top: 40px; font-family: var(--sans); font-size: 12px; color: var(--muted); text-align: center; }
@media (max-width: 480px) { h1 { font-size: 28px; } .egg { width: 100%; max-width: 220px; } #map { height: 300px; } }