/* Homepage botanical compositions. Original typography and palette come from main.css. */
.home-page {
    --landing-ink: .09;
    --landing-ink-dark: .055;
}

.home-page .home-intro,
.home-page .home-work,
.home-page .home-services,
.home-page .home-about,
.home-page .home-journal {
    position: relative;
    isolation: isolate;
    /* Clip artwork without creating a scrollable section around in-page anchors. */
    overflow: clip;
}

.home-page .home-intro>.container,
.home-page .home-work>.container,
.home-page .home-services>.container,
.home-page .home-about>.container,
.home-page .home-journal>.container {
    position: relative;
    z-index: 2;
}

.landing-pattern {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    transform: rotate(var(--pattern-rotation,0deg));
}

.landing-shape {
    position: absolute;
    inset: 0;
    background: var(--pattern-color,var(--medium-green));
    -webkit-mask: var(--pattern-image) center/contain no-repeat;
    mask: var(--pattern-image) center/contain no-repeat;
}

.landing-ink::before,.landing-ink::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.landing-ink::before {
    background: var(--cream);
    -webkit-mask: url('/images/texture1.png') center/420px 420px repeat;
    mask: url('/images/texture1.png') center/420px 420px repeat;
    opacity: var(--landing-ink);
}

.landing-ink::after {
    background: var(--dark-green);
    -webkit-mask: url('/images/texture1.png') 120px 75px/310px 310px repeat;
    mask: url('/images/texture1.png') 120px 75px/310px 310px repeat;
    opacity: var(--landing-ink-dark);
}

.landing-cluster {
    aspect-ratio: 4/5;
}

.landing-blob {
    --pattern-image: url('/images/botanical/monstera-blob.svg');
    --pattern-color: var(--orange);
}

.landing-drawing {
    --pattern-image: url('/images/botanical/monstera-linework.svg');
    --pattern-color: var(--dark-green);
}

.cluster-olive .landing-blob {
    --pattern-color: var(--light-green);
}

.landing-fern {
    aspect-ratio: 5/8;
    --pattern-image: url('/images/botanical/fern-cutout.svg');
    --pattern-color: var(--orange);
}

.landing-banana {
    aspect-ratio: 5/6;
    --pattern-image: url('/images/bananaleaf.svg');
}

.landing-banana img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.landing-banana-grain {
    background: transparent;
}

.landing-banana-grain::before {
    opacity: calc(var(--landing-ink) * .4);
}

.landing-banana-grain::after {
    opacity: calc(var(--landing-ink-dark) * .4);
}

.landing-outline {
    aspect-ratio: 5/6;
    --pattern-image: url('/images/leafoutline.svg');
    --pattern-color: var(--medium-green);
}

.landing-cutpaper {
    aspect-ratio: 4/5;
    --pattern-image: url('/images/botanical/monstera-blob.svg');
    --pattern-color: var(--orange);
}

.landing-print-accent {
    aspect-ratio: 1;
}

.landing-print-accent svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* The intro is one arrangement: a cream leaf grows out of the lower orange lobe. */
.pattern-intro-spray {
    width: clamp(285px,30vw,420px);
    aspect-ratio: 4/5;
    left: -4.8rem;
    bottom: -6.5rem;
    --pattern-rotation: -14deg;
}

.pattern-intro-cluster {
    width: 100%;
    inset: 0;
    transform: none;
    z-index: auto;
}

.pattern-intro-cluster .landing-drawing {
    z-index: 2;
}

.pattern-intro-outline {
    width: 36%;
    left: 70%;
    top: 50%;
    transform-origin: 8% 100%;
    --pattern-rotation: -30deg;
    --pattern-color: var(--cream);
    z-index: 1;
}

/* Work: unequal leaves fan from neighboring stems, with a small gap at their base. */
.pattern-work-spray {
    width: clamp(310px,31vw,470px);
    aspect-ratio: 1;
    right: -4rem;
    top: -3.5rem;
}

.pattern-work-banana {
    width: 82%;
    left: -1%;
    top: -18.4%;
    transform-origin: 8% 100%;
    --pattern-rotation: 32deg;
}

.pattern-work-outline {
    width: 50%;
    left: calc(17% - .35rem);
    top: 28%;
    transform-origin: 8% 100%;
    --pattern-rotation: -26deg;
    --pattern-color: var(--orange);
}

.home-page .home-work .work-info {
    background: var(--light-cream);
}

/* Services: the fullest expression, around the existing two-column content. */
.pattern-services-left {
    width: clamp(330px,33vw,525px);
    left: -11rem;
    top: -7.5rem;
    --pattern-rotation: -20deg;
}

