*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px}body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;line-height:1.6;color:#222;background-color:#fff;background-image:radial-gradient(circle at 25px 25px, rgba(0,0,0,0.01) 1px, transparent 0),radial-gradient(circle at 75px 75px, rgba(0,0,0,0.01) 1px, transparent 0);background-size:100px 100px;height:100vh;height:100dvh;overflow:hidden;position:fixed;width:100%}@media (max-width: 768px){body{position:static;overflow-y:auto;height:auto;min-height:100vh;min-height:100dvh}}.spa-section,.page-content{user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:linear-gradient(180deg, #f8f8f8, #e8e8e8);border-left:1px solid #ddd}::-webkit-scrollbar-thumb{background:linear-gradient(180deg, #666, #888);border-radius:5px;border:2px solid transparent;background-clip:padding-box;transition:background 0.3s ease}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, #444, #666);background-clip:padding-box}::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg, #333, #555);background-clip:padding-box}*{scrollbar-width:thin;scrollbar-color:#777 #eee}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.1;margin-bottom:0.5rem;letter-spacing:-0.02em}h1{font-size:clamp(2rem, 5vw, 3rem);margin-bottom:0.75rem}h2{font-size:clamp(1.5rem, 4vw, 2rem);margin-top:1rem;margin-bottom:0.75rem}h3{font-size:clamp(1.1rem, 2.5vw, 1.3rem);margin-bottom:0.5rem}p{margin-bottom:0.75rem;max-width:none;font-size:clamp(0.9rem, 2vw, 1rem)}a{color:#222;text-decoration:none;border-bottom:1px solid transparent;transition:border-bottom-color 0.2s ease}a:hover{border-bottom-color:#222}:root{--header-height: 60px}.wrapper{width:100%;padding:0 10%;margin:0}.site-header{padding:0.75rem 0;border-bottom:1px solid #eee;height:var(--header-height);display:flex;align-items:center;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-shrink:0}.site-header .wrapper{display:flex;justify-content:space-between;align-items:center}.site-title{font-size:1.6rem;font-weight:500;letter-spacing:-0.02em;text-transform:lowercase;position:relative}.site-title::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#333;transition:width 0.3s ease}.site-title:hover::after{width:100%}.site-nav .trigger{display:flex;gap:2.5rem}.page-link{font-weight:400;letter-spacing:0.02em;position:relative;text-transform:lowercase;transition:all 0.3s ease}.page-link::before{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:0;height:2px;background:#333;transition:width 0.3s ease}.page-link:hover::before{width:100%}.page-link.active{border-bottom-color:transparent}.page-link.active::before{width:100%;background:#333}.mobile-menu-toggle{display:none;flex-direction:column;justify-content:space-around;width:28px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001}@media (max-width: 768px){.mobile-menu-toggle{display:flex}}.mobile-menu-toggle span{width:100%;height:2px;background:#333;border-radius:2px;transition:all 0.3s ease}.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}.mobile-menu-toggle.active span:nth-child(2){opacity:0}.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px, -7px)}.page-content{height:calc(100vh - var(--header-height));height:calc(100dvh - var(--header-height));padding:0;display:flex;flex-direction:column;overflow:hidden}@media (max-width: 768px){.page-content{height:auto;min-height:calc(100vh - var(--header-height));min-height:calc(100dvh - var(--header-height));overflow:visible}}.page{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.page-header{text-align:center;padding:clamp(0.5rem, 1.5vh, 1rem) 0 clamp(0.25rem, 1vh, 0.5rem) 0;flex:0 0 auto;border-bottom:1px solid #eee;margin-bottom:clamp(0.25rem, 1vh, 0.5rem)}.page-title{font-size:clamp(1.2rem, 3vw, 1.6rem);margin-bottom:0.25rem;font-weight:400;letter-spacing:0.05em;text-transform:uppercase;color:#333;position:relative}.page-title::after{content:'';position:absolute;bottom:-0.4rem;left:50%;transform:translateX(-50%);width:40px;height:2px;background:linear-gradient(90deg, #333, #666, #333)}.page .page-content{flex:1;overflow-y:auto}.home{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(1rem, 3vh, 2rem) 0}.hero-section{text-align:center;flex:0 0 auto;padding:clamp(0.5rem, 2vh, 1.5rem) 0}.hero-section h1{font-size:clamp(1.8rem, 5vw, 3rem);margin-bottom:clamp(0.5rem, 1.5vh, 1rem);font-weight:600;letter-spacing:-0.03em;background:linear-gradient(135deg, #333, #666);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.site-description{font-size:clamp(0.9rem, 2vw, 1.1rem);color:#666;max-width:min(600px, 90%);margin:0 auto clamp(1rem, 2vh, 1.5rem) auto;line-height:1.5;font-weight:400}.about-section{text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;margin:0;padding:clamp(0.5rem, 2vh, 1.5rem) 0;max-width:800px;margin:0 auto}.about-section h2{font-size:clamp(1.3rem, 3vw, 1.8rem);margin-bottom:clamp(0.5rem, 2vh, 1rem);font-weight:500;letter-spacing:0.02em;position:relative}.about-section h2::after{content:'';position:absolute;bottom:-0.5rem;left:50%;transform:translateX(-50%);width:40px;height:2px;background:linear-gradient(90deg, transparent, #666, transparent)}.about-section p{max-width:700px;margin:0 auto clamp(0.5rem, 1.5vh, 1rem) auto;font-size:clamp(0.85rem, 1.8vw, 0.95rem);line-height:1.6;color:#555}.featured-work{text-align:center;flex:0 0 auto;padding:clamp(1rem, 3vh, 2rem) 0;width:100%}.featured-work h2{font-size:clamp(1.3rem, 3vw, 1.8rem);margin-bottom:clamp(0.75rem, 2vh, 1.5rem);font-weight:500}.work-grid{display:grid;grid-template-columns:repeat(2, minmax(200px, 400px));gap:clamp(1.5rem, 4vw, 3rem);justify-content:center;margin:0 auto;max-width:900px}.work-item{text-align:center}.work-item img{width:100%;height:clamp(120px, 18vh, 200px);object-fit:cover;margin-bottom:0.75rem;transition:opacity 0.3s ease;border-radius:4px}.work-item:hover img{opacity:0.8}.work-item h3{margin-bottom:0.25rem;font-size:clamp(1rem, 2.5vw, 1.2rem)}.quick-links{margin:6rem 0}.link-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:1rem;margin-top:2rem}.link-grid a{padding:1rem;text-align:center;border:1px solid #eee;transition:all 0.3s ease}.link-grid a:hover{background-color:#f5f5f5;border-color:#222}.fullscreen-gallery{height:calc(100vh - var(--header-height));height:calc(100dvh - var(--header-height));background:#000;color:white;position:relative;width:100vw;margin-left:calc(-50vw + 50%);overflow:hidden}.gallery-intro{position:absolute;top:0.5rem;left:50%;transform:translateX(-50%);text-align:center;z-index:10;padding:0}.gallery-intro p{display:none}.swipe-hint{font-size:0.75rem;color:rgba(255,255,255,0.4);letter-spacing:0.05em}.gallery-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;padding:0}.gallery-slides{width:100%;height:100%;position:relative}.gallery-slide{display:none;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;transition:opacity 0.5s ease-in-out}.gallery-slide.active{display:flex;opacity:1;align-items:center;justify-content:center;padding:2rem 4rem 4rem}.gallery-slide .photo-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0.5rem;max-width:100%;width:100%;height:100%;max-height:calc(100% - 4rem)}.gallery-slide .photo-item{cursor:pointer;overflow:hidden;border-radius:0;aspect-ratio:auto;background:#000;height:100%;min-height:0;min-width:0}.gallery-slide .photo-item img{width:100%;height:100%;object-fit:contain;transition:transform 0.3s ease, opacity 0.3s ease;opacity:0}.gallery-slide .photo-item img.loaded{opacity:1}.gallery-slide .photo-item:hover img{transform:scale(1.05)}.gallery-navigation{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:0 0.5rem;pointer-events:none;z-index:20}.nav-btn{pointer-events:all;background:transparent;border:none;color:rgba(255,255,255,0.6);font-size:2.5rem;width:50px;height:50px;border-radius:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;visibility:visible}.nav-btn:hover{color:#fff}.nav-btn:active{transform:scale(0.95)}.nav-btn.hidden{visibility:hidden}.gallery-info{position:absolute;bottom:0.75rem;left:50%;transform:translateX(-50%);text-align:center;z-index:10;max-width:500px;padding:0 1rem}.gallery-info h3{font-size:1.1rem;margin-bottom:0.25rem;font-weight:400;letter-spacing:0.05em}.gallery-info p{color:rgba(255,255,255,0.6);margin-bottom:0.25rem;font-size:0.8rem;line-height:1.3;display:none}.slide-counter{color:rgba(255,255,255,0.5);font-size:0.75rem;font-family:monospace;letter-spacing:0.1em}.modal{background-color:rgba(0,0,0,0.98)}.modal .close{color:white;font-size:2rem;top:1rem;right:1.5rem;z-index:1001}.modal-caption{background-color:transparent;color:rgba(255,255,255,0.7);padding:0.5rem 1rem;border-radius:0;max-width:80%;font-size:0.85rem}@media (max-width: 768px){.gallery-intro{top:0.25rem}.fullscreen-gallery{height:calc(100vh - var(--header-height));height:calc(100dvh - var(--header-height));overflow:hidden}.gallery-container{height:100%;padding:0}.gallery-slides{height:100%}.gallery-slide{height:100%}.gallery-slide.active{padding:0.5rem 2.5rem;position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:flex-start;justify-content:center}.gallery-slide .photo-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0.25rem;width:100%;height:100%}.gallery-slide .photo-item{aspect-ratio:unset;height:100%;width:100%;min-height:0;min-width:0;overflow:hidden}.gallery-slide .photo-item img{object-fit:cover;width:100%;height:100%}.gallery-navigation{padding:0;position:fixed;top:50%;left:0;right:0;transform:translateY(-50%)}.nav-btn{width:36px;height:36px;font-size:1.3rem;background:rgba(0,0,0,0.6);color:rgba(255,255,255,0.9);border-radius:4px}.nav-btn:hover{background:rgba(0,0,0,0.7);color:#fff}.gallery-info{display:none}}@media (max-width: 480px){.gallery-slide .photo-grid{gap:0.15rem;grid-template-rows:calc(50% - 0.075rem) calc(50% - 0.075rem)}.gallery-slide.active{padding:0.25rem 2rem}.nav-btn{width:28px;height:28px;font-size:1rem}}.gallery-container{touch-action:pan-x;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.gallery-slide .photo-item img:not(.loaded){background:linear-gradient(45deg, #111, #222, #111);background-size:400% 400%;animation:loading-shimmer 2s ease-in-out infinite}@keyframes loading-shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.9);cursor:pointer}.modal-content{display:block;margin:auto;max-width:90%;max-height:90%;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.close{position:absolute;top:2rem;right:2rem;color:white;font-size:2rem;font-weight:bold;cursor:pointer}.modal-caption{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:white;text-align:center;padding:1rem;background-color:rgba(0,0,0,0.7)}.projects-container{width:100%;height:100%;display:flex;flex-direction:column;padding:0;overflow:hidden}.projects-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:clamp(0.5rem, 1.5vw, 1rem);flex:1;align-content:start;overflow-y:auto;padding:0.5rem}.project-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.08);transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);border:1px solid rgba(255,255,255,0.1)}.project-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 12px 40px rgba(0,0,0,0.12)}.project-window{border:1px solid #ddd;border-radius:6px;overflow:hidden}.window-header{background:#f0f0f0;padding:0.35rem 0.75rem;display:flex;align-items:center;border-bottom:1px solid #ddd;position:relative}.window-title{font-family:monospace;font-size:clamp(0.7rem, 1.2vw, 0.85rem);color:#666}.project-content{padding:0.5rem}.project-image img{width:100%;height:clamp(60px, 10vh, 100px);object-fit:cover;margin-bottom:0.35rem;border-radius:3px}.project-info h3{margin-bottom:0.25rem;font-size:clamp(0.8rem, 1.3vw, 1rem)}.project-info p{font-size:clamp(0.7rem, 1.1vw, 0.85rem);line-height:1.4;margin-bottom:0.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.project-links{margin:0.5rem 0}.github-link{display:inline-block;padding:0.35rem 0.75rem;background:#222;color:white;border-radius:4px;text-decoration:none;transition:background-color 0.3s ease;font-size:clamp(0.7rem, 1.1vw, 0.85rem)}.github-link:hover{background:#444;border-bottom:none}.project-tags{display:flex;gap:0.35rem;flex-wrap:wrap;margin-top:0.5rem}.tag{padding:0.15rem 0.4rem;background:#f0f0f0;font-size:clamp(0.6rem, 1vw, 0.75rem);border-radius:3px;color:#666}.contact-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(0.5rem, 2vh, 1rem) 0;overflow:hidden}.contact-intro{text-align:center;margin-bottom:clamp(0.5rem, 2vh, 1rem);flex:0 0 auto}.contact-intro h1{margin-bottom:0.25rem;font-size:clamp(1.3rem, 3vw, 1.8rem)}.contact-intro p{margin-bottom:0;font-size:clamp(0.85rem, 1.8vw, 0.95rem)}.contact-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));gap:clamp(1rem, 3vw, 2rem);flex:1;align-items:start;overflow-y:auto}.contact-info h2,.contact-info h3{margin-top:0;font-size:clamp(1.1rem, 2.5vw, 1.4rem)}.contact-form-container h2,.contact-form-container h3{margin-top:0;margin-bottom:clamp(0.5rem, 1.5vh, 1rem);font-size:clamp(1.1rem, 2.5vw, 1.4rem)}.contact-item{margin-bottom:clamp(1rem, 2vh, 1.5rem)}.contact-item h3,.contact-item h4{font-size:clamp(0.95rem, 2vw, 1.1rem);margin-bottom:0.25rem;color:#666}.social-grid{display:grid;gap:clamp(0.5rem, 1.5vh, 1rem);margin-top:clamp(0.5rem, 1.5vh, 1rem)}.social-link{display:block;padding:clamp(0.5rem, 1.5vh, 1rem);border:1px solid #eee;transition:all 0.3s ease}.social-link:hover{background:#f5f5f5;border-color:#222;border-bottom:1px solid #222}.social-link span{display:block;font-weight:500}.social-link small{color:#666}.contact-form{background:linear-gradient(135deg, #f8f9fa, #f1f3f4);padding:clamp(1.5rem, 4vw, 2.5rem);border-radius:16px;border:1px solid rgba(0,0,0,0.05);box-shadow:0 8px 32px rgba(0,0,0,0.06)}.form-group{margin-bottom:clamp(1rem, 3vh, 1.8rem)}.form-group label{display:block;margin-bottom:0.6rem;font-weight:600;color:#333;font-size:0.95rem;letter-spacing:0.02em}.form-group input,.form-group textarea{width:100%;padding:1rem;border:2px solid #e1e5e9;border-radius:8px;font-size:1rem;transition:all 0.3s ease;background:white}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#333;box-shadow:0 0 0 3px rgba(51,51,51,0.1);transform:translateY(-1px)}.submit-btn{background:linear-gradient(135deg, #333, #555);color:white;padding:1rem 2.5rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;letter-spacing:0.02em;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.2)}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.3);background:linear-gradient(135deg, #222, #444)}.form-note{margin-top:1rem;color:#666}.form-status{margin-bottom:2rem;padding:1rem;border-radius:4px;animation:slideIn 0.3s ease-out;text-align:center}.status-success{background:#d4edda;border:1px solid #c3e6cb;color:#155724}.status-error{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.status-success h3,.status-error h3{margin-bottom:0.5rem;font-size:1.1rem}.status-success p,.status-error p{margin:0;font-size:0.95rem}.submit-btn{position:relative;overflow:hidden}.submit-btn:disabled{background:#666;cursor:not-allowed}.btn-loading{display:none}@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.thank-you-container{text-align:center;max-width:600px;margin:0 auto;padding:4rem 2rem}.back-links{margin-top:2rem;display:flex;gap:1rem;justify-content:center}.btn{display:inline-block;padding:0.75rem 1.5rem;border:1px solid #222;color:#222;text-decoration:none;border-radius:4px;transition:all 0.3s ease}.btn:hover{background:#222;color:white;border-bottom:1px solid #222}@media (max-width: 768px){.wrapper{padding:0 5%}.site-header .wrapper{flex-direction:row}.mobile-menu-toggle{display:flex}.site-nav .trigger{position:fixed;top:60px;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);flex-direction:column;padding:1rem 0;gap:0;transform:translateY(-100%);opacity:0;transition:all 0.3s ease;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,0.1)}.site-nav .trigger.active{transform:translateY(0);opacity:1;pointer-events:all}.site-nav .trigger .page-link{padding:1rem 2rem;display:block;text-align:center;border-bottom:1px solid #eee}.site-nav .trigger .page-link:last-child{border-bottom:none}.hero-section h1{font-size:clamp(1.8rem, 8vw, 2.5rem)}.projects-grid{grid-template-columns:repeat(2, 1fr);gap:0.75rem}.work-grid{grid-template-columns:repeat(2, 1fr);gap:1rem}.contact-grid{grid-template-columns:1fr;gap:1rem}.about-section p{font-size:0.85rem;line-height:1.5}.gallery-slide .photo-grid{grid-template-columns:1fr;grid-template-rows:1fr 1fr;max-height:55vh;gap:0.5rem}.gallery-navigation{padding:0 1rem}.gallery-info{bottom:clamp(1rem, 3vh, 2rem);padding:0 1rem}}@media (max-width: 480px){.hero-section h1{font-size:clamp(1.5rem, 10vw, 2rem)}h2{font-size:clamp(1.3rem, 5vw, 1.5rem)}.contact-form{padding:1rem}.wrapper{padding:0 4%}.projects-grid{grid-template-columns:1fr;gap:1rem}.gallery-slide .photo-grid{gap:0.25rem;max-height:55vh}.gallery-slide .photo-item{aspect-ratio:16/10}}@media (max-width: 320px){.wrapper{padding:0 3%}.hero-section h1{font-size:1.5rem}.site-title{font-size:1.2rem}}@media (max-height: 500px) and (orientation: landscape){.home{padding:0.5rem 0}.hero-section{padding:0.25rem 0}.about-section{padding:0.5rem 0}.about-section p{margin-bottom:0.25rem}.featured-work{margin:0.5rem 0}.gallery-slide.active{padding:3rem 1rem 2rem}.gallery-slide .photo-grid{max-height:50vh;grid-template-columns:1fr 1fr}}