@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Inter:wght@300;400;500&family=Manrope:wght@300;400;500;600&display=swap");
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#202020;font-family:Inter,Arial,sans-serif;font-weight:300}a{color:inherit;text-decoration:none}header{height:82px;padding:0 4vw;border-bottom:1px solid #d8d6d0;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;background:#fffed;backdrop-filter:blur(14px)}.logo{font-family:"Manrope",Arial,sans-serif;font-weight:500;letter-spacing:.08em;font-size:16px;line-height:1;color:#202020;text-transform:none}nav{display:flex;gap:38px;font:10px DM Mono,monospace;letter-spacing:.14em;text-transform:uppercase}nav a:hover,.section-head a:hover{opacity:.55}.hero{min-height:700px;display:grid;grid-template-columns:37% 63%;border-bottom:1px solid #d8d6d0}.hero-copy{padding:100px 6vw 60px 5vw;border-right:1px solid #d8d6d0;display:flex;flex-direction:column}.hero-copy span,.work>span,.experience>span,.about>span,.contact>span,.section-head span{font:10px DM Mono,monospace;letter-spacing:.2em;color:#555}.hero h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(56px,6vw,92px);line-height:.92;letter-spacing:-.025em;margin:60px 0 35px}.hero-copy p{max-width:430px;line-height:1.8;font-size:13px;color:#666}.arrow{margin-top:auto;font:10px DM Mono,monospace;letter-spacing:.15em}.hero-media{background:#e1ded7 center/cover no-repeat}.hero-media img{width:100%;height:100%;object-fit:cover}.work{padding:80px 4vw}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.section-head a{font:9px DM Mono,monospace;letter-spacing:.12em}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d8d6d0}.card{background:#fff;min-width:0}.card-media{aspect-ratio:1.28;background:#e1ded7;overflow:hidden}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.card:hover img{transform:scale(1.025)}.card-copy{padding:16px 0 35px;display:grid;grid-template-columns:40px 1fr;gap:8px}.card-copy small{font:9px DM Mono,monospace;color:#777}.card-copy h3{font:400 20px "Playfair Display",Georgia,serif;margin:0 0 6px;text-transform:uppercase}.card-copy p{font:9px DM Mono,monospace;color:#777;letter-spacing:.1em;margin:0}.featured{margin:0 4vw 80px;border-top:1px solid #d8d6d0;border-bottom:1px solid #d8d6d0;min-height:560px;display:grid;grid-template-columns:36% 64%}.featured-copy{padding:55px 5vw 55px 2vw;display:flex;flex-direction:column}.featured-copy .number{font:10px DM Mono,monospace;color:#777}.featured-copy h2{font:400 clamp(45px,5vw,75px)/.92 "Playfair Display",Georgia,serif;margin:45px 0 15px}.featured-copy .cat{font:9px DM Mono,monospace;letter-spacing:.15em}.featured-copy p{line-height:1.8;color:#666;max-width:400px}.featured-copy a{margin-top:auto;font:9px DM Mono,monospace;letter-spacing:.12em}.featured-media{background:#e1ded7}.featured-media img{width:100%;height:100%;object-fit:cover}.experience{padding:80px 4vw;border-top:1px solid #d8d6d0}.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:65px}.experience-grid>div{padding:0 5vw 0 0;border-right:1px solid #d8d6d0;min-height:190px}.experience-grid>div+div{padding-left:4vw}.experience-grid>div:last-child{border-right:0}.experience-grid b{font:10px DM Mono,monospace;color:#777}.experience-grid h3{font:400 22px "Playfair Display",Georgia,serif;line-height:1.15}.experience-grid p{font-size:12px;color:#666;line-height:1.7;max-width:280px}.about{padding:100px 4vw;border-top:1px solid #d8d6d0}.about-grid{display:grid;grid-template-columns:45% 55%;margin-top:55px}.about-image{min-height:550px;background:#e1ded7}.about-grid>div:last-child{padding:0 8vw}.about h2{font:400 clamp(44px,5vw,72px)/1 "Playfair Display",Georgia,serif;margin:0 0 40px}.about p{line-height:1.9;color:#666;max-width:500px}.contact{padding:100px 4vw;background:#eeeae2}.contact>div{display:flex;justify-content:space-between;gap:50px}.contact h2{font:400 clamp(55px,7vw,105px)/.9 "Playfair Display",Georgia,serif;margin:65px 0 0}.contact aside{display:flex;flex-direction:column;gap:18px;padding-top:70px;font:10px DM Mono,monospace}.contact aside a{border-bottom:1px solid #aaa;padding-bottom:8px}footer{padding:25px 4vw;display:flex;justify-content:space-between;font:10px DM Mono,monospace;letter-spacing:.1em}footer small{color:#777}@media(max-width:800px){nav{gap:14px}.hero{grid-template-columns:1fr}.hero-copy{min-height:550px;border-right:0}.hero-media{min-height:450px}.grid{grid-template-columns:1fr 1fr}.featured{grid-template-columns:1fr}.featured-media{min-height:450px}.experience-grid,.about-grid{grid-template-columns:1fr}.experience-grid>div{border-right:0;border-bottom:1px solid #d8d6d0;padding:25px 0!important}.about-grid>div:last-child{padding:50px 0}.contact>div{display:block}.contact aside{padding-top:40px}}@media(max-width:520px){header{height:65px}nav{font-size:8px;gap:9px}.logo{font-size:11px}.grid{grid-template-columns:1fr}.hero h1{font-size:54px}.work,.experience,.about,.contact{padding-left:6vw;padding-right:6vw}.featured{margin-left:6vw;margin-right:6vw}}

/* =========================================
   SEPARATE HERO IMAGE SECTION
   Replace uploads/hero.jpg with your image.
   ========================================= */

.hero-image-section {
    width: 100%;
    min-height: 700px;
    overflow: hidden;
    background: #e1ded7;
    position: relative;
}

.hero-image {
    width: 100%;
    height: 100%;
    min-height: 700px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.hero-placeholder {
    background:
        linear-gradient(135deg, #e8e5df 0%, #d6d1c8 50%, #eeece7 100%);
}

.hero-placeholder::after {
    content: "HERO IMAGE";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 10px DM Mono, monospace;
    letter-spacing: .25em;
    color: #777;
}

/* Casual image-saving protection */
img.portfolio-protected,
.project-hero img,
.gallery img,
.card-media img,
.featured-media img,
.hero-image {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.project-hero,
.gallery figure,
.card-media,
.featured-media,
.hero-image-section {
    user-select: none;
    -webkit-user-select: none;
}