:root {
    --cream: #FFF9EE;
    --text-main: #302E27;
    --text-soft: #5F5A4D;
    --text-light: #797164;
    --accent-brown: #A16443;
    --accent-deep: #704A34;
    --sprout-deep: #50743D;
    --sprout-light: #91AE63;
    --line-color: #DED2B9;
    --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23noise)' opacity='.32'/%3E%3C/svg%3E");
    --brush-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='12' viewBox='0 0 220 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C34 4 66 9 101 6 C137 3 174 8 217 5' fill='none' stroke='%238B6F47' stroke-width='1.25' stroke-linecap='round' opacity='.72'/%3E%3Cpath d='M18 9 C63 7 110 10 198 7' fill='none' stroke='%23A88560' stroke-width='.55' stroke-linecap='round' opacity='.42'/%3E%3C/svg%3E");
    --paint-earth: rgba(201, 153, 84, 0.16);
    --paint-green: rgba(122, 166, 77, 0.15);
    --paint-coral: rgba(232, 116, 86, 0.13);
    --paint-blue: rgba(86, 167, 190, 0.13);
    --paint-yellow: rgba(238, 191, 57, 0.16);
}

body {
    isolation: isolate;
}

body::before {
    background: radial-gradient(ellipse 46% 36% at 7% 15%, rgba(245, 194, 72, 0.13), transparent 70%),
    radial-gradient(ellipse 42% 34% at 93% 69%, rgba(112, 170, 78, 0.11), transparent 72%),
    radial-gradient(ellipse 32% 27% at 60% 40%, rgba(235, 119, 88, 0.075), transparent 74%),
    radial-gradient(ellipse 30% 24% at 16% 86%, rgba(87, 169, 194, 0.075), transparent 72%);
    filter: blur(14px);
    opacity: 0.94;
}

body::after {
    background-image: var(--paper-grain);
    background-size: 180px 180px;
    opacity: 0.052;
    mix-blend-mode: multiply;
}

nav {
    background: linear-gradient(to bottom, rgba(255, 249, 238, 0.94) 60%, rgba(255, 249, 238, 0));
}

nav.scrolled {
    box-shadow: 0 5px 24px rgba(112, 74, 52, 0.065);
}

::selection {
    color: var(--text-main);
    background: rgba(238, 191, 57, 0.34);
}

.hero-title,
.section-title {
    text-shadow: 0.018em 0.014em 0 rgba(112, 74, 52, 0.12);
}

.hero-title {
    font-weight: 400;
    letter-spacing: 0.055em;
}

.hero-em {
    color: #68442F;
}

.hero-em::before {
    background: rgba(244, 192, 54, 0.62);
    box-shadow: 0.09em 0.1em 0 rgba(232, 116, 86, 0.12);
}

.latin-em:not(.hero-em)::before {
    background: rgba(145, 183, 91, 0.3);
}

.section-title {
    display: inline-block;
    position: relative;
    font-weight: 500;
    letter-spacing: 0.045em;
}

.section-title::after {
    content: '';
    position: absolute;
    left: -5%;
    right: -7%;
    bottom: -0.2em;
    height: 9px;
    background: var(--section-ink, #E87456);
    -webkit-mask: var(--brush-line) center / 100% 100% no-repeat;
    mask: var(--brush-line) center / 100% 100% no-repeat;
    opacity: 0.72;
    pointer-events: none;
    transform: rotate(-0.45deg);
}

.intention {
    --section-ink: #73A34C;
}

.practice {
    --section-ink: #55A6BE;
}

.principle {
    --section-ink: #C38A3F;
}

.planted {
    --section-ink: #E87456;
}

.about {
    --section-ink: #E1AD2D;
}

.contact {
    --section-ink: #76A554;
}

.section-quote {
    text-shadow: 0.3px 0.25px 0 rgba(107, 84, 54, 0.08);
}

.intention,
.practice,
.principle,
.planted,
.about,
.contact {
    isolation: isolate;
}

.intention::before,
.practice::before,
.principle::before,
.about::before,
.planted::before,
.contact::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: min(46vw, 500px);
    aspect-ratio: 1.45;
    border-radius: 61% 39% 55% 45% / 47% 58% 42% 53%;
    filter: blur(13px);
    opacity: 0.72;
    pointer-events: none;
}

