/* ========================================
   xity.one - styles.css
   Palette:
     Warm Paper:   #FAF8F3
     Birch Tan:    #C4B5A0
     Charcoal:     #2C2C2C
     Muted Earth:  #8A8275
     Soft White:   #F5F2EB
     Deep Walnut:  #4A3F35
   Fonts: DM Sans 500, Lora 400, Space Mono 400
======================================== */

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

body {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    color: #2C2C2C;
    background: #FAF8F3;
    line-height: 1.8;
    font-size: 1.1rem;
    overflow-x: hidden;
}

h1, h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ---- CONTENT COLUMN ---- */
.content-column {
    max-width: 540px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
}

/* ---- THIN RULE ---- */
.thin-rule {
    border: none;
    border-top: 1px solid #C4B5A0;
    width: 60px;
    margin: 40px auto;
}

/* ---- SECTION NUMBER ---- */
.section-number {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    color: #8A8275;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 1.5rem;
}

/* ---- THE MARK ---- */
.mark {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10vh;
}

.mark .content-column {
    text-align: center;
}

.site-name {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    color: #2C2C2C;
    letter-spacing: 0.04em;
    margin-bottom: 0;
}

.mark .thin-rule {
    margin-top: 40px;
}

/* ---- THE STATEMENT ---- */
.statement {
    margin-top: clamp(20vh, 30vh, 40vh);
    margin-bottom: clamp(20vh, 30vh, 40vh);
}

.statement .content-column {
    text-align: center;
}

.statement-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #2C2C2C;
    max-width: 540px;
    margin: 0 auto;
}

/* ---- THE DIRECTIONS ---- */
.directions {
    margin-bottom: clamp(20vh, 30vh, 40vh);
}

.direction {
    margin-bottom: clamp(30vh, 40vh, 50vh);
}

.direction:last-child {
    margin-bottom: 0;
}

.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }

.align-right .section-number {
    text-align: right;
}

.align-center .section-number {
    text-align: center;
}

.direction-heading {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #2C2C2C;
    margin-bottom: 0.75rem;
}

.direction-desc {
    font-size: 1rem;
    color: #8A8275;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.direction-arrow {
    display: inline-block;
}

/* ---- THE PRINCIPLE ---- */
.principle {
    margin-top: clamp(20vh, 30vh, 40vh);
    margin-bottom: clamp(20vh, 30vh, 40vh);
}

.principle .content-column {
    text-align: center;
}

.principle-word {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1.1;
    color: #C4B5A0;
    margin-bottom: 2rem;
}

.principle-desc {
    font-size: 1rem;
    color: #8A8275;
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ---- THE CLOSE ---- */
.close {
    margin-top: clamp(20vh, 30vh, 40vh);
}

.close .content-column {
    text-align: center;
}

.close-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: #2C2C2C;
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
}

.close-year {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    color: #8A8275;
    letter-spacing: 0.04em;
}

.final-space {
    height: 20vh;
}

/* ---- LINKS ---- */
a {
    color: #2C2C2C;
    text-decoration: none;
    border-bottom: 1px solid #C4B5A0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
    .align-right {
        text-align: left;
    }

    .align-right .section-number {
        text-align: left;
    }
}