@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap');
:root { --forest:#193934; --deep:#102924; --cream:#f5f0e4; --paper:#fbfaf5; --gold:#f4b94b; --sage:#c4c9ad; --ink:#162a25; font-family:Manrope,system-ui,sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; } a { color:inherit; } .site-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1180px; margin:auto; padding:14px 30px; } .brand,.footer-brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-family:Fraunces,Georgia,serif; font-size:1.2rem; font-weight:600; } .brand img { width:54px; height:54px; border-radius:15px; } nav { display:flex; gap:27px; } nav a { color:#3d514b; font-size:.9rem; font-weight:700; text-decoration:none; } nav a:hover,.text-link:hover { color:#a2611d; }
.hero { display:grid; grid-template-columns:1.08fr .92fr; max-width:1180px; margin:16px auto 0; min-height:650px; overflow:hidden; background:var(--forest); color:#fff; border-radius:32px; } .hero-copy { display:flex; flex-direction:column; justify-content:center; padding:72px; } .eyebrow { margin:0 0 14px; color:#a8d0b8; font-family:"DM Mono",monospace; font-size:.72rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; } h1,h2,h3 { font-family:Fraunces,Georgia,serif; line-height:.98; letter-spacing:-.04em; } h1 { max-width:650px; margin:0; font-size:clamp(3.7rem,6.8vw,6.2rem); } .intro { max-width:560px; margin:29px 0 0; color:#d6e5dc; font-size:1.05rem; line-height:1.7; } .hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; } .button { padding:14px 20px; border-radius:999px; font-size:.91rem; font-weight:700; text-decoration:none; } .button-primary { background:var(--gold); color:#342510; } .button-secondary { border:1px solid #9eb9aa; color:#fff; }.hero-photo { display:grid; min-height:100%; margin:0; overflow:hidden; place-items:center; background:#e5e5e4; } .hero-photo img { width:100%; height:100%; min-height:650px; object-fit:contain; }
.work { max-width:1180px; margin:0 auto; padding:140px 30px; }.section-heading { max-width:630px; }.section-heading .eyebrow,.about .eyebrow { color:#87651c; } h2 { margin:0; font-size:clamp(2.7rem,5vw,4.7rem); } .section-heading > p:last-child,.about p:not(.eyebrow) { color:#496057; line-height:1.75; } .work-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; margin-top:52px; }.work-card { border-radius:22px; overflow:hidden; }.work-card-tall { display:grid; grid-template-columns:1fr 1fr; min-height:440px; background:#d7ddc8; }.work-card-tall img { width:100%; height:100%; object-fit:cover; }.work-card-tall div { display:flex; flex-direction:column; justify-content:end; padding:38px; } .work-card-tall .eyebrow { color:#315c50; font-weight:700; }.work-card h3 { margin:0; font-size:clamp(1.85rem,3vw,2.7rem); }.work-card-copy { display:flex; flex-direction:column; justify-content:center; padding:47px; background:#ead0a1; }.work-card-copy .eyebrow { color:#795f26; }.work-card-copy p:not(.eyebrow) { max-width:25rem; color:#645238; line-height:1.7; }.text-link { margin-top:18px; color:#442f16; font-size:.93rem; font-weight:700; text-decoration:none; }
.gallery { padding:0 max(30px,calc((100vw - 1120px)/2)) 140px; }.gallery-grid { display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:22px; margin-top:50px; }.gallery-item { margin:0; }.gallery-item img { display:block; width:100%; height:auto; border-radius:22px; }.gallery-item figcaption { padding:13px 2px 0; color:#334b44; font-family:Fraunces,Georgia,serif; font-size:1.1rem; line-height:1.25; }.gallery-dragon img { object-position:center; }.gallery-shawshank img { object-position:center; }.gallery-goonies img { object-position:center; }
.about { display:grid; grid-template-columns:1fr 1.35fr; align-items:center; gap:80px; padding:100px max(30px,calc((100vw - 1120px)/2)); background:var(--sage); }.about-mark { display:grid; width:clamp(160px,18vw,210px); aspect-ratio:1; place-items:center; } .about-mark img { display:block; width:100%; height:100%; object-fit:cover; border-radius:30px; }.about h2 { max-width:760px; }.about p:not(.eyebrow) { max-width:670px; font-size:1.03rem; }
.contact { display:grid; grid-template-columns:.9fr 1.1fr; gap:40px 70px; padding:120px max(30px,calc((100vw - 1120px)/2)); color:#fff; background:var(--deep); }.contact h2 { font-size:clamp(2.7rem,5vw,4.3rem); }.contact-links { display:grid; border-top:1px solid #42655b; }.contact-links a { display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid #42655b; font-size:1.05rem; font-weight:700; text-decoration:none; }.contact-links span { color:#a9c2b4; font-size:.83rem; font-weight:400; }.etsy-note { grid-column:2; margin:0; color:#a9c2b4; font-size:.83rem; line-height:1.6; } footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:27px max(30px,calc((100vw - 1120px)/2)); color:#dae4db; background:#0d211d; } .footer-brand { font-size:1rem; }.footer-brand img { width:36px; height:36px; border-radius:10px; }.footer-brand + p { margin:0; font-size:.77rem; }
@media (max-width:760px) { .site-header { padding:14px 20px; } nav { gap:15px; } nav a { font-size:.77rem; }.brand span { display:none; }.hero { grid-template-columns:1fr; margin:0; border-radius:0; }.hero-copy { min-height:530px; padding:60px 25px; }.hero-photo { min-height:410px; }.hero-photo img { min-height:410px; }.work { padding:85px 25px; }.work-grid,.work-card-tall,.gallery-grid,.about,.contact { grid-template-columns:1fr; }.work-card-tall { min-height:0; }.work-card-tall img { max-height:390px; }.work-card-tall div { min-height:260px; }.about { gap:35px; padding:80px 25px; }.about-mark { width:160px; }.contact { padding:80px 25px; }.etsy-note { grid-column:auto; } footer { align-items:flex-start; flex-direction:column; padding:28px 25px; } }