*{box-sizing:border-box}
:root{--rose:#b97985;--rose-dark:#965d69;--ink:#65434b;--muted:#927b7d;--line:#efd9d7;--paper:#fffdfb}
html,body{margin:0;min-height:100%;font-family:Georgia,"Times New Roman",serif;color:var(--ink)}
body{min-height:100vh;background:radial-gradient(circle at 10% 15%,#f8dfdf 0,transparent 28%),radial-gradient(circle at 90% 85%,#f4dce1 0,transparent 30%),#fff7f5}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#d9a5aa 0.7px,transparent .7px);background-size:25px 25px;opacity:.13}
.card,.gallery{width:min(590px,calc(100% - 32px));margin:6vh auto 0;padding:48px 44px 34px;text-align:center;background:rgba(255,253,251,.96);border:1px solid var(--line);border-radius:24px;box-shadow:0 20px 60px rgba(130,76,87,.12);position:relative}
.ornament{color:#c78b91;font-size:22px;letter-spacing:5px;margin-bottom:22px}
.heart{width:64px;height:64px;margin:0 auto;display:grid;place-items:center;background:#f8e6e6;color:#bd7884;border-radius:50%;font-size:30px}
.eyebrow{margin:24px 0 10px;font:11px Arial,sans-serif;letter-spacing:4px;color:#b77b85}
h1{font-size:clamp(32px,7vw,47px);font-weight:normal;line-height:1.18;color:#87515e;margin:12px 0}
.divider{display:flex;align-items:center;justify-content:center;gap:14px;color:#c78b91;margin:22px}
.divider span{width:60px;height:1px;background:#e8c9c9}
.intro{font-size:20px;font-style:italic;color:#96636d}
.description{max-width:390px;margin:18px auto 30px;font-size:15px;line-height:1.9;color:var(--muted)}
.code-form{display:flex;flex-direction:column;gap:13px;text-align:left}
.code-form label{font-size:14px;color:#87515e}
.code-form input{width:100%;padding:16px;border:1px solid #ead2d2;border-radius:10px;background:#fffafa;font-size:15px;outline:none}
.code-form input:focus{border-color:var(--rose);box-shadow:0 0 0 3px #bd78841f}
.code-form button{padding:16px;border:0;border-radius:10px;background:var(--rose);color:#fff;font-size:15px;cursor:pointer;transition:.2s}
.code-form button:hover{background:var(--rose-dark);transform:translateY(-2px)}
.bottom{margin-top:38px;color:#b58b91;font-size:12px;font-style:italic}
.bottom b{display:block;font-size:23px;margin-top:7px}
footer{text-align:center;color:#a77c83;font-size:13px;margin:22px 0 30px}
.floating{position:fixed;color:#be778738;font-size:65px;pointer-events:none}
.f1{top:12%;left:12%;transform:rotate(-15deg)}.f2{top:20%;right:13%;font-size:78px}.f3{bottom:12%;left:17%;font-size:48px}
.error{padding:12px;background:#fff0f0;border:1px solid #e8bfc3;border-radius:9px;color:#934c58;font-size:14px}
.gallery{width:min(850px,calc(100% - 32px));margin:5vh auto;padding:42px}
.back{display:inline-block;color:var(--rose-dark);text-decoration:none;margin-bottom:25px}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:30px}
figure{margin:0;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 25px #7c4b5512}
figure img{width:100%;height:260px;object-fit:cover;border-radius:9px}
figcaption{padding:10px 4px 3px;color:#a16e78;font-size:13px;font-style:italic}
.empty{padding:40px 20px;background:#fff8f7;border:1px dashed #e4c3c6;border-radius:16px;margin-top:25px}
.empty div{font-size:40px;color:var(--rose)}.empty h2{font-weight:normal;color:#87515e}
.closing{margin-top:35px;color:var(--rose-dark);font-style:italic}
@media(max-width:600px){.card,.gallery{padding:35px 22px 28px;margin-top:3vh}.floating{opacity:.45}.photos{grid-template-columns:1fr}}


.photos figure video {
    width: 320px !important;
    height: 220px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 15px auto !important;
    border-radius: 15px;
    background: #000;
}

.photos figure {
    width: 100%;
    max-width: 350px;
    margin: 15px auto;
}

/* Alleen foto's van de brief NU */
.photos.nu-photos img {
    width: 100%;
    height: auto !important;
    max-height: 600px;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
}
.nu-photos figure {
    height: auto !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
}

.nu-photos figure img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

.memory-date {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b78391;
    margin-bottom: 8px;
    font-weight: 600;
}

.album-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 550px;
    margin: 20px auto;
}

.album-photo:nth-child(n+10) {
    display: none;
}

.album-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: #f5e8eb;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.album-photo img,
.album-photo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-photo:nth-child(3n+1) {
    transform: rotate(-2deg);
}

.album-photo:nth-child(3n+2) {
    transform: rotate(1.5deg);
}

.album-photo:nth-child(3n) {
    transform: rotate(-1deg);
}

.video-label {
    position: absolute;
    bottom: 6px;
    right: 8px;
    color: white;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    padding: 5px 8px;
}