/* ==========================================================
   Golden Years — a 50th anniversary party invitation
   Old album sepia, ivory and gold; Cinzel, Alex Brush and Lora.
   ========================================================== */
.gy {
  --g-bg: #2b2216; --g-bg2: #f7f0e2; --g-ink: #fbf3e2; --g-muted: rgba(251, 243, 226, 0.76);
  --g-accent: #c9a14a; --g-accent2: #f3d792; --g-card: #fffaf0; --g-card-ink: #3a2c18;
  --g-display: 'Cinzel', serif; --g-script: 'Alex Brush', cursive;
  --g-body: 'Lora', serif; --g-label: 'Cinzel', serif;
}
.gy .vx-loader { background: radial-gradient(circle at 50% 35%, #5a4628, #2b2216 70%); }
.gy .gr-dear, .gy .gr-to, .gy .gr-wish p, .gy .gr-flip-back { font-style: normal; }
.gy .gr-to { font-size: 1.9rem; }
.gy .gr-wish p { font: italic 400 0.98rem/1.5 var(--g-body); }
.gy .gr-stage-shade { background: linear-gradient(180deg, rgba(20, 14, 6, 0.8), rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 64%, rgba(20, 14, 6, 0.8)); }
.gy .gr-big { font-size: clamp(2rem, 10vw, 2.8rem); }
.gy .gr-big em { font-size: 1.3em; }
.gy .gr-h2 { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }

.gy-corner { position: absolute; right: 0; bottom: 0; width: 30%; aspect-ratio: 1; background: linear-gradient(135deg, transparent 50%, rgba(255, 246, 220, 0.9) 50%); border-radius: 0 0 6px 0; box-shadow: -4px -4px 14px rgba(0, 0, 0, 0.3); animation: gy-curl 2s ease-in-out infinite; transform-origin: 100% 100%; }
@keyframes gy-curl { 0%, 100% { transform: scale(0.8); } 50% { transform: scale(1.1); } }
.gy-swipe { inset: auto 0 -16% 0; height: 30px; }

.gy-fifty { margin: 2px 0 0; font: 600 clamp(4.6rem, 30vw, 7rem)/1 var(--g-display); background: linear-gradient(180deg, #fff6dc, #e2bd6a 50%, #9c7a32); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(201, 161, 74, 0.45)); }

/* light, paper-like sections */
.gy-invite, .gy-rsvp, .gy .gr-sec--alt, .gy .gr-wishes { color: #3a2c18; }
.gy-invite { background: linear-gradient(180deg, #f7f0e2, #efe3c8); }
.gy-invite .vx-countdown b { color: #9c7a32; font-family: var(--g-display); }
.gy .gr-sec--alt .gr-h2, .gy-invite .gr-h2, .gy .gr-wishes .gr-h2, .gy-rsvp .gr-h2 { color: #3a2c18; }
.gy .gr-sec--alt .gr-tl p { color: #6b5a3c; }
.gy-rings { width: 110px; margin: 0 auto 12px; filter: drop-shadow(0 10px 18px rgba(120, 90, 30, 0.35)); }
.gy-lead { margin: 0 auto 14px; max-width: 340px; font: italic 400 1.08rem/1.65 var(--g-body); color: #5a4a30; }
.gy-names { margin: 10px 0 18px; font: 400 clamp(2.6rem, 13vw, 3.4rem)/1.1 var(--g-script); color: #9c7a32; }

.gy-numbers { background: radial-gradient(circle at 50% 0%, #4a3a22, var(--g-bg) 70%); }

.gy-venue { background: var(--g-bg); }
.gy-venue-photo { margin: -92px -24px 34px; height: 240px; overflow: hidden; }
.gy-venue-photo img { width: 100%; height: 100%; object-fit: cover; }
.gy-info { display: grid; gap: 14px; margin-top: 28px; text-align: left; }
.gy-info > div { padding: 18px; border-radius: 16px; border: 1px solid var(--vx-line); }
.gy-info h3 { margin: 0 0 6px; font: 400 0.95rem var(--g-display); letter-spacing: 0.08em; color: var(--g-accent2); }
.gy-info p { margin: 0; font: 400 0.95rem/1.6 var(--g-body); color: var(--g-muted); }
.gy-swatches { display: flex; gap: 8px; margin-top: 12px; }
.gy-swatches i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255, 255, 255, 0.3); }

.gy-rsvp { background: linear-gradient(180deg, #efe3c8, #f7f0e2); }
.gy-card { position: relative; max-width: 400px; margin: 30px auto 0; padding: 74px 20px 26px; border-radius: 8px; background: #fffaf0; box-shadow: 0 30px 60px -30px rgba(90, 70, 30, 0.6); text-align: left; border: 1px solid rgba(201, 161, 74, 0.4); }
.gy-card .gr-kicker, .gy-card .gr-h2 { text-align: center; }
.gy-card-sprite { position: absolute; top: -62px; left: 50%; height: 120px; width: auto; transform: translateX(-50%); filter: drop-shadow(0 10px 16px rgba(90, 70, 30, 0.3)); }

.gy-gifts { background: var(--g-bg); }
.gy-gift-sprite { width: 110px; margin: 0 auto 10px; }
.gy-fund { max-width: 340px; margin: 0 auto; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--vx-line); }
.gy-fund summary { cursor: pointer; font: 400 0.9rem var(--g-display); color: var(--g-accent2); }
.gy-fund pre { white-space: pre-wrap; font: 400 0.95rem/1.6 var(--g-body); color: var(--g-ink); }
@media (prefers-reduced-motion: reduce) { .gy-corner { animation: none; } }