:root {
    --ink: #3a4f7a;
    --gold: #e3b873;
    --paper: #fff8e7;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    font-family: Poppins, sans-serif;
    line-height: 1.6;
    background: linear-gradient(to bottom, var(--page-1) 0%, var(--page-2) 45%, var(--page-3) 100%);
}

#snow-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
}

.parent-bar {
    position: relative;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin: 0;
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
}

.parent-bar a { color: var(--ink); }

.hero, .letter {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.hero {
    text-align: center;
    background: linear-gradient(135deg, #faf3f8, #e8f6f3);
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    padding: 4rem 1.5rem 3.5rem;
}

.hero h1, .letter h2, .hero h2 {
    font-family: "Mountains of Christmas", cursive;
    line-height: 1.05;
    margin: 0;
}

.hero h1 { font-size: clamp(3.4rem, 8vw, 5.6rem); }

.hero h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    max-width: 18em;
    margin: 0.5rem auto 0;
}

.hero p {
    font-style: italic;
    max-width: 36rem;
    margin: 1rem auto 0;
    opacity: 0.9;
}

.hero-santa-wrap {
    width: 70%;
    max-width: 320px;
    height: 420px;
    margin: 1.5rem auto 0;
    border-radius: 1.2rem;
    overflow: hidden;
    animation: santa-float 3s ease-in-out infinite;
}

.hero-santa-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #f6efe4;
}

@keyframes santa-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (max-width: 480px) {
    .hero-santa-wrap {
        width: 85%;
        height: 360px;
    }
}

.letter-frame {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--paper);
    border: 4px dashed var(--gold);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    font-family: "Patrick Hand", cursive;
    font-size: 1.35rem;
    color: #222;
}

.letter-frame h2 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
}

.letter-frame p { margin: 0 0 1rem; }

.report {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    text-align: center;
}

.report > h2 {
    font-family: "Mountains of Christmas", cursive;
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 1rem;
}

.report-frame {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem;
    text-align: left;
    background: linear-gradient(to bottom, #e9ecf5, #f4f1ec);
    border: 4px solid var(--soft-a);
    border-radius: 20px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
    font-family: "Patrick Hand", cursive;
    font-size: 1.35rem;
    color: #222;
}

.report-frame p { margin: 0 0 1rem; }

.gallery, .gift-list {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    text-align: center;
}

.gallery h2, .gift-list h2 {
    font-family: "Mountains of Christmas", cursive;
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 0 0 1rem;
}

.gallery-frame, .gift-frame {
    max-width: 760px;
    margin: 0 auto;
}

.gallery-photo {
    display: none;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.gallery-photo.is-shown { display: block; }

.gallery-controls {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 0.8rem;
}

.gallery-controls button {
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}

.gift-frame {
    display: inline-block;
    width: 100%;
    max-width: 720px;
    text-align: center;
    padding: 1.5rem 1.8rem 1.3rem;
    background: #fff;
    border: 6px solid #e8c070;
    border-radius: 20px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
}

.gift-kicker {
    margin: 0;
    line-height: 1.45;
}

.gift-kicker em {
    font-weight: 400;
}

.gift-frame ul {
    display: inline-block;
    text-align: left;
    margin: 1rem auto 0.8rem;
    padding: 0;
    list-style: none;
}

.gift-frame li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0.4rem 0;
}

.gift-closing {
    margin: 0.2rem 0 0;
    font-style: italic;
}

.christmas-eve {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto 2.5rem;
    padding: 2rem 1.6rem 1.6rem;
    background: linear-gradient(135deg, var(--eve-1), var(--eve-2));
    color: #3a4f7a;
    border-radius: 20px;
    text-align: center;
}

.christmas-eve h2 {
    font-family: "Mountains of Christmas", cursive;
    font-size: clamp(2rem, 4vw, 2.7rem);
    margin: 0 0 0.4rem;
}

.eve-kicker {
    font-weight: 600;
    margin: 0 0 0.8rem;
}

.christmas-eve p {
    margin: 0 0 0.8rem;
}

.page-foot {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0.5rem 1rem 2.5rem;
}

.page-foot p {
    margin: 0;
    font-family: "Mountains of Christmas", cursive;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.3;
}

.elves {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto 2.5rem;
    padding: 0 1rem;
    text-align: center;
}

.elves h2 {
    font-family: "Mountains of Christmas", cursive;
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 0.3rem;
}

.elf-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.2rem;
}