.intention::before {
    right: -7%;
    top: 24%;
    background: radial-gradient(ellipse at center, var(--paint-green), transparent 70%);
    transform: rotate(-5deg);
}

.practice::before {
    left: -9%;
    top: 25%;
    background: radial-gradient(ellipse at center, var(--paint-blue), transparent 70%);
    transform: rotate(4deg);
}

.principle::before {
    left: 28%;
    bottom: 6%;
    width: min(56vw, 660px);
    background: radial-gradient(ellipse at center, var(--paint-earth), transparent 72%);
    transform: rotate(-2deg);
}

.about::before {
    left: -8%;
    top: 22%;
    background: radial-gradient(ellipse at center, var(--paint-yellow), transparent 72%);
    transform: rotate(5deg);
}

.planted::before {
    right: -13%;
    top: 18%;
    background: radial-gradient(ellipse at center, var(--paint-coral), transparent 71%);
    transform: rotate(-6deg);
}

.contact::before {
    left: 14%;
    bottom: 12%;
    background: radial-gradient(ellipse at center, var(--paint-green), transparent 72%);
    transform: rotate(3deg);
}

.illust-wrapper {
    isolation: isolate;
}

.illust-wrapper::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 13% 4% 5%;
    border-radius: 43% 57% 52% 48% / 56% 44% 58% 42%;
    background: radial-gradient(ellipse at 44% 68%, rgba(232, 166, 69, 0.12), transparent 60%),
    radial-gradient(ellipse at 63% 39%, rgba(113, 166, 76, 0.1), transparent 64%);
    filter: blur(8px);
    opacity: 0.86;
    pointer-events: none;
    transform: rotate(-1.5deg);
}

.practice-illust::before,
.about-illust::before {
    transform: rotate(1.8deg);
}

.illust-wrapper svg,
.principle-life-svg,
.footer-life {
    shape-rendering: geometricPrecision;
}

.illust-wrapper [fill="#E8DFC9"],
.principle-soil-fill,
.about-soil,
.about-soil-shadow {
    mix-blend-mode: multiply;
}

.project-icon::before {
    background: rgba(232, 116, 86, 0.18);
    border-radius: 57% 43% 62% 38% / 45% 58% 42% 55%;
    opacity: 0.62;
    transform: rotate(-3deg) scale(1.15);
}

.planted-header + .project + .project .project-icon::before {
    border-radius: 42% 58% 39% 61% / 59% 43% 57% 41%;
    background: rgba(112, 166, 78, 0.18);
    transform: rotate(2.5deg) scale(1.12);
}

.planted-header + .project + .project + .project .project-icon::before {
    background: rgba(86, 167, 190, 0.17);
}

.project-icon svg {
    filter: drop-shadow(0.5px 0.6px 0 rgba(107, 84, 54, 0.11));
}

.contact-link::before {
    background: rgba(238, 191, 57, 0.18);
    border-color: rgba(193, 134, 54, 0.12);
    box-shadow: 0 8px 22px rgba(112, 74, 52, 0.035);
}

.contact-link:nth-child(2)::before {
    background: rgba(112, 166, 78, 0.16);
}

.contact-link:hover::before {
    background: rgba(232, 116, 86, 0.2);
    border-color: rgba(203, 91, 65, 0.16);
}

@media (max-width: 860px) {
    .intention::before,
    .practice::before,
    .principle::before,
    .about::before,
    .planted::before,
    .contact::before {
        width: min(82vw, 440px);
        left: 9%;
        right: auto;
        opacity: 0.56;
    }

    .section-title::after {
        left: -3%;
        right: -4%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-title::after,
    .intention::before,
    .practice::before,
    .principle::before,
    .about::before,
    .planted::before,
    .contact::before,
    .illust-wrapper::before {
        transform: none;
    }
}