/* ===========================================================================
   Love Page
   ---------------------------------------------------------------------------
   One component set, four looks. Each occasion supplies four HSL triples
   (--lp-primary, --lp-accent, --lp-bg, --lp-deep) as inline custom properties
   on .lp-scope; everything below derives from them.

   Stored as bare triples ("348 92% 54%") rather than finished colours so tints
   can be mixed with hsl(var(--lp-primary) / .12) without a second variable for
   every opacity step.

   Every animation is disabled under prefers-reduced-motion at the end of this
   file. Nothing here is load-bearing for comprehension — motion is decoration.
   =========================================================================== */

.lp-scope {
    --lp-primary-c: hsl(var(--lp-primary));
    --lp-accent-c:  hsl(var(--lp-accent));
    --lp-bg-c:      hsl(var(--lp-bg));
    --lp-deep-c:    hsl(var(--lp-deep));
    --lp-radius: 1.25rem;
    --lp-shadow: 0 18px 50px -18px hsl(var(--lp-deep) / .35);
    --lp-shadow-sm: 0 6px 22px -8px hsl(var(--lp-deep) / .22);
    --lp-grad: linear-gradient(135deg, hsl(var(--lp-primary)) 0%, hsl(var(--lp-accent)) 100%);

    background: var(--lp-bg-c);
    color: var(--lp-deep-c);
    font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The script face is decorative. Anywhere it is used, the same text must remain
   readable if the webfont fails, so the fallback is a normal serif. */
.lp-script {
    font-family: "Great Vibes", "Segoe Script", cursive, serif;
    font-weight: 400;
    line-height: 1.15;
}

/* ------------------------------------------------------------------- vault */

.lp-vault {
    min-height: 100vh;
    min-height: 100dvh;              /* avoids the mobile URL-bar jump */
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: radial-gradient(circle at 50% 10%,
                hsl(var(--lp-primary) / .22) 0%,
                hsl(var(--lp-bg)) 62%);
}

.lp-vault-card {
    width: min(94vw, 24rem);
    background: #fff;
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
    padding: 2rem 1.5rem;
    text-align: center;
}

.lp-vault-icon {
    width: 4rem; height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--lp-grad);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.75rem;
}

.lp-vault-title { font-size: 2.5rem; color: var(--lp-primary-c); margin-bottom: .25rem; }
.lp-vault-sub   { color: hsl(var(--lp-deep) / .65); font-size: .95rem; margin-bottom: 1.5rem; }

/* PIN display: fixed-width dots so the row does not reflow as digits land. */
.lp-pin-display {
    display: flex; justify-content: center; gap: .5rem;
    margin-bottom: 1.5rem; min-height: 1.5rem;
}
.lp-pin-dot {
    width: .85rem; height: .85rem; border-radius: 50%;
    background: hsl(var(--lp-primary) / .18);
    transition: background .15s ease, transform .15s ease;
}
.lp-pin-dot.is-filled { background: var(--lp-primary-c); transform: scale(1.15); }

.lp-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-bottom: 1.25rem;
}
.lp-key {
    padding: .9rem 0;
    font-size: 1.35rem;
    font-weight: 700;
    border-radius: .9rem;
    border: 1px solid hsl(var(--lp-primary) / .18);
    background: #fff;
    color: var(--lp-deep-c);
    cursor: pointer;
    transition: transform .1s ease, background .15s ease;
}
.lp-key:hover  { background: hsl(var(--lp-primary) / .08); }
.lp-key:active { transform: scale(.94); }

.lp-vault-error {
    color: hsl(0 70% 45%);
    font-size: .9rem;
    margin-bottom: .75rem;
    min-height: 1.2rem;
}

/* -------------------------------------------------------------- typography */

.lp-hero {
    min-height: 92vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 3rem 1.25rem;
    background: radial-gradient(circle at 50% 0%,
                hsl(var(--lp-primary) / .18) 0%,
                hsl(var(--lp-bg)) 65%);
}

.lp-hero-name {
    font-size: clamp(3.5rem, 14vw, 8rem);
    color: var(--lp-primary-c);
    margin-bottom: .5rem;
}

.lp-hero-from {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .8rem;
    color: hsl(var(--lp-deep) / .6);
}

.lp-section { padding: 4rem 1.25rem; }
.lp-section:nth-of-type(even) { background: hsl(var(--lp-primary) / .04); }

.lp-section-title {
    font-size: clamp(1.9rem, 5vw, 2.75rem);
    color: var(--lp-primary-c);
    text-align: center;
    margin-bottom: 2.25rem;
}

.lp-inner { max-width: 46rem; margin: 0 auto; }

.lp-letter {
    background: #fff;
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-sm);
    padding: 2rem 1.75rem;
    font-size: 1.08rem;
    line-height: 1.85;
    white-space: pre-wrap;          /* keep the sender's line breaks */
}

/* ---------------------------------------------------------------- timeline */

.lp-timeline { position: relative; padding-left: 2.5rem; }
.lp-timeline::before {
    content: "";
    position: absolute; left: .75rem; top: .5rem; bottom: .5rem;
    width: 2px;
    background: linear-gradient(180deg,
                hsl(var(--lp-primary) / .5), hsl(var(--lp-accent) / .5));
}

.lp-milestone { position: relative; margin-bottom: 2rem; }
.lp-milestone::before {
    content: attr(data-icon);
    position: absolute; left: -2.5rem; top: 0;
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid hsl(var(--lp-primary) / .45);
    display: grid; place-items: center;
    font-size: .85rem;
}
.lp-milestone h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: .15rem; }
.lp-milestone time { font-size: .8rem; color: hsl(var(--lp-deep) / .55); display: block; margin-bottom: .4rem; }
.lp-milestone p { margin: 0; line-height: 1.7; color: hsl(var(--lp-deep) / .85); }

/* ----------------------------------------------------------------- gallery */

