/* =========================================
   Forma Studio — Custom Styles
   ========================================= */

/* =========================================
   Article overlay
   ========================================= */
#article-overlay {
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(32px);
}

#article-overlay.is-open {
    transform: translateY(0);
}

/* Article body typography */
.article-lead {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(42, 51, 36, 0.9);
    border-left: 2px solid #C4CFC0;
    padding-left: 1.25rem;
    margin-bottom: 2.5rem;
}

.article-section {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(42, 51, 36, 0.55);
    margin-top: 2.75rem;
    margin-bottom: 0.85rem;
}

.article-p {
    font-size: 1.0625rem;
    line-height: 1.9;
    color: rgba(42, 51, 36, 0.82);
    margin-bottom: 1.5rem;
}

/* =========================================
   Project detail overlay
   ========================================= */
#project-overlay {
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(32px);
}

#project-overlay.is-open {
    transform: translateY(0);
}

/* =========================================
   Mobile nav overlay
   ========================================= */
#nav-overlay {
    transition: opacity 0.4s ease;
}

.nav-overlay-link {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s ease, transform 0.45s ease, color 0.2s ease;
}

#nav-overlay.is-open .nav-overlay-link {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered entrance delays */
#nav-overlay.is-open .nav-overlay-link:nth-child(1) { transition-delay: 0.08s; }
#nav-overlay.is-open .nav-overlay-link:nth-child(2) { transition-delay: 0.14s; }
#nav-overlay.is-open .nav-overlay-link:nth-child(3) { transition-delay: 0.20s; }
#nav-overlay.is-open .nav-overlay-link:nth-child(4) { transition-delay: 0.26s; }
#nav-overlay.is-open .nav-overlay-link:nth-child(5) { transition-delay: 0.32s; }
#nav-overlay.is-open .nav-overlay-cta             { transition-delay: 0.40s; }

/* Typography utilities */
.font-serif-custom { font-family: 'Playfair Display', serif; }
.font-sans-custom  { font-family: 'Inter', sans-serif; }

/* =========================================
   Marquee / ticker animation
   ========================================= */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    to { transform: translateX(-50%); }
}