.elf-card {
    background: linear-gradient(to bottom, #cfffe1, #e7e4f4);
    border-radius: 18px;
    padding: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.elf-video {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    background: #111;
    border-radius: 14px;
    display: block;
    margin-bottom: 0.5rem;
}

.elf-card p { margin: 0; }

@media (max-width: 800px) {
    .elf-cards { grid-template-columns: 1fr; }
}

.gift-frame img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
}

@media (max-width: 600px) {
    .gift-frame li { align-items: flex-start; }
}

/* ---------- Santa's parchment letter (matches the emailed PDF) ---------- */
.parch {
    --burg: #7a1f2b;
    --gold-d: #b98a2e;
    --parch-ink: #3b2a17;
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 4.2rem 4rem 3.6rem;
    background: radial-gradient(ellipse at 50% 38%, #f6e8c6 0%, #ebd7a6 70%, #d9be86 100%);
    border-radius: 6px;
    box-shadow: 0 22px 55px rgba(70, 40, 10, 0.3), inset 0 0 70px rgba(150, 105, 40, 0.18);
    color: var(--parch-ink);
    text-align: center;
    overflow: hidden;
}

.parch-rule { position: absolute; pointer-events: none; }
.parch-rule-1 { inset: 14px; border: 2px solid var(--burg); }
.parch-rule-2 { inset: 20px; border: 1px solid var(--gold-d); }

.parch-corner { position: absolute; width: 74px; height: 74px; pointer-events: none; }
.parch-corner svg { width: 100%; height: 100%; display: block; }
.pc1 { left: 8px; top: 8px; }
.pc2 { right: 8px; top: 8px; transform: scaleX(-1); }
.pc3 { left: 8px; bottom: 8px; transform: scaleY(-1); }
.pc4 { right: 8px; bottom: 8px; transform: scale(-1, -1); }

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

.parch-crest {
    font: 600 0.78rem "Cormorant Garamond", serif;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--burg);
}

.letter .parch h2 {
    font-family: "Mountains of Christmas", cursive;
    font-size: clamp(2.1rem, 5.4vw, 3.2rem);
    color: var(--burg);
    margin: 0.5rem 0 0.2rem;
    line-height: 1.05;
}

.parch-sub { font: italic 600 1.05rem "Cormorant Garamond", serif; color: var(--gold-d); }
.parch-orn { display: block; width: 190px; height: 16px; margin: 1.1rem auto 1.4rem; }

.parch-text {
    text-align: left;
    font: 500 1.4rem/1.6 "Cormorant Garamond", serif;
    color: var(--parch-ink);
}

.parch-text p { margin: 0 0 1.05rem; }

.parch-greet {
    font: italic 700 1.7rem "Cormorant Garamond", serif;
    color: var(--burg);
    margin-bottom: 0.7rem !important;
}

.parch-greet + p::first-letter,
.parch-text > p:first-child:not(.parch-greet)::first-letter {
    font: 700 3.2rem/0.8 "Mountains of Christmas", cursive;
    color: var(--burg);
    float: left;
    margin: 0.3rem 0.5rem 0 0;
}

.parch-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
    margin-top: 1.4rem;
}

.parch-sig { font: 700 2.4rem "Mountains of Christmas", cursive; color: var(--burg); line-height: 1; }
.parch-sig small { display: block; font: italic 600 1.05rem "Cormorant Garamond", serif; color: var(--parch-ink); margin-bottom: 0.2rem; }

.parch-seal {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #f6d9a0;
    font: 700 2.5rem "Mountains of Christmas", cursive;
    background: radial-gradient(circle at 35% 30%, #d4475c, #9b1f33 60%, #6f1224);
    box-shadow: 0 5px 10px rgba(60, 10, 20, 0.5), inset 0 0 0 5px rgba(255, 255, 255, 0.12);
}

.parch-seal::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px dashed rgba(246, 217, 160, 0.65);
    border-radius: 50%;
}

/* worn "Nice List" stamp, laid over the lower part of the letter */
.parch-stamp {
    position: absolute;
    right: 6%;
    bottom: 17%;
    width: min(400px, 64%);
    transform: rotate(-14deg);
    opacity: 0.55;
    color: #a51a2a;
    z-index: 2;
    pointer-events: none;
}

