/* lugubrious.dev — Wabi-sabi contemplative space */
/* Colors: #5A4E3E, #C4B098, #9B9A94, #F2EDE4, #7A4E2A, #6B5E4D, #6B7F5A, #A69882 */
/* Fonts: Albert Sans, Cormorant Garamond */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Albert Sans', sans-serif;
    background-color: #F2EDE4;
    color: #5A4E3E;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(164, 152, 130, 0.03) 2px,
            rgba(164, 152, 130, 0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(164, 152, 130, 0.02) 2px,
            rgba(164, 152, 130, 0.02) 4px
        );
}

/* Kintsugi Line */
.kintsugi-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Rain Container */
.rain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.raindrop {
    position: absolute;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(155, 154, 148, 0.3), transparent);
    pointer-events: none;
    opacity: 0;
    animation: raindrop-fall linear infinite;
}

@keyframes raindrop-fall {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* Content */
.content {
    position: relative;
    z-index: 5;
    margin-left: 15%;
    max-width: 38ch;
    padding: 12vh 0 20vh 0;
}

.section {
    margin-bottom: 18vh;
}

.section-intro {
    margin-top: 8vh;
}

.section-mono {
    margin-bottom: 14vh;
}

.section-breath {
    margin-left: 3ch;
}

.section-end {
    margin-top: 25vh;
    margin-bottom: 10vh;
}

/* Typography */
.heading-display {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #5A4E3E;
    margin-bottom: 2rem;
}

.body-text {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.75;
    color: #6B5E4D;
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
}

.body-text:last-child {
    margin-bottom: 0;
}

.mono-aside {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    color: #9B9A94;
    letter-spacing: 0.04em;
}

.italic-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 2;
    color: #A69882;
    letter-spacing: 0.02em;
}

/* Hidden Flower */
.hidden-flower {
    position: fixed;
    bottom: 8%;
    right: 6%;
    opacity: 0;
    transition: opacity 8s ease;
    z-index: 2;
    pointer-events: none;
}

.hidden-flower.revealed {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .content {
        margin-left: 8%;
        max-width: 85%;
        padding: 8vh 4% 15vh 0;
    }

    .section {
        margin-bottom: 12vh;
    }

    .section-breath {
        margin-left: 0;
    }
}