/* ============================================
   ABOUT PAGE — extends css/style.css
   Splatter / brushstroke aesthetic
   Now contains only hero + story sections; the
   craft and process sections moved to services.css
   ============================================ */

/* ============================================
   DECORATIVE SPLATTERS (behind content)
   ============================================ */
.splat {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}
.splat-hero-tr {
    background-image: url('../images/splat-big.png');
    width: 600px;
    height: 600px;
    top: -60px;
    right: -100px;
    opacity: 0.6;
    transform: rotate(15deg);
}
.splat-story-bl {
    background-image: url('../images/splat-big.png');
    width: 520px;
    height: 520px;
    bottom: 20px;
    left: -80px;
    opacity: 0.55;
    transform: rotate(-25deg);
}

/* ============================================
   HERO PHOTO (composited image — frame baked in)
   The PNG already contains both the photo and the painted
   frame around it, so we just display it as one image.
   The image's actual size comes from its column (handled by
   the grid below); we just let it fill that column.
   ============================================ */
.about-hero-photo {
    position: relative;
    width: 100%;
    z-index: 2;
    transform: rotate(3deg);
    /* Push image slightly past column bounds so the painted splatter
       borders can spill out — gives it more visual presence without
       cropping. */
    margin: -20px;
    width: calc(100% + 40px);
}
.about-hero-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================
   FRAMED PHOTO COMPONENT (still used by story section)
   ============================================ */
.framed-photo {
    position: relative;
    width: 100%;
    display: block;
    z-index: 2;
}
.framed-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SPLAT-BG variant (for paints photo, story section)
   No frame — the photo sits naturally on top of a big splatter
   peeking out from corners. The photo gets a subtle pink shadow. */
.framed-photo--splat {
    aspect-ratio: 4 / 3;
    max-width: 520px;
}
.framed-photo--splat img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 12px 24px rgba(236, 27, 141, 0.3));
}
.framed-photo--splat::before {
    content: '';
    position: absolute;
    /* Larger inset values push the splat further past the photo bounds,
       making it appear more dramatically behind/around the image. */
    inset: -35% -30%;
    background-image: url('../images/splat-big.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    opacity: 0.85;
    pointer-events: none;
}

/* Tilt for the story section paint photo */
.framed-photo--tilt-left  { transform: rotate(-2deg); }

/* ============================================
   ABOUT HERO
   ============================================ */
.about-hero {
    position: relative;
    background: var(--bg);
    padding: 130px 40px 80px;
    overflow: hidden;
}
.about-hero-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    /* Photo column gets more weight than the text column so the
       portrait reads larger. Text remains plenty wide for the lede
       and callout to breathe. */
    grid-template-columns: 5fr 6fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.about-hero-text { position: relative; z-index: 2; }
.about-hero-text .eyebrow {
    color: var(--pink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.about-hero-text h1 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 56px;
    line-height: 1;
    color: #fff;
    margin-bottom: 22px;
}
.about-hero-text h1 .script {
    display: inline-block;
    font-family: var(--script);
    color: var(--pink);
    font-size: 100px;
    font-weight: 700;
    line-height: 1;
    margin-left: 6px;
}
.about-hero-text .lede {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.65;
    max-width: 480px;
    margin-bottom: 14px;
}
.script-callout {
    display: block;
    font-family: var(--script);
    color: var(--pink);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 8px;
}
.script-callout em { font-style: italic; }

/* Brushstroke underline beneath script words */
.script.underlined {
    position: relative;
    padding-bottom: 0;
}
.script.underlined::after {
    content: '';
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -2px;
    height: 22px;
    background-image: url('../images/brush-underline.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* ============================================
   SECTION SHARED
   ============================================ */
.about-section {
    position: relative;
    background: var(--bg);
    padding: 80px 40px;
    overflow: hidden;
}
.about-section-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.about-section-inner.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.section-h {
    font-family: var(--display);
    font-weight: 400;
    font-size: 46px;
    line-height: 1;
    color: #fff;
    margin-bottom: 28px;
}
.section-h .script {
    font-family: var(--script);
    color: var(--pink);
    font-size: 72px;
    font-weight: 700;
    margin-left: 6px;
}

/* ===== STORY ===== */
.about-story .col-text {
    position: relative;
    z-index: 2;
}
/* Soft dark backdrop behind the text — sits between the splat (z:0)
   and the text (z:2) so the splat stays visible at the edges but the
   words have enough contrast to read. Padding pushes the backdrop
   slightly past the text bounds for a feathered "patch" effect rather
   than a hard box. */
.about-story .col-text::before {
    content: '';
    position: absolute;
    inset: -24px -28px;
    background: radial-gradient(
            ellipse at center,
            rgba(10, 10, 14, 0.78) 0%,
            rgba(10, 10, 14, 0.65) 55%,
            rgba(10, 10, 14, 0) 100%
    );
    z-index: -1;
    pointer-events: none;
    border-radius: 8px;
}
.about-story .col-text p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 14px;
}
.about-story .col-text p em {
    color: var(--pink);
    font-style: italic;
    font-family: var(--script);
    font-size: 19px;
    font-weight: 600;
    margin: 0 6px; /* breathing room around the script font's swashes */
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    .about-hero {
        padding: 110px 20px 60px;
    }
    .about-hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .about-hero-text { order: 2; }
    .about-hero-text h1 { font-size: 40px; }
    .about-hero-text h1 .script { font-size: 70px; }
    .about-hero-text .lede { font-size: 15px; }
    .script-callout { font-size: 26px; }

    /* Photo: drop the negative-margin bump on mobile and reset width
       so it doesn't overflow the narrow viewport. */
    .about-hero-photo {
        margin: 0;
        width: 100%;
    }

    .about-section { padding: 50px 20px; }
    .about-section-inner.two-col {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .about-story .col-image { order: -1; }

    .section-h { font-size: 34px; }
    .section-h .script { font-size: 52px; }

    /* Splatters: scale down + lower opacity on mobile */
    .splat-hero-tr { width: 360px; height: 360px; top: -30px; right: -80px; opacity: 0.4; }
    .splat-story-bl { width: 320px; height: 320px; bottom: 20px; left: -60px; opacity: 0.35; }

    /* Splat is smaller on mobile, so the readability backdrop can be lighter */
    .about-story .col-text::before {
        inset: -16px -18px;
        background: radial-gradient(
                ellipse at center,
                rgba(10, 10, 14, 0.55) 0%,
                rgba(10, 10, 14, 0) 100%
        );
    }

    /* Photos: less tilt on mobile - reads cleaner */
    .about-hero-photo,
    .framed-photo--tilt-left {
        transform: rotate(0deg);
    }
}

@media (max-width: 480px) {
    .about-hero-text h1 { font-size: 34px; }
    .about-hero-text h1 .script { font-size: 60px; }
    .section-h { font-size: 28px; }
    .section-h .script { font-size: 42px; }
}