:root{
    --red: #c8102e;
    --red-dark: #8c0a20;
    --red-tint: #fdeef0;
    --cream: #fffaf4;
    --ink: #1c1414;
    --gold: #e0a72e;
    --paper: #ffffff;
    --shadow: 0 10px 24px rgba(28,20,20,0.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:'Inter',sans-serif;}
h1,h2,h3{margin:0;}

/* ---------- HERO ---------- */
.hero{
    background:var(--red);
    color:#fff;
    padding:56px 24px 44px;
    text-align:center;
    position:relative;
    overflow:hidden;
    border-bottom:6px solid var(--red-dark);
}
.hero::before, .hero::after{
    content:"";
    position:absolute;
    border:2px solid rgba(255,255,255,0.15);
    border-radius:50%;
}
.hero::before{ width:340px; height:340px; top:-160px; left:-120px; }
.hero::after{ width:220px; height:220px; bottom:-120px; right:-60px; }

.hero-inner{ position:relative; z-index:1; }

.label-card{
    display:inline-block;
    background:#fff;
    padding:20px 26px 16px;
    border-radius:6px;
    box-shadow:0 16px 32px rgba(0,0,0,0.35);
    transform:rotate(-2deg);
    position:relative;
    margin-bottom:8px;
}
.label-card::before{
    content:"";
    position:absolute;
    top:-15px; left:50%;
    transform:translateX(-50%) rotate(-4deg);
    width:94px; height:28px;
    background:rgba(255,255,255,0.55);
    border:1px solid rgba(255,255,255,0.8);
    box-shadow:0 2px 4px rgba(0,0,0,0.15);
}
.label-card img{
    display:block;
    max-width:380px;
    width:80vw;
    height:auto;
}

.hero-sub{
    font-family:'Anton',sans-serif;
    font-size:clamp(20px, 4vw, 30px);
    letter-spacing:0.1em;
    margin-top:4px;
}

.quote-banner{
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:18px;
}
.quote-text{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-weight:700;
    font-size:clamp(16px, 3vw, 21px);
    margin:0;
    opacity:0;
    transition:opacity .5s ease;
}
.quote-text.show{ opacity:0.97; }

.hero-dates{
    font-family:'Inter',sans-serif;
    font-size:13px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    margin-top:14px;
    opacity:0.75;
}

/* ---------- STORY CAROUSEL ---------- */
.story-section{ padding-top:44px; padding-bottom:44px; }
.section-title.small{ font-size:clamp(20px,4vw,26px); margin-bottom:24px; }

.story-frame{
    position:relative;
    max-width:280px;
    margin:0 auto;
    aspect-ratio:4/5;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:5px solid #fff;
    background:var(--red);
}
.story-slides{ position:relative; width:100%; height:100%; }
.story-slide{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .45s ease;
}
.story-slide.active{ opacity:1; }

.story-progress{
    position:absolute; top:10px; left:10px; right:10px;
    display:flex; gap:5px;
    z-index:3;
}
.story-progress .bar{
    flex:1; height:3px;
    background:rgba(255,255,255,0.35);
    border-radius:2px;
    overflow:hidden;
}
.story-progress .bar .fill{
    display:block; height:100%; width:0%;
    background:#fff;
}
.story-progress .bar.done .fill{ width:100%; }

.story-nav{
    position:absolute; top:0; bottom:0; width:35%;
    background:transparent; border:none; cursor:pointer;
    z-index:2;
}
.story-nav.prev{ left:0; }
.story-nav.next{ right:0; }

/* ---------- SECTIONS ---------- */
section{ max-width:980px; margin:0 auto; padding:56px 24px; }
.section-title{
    font-family:'Anton',sans-serif;
    font-size:clamp(28px,5vw,40px);
    color:var(--red);
    text-align:center;
    margin-bottom:8px;
    letter-spacing:0.01em;
}
.section-desc{
    text-align:center;
    max-width:560px;
    margin:0 auto 36px;
    color:#5a4a4a;
    font-size:15px;
    line-height:1.6;
}

/* ---------- UPLOAD CARD ---------- */
.upload-card{
    background:var(--paper);
    border:2px solid var(--red);
    border-radius:4px;
    padding:32px;
    box-shadow:var(--shadow);
    position:relative;
}
.mascot-badge{
    background:#fff;
    border:4px solid var(--red);
    border-radius:50%;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:6px;
}
.mascot-badge img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.mascot-badge.corner{
    position:absolute;
    right:-16px;
    top:-42px;
    width:110px;
    height:110px;
}
.mascot-badge.small{
    width:74px;
    height:74px;
    flex:0 0 auto;
}
.field{ margin-bottom:20px; }
.field label{
    display:block;
    font-weight:600;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--red-dark);
    margin-bottom:8px;
}
.field input[type=text], .field textarea{
    width:100%;
    border:1.5px solid #e3d3d3;
    border-radius:4px;
    padding:12px 14px;
    font-family:'Inter',sans-serif;
    font-size:15px;
    background:#fffdfb;
    resize:vertical;
    transition:border-color .15s;
}
.field input[type=text]:focus, .field textarea:focus{
    outline:none;
    border-color:var(--red);
}
.dropzone{
    border:2px dashed #d9b9bd;
    border-radius:4px;
    padding:28px;
    text-align:center;
    cursor:pointer;
    background:var(--red-tint);
    transition:border-color .15s, background .15s;
    position:relative;
}
.dropzone.drag{ border-color:var(--red); background:#fbdfe2; }
.dropzone input{ display:none; }
.dropzone p{ margin:0; font-size:14px; color:#8a5f63; }
.dropzone .preview{
    max-width:180px;
    max-height:180px;
    margin:0 auto 12px;
    border-radius:4px;
    display:none;
    border:2px solid #fff;
    box-shadow:var(--shadow);
}

.submit-btn{
    display:block;
    width:100%;
    margin-top:8px;
    background:var(--red);
    color:#fff;
    border:none;
    border-radius:4px;
    padding:15px;
    font-family:'Anton',sans-serif;
    font-size:17px;
    letter-spacing:0.05em;
    cursor:pointer;
    transition:background .15s, transform .1s;
}
.submit-btn:hover{ background:var(--red-dark); }
.submit-btn:active{ transform:scale(0.99); }
.submit-btn:disabled{ background:#c9a2a8; cursor:not-allowed; }

.form-msg{ text-align:center; font-size:13px; margin-top:12px; min-height:16px; }
.form-msg.error{ color:var(--red-dark); font-weight:600; }
.form-msg.ok{ color:#2e7d4f; font-weight:600; }

/* ---------- GALLERY ---------- */
.gallery-section{ background:var(--red-tint); }
.gallery-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
}
.gallery-count{
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--red-dark);
    font-weight:600;
}
.download-all-btn{
    background:#fff;
    color:var(--red);
    border:2px solid var(--red);
    border-radius:4px;
    padding:9px 18px;
    font-family:'Anton',sans-serif;
    font-size:13px;
    letter-spacing:0.04em;
    cursor:pointer;
    transition:background .15s, color .15s;
}
.download-all-btn:hover{ background:var(--red); color:#fff; }
.download-all-btn:disabled{ opacity:0.5; cursor:not-allowed; }

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:34px 26px;
    padding-top:10px;
}
.polaroid{
    background:#fff;
    padding:12px 12px 44px;
    box-shadow:var(--shadow);
    position:relative;
    transition:transform .2s;
}
.polaroid:hover{ transform:translateY(-4px) rotate(0deg) !important; z-index:5; }
.polaroid img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
    background:#eee;
}
.polaroid .cap-name{
    position:absolute;
    bottom:22px; left:14px; right:14px;
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:14px;
    color:var(--ink);
}
.polaroid .cap-text{
    position:absolute;
    bottom:8px; left:14px; right:14px;
    font-size:11px;
    color:#8a7373;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.polaroid .pin{
    position:absolute;
    top:-9px; left:50%; transform:translateX(-50%);
    width:18px; height:18px;
    border-radius:50%;
    background:var(--red);
    border:2px solid #fff;
    box-shadow:0 2px 4px rgba(0,0,0,0.3);
}
.polaroid .dl{
    position:absolute;
    top:16px; left:16px;
    background:rgba(28,20,20,0.6);
    color:#fff;
    border:none;
    border-radius:50%;
    width:24px; height:24px;
    font-size:12px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}
.polaroid .del{
    position:absolute;
    top:16px; right:16px;
    background:rgba(200,16,46,0.85);
    color:#fff;
    border:none;
    border-radius:50%;
    width:22px; height:22px;
    font-size:13px;
    line-height:1;
    cursor:pointer;
    display:none;
}
.polaroid.mine .del{ display:block; }

.empty-state{
    text-align:center;
    color:#a3888c;
    font-size:14px;
    padding:40px 0;
    grid-column:1/-1;
}

footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    text-align:left;
    padding:36px 24px 60px;
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-weight:700;
    color:var(--red-dark);
    font-size:18px;
}
footer span{ display:block; font-family:'Inter',sans-serif; font-style:normal; font-weight:400; font-size:12px; color:#a3888c; margin-top:6px; letter-spacing:0.08em; text-transform:uppercase; }

@media (max-width:520px){
    .upload-card{ padding:22px; }
    .mascot-badge.corner{ width:86px; height:86px; top:-34px; right:-8px; }
    footer{ flex-direction:column; text-align:center; gap:10px; }
}