.pattern-services-right {
    width: clamp(450px,40vw,650px);
    right: -14rem;
    bottom: -12rem;
    --pattern-rotation: 25deg;
}

.home-page .home-services-grid {
    width: 100%;
    max-width: 1200px;
    padding: clamp(2rem,4.2vw,4.5rem);
    gap: clamp(2rem,4.5vw,5rem);
    background: var(--cream);
    color: var(--dark-green);
}

.home-page .home-services-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/texture2.png') center/512px 512px repeat;
    mix-blend-mode: multiply;
    opacity: .2;
    pointer-events: none;
    z-index: -1;
}

.home-page .home-services .section-label {
    color: var(--medium-green);
    border-top-color: var(--medium-green);
}

.home-page .home-services-intro>p:not(.section-label) {
    color: var(--medium-green);
}

.home-page .home-services .arrow-link {
    color: var(--dark-green);
}

.home-page .home-service-list {
    border-top-color: var(--medium-green);
}

.home-page .home-service-list li {
    border-bottom-color: var(--medium-green);
}

.home-page .home-service-list p {
    color: var(--medium-green);
}

/* About: the existing portrait and stamp sit above the cut-paper layers. */
.pattern-about-blob {
    width: 120%;
    left: -45%;
    bottom: -12%;
    --pattern-rotation: -27deg;
}

.pattern-about-fern {
    width: 64%;
    left: -33%;
    top: -18%;
    --pattern-rotation: -23deg;
    --pattern-color: var(--medium-green);
}

.pattern-about-outline {
    width: 45%;
    left: 0;
    bottom: 7%;
    transform-origin: 8% 100%;
    --pattern-rotation: -74deg;
    --pattern-color: var(--cream);
    z-index: 0;
}

/* Journal: a small print accent above the rows and a cropped fern below. */
.pattern-journal-accent {
    width: clamp(135px,15vw,215px);
    right: 6%;
    top: 1rem;
    --pattern-rotation: -12deg;
}

.pattern-journal-fern {
    width: clamp(270px,25vw,400px);
    left: -8rem;
    bottom: -16rem;
    --pattern-rotation: 0deg;
    --pattern-color: var(--medium-green);
}

.home-page .home-journal .journal-list {
    background: var(--light-cream);
}

@media(min-width:1450px) {
    .pattern-intro-spray {
        left: max(-3rem,calc((100% - 1440px)/2));
    }
    .pattern-work-spray {
        right: max(-4rem,calc((100% - 1700px)/2));
    }
}

@media(max-width:900px) {
    .pattern-intro-spray {
        width: 270px;
        left: -11rem;
        bottom: -7rem;
        --pattern-rotation: -22deg;
    }
    .home-page .home-intro-copy {
        background: var(--cream);
    }
    .pattern-work-spray {
        width: 290px;
        right: -6rem;
        top: -7rem;
    }
    .pattern-services-left {
        width: 350px;
        left: -12rem;
        top: -10rem;
    }
    .pattern-services-right {
        width: 400px;
        right: -14rem;
        bottom: -13rem;
    }
    .home-page .home-services {
        padding: 7rem 6% 8rem;
    }
    .home-page .home-services-grid {
        padding: clamp(1.5rem,4.4vw,2.5rem);
    }
    .home-page .home-about-copy {
        background: var(--cream);
    }
    .pattern-journal-accent {
        width: 145px;
        right: 4%;
        top: -1.5rem;
    }
    .pattern-journal-fern {
        width: 270px;
        left: -8rem;
        bottom: -14rem;
    }
}

@media(max-width:560px) {
    .pattern-intro-spray {
        width: 240px;
        left: -8rem;
        bottom: -7rem;
    }
    .home-page .home-intro {
        padding-bottom: 11.5rem;
    }
    .pattern-work-spray {
        width: 235px;
        right: -6.5rem;
        top: -10rem;
    }
    .pattern-services-left {
        width: 300px;
        left: -10rem;
        top: -11rem;
    }
    .pattern-services-right {
        width: 330px;
        right: -12rem;
        bottom: -12rem;
    }
    .home-page .home-services {
        padding: 5rem 1rem 6rem;
    }
    .home-page .home-services-grid {
        padding: 2rem 1.3rem;
        gap: 2.5rem;
    }
    .home-page .home-services-intro h2 {
        font-size: clamp(2.65rem,12.5vw,4.5rem);
    }
    .home-page .home-service-list li {
        grid-template-columns: 1.2rem minmax(0,1fr) 1.2rem;
        gap: .7rem;
    }
    .pattern-journal-accent {
        width: 120px;
        right: 3%;
        top: -1.4rem;
    }
    .pattern-journal-fern {
        width: 220px;
        left: -7rem;
        bottom: -12rem;
    }
}