/* ============================================================
   Rohnvest shared styles — single source of truth for the page
   shell: reset, nav, mobile menu, footer, reveal animation.
   Page-specific section styles stay inline in each page.

   Nav variants (set as a class on <nav id="nav">):
   - "blend"  : white text, mix-blend-mode inverts over imagery
                (all inner pages)
   - "solid"  : charcoal on cream, cream bar when scrolled
                (homepage)
   - "blend solid-on-compact" : blend normally, switches to a
                cream bar with charcoal text once scrolled
                (contact)
   ============================================================ */

:root { --charcoal: #1a1a1a; --cream: #F5F2EC; --warm: #E8E2D8; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
    font-family: 'Jost', sans-serif;
    background: var(--cream);
    color: var(--charcoal);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.page-frame { margin: 0 1.25rem; overflow: hidden; }

/* ---------- NAV: structure (shared by all variants) ---------- */
nav {
    position: fixed; top: 0; left: 1.25rem; right: 1.25rem; z-index: 100;
    padding: 1.8rem 3rem;
    display: flex; justify-content: space-between; align-items: center;
    transition: transform 0.4s ease, padding 0.5s ease;
}
nav.compact { padding: 1.2rem 3rem; }
nav.nav-hidden { transform: translateY(-100%); }
.nav-logo { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.16em; text-decoration: none; }
.nav-links { display: flex; gap: 2.5rem; align-items: center; }
.nav-links a { text-decoration: none; opacity: 1; transition: opacity 0.3s ease; }
.nav-links a:hover { opacity: 0.7; }
.nav-cta { text-decoration: none; padding: 0.55rem 1.5rem; transition: all 0.3s ease; }

/* ---------- NAV: blend variant (inner pages) ---------- */
nav.blend { mix-blend-mode: difference; }
nav.blend .nav-logo { color: white; }
nav.blend .nav-links a { font-size: 0.95rem; font-weight: 400; color: white; letter-spacing: 0.03em; }
nav.blend .nav-cta { font-size: 0.92rem; font-weight: 400; color: white; letter-spacing: 0.03em; border: 1px solid rgba(255,255,255,0.3); }
nav.blend .nav-cta:hover { background: white; color: var(--charcoal); mix-blend-mode: normal; }
nav.blend .hamburger span { background: white; }

/* ---------- NAV: solid variant (homepage) ---------- */
nav.solid .nav-logo { color: var(--charcoal); }
nav.solid .nav-links a { font-size: 1rem; font-weight: 500; color: var(--charcoal); letter-spacing: 0.04em; }
nav.solid .nav-cta { font-size: 1rem; font-weight: 400; color: var(--charcoal); letter-spacing: 0.04em; background: white; border: 1px solid rgba(255,255,255,0.3); }
nav.solid .nav-cta:hover { background: var(--charcoal); color: white; border-color: var(--charcoal); }
nav.solid.compact { background: var(--cream); box-shadow: 0 1px 0 rgba(26,26,26,0.06); }
nav.solid .hamburger span { background: var(--charcoal); }

/* ---------- NAV: solid-on-compact modifier (contact) ---------- */
nav.solid-on-compact.compact { background: var(--cream); mix-blend-mode: normal; box-shadow: 0 1px 0 rgba(26,26,26,0.06); }
nav.solid-on-compact.compact .nav-logo,
nav.solid-on-compact.compact .nav-links a,
nav.solid-on-compact.compact .nav-cta { color: var(--charcoal); }
nav.solid-on-compact.compact .nav-cta { border-color: rgba(26,26,26,0.2); }
nav.solid-on-compact.compact .nav-cta:hover { background: var(--charcoal); color: white; border-color: var(--charcoal); }
nav.solid-on-compact.compact .hamburger span { background: var(--charcoal); }

/* ---------- Hamburger ---------- */
.hamburger {
    display: none; background: none; border: none; cursor: pointer;
    flex-direction: column; gap: 6px; padding: 8px;
}
.hamburger span { width: 24px; height: 1.5px; background: white; transition: all 0.4s ease; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* While the menu overlay is open, the close button sits over the charcoal
   overlay: bars must be white and the bar background must not paint. */
nav.menu-open { background: transparent !important; box-shadow: none !important; }
nav.menu-open .hamburger span { background: white !important; }

/* ---------- Mobile slide-in menu ---------- */
.mobile-nav {
    position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
    background: var(--charcoal); z-index: 99;
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 2rem;
    transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav.active { right: 0; }
.mobile-nav a {
    font-size: 1.6rem; font-weight: 300; letter-spacing: 0.04em;
    color: white; text-decoration: none; opacity: 0.7;
    transition: opacity 0.3s ease;
}
.mobile-nav a:hover { opacity: 1; }

/* ---------- Footer ---------- */
footer { background: var(--charcoal); color: white; padding: 5rem 3rem 2rem; }
.footer-inner { max-width: 1400px; margin: 0 auto; }
.footer-top {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem; padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-brand .nav-logo { color: white; }
.footer-brand p { font-size: 1rem; line-height: 1.7; font-weight: 300; color: rgba(255,255,255,0.6); margin-top: 1rem; max-width: 320px; }
.footer-col h4 { font-size: 0.85rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1.25rem; }
.footer-col a { display: block; margin-bottom: 0.7rem; font-size: 1rem; color: rgba(255,255,255,0.7); text-decoration: none; font-weight: 300; transition: color 0.3s ease; }
.footer-col a:hover { color: rgba(255,255,255,0.95); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; font-size: 0.9rem; color: rgba(255,255,255,0.45); font-weight: 300; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Shared responsive rules ---------- */
@media (max-width: 1024px) {
    .nav-links, .nav-cta { display: none; }
    .hamburger { display: flex; }
    .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    nav { padding: 1.2rem 1.5rem; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}