.parch-stamp svg { display: block; width: 100%; height: auto; overflow: visible; }

@media (max-width: 600px) {
    .parch { padding: 3.2rem 1.9rem 2.6rem; }
    .parch-corner { width: 52px; height: 52px; }
    .parch-text { font-size: 1.22rem; }
    .parch-greet { font-size: 1.45rem; }
    .parch-seal { width: 66px; height: 66px; font-size: 2rem; }
    .parch-stamp { width: 78%; bottom: 20%; right: 4%; }
}


/* ---------- grand hero (top of the child's page) ---------- */
#candy-snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; }

.hero.hero-grand {
    max-width: 1180px;
    margin: 0.5rem auto 2.5rem;
    padding: 3rem 2.4rem;
    text-align: left;
    background:
        radial-gradient(circle at 12% 18%, var(--hero-glow-1), transparent 42%),
        radial-gradient(circle at 92% 85%, var(--hero-glow-2), transparent 45%),
        linear-gradient(135deg, var(--hero-bg-1), var(--hero-bg-2));
    border-radius: 2.2rem;
    box-shadow: 0 20px 60px rgba(75, 58, 138, 0.14);
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2rem;
    align-items: center;
}

.hero-kicker {
    display: inline-block;
    font: 600 0.78rem Poppins, sans-serif;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #b98a2e;
    margin-bottom: 0.4rem;
}

.hero.hero-grand .hero-name {
    font-family: "Mountains of Christmas", cursive;
    font-size: clamp(4.2rem, 11vw, 8rem);
    line-height: 0.95;
    margin: 0 0 0.3rem;
    letter-spacing: 0.02em;
    background: linear-gradient(110deg, #9a6410 0%, #e3b04a 28%, #f6d98a 46%, #c48a2a 66%, #8e5f10 84%, #e3b04a 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 0 rgba(120, 70, 0, 0.22));
    animation: name-shimmer 7s linear infinite;
    overflow-wrap: anywhere;
}

@keyframes name-shimmer {
    from { background-position: 0% center; }
    to { background-position: 220% center; }
}

.hero.hero-grand h2 {
    font-family: "Mountains of Christmas", cursive;
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    color: var(--ink-d);
    max-width: none;
    margin: 0.2rem 0 0;
}

.hero.hero-grand .hero-line {
    font-style: italic;
    font-size: 1.1rem;
    max-width: 34rem;
    margin: 0.8rem 0 0;
    opacity: 1;
    color: #3a4f7a;
}

.hero-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 0; }

.hero-chip {
    background: #fff;
    border-radius: 999px;
    padding: 0.35rem 0.95rem;
    font: 600 0.85rem Poppins, sans-serif;
    color: #3a4f7a;
    box-shadow: 0 4px 14px rgba(58, 79, 122, 0.12);
}

.hero-chip.nice { background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; }

.hero-count {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.55rem 1.1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
    font-size: 0.98rem;
    color: #3a4f7a;
}

.hero-count b { font: 700 1.7rem "Mountains of Christmas", cursive; color: var(--a); margin: 0 0.15rem; }

