/* Homepage ("story") content: hero and polaroid chapters.
   Chrome (nav, sheet, footer, fonts, tokens) lives in site.css. */

.story img { max-width: 100%; display: block; }
.story h1 { text-wrap: balance; margin: 0; }
.story p, .story ul, .story ol { margin: 0 0 1em; max-width: 62ch; }
.story ul { padding-left: 2ch; list-style: square; }

/* ---------- hero + chapters ---------- */
.story .hello {
    font-size: 2.6rem;
    letter-spacing: -.01em;
    line-height: 1.1;
    margin-bottom: 16px;
    font-weight: 700;
}
.story .hero {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 72px;
}
@media (min-width: 761px) {
    /* hero text sits near the top of the photo instead of centred on it */
    .story .hero > div:last-child { padding-top: 40px; }
    /* pull the first chapter up into the space beside the hero photo */
    .story .hero + .chap { margin-top: -70px; }
}
.story .txt h1, .story .txt h2 {
    font-size: 2rem;
    letter-spacing: -.01em;
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 36px;
}
.story .hero > div > :last-child, .story .txt > :last-child { margin-bottom: 0; }
.story .chap {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: center;
    margin-bottom: 56px;
}
.story .chap:last-child { margin-bottom: 0; }
.story .chap.photo-left { grid-template-columns: 300px 1fr; }
.story .chap.photo-left .txt { order: 2; }
.story .chap-text { grid-template-columns: 1fr; }
.story .chap-text p, .story .chap-text ul { max-width: none; }
/* per-photo vertical nudge, set in index.org with #+attr_html: :shift -140px */
.story .chap .polaroid { margin-top: calc(14px + var(--shift, 0px)); position: relative; z-index: 1; }

/* ---------- polaroid ---------- */
.story .polaroid {
    background: #fff;
    padding: 12px 12px 14px;
    box-shadow: 0 14px 30px -14px rgba(40, 20, 80, .6), 0 0 0 1px rgba(29, 21, 53, .08);
    position: relative;
    transform: rotate(var(--r, -2deg));
    margin: 14px auto 0;
    max-width: 300px;
    width: 100%;
    transition: transform .25s;
}
.story .polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.story .polaroid::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    width: 96px;
    height: 26px;
    transform: translateX(-50%) rotate(-4deg);
    background: rgba(196, 167, 231, .55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.story .polaroid .cap {
    display: block;
    font-family: var(--hand);
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--plum);
    text-align: center;
    padding-top: 14px;
    min-height: 2.4rem;
}
.story .r0 { --r: -2.5deg; }
.story .r1 { --r: 2deg; }
.story .r2 { --r: -1deg; }
.story .polaroid:hover { transform: rotate(0) scale(1.02); }

/* placeholder for photos not yet in images/story/ */
.story .ph {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    background: repeating-linear-gradient(45deg, #e3dbf1 0 10px, #ece6f6 10px 20px);
    border: 1px dashed #b8a7d8;
}
.story .ph span { background: rgba(255, 255, 255, .75); padding: 6px 10px; }

@media (max-width: 760px) {
    /* tap the number to open the note under the line */
    .story .sidenote { display: none; float: none; width: auto; margin: 8px 0; }
    .story .sn-toggle:checked + .sidenote { display: block; }
    .story .hero, .story .chap, .story .chap.photo-left { grid-template-columns: 1fr; }
    .story .chap.photo-left .txt { order: 0; }
    .story .polaroid, .story .chap .polaroid { margin: 24px auto; }
}
@media (prefers-reduced-motion: reduce) {
    .story * { transition: none !important; }
}