:root { --ink:#172124; --paper:#f3f1eb; --lime:#d9ff57; --line:#c9c7bf; --muted:#657073; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; } a { color:inherit; text-decoration:none; }
.site-header, footer { display:flex; justify-content:space-between; align-items:center; padding:22px 5vw; font:500 .7rem/1 'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase; }
.site-header { border-bottom:1px solid var(--line); } .wordmark { font-weight:500; font-size:.84rem; } nav { display:flex; gap:28px; } nav a:hover,.header-link:hover { color:var(--muted); } .header-link span,.email-link span { color:#688400; font-size:1rem; }
.hero,.section { padding:clamp(75px,11vw,155px) 5vw; } .hero { min-height:76vh; display:flex; flex-direction:column; justify-content:space-between; } .eyebrow { margin:0; color:var(--muted); font:500 .7rem/1 'DM Mono',monospace; letter-spacing:.055em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1 { max-width:1080px; margin:8vh 0 5vh; font-size:clamp(3.2rem,8.5vw,8.6rem); line-height:.96; letter-spacing:-.075em; font-weight:700; } h2 { font-size:clamp(2.8rem,5.7vw,6.5rem); line-height:.98; letter-spacing:-.07em; font-weight:700; } em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.08em; } .hero-footer { display:flex; align-items:end; justify-content:space-between; gap:28px; } .hero-footer p,.section-note { max-width:360px; margin:0; color:var(--muted); font-size:.92rem; line-height:1.7; } .round-link { display:grid; width:56px; height:56px; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:1.5rem; transition:.2s; } .round-link:hover { background:var(--ink); color:var(--paper); transform:translateY(4px); }
.section { border-top:1px solid var(--line); } .section-heading { display:flex; justify-content:space-between; gap:30px; margin-bottom:54px; }.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 24px; }.project { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }.project:focus-visible { outline:3px solid #7e9e00; outline-offset:7px; }.project-visual { height:clamp(230px,31vw,440px); padding:20px; display:flex; align-items:end; background:linear-gradient(145deg,#253d40,#8bac7c); color:white; position:relative; overflow:hidden; }.project-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }.project-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,20,21,.03),rgba(13,20,21,.28)); pointer-events:none; }.project:nth-child(2) .project-visual { background:linear-gradient(145deg,#d9ff57,#859448); color:var(--ink); }.project:nth-child(3) .project-visual { background:linear-gradient(145deg,#e5b47e,#743f44); }.project:nth-child(4) .project-visual { background:linear-gradient(145deg,#b8c5ca,#3b5058); }.project-index { position:absolute; z-index:1; top:18px; right:20px; padding:5px 6px; background:rgba(20,28,30,.58); color:white; font:500 .7rem 'DM Mono',monospace; }.project-initials { position:relative; z-index:1; font:500 clamp(3rem,8vw,7rem)/.8 'DM Mono',monospace; letter-spacing:-.1em; }.project-info { padding-top:17px; display:flex; justify-content:space-between; gap:15px; }.project-title { margin:0; font-size:1.08rem; font-weight:700; }.project-meta { margin:8px 0 0; color:var(--muted); font-size:.82rem; }.project-arrow { font-size:1.3rem; }.project:hover .project-visual { filter:saturate(1.08); }.project:hover .project-visual img { transform:scale(1.04); }.project:hover .project-arrow { transform:translate(3px,-3px); }.project-dialog { width:min(880px,calc(100% - 32px)); max-height:min(850px,calc(100% - 40px)); padding:clamp(24px,5vw,54px); border:0; background:var(--paper); color:var(--ink); box-shadow:0 30px 90px rgba(0,0,0,.4); }.project-dialog::backdrop { background:rgba(13,22,23,.72); backdrop-filter:blur(4px); }.dialog-close { position:absolute; top:17px; right:17px; display:grid; width:38px; height:38px; place-items:center; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); cursor:pointer; font-size:1.5rem; line-height:1; }.dialog-image { display:block; width:100%; max-height:380px; margin:0 0 34px; object-fit:cover; }.project-dialog h2 { margin:15px 0 25px; font-size:clamp(2.5rem,5vw,4.8rem); }.dialog-description { max-width:680px; color:var(--muted); font-size:1.05rem; line-height:1.7; }.project-dialog h3 { margin:32px 0 11px; font-size:.76rem; font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:.06em; }.project-dialog ul { margin:0; padding-left:20px; line-height:1.75; }.dialog-tools { display:flex; flex-wrap:wrap; gap:9px; }.dialog-tools span { padding:9px 12px; border:1px solid var(--line); border-radius:50px; font:500 .68rem 'DM Mono',monospace; text-transform:uppercase; }
.about { display:grid; grid-template-columns:1fr 2fr; gap:12vw; }.about-copy { max-width:570px; margin:32px 0; color:var(--muted); line-height:1.75; font-size:1rem; }.capabilities { display:flex; flex-wrap:wrap; gap:9px; }.capabilities span { padding:9px 12px; border:1px solid var(--line); border-radius:50px; font:500 .68rem 'DM Mono',monospace; text-transform:uppercase; }.contact { background:var(--ink); color:var(--paper); }.contact .eyebrow { color:#9ba4a4; }.contact-layout { margin-top:60px; display:flex; align-items:end; justify-content:space-between; gap:45px; }.email-link { display:inline-block; margin-top:42px; padding-bottom:7px; border-bottom:1px solid #9ba4a4; font-size:clamp(1rem,2vw,1.5rem); }.qr-card { width:min(100%,360px); display:flex; gap:18px; align-items:center; padding:18px; background:#e7e5df; color:var(--ink); }.qr-placeholder { flex:none; display:grid; place-items:center; width:98px; height:98px; background:repeating-conic-gradient(#172124 0 25%,#f3f1eb 0 50%) 50%/18px 18px; color:transparent; }.qr-title { margin:0 0 7px; font-size:.82rem; font-weight:800; }.qr-caption { margin:0; color:#657073; font-size:.7rem; line-height:1.55; }.qr-caption code { font-size:.65rem; } footer { color:var(--muted); border-top:1px solid #344144; background:var(--ink); color:#aab3b3; }
@media (max-width:680px) { .site-header { padding:18px 6vw; }.header-link { display:none; } nav { gap:16px; } .hero,.section { padding-left:6vw; padding-right:6vw; } .project-grid,.about { grid-template-columns:1fr; } .section-heading,.contact-layout { display:block; } .section-note { margin-top:18px; } .contact-layout { margin-top:38px; } .qr-card { margin-top:45px; } footer { align-items:flex-start; flex-direction:column; gap:12px; } }