:root { --ink: #1e2924; --muted: #68736d; --paper: #f5f5ef; --mint: #dce9df; --coral: #e88669; --line: #ccd4cc; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.5 Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header, .site-footer, .section-shell { width: min(1160px, calc(100% - 80px)); margin: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.brand { font-size: 25px; font-weight: 700; letter-spacing: -.08em; }.brand span { color: var(--coral); }
.site-nav { display: flex; gap: 38px; font-size: 13px; }.site-nav a, .header-link, .social-links a { transition: color .2s ease; }.site-nav a:hover, .header-link:hover, .social-links a:hover { color: var(--coral); }
.header-link { font-size: 13px; font-weight: 700; }.header-link span, .contact-email span { color: var(--coral); margin-left: 7px; }
.hero { min-height: 650px; display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 80px; padding: 76px 0 125px; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 24px; }.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: #76a27b; }
h1, h2, h3, p { margin-top: 0; } h1, h2 { font-weight: 500; letter-spacing: -.055em; line-height: 1.04; } h1 { max-width: 640px; font-size: clamp(52px, 6.5vw, 83px); margin-bottom: 30px; } h2 { font-size: clamp(43px, 5vw, 66px); margin-bottom: 55px; } em { font-family: Georgia, serif; font-weight: 500; }
.hero-intro { max-width: 390px; color: var(--muted); font-size: 17px; margin-bottom: 34px; }.button { display: inline-flex; align-items: center; gap: 30px; border-radius: 99px; background: var(--ink); color: white; padding: 15px 21px; font-size: 13px; font-weight: 700; transition: transform .2s ease, background .2s ease; }.button:hover { background: var(--coral); transform: translateY(-2px); }
.hero-art { position: relative; width: min(100%, 430px); aspect-ratio: .91; justify-self: end; overflow: hidden; background: var(--mint); }.art-sun { position: absolute; width: 260px; height: 260px; top: 38px; right: 30px; border-radius: 50%; background: #e6ab75; }.art-arc { position: absolute; width: 350px; height: 350px; top: 145px; left: -90px; border: 1px solid rgba(30,41,36,.3); border-radius: 50%; }.art-card { position: absolute; right: 51px; bottom: 51px; width: 220px; height: 295px; background: #f0e9df; transform: rotate(5deg); box-shadow: 15px 20px 0 rgba(30,41,36,.08); }.art-label { position: absolute; top: 16px; left: 18px; color: var(--coral); font-size: 10px; letter-spacing: .1em; }.art-face { position: absolute; left: 60px; top: 70px; width: 120px; height: 165px; border-radius: 55% 45% 48% 46%; background: #bd7055; transform: rotate(-12deg); }.art-face:after { content: ''; position: absolute; width: 150px; height: 100px; top: -18px; left: -10px; border-radius: 50% 50% 10% 20%; background: var(--ink); }.art-caption { position: absolute; left: 20px; bottom: 16px; color: var(--muted); font: italic 13px/1.25 'Playfair Display', Georgia, serif; }
.work { padding: 100px 0 140px; border-top: 1px solid var(--line); }.section-heading h2 { margin-bottom: 65px; }.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 76px 24px; }.project-wide { grid-column: 1 / -1; }.project-visual { position: relative; overflow: hidden; height: 390px; }.project-wide .project-visual { height: 480px; }.visual-grove { background: #b8cdbb; }.grove-window { position: absolute; inset: 35px 35px auto; height: 42px; padding: 11px 17px; background: rgba(255,255,255,.7); color: #435c48; font-size: 12px; }.grove-window i { float: right; width: 6px; height: 6px; margin: 7px 0 0 8px; border-radius: 50%; background: #8da691; }.grove-card { position: absolute; width: 370px; padding: 32px; top: 130px; left: 18%; background: #f7f4eb; box-shadow: 20px 20px 0 rgba(52,77,58,.13); }.grove-card small, .grove-card span { display: block; color: #6c826f; font-size: 10px; letter-spacing: .1em; }.grove-card strong { display: block; margin: 35px 0; color: #304637; font: 500 33px/1.05 'Playfair Display', Georgia, serif; }.grove-card span { letter-spacing: 0; font-size: 12px; }.visual-lumen { background: #eeddd6; }.lumen-phone { position: absolute; z-index: 1; left: 50%; top: 38px; width: 250px; height: 410px; padding: 42px 24px; border: 8px solid #f8eee9; border-radius: 25px; background: #a7b8a6; transform: translateX(-50%) rotate(7deg); box-shadow: 14px 16px 0 rgba(122,91,83,.15); }.lumen-phone small { font-size: 10px; }.lumen-phone strong { display: block; margin-top: 40px; font: 500 28px/1.1 'Playfair Display', Georgia, serif; }.mood-row { display: flex; justify-content: space-between; margin-top: 70px; font-size: 20px; }.mood-row b:nth-child(2) { color: var(--coral); }.lumen-orbit { position: absolute; width: 440px; height: 440px; top: -65px; left: calc(50% - 220px); border: 1px solid rgba(113,78,70,.25); border-radius: 50%; }.visual-north { padding: 40px; background: #ded4c3; color: #9d4d35; }.north-mark { font: 500 75px 'Playfair Display', Georgia, serif; }.north-line { position: absolute; top: 0; right: 28%; width: 1px; height: 100%; background: rgba(157,77,53,.25); transform: rotate(28deg); }.visual-north p { position: absolute; bottom: 27px; left: 40px; font-size: 34px; line-height: 1; letter-spacing: -.04em; }.visual-north small { position: absolute; right: 40px; bottom: 40px; font-size: 10px; letter-spacing: .1em; }.project-meta { display: flex; justify-content: space-between; padding-top: 18px; }.project-type { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }.project h3 { max-width: 440px; margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }.project-arrow { color: var(--coral); font-size: 22px; }
.about { display: grid; grid-template-columns: 1fr 4fr; gap: 40px; padding: 105px 0 140px; border-top: 1px solid var(--line); }.about-number { color: var(--coral); font: italic 34px 'Playfair Display', Georgia, serif; }.about h2 { margin-bottom: 65px; }.about-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }.about-columns > p { max-width: 390px; color: var(--muted); font-size: 17px; }.skills .eyebrow { margin-bottom: 14px; }.skills ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; padding: 0; margin: 0; list-style: none; font-size: 14px; }.skills li:before { content: '↗'; color: var(--coral); margin-right: 8px; }
.contact { padding: 115px 0 125px; text-align: center; border-top: 1px solid var(--line); }.contact .eyebrow { margin-bottom: 22px; }.contact h2 { margin-bottom: 40px; }.contact-email { display: inline-block; border-bottom: 1px solid var(--ink); padding-bottom: 8px; font-size: 18px; }.social-links { display: flex; justify-content: center; gap: 28px; margin-top: 75px; font-size: 12px; font-weight: 700; }.social-links a { color: var(--muted); }
.site-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 25px 0 35px; color: var(--muted); font-size: 11px; }.site-footer a { color: var(--ink); }
@media (max-width: 700px) { .site-header, .site-footer, .section-shell { width: min(100% - 40px, 500px); }.site-header { height: 72px; }.site-nav { gap: 16px; }.header-link { display: none; }.hero { display: block; padding: 70px 0 90px; }.hero-art { margin: 70px auto 0; }.work { padding: 75px 0 95px; }.project-grid { display: block; }.project { margin-bottom: 55px; }.project-visual, .project-wide .project-visual { height: 330px; }.grove-card { left: 10%; width: 78%; padding: 22px; }.grove-card strong { margin: 25px 0; font-size: 27px; }.about { display: block; padding: 75px 0 95px; }.about-number { margin-bottom: 35px; }.about-columns { display: block; }.skills { margin-top: 45px; }.contact { padding: 80px 0 90px; }.site-footer { display: grid; gap: 10px; }.site-footer span:nth-child(2) { order: 3; } }