/* =====================================================================
   "How we met" — captioned instant prints
   Each chapter is a cream instant-print mount with a strip of lavender
   tape; the photo "develops" as it scrolls in and the story is written in
   the deep bottom margin. Reveal classes are added by js/story-prints.js.
   ===================================================================== */

/* ---- header: subtitle + EN/FR switch ---- */
#intro .story-sub {
    font-family: var(--v2-serif); font-style: italic; font-size: 20px;
    color: rgba(225, 215, 235, .8); margin: 8px 0 0; letter-spacing: .01em;
}
.story-langs { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 18px 0 0; }
.story-lang {
    padding: 8px 18px 9px; border-radius: 999px; border: 1px solid transparent; opacity: .5;
    font-family: var(--v2-script); font-size: 25px; line-height: 1; color: #efe6f7;
    text-decoration: none !important; transition: opacity .3s ease, border-color .3s ease, background .3s ease;
}
.story-lang:hover, .story-lang:focus-visible { opacity: .9; color: #efe6f7; }
.story-lang.is-current { opacity: 1; border-color: var(--v2-rule); background: rgba(203, 183, 223, .06); }
.story-langs .sl-dot { color: var(--v2-lav-dim); }

/* ---- the prints ---- */
.sp-list { max-width: 1100px; margin: 0 auto; padding: 30px 24px 0; }
.sp-ch { display: flex; padding: 56px 0; }
.sp-ch:nth-child(odd)  { justify-content: flex-start; padding-left: 4%; }
.sp-ch:nth-child(even) { justify-content: flex-end;   padding-right: 4%; }
.sp-ch:nth-child(3n)   { justify-content: center; padding-left: 0; padding-right: 0; }

.sp-print {
    --tilt: -1.6deg;
    position: relative; width: min(680px, 100%); margin: 0;
    background: #f3ece0; padding: 22px 22px 0; border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 34px 70px -24px rgba(0, 0, 0, .75), 0 8px 18px rgba(0, 0, 0, .38);
    transform: rotate(var(--tilt)) translateY(46px); opacity: 0;
    transition: transform 1.5s cubic-bezier(.22, 1, .36, 1), opacity 1s ease;
}
.sp-ch:nth-child(even) .sp-print { --tilt: 1.3deg; }
.sp-ch:nth-child(3n)   .sp-print { --tilt: -.6deg; }
.sp-ch.sp-in .sp-print { opacity: 1; transform: rotate(var(--tilt)); }

/* lavender washi tape */
.sp-print::before {
    content: ''; position: absolute; top: -14px; left: 50%; width: 130px; height: 30px; z-index: 1;
    transform: translateX(-50%) rotate(-3deg); background: rgba(203, 183, 223, .55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0);
            mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0);
}
.sp-ch:nth-child(even) .sp-print::before { transform: translateX(-50%) rotate(2.5deg); }

/* photo — medium-format 7:6, "develops" from washed-out to full colour */
.sp-photo { aspect-ratio: 7 / 6; overflow: hidden; background: #222; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.sp-photo img {
    display: block; width: 100%; height: 100%; object-fit: cover; max-width: none;
    filter: sepia(.7) brightness(1.6) contrast(.6) blur(3px);
    transition: filter 2.6s ease .25s;
}
.sp-ch.sp-in .sp-photo img { filter: none; }

/* the words, in the deep bottom margin */
.sp-cap { padding: 30px 34px 40px; text-align: center; }
#intro .sp-cap .story-text {
    margin: 0 auto; max-width: 34em; padding: 0; background: none; border: 0;
    font-family: var(--v2-serif); font-size: 22px; line-height: 1.5; font-weight: 500;
    color: #33284a; text-shadow: none;
    opacity: 0; transform: translateY(10px);
    transition: opacity .9s ease 1s, transform 1s cubic-bezier(.22, 1, .36, 1) 1s;
}
#intro .sp-ch.sp-in .sp-cap .story-text { opacity: 1; transform: none; }
#intro .sp-cap .story-poem { font-size: .92em; line-height: 1.6; }

/* sign-off */
.sp-sign { text-align: center; padding: 50px 16px 70px; }
.sp-sign .sp-sign-pre { font-family: var(--v2-serif); font-style: italic; font-size: 18px; color: var(--v2-lav-dim); }
.sp-sign .sp-sign-names { font-family: var(--v2-script); font-size: 46px; line-height: 1.2; color: var(--v2-lav); margin-top: 4px; }