.hero-jump { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; align-items: center; margin-top: 1.1rem; }
.hero-jump span { font: 600 0.75rem Poppins, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #8a7aa8; }

.hero-jump a {
    text-decoration: none;
    font: 600 0.85rem Poppins, sans-serif;
    color: var(--ink-d);
    border: 2px solid var(--line);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
}

.hero-jump a:hover { border-color: var(--a); color: var(--a); }

.hero-film { position: relative; display: grid; place-items: center; }

.hero-film::before {
    content: "";
    position: absolute;
    width: 88%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ffd3e3, #cfe2fb, #e6dff1, #ffd3e3);
    filter: blur(26px);
    opacity: 0.9;
}

.hero.hero-grand .hero-santa-wrap {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 3 / 4;
    margin: 0;
    border: 8px solid #fff;
    border-radius: 2rem;
    box-shadow: 0 22px 50px rgba(75, 58, 138, 0.3);
    background: #f6efe4;
}

.hero-santa-wrap .sack-name { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.spark { position: absolute; color: #e3b873; font-size: 1.6rem; animation: spark-twinkle 2.6s ease-in-out infinite; }
.spark.s1 { top: 4%; left: 8%; }
.spark.s2 { top: 18%; right: 4%; font-size: 1.1rem; animation-delay: 0.9s; }
.spark.s3 { bottom: 10%; left: 2%; font-size: 1.2rem; animation-delay: 1.7s; }

@keyframes spark-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* the rest of the page: a little wider than before */
.letter-frame, .report-frame { max-width: 820px; }
.gallery-frame, .gift-frame { max-width: 860px; }
.parch { max-width: 780px; }

@media (max-width: 720px) {
    .hero.hero-grand { padding: 2.2rem 1.3rem; text-align: center; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { display: flex; flex-direction: column; align-items: center; }
    .hero.hero-grand .hero-line { margin-left: auto; margin-right: auto; }
    .hero-chips, .hero-jump { justify-content: center; }
    .hero-film { order: -1; margin-bottom: 0.6rem; }
    .hero.hero-grand .hero-santa-wrap { max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero.hero-grand .hero-name, .spark { animation: none; }
}

/* ---------- Christmas list: Santa's note + one gift card per wish ---------- */
.wish-wrap { max-width: 980px; margin: 0 auto; text-align: left; }

.wish-note {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 760px;
    margin: 0 auto 2.2rem;
    padding: 1.7rem 1.6rem 1.2rem;
    background: #fffdf5;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(70, 40, 10, 0.13);
    transform: rotate(-0.6deg);
    overflow: hidden;
}

.wish-note::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 11px;
    background: repeating-linear-gradient(45deg, var(--a) 0 12px, #fff 12px 24px, var(--b) 24px 36px, #fff 36px 48px);
}

.wish-avatar {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    background: linear-gradient(135deg, var(--a), var(--b));
    box-shadow: 0 6px 14px rgba(110, 70, 200, 0.35);
}

.wish-note-text { font: 400 1.35rem/1.4 "Patrick Hand", cursive; color: #3a2f23; }
.wish-note-text em { font-weight: 400; }

.wish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 330px));
    justify-content: center;
    gap: 2.2rem 1.4rem;
    padding-top: 0.8rem;
}

.wish-item {
    --wc: var(--a);
    position: relative;
    background: #fff;
    border-radius: 22px;
    border-top: 14px solid var(--wc);
    padding: 1.9rem 1.3rem 1.3rem;
    box-shadow: 0 12px 30px rgba(58, 79, 122, 0.14);
}

.wish-item.c1 { --wc: var(--b); }
.wish-item.c2 { --wc: var(--gold-c); }
.wish-item.c3 { --wc: var(--green-c); }

/* the ribbon running down the gift, and the bow on top */
.wish-item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 24px;
    margin-left: -12px;
    background: var(--wc);
    opacity: 0.1;
    pointer-events: none;
}

.wish-bow {
    position: absolute;
    top: -26px;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--wc);
    z-index: 2;
}

.wish-bow::before,
.wish-bow::after {
    content: "";
    position: absolute;
    top: -7px;
    width: 26px;
    height: 18px;
    background: #fff;
    border: 5px solid var(--wc);
}

.wish-bow::before { left: -31px; border-radius: 60% 40% 10% 60%; transform: rotate(-14deg); }
.wish-bow::after { right: -31px; border-radius: 40% 60% 60% 10%; transform: rotate(14deg); }

.wish-no {
    position: absolute;
    top: 0.6rem;
    right: 1rem;
    font: 600 0.68rem Poppins, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9a7a3a;
}

.wish-body { position: relative; display: flex; align-items: center; gap: 0.9rem; }

.wish-icon {
    flex: none;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 2rem;
    background: #f6efff;
    background: color-mix(in srgb, var(--wc) 14%, #fff);
}

.wish-body p { margin: 0; font: 400 1.55rem/1.2 "Patrick Hand", cursive; color: #2b2118; }

.wish-photo { position: relative; margin: 1.1rem 0 0; transform: rotate(-1.2deg); }
.wish-item:nth-child(even) .wish-photo { transform: rotate(1.4deg); }

.wish-photo img {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border: 7px solid #fff;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.wish-closing {
    text-align: center;
    margin: 2rem 0 0;
    font: italic 600 1.3rem "Cormorant Garamond", serif;
    color: var(--ink-d);
}

@media (max-width: 600px) {
    .wish-note { flex-direction: column; align-items: center; text-align: center; }
    .wish-grid { grid-template-columns: 1fr; }
}

/* ---------- photo carousel ---------- */
.vg { position: relative; max-width: 1100px; margin: 0 auto; }

.vg-track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 26px calc(50% - clamp(120px, 30vw, 280px)) 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.vg-track::-webkit-scrollbar { display: none; }
.vg-track:focus-visible { outline: 3px solid rgba(76, 139, 245, 0.5); outline-offset: -3px; border-radius: 20px; }

.vg-slide {
    flex: 0 0 clamp(240px, 60vw, 560px);
    margin: 0;
    scroll-snap-align: center;
    transform: scale(0.84);
    opacity: 0.55;
    transition: transform 0.35s, opacity 0.35s;
    cursor: pointer;
}

.vg-slide.on { transform: scale(1); opacity: 1; cursor: default; }

.vg-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 8px solid #fff;
    border-radius: 24px;
    overflow: hidden;
    background: #e9ecf5 var(--img) center / cover;
    box-shadow: 0 18px 44px rgba(75, 58, 138, 0.28);
}

/* the picture is shown whole; the blurred copy behind it fills any spare space */
.vg-frame::before {
    content: "";
    position: absolute;
    inset: -20px;
    background: var(--img) center / cover;
    filter: blur(22px) brightness(1.05);
}

.vg-frame img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }

.vg-slide figcaption {
    margin-top: 0.9rem;
    text-align: center;
    font: 400 1.45rem/1.25 "Patrick Hand", cursive;
    color: #3a4f7a;
    min-height: 1.8rem;
}

.vg-arrow {
    position: absolute;
    top: 42%;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ink-d);
    font-size: 1.7rem;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    z-index: 3;
}

