/* --- ОСНОВНЫЕ ПЕРЕМЕННЫЕ И СТИЛИ --- */
:root {
    --bg-color: #3d524a;
    --text-color: #F7F3E9;
    --accent-color: #c5a47e;
    
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Cormorant Garamond', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 19px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWYmJitbW1xcXFra2tbW1pSUlNHR0dvb29kZGRzZ2djY2CUjI6pvrjLAAAAFnRSTlMAAAAAAMQrx24pAwPEI+D0sgsAx1mUjY2a2wAAAQBJREFUeNq1k9tyhCAMhcnk2Q524v//t92fR0A7X4Z2HplhYE2lR+8Aap1g2oBPsj0ITo9gYppn8aEJoA6sP2B4s8UQDgAFgQLIBSAxQ2sQKy7oA4JmAZyB2IqAIQDbk0VzAc2eN/ALBrN8CaCj/Eb/ADsSKSVAB4oEjgoywT4FAGf7lHMAVpTSr5/ZFYBnAFYCrwH4BwBvAWsA/IB4bAWsA/ysfI8Y6w/gNCA1mQEX0HwA/jA6kQ2UxFoA3wD4D4D6AB4gB0w+ByYyA/gNeA9ACwBfUn+x9gD4B8BfAn4D1f68wAeA9AC4AcABsB/wJgA7AB54X8A/AFgB+AeADMArgA+A/wHwFwB3AByBnwHwLgB3ABwC3gBwC3gHwAnAPgBuAfA/AhgB6AfsHwLgA3A/ABkA/wD8A3A/ADMAPgD8A3A/ADMADgD8A3A/ADMAGDAbAbn2G/gD8A/gPwC+AfB/AL4B8H8A/gHwfwC+AfB/AL4B8D8A/gHw/wC+AfD/AL4B8H8A/gHw/wD+AfB/AP4B8H8A/gHw/wC+AfD/AP4B8H8A/gHw/wD+AfA/AP4B8P8A/gHwfwD+AfB/AL4B8H8A/gHw/wC+AfD/AP4B8P8A/gHw/wD+AfA/AP4B8P8A/gHw/wC+AfD/AL4B8H8A/gHw/wC+AfD/AP4B8H8A/gHw/wD+AfA/AP4B8P8A/gHwfwD+AfB/AL4B8H8A/gHwfwD+AfB/AP4B8H8A/gHwfwD+AfB/AP4B8P8A/gHwfwD+AfB/AL4B8P8A/gHwfwD+AfB/AP4B8H8A/gHw/wD+AfD/AL4B8P8A/gHw/wD+AfD/AP4B8H8A/gHw/wD+AfD/AL4B8P8A/gHwfwD+AfB/AP4B8H8A/gHw/wD+AfA/AP4B8P8A/gHwfwD+AfB/AP4B8P8A/gHwfwD+AfB/AL4B8P8A/gHwfwD+AfB/AP4B8H8A/gHwfwD+AfD/AL6Be4K2wA3bX2bAAAAAElFTkSuQmCC');
}

/* --- ПЕРВЫЙ ЭКРАН (HERO) --- */
#hero {
    height: 100vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center; position: relative;
    padding: 20px;
}
h1 {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1.1; margin: 0;
    color: var(--text-color);
}
#hero .subtitle {
    font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase;
    margin-bottom: 1.5rem; color: var(--accent-color);
}
#hero .date { font-size: 1.2rem; margin-top: 1rem; font-style: italic; }
.scroll-down-link { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 2px; height: 50px; background-color: rgba(255,255,255,0.3); }
.scroll-down-link::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 25px; background-color: var(--text-color); animation: scrollDown 2.5s infinite ease-in-out; }

/* --- ОСНОВНОЙ КОНТЕНТ (АЛЬБОМ) --- */
#content-album { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
.album-page {
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid rgba(197, 164, 126, 0.2);
}
#content-album section:last-child { border-bottom: none; }

h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 2rem;
}
p { margin-bottom: 1em; max-width: 650px; margin-left: auto; margin-right: auto; }
.intro { font-style: italic; opacity: 0.9; }
.signature { font-size: 1.5rem; font-style: italic; line-height: 1.5; margin-top: 2rem; }

/* --- ДЕТАЛИ И ПРОГРАММА --- */
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 3rem; }
.detail-item h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-color); }
.detail-item .time { font-size: 1.8rem; font-family: var(--font-heading); color: var(--text-color); margin: 0.5rem 0; }
.timeline { list-style: none; padding: 0; margin-top: 2rem; }
.timeline li { margin-bottom: 0.5rem; }

/* --- ДРЕСС-КОД И ХЭШТЕГ --- */
.color-palette { display: flex; justify-content: center; gap: 20px; margin-top: 2rem; }
.color-swatch { width: 40px; height: 40px; border-radius: 50%; }
.hashtag-display { font-size: 2rem; font-weight: 600; color: var(--accent-color); margin: 1rem 0; }

/* --- КНОПКИ И ФОРМА --- */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--accent-color); background-color: transparent;
    border: 1px solid var(--accent-color);
    padding: 10px 20px; text-decoration: none;
    transition: all 0.4s ease; cursor: pointer; font-size: 0.8rem;
    margin-top: 1rem;
}
.btn:hover { background-color: var(--accent-color); color: var(--bg-color); }

#rsvp-form { margin-top: 2.5rem; max-width: 550px; margin-left: auto; margin-right: auto; }
.form-row { display: flex; gap: 20px; }
.form-group { margin-bottom: 1.5rem; width: 100%; text-align: left; }
.form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(197, 164, 126, 0.4);
    border-radius: 2px; padding: 12px; color: var(--text-color);
    font-family: var(--font-body); font-size: 1.1rem;
}
#guest-names-container input { margin-bottom: 10px; }
.checkbox-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.checkbox-group div { display: flex; align-items: center; }
.checkbox-group input { width: auto; margin-right: 10px; }
.checkbox-label { font-size: 1rem; text-transform: none; letter-spacing: normal; opacity: 1; }
.btn.submit-btn { width: 100%; padding: 15px; margin-top: 1rem; }
#rsvp-message { text-align: center; margin-top: 1.5rem; font-weight: 600; font-size: 1rem; }
#rsvp-message.success { color: #a5d6a7; }
#rsvp-message.error { color: #ef9a9a; }

/* --- ФУТЕР И АНИМАЦИИ --- */
footer { text-align: center; padding: 40px 20px; font-size: 0.9rem; color: rgba(255,255,255,0.6); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrollDown { 0% { transform: translateY(0); opacity: 1; } 75% { transform: translateY(25px); opacity: 1; } 100% { transform: translateY(25px); opacity: 0; } }

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 768px) {
    body { font-size: 18px; }
    h1 { font-size: 3rem; }
    h2 { font-size: 2rem; }
    .details-grid { grid-template-columns: 1fr; gap: 30px; }
    .form-row { flex-direction: column; gap: 0; }
    .checkbox-group { grid-template-columns: 1fr; }
}