* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; background: #f5f0e8; color: #3a3632; font-family: 'Karla', sans-serif; font-size: 1rem; line-height: 1.7; }
.hero-zone { width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: #f5f0e8; }
.hero-zone h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem, 8vw, 6rem); font-weight: 300; color: #3a3632; }
.hero-zone p { font-size: 0.95rem; color: #6b6259; }
.portfolio-zone { padding: 100px 5%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.5rem; }
.card { padding: 2.5rem; background: rgba(255,255,255,0.5); border: 1px solid rgba(200,191,176,0.3); border-radius: 2px; }
.card h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: #3a3632; margin-bottom: 12px; }
.card p { color: #6b6259; }