.vg-arrow.l { left: max(8px, calc(50% - 600px)); }
.vg-arrow.r { right: max(8px, calc(50% - 600px)); }
.vg-count { text-align: center; font-size: 0.85rem; color: #7a6f90; }
.vg-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vg-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; }
.vg-dots button.on { background: var(--a); transform: scale(1.3); }

@media (max-width: 720px) {
    .vg-arrow { display: none; }
}

/* ---------- Christmas Eve and Christmas Day ---------- */
.hero.is-eve { background:
        radial-gradient(circle at 15% 15%, rgba(255, 230, 150, 0.6), transparent 40%),
        radial-gradient(circle at 90% 85%, rgba(150, 175, 255, 0.7), transparent 45%),
        linear-gradient(135deg, #1f2a6b, var(--ink-d) 55%, #8e4a9c); }
.hero.is-eve .hero-kicker { color: #ffe08a; }
.hero.is-eve h2, .hero.is-eve .hero-line { color: #fff; }
.hero.is-eve .hero-name { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.35)); }
.hero.is-eve .hero-chip { background: rgba(255, 255, 255, 0.92); }
.hero.is-eve .hero-jump span { color: #cfc4f0; }
.hero.is-eve .hero-jump a { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); color: #fff; }

.hero-eve {
    margin-top: 1.1rem;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    color: #3a4f7a;
    max-width: 30rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.hero-eve b { display: block; font: 700 1.6rem "Mountains of Christmas", cursive; color: var(--ink-d); }
.hero-eve span { display: block; font-size: 0.95rem; margin-top: 0.2rem; }

.hero-eve-btn {
    display: inline-block;
    margin-top: 0.7rem;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--a), var(--b));
    color: #fff;
    text-decoration: none;
    font: 600 0.95rem Poppins, sans-serif;
    box-shadow: 0 8px 20px rgba(110, 70, 200, 0.4);
}

.sleigh {
    position: absolute;
    top: 14px;
    left: -140px;
    z-index: 3;
    font-size: 2rem;
    white-space: nowrap;
    pointer-events: none;
    animation: sleigh-fly 16s linear infinite;
}

@keyframes sleigh-fly {
    0% { transform: translate(0, 18px) rotate(4deg); }
    50% { transform: translate(60vw, -4px) rotate(-3deg); }
    100% { transform: translate(120vw, 18px) rotate(4deg); }
}

.hero.hero-grand { position: relative; }

.letter-actions { text-align: center; margin: 1.4rem 0 0; }

.vault-btn {
    display: inline-block;
    padding: 0.75rem 1.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--a), var(--b));
    color: #fff;
    text-decoration: none;
    font: 600 1rem Poppins, sans-serif;
    box-shadow: 0 10px 24px rgba(110, 70, 200, 0.35);
}