/* ---- desktop: photo | vertical rule | story, alternating sides ----
   Odd chapters put the photo on the left, even ones on the right. The cream mount moves from the whole figure onto the photo (as a spread
   box-shadow, so no layout change), the caption sits in the right column on
   the dark page opposite the photo, and a single line runs down the middle of the list. */
@media (min-width: 801px) {
    .sp-list { --sp-gap: 140px; position: relative; padding-top: 50px; padding-bottom: 20px; }
    .sp-list::before {
        content: ''; position: absolute; top: 40px; bottom: 0; left: 50%; width: 1px;
        background: linear-gradient(to bottom, transparent, var(--v2-rule, rgba(203, 183, 223, .35)) 60px,
                    var(--v2-rule, rgba(203, 183, 223, .35)) calc(100% - 60px), transparent);
    }
    .sp-ch, .sp-ch:nth-child(n) { display: block; position: relative; padding: 52px 0; }
    /* a small marker on the line for each chapter */
    .sp-ch::after {
        content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px;
        border-radius: 50%; transform: translate(-50%, -50%);
        background: #1a1426; border: 1px solid var(--v2-lav, #cbb7df);
    }

    .sp-ch:nth-child(n) .sp-print { --tilt: 0deg; }
    .sp-print {
        display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-gap); align-items: center;
        width: 100%; padding: 0; background: none; box-shadow: none; border-radius: 0;
        transform: translateY(46px);
    }
    .sp-ch.sp-in .sp-print { transform: none; }

    .sp-photo {
        --ptilt: -1.6deg;
        margin: 18px;
        transform: rotate(var(--ptilt));
        box-shadow: 0 0 0 18px #f3ece0, 0 0 0 19px rgba(0, 0, 0, .06),
                    0 34px 70px -18px rgba(0, 0, 0, .75), 0 8px 22px 10px rgba(0, 0, 0, .3);
    }
    .sp-ch:nth-child(even) .sp-photo { --ptilt: 1.3deg; }
    .sp-ch:nth-child(3n)   .sp-photo { --ptilt: -.6deg; }

    /* tape centred over the photo column */
    .sp-print::before,
    .sp-ch:nth-child(even) .sp-print::before {
        top: 0; left: calc((100% - var(--sp-gap)) / 4);
        transform: translateX(-50%) rotate(var(--tape, -3deg));
    }
    .sp-ch:nth-child(even) .sp-print::before { --tape: 2.5deg; }

    /* even chapters: photo on the right, story on the left */
    .sp-ch:nth-child(even) .sp-photo { grid-column: 2; grid-row: 1; }
    .sp-ch:nth-child(even) .sp-cap   { grid-column: 1; grid-row: 1; }
    .sp-ch:nth-child(even) .sp-print::before { left: calc(75% + var(--sp-gap) / 4); }

    .sp-cap { padding: 0; }
    #intro .sp-cap .story-text {
        margin: 0 auto; max-width: 24em;
        font-size: 24px; line-height: 1.55; color: #ece4f4;
    }
}

/* ---- phones ---- */
@media (max-width: 800px) {
    .sp-list { padding: 10px 14px 0; }
    .sp-ch, .sp-ch:nth-child(n) { justify-content: center; padding: 30px 0; }
    .sp-print { padding: 12px 12px 0; }
    .sp-print::before { width: 96px; height: 24px; top: -11px; }
    .sp-cap { padding: 18px 12px 20px; }
    #intro .sp-cap .story-text { font-size: 19px; }
    .story-lang { font-size: 21px; padding: 7px 12px 8px; }
    .story-langs { gap: 6px; }
    #intro .story-sub { font-size: 18px; }
}
/* Panels 7 & 9 are portrait photos; every print keeps the same 7:6 size,
   so crop to the faces / zoom in on us. */
.sp-print--phone img { object-position: center 18%; }
.sp-print--zoom img  { object-position: 50% 10%; transform: scale(1.32); transform-origin: 47% 38%; }

/* no JS: show everything */
html.no-js .sp-print, html.no-js #intro .sp-cap .story-text { opacity: 1; transform: rotate(var(--tilt, 0)); }
html.no-js .sp-photo img { filter: none; }

@media (prefers-reduced-motion: reduce) {
    .sp-print, #intro .sp-cap .story-text, .sp-photo img { transition: none !important; }
    .sp-print { opacity: 1; transform: rotate(var(--tilt)); }
    #intro .sp-cap .story-text { opacity: 1; transform: none; }
    .sp-photo img { filter: none; }
}