 :root {
    --obsidian: #0a0a0a;
    --page-max-width: 1249px;
    --page-padding-x: 20px;
    
}

body {
    background-color: var(--obsidian);
    opacity: 0;
    transition: opacity 0.4s;
    
}

body.ready {
    opacity: 1;
}

header, footer {
    padding-left: var(--page-padding-x) !important;
    padding-right: var(--page-padding-x) !important;
}

#varfor {
    
    --gold-muted: rgba(197, 160, 89, 0.2);
    --glass: rgba(255, 255, 255, 0.03);

    font-family: 'Inter', sans-serif;
    
    color: #e5e5e5;
    overflow-x: hidden;
    
}
section#cover .cover-text {
    opacity: 0;
    transition: 0.6s;
    z-index: 0;
}
body.ready section#cover .cover-text {
    opacity: 1;
}

#varfor h2 { font-family: 'Cormorant Garamond', serif; }

#varfor .glass-panel {
    background: var(--glass);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#varfor .line-draw {
    height: 1px;
    background: var(--gold-muted);
    width: 0; /* Animated via JS */
}






#cover { 
    --bg: #0f1115;
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--bg); 
    color: #e5e7eb;
    margin: 0;
    overflow: hidden; /* Locked for a single-section landing feel */
}
#cover h1, .serif { font-family: 'Playfair Display', serif; }

#cover .image-overlay {
    background: linear-gradient(to bottom, rgba(15, 17, 21, 0.4), rgba(15, 17, 21, 0.9));
}

/* Initial state for reveal animation */
#cover .reveal-init {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
#cover .reveal-active {
    opacity: 1;
    transform: translateY(0);
}


.bottom-text span {
    font-size: 0.86rem;
}

.bottom-text p {
    font-size: 0.93rem;
    line-height: 1.39rem;
}

.text-\[10px\] {
    font-size: 11px !important;
}

h1 {
    font-size: 1.52rem;
    line-height: 1.75rem;
    
}


#cover p {
    font-family: 'Playfair Display', serif;
}



#cover .mt-12 {
    margin-top: 60px;
}



@media (max-width: 1023px) {
    section#varfor {
        padding-top: 46px;
    }
}

