/* ═══════════════════════════════════════════════════════════════
   BALIYANG DEVELOPMENTS — Shared Stylesheet
═══════════════════════════════════════════════════════════════ */

:root {
    --ink:        #18160f;
    --ink-mid:    #2e2b22;
    --ink-light:  #4a4639;
    --mist:       #f4f1eb;
    --stone:      #e9e4da;
    --sage:       #6b7c62;
    --gold:       #8a7050;
    --gold-pale:  #b8a07a;
    --rule:       rgba(24,22,15,0.12);
    --rule-light: rgba(24,22,15,0.07);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
    background: var(--mist);
    color: var(--ink);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-x: hidden;
}

/* ─── NAV ────────────────────────────────────────────────────── */
nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 3.5rem;
    transition: border-color 0.5s, background 0.5s;
    border-bottom: 1px solid transparent;
}
nav.scrolled {
    background: rgba(244,241,235,0.96);
    border-color: var(--rule);
    backdrop-filter: blur(8px);
}

.nav-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.nav-wordmark {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    line-height: 1;
}
.nav-parent {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-pale);
    text-decoration: none;
    transition: color 0.2s;
}
.nav-parent:hover { color: var(--gold); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.8rem;
    list-style: none;
}
.nav-links > li > a {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-light);
    text-decoration: none;
    transition: color 0.2s;
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--gold); }

/* ─── PAGE HERO ───────────────────────────────────────────────── */
.page-hero {
    padding: 13rem 3.5rem 5.5rem;
    border-bottom: 1px solid var(--rule);
}
.page-kicker {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--gold-pale);
    text-transform: uppercase;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeUp 0.7s 0.15s forwards;
}
.page-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--ink);
    opacity: 0;
    animation: fadeUp 0.8s 0.3s forwards;
}
.page-title em { font-style: italic; color: var(--ink-light); }

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--rule);
    padding: 2.2rem 3.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-mark {
    font-family: 'Cormorant SC', serif;
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    color: var(--gold-pale);
    text-transform: uppercase;
}
.footer-copy {
    font-size: 0.75rem;
    font-family: 'EB Garamond', serif;
    color: var(--gold-pale);
    letter-spacing: 0.03em;
}

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    nav { padding: 1.25rem 1.5rem; }
    .page-hero { padding: 9rem 1.5rem 4rem; }
    footer { flex-direction: column; gap: 0.6rem; padding: 1.8rem 1.5rem; text-align: center; }
    .nav-links { gap: 1.8rem; }
}