@media (prefers-reduced-motion: reduce) { .sleigh { display: none; } }

/* top bar of the child's page */
.parent-bar { gap: 1.2rem; align-items: center; }
.parent-bar a { font-weight: 600; text-decoration: none; }
.parent-bar span { font-weight: 600; color: var(--ink-d); }
.hero.is-eve .hero-chip.nice { background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; }


/* ---------- colour themes ----------
   <body data-theme="girl">  pink and lilac
   <body data-theme="boy">   blue and teal
   no theme                  the original pink and blue mix */
:root,
body {
    --a: #e0457b;
    --b: #4c8bf5;
    --ink-d: #4b3a8a;
    --line: #e6d3ee;
    --soft-a: #e58f8f;
    --gold-c: #e3a82e;
    --green-c: #3fae6b;
    --hero-glow-1: rgba(255, 190, 215, 0.55);
    --hero-glow-2: rgba(170, 205, 255, 0.6);
    --hero-bg-1: #fff6fa;
    --hero-bg-2: #eef5ff;
    --page-1: #f4f1ec;
    --page-2: #e9ecf5;
    --page-3: #fcefe6;
    --eve-1: #ff9f9f;
    --eve-2: #ffd8b8;
}

body[data-theme="girl"] {
    --a: #e0457b;
    --b: #b27be8;
    --ink-d: #7a2a66;
    --line: #efd3e6;
    --soft-a: #f0a3c0;
    --gold-c: #f0a73a;
    --green-c: #c870d8;
    --hero-glow-1: rgba(255, 176, 208, 0.7);
    --hero-glow-2: rgba(214, 186, 255, 0.65);
    --hero-bg-1: #fff4f9;
    --hero-bg-2: #f6efff;
    --page-1: #fdf3f7;
    --page-2: #f6eefb;
    --page-3: #fde8ee;
    --eve-1: #ff9fc2;
    --eve-2: #e2c6ff;
}

body[data-theme="boy"] {
    --a: #2f6fe0;
    --b: #1fae9a;
    --ink-d: #1f4a94;
    --line: #cfe0f5;
    --soft-a: #8fb3e5;
    --gold-c: #e3a82e;
    --green-c: #1fae9a;
    --hero-glow-1: rgba(150, 196, 255, 0.7);
    --hero-glow-2: rgba(140, 226, 205, 0.6);
    --hero-bg-1: #f0f6ff;
    --hero-bg-2: #e9faf5;
    --page-1: #f1f5fa;
    --page-2: #e7f0fb;
    --page-3: #e3f4f0;
    --eve-1: #8fc3ff;
    --eve-2: #bdf0df;
}

body[data-theme="boy"] .hero.is-eve {
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 230, 150, 0.55), transparent 40%),
        radial-gradient(circle at 90% 85%, rgba(120, 220, 200, 0.5), transparent 45%),
        linear-gradient(135deg, #0e2a5c, #1f4a94 55%, #1f7f8a);
}

.sample-note { font-size: 0.85rem; color: #7a6f90; font-style: italic; }
.sample-bar { flex-wrap: wrap; }

.page-foot .legal-links {
    font-family: "Poppins", sans-serif;
    font-size: 0.85rem;
    margin-top: 0.8rem;
    opacity: 0.8;
}

.page-foot .legal-links a { color: inherit; }

/* 20 Oct: elf films fill their card (no black side bars), bigger Santa in the hero, clear sample banner */
.elf-video {
    max-height: none;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #e7e4f4;
}

@media (min-width: 721px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hero.hero-grand .hero-santa-wrap { max-width: 500px; }
}
@media (max-width: 720px) {
    .hero.hero-grand .hero-santa-wrap { max-width: 340px; }
}

.sample-bar {
    justify-content: center;
    text-align: center;
    gap: 0.4rem 1.4rem;
    padding: 0.9rem 1.2rem;
    background: linear-gradient(135deg, var(--a), var(--b));
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.sample-bar span { color: #fff; font-size: 1.1rem; }
.sample-bar a {
    color: var(--ink-d);
    background: #fff;
    padding: 0.3rem 0.95rem;
    border-radius: 999px;
    font-size: 0.9rem;
}