/* Shared About portrait and reading-page watermark. Existing site.css remains intact. */
.about-story-intro {
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.about-story-intro--portrait {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(180px, 20vw, 240px);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.about-story-intro--portrait .about-story-heading {
    max-width: none;
    margin: 0;
    text-align: left;
}

.about-story-intro--portrait .about-story-heading p {
    max-width: 32ch;
}

.about-profile-photo {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.about-profile-photo::before {
    content: "";
    position: absolute;
    inset: 12% -9% -2% -9%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--accent, #00d9c0) 12%, transparent), transparent 70%);
    pointer-events: none;
}

.about-profile-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 28%;
    border: 0;
    border-radius: 48% 48% 42% 42% / 40% 40% 30% 30%;
    box-shadow: 0 18px 38px -26px rgb(17 24 39 / 30%);
}

.post-reading-surface {
    position: relative;
    isolation: isolate;
    display: flow-root;
    width: min(780px, calc(100% - 2.5rem));
    margin-inline: auto;
}

.post-reading-surface > .post-body {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding-block: clamp(2rem, 5vw, 4rem);
    background: transparent;
}

.post-watermark {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
    user-select: none;
}

.post-watermark img {
    position: sticky;
    top: 6rem;
    display: block;
    width: min(90%, 680px);
    height: min(66vh, 620px);
    max-height: 100%;
    margin-inline: auto;
    object-fit: contain;
    opacity: .085;
    filter: grayscale(1) brightness(1.4) contrast(.85);
    -webkit-mask-image: radial-gradient(ellipse, #000 32%, transparent 74%);
    mask-image: radial-gradient(ellipse, #000 32%, transparent 74%);
}

@media (max-width: 600px) {
    .about-story-intro--portrait {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .about-profile-photo {
        grid-row: 1;
        width: 156px;
        margin-inline: auto;
    }

    .about-story-intro--portrait .about-story-heading {
        text-align: center;
    }

    .about-story-intro--portrait .about-story-heading p {
        margin-inline: auto;
    }

    .post-reading-surface {
        width: calc(100% - 2rem);
    }

    .post-watermark img {
        top: 5rem;
        width: 100%;
        height: min(60vh, 420px);
        opacity: .07;
    }
}

@media (forced-colors: active) {
    .post-watermark {
        display: none;
    }
}

@media print {
    .post-watermark img {
        position: fixed;
        top: 20%;
        left: 50%;
        width: 70%;
        height: 60%;
        margin: 0;
        transform: translateX(-50%);
        opacity: .055;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}