/* --- BASIS RESET --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background-color: var(--yellow); scroll-behavior: smooth; }
body { font-family: var(--font-main); background-color: var(--beach); color: var(--ink); line-height: 1.6; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); }

/* --- MENU & HEADER --- */
.menu-toggle {
    position: fixed; top: 40px; right: var(--space-md); z-index: 2000;
    background: none; border: none; color: var(--white); font-weight: 900; cursor: pointer;
}

.site-header--label { position: absolute; top: 0; left: var(--space-md); z-index: 1000; }
.header-label { background-color: var(--yellow); padding: 24px 16px 48px; border-radius: 0 0 40px 40px; width: 80px; }

.menu-overlay {
    position: fixed; inset: 0; background-color: var(--yellow); z-index: 1500;
    display: flex; align-items: center; justify-content: center;
    transform: translateY(-100%); transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}
.menu-overlay.is-open { transform: translateY(0); }
.menu-links { list-style: none; text-align: center; }
.menu-links a, .menu-btn-text { 
    display: block; font-size: clamp(40px, 8vw, 80px); font-weight: 900; 
    color: var(--ink) !important; text-decoration: none; border: none; background: none; cursor: pointer;
} 

/* --- HERO (DARK PINE) --- */
.hero-section { background-color: var(--pine); color: var(--white); padding: var(--space-xl) 0; overflow: hidden; }
.hero-title { font-size: clamp(48px, 7vw, 90px); line-height: 1.1; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 32px; }
.hero-intro { font-size: 20px; max-width: 35ch; margin-bottom: 32px; }
.hero-intro a { color: var(--yellow) !important; text-decoration: underline; }

.hero-blob { background-color: var(--yellow); border-radius: 80px 80px 0 80px; overflow: hidden; position: relative; bottom: -180px; }
.hero-img { width: 100%; filter: grayscale(100%); mix-blend-mode: multiply; }

@media (min-width: 900px) {
    .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-lg); align-items: center; }
}

/* --- ABOUT --- */
.about-section { padding: 200px 0 var(--space-lg); background-color: var(--beach); }
.section-label { display: block; color: var(--orange); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; font-size: 14px; }
.about-heading { font-size: clamp(24px, 4vw, 42px); line-height: 1.3; max-width: 25ch; font-weight: 700; }

/* --- WORK --- */
.work-section { padding: var(--space-lg) 0 var(--space-xl); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-lg); }
.project-card { background: var(--white); border-radius: 16px; border: 1px solid var(--sand); text-decoration: none; color: inherit; overflow: hidden; }
.card-image { aspect-ratio: 16/10; background: var(--sand); overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; }
.card-content { padding: var(--space-md); }
.card-content h3 { font-size: 24px; margin-bottom: 8px; }
.card-content p { color: var(--ink); opacity: 0.7; }

/* --- FOOTER --- */
.main-footer { background-color: var(--pine); color: var(--beach); padding: var(--space-xl) 0 var(--space-md); }
.footer-title { font-size: clamp(32px, 5vw, 64px); margin-bottom: 16px; line-height: 1.1; }
.footer-link-large { font-size: clamp(20px, 3vw, 32px); color: var(--yellow) !important; font-weight: 700; text-decoration: none; }
.footer-bottom { margin-top: 80px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; font-size: 14px; }
.footer-socials a { color: var(--beach); margin-left: 24px; text-decoration: none; }

/* --- BUTTONS --- */
.btn-primary { display: inline-block; background: var(--yellow); color: var(--ink) !important; padding: 16px 32px; border-radius: 16px; font-weight: 700; text-decoration: none; }