.lp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}
.lp-gallery figure {
    margin: 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--lp-shadow-sm);
    background: #fff;
}
.lp-gallery img { width: 100%; height: 170px; object-fit: cover; display: block; }
.lp-gallery figcaption { padding: .5rem .65rem; font-size: .82rem; color: hsl(var(--lp-deep) / .7); }
.lp-gallery-open { position: relative; width: 100%; padding: 0; overflow: hidden; display: block; border: 0; color: #fff; background: none; cursor: zoom-in; }
.lp-gallery-open span { position: absolute; right: .65rem; bottom: .65rem; padding: .35rem .55rem; opacity: 0; color: #fff; background: rgba(20,14,17,.72); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: translateY(.5rem); transition: opacity .22s ease, transform .22s ease; }
.lp-gallery-open:hover span,
.lp-gallery-open:focus-visible span { opacity: 1; transform: none; }
.lp-gallery-open:focus-visible { outline: 3px solid var(--lp-accent-c); outline-offset: -3px; }

/* ----------------------------------------------------------------- reasons */

.lp-reasons { display: grid; gap: .75rem; }
.lp-reason {
    background: #fff;
    border-radius: 1rem;
    border-left: 4px solid var(--lp-accent-c);
    box-shadow: var(--lp-shadow-sm);
    padding: 1rem 1.25rem;
}
.lp-reason strong { display: block; margin-bottom: .2rem; }

/* -------------------------------------------------------------- open when */

/* A sealed letter is the primary action. Opening it reveals the note; moving
   to another card is deliberately a separate action. */
.lp-deck {
    position: relative;
    height: 30rem;
    max-width: 26rem;
    margin: 0 auto;
    touch-action: pan-y;             /* let vertical scroll through, keep swipe */
}
.lp-deck-card {
    position: absolute; inset: 0;
    overflow: hidden;
    background:
        linear-gradient(hsl(var(--lp-primary) / .035) 1px, transparent 1px) 0 0 / 100% 1.7rem,
        #fffdfa;
    border-radius: var(--lp-radius);
    border: 1px solid hsl(var(--lp-primary) / .13);
    box-shadow: var(--lp-shadow);
    padding: 1.25rem;
    text-align: center;
    cursor: grab;
    transition: transform .38s cubic-bezier(.2,.78,.3,1), opacity .3s ease;
    will-change: transform;
}
.lp-deck-card:active { cursor: grabbing; }
.lp-envelope-trigger { width: 100%; height: 100%; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; color: var(--lp-deep-c); background: transparent; font: inherit; cursor: pointer; transition: transform .55s cubic-bezier(.22,.8,.3,1); }
.lp-envelope-trigger:focus-visible { outline: 3px solid hsl(var(--lp-primary) / .38); outline-offset: -3px; }
.lp-envelope-trigger small { margin-top: 1.4rem; color: hsl(var(--lp-deep) / .52); font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.lp-envelope-trigger h3 { max-width: 19rem; margin: .45rem 0 .7rem; color: var(--lp-primary-c); font: 400 clamp(1.55rem, 5vw, 2.05rem)/1.06 "DM Serif Display", serif; }
.lp-envelope-trigger em { color: hsl(var(--lp-deep) / .5); font-size: .72rem; font-style: normal; font-weight: 700; }
.lp-letter-object { position: relative; width: 10.5rem; height: 7rem; display: grid; place-items: center; background: linear-gradient(145deg, hsl(var(--lp-primary) / .82), hsl(var(--lp-primary))); box-shadow: 0 18px 35px -18px hsl(var(--lp-deep) / .65); perspective: 700px; }
.lp-letter-object::before,
.lp-letter-object::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.lp-letter-object::before { z-index: 2; background: hsl(var(--lp-primary)); clip-path: polygon(0 100%, 0 0, 50% 52%, 100% 0, 100% 100%); filter: brightness(.98); }
.lp-letter-object::after { z-index: 3; background: hsl(var(--lp-primary) / .45); clip-path: polygon(0 100%, 50% 48%, 100% 100%); }
.lp-letter-flap { position: absolute; z-index: 4; inset: 0 0 49%; background: hsl(var(--lp-accent)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transform: rotateX(0deg); transition: transform .65s cubic-bezier(.24,.82,.24,1); }
.lp-letter-object b { position: relative; z-index: 5; width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border: 4px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; background: var(--lp-primary-c); box-shadow: 0 5px 12px rgba(0,0,0,.18); font-size: 1.35rem; transform: translateY(.8rem); transition: transform .48s ease, opacity .35s ease; }
.lp-deck-card.is-open .lp-letter-flap { transform: rotateX(178deg); }
.lp-deck-card.is-open .lp-letter-object b { opacity: 0; transform: translateY(1.5rem) scale(.72); }
.lp-deck-card.is-open .lp-envelope-trigger { transform: translateY(-7.5rem) scale(.68); }
.lp-deck-message { position: absolute; inset: 10.8rem 1.3rem 1.3rem; overflow: auto; padding: 1.45rem 1.3rem 1.1rem; display: grid; align-content: space-between; gap: 1rem; color: var(--lp-deep-c); background: rgba(255,255,255,.91); border: 1px solid hsl(var(--lp-primary) / .15); box-shadow: 0 -10px 35px -28px hsl(var(--lp-deep) / .55); text-align: left; animation: lp-letter-reveal .55s .18s cubic-bezier(.2,.8,.24,1) both; }
.lp-deck-message[hidden] { display: none; }
.lp-deck-message p { margin: 0; color: hsl(var(--lp-deep) / .84); font: 600 1.15rem/1.65 Caveat, cursive; }
.lp-deck-next { justify-self: end; padding: .55rem 0; border: 0; border-bottom: 1px solid currentColor; color: var(--lp-primary-c); background: none; font: 800 .69rem/1 Manrope, sans-serif; letter-spacing: .04em; cursor: pointer; }

.lp-deck-empty {
    display: grid; place-items: center;
    height: 100%;
    color: hsl(var(--lp-deep) / .55);
}

.lp-deck-hint { text-align: center; font-size: .85rem; color: hsl(var(--lp-deep) / .55); margin-top: 1rem; }

/* ------------------------------------------------------------- photo booth */

.lp-booth { max-width: 30rem; margin: 0 auto; text-align: center; }
.lp-booth-stage {
    position: relative;
    border-radius: var(--lp-radius);
    overflow: hidden;
    background: hsl(var(--lp-deep) / .08);
    aspect-ratio: 3 / 4;
    display: grid;
    place-items: center;
}
.lp-booth-stage video,
.lp-booth-stage canvas,
.lp-booth-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Frame overlays are drawn in CSS for the preview and re-drawn on the canvas
   at capture time, so what you see is what gets saved. */
.lp-booth-frame {
    position: absolute; inset: 0;
    pointer-events: none;
    border: .75rem solid transparent;
    border-radius: var(--lp-radius);
}
.lp-frame-classic { border-color: #fff; box-shadow: inset 0 0 0 2px hsl(var(--lp-primary) / .5); }
.lp-frame-hearts  { border-color: hsl(var(--lp-primary) / .85); }
.lp-frame-gold    { border-color: hsl(var(--lp-accent) / .9); }

.lp-booth-controls { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }

/* --------------------------------------------------------------- countdown */

.lp-countdown { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.lp-count-cell {
    background: #fff;
    border-radius: 1rem;
    box-shadow: var(--lp-shadow-sm);
    padding: 1rem 1.1rem;
    min-width: 4.5rem;
    text-align: center;
}
.lp-count-num { font-size: 2rem; font-weight: 800; color: var(--lp-primary-c); line-height: 1; }
.lp-count-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--lp-deep) / .6); }
.lp-countdown-status { min-height: 1.4rem; margin: 1rem 0 0; color: var(--lp-primary-c); font: 700 1rem/1.4 Caveat, cursive; text-align: center; }
.lp-countdown.is-complete .lp-count-cell { border-color: hsl(var(--lp-accent) / .6); animation: lp-count-complete 1.8s ease-in-out infinite; }

/* ---------------------------------------------------------------- question */

.lp-question-box { text-align: center; }
.lp-question-text { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; margin-bottom: 1.5rem; }
.lp-answer-row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.lp-dodge { transition: transform .22s ease; }

.lp-reactions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.lp-reaction {
    font-size: 1.6rem; line-height: 1;
    padding: .6rem .75rem;
    border-radius: .8rem;
    border: 2px solid hsl(var(--lp-primary) / .18);
    background: #fff; cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
}
.lp-reaction:hover { transform: scale(1.12); }
.lp-reaction.is-selected { border-color: var(--lp-primary-c); background: hsl(var(--lp-primary) / .1); }

/* ---------------------------------------------------------------- controls */

.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.9rem;
    border: none; border-radius: 999px;
    font-weight: 700; font-size: 1rem; font-family: inherit;
    text-decoration: none; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.lp-btn-primary { background: var(--lp-grad); color: #fff; box-shadow: var(--lp-shadow-sm); }
.lp-btn-primary:hover { transform: translateY(-2px); color: #fff; }
.lp-btn-ghost { background: #fff; color: var(--lp-primary-c); border: 2px solid hsl(var(--lp-primary) / .35); }
.lp-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.lp-card {
    background: #fff;
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-sm);
    border: 1px solid hsl(var(--lp-primary) / .1);
    padding: 1.5rem;
}

.lp-input, .lp-textarea, .lp-select {
    width: 100%;
    padding: .8rem 1rem;
    border-radius: .75rem;
    border: 2px solid hsl(var(--lp-primary) / .18);
    background: hsl(var(--lp-primary) / .04);
    color: var(--lp-deep-c);
    font: inherit;
}
.lp-input:focus, .lp-textarea:focus, .lp-select:focus {
    outline: none; background: #fff;
    border-color: var(--lp-primary-c);
    box-shadow: 0 0 0 4px hsl(var(--lp-primary) / .12);
}
.lp-textarea { min-height: 8rem; resize: vertical; line-height: 1.7; }
.lp-label { display: block; font-weight: 700; margin-bottom: .35rem; }
.lp-hint  { font-size: .84rem; color: hsl(var(--lp-deep) / .6); margin-top: .3rem; }

.lp-muted { color: hsl(var(--lp-deep) / .62); }

/* The vault and the recipient page render standalone, without Bootstrap, so
   they cannot rely on its utility for visually-hidden labels. Defined here so
   screen-reader-only labels work on those pages too. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lp-linkbox { display: flex; gap: .5rem; flex-wrap: wrap; }
.lp-linkbox input {
    flex: 1 1 14rem; min-width: 0;
    padding: .8rem 1rem;
    border-radius: .75rem;
    border: 2px dashed hsl(var(--lp-primary) / .35);
    background: hsl(var(--lp-primary) / .05);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .92rem;
    color: var(--lp-deep-c);
}

.lp-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.05rem; border-radius: 999px;
    background: hsl(var(--lp-primary) / .1);
    color: var(--lp-primary-c);
    font-weight: 600; text-decoration: none; font-size: .9rem;
}
.lp-chip:hover { background: hsl(var(--lp-primary) / .18); color: var(--lp-deep-c); }

/* ------------------------------------------------------------- animations */

@keyframes lp-rise      { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lp-scale-in  { from { opacity: 0; transform: scale(.9); }        to { opacity: 1; transform: none; } }
@keyframes lp-shake     { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); }
                          30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); } }
@keyframes lp-float     { 0% { opacity: 0; transform: translateY(0) rotate(0); } 12% { opacity: 1; }
                          100% { opacity: 0; transform: translateY(-88vh) rotate(300deg); } }
@keyframes lp-pulse     { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes lp-shimmer   { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes lp-swipe-out-left  { to { transform: translateX(-140%) rotate(-18deg); opacity: 0; } }
@keyframes lp-swipe-out-right { to { transform: translateX(140%)  rotate(18deg);  opacity: 0; } }
@keyframes lp-unlock    { 0% { transform: scale(1); } 40% { transform: scale(1.12) rotate(-6deg); } 100% { transform: scale(0); opacity: 0; } }
@keyframes lp-letter-reveal { from { opacity: 0; transform: translateY(1.4rem) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lp-count-complete { 0%,100% { transform: translateY(0); box-shadow: var(--lp-shadow-sm); } 50% { transform: translateY(-4px); box-shadow: 0 16px 34px -18px hsl(var(--lp-accent) / .72); } }
@keyframes lp-photo-breathe { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes lp-photo-enter { from { opacity: 0; transform: translateY(26px) rotate(-2.5deg); } to { opacity: 1; transform: rotate(-2.5deg); } }

.lp-anim-rise    { animation: lp-rise .7s ease both; }
.lp-anim-scale   { animation: lp-scale-in .5s cubic-bezier(.3,1.3,.5,1) both; }
.lp-anim-shake   { animation: lp-shake .5s both; }
.lp-anim-pulse   { animation: lp-pulse 2.2s ease-in-out infinite; }
.lp-anim-unlock  { animation: lp-unlock .6s ease forwards; }
.lp-swipe-left   { animation: lp-swipe-out-left .35s ease forwards; }
.lp-swipe-right  { animation: lp-swipe-out-right .35s ease forwards; }

/* Reveal-on-scroll: elements start hidden and are un-hidden by IntersectionObserver.
   If JS never runs, .lp-reveal is never added, so nothing stays invisible. */
.lp-observe { opacity: 0; transform: translateY(26px); }
.lp-observe.lp-reveal { animation: lp-rise .7s var(--lp-reveal-delay, 0ms) ease both; opacity: 1; transform: none; }

.lp-particles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.lp-particle  { position: absolute; bottom: -2rem; font-size: 1.4rem; animation: lp-float linear forwards; }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .lp-anim-rise, .lp-anim-scale, .lp-anim-shake, .lp-anim-pulse,
    .lp-anim-unlock, .lp-swipe-left, .lp-swipe-right,
    .lp-deck-message, .lp-countdown.is-complete .lp-count-cell,
    .lp-observe.lp-reveal, .lp-particle {
        animation: none !important;
    }
    /* Content must still be visible — only the motion is removed. */
    .lp-observe { opacity: 1; transform: none; }
    .lp-particles { display: none; }
    .lp-dodge, .lp-deck-card, .lp-btn, .lp-reaction { transition: none; }
    .lp-btn-primary:hover { transform: none; }
}

/* ===========================================================================
   LOVE PAGE — IMMERSIVE RECIPIENT EXPERIENCE
   ---------------------------------------------------------------------------
   The page is intentionally staged as a sequence of physical romantic objects
   instead of one repeating card component. These late rules supersede the
   earlier recipient prototype while leaving the hub, builder, and manager
   component system intact.
   =========================================================================== */

/* Builder: soundtrack choice is stored alongside the visual theme. */
.lp-soundscape-fieldset { margin: 1rem 0 1.35rem; padding: 0; border: 0; }
.lp-soundscape-fieldset legend { margin: 0 0 .25rem; font: 700 .76rem/1.2 Manrope, sans-serif; }
.lp-soundscape-fieldset > p { margin: 0 0 .8rem; color: hsl(var(--lp-deep) / .58); font-size: .72rem; line-height: 1.5; }
.lp-soundscape-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.lp-soundscape-option { position: relative; min-height: 86px; padding: .8rem .8rem .8rem 3.25rem; display: grid; align-content: center; background: #fff; border: 1px solid var(--lp-line); cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.lp-soundscape-option input { position: absolute; opacity: 0; pointer-events: none; }
.lp-soundscape-option > span { position: absolute; left: .8rem; top: 50%; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; color: var(--lp-primary-c); background: hsl(var(--lp-primary) / .09); border-radius: 50%; transform: translateY(-50%); }
.lp-soundscape-option strong { font: 700 .78rem/1.2 Manrope, sans-serif; }
.lp-soundscape-option small { margin-top: .2rem; color: hsl(var(--lp-deep) / .57); font-size: .64rem; line-height: 1.4; }
.lp-soundscape-option:has(input:checked) { border-color: var(--lp-primary-c); box-shadow: inset 0 0 0 1px var(--lp-primary-c), 0 9px 24px -18px hsl(var(--lp-deep) / .5); transform: translateY(-1px); }
.lp-soundscape-option:has(input:focus-visible) { outline: 3px solid hsl(var(--lp-primary) / .2); outline-offset: 2px; }

/* Shared staging --------------------------------------------------------- */
.lp-recipient-page { --lp-scene-width: 980px; overflow-x: clip; font-family: Manrope, sans-serif; }
.lp-recipient-page .lp-section { isolation: isolate; min-height: 34rem; padding: clamp(5.5rem, 10vw, 9.5rem) clamp(1.15rem, 4vw, 3rem); display: grid; align-items: center; }
.lp-recipient-page .lp-inner { width: min(100%, var(--lp-scene-width)); max-width: none; }
.lp-recipient-page .lp-section-title { margin: .35rem 0 .65rem; color: inherit; font: 400 clamp(3rem, 7vw, 6rem)/.9 "DM Serif Display", serif; letter-spacing: -.035em; }
.lp-scene-heading { max-width: 720px; margin: 0 auto clamp(2.5rem, 6vw, 5rem); text-align: center; }
.lp-scene-heading > span { display: block; color: var(--lp-primary-c); font-size: .62rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.lp-scene-heading > p { max-width: 530px; margin: 0 auto; color: currentColor; opacity: .61; font: 500 clamp(.88rem, 1.7vw, 1rem)/1.7 Manrope, sans-serif; }
.lp-recipient-page .text-center { text-align: center; }
.lp-recipient-page .lp-muted { color: currentColor; opacity: .66; }

/* Full-bleed opening ----------------------------------------------------- */
.lp-recipient-page .lp-hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; padding: clamp(4.5rem, 10vh, 7rem) 1.25rem clamp(6rem, 12vh, 8rem); display: grid; grid-template-columns: 1fr; place-items: center; overflow: hidden; color: #fff; text-align: center; background: #310712; }
.lp-recipient-page .lp-hero .lp-hero-photo,
.lp-recipient-page .lp-hero .lp-hero-photo.lp-anim-rise { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: #25050d; box-shadow: none; transform: none; animation: lp-hero-cinema 18s ease-in-out infinite alternate; }
.lp-recipient-page .lp-hero .lp-hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) contrast(1.06); }
.lp-recipient-page .lp-hero .lp-hero-photo figcaption { position: absolute; right: 1.2rem; bottom: 1.1rem; max-width: 38ch; color: rgba(255,255,255,.64); font: 600 .65rem/1.4 Caveat, cursive; text-align: right; }
.lp-recipient-page .lp-hero-placeholder { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; transform: none; box-shadow: none; background: radial-gradient(circle at 50% 28%, hsl(var(--lp-primary) / .72), transparent 27rem), hsl(var(--lp-deep)); }
.lp-recipient-page .lp-hero-placeholder span { font-size: clamp(5rem, 16vw, 12rem); opacity: .22; }
.lp-recipient-page .lp-hero-placeholder i,
.lp-recipient-page .lp-hero-placeholder b { display: none; }
.lp-hero-wash { position: absolute; z-index: -3; inset: 0; background: linear-gradient(180deg, rgba(20,3,9,.42), rgba(38,4,15,.7) 58%, rgba(20,2,8,.9)); }
.lp-recipient-page .lp-hero-grain { z-index: -1; opacity: .24; }
.lp-recipient-page .lp-hero-copy { z-index: 2; width: min(94vw, 850px); max-width: none; padding: clamp(2rem, 5vw, 4.2rem); color: #fff; text-align: center; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(145deg, rgba(45,4,17,.48), rgba(27,3,10,.22)); box-shadow: 0 35px 100px rgba(13,0,4,.32); backdrop-filter: blur(10px) saturate(1.1); }
.lp-hero-motif { width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-size: 1.2rem; animation: lp-motif-pulse 3.5s ease-in-out infinite; }
.lp-recipient-page .lp-hero-overline { margin: 0 0 1rem; color: rgba(255,255,255,.72); font-size: .62rem; letter-spacing: .24em; }
.lp-recipient-page .lp-hero-name { margin: 0; color: #fff; font: italic 400 clamp(4.5rem, 14vw, 10rem)/.76 "DM Serif Display", serif; letter-spacing: -.055em; text-shadow: 0 16px 55px rgba(0,0,0,.42); overflow-wrap: anywhere; }
.lp-hero-quote { max-width: 560px; margin: 1.4rem auto .2rem; color: rgba(255,255,255,.8); font: 400 clamp(1rem, 2vw, 1.2rem)/1.65 "DM Serif Display", serif; }
.lp-recipient-page .lp-hero-signature { margin: .8rem 0 1.7rem; color: hsl(var(--lp-accent)); font: 600 clamp(1.1rem, 2.4vw, 1.5rem)/1 Caveat, cursive; }
.lp-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .65rem; }
.lp-hero-primary,
.lp-hero-secondary { min-height: 46px; padding: .8rem 1.25rem; border: 1px solid rgba(255,255,255,.56); color: #fff; background: rgba(255,255,255,.08); font: 700 .7rem/1 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform .22s ease, background .22s ease, color .22s ease; }
.lp-hero-primary { color: hsl(var(--lp-deep)); background: #fff; }
.lp-hero-primary:hover,
.lp-hero-secondary:hover { color: hsl(var(--lp-deep)); background: hsl(var(--lp-accent)); transform: translateY(-2px); }
.lp-together { margin: 1.8rem auto 0; display: grid; gap: .22rem; color: rgba(255,255,255,.83); }
.lp-together small { font-size: .56rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.lp-together span { font: 600 clamp(.72rem, 1.6vw, .9rem)/1.4 Manrope, sans-serif; }
.lp-together span b { color: hsl(var(--lp-accent)); font: 400 1.3em/1 "DM Serif Display", serif; }
.lp-together i { margin: 0 .3rem; font-style: normal; opacity: .4; }
.lp-recipient-page .lp-hero-scroll { position: absolute; z-index: 3; left: 50%; bottom: 1.2rem; display: grid; gap: .35rem; color: rgba(255,255,255,.72); border: 0; font-size: .55rem; letter-spacing: .17em; text-align: center; transform: translateX(-50%); }
.lp-recipient-page .lp-hero-scroll b { font-size: 1rem; animation: lp-scroll-cue 1.8s ease-in-out infinite; }
.lp-love-burst { position: fixed; z-index: 80; bottom: 8vh; font-style: normal; font-size: clamp(1.2rem, 3vw, 2rem); pointer-events: none; animation: lp-love-burst 1.7s cubic-bezier(.16,.75,.25,1) forwards; }

/* Main letter ritual ---------------------------------------------------- */
.lp-letter-scene { color: #4b1b25; background: radial-gradient(circle at 50% 30%, #fff 0, #fff8f3 48%, #f7e6e3 100%) !important; }
.lp-main-letter-wrap { position: relative; min-height: 30rem; display: grid; place-items: center; perspective: 1200px; }
.lp-main-envelope { width: min(92vw, 530px); padding: 1.5rem; display: grid; justify-items: center; border: 0; color: #612033; background: transparent; font-family: Manrope, sans-serif; cursor: pointer; }
.lp-main-envelope-paper { position: relative; width: min(82vw, 430px); aspect-ratio: 1.58; display: block; overflow: visible; background: linear-gradient(145deg, #f9d5d9, #d990a0); box-shadow: 0 35px 65px -28px rgba(82,20,36,.62); transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.lp-main-envelope-paper::before,
.lp-main-envelope-paper::after { content: ""; position: absolute; inset: 0; }
.lp-main-envelope-paper::before { z-index: 3; background: linear-gradient(145deg, #eeb7c1, #d88999); clip-path: polygon(0 0, 52% 53%, 100% 0, 100% 100%, 0 100%); }
.lp-main-envelope-paper::after { z-index: 4; background: rgba(255,255,255,.14); clip-path: polygon(0 100%, 50% 49%, 100% 100%); }
.lp-main-envelope-paper i { position: absolute; z-index: 5; inset: 0 0 48%; display: block; background: linear-gradient(180deg, #f7cbd2, #dfa0ad); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .72s cubic-bezier(.2,.75,.2,1); }
.lp-main-envelope-paper b { position: absolute; z-index: 6; left: 50%; top: 50%; width: 4.3rem; height: 4.3rem; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #cf526f, #8f1736 72%); border: .28rem double rgba(255,255,255,.5); border-radius: 50%; box-shadow: 0 8px 17px rgba(81,13,30,.34); transform: translate(-50%,-25%); transition: opacity .3s ease, transform .45s ease; }
.lp-main-envelope > strong { margin-top: 1.45rem; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1 "DM Serif Display", serif; }
.lp-main-envelope > small { margin-top: .35rem; color: rgba(75,27,37,.58); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lp-main-envelope:hover .lp-main-envelope-paper { transform: translateY(-6px) rotate(-1deg); }
.lp-main-envelope:focus-visible { outline: 3px solid hsl(var(--lp-primary) / .28); outline-offset: 5px; }
.lp-main-letter-wrap.is-opening .lp-main-envelope-paper i { transform: rotateX(178deg); }
.lp-main-letter-wrap.is-opening .lp-main-envelope-paper b { opacity: 0; transform: translate(-50%,30%) scale(.6) rotate(20deg); }
.lp-main-letter-wrap.is-opening .lp-main-envelope-paper { transform: translateY(2.5rem) scale(.94); }
.lp-main-letter[hidden] { display: none; }
.lp-main-letter { width: min(100%, 780px); animation: lp-main-letter-rise .8s cubic-bezier(.18,.78,.23,1) both; }
.lp-recipient-page .lp-main-letter .lp-letter { min-height: 26rem; padding: clamp(3.8rem, 7vw, 6rem) clamp(1.6rem, 6vw, 5.2rem); color: #4d2b2d; background: linear-gradient(90deg, transparent 3rem, rgba(190,93,111,.16) 3rem, rgba(190,93,111,.16) calc(3rem + 1px), transparent calc(3rem + 1px)), repeating-linear-gradient(#fffdf7 0, #fffdf7 1.78rem, #e8ddd4 1.84rem); border: 1px solid #e3d1c7; box-shadow: 0 45px 90px -48px rgba(61,19,28,.6); font: 600 clamp(1.08rem, 2.2vw, 1.34rem)/1.84 Caveat, cursive; }
.lp-main-letter .lp-letter::before { content: "A LETTER FROM THE HEART"; left: clamp(1.6rem, 6vw, 5.2rem); top: 2rem; }
.lp-letter-signoff { margin-top: 2.2rem; display: block; color: var(--lp-primary-c); font-size: 1.14em; }

/* Timeline, gallery, reasons ------------------------------------------- */
.lp-story-scene { color: #392b2d; background: #fffdfa !important; }
.lp-recipient-page .lp-timeline { position: relative; padding: 0; display: grid; gap: 3rem; }
.lp-recipient-page .lp-timeline::before { left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, hsl(var(--lp-primary) / .42) 8%, hsl(var(--lp-primary) / .42) 92%, transparent); }
.lp-recipient-page .lp-milestone { width: calc(50% - 2.4rem); margin: 0; padding: clamp(1.4rem, 3vw, 2rem); background: #fff; border: 1px solid rgba(89,39,49,.13); box-shadow: 0 22px 55px -44px rgba(70,27,36,.7); }
.lp-recipient-page .lp-milestone:nth-child(even) { margin-left: calc(50% + 2.4rem); }
.lp-recipient-page .lp-milestone::before { left: auto; right: -3.55rem; top: 1.2rem; width: 2.25rem; height: 2.25rem; color: var(--lp-primary-c); border-color: hsl(var(--lp-primary) / .34); box-shadow: 0 0 0 .6rem #fffdfa; }
.lp-recipient-page .lp-milestone:nth-child(even)::before { right: auto; left: -3.55rem; }
.lp-recipient-page .lp-milestone h3 { margin: 0 0 .3rem; font: 400 1.55rem/1.1 "DM Serif Display", serif; }
.lp-recipient-page .lp-milestone time { color: var(--lp-primary-c); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lp-recipient-page .lp-milestone p { color: currentColor; opacity: .73; font-size: .86rem; line-height: 1.75; }

.lp-gallery-scene { overflow: hidden; color: #4b2229; background: #f7e5e8 !important; }
.lp-recipient-page .lp-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
.lp-recipient-page .lp-gallery figure { position: relative; grid-column: auto; margin: 0; padding: .55rem .55rem 2.3rem; overflow: visible; background: #fffdf9; border-radius: 0; box-shadow: 0 25px 45px -32px rgba(57,18,28,.62); transform: rotate(-2deg); }
.lp-recipient-page .lp-gallery figure:nth-child(3n+2) { transform: rotate(2.1deg) translateY(1.2rem); }
.lp-recipient-page .lp-gallery figure:nth-child(3n) { transform: rotate(-.6deg); }
.lp-recipient-page .lp-gallery figure::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -.65rem; width: 4.8rem; height: 1.35rem; background: rgba(243,202,168,.78); box-shadow: 0 1px 2px rgba(72,35,21,.11); transform: translateX(-50%) rotate(-2deg); }
.lp-recipient-page .lp-gallery img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.lp-recipient-page .lp-gallery figcaption { position: absolute; left: .7rem; right: .7rem; bottom: .5rem; padding: 0; color: #51393b; font: 600 .86rem/1.2 Caveat, cursive; text-align: center; }

.lp-reasons-scene { color: #fff5f5; background: radial-gradient(circle at 50% 0, #7d1a37, #390712 65%, #230309) !important; }
.lp-reasons-scene .lp-scene-heading > span { color: #f4b6c6; }
.lp-reason-stage { min-height: 24rem; display: grid; place-items: center; align-content: center; text-align: center; }
.lp-reason-button { width: min(86vw, 300px); aspect-ratio: 1; padding: 2rem; display: grid; place-items: center; align-content: center; gap: .65rem; color: #fff; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 0 0 1rem rgba(255,255,255,.025), 0 40px 80px rgba(0,0,0,.25); cursor: pointer; animation: lp-reason-heart 3s ease-in-out infinite; }
.lp-reason-button > span { font-size: 2.3rem; }
.lp-reason-button strong { font: italic 400 clamp(2rem, 5vw, 3rem)/1 "DM Serif Display", serif; }
.lp-reason-button small { color: rgba(255,255,255,.58); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lp-reason-stage .lp-reasons { width: min(100%, 720px); }
.lp-reason-stage .lp-reason { padding: clamp(2rem, 6vw, 4.5rem); color: #45101f; background: #fff8f3; border: 0; border-left: 0; box-shadow: 0 40px 100px rgba(0,0,0,.28); animation: lp-reason-reveal .6s cubic-bezier(.2,.8,.22,1) both; }
.lp-reason-stage .lp-reason[hidden] { display: none; }
.lp-reason-stage .lp-reason strong { margin-bottom: 1rem; color: #991e45; font: 400 clamp(2rem, 5vw, 3.4rem)/1 "DM Serif Display", serif; }
.lp-reason-stage .lp-reason span { display: block; font: 600 clamp(1rem, 2.2vw, 1.3rem)/1.75 Caveat, cursive; }
.lp-reason-again { margin-top: 1.4rem; padding: .7rem 0; color: #fff; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.58); font: 700 .66rem/1 Manrope, sans-serif; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.lp-reason-again[hidden] { display: none; }

/* Later scenes each receive their own visual temperature ---------------- */
.lp-openwhen-scene { color: #4a2630; background: #fff9f3 !important; }
.lp-openwhen-scene::before { content: ""; position: absolute; inset: 1.2rem; z-index: -1; pointer-events: none; border: 1px solid rgba(125,44,67,.1); }
.lp-openwhen-scene .lp-deck-card { border-radius: 0; background: repeating-linear-gradient(#fffef9 0, #fffef9 1.65rem, #eadfd7 1.7rem); }
.lp-booth-scene { color: #552631; background: linear-gradient(135deg, #f4d9df, #fff5ef 52%, #efcbd4) !important; }
.lp-recipient-page .lp-booth { max-width: 32rem; padding: 1rem 1rem 2rem; background: #fff; box-shadow: 0 35px 80px -45px rgba(83,24,40,.62); transform: rotate(-.5deg); }
.lp-recipient-page .lp-booth-stage { border-radius: 0; background: #ede4e2; }

.lp-countdown-scene { min-height: 38rem !important; color: #fff; background: radial-gradient(circle at 50% 20%, hsl(var(--lp-primary) / .35), transparent 26rem), #2c0812 !important; }
.lp-countdown-scene .lp-section-title { color: #fff; }
.lp-countdown-scene .lp-countdown { gap: 1px; }
.lp-countdown-scene .lp-count-cell { min-width: clamp(4.3rem, 14vw, 8rem); padding: clamp(1rem, 3vw, 2rem) .65rem; color: #fff; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.15); border-radius: 0; box-shadow: none; backdrop-filter: blur(8px); }
.lp-countdown-scene .lp-count-num { color: #fff; font: 400 clamp(2.2rem, 6vw, 4.3rem)/1 "DM Serif Display", serif; }
.lp-countdown-scene .lp-count-label { color: rgba(255,255,255,.54); }
.lp-countdown-scene .lp-countdown-status { color: hsl(var(--lp-accent)); }

.lp-plans-scene { color: #f9efed; background: #1d1718 !important; }
.lp-plans-scene .lp-scene-heading > span { color: hsl(var(--lp-accent)); }
.lp-plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid rgba(255,255,255,.13); }
.lp-plans .lp-reason { min-height: 12rem; padding: clamp(1.4rem, 4vw, 2.5rem); display: grid; align-content: center; color: #fff; background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.lp-plans .lp-reason:nth-child(even) { border-right: 0; }
.lp-plans .lp-reason strong { color: #fff; font: 400 1.5rem/1.15 "DM Serif Display", serif; }
.lp-plans .lp-reason span { margin-top: .6rem; color: rgba(255,255,255,.6); font-size: .8rem; line-height: 1.7; }

.lp-song-scene { color: #482630; text-align: center; background: #fffaf5 !important; }
.lp-song-scene .lp-inner::before { content: "♪"; width: 8rem; height: 8rem; margin: 0 auto 2rem; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at center, #a82d50 0 14%, #45101e 15% 17%, #171013 18% 22%, #42101e 23% 25%, #181013 26% 100%); border-radius: 50%; box-shadow: 0 15px 35px rgba(59,14,27,.25); font-size: 1.6rem; }
.lp-question-scene { min-height: 44rem !important; color: #59172a; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.9), transparent 22rem), #f4c9d4 !important; }
.lp-question-scene .lp-question-text { max-width: 720px; margin: 0 auto 2rem; font: italic 400 clamp(2rem, 6vw, 4.5rem)/1.05 "DM Serif Display", serif; }
.lp-surprise-scene { min-height: 40rem !important; color: #fff; background: radial-gradient(circle at 50% 50%, #811d3b, #310711 68%) !important; }
.lp-surprise-scene .lp-section-title { color: #fff; }
.lp-surprise-scene .lp-letter { color: #4d2b2d; background: #fffaf0; }
.lp-recipient-page footer.lp-section { min-height: auto; padding: 2rem 1rem 7rem; color: #72545c; background: #fffaf5 !important; }

/* Persistent audio ribbon ---------------------------------------------- */
.lp-sound-ribbon { position: fixed; z-index: 35; left: clamp(.7rem, 2vw, 1.35rem); bottom: clamp(.7rem, 2vw, 1.35rem); max-width: calc(100vw - 1.4rem); min-width: min(21rem, calc(100vw - 1.4rem)); padding: .6rem .8rem .6rem .6rem; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; color: #fff; background: rgba(25,10,15,.88); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 45px rgba(20,3,9,.28); backdrop-filter: blur(16px); }
.lp-sound-toggle { width: 3.1rem; height: 3.1rem; padding: 0; display: grid; place-items: center; align-content: center; gap: .2rem; color: #fff; background: hsl(var(--lp-primary)); border: 0; border-radius: 50%; cursor: pointer; }
.lp-sound-toggle > b { font-size: .48rem; text-transform: uppercase; }
.lp-sound-bars { height: .8rem; display: flex; align-items: end; gap: 2px; }
.lp-sound-bars i { width: 2px; height: 30%; display: block; background: currentColor; }
.lp-sound-ribbon.is-playing .lp-sound-bars i { animation: lp-sound-bar .8s ease-in-out infinite alternate; }
.lp-sound-ribbon.is-playing .lp-sound-bars i:nth-child(2) { animation-delay: -.4s; }
.lp-sound-ribbon.is-playing .lp-sound-bars i:nth-child(3) { animation-delay: -.2s; }
.lp-sound-ribbon > div { min-width: 0; display: grid; }
.lp-sound-ribbon > div small { color: rgba(255,255,255,.52); font-size: .48rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.lp-sound-ribbon > div strong { overflow: hidden; font: 400 .9rem/1.3 "DM Serif Display", serif; text-overflow: ellipsis; white-space: nowrap; }
.lp-sound-ribbon > a { color: hsl(var(--lp-accent)); font-size: .58rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }

/* Theme identities ------------------------------------------------------ */

/* Memory Film: burgundy cinema, contact sheets and reel details. */
.lp-theme-memory-film .lp-hero-wash { background: radial-gradient(circle at 50% 28%, rgba(112,16,43,.18), transparent 34rem), linear-gradient(180deg, rgba(15,1,5,.32), rgba(54,3,18,.72) 68%, rgba(17,1,5,.94)); }
.lp-theme-memory-film .lp-gallery-scene::before,
.lp-theme-memory-film .lp-gallery-scene::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; height: 2.4rem; opacity: .84; background: #24181b repeating-linear-gradient(90deg, transparent 0 1.3rem, #f7e5e8 1.3rem 2.15rem, transparent 2.15rem 3.45rem); }
.lp-theme-memory-film .lp-gallery-scene::before { top: 0; }
.lp-theme-memory-film .lp-gallery-scene::after { bottom: 0; }
.lp-theme-memory-film .lp-milestone:nth-child(odd) { transform: rotate(-.35deg); }
.lp-theme-memory-film .lp-milestone:nth-child(even) { transform: rotate(.35deg); }

/* Paper Notes: warm desk, handwriting, tape and gently imperfect edges. */
.lp-theme-paper-notes { color: #433427; background: #efe0c3; background-image: repeating-linear-gradient(0deg, rgba(94,67,39,.045) 0 1px, transparent 1px 25px); }
.lp-theme-paper-notes .lp-hero { color: #3e2d21; background: #c9aa7b; }
.lp-theme-paper-notes .lp-hero .lp-hero-photo img { filter: sepia(.3) saturate(.8) contrast(.98); }
.lp-theme-paper-notes .lp-hero-wash { background: linear-gradient(100deg, rgba(54,35,20,.26), rgba(111,75,40,.12)), rgba(80,53,28,.24); }
.lp-theme-paper-notes .lp-hero-copy { color: #3e2d21; background: rgba(250,235,198,.91); border: 1px solid rgba(78,53,30,.26); box-shadow: 12px 16px 0 rgba(68,43,22,.14), 0 40px 100px rgba(37,22,10,.28); transform: rotate(-.7deg); backdrop-filter: blur(6px); }
.lp-theme-paper-notes .lp-hero-copy::before { content: "love, in our own handwriting"; position: absolute; left: 2rem; top: -1rem; margin: 0; padding: .45rem 1rem; display: block; color: #4c3b28; background: #f8df78; font: 600 1rem/1 Caveat, cursive; transform: rotate(-2deg); }
.lp-theme-paper-notes .lp-hero-motif,
.lp-theme-paper-notes .lp-hero-primary,
.lp-theme-paper-notes .lp-hero-secondary { color: #3e2d21; border-color: rgba(62,45,33,.48); }
.lp-theme-paper-notes .lp-hero-primary { background: #fff8df; }
.lp-theme-paper-notes .lp-hero-overline,
.lp-theme-paper-notes .lp-hero-quote,
.lp-theme-paper-notes .lp-hero-signature,
.lp-theme-paper-notes .lp-together,
.lp-theme-paper-notes .lp-hero-scroll { color: #3e2d21; }
.lp-theme-paper-notes .lp-hero-name { color: #4a3423; text-shadow: none; }
.lp-theme-paper-notes .lp-letter-scene,
.lp-theme-paper-notes .lp-gallery-scene,
.lp-theme-paper-notes .lp-openwhen-scene,
.lp-theme-paper-notes .lp-song-scene { background: #f3e6c9 !important; }
.lp-theme-paper-notes .lp-story-scene,
.lp-theme-paper-notes .lp-booth-scene,
.lp-theme-paper-notes .lp-question-scene { background: #ead5ad !important; }
.lp-theme-paper-notes .lp-reasons-scene { background: #76533a !important; }
.lp-theme-paper-notes .lp-main-envelope-paper { background: #dfbd86; }
.lp-theme-paper-notes .lp-main-envelope-paper::before { background: #d0a86f; }
.lp-theme-paper-notes .lp-main-envelope-paper i { background: #e7c58e; }
.lp-theme-paper-notes .lp-main-letter .lp-letter { background: repeating-linear-gradient(#fff7db 0, #fff7db 1.78rem, #d5c8a8 1.84rem); }
.lp-theme-paper-notes .lp-gallery figure:nth-child(odd),
.lp-theme-paper-notes .lp-milestone:nth-child(odd) { transform: rotate(-1.3deg); }
.lp-theme-paper-notes .lp-gallery figure:nth-child(even),
.lp-theme-paper-notes .lp-milestone:nth-child(even) { transform: rotate(1.5deg); }
.lp-theme-paper-notes .lp-section-title,
.lp-theme-paper-notes .lp-milestone h3 { font-family: Caveat, cursive; font-weight: 700; letter-spacing: 0; }

/* Moonlit: a continuous celestial night with glowing glass objects. */
.lp-theme-moonlit { --lp-line: rgba(231,225,255,.14); color: #f5f1ff; background: #090d22; }
.lp-theme-moonlit .lp-hero { background: #06091d; }
.lp-theme-moonlit .lp-hero .lp-hero-photo img { filter: saturate(.55) hue-rotate(10deg) brightness(.66) contrast(1.12); }
.lp-theme-moonlit .lp-hero-wash { background: radial-gradient(circle at 50% 18%, rgba(141,120,235,.24), transparent 25rem), linear-gradient(180deg, rgba(5,8,27,.2), #080b24 88%); }
.lp-theme-moonlit .lp-hero::after { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .62; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, #c9bfff 0 1px, transparent 1.4px); background-size: 93px 93px, 137px 137px; background-position: 7px 13px, 51px 39px; animation: lp-stars 5s ease-in-out infinite alternate; }
.lp-theme-moonlit .lp-hero-copy { background: linear-gradient(145deg, rgba(17,24,64,.62), rgba(8,12,38,.36)); border-color: rgba(219,211,255,.22); box-shadow: 0 0 70px rgba(107,85,211,.13); }
.lp-theme-moonlit .lp-section,
.lp-theme-moonlit .lp-section:nth-of-type(even),
.lp-theme-moonlit .lp-section:nth-of-type(odd) { color: #f5f1ff; background-color: #0c112c !important; background-image: radial-gradient(circle at 10% 10%, rgba(111,90,211,.1), transparent 24rem), radial-gradient(circle at 90% 80%, rgba(58,99,190,.08), transparent 23rem); }
.lp-theme-moonlit .lp-story-scene,
.lp-theme-moonlit .lp-openwhen-scene,
.lp-theme-moonlit .lp-plans-scene,
.lp-theme-moonlit .lp-question-scene { background-color: #111735 !important; }
.lp-theme-moonlit .lp-reasons-scene,
.lp-theme-moonlit .lp-countdown-scene,
.lp-theme-moonlit .lp-surprise-scene { background-color: #06091d !important; }
.lp-theme-moonlit .lp-scene-heading > span,
.lp-theme-moonlit .lp-countdown-status { color: #baaaff; }
.lp-theme-moonlit .lp-main-envelope-paper { background: #313b78; box-shadow: 0 20px 70px rgba(94,75,215,.28); }
.lp-theme-moonlit .lp-main-envelope-paper::before { background: #28336d; }
.lp-theme-moonlit .lp-main-envelope-paper i { background: #445099; }
.lp-theme-moonlit .lp-main-envelope-paper b { background: radial-gradient(circle at 35% 30%, #b8a9ff, #624cb7 70%); }
.lp-theme-moonlit .lp-main-envelope { color: #f4f0ff; }
.lp-theme-moonlit .lp-main-envelope > small { color: rgba(244,240,255,.57); }
.lp-theme-moonlit .lp-main-letter .lp-letter,
.lp-theme-moonlit .lp-milestone,
.lp-theme-moonlit .lp-gallery figure,
.lp-theme-moonlit .lp-deck-card,
.lp-theme-moonlit .lp-booth { color: #f3f0ff; background: rgba(31,39,84,.82); border-color: rgba(223,215,255,.14); box-shadow: 0 30px 80px -45px rgba(105,84,222,.8); }
.lp-theme-moonlit .lp-main-letter .lp-letter { background-image: repeating-linear-gradient(rgba(28,35,77,.96) 0, rgba(28,35,77,.96) 1.78rem, rgba(202,192,255,.12) 1.84rem); }
.lp-theme-moonlit .lp-main-letter .lp-letter::before,
.lp-theme-moonlit .lp-letter-signoff,
.lp-theme-moonlit .lp-milestone time { color: #c6baff; }
.lp-theme-moonlit .lp-milestone p { color: #f3f0ff; }
.lp-theme-moonlit .lp-timeline::before { background: linear-gradient(transparent, rgba(183,169,255,.6), transparent); box-shadow: 0 0 13px rgba(165,147,255,.55); }
.lp-theme-moonlit .lp-milestone::before { color: #d4caff; background: #121a3d; border-color: rgba(195,182,255,.5); box-shadow: 0 0 0 .6rem #0c112c, 0 0 25px rgba(169,150,255,.45); }
.lp-theme-moonlit .lp-reason-stage .lp-reason { color: #f4f0ff; background: rgba(30,39,88,.92); }
.lp-theme-moonlit .lp-gallery-scene::before,
.lp-theme-moonlit .lp-gallery-scene::after { display: none; }

/* Botanical: ivory, sage, pressed leaves and organic shapes. */
.lp-theme-botanical { color: #2f4535; background: #e9eee5; }
.lp-theme-botanical .lp-hero { background: #213b2b; }
.lp-theme-botanical .lp-hero .lp-hero-photo img { filter: saturate(.72) sepia(.08) contrast(1.04); }
.lp-theme-botanical .lp-hero-wash { background: linear-gradient(180deg, rgba(19,48,30,.24), rgba(18,47,29,.78) 74%, #142b1d); }
.lp-theme-botanical .lp-hero::after { content: ""; position: absolute; z-index: -1; right: -7rem; bottom: -8rem; width: 29rem; height: 38rem; border: 5rem solid rgba(188,215,185,.12); border-radius: 100% 0; transform: rotate(-24deg); }
.lp-theme-botanical .lp-hero-copy { background: rgba(28,67,42,.5); border-color: rgba(225,239,220,.26); }
.lp-theme-botanical .lp-letter-scene,
.lp-theme-botanical .lp-gallery-scene,
.lp-theme-botanical .lp-openwhen-scene,
.lp-theme-botanical .lp-song-scene { color: #304637; background: #f3f0e5 !important; }
.lp-theme-botanical .lp-story-scene,
.lp-theme-botanical .lp-booth-scene,
.lp-theme-botanical .lp-question-scene { color: #304637; background: #dde6d8 !important; }
.lp-theme-botanical .lp-reasons-scene,
.lp-theme-botanical .lp-countdown-scene,
.lp-theme-botanical .lp-surprise-scene { background: radial-gradient(circle at 50% 0, #526f54, #243c2c 70%) !important; }
.lp-theme-botanical .lp-plans-scene { background: #1d2f24 !important; }
.lp-theme-botanical .lp-main-envelope-paper { background: #aac1a4; border-radius: 42% 58% 8% 8% / 10% 10% 8% 8%; }
.lp-theme-botanical .lp-main-envelope-paper::before { background: #90ab8b; }
.lp-theme-botanical .lp-main-envelope-paper i { background: #c3d4ba; }
.lp-theme-botanical .lp-main-envelope-paper b { background: radial-gradient(circle at 35% 30%, #789477, #3f6247 72%); }
.lp-theme-botanical .lp-timeline::before { width: 3px; background: linear-gradient(transparent, #758e72, transparent); }
.lp-theme-botanical .lp-milestone,
.lp-theme-botanical .lp-gallery figure,
.lp-theme-botanical .lp-booth { background: #f6f4e9; border-color: rgba(61,91,65,.18); box-shadow: 0 28px 65px -48px rgba(35,67,42,.85); }
.lp-theme-botanical .lp-milestone { border-radius: 2.4rem .3rem 2.4rem .3rem; }
.lp-theme-botanical .lp-gallery figure { border: .65rem solid #f6f4e9; }
.lp-theme-botanical .lp-gallery figure::before { width: 2.1rem; height: 3.7rem; top: -1.2rem; left: auto; right: -.4rem; background: linear-gradient(145deg, transparent 42%, rgba(92,126,86,.62) 43% 57%, transparent 58%); transform: rotate(25deg); }
.lp-theme-botanical .lp-reason-button { border-radius: 48% 52% 44% 56% / 56% 45% 55% 44%; animation: lp-leaf-breathe 4s ease-in-out infinite; }
.lp-theme-botanical .lp-sound-ribbon { background: rgba(25,52,34,.9); }

/* Animations ------------------------------------------------------------ */
@keyframes lp-hero-cinema { from { transform: scale(1.02); } to { transform: scale(1.09) translateY(-.5%); } }
@keyframes lp-motif-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.12); } 50% { transform: scale(1.07); box-shadow: 0 0 0 .65rem rgba(255,255,255,0); } }
@keyframes lp-scroll-cue { 0%,100% { transform: translateY(0); } 50% { transform: translateY(.35rem); } }
@keyframes lp-love-burst { 0% { opacity: 0; transform: translate(0,0) scale(.35); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(var(--r)) scale(1.25); } }
@keyframes lp-main-letter-rise { from { opacity: 0; transform: translateY(5rem) rotateX(-12deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes lp-reason-heart { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes lp-reason-reveal { from { opacity: 0; transform: translateY(1.5rem) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lp-sound-bar { from { height: 30%; } to { height: 100%; } }
@keyframes lp-stars { from { opacity: .38; } to { opacity: .78; } }
@keyframes lp-leaf-breathe { 0%,100% { transform: rotate(-1deg) scale(1); } 50% { transform: rotate(1deg) scale(1.025); } }

/* Responsive recipient composition ------------------------------------ */
@media (max-width: 820px) {
    .lp-recipient-page .lp-hero { padding-inline: .85rem; }
    .lp-recipient-page .lp-hero-copy { padding: 2.2rem 1.2rem; }
    .lp-recipient-page .lp-timeline { padding-left: 2.8rem; gap: 1.2rem; }
    .lp-recipient-page .lp-timeline::before { left: .9rem; }
    .lp-recipient-page .lp-milestone,
    .lp-recipient-page .lp-milestone:nth-child(even) { width: 100%; margin-left: 0; }
    .lp-recipient-page .lp-milestone::before,
    .lp-recipient-page .lp-milestone:nth-child(even)::before { left: -3rem; right: auto; box-shadow: 0 0 0 .45rem #fffdfa; }
    .lp-theme-moonlit .lp-milestone::before,
    .lp-theme-moonlit .lp-milestone:nth-child(even)::before { box-shadow: 0 0 0 .45rem #0c112c, 0 0 20px rgba(169,150,255,.4); }
    .lp-recipient-page .lp-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 575.98px) {
    .lp-soundscape-grid { grid-template-columns: 1fr; }
    .lp-recipient-page .lp-section { min-height: 30rem; padding: 5rem 1rem; }
    .lp-recipient-page .lp-section-title { font-size: clamp(2.8rem, 15vw, 4.6rem); }
    .lp-recipient-page .lp-hero { min-height: 100svh; grid-template-rows: 1fr; gap: 0; padding: 3.8rem .65rem 5rem; background: #310712; }
    .lp-recipient-page .lp-hero .lp-hero-photo,
    .lp-recipient-page .lp-hero .lp-hero-photo.lp-anim-rise,
    .lp-recipient-page .lp-hero-placeholder { width: 100%; height: 100%; margin: 0; }
    .lp-recipient-page .lp-hero .lp-hero-photo img { height: 100%; }
    .lp-recipient-page .lp-hero-copy { width: 100%; margin: 0; padding: 1.8rem .9rem; }
    .lp-recipient-page .lp-hero-name { font-size: clamp(4.2rem, 22vw, 6.7rem); }
    .lp-hero-quote { margin-top: 1rem; font-size: .9rem; }
    .lp-hero-actions { display: grid; grid-template-columns: 1fr; width: min(100%, 17rem); margin: 0 auto; }
    .lp-hero-primary,
    .lp-hero-secondary { width: 100%; }
    .lp-together span { display: block; }
    .lp-main-letter-wrap { min-height: 24rem; }
    .lp-main-envelope { padding-inline: 0; }
    .lp-main-envelope-paper { width: min(88vw, 390px); }
    .lp-recipient-page .lp-main-letter .lp-letter { padding: 3.7rem 1.25rem 2.5rem; background: repeating-linear-gradient(#fffdf7 0, #fffdf7 1.78rem, #e8ddd4 1.84rem); }
    .lp-theme-moonlit .lp-main-letter .lp-letter { background: repeating-linear-gradient(rgba(28,35,77,.96) 0, rgba(28,35,77,.96) 1.78rem, rgba(202,192,255,.12) 1.84rem); }
    .lp-main-letter .lp-letter::before { left: 1.25rem; }
    .lp-recipient-page .lp-gallery { grid-template-columns: 1fr; gap: 2rem; }
    .lp-recipient-page .lp-gallery figure { width: min(90%, 390px); margin-inline: auto; }
    .lp-recipient-page .lp-gallery figure:nth-child(3n+2) { transform: rotate(1.4deg); }
    .lp-plans { grid-template-columns: 1fr; }
    .lp-plans .lp-reason { border-right: 0; }
    .lp-sound-ribbon { right: .7rem; width: auto; min-width: 0; grid-template-columns: auto minmax(0,1fr); }
    .lp-sound-ribbon > a { display: none; }
    .lp-sound-ribbon > div small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-recipient-page .lp-hero .lp-hero-photo,
    .lp-recipient-page .lp-hero .lp-hero-photo.lp-anim-rise,
    .lp-hero-motif,
    .lp-recipient-page .lp-hero-scroll b,
    .lp-reason-button,
    .lp-theme-moonlit .lp-hero::after,
    .lp-sound-ribbon.is-playing .lp-sound-bars i { animation: none !important; }
    .lp-main-envelope-paper,
    .lp-main-envelope-paper i,
    .lp-main-envelope-paper b { transition: none !important; }
}

@media (max-width: 575.98px) {
    .lp-section { padding: 3rem 1rem; }
    .lp-letter { padding: 1.5rem 1.25rem; }
    .lp-deck { height: 29rem; }
    .lp-gallery img { height: 140px; }
}

/* ========================================================================
   2026 image-first rebuild
   An editorial memory-film system for the public pages, builder and the four
   recipient themes. These rules intentionally override the original generic
   card treatment while preserving its accessible interaction primitives.
   ======================================================================== */

.lp-scope {
    --lp-paper: #fffaf2;
    --lp-ink: #2b1720;
    --lp-line: hsl(var(--lp-deep) / .16);
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.lp-script,
.lp-marketing h1,
.lp-marketing h2,
.lp-builder-head h1,
.lp-builder-panel > h2,
.lp-hero-name,
.lp-section-title {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    letter-spacing: -.025em;
}
.lp-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--lp-primary-c);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.lp-kicker::before { content: ""; width: 1.7rem; height: 1px; background: currentColor; }

/* Public marketing hub -------------------------------------------------- */
.lp-marketing {
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 8%, hsl(var(--lp-accent) / .19), transparent 25rem),
        linear-gradient(180deg, var(--lp-paper), hsl(var(--lp-bg)) 30%, #fff 100%);
}
.lp-market-hero,
.lp-occasion-hero {
    width: min(1180px, calc(100% - 2rem));
    min-height: 650px;
    margin: 0 auto;
    padding: clamp(3.5rem, 5vw, 5.5rem) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    gap: clamp(3rem, 8vw, 7rem);
    align-items: center;
}
.lp-market-copy h1,
.lp-occasion-hero-copy h1 {
    max-width: 760px;
    margin: 1rem 0 1.25rem;
    color: var(--lp-deep-c);
    font-size: clamp(3.4rem, 6.6vw, 5.8rem);
    line-height: .94;
}
.lp-market-copy > p,
.lp-occasion-hero-copy > p {
    max-width: 610px;
    margin: 0;
    color: hsl(var(--lp-deep) / .72);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.75;
}
.lp-market-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 2rem; }
.lp-text-link { color: var(--lp-deep-c); font-weight: 800; text-decoration: none; border-bottom: 1px solid currentColor; }
.lp-proof-list { display: flex; gap: .65rem 1.5rem; flex-wrap: wrap; padding: 0; margin: 2rem 0 0; list-style: none; color: hsl(var(--lp-deep) / .68); font-size: .83rem; font-weight: 700; }
.lp-proof-list li::before { content: "✓"; margin-right: .45rem; color: var(--lp-primary-c); }

.lp-market-art { position: relative; min-height: 570px; }
.lp-art-phone {
    position: absolute;
    z-index: 2;
    inset: 0 8% 0 13%;
    padding: 1.1rem;
    border: 9px solid #25161b;
    border-radius: 3rem;
    background: #25161b;
    box-shadow: 0 36px 80px -28px hsl(var(--lp-deep) / .62);
    transform: rotate(2.7deg);
}
.lp-art-phone::before { content: ""; position: absolute; z-index: 3; top: .65rem; left: 50%; width: 5rem; height: 1.1rem; border-radius: 999px; background: #25161b; transform: translateX(-50%); }
.lp-art-phone small,
.lp-art-phone strong,
.lp-art-phone i { position: absolute; z-index: 2; left: 2rem; right: 2rem; color: #fff; text-align: center; }
.lp-art-phone small { bottom: 8.6rem; font-size: .58rem; letter-spacing: .22em; }
.lp-art-phone strong { bottom: 4.3rem; font: 400 clamp(2.2rem, 4vw, 3.3rem)/.95 "DM Serif Display", serif; }
.lp-art-phone i { bottom: 1.8rem; font: 600 .72rem/1 Manrope, sans-serif; opacity: .76; }
.lp-art-photo {
    position: absolute; inset: 1.1rem; overflow: hidden; border-radius: 2.1rem;
    display: grid; place-items: center;
    background:
        linear-gradient(180deg, transparent 35%, rgba(29, 12, 20, .83) 100%),
        radial-gradient(circle at 70% 27%, hsl(var(--lp-accent) / .75), transparent 22%),
        linear-gradient(135deg, hsl(var(--lp-primary) / .8), hsl(var(--lp-deep)));
}
.lp-art-photo::before,
.lp-art-photo::after { content: ""; position: absolute; border-radius: 50%; background: hsl(var(--lp-bg) / .28); filter: blur(1px); }
.lp-art-photo::before { width: 12rem; height: 20rem; left: -4rem; top: 5rem; transform: rotate(-24deg); }
.lp-art-photo::after { width: 10rem; height: 16rem; right: -3rem; top: 8rem; transform: rotate(28deg); }
.lp-art-photo span { position: relative; z-index: 1; padding: 1rem; border: 1px solid rgba(255,255,255,.55); color: #fff; font: 600 1rem/1.5 Caveat, cursive; text-align: center; transform: translateY(-3rem) rotate(-4deg); }
.lp-art-note,
.lp-art-stamp { position: absolute; z-index: 4; font-family: Caveat, cursive; }
.lp-art-note { left: -1rem; top: 5rem; padding: .9rem 1.1rem; background: #ffef93; box-shadow: var(--lp-shadow-sm); color: #4a3920; font-size: 1.35rem; line-height: 1.05; transform: rotate(-8deg); }
.lp-art-stamp { right: -1rem; bottom: 4.5rem; padding: 1rem; border: 2px solid hsl(var(--lp-primary) / .5); border-radius: 50%; color: var(--lp-primary-c); font-size: 1rem; line-height: 1.05; text-align: center; transform: rotate(9deg); }
.lp-art-strip { position: absolute; z-index: 3; left: -1rem; right: -2rem; bottom: 1rem; display: flex; gap: .45rem; padding: .65rem; background: #23161a; transform: rotate(-5deg); box-shadow: var(--lp-shadow); }
.lp-art-strip span { flex: 1; aspect-ratio: 1.25; background: linear-gradient(145deg, hsl(var(--lp-accent) / .55), hsl(var(--lp-primary) / .8)); border: 2px solid #fff; }

.lp-market-section { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4.5rem, 8vw, 8rem) 0; }
.lp-market-heading { max-width: 660px; margin-bottom: 3rem; }
.lp-market-heading > span { display: block; margin-bottom: .65rem; color: var(--lp-primary-c); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.lp-market-heading h2 { margin: 0 0 .8rem; color: var(--lp-deep-c); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; }
.lp-market-heading p { color: hsl(var(--lp-deep) / .65); line-height: 1.7; }
.lp-occasion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--lp-line); border: 1px solid var(--lp-line); }
.lp-occasion-card { position: relative; min-height: 360px; padding: 1.5rem; display: flex; flex-direction: column; color: var(--lp-deep-c); text-decoration: none; background: var(--lp-paper); transition: transform .35s ease, background .35s ease; animation: lp-card-enter .65s ease both; animation-delay: var(--lp-delay); }
.lp-occasion-card::after { content: ""; position: absolute; inset: auto 1.5rem 5rem; height: 1px; background: var(--lp-o); transform: scaleX(.2); transform-origin: left; transition: transform .35s ease; }
.lp-occasion-card:hover { z-index: 2; color: var(--lp-deep-c); background: #fff; transform: translateY(-8px); box-shadow: var(--lp-shadow); }
.lp-occasion-card:hover::after { transform: scaleX(1); }
.lp-occasion-no { font: 700 .68rem/1 Manrope, sans-serif; letter-spacing: .18em; color: hsl(var(--lp-deep) / .42); }
.lp-occasion-emoji { margin: auto 0 1rem; font-size: 2.4rem; }
.lp-occasion-card strong { color: var(--lp-o); font: 400 1.8rem/1.1 "DM Serif Display", serif; }
.lp-occasion-card p { margin: .7rem 0 1.5rem; color: hsl(var(--lp-deep) / .65); font-size: .88rem; line-height: 1.6; }
.lp-occasion-card i { margin-top: auto; color: var(--lp-deep-c); font-size: .76rem; font-style: normal; font-weight: 800; }

.lp-experience { padding: clamp(5rem, 10vw, 9rem) max(1rem, calc((100% - 1120px)/2)); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; color: #fff; background: hsl(var(--lp-deep)); }
.lp-experience-copy .lp-kicker { color: hsl(var(--lp-accent)); }
.lp-experience-copy h2 { margin: 1rem 0; font-size: clamp(2.8rem, 5.5vw, 5.3rem); line-height: .98; }
.lp-experience-copy > p { color: rgba(255,255,255,.68); line-height: 1.8; }
.lp-experience-copy ol { padding: 0; margin: 2.4rem 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }
.lp-experience-copy li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.lp-experience-copy li b { color: hsl(var(--lp-accent)); font-size: .7rem; letter-spacing: .14em; }
.lp-experience-copy li span { color: rgba(255,255,255,.62); font-size: .86rem; }
.lp-experience-copy li strong { display: block; color: #fff; font-size: .94rem; margin-bottom: .2rem; }
.lp-experience-reel { position: relative; min-height: 520px; }
.lp-reel-card { position: absolute; width: min(340px, 72%); aspect-ratio: .78; padding: 1.7rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; border: 8px solid #f7f0e7; box-shadow: 0 28px 60px rgba(0,0,0,.35); }
.lp-reel-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.78)), radial-gradient(circle at 50% 30%, hsl(var(--lp-accent) / .6), transparent 22%), hsl(var(--lp-primary)); }
.lp-reel-card > * { position: relative; }
.lp-reel-card span { margin-bottom: auto; font-size: .68rem; letter-spacing: .18em; }
.lp-reel-card strong { font: 400 2.4rem/1 "DM Serif Display", serif; }
.lp-reel-card p { margin: .4rem 0 0; color: rgba(255,255,255,.7); font-size: .78rem; }
.lp-reel-one { left: 0; top: 2rem; transform: rotate(-9deg); }
.lp-reel-two { left: 28%; top: 0; z-index: 2; transform: rotate(2deg); }
.lp-reel-three { right: 0; top: 5rem; transform: rotate(10deg); }

.lp-feature-ledger { border-top: 1px solid var(--lp-line); }
.lp-feature-ledger article { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--lp-line); }
.lp-feature-ledger article > span { color: var(--lp-primary-c); font-size: .68rem; font-weight: 800; letter-spacing: .17em; }
.lp-feature-ledger h3 { margin: 0 0 .3rem; font: 400 1.65rem/1.2 "DM Serif Display", serif; }
.lp-feature-ledger p { margin: 0; color: hsl(var(--lp-deep) / .62); line-height: 1.65; }
.lp-market-cta { padding: clamp(5rem, 9vw, 9rem) 1rem; color: #fff; text-align: center; background: linear-gradient(135deg, hsl(var(--lp-deep)), hsl(var(--lp-primary))); }
.lp-market-cta span { font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.lp-market-cta h2 { max-width: 800px; margin: 1rem auto 2rem; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: .98; }
.lp-market-cta .lp-btn { background: #fff; color: var(--lp-deep-c); }

/* Occasion page --------------------------------------------------------- */
.lp-builder-back { display: table; margin-bottom: 2rem; color: hsl(var(--lp-deep) / .7); font-size: .8rem; font-weight: 800; text-decoration: none; }
.lp-quiet-proof { color: hsl(var(--lp-deep) / .58); font-size: .78rem; font-weight: 700; }
.lp-occasion-collage { position: relative; min-height: 520px; }
.lp-collage-back,
.lp-collage-photo,
.lp-collage-letter { position: absolute; box-shadow: var(--lp-shadow); }
.lp-collage-back { inset: 6% 17% 11% 4%; background: hsl(var(--lp-primary)); transform: rotate(-6deg); }
.lp-collage-back span { position: absolute; top: 1.2rem; left: 1.2rem; color: rgba(255,255,255,.72); font-size: .65rem; font-weight: 800; letter-spacing: .22em; }
.lp-collage-photo { inset: 2% 6% 19% 16%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 65% 28%, hsl(var(--lp-accent) / .75), transparent 18%), linear-gradient(145deg, hsl(var(--lp-deep)), hsl(var(--lp-primary))); border: 10px solid #fff; transform: rotate(4deg); }
.lp-collage-photo::before,
.lp-collage-photo::after { content: ""; position: absolute; width: 37%; height: 58%; bottom: 0; border-radius: 50% 50% 0 0; background: hsl(var(--lp-bg) / .2); }
.lp-collage-photo::before { left: 12%; transform: rotate(-8deg); }
.lp-collage-photo::after { right: 12%; transform: rotate(8deg); }
.lp-collage-photo span { z-index: 1; font: 600 1.2rem/1.3 Caveat, cursive; text-align: center; }
.lp-collage-letter { z-index: 3; right: -1rem; bottom: 0; width: 62%; padding: 1.5rem; background: var(--lp-paper); transform: rotate(-3deg); }
.lp-collage-letter small { color: var(--lp-primary-c); font-size: .62rem; font-weight: 800; letter-spacing: .18em; }
.lp-collage-letter p { margin: .8rem 0; color: hsl(var(--lp-deep) / .72); font: 600 1rem/1.4 Caveat, cursive; }
.lp-collage-letter b { display: block; text-align: right; font: 600 1rem/1 Caveat, cursive; }
.lp-occasion-collage > i { position: absolute; z-index: 4; left: 0; bottom: 2rem; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--lp-accent)); box-shadow: var(--lp-shadow-sm); font-size: 2rem; font-style: normal; }
.lp-occasion-steps { padding: clamp(5rem, 8vw, 8rem) max(1rem, calc((100% - 1120px)/2)); background: #fff; }
.lp-step-track { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--lp-line); }
.lp-step-track article { padding: 2rem 1.5rem; border-right: 1px solid var(--lp-line); }
.lp-step-track b { color: var(--lp-primary-c); font-size: .7rem; letter-spacing: .16em; }
.lp-step-track h3 { margin: 3rem 0 .7rem; font: 400 1.55rem/1.1 "DM Serif Display", serif; }
.lp-step-track p { margin: 0; color: hsl(var(--lp-deep) / .62); font-size: .85rem; line-height: 1.65; }
.lp-occasion-detail { padding: clamp(5rem, 8vw, 8rem) max(1rem, calc((100% - 920px)/2)); display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; background: hsl(var(--lp-deep)); color: #fff; }
.lp-occasion-detail h2 { margin: 1rem 0; font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1; }
.lp-occasion-detail p { color: rgba(255,255,255,.66); line-height: 1.7; }
.lp-occasion-detail ul { padding: 0; margin: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }
.lp-occasion-detail li { padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.16); font-weight: 700; }
.lp-occasion-detail li::before { content: "✦"; margin-right: .7rem; color: hsl(var(--lp-accent)); }
.lp-other-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lp-other-grid a { min-height: 190px; padding: 1.4rem; display: flex; flex-direction: column; color: var(--lp-deep-c); text-decoration: none; background: #fff; border: 1px solid var(--lp-line); transition: transform .25s ease, box-shadow .25s ease; }
.lp-other-grid a:hover { color: var(--lp-deep-c); transform: translateY(-5px); box-shadow: var(--lp-shadow-sm); }
.lp-other-grid span { font-size: 2rem; }
.lp-other-grid strong { margin: auto 0 .5rem; color: var(--lp-o); font: 400 1.6rem/1 "DM Serif Display", serif; }
.lp-other-grid i { font-size: .75rem; font-style: normal; font-weight: 800; }

/* Builder --------------------------------------------------------------- */
.lp-builder-shell { min-height: 100vh; padding: 2.5rem max(1rem, calc((100% - 1240px)/2)) 6rem; background: linear-gradient(135deg, var(--lp-paper), hsl(var(--lp-bg)) 55%, hsl(var(--lp-accent) / .14)); }
.lp-builder-head { margin-bottom: 2rem; }
.lp-builder-head > div:first-of-type { max-width: 800px; }
.lp-builder-head h1 { margin: .65rem 0; font-size: clamp(2.7rem, 6vw, 5rem); line-height: .98; }
.lp-builder-head p { max-width: 650px; color: hsl(var(--lp-deep) / .64); line-height: 1.7; }
.lp-builder-progress { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 2rem; border-top: 1px solid var(--lp-line); }
.lp-builder-progress span { position: relative; padding: .85rem .4rem 0 0; color: hsl(var(--lp-deep) / .4); font-size: .66rem; font-weight: 800; letter-spacing: .12em; cursor: pointer; }
.lp-builder-progress span::before { content: ""; position: absolute; top: -3px; left: 0; width: 0; height: 5px; background: var(--lp-primary-c); transition: width .35s ease; }
.lp-builder-progress span.is-active,
.lp-builder-progress span.is-done { color: var(--lp-primary-c); }
.lp-builder-progress span.is-active::before,
.lp-builder-progress span.is-done::before { width: 100%; }
.lp-builder-progress b { display: block; margin-top: .25rem; color: var(--lp-deep-c); font-size: .78rem; letter-spacing: 0; }
.lp-builder-alert { max-width: 760px; margin: 0 0 1.5rem; padding: 1rem 1.2rem; color: #7b1f2c; background: #fff; border-left: 4px solid #d53b50; box-shadow: var(--lp-shadow-sm); }
.lp-builder-grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 380px); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lp-builder-form { min-width: 0; }
.lp-builder-panel { margin-bottom: 1rem; padding: clamp(1.5rem, 4vw, 3.2rem); background: rgba(255,255,255,.92); border: 1px solid var(--lp-line); box-shadow: 0 26px 70px -48px hsl(var(--lp-deep) / .55); }
.is-stepped .lp-builder-panel { display: none; }
.is-stepped .lp-builder-panel.is-current { display: block; animation: lp-panel-in .48s cubic-bezier(.2,.72,.28,1) both; }
.lp-panel-number { margin-bottom: .7rem; color: var(--lp-primary-c); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.lp-builder-panel > h2 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1; }
.lp-panel-intro { max-width: 620px; margin: .9rem 0 2rem; color: hsl(var(--lp-deep) / .62); line-height: 1.7; }
.lp-builder-shell .lp-label { margin-bottom: .45rem; color: var(--lp-deep-c); font-size: .75rem; letter-spacing: .03em; }
.lp-builder-shell .lp-label span { color: hsl(var(--lp-deep) / .48); font-weight: 500; }
.lp-builder-shell .lp-input,
.lp-builder-shell .lp-textarea { border-width: 1px; border-radius: .2rem; background: #fff; }
.lp-builder-shell .lp-textarea { min-height: 5rem; }
.lp-builder-shell .lp-letter-input { min-height: 290px; font-family: Caveat, cursive; font-size: 1.35rem; }
.lp-theme-fieldset,
.lp-sections-fieldset { padding: 0; margin: 2rem 0; border: 0; }
.lp-theme-fieldset legend,
.lp-sections-fieldset legend { margin-bottom: .8rem; font-size: .82rem; font-weight: 800; }
.lp-theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.lp-theme-option { position: relative; padding: .7rem; display: grid; grid-template-columns: 4.5rem 1fr; grid-template-rows: auto 1fr; column-gap: .85rem; background: #fff; border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--lp-line); cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.lp-theme-option:hover { transform: translateY(-2px); }
.lp-theme-option:has(input:checked) { border-color: var(--lp-primary-c); }
.lp-theme-option input { position: absolute; top: .65rem; right: .65rem; accent-color: var(--lp-primary-c); }
.lp-theme-option strong { align-self: end; padding-right: 1.2rem; font-size: .86rem; }
.lp-theme-option small { color: hsl(var(--lp-deep) / .56); font-size: .68rem; line-height: 1.4; }
.lp-theme-art { grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 5px; background: #252125; }
.lp-theme-art i { background: #f5b4c5; }
.lp-theme-art i:first-child { grid-column: span 2; }
.lp-theme-swatch-paper-notes .lp-theme-art { background: #c99f75; transform: rotate(-2deg); }
.lp-theme-swatch-paper-notes .lp-theme-art i { background: #f6e6bb; }
.lp-theme-swatch-moonlit .lp-theme-art { background: #151734; }
.lp-theme-swatch-moonlit .lp-theme-art i { background: #7d73c4; border-radius: 50%; }
.lp-theme-swatch-botanical .lp-theme-art { background: #e6ebdf; }
.lp-theme-swatch-botanical .lp-theme-art i { background: #6c8269; border-radius: 70% 0; }
.lp-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; }
.lp-upload-card { min-height: 150px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--lp-deep-c); background: hsl(var(--lp-primary) / .035); border: 1px dashed hsl(var(--lp-primary) / .42); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.lp-upload-card:hover { background: hsl(var(--lp-primary) / .08); transform: translateY(-2px); }
.lp-upload-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lp-upload-icon { margin-bottom: .35rem; color: var(--lp-primary-c); font-size: 1.8rem; }
.lp-upload-card strong { font-size: .9rem; }
.lp-upload-card small { margin-top: .25rem; color: hsl(var(--lp-deep) / .54); font-size: .68rem; line-height: 1.5; }
.lp-upload-card-wide { min-height: 180px; }
.lp-file-strip { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 1.6rem; }
.lp-file-strip img { width: 74px; aspect-ratio: 1; object-fit: cover; border: 4px solid #fff; box-shadow: var(--lp-shadow-sm); }
.lp-file-strip p { width: 100%; margin: 0; color: #8f2d3b; font-size: .75rem; }
.lp-selected-photo { position: relative; display: inline-block; }
.lp-selected-photo button { position: absolute; top: -.45rem; right: -.45rem; width: 1.55rem; height: 1.55rem; padding: 0; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #7b2734; box-shadow: var(--lp-shadow-sm); font: 800 1rem/1 sans-serif; cursor: pointer; }
.lp-countdown-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.lp-countdown-presets button { padding: .4rem .58rem; border: 1px solid hsl(var(--lp-primary) / .24); color: var(--lp-primary-c); background: hsl(var(--lp-primary) / .055); font: 800 .63rem/1 Manrope, sans-serif; cursor: pointer; }
.lp-countdown-presets button:hover,
.lp-countdown-presets button:focus-visible { color: #fff; background: var(--lp-primary-c); outline: none; }
.lp-lock-box { margin-top: 2rem; padding: 1.4rem; background: hsl(var(--lp-deep) / .045); border-left: 3px solid var(--lp-primary-c); }
.lp-lock-box > div:first-child { position: relative; padding-left: 2.8rem; }
.lp-lock-box h3 { margin: 0; font: 400 1.35rem/1.2 "DM Serif Display", serif; }
.lp-lock-box p { margin: .3rem 0 1rem; color: hsl(var(--lp-deep) / .6); font-size: .78rem; line-height: 1.5; }
.lp-lock-mark { position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--lp-primary-c); }
.lp-repeater-stack { display: grid; gap: 1rem; }
.lp-builder-module { margin-top: 1rem; padding: 1.2rem; border: 1px solid var(--lp-line); background: hsl(var(--lp-bg) / .35); }
.lp-module-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.lp-module-head span { font: 400 1.3rem/1.2 "DM Serif Display", serif; }
.lp-module-head p { margin: .2rem 0 0; color: hsl(var(--lp-deep) / .55); font-size: .73rem; }
.lp-add,
.lp-remove { border: 0; color: var(--lp-primary-c); background: none; font: 800 .72rem/1.2 Manrope, sans-serif; cursor: pointer; }
.lp-add { white-space: nowrap; padding: .45rem; border-bottom: 1px solid currentColor; }
.lp-row { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--lp-line); }
.lp-row .lp-label { font-size: .66rem; }
.lp-row .lp-textarea { min-height: 4.2rem; }
.lp-remove { margin-top: .5rem; padding: .35rem 0; color: #8d3542; }
.lp-sections-fieldset > p { color: hsl(var(--lp-deep) / .55); font-size: .75rem; }
.lp-toggle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.lp-toggle-grid label { padding: .7rem; background: #fff; border: 1px solid var(--lp-line); font-size: .76rem; font-weight: 700; }
.lp-toggle-grid input { accent-color: var(--lp-primary-c); }
.lp-publish-note { margin: 1.5rem 0; padding: 1.1rem; display: grid; gap: .2rem; background: hsl(var(--lp-accent) / .15); }
.lp-publish-note span { color: hsl(var(--lp-deep) / .66); font-size: .76rem; line-height: 1.55; }
.lp-publish-btn { width: 100%; border-radius: .25rem; }
.lp-step-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.lp-step-actions .lp-btn { min-width: 9rem; border-radius: .25rem; }

.lp-live-wrap { position: sticky; top: 1.5rem; }
.lp-live-label { margin-bottom: .7rem; color: hsl(var(--lp-deep) / .58); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lp-live-label span { display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: #38aa72; box-shadow: 0 0 0 4px rgba(56,170,114,.13); }
.lp-live-phone { position: relative; width: min(100%, 340px); min-height: 600px; margin: 0 auto; padding: .7rem; overflow: hidden; color: #fff; background: #21191c; border: 8px solid #21191c; border-radius: 2.6rem; box-shadow: 0 32px 70px -30px hsl(var(--lp-deep) / .7); transition: background .35s ease, color .35s ease; }
.lp-live-status { position: absolute; z-index: 4; top: .8rem; left: 50%; display: flex; gap: 3px; transform: translateX(-50%); }
.lp-live-status i { display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.65); }
.lp-live-photo { position: relative; height: 355px; overflow: hidden; display: grid; place-items: center; border-radius: 1.7rem 1.7rem .2rem .2rem; background: radial-gradient(circle at 70% 28%, hsl(var(--lp-accent) / .75), transparent 20%), linear-gradient(145deg, hsl(var(--lp-primary)), hsl(var(--lp-deep))); background-position: center; background-size: cover; }
.lp-live-photo::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.lp-live-photo span { z-index: 1; padding: .7rem; color: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.45); font: 600 .95rem/1.3 Caveat, cursive; text-align: center; }
.lp-live-photo.has-image span { display: none; }
.lp-live-copy { position: relative; z-index: 2; margin-top: -5.2rem; padding: 1rem 1rem 0; text-align: center; }
.lp-live-copy small { display: block; font-size: .51rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.lp-live-copy > strong { display: block; overflow: hidden; margin: .25rem 0 .7rem; font: 400 2.3rem/1 "DM Serif Display", serif; text-overflow: ellipsis; white-space: nowrap; }
.lp-live-copy p { height: 3.2rem; overflow: hidden; margin: 0 auto .5rem; color: rgba(255,255,255,.68); font: 600 .78rem/1.35 Caveat, cursive; }
.lp-live-copy em { display: block; font-size: .55rem; font-style: normal; letter-spacing: .08em; }
.lp-live-film { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: 1rem .5rem; padding: .35rem; background: rgba(255,255,255,.08); }
.lp-live-film span { aspect-ratio: 1; background: rgba(255,255,255,.12) center/cover; }
.lp-live-note { max-width: 330px; margin: 1rem auto 0; color: hsl(var(--lp-deep) / .5); font-size: .68rem; line-height: 1.55; text-align: center; }
.lp-preview-theme-paper-notes { color: #3f3228; background: #f1dfbf; }
.lp-preview-theme-paper-notes .lp-live-photo { border-radius: .2rem; transform: rotate(-1deg); }
.lp-preview-theme-paper-notes .lp-live-copy p,
.lp-preview-theme-paper-notes .lp-live-copy small { color: rgba(63,50,40,.68); }
.lp-preview-theme-paper-notes .lp-live-copy { background: #f1dfbf; }
.lp-preview-theme-moonlit { background: #11152f; }
.lp-preview-theme-moonlit .lp-live-photo { filter: saturate(.72) contrast(1.08); }
.lp-preview-theme-botanical { color: #34443a; background: #dfe7d9; }
.lp-preview-theme-botanical .lp-live-copy p,
.lp-preview-theme-botanical .lp-live-copy small { color: rgba(52,68,58,.67); }
.lp-preview-theme-botanical .lp-live-copy { background: #dfe7d9; }

/* Recipient page: image-led opening and theme identities ---------------- */
.lp-recipient-page { min-height: 100vh; margin: 0; background: var(--lp-bg-c); }
.lp-story-progress { position: fixed; z-index: 15; top: 0; left: 0; right: 0; height: 4px; pointer-events: none; background: hsl(var(--lp-deep) / .1); }
.lp-story-progress span { position: absolute; inset: 0; background: var(--lp-grad); transform: scaleX(0); transform-origin: left center; }
.lp-story-progress b { position: absolute; top: .8rem; right: .8rem; padding: .25rem .45rem; color: hsl(var(--lp-deep) / .62); background: hsl(var(--lp-bg) / .78); backdrop-filter: blur(8px); font-size: .48rem; letter-spacing: .18em; }
.lp-recipient-page .lp-hero { position: relative; min-height: 100vh; min-height: 100svh; padding: clamp(1rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(280px, .85fr) minmax(320px, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; overflow: hidden; text-align: left; background: linear-gradient(135deg, hsl(var(--lp-deep)) 0 48%, hsl(var(--lp-bg)) 48% 100%); }
.lp-hero-grain { position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.lp-hero-photo { position: relative; z-index: 1; width: min(100%, 530px); margin: 0 0 0 auto; padding: .7rem .7rem 2.4rem; background: #fff; box-shadow: 0 35px 75px rgba(0,0,0,.35); transform: rotate(-2.5deg); animation: lp-photo-breathe 6s 1s ease-in-out infinite; }
.lp-hero-photo.lp-anim-rise { animation: lp-photo-enter .8s ease both, lp-photo-breathe 6s 1s ease-in-out infinite; }
.lp-hero-photo img { width: 100%; height: min(68vh, 650px); object-fit: cover; display: block; }
.lp-hero-photo span { position: absolute; left: 1rem; bottom: .75rem; color: #3b282f; font-size: .6rem; font-weight: 800; letter-spacing: .18em; }
.lp-hero-copy { position: relative; z-index: 2; max-width: 650px; }
.lp-hero-overline { margin: 0 0 1rem; color: hsl(var(--lp-primary)); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.lp-recipient-page .lp-hero-name { margin: 0; color: var(--lp-deep-c); font-size: clamp(4.2rem, 11vw, 9.5rem); line-height: .82; overflow-wrap: anywhere; }
.lp-hero-signature { margin: 1.5rem 0; font: 600 clamp(1.1rem, 2.4vw, 1.7rem)/1 Caveat, cursive; color: hsl(var(--lp-deep) / .65); }
.lp-hero-scroll { display: inline-flex; gap: .6rem; color: var(--lp-deep-c); font-size: .74rem; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid currentColor; }
.lp-hero-placeholder { position: relative; z-index: 1; width: min(90%, 480px); aspect-ratio: .8; margin-left: auto; display: grid; place-items: center; background: hsl(var(--lp-primary)); border: 10px solid #fff; box-shadow: 0 35px 75px rgba(0,0,0,.35); transform: rotate(-3deg); }
.lp-hero-placeholder span { font-size: 5rem; }
.lp-hero-placeholder i,
.lp-hero-placeholder b { position: absolute; width: 35%; height: 55%; bottom: 0; border-radius: 50% 50% 0 0; background: hsl(var(--lp-accent) / .34); }
.lp-hero-placeholder i { left: 10%; transform: rotate(-8deg); }
.lp-hero-placeholder b { right: 10%; transform: rotate(8deg); }
.lp-recipient-page .lp-section { position: relative; padding: clamp(5rem, 10vw, 9rem) 1.25rem; }
.lp-recipient-page .lp-section:nth-of-type(even) { background: hsl(var(--lp-primary) / .045); }
.lp-recipient-page .lp-inner { max-width: 780px; }
.lp-recipient-page .lp-section-title { margin-bottom: 2.4rem; color: var(--lp-deep-c); font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: .94; }
.lp-recipient-page .lp-letter { position: relative; padding: clamp(2rem, 6vw, 4.8rem); border-radius: 0; border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); background: var(--lp-paper); font: 600 clamp(1.05rem, 2.4vw, 1.35rem)/1.9 Caveat, cursive; }
.lp-recipient-page .lp-letter::before { content: "A LETTER FROM THE HEART"; position: absolute; left: 2rem; top: 1rem; color: hsl(var(--lp-primary) / .55); font: 800 .55rem/1 Manrope, sans-serif; letter-spacing: .2em; }
.lp-recipient-page .lp-gallery { grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.lp-recipient-page .lp-gallery figure { grid-column: span 6; padding: .55rem .55rem 1.8rem; border-radius: 0; box-shadow: var(--lp-shadow); transform: rotate(-1.5deg); }
.lp-recipient-page .lp-gallery figure:nth-child(3n+2) { transform: rotate(2deg) translateY(1.6rem); }
.lp-recipient-page .lp-gallery figure:nth-child(3n) { transform: rotate(-.5deg); }
.lp-recipient-page .lp-gallery img { height: clamp(210px, 42vw, 390px); }
.lp-recipient-page .lp-gallery figcaption { font: 600 .92rem/1.2 Caveat, cursive; }
.lp-recipient-page .lp-reason { border-radius: 0; border: 1px solid var(--lp-line); border-left: 4px solid var(--lp-accent-c); }
.lp-creator-preview { display: grid; gap: .25rem; color: var(--lp-deep-c); background: hsl(var(--lp-accent) / .17); border: 1px solid hsl(var(--lp-accent) / .45); }
.lp-creator-preview span { color: hsl(var(--lp-deep) / .64); font-size: .82rem; }
.lp-lightbox[hidden] { display: none; }
.lp-lightbox { position: fixed; z-index: 40; inset: 0; padding: clamp(1rem, 5vw, 4rem); display: grid; place-items: center; opacity: 0; background: rgba(13,10,12,.9); backdrop-filter: blur(14px); transition: opacity .22s ease; }
.lp-lightbox.is-open { opacity: 1; }
.lp-lightbox figure { max-width: min(92vw, 920px); max-height: 86vh; margin: 0; color: #fff; text-align: center; transform: scale(.94); transition: transform .35s cubic-bezier(.2,.8,.3,1); }
.lp-lightbox.is-open figure { transform: none; }
.lp-lightbox img { max-width: 100%; max-height: 78vh; object-fit: contain; box-shadow: 0 32px 90px rgba(0,0,0,.48); }
.lp-lightbox figcaption { margin-top: .8rem; color: rgba(255,255,255,.75); font: 600 1.1rem/1.3 Caveat, cursive; }
.lp-lightbox-close { position: fixed; top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); font-size: 1.7rem; cursor: pointer; }

/* Creator preview and browser-recovered library ------------------------- */
.lp-manage-preview { margin-bottom: 1rem; display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); overflow: hidden; color: #fff; background: hsl(var(--lp-deep)); box-shadow: var(--lp-shadow); }
.lp-manage-preview__visual { position: relative; min-height: 290px; display: grid; place-items: end start; padding: 1.4rem; background: radial-gradient(circle at 65% 25%, hsl(var(--lp-accent) / .68), transparent 35%), linear-gradient(145deg, hsl(var(--lp-primary)), hsl(var(--lp-deep))); background-position: center; background-size: cover; }
.lp-manage-preview__visual::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.lp-manage-preview__visual span { position: relative; z-index: 1; font: 600 2.2rem/1 Caveat, cursive; }
.lp-manage-preview__copy { padding: clamp(1.6rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.lp-manage-preview__copy h2 { margin: .65rem 0; color: #fff; font: 400 clamp(2rem, 5vw, 3.1rem)/1 "DM Serif Display", serif; }
.lp-manage-preview__copy p { margin: 0 0 1.25rem; color: rgba(255,255,255,.67); line-height: 1.65; }
.lp-manage-preview__copy .lp-kicker { color: hsl(var(--lp-accent)); }

.lp-creator-library { min-height: 100vh; padding-bottom: 5rem; background: linear-gradient(145deg, var(--lp-paper, #fffdf7), hsl(var(--lp-bg))); }
.lp-library-hero { padding: clamp(3.5rem, 8vw, 7rem) max(1rem, calc((100% - 1100px)/2)) 3rem; }
.lp-library-hero h1 { max-width: 760px; margin: .65rem 0; font: 400 clamp(3rem, 8vw, 6.3rem)/.9 "DM Serif Display", serif; }
.lp-library-hero p { max-width: 660px; color: hsl(var(--lp-deep) / .64); line-height: 1.7; }
.lp-library-grid { width: min(calc(100% - 2rem), 1100px); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lp-library-card,
.lp-library-empty { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); background: rgba(255,255,255,.9); border: 1px solid var(--lp-line); box-shadow: 0 24px 60px -48px hsl(var(--lp-deep) / .6); }
.lp-library-card { display: grid; gap: 1.4rem; }
.lp-library-index { position: absolute; top: 1.1rem; right: 1.2rem; color: hsl(var(--lp-primary) / .22); font: 400 2.4rem/1 "DM Serif Display", serif; }
.lp-library-card small { color: var(--lp-primary-c); font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.lp-library-card h2 { margin: .45rem 0 .2rem; font: 400 2.05rem/1 "DM Serif Display", serif; }
.lp-library-card p { margin: 0; color: hsl(var(--lp-deep) / .54); font-size: .78rem; }
.lp-library-card dl { margin: 0; padding: 1rem 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--lp-line); }
.lp-library-card dl div { text-align: center; }
.lp-library-card dt { color: hsl(var(--lp-deep) / .48); font-size: .61rem; letter-spacing: .08em; text-transform: uppercase; }
.lp-library-card dd { margin: .2rem 0 0; color: var(--lp-primary-c); font: 400 1.8rem/1 "DM Serif Display", serif; }
.lp-library-empty { grid-column: 1 / -1; text-align: center; }
.lp-library-empty > span { font-size: 3rem; }
.lp-library-new { margin-top: 2rem; text-align: center; }
.lp-library-new a { color: var(--lp-primary-c); font-weight: 800; }

.lp-theme-paper-notes { --lp-paper: #f8ebce; background-image: linear-gradient(rgba(93,69,45,.055) 1px, transparent 1px); background-size: 100% 26px; }
.lp-theme-paper-notes .lp-hero { background: linear-gradient(135deg, #755f4c 0 48%, #f8ebce 48%); }
.lp-theme-paper-notes .lp-hero-photo { transform: rotate(3deg); box-shadow: 8px 14px 0 rgba(117,95,76,.18), var(--lp-shadow); }
.lp-theme-paper-notes .lp-hero-copy::before { content: "love, in our own handwriting"; display: table; margin-bottom: 1.4rem; padding: .45rem .7rem; background: #ffe892; font: 600 1rem/1 Caveat, cursive; transform: rotate(-2deg); }
.lp-theme-moonlit { --lp-paper: #1c2144; color: #f3efff; background: #10142d; }
.lp-theme-moonlit .lp-hero { background: radial-gradient(circle at 82% 18%, rgba(205,193,255,.23), transparent 20rem), linear-gradient(135deg, #070a1d 0 48%, #161b3c 48%); }
.lp-theme-moonlit .lp-hero-name,
.lp-theme-moonlit .lp-hero-scroll,
.lp-theme-moonlit .lp-section-title { color: #f7f2ff; text-shadow: 0 0 32px rgba(211,195,255,.2); }
.lp-theme-moonlit .lp-hero-signature,
.lp-theme-moonlit .lp-muted { color: rgba(247,242,255,.64); }
.lp-theme-moonlit .lp-section,
.lp-theme-moonlit .lp-section:nth-of-type(even) { background: #10142d; }
.lp-theme-moonlit .lp-section:nth-of-type(odd) { background: #151a38; }
.lp-theme-moonlit .lp-letter,
.lp-theme-moonlit .lp-reason,
.lp-theme-moonlit .lp-deck-card,
.lp-theme-moonlit .lp-count-cell,
.lp-theme-moonlit .lp-card { color: #f3efff; background: #20264b; border-color: rgba(255,255,255,.1); }
.lp-theme-moonlit .lp-milestone p { color: rgba(247,242,255,.74); }
.lp-theme-moonlit .lp-gallery figure { background: #272d56; }
.lp-theme-moonlit .lp-envelope-trigger,
.lp-theme-moonlit .lp-deck-message { color: #f3efff; }
.lp-theme-moonlit .lp-deck-message { background: rgba(28,33,68,.94); border-color: rgba(255,255,255,.1); }
.lp-theme-moonlit .lp-deck-message p { color: rgba(247,242,255,.8); }
.lp-theme-moonlit .lp-envelope-trigger em,
.lp-theme-moonlit .lp-envelope-trigger small,
.lp-theme-moonlit .lp-deck-hint { color: rgba(247,242,255,.58); }
.lp-theme-botanical { --lp-paper: #f3f0e5; }
.lp-theme-botanical .lp-hero { background: linear-gradient(135deg, #415644 0 48%, #e4eadf 48%); }
.lp-theme-botanical .lp-hero::after { content: ""; position: absolute; right: -5rem; bottom: -8rem; width: 22rem; height: 30rem; border-radius: 90% 0; border: 4rem solid rgba(85,112,83,.09); transform: rotate(-25deg); }
.lp-theme-botanical .lp-gallery figure { border: .65rem solid #eef1e8; box-shadow: 0 20px 50px rgba(48,76,51,.16); }

@keyframes lp-card-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lp-panel-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
    .lp-market-hero,
    .lp-occasion-hero { grid-template-columns: 1fr; min-height: auto; }
    .lp-market-art,
    .lp-occasion-collage { width: min(100%, 560px); margin: 0 auto; }
    .lp-occasion-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-experience { grid-template-columns: 1fr; }
    .lp-experience-reel { width: min(100%, 650px); margin: 0 auto; }
    .lp-step-track { grid-template-columns: repeat(2, 1fr); }
    .lp-builder-grid { grid-template-columns: 1fr; }
    .lp-live-wrap { position: relative; top: 0; }
    .lp-live-phone { min-height: 540px; }
    .lp-live-photo { height: 300px; }
    .lp-recipient-page .lp-hero { grid-template-columns: 1fr; padding-top: 2rem; background: linear-gradient(180deg, hsl(var(--lp-deep)) 0 50%, hsl(var(--lp-bg)) 50%); }
    .lp-hero-photo,
    .lp-hero-placeholder { width: min(82vw, 500px); margin: 0 auto; }
    .lp-hero-photo img { height: min(55vh, 560px); }
    .lp-hero-copy { margin: 0 auto; text-align: center; }
    .lp-theme-paper-notes .lp-hero { background: linear-gradient(180deg, #755f4c 0 50%, #f8ebce 50%); }
    .lp-theme-moonlit .lp-hero { background: radial-gradient(circle at 50% 22%, rgba(205,193,255,.2), transparent 18rem), linear-gradient(180deg, #070a1d 0 50%, #161b3c 50%); }
    .lp-theme-botanical .lp-hero { background: linear-gradient(180deg, #415644 0 50%, #e4eadf 50%); }
    .lp-manage-preview { grid-template-columns: 1fr; }
    .lp-manage-preview__visual { min-height: 260px; }
}

@media (max-width: 767.98px) {
    .lp-market-copy h1,
    .lp-occasion-hero-copy h1 { font-size: clamp(3rem, 15vw, 4.7rem); }
    .lp-market-art { min-height: 470px; }
    .lp-art-phone { inset: 0 7% 0 9%; }
    .lp-art-note { left: 0; }
    .lp-art-stamp { right: 0; }
    .lp-occasion-grid,
    .lp-other-grid { grid-template-columns: 1fr; }
    .lp-occasion-card { min-height: 260px; }
    .lp-experience-reel { min-height: 390px; }
    .lp-reel-card { width: 62%; padding: 1rem; border-width: 5px; }
    .lp-reel-card strong { font-size: 1.7rem; }
    .lp-occasion-detail { grid-template-columns: 1fr; gap: 2rem; }
    .lp-theme-grid,
    .lp-upload-grid,
    .lp-toggle-grid { grid-template-columns: 1fr; }
    .lp-builder-progress b { display: none; }
    .lp-builder-panel { padding: 1.35rem; }
    .lp-module-head { display: grid; }
    .lp-add { justify-self: start; }
    .lp-recipient-page .lp-hero { min-height: 100svh; gap: 1.3rem; }
    .lp-recipient-page .lp-hero-name { font-size: clamp(3.7rem, 20vw, 6.5rem); }
    .lp-hero-photo { padding: .45rem .45rem 1.8rem; }
    .lp-hero-photo img { height: min(48vh, 460px); }
    .lp-recipient-page .lp-gallery { display: block; }
    .lp-recipient-page .lp-gallery figure { margin-bottom: 1.4rem; }
    .lp-recipient-page .lp-gallery figure:nth-child(3n+2) { transform: rotate(1deg); }
    .lp-library-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .lp-market-hero,
    .lp-occasion-hero { width: calc(100% - 2rem); padding-top: 3.5rem; }
    .lp-market-art { min-height: 420px; }
    .lp-art-phone { border-width: 6px; border-radius: 2.3rem; }
    .lp-art-photo { border-radius: 1.8rem; }
    .lp-art-note { top: 2.5rem; font-size: 1rem; }
    .lp-art-stamp { display: none; }
    .lp-art-strip { right: 0; }
    .lp-art-phone strong { font-size: 2rem; }
    .lp-occasion-collage { min-height: 420px; }
    .lp-collage-letter { right: 0; width: 74%; }
    .lp-step-track { grid-template-columns: 1fr; }
    .lp-step-track article { border-right: 0; border-bottom: 1px solid var(--lp-line); }
    .lp-step-track h3 { margin-top: 1.5rem; }
    .lp-builder-shell { padding-top: 1.5rem; }
    .lp-builder-progress span { font-size: .58rem; }
    .lp-theme-option { grid-template-columns: 4rem 1fr; }
    .lp-step-actions .lp-btn { min-width: 0; flex: 1; }
    .lp-recipient-page .lp-hero { grid-template-rows: auto 1fr; align-content: center; }
    .lp-hero-photo,
    .lp-hero-placeholder { width: min(76vw, 360px); }
    .lp-hero-photo img { height: min(45vh, 390px); }
    .lp-hero-overline { margin-bottom: .65rem; }
    .lp-hero-signature { margin: .8rem 0 1rem; }
    .lp-story-progress b { display: none; }
    .lp-deck { height: 31rem; }
    .lp-deck-card { padding: .8rem; }
    .lp-deck-message { inset: 10.4rem .8rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-occasion-card,
    .is-stepped .lp-builder-panel.is-current { animation: none !important; }
    .lp-theme-option,
    .lp-upload-card,
    .lp-occasion-card,
    .lp-other-grid a,
    .lp-lightbox,
    .lp-lightbox figure,
    .lp-letter-flap,
    .lp-letter-object b,
    .lp-envelope-trigger { transition: none; }
    .lp-hero-photo,
    .lp-hero-photo.lp-anim-rise { animation: none !important; }
}

/* Recipient cascade guard.
   The original recipient prototype lives later in this historic stylesheet
   than some shared components. Element-qualified selectors keep the immersive
   composition authoritative without increasing specificity site-wide. */
body.lp-recipient-page,
body.lp-recipient-page *,
body.lp-recipient-page *::before,
body.lp-recipient-page *::after { box-sizing: border-box; }
body.lp-recipient-page .lp-hero {
    min-height: 100vh; min-height: 100svh;
    padding: clamp(4.5rem, 10vh, 7rem) 1.25rem clamp(6rem, 12vh, 8rem);
    grid-template-columns: 1fr; grid-template-rows: auto;
    place-items: center; gap: 0;
    color: #fff; text-align: center; background: #310712;
}
body.lp-recipient-page .lp-hero-copy {
    width: min(94vw, 850px); max-width: none; margin: 0;
    padding: clamp(2rem, 5vw, 4.2rem); color: #fff; text-align: center;
}
body.lp-recipient-page .lp-hero-name {
    margin: 0; color: #fff;
    font: italic 400 clamp(4.5rem, 14vw, 10rem)/.76 "DM Serif Display", serif;
    letter-spacing: -.055em; text-shadow: 0 16px 55px rgba(0,0,0,.42);
}
body.lp-recipient-page .lp-hero-signature { color: hsl(var(--lp-accent)); }
body.lp-recipient-page .lp-section { min-height: 34rem; padding: clamp(5.5rem, 10vw, 9.5rem) clamp(1.15rem, 4vw, 3rem); }
body.lp-recipient-page .lp-inner { width: min(100%, var(--lp-scene-width)); max-width: none; }
body.lp-recipient-page .lp-section-title {
    margin: .35rem 0 .65rem; color: inherit;
    font: 400 clamp(3rem, 7vw, 6rem)/.9 "DM Serif Display", serif;
    letter-spacing: -.035em;
}
body.lp-recipient-page .lp-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
body.lp-recipient-page .lp-gallery figure { grid-column: auto; margin: 0; padding: .55rem .55rem 2.3rem; border-radius: 0; }
body.lp-recipient-page .lp-gallery img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
body.lp-recipient-page .lp-main-envelope[hidden] { display: none !important; }

body.lp-recipient-page.lp-theme-paper-notes .lp-hero { color: #3e2d21; background: #c9aa7b; }
body.lp-recipient-page.lp-theme-paper-notes .lp-hero-copy { color: #3e2d21; }
body.lp-recipient-page.lp-theme-paper-notes .lp-hero-name { color: #4a3423; text-shadow: none; }
body.lp-recipient-page.lp-theme-paper-notes .lp-hero-copy::before {
    position: absolute; left: 2rem; top: -1rem; margin: 0; padding: .45rem 1rem;
    display: block; color: #4c3b28; background: #f8df78;
    font: 600 1rem/1 Caveat, cursive; transform: rotate(-2deg);
}
body.lp-recipient-page.lp-theme-moonlit .lp-hero { background: #06091d; }
body.lp-recipient-page.lp-theme-botanical .lp-hero { background: #213b2b; }

@media (max-width: 820px) {
    body.lp-recipient-page .lp-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 575.98px) {
    body.lp-recipient-page .lp-hero { min-height: 100svh; padding: 3.8rem .65rem 5rem; grid-template-rows: 1fr; }
    body.lp-recipient-page .lp-hero-copy { width: 100%; margin: 0; padding: 1.8rem .9rem; }
    body.lp-recipient-page .lp-hero-name { font-size: clamp(4.2rem, 22vw, 6.7rem); }
    body.lp-recipient-page .lp-section { min-height: 30rem; padding: 5rem 1rem; }
    body.lp-recipient-page .lp-section-title { font-size: clamp(2.8rem, 15vw, 4.6rem); }
    body.lp-recipient-page .lp-gallery { display: grid; grid-template-columns: 1fr; gap: 2rem; }
    body.lp-recipient-page .lp-gallery figure { width: min(90%, 390px); margin-inline: auto; margin-bottom: 0; }
}

/* ===========================================================================
   FLIPPABLE MEMORY STORIES + PERSISTENT LOVE ATMOSPHERE
   =========================================================================== */

/* Creator story fields -------------------------------------------------- */
.lp-file-strip:has(.lp-selected-memory) { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.lp-selected-memory { min-width: 0; padding: .75rem; display: grid; grid-template-columns: 74px minmax(0,1fr); gap: .25rem .75rem; align-items: start; background: #fff; border: 1px solid var(--lp-line); }
.lp-selected-memory .lp-selected-photo { grid-row: 1 / span 2; }
.lp-selected-memory > label { color: var(--lp-deep-c); font: 800 .63rem/1.3 Manrope, sans-serif; }
.lp-selected-memory > textarea { width: 100%; min-height: 58px; padding: .55rem .65rem; resize: vertical; color: var(--lp-deep-c); background: hsl(var(--lp-primary) / .035); border: 1px solid hsl(var(--lp-primary) / .18); font: 500 .7rem/1.45 Manrope, sans-serif; }
.lp-selected-memory > textarea:focus { outline: 2px solid hsl(var(--lp-primary) / .3); border-color: var(--lp-primary-c); background: #fff; }
.lp-memory-story-form { margin-top: .75rem; padding-top: .75rem; display: grid; gap: .45rem; border-top: 1px solid var(--lp-line); }
.lp-memory-story-form label { color: hsl(var(--lp-deep) / .68); font: 800 .62rem/1.3 Manrope, sans-serif; }
.lp-memory-story-form textarea { width: 100%; padding: .55rem; resize: vertical; border: 1px solid hsl(var(--lp-primary) / .2); color: var(--lp-deep-c); background: hsl(var(--lp-primary) / .035); font: 500 .72rem/1.45 Manrope, sans-serif; }
.lp-memory-story-form .lp-chip { justify-self: start; border: 0; cursor: pointer; }

/* The atmosphere remains deliberately quiet around the interactive card. */
body.lp-recipient-page { --lp-ambient-mark: "♡"; --lp-ambient-ink: hsl(var(--lp-primary)); }
body.lp-recipient-page.lp-theme-paper-notes { --lp-ambient-mark: "love, always"; --lp-ambient-ink: #76563c; }
body.lp-recipient-page.lp-theme-moonlit { --lp-ambient-mark: "✦"; --lp-ambient-ink: #c8bcff; }
body.lp-recipient-page.lp-theme-botanical { --lp-ambient-mark: "❧"; --lp-ambient-ink: #557457; }
body.lp-recipient-page .lp-section { overflow: hidden; overflow: clip; }
body.lp-recipient-page .lp-section > .lp-inner { position: relative; z-index: 1; isolation: isolate; }
body.lp-recipient-page .lp-section > .lp-inner::after { content: var(--lp-ambient-mark); position: absolute; z-index: -1; right: -12vw; top: 42%; color: var(--lp-ambient-ink); opacity: .038; font: italic 400 clamp(8rem, 24vw, 18rem)/1 "DM Serif Display", serif; white-space: nowrap; transform: translateY(-50%) rotate(-9deg); pointer-events: none; animation: lp-ambient-breathe 8s ease-in-out infinite alternate; }
body.lp-recipient-page .lp-section:nth-of-type(even) > .lp-inner::after { left: -13vw; right: auto; transform: translateY(-50%) rotate(8deg); animation-delay: -4s; }
body.lp-recipient-page .lp-particles { z-index: 5; }
body.lp-recipient-page .lp-particles::before,
body.lp-recipient-page .lp-particles::after { content: var(--lp-ambient-mark); position: absolute; color: var(--lp-ambient-ink); opacity: .045; font: italic 400 clamp(9rem, 22vw, 20rem)/1 "DM Serif Display", serif; animation: lp-ambient-breathe 10s ease-in-out infinite alternate; }
body.lp-recipient-page .lp-particles::before { right: -3rem; top: 7vh; transform: rotate(12deg); }
body.lp-recipient-page .lp-particles::after { left: -4rem; bottom: 4vh; transform: rotate(-12deg); animation-delay: -5s; }
body.lp-recipient-page .lp-particle { color: var(--lp-ambient-ink); opacity: .34; filter: drop-shadow(0 5px 9px hsl(var(--lp-primary) / .13)); }
body.lp-recipient-page .lp-particle-1 { opacity: .18; }
body.lp-recipient-page .lp-particle-2 { opacity: .25; }

/* Two-sided memory object ---------------------------------------------- */
body.lp-recipient-page .lp-gallery .lp-memory-card,
body.lp-recipient-page .lp-gallery .lp-memory-card:nth-child(3n+2),
body.lp-recipient-page .lp-gallery .lp-memory-card:nth-child(3n) { position: relative; width: 100%; aspect-ratio: 4/5; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; transform: rotate(-1.7deg); perspective: 620px; perspective-origin: 50% 45%; }
body.lp-recipient-page .lp-gallery .lp-memory-card:nth-child(3n+2) { transform: rotate(1.8deg) translateY(1.1rem); }
body.lp-recipient-page .lp-gallery .lp-memory-card:nth-child(3n) { transform: rotate(-.35deg); }
body.lp-recipient-page .lp-gallery .lp-memory-card::before { z-index: 8; pointer-events: none; transition: transform .65s ease, opacity .35s ease; }
.lp-memory-flipper { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform .78s cubic-bezier(.18,.78,.22,1); }
.lp-memory-face { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lp-memory-front { padding: .58rem .58rem 3.65rem; display: block; overflow: hidden; color: #4d343a; background: #fffdf9; border: 0; box-shadow: 0 26px 50px -28px rgba(57,18,28,.68); cursor: pointer; font-family: Manrope, sans-serif; }
body.lp-recipient-page .lp-memory-front img { width: 100%; height: calc(100% - .1rem); aspect-ratio: auto; display: block; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .65s ease; }
.lp-memory-label { position: absolute; left: .7rem; right: .7rem; bottom: 1.45rem; font: 600 clamp(.86rem, 2vw, 1rem)/1 Caveat, cursive; text-align: center; }
.lp-memory-front > small { position: absolute; right: .85rem; bottom: .38rem; color: rgba(77,52,58,.47); font-size: .47rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lp-memory-front > small b { font-size: 1.25em; }
.lp-memory-front:focus-visible { outline: 3px solid var(--lp-primary-c); outline-offset: 4px; }

.lp-memory-back { padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #5a2030; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.94), rgba(255,246,240,.98)), repeating-radial-gradient(circle at 0 0, transparent 0 11px, rgba(164,64,91,.055) 12px 13px); border: 1px solid rgba(131,40,64,.12); box-shadow: 0 30px 65px -32px rgba(57,18,28,.72); text-align: center; transform: rotateY(180deg); }
.lp-memory-back::before,
.lp-memory-back::after { content: ""; position: absolute; width: 5rem; height: 5rem; border: 1px solid rgba(154,48,78,.12); border-radius: 50%; animation: lp-memory-orbit 6s linear infinite; }
.lp-memory-back::before { left: -2.1rem; top: -1.8rem; }
.lp-memory-back::after { right: -2rem; bottom: -2rem; animation-direction: reverse; }
.lp-memory-heart { width: 3.1rem; height: 3.1rem; margin-bottom: .65rem; display: grid; place-items: center; color: #fff; background: var(--lp-primary-c); border-radius: 50%; box-shadow: 0 0 0 .55rem hsl(var(--lp-primary) / .08); font-style: normal; animation: lp-memory-heartbeat 2.7s ease-in-out infinite; }
.lp-memory-back > small { color: var(--lp-primary-c); font-size: .54rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.lp-memory-back > p { width: 100%; max-height: 53%; margin: .7rem 0 1rem; overflow: auto; color: currentColor; font: 600 clamp(1rem, 2.3vw, 1.3rem)/1.45 Caveat, cursive; scrollbar-width: thin; }
.lp-memory-spark { position: absolute; color: var(--lp-primary-c); font-style: normal; animation: lp-spark-dance 3.4s ease-in-out infinite; }
.lp-memory-spark-one { left: 13%; top: 17%; }
.lp-memory-spark-two { right: 12%; top: 24%; font-size: 1.25rem; animation-delay: -1.7s; }
.lp-memory-back-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; }
body.lp-recipient-page .lp-memory-back .lp-gallery-open,
.lp-memory-return { width: auto; padding: .55rem .65rem; border: 0; border-bottom: 1px solid currentColor; color: var(--lp-primary-c); background: transparent; font: 800 .52rem/1 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
body.lp-recipient-page .lp-memory-back .lp-gallery-open:focus-visible,
.lp-memory-return:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.lp-memory-card.is-flipped .lp-memory-flipper { transform: rotateY(180deg) scale(1.025); }
.lp-memory-card.is-flipped::before { opacity: .65; transform: translateX(-50%) rotate(7deg); }

/* --- depth cues -----------------------------------------------------------
   Rotation alone reads as a squash. Three cheap cues sell it as a solid
   object turning in space:

   1. a sheen that sweeps across the face as it turns away from the light,
   2. a shadow that tightens as the card lifts and spreads as it settles,
   3. a shorter, weighted easing so it accelerates away and lands, rather
      than gliding at constant speed like a 2D tween.                        */

.lp-memory-flipper { transition: transform .72s cubic-bezier(.2,.72,.18,1); }

/* Sheen on the FRONT face only.
   This was on .lp-memory-face, which also matched .lp-memory-back — and the
   back already uses ::before/::after for its two orbiting rings. The shared
   rule overwrote them and killed their animation. The back does not need a
   sheen anyway: it is the face turning toward you, not away. */
.lp-memory-front::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg,
                rgba(255,255,255,0) 30%,
                rgba(255,255,255,.42) 48%,
                rgba(255,255,255,0) 66%);
    transition: opacity .36s ease, transform .72s cubic-bezier(.2,.72,.18,1);
    transform: translateX(-60%);
}

/* Peak sheen as the front turns away from the light. */
.lp-memory-card.is-flipped .lp-memory-front::after { opacity: 1; transform: translateX(60%); }

/* Darken whichever face is turning edge-on, as a real card would lose light. */
.lp-memory-front,
.lp-memory-back { transition: filter .72s cubic-bezier(.2,.72,.18,1); }
.lp-memory-card.is-flipped .lp-memory-front { filter: brightness(.82); }
.lp-memory-card:not(.is-flipped) .lp-memory-back { filter: brightness(.82); }

/* Shadow reacts to the lift. Kept on the card so it does not rotate with the
   faces — a shadow that spins with the object is the giveaway of a fake flip. */
body.lp-recipient-page .lp-gallery .lp-memory-card::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -1.15rem;
    height: 1.5rem;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, rgba(57,18,28,.42), transparent 72%);
    filter: blur(9px);
    transition: transform .72s cubic-bezier(.2,.72,.18,1), opacity .72s ease;
}
body.lp-recipient-page .lp-gallery .lp-memory-card.is-flipped::after { transform: scale(.82); opacity: .72; }

@media (hover: hover) and (pointer: fine) {
    /* Hover is a tilt, not a flip.
       It used to be a full rotateY(180deg). Because that rule and the
       .is-flipped rule have identical specificity and this one comes later,
       hover always won — so clicking to close a pinned card did nothing until
       the pointer left the card. Hover now only leans the card toward the
       viewer, which previews the depth without ever fighting the pinned state. */
    /* translateZ does the work here: with a 620px perspective the card
       genuinely moves toward the viewer, which reads as depth. The earlier
       -9deg tilt alone was so slight that the only thing anyone noticed was
       the image scaling, so hover looked like nothing was happening. */
    .lp-memory-card:not(.is-flipped):hover .lp-memory-flipper { transform: translateZ(26px) rotateY(-15deg) rotateX(6deg); }
    .lp-memory-card:hover::before { opacity: .62; transform: translateX(-50%) rotate(7deg); }
    .lp-memory-card:hover .lp-memory-front img { transform: scale(1.08); filter: saturate(1.08); }
}

/* Theme-specific card backs: each belongs to the world of its page. */
body.lp-recipient-page.lp-theme-paper-notes .lp-memory-back { color: #4c3828; background: repeating-linear-gradient(#fff1c8 0, #fff1c8 1.45rem, #dbcaa2 1.5rem); border-color: rgba(92,66,38,.2); }
body.lp-recipient-page.lp-theme-paper-notes .lp-memory-heart { color: #fff5d9; background: #895b3c; box-shadow: 0 0 0 .55rem rgba(137,91,60,.09); }
body.lp-recipient-page.lp-theme-paper-notes .lp-memory-label,
body.lp-recipient-page.lp-theme-paper-notes .lp-memory-back > p { font-family: Caveat, cursive; }
body.lp-recipient-page.lp-theme-moonlit .lp-memory-back { color: #f3efff; background: radial-gradient(circle at 50% 30%, rgba(111,93,205,.28), transparent 34%), radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.4px) 0 0/34px 34px, #141b43; border-color: rgba(213,202,255,.22); }
body.lp-recipient-page.lp-theme-moonlit .lp-memory-heart { color: #171b42; background: #d4c9ff; box-shadow: 0 0 1.8rem rgba(180,164,255,.45); }
body.lp-recipient-page.lp-theme-moonlit .lp-memory-back > small,
body.lp-recipient-page.lp-theme-moonlit .lp-memory-back .lp-gallery-open,
body.lp-recipient-page.lp-theme-moonlit .lp-memory-return,
body.lp-recipient-page.lp-theme-moonlit .lp-memory-spark { color: #d2c6ff; }
body.lp-recipient-page.lp-theme-botanical .lp-memory-back { color: #314838; background: radial-gradient(ellipse at 0 100%, rgba(93,129,91,.18), transparent 35%), radial-gradient(ellipse at 100% 0, rgba(112,147,103,.16), transparent 32%), #f4f2e7; border-color: rgba(55,86,59,.22); border-radius: 2.2rem .25rem 2.2rem .25rem; }
body.lp-recipient-page.lp-theme-botanical .lp-memory-heart { background: #517054; box-shadow: 0 0 0 .55rem rgba(81,112,84,.09); }

@keyframes lp-ambient-breathe { from { opacity: .025; scale: .96; } to { opacity: .065; scale: 1.04; } }
@keyframes lp-memory-heartbeat { 0%,100% { transform: scale(1); } 12% { transform: scale(1.1); } 24% { transform: scale(1); } 36% { transform: scale(1.06); } }
@keyframes lp-memory-orbit { to { transform: rotate(360deg) scale(1.12); } }
@keyframes lp-spark-dance { 0%,100% { opacity: .35; transform: translateY(0) rotate(0); } 50% { opacity: .9; transform: translateY(-.45rem) rotate(20deg); } }

@media (max-width: 767.98px) {
    .lp-file-strip:has(.lp-selected-memory) { grid-template-columns: 1fr; }
    body.lp-recipient-page .lp-gallery .lp-memory-card { width: min(92%, 390px); margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    body.lp-recipient-page .lp-section > .lp-inner::after,
    body.lp-recipient-page .lp-particles::before,
    body.lp-recipient-page .lp-particles::after,
    .lp-memory-heart,
    .lp-memory-back::before,
    .lp-memory-back::after,
    .lp-memory-spark { animation: none !important; }
    /* Reduced motion gets a cross-fade, not a dead snap.
       Killing the transition outright made the card change state with no
       feedback at all, which reads as a broken control rather than a
       considered one. Rotation is what can trigger vestibular discomfort, so
       the rotation goes and the two faces simply fade past each other — the
       WCAG-recommended substitution for a spatial transition. */
    .lp-memory-flipper,
    .lp-memory-front::after,
    body.lp-recipient-page .lp-gallery .lp-memory-card::after,
    .lp-memory-front img { transition: none !important; transform: none !important; }

    .lp-memory-face {
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        transform: none !important;
        transition: opacity .28s ease !important;
    }

    .lp-memory-front { opacity: 1; }
    .lp-memory-back  { opacity: 0; }
    .lp-memory-card.is-flipped .lp-memory-front { opacity: 0; pointer-events: none; }
    .lp-memory-card.is-flipped .lp-memory-back  { opacity: 1; }

    /* Full brightness and no sweeping highlight when motion is off. */
    .lp-memory-card.is-flipped .lp-memory-front,
    .lp-memory-card:not(.is-flipped) .lp-memory-back { filter: none; }
    .lp-memory-front::after { opacity: 0 !important; }
}

/* Version marker: memory-card flip and ambient-love pass. */