:root { --ink:#1a1b18; --paper:#ffffff; --muted:#77786f; --line:#d8d8d0; --olive:#b8c39d; --lilac:#c6bbdc; --sand:#ddc8a5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Poppins, sans-serif; }
a { color:inherit; text-decoration:none; }
.container { width:min(1120px, calc(100% - 48px)); margin:auto; }
.header { min-height:90px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.logo { font-family:Poppins, sans-serif; font-size:.62rem; line-height:1.35; font-weight:400; letter-spacing:.02em; }
.nav { display:flex; gap:26px; font-size:.8rem; }.nav a:hover, .text-link:hover, .contact h2 a:hover { opacity:.55; }
.menu-button { display:none; background:none; border:0; font:inherit; cursor:pointer; }
.hero { position:relative; isolation:isolate; min-height:650px; padding:112px 0 58px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }.hero::before { content:""; position:absolute; z-index:-1; width:780px; height:610px; top:-38px; left:29%; border-radius:44% 56% 47% 53% / 37% 43% 57% 63%; background:radial-gradient(circle at 16% 72%, #ff7c17 0, #ff9a38 14%, transparent 40%), radial-gradient(circle at 52% 61%, rgba(255,181,77,.88) 0, rgba(255,210,132,.66) 34%, transparent 67%), radial-gradient(circle at 78% 45%, rgba(255,229,179,.9) 0, transparent 57%); filter:blur(2px); opacity:.9; }
.eyebrow, .section-label, .section-heading>p, .project-number, .project-info p, .contact-footer { font-family:"DM Mono", monospace; font-size:.68rem; letter-spacing:.02em; }
.eyebrow { color:var(--muted); }.hero h1 { margin:20px 0; font-size:clamp(3.2rem, 7.2vw, 6.8rem); line-height:.98; letter-spacing:-.07em; font-weight:600; }.hero h1 em { font-family:inherit; font-style:normal; font-weight:600; }
.hero-bottom { display:flex; justify-content:space-between; align-items:end; }.hero-bottom p { max-width:310px; font-size:.9rem; line-height:1.75; color:var(--muted); }.round-link { display:grid; place-items:center; width:52px; height:52px; border:1px solid var(--ink); border-radius:50%; font-size:1.35rem; transition:.25s; }.round-link:hover { background:var(--ink); color:var(--paper); transform:translateY(4px); }
.section-grid { padding:110px 0; display:grid; grid-template-columns:28% 1fr; gap:35px; border-top:1px solid var(--line); }.section-label { margin:4px 0; color:var(--muted); }.about { position:relative; isolation:isolate; overflow:hidden; }.about::before { content:""; position:absolute; z-index:-1; width:310px; height:235px; right:-105px; bottom:40px; border-radius:58% 42% 60% 40% / 42% 56% 44% 58%; background:radial-gradient(circle at 22% 66%, rgba(255,130,32,.55) 0, rgba(255,170,68,.42) 23%, transparent 58%), radial-gradient(circle at 68% 50%, rgba(255,221,159,.62) 0, transparent 62%); filter:blur(3px); opacity:.7; }.contact h2 { max-width:680px; margin:0; font-size:clamp(2rem, 4.2vw, 4rem); line-height:1.1; letter-spacing:-.06em; font-weight:500; }.about-copy { max-width:690px; margin-bottom:32px; }.about-copy p { margin:0 0 20px; line-height:1.85; font-size:.92rem; color:#53544d; }.about-copy p:last-child { margin-bottom:0; }.text-link { font-size:.85rem; border-bottom:1px solid var(--ink); padding-bottom:5px; }.text-link span { margin-left:8px; }
.projects { padding:20px 0 130px; }.section-heading { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:20px; color:var(--muted); }.section-heading p { margin:0; }.project-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; padding-top:18px; }.project { position:relative; min-height:410px; padding:20px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s; }.project:hover { transform:translateY(-8px); }.project-olive{background:var(--olive)}.project-lilac{background:var(--lilac)}.project-sand{background:var(--sand)}.project-number{color:#5e6350}.project-info h3{margin:0 0 5px;font-size:1.25rem;letter-spacing:-.05em}.project-info p{margin:0;color:#55554e}.project-arrow{position:absolute;top:18px;right:20px;font-size:1.1rem}.project-art{position:absolute;inset:80px 20px 95px;display:grid;place-items:center}.art-circles span{position:absolute;width:115px;height:115px;border-radius:50%;background:#e8e3bd;mix-blend-mode:multiply}.art-circles span:nth-child(1){transform:translate(-45px,-40px)}.art-circles span:nth-child(2){transform:translate(42px,-17px);background:#73805e}.art-circles span:nth-child(3){transform:translate(0,50px);background:#e5a777}.art-window{border:14px solid #eee9df;width:155px;height:190px;align-content:center;justify-items:center}.art-window span{height:100%;width:100%;background:linear-gradient(135deg,#716986 49%,#bbb0d0 50%)}.art-lines{gap:13px;width:75%;transform:rotate(-18deg)}.art-lines span{display:block;height:19px;background:#9b7358}.art-lines span:nth-child(2){margin-left:30px;background:#f2e5cf}.art-lines span:nth-child(3){margin-right:35px}.art-lines span:nth-child(4){margin-left:15px;background:#635f49}
.project-list .project{background:radial-gradient(circle at 18% 72%,#ff7c17 0,#ff9632 18%,transparent 47%),radial-gradient(circle at 72% 30%,#ffe0ad 0,#ffc46f 34%,#efa553 72%,#e98c30 100%)}.project-list .project-number,.project-list .project-info,.project-list .project-arrow{z-index:2;color:#1a1b18}.project-list .project-info{padding:30px 18px 0;margin:0 -20px -20px;background:linear-gradient(0deg,rgba(255,244,225,.96) 0%,rgba(255,244,225,.72) 70%,rgba(255,244,225,0) 100%)}.project-art.art-type{inset:64px 20px 82px;display:flex;align-items:center;justify-content:center;text-align:center}.art-type span{font-size:clamp(1.8rem,3vw,2.65rem);line-height:.92;letter-spacing:-.07em;font-style:normal;font-weight:700;color:#1a1b18}.project:nth-child(3) .art-type span{letter-spacing:-.045em}.project:nth-child(5) .art-type span{font-size:clamp(1.65rem,2.7vw,2.35rem)}
.project-peach{background:#edc1a5}.project-sky{background:#b8d4dc}.project-rose{background:#dfb5b2}.art-mark span{display:grid;place-items:center;width:150px;height:150px;border:2px solid #765443;border-radius:50%;font-family:Georgia,serif;font-size:5rem;color:#765443}.art-pages{width:140px;height:170px}.art-pages span{position:absolute;width:112px;height:148px;border:2px solid #3e656d;background:#dcecef;transform:rotate(-8deg)}.art-pages span:last-child{transform:translate(30px,22px) rotate(8deg);background:#86b4bf}.art-poster span{display:grid;place-items:center;width:142px;height:180px;background:#f1d9d3;color:#8a3f42;font-size:1.55rem;font-weight:600;letter-spacing:-.07em;transform:rotate(6deg)}

/* Creative editorial project-cover system */
.project-list .project{background:#f4f0e8;border:1px solid rgba(24,24,20,.16);overflow:hidden}.project-list .project-number{z-index:5;color:#1c1c18;font-size:.68rem;letter-spacing:.18em}.project-list .project-info{z-index:5;padding:23px 18px 17px;margin:0 -20px -20px;background:#f4f0e8;border-top:1px solid rgba(24,24,20,.16)}
.project-art.art-type{inset:54px 14px 94px;display:flex;align-items:flex-end;justify-content:flex-start;padding:19px;text-align:left;overflow:hidden;border:0;background:#ddd;isolation:isolate}
.art-type span{position:relative;z-index:4;font-family:Poppins,sans-serif;font-size:clamp(1.65rem,2.7vw,2.45rem);line-height:.82;letter-spacing:-.085em;font-style:normal;font-weight:700;color:inherit;mix-blend-mode:normal;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.art-type::before,.art-type::after{content:"";position:absolute;z-index:1;transition:transform .55s cubic-bezier(.16,1,.3,1),border-radius .55s ease}
.project:hover .art-type span{transform:translateY(-4px)}.project:hover .art-type::before{transform:translate3d(7px,-7px,0) rotate(var(--hover-rotate,0deg))}.project:hover .art-type::after{transform:translate3d(-6px,6px,0) rotate(var(--after-rotate,0deg))}

/* Social media — a cropped, kinetic content feed */
.project:nth-child(1) .art-type{color:#fff;background:#172c25}.project:nth-child(1) .art-type::before{width:142px;height:190px;right:-25px;top:-25px;background:repeating-linear-gradient(0deg,#f5a46c 0 24px,#172c25 24px 27px);transform:rotate(9deg);--hover-rotate:13deg}.project:nth-child(1) .art-type::after{width:76px;height:76px;right:62px;top:43px;border:14px solid #f6eee3;border-radius:50%;box-shadow:-68px 83px 0 -22px #f5a46c;--after-rotate:-8deg}

/* AI video — luminous portal and timeline signal */
.project:nth-child(2) .art-type{color:#f3f1ff;background:radial-gradient(circle at 73% 42%,#b7ffdd 0 3%,#6857ff 4% 17%,transparent 18%),linear-gradient(135deg,#11101c,#28234d 72%,#11101c)}.project:nth-child(2) .art-type::before{width:130px;height:130px;right:3px;top:8px;border:1px solid rgba(255,255,255,.72);border-radius:50% 50% 12% 50%;box-shadow:0 0 0 16px rgba(104,87,255,.18),0 0 46px rgba(183,255,221,.32);--hover-rotate:16deg}.project:nth-child(2) .art-type::after{width:118px;height:3px;right:18px;bottom:27px;background:linear-gradient(90deg,#b7ffdd 0 18%,rgba(255,255,255,.35) 18%);box-shadow:31px 0 0 -1px #b7ffdd;--after-rotate:0deg}

/* Logo — a bold mark caught between construction and identity */
.project:nth-child(3) .art-type{color:#23150f;background:#ef6f45}.project:nth-child(3) .art-type::before{width:132px;height:132px;right:-13px;top:4px;border:22px solid #f5dfbd;border-radius:50% 8% 50% 50%;transform:rotate(18deg);--hover-rotate:32deg}.project:nth-child(3) .art-type::after{width:64px;height:64px;right:49px;top:45px;background:#23150f;clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(-13deg);--after-rotate:-24deg}

/* Catalog — oversized editorial pages, cropped like a magazine spread */
.project:nth-child(4) .art-type{color:#142b31;background:#b9d8d6}.project:nth-child(4) .art-type::before{width:128px;height:176px;right:-17px;top:-15px;background:#f5f1e9;box-shadow:-18px 18px 0 #e44e36;transform:rotate(6deg);--hover-rotate:2deg}.project:nth-child(4) .art-type::after{width:63px;height:5px;right:34px;top:34px;background:#142b31;box-shadow:0 15px 0 -1px #142b31,0 43px 0 7px #b9d8d6,0 82px 0 -1px #142b31;transform:rotate(6deg);--after-rotate:2deg}

/* Poster & brochure — typographic poster wall with torn geometry */
.project:nth-child(5) .art-type{color:#fff7e9;background:#7d2535}.project:nth-child(5) .art-type::before{width:118px;height:172px;right:-4px;top:-12px;background:linear-gradient(153deg,#f0bb45 0 41%,#f7eee1 41% 44%,#161616 44% 72%,#e96545 72%);clip-path:polygon(13% 0,100% 7%,88% 100%,0 91%);--hover-rotate:-4deg}.project:nth-child(5) .art-type::after{width:54px;height:54px;right:55px;top:37px;border:10px solid #fff7e9;border-radius:50%;mix-blend-mode:difference;--after-rotate:18deg}

/* Final covers: real portfolio work, unified with the site's warm palette */
.project-art.art-type{inset:54px 14px 94px;padding:0;background:#d97839;color:#fff;border:0}
.project-list .project .project-art.art-type::before{content:"";position:absolute;inset:0;z-index:2;width:auto;height:auto;right:0;top:0;background:linear-gradient(180deg,rgba(27,31,22,.03) 28%,rgba(27,31,22,.86) 100%);border:0;border-radius:0;box-shadow:none;clip-path:none;transform:none;pointer-events:none}
.project-list .project .project-art.art-type::after{content:"";position:absolute;inset:0;z-index:1;width:auto;height:auto;right:0;top:0;border:0;border-radius:0;box-shadow:none;clip-path:none;background:rgba(221,115,54,.13);mix-blend-mode:color;transform:none;pointer-events:none}
.project-list .project:hover .project-art.art-type::before,.project-list .project:hover .project-art.art-type::after{transform:none}
.project-art.art-type img,.project-art.art-type video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.76) contrast(.96);transition:transform .65s cubic-bezier(.16,1,.3,1),filter .45s ease}
.project:hover .project-art.art-type img,.project:hover .project-art.art-type video{transform:scale(1.035);filter:saturate(.9) contrast(1)}
.project-art.art-type span{position:absolute;left:18px;bottom:17px;z-index:3;color:#fff;font-size:clamp(1.5rem,2.45vw,2.18rem);line-height:.88;letter-spacing:-.07em;text-shadow:0 2px 20px rgba(0,0,0,.2)}
.project:nth-child(1) .art-type,.project:nth-child(2) .art-type,.project:nth-child(3) .art-type,.project:nth-child(4) .art-type,.project:nth-child(5) .art-type{background:#d97839;color:#fff}
.project:nth-child(1) .art-type img{object-position:center 46%}.project:nth-child(2) .art-type video{object-position:center}.project:nth-child(3) .art-type img{object-fit:cover;object-position:center}.project:nth-child(4) .art-type img{object-position:center 28%}.project:nth-child(5) .art-type img{object-position:center 24%}
.contact { padding:85px 0 30px; border-top:1px solid var(--line); }.contact h2 { margin:25px 0 42px; }.contact h2 a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px; }.contact-details { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:95px; font-size:.9rem; }.contact-details a { display:flex; align-items:center; gap:9px; border-bottom:1px solid transparent; }.contact-details a:hover { border-color:var(--ink); }.mail-icon { width:17px; height:17px; flex:none; }.contact-footer { display:flex; justify-content:space-between; color:var(--muted); }.contact-footer p { margin:0; }.contact-footer div { display:flex; gap:18px; }
@media (max-width:680px) { .container{width:min(100% - 32px,1120px)}.header{min-height:70px}.menu-button{display:block;font-size:.78rem}.nav{display:none;position:absolute;top:70px;left:16px;right:16px;padding:18px;background:var(--ink);color:var(--paper);flex-direction:column;gap:15px;z-index:2}.nav.is-open{display:flex}.hero{min-height:580px;padding-top:82px}.hero::before{width:570px;height:500px;top:10px;left:5%;opacity:.7}.hero-bottom p{font-size:.82rem}.section-grid{grid-template-columns:1fr;padding:75px 0;gap:20px}.about::before{width:220px;height:170px;right:-90px;bottom:22px;opacity:.5}.projects{padding-bottom:75px}.project-list{grid-template-columns:1fr}.project{min-height:320px}.project-art{inset:55px 20px 80px}.contact{padding-top:65px}.contact h2{margin-bottom:38px}.contact-details{margin-bottom:72px;font-size:.8rem}.contact-footer{font-size:.6rem} }