/* goomimi.com - Wabi-sabi contemplative design */

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

/* Palette:
   Background:    #F5F0EA
   Surface Dark:  #E8E0D6
   Text Primary:  #3D3029
   Text Body:     #5C4F44
   Text Muted:    #8A7E73
   Accent Clay:   #B8A89A
   Accent Iron:   #6B5D52
   Accent Moss:   #7A8B6F
   Highlight:     #E8DFD2
*/

html {
    scroll-behavior: smooth;
}

body {
    background-color: #F5F0EA;
    color: #5C4F44;
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.9;
    overflow-x: hidden;
    position: relative;
}

/* SVG filters hidden */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Washi paper texture */
.washi-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect x='12' y='8' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='45' y='22' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='78' y='15' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='33' y='55' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='67' y='72' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='8' y='88' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='91' y='44' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='55' y='95' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='22' y='38' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='80' y='62' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='4' y='50' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='60' y='30' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='37' y='82' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='93' y='10' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3Crect x='17' y='68' width='1' height='1' fill='%233D3029' opacity='0.02'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* Vertical margin line */
.margin-line {
    position: fixed;
    left: 15vw;
    top: 0;
    width: 2px;
    height: 100vh;
    z-index: 2;
    pointer-events: none;
}

.margin-line svg {
    width: 2px;
    height: 100%;
}

/* Content column - offset to right */
.content-column {
    width: 60%;
    margin-left: 25vw;
    position: relative;
    z-index: 3;
}

/* Typography */
h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    color: #3D3029;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

/* Hero */
.hero-title {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
}

.hero-subtitle {
    font-family: 'Klee One', cursive;
    font-size: 16px;
    font-weight: 400;
    color: #8A7E73;
    margin-top: 16px;
}

.section-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 32px;
}

.subsection-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Passages */
.passage {
    position: relative;
}

/* Passage 1: The Opening */
.passage-opening {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.passage-opening .content-column {
    padding-top: 0;
}

.passage-opening .imperfect-circle-divider {
    margin-top: 80px;
}

/* Passage 2: The First Thought */
.passage-thought {
    padding-top: 200px;
    padding-bottom: 100px;
}

.text-block-wide {
    width: 100%;
}

.text-block-wide p,
.text-block-narrow p {
    margin-bottom: 24px;
}

.text-block-wide p:last-child,
.text-block-narrow p:last-child {
    margin-bottom: 0;
}

/* Pull quote */
.pull-quote {
    margin-top: 48px;
    margin-bottom: 48px;
    margin-left: -40px;
    padding-left: 0;
    border: none;
}

.pull-quote p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    color: #6B5D52;
    line-height: 1.5;
}

/* Aged rule line */
.aged-rule {
    height: 1px;
    margin: 48px 0;
    background: linear-gradient(to right, transparent, #B8A89A4D, transparent);
}

.aged-rule-full {
    width: 100%;
}

/* Passage 3: The Depth */
.passage-depth {
    padding-top: 200px;
    padding-bottom: 100px;
}

.text-block-narrow {
    width: 65%;
    position: relative;
}

.text-block-narrow + .imperfect-circle-divider {
    margin: 48px 0;
}

/* Moss accent marks */
.moss-accents {
    position: absolute;
}

.moss-accents-right {
    right: -20px;
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.moss-dot {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #7A8B6F;
    opacity: 0.25;
}

.moss-dot:nth-child(2) {
    margin-left: 4px;
}

.moss-dot:nth-child(3) {
    margin-left: 1px;
}

/* Klee annotation */
.klee-annotation {
    font-family: 'Klee One', cursive;
    font-size: 14px;
    color: #8A7E73;
    margin-top: 48px;
    transform: rotate(-1deg);
    display: inline-block;
}

/* Imperfect circle divider */
.imperfect-circle-divider {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

/* Passage 4: The Still Point */
.passage-still {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
}

.still-panel {
    background-color: #E8E0D6;
    border-radius: 24px;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
}

.still-panel .content-column {
    text-align: center;
}

.still-statement {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 600;
    color: #3D3029;
    line-height: 1.4;
}

.triple-circles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
}

/* Passage 5: The Close */
.passage-close {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 100px 0;
}

.close-domain {
    font-family: 'Klee One', cursive;
    font-size: 14px;
    color: #8A7E73;
    text-align: center;
    margin: 32px 0;
}

/* Fade reveal animation */
.fade-reveal {
    opacity: 0;
    transition: opacity 1200ms ease;
}

.fade-reveal.revealed {
    opacity: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .content-column {
        width: auto;
        margin-left: 24px;
        margin-right: 24px;
    }

    .margin-line {
        display: none;
    }

    .text-block-narrow {
        width: 100%;
    }

    .pull-quote {
        margin-left: 0;
    }

    .still-panel {
        border-radius: 16px;
        margin: 0 12px;
    }

    .still-statement {
        font-size: 26px;
    }

    .hero-title {
        font-size: clamp(28px, 8vw, 44px);
    }

    .passage-thought,
    .passage-depth {
        padding-top: 120px;
    }
}