:root{
    /* Core */
    --green-primary: #12372A;
    /* Complementary & triadic */
    --maroon-comp: #37121F;
    --violet-triad: #2A1237;
    --earth-triad:  #372A12;
    /* Analogous */
    --teal-ana:   #123237;
    --forest-ana: #123718;
    /* Neutrals */
    --ink:   #111111;
    --warm:  #555555;
    --paper: 249 249 247;
    --rule:  #e6e6e6; /* subtle divider */

    --fade-distance: 20px;     /* size of fade zone */
    --fade-opacity: 0;       /* opacity at the very edge */
}

/* Base */
body {
    margin: 0;
    font-family: "Georgia", serif;
    line-height: 2;
    background-color: var(--paper);
    color: var(--teal-ana);

    /* cross-hatch dotted background */
    background-image:
    repeating-linear-gradient(
        45deg,
        transparent,
        transparent 16px,
        var(--rule) 16px,
        var(--rule) 17px
    ),
    repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 16px,
        var(--rule) 16px,
        var(--rule) 17px
    );
}

/* Header */
header {
    text-align: center;
    padding: 15rem 1rem 2rem 1rem;
    margin: 3rem 0;
    border-bottom: 1px solid var(--rule);
    position: relative;
    background-color: rgb(var(--paper));

    /* Rectangular fade mask */
    -webkit-mask-image: 
    linear-gradient(to right,
        rgb(0 0 0 / var(--fade-opacity)) 0,
        rgb(0 0 0 / 1) var(--fade-distance),
        rgb(0 0 0 / 1) calc(100% - var(--fade-distance)),
        rgb(0 0 0 / var(--fade-opacity)) 100%
    ),
    linear-gradient(to bottom,
        rgb(0 0 0 / var(--fade-opacity)) 0,
        rgb(0 0 0 / 1) var(--fade-distance),
        rgb(0 0 0 / 1) calc(100% - var(--fade-distance)),
        rgb(0 0 0 / var(--fade-opacity)) 100%
    );
    -webkit-mask-composite: intersect;
    mask-composite: intersect;

    mask-image: 
    linear-gradient(to right,
        rgb(0 0 0 / var(--fade-opacity)) 0,
        rgb(0 0 0 / 1) var(--fade-distance),
        rgb(0 0 0 / 1) calc(100% - var(--fade-distance)),
        rgb(0 0 0 / var(--fade-opacity)) 100%
    ),
    linear-gradient(to bottom,
        rgb(0 0 0 / var(--fade-opacity)) 0,
        rgb(0 0 0 / 1) var(--fade-distance),
        rgb(0 0 0 / 1) calc(100% - var(--fade-distance)),
        rgb(0 0 0 / var(--fade-opacity)) 100%
    );
}
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("./one.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.1;
}
header h1 {
    font-size: 2.5rem;
    margin: 0;
    color: var(--green-primary);
}
header h2 {
    font-size: 1.2rem;
    font-weight: normal;
    margin: 0.5rem 0;
    color: var(--teal-ana);
}
header p.tagline {
    font-style: italic;
    margin-top: 0.75rem;
    color: var(--forest-ana);
}

/* Sections */
section {
    max-width: 800px;
    margin: 3rem auto;
    padding: 3rem 1.5rem 7rem 1.5rem;
    background-color: rgb(var(--paper));
    position: relative;

    /* Rectangular fade mask */
    -webkit-mask-image: 
    linear-gradient(to right,
        rgb(0 0 0 / var(--fade-opacity)) 0,
        rgb(0 0 0 / 1) var(--fade-distance),
        rgb(0 0 0 / 1) calc(100% - var(--fade-distance)),
        rgb(0 0 0 / var(--fade-opacity)) 100%
    ),
    linear-gradient(to bottom,
        rgb(0 0 0 / var(--fade-opacity)) 0,
        rgb(0 0 0 / 1) var(--fade-distance),
        rgb(0 0 0 / 1) calc(100% - var(--fade-distance)),
        rgb(0 0 0 / var(--fade-opacity)) 100%
    );
    -webkit-mask-composite: intersect;
    mask-composite: intersect;

    mask-image: 
    linear-gradient(to right,
        rgb(0 0 0 / var(--fade-opacity)) 0,
        rgb(0 0 0 / 1) var(--fade-distance),
        rgb(0 0 0 / 1) calc(100% - var(--fade-distance)),
        rgb(0 0 0 / var(--fade-opacity)) 100%
    ),
    linear-gradient(to bottom,
        rgb(0 0 0 / var(--fade-opacity)) 0,
        rgb(0 0 0 / 1) var(--fade-distance),
        rgb(0 0 0 / 1) calc(100% - var(--fade-distance)),
        rgb(0 0 0 / var(--fade-opacity)) 100%
    );
}
section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-image: url("./side.png");
    background-repeat: repeat-y;
    background-position: center;
    background-size: contain;
    opacity: 0.075;
    transform: scaleX(-1);
}

section h3 {
    font-size: 1.5rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.25rem;
    color: var(--violet-triad);
}

.contact {
    padding-top: 2rem;
    padding-bottom: 7rem;
    position: relative;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("./kiss.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.075;
}

.contact h3 {
    color: var(--forest-ana);
}

.contact p {
    color: var(--violet-triad);
    font-weight: bold;
}

.logo { max-width: 220px; margin: auto; }

.standing-icon {
    width: 1.25rem;
    margin-bottom: -13px;
}

/* Lists */
ul {
    list-style: none;
    padding-left: 0;
}
ul li {
    margin: 0.5rem 0;
}
ul li strong {
    color: var(--forest-ana);
}

.leaf {
    text-align: center;
    width: 100%;
    padding: 3rem 0;
}

.leaf img {
    opacity: 0.15;
    max-width: 75px;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.85rem;
    color: var(--warm);
    border-top: 1px solid var(--rule);
}

/* Links */
a {
    color: var(--teal-ana);
    text-decoration: none;
    border-bottom: 1px dotted var(--teal-ana);
}
a:hover {
    color: var(--forest-ana);
    border-bottom-color: var(--forest-ana);
}

/* Helpers */
.center { text-align: center; }
.no-border { border-width: 0; }
.link { color: var(--teal-ana)}

/* Optional subtle accent usage (not overused) */
.accent-rule { border-color: var(--maroon-comp); }