:root{--background-dark: #141414;--background-light: #181818;--primary-red: #E50914;--text-white: #FFFFFF;--text-gray: #808080;--overlay-dark: rgba(0, 0, 0, .75);--overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, .9), transparent);--card-shadow: rgba(0, 0, 0, .2) 0px 3px 10px;--hover-shadow: rgba(0, 0, 0, .4) 0px 8px 20px;--transition-fast: .2s ease;--transition-smooth: .3s ease;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--max-width: 98vw;--content-padding: 1vw;--header-height: 70px}body{background-color:var(--background-dark);color:var(--text-white);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;color:var(--text-white)}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}p{margin:0;line-height:1.6;color:var(--text-white)}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--content-padding)}.text-gradient{background:linear-gradient(to top,var(--text-white),rgba(255,255,255,.8));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}a{color:var(--text-white);text-decoration:none;transition:opacity var(--transition-fast)}a:hover{opacity:.8}button{background:none;border:none;cursor:pointer;color:var(--text-white);transition:all var(--transition-fast)}button:hover{opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:1920px){:root{--content-padding: 2vw}}@media(max-width:1200px){:root{--content-padding: 3vw}}@media(max-width:768px){:root{--content-padding: 4vw;--max-width: 100vw}}@media(max-width:480px){:root{--content-padding: 5vw}.container{padding:0 var(--content-padding)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;height:100%}body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.2}p{margin:0}ul,ol{list-style:none;padding:0;margin:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}img{max-width:100%;display:block}:focus{outline:2px solid var(--primary-red);outline-offset:2px}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid var(--primary-red);outline-offset:2px}.layout{min-height:100vh;display:flex;flex-direction:column;background-color:var(--background-dark);width:100%}.layout-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);z-index:100;transition:background-color var(--transition-smooth);padding:0 var(--content-padding)}.layout-header.scrolled{background-color:#141414f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px #0003}.header-content{width:100%;max-width:var(--max-width);height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.logo{font-size:var(--font-size-xl);font-weight:700;flex-shrink:0}.logo a{color:var(--text-white);text-decoration:none;transition:opacity var(--transition-fast)}.logo a:hover{opacity:.9}.main-nav{display:flex;align-items:center;gap:var(--spacing-xl);height:100%}.main-nav a{color:var(--text-white);text-decoration:none;font-size:var(--font-size-md);font-weight:500;padding:var(--spacing-sm) var(--spacing-md);position:relative;transition:color var(--transition-fast)}.main-nav a:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background-color:var(--primary-red);transition:width var(--transition-smooth)}.main-nav a:hover{color:var(--primary-red)}.main-nav a:hover:after{width:100%}.layout-content{flex:1;width:100%;max-width:var(--max-width);margin:var(--header-height) auto 0;min-height:calc(100vh - var(--header-height));padding:0 var(--content-padding)}.layout-footer{background-color:var(--background-light);padding:var(--spacing-xl) var(--content-padding);margin-top:auto;width:100%}.layout-footer p{text-align:center;color:var(--text-gray);font-size:var(--font-size-sm);max-width:var(--max-width);margin:0 auto}@media(max-width:1200px){.main-nav{gap:var(--spacing-lg)}}@media(max-width:768px){.logo{font-size:var(--font-size-lg)}.main-nav{gap:var(--spacing-md)}.main-nav a{font-size:var(--font-size-sm);padding:var(--spacing-xs) var(--spacing-sm)}}@media(max-width:480px){.main-nav{gap:var(--spacing-sm)}.main-nav a{font-size:var(--font-size-xs);padding:var(--spacing-xs)}.logo{font-size:var(--font-size-md)}.layout-header{background-color:#141414f2}}.base-card{width:300px;height:200px;margin:16px;border-radius:4px;overflow:hidden;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;background-color:var(--background-light);position:relative}.base-card:hover{transform:scale(1.05);box-shadow:0 10px 20px #0003;z-index:1}.base-card-image-container{width:100%;height:100%;position:relative}.base-card-image{width:100%;height:100%;background-size:cover;background-position:center;position:relative}.base-card-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);padding:20px;color:#fff;opacity:1}.base-card-title{margin:0 0 8px;font-size:1.5rem;color:var(--text-white)}.base-card-subtitle{margin:0;font-size:.9rem;opacity:.8;color:var(--text-white)}.base-card-content{padding:var(--spacing-md)}@media(max-width:768px){.base-card{width:260px;height:180px}.base-card-title{font-size:1.2rem}.base-card-subtitle{font-size:.8rem}.base-card-overlay{padding:16px}}@media(max-width:480px){.base-card{width:calc(100vw - 48px);height:180px;margin:12px}}.hero-banner{height:70vh;position:relative;overflow:hidden;color:#fff}.slideshow-container{position:absolute;top:0;left:0;width:100%;height:100%}.slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease-in-out}.slide.active{opacity:1}.hero-content{position:absolute;bottom:15%;left:4%;max-width:600px;z-index:2}.hero-content h1{font-size:3rem;margin-bottom:1rem;font-weight:700}.hero-content p{font-size:1.5rem;margin-bottom:2rem;opacity:.8}.hero-banner:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,#141414,#141414cc 20%,#14141466 50%,#14141400);z-index:1}@media(max-width:768px){.hero-banner{height:60vh}.hero-content h1{font-size:2rem}.hero-content p{font-size:1rem}}@media(max-width:480px){.hero-banner{height:50vh}}.row-container{width:100%;margin:40px 0}.row-title{color:var(--text-white);font-size:1.8rem;margin-bottom:20px;padding-left:var(--content-padding)}.row-content-wrapper{position:relative;width:100%}.row-content{display:flex;gap:var(--spacing-md);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:var(--spacing-md) var(--content-padding);margin:-var(--spacing-md) 0;width:100%;-ms-overflow-style:none;scrollbar-width:none}.row-content::-webkit-scrollbar{display:none}.scroll-button{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:calc(100% - var(--spacing-lg));background:#00000080;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:2}.scroll-button:hover{background:#000000b3}.scroll-button.left{left:0;border-top-right-radius:4px;border-bottom-right-radius:4px;padding-right:10px}.scroll-button.right{right:0;border-top-left-radius:4px;border-bottom-left-radius:4px;padding-left:10px}.scroll-button svg{width:24px;height:24px;color:#fff;opacity:.8;transition:opacity .3s ease}.scroll-button:hover svg{opacity:1}@keyframes rowAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.row-container{animation:rowAppear .4s ease-out}@media(max-width:768px){.row-title{font-size:1.5rem}.scroll-button{width:40px}.scroll-button svg{width:20px;height:20px}}@media(hover:none){.scroll-button{display:none}.row-content{-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:var(--spacing-md) var(--content-padding)}.row-content>*{scroll-snap-align:start}}.section-page{background-color:var(--background-dark);min-height:100vh;position:relative;width:100%}.section-content{position:relative;z-index:10;padding-top:100px;width:100%;max-width:var(--max-width);margin:0 auto;padding-left:var(--content-padding);padding-right:var(--content-padding)}.row-container+.row-container{margin-top:var(--spacing-xl)}.section-title{color:var(--text-white);font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg)}.content-grid{display:grid;gap:var(--spacing-lg);padding:var(--spacing-md) 0}@media(max-width:768px){.section-content{padding-top:80px}}@media(max-width:480px){.section-content{padding-top:60px}}.home-content{position:relative;z-index:10;padding-top:100px;width:100%}.section-preview-card{--card-width: 300px;--card-height: 200px}.featured-content-card{--card-width: 400px;--card-height: 225px}.photo-preview-card{--card-width: 320px;--card-height: 200px}.featured-section{margin-top:var(--spacing-xl);padding:0 var(--content-padding)}.featured-content{display:flex;gap:var(--spacing-lg);overflow-x:auto;padding:var(--spacing-md) var(--content-padding);width:100%;max-width:var(--max-width);margin:0 auto;-ms-overflow-style:none;scrollbar-width:none}.featured-content::-webkit-scrollbar{display:none}.featured-item{min-width:300px;background:var(--background-light);border-radius:var(--radius-md);overflow:hidden;transition:transform var(--transition-smooth)}.featured-item:hover{transform:scale(1.05)}.featured-image{width:100%;height:200px;background-size:cover;background-position:center}.featured-item h3{padding:var(--spacing-md);margin:0;font-size:var(--font-size-lg)}.featured-item p{padding:0 var(--spacing-md) var(--spacing-md);color:var(--text-gray);font-size:var(--font-size-md);line-height:1.5}.home-content>*:nth-child(1){animation-delay:.1s}.home-content>*:nth-child(2){animation-delay:.2s}.home-content>*:nth-child(3){animation-delay:.3s}@media(max-width:1200px){.featured-content-card{--card-width: 340px;--card-height: 200px}}@media(max-width:768px){.home-content{padding-top:80px}.section-preview-card{--card-width: 260px;--card-height: 180px}.featured-content-card{--card-width: 300px;--card-height: 180px}.photo-preview-card{--card-width: 280px;--card-height: 180px}.featured-item{min-width:260px}.featured-image{height:160px}}@media(max-width:480px){.home-content{padding-top:60px}.section-preview-card,.featured-content-card,.photo-preview-card{width:calc(85vw - var(--content-padding) * 2);height:200px}.featured-item{width:calc(85vw - var(--content-padding) * 2)}}.about-content{width:100%;max-width:var(--max-width);margin:0 auto}.intro-section,.background-section{margin-bottom:var(--spacing-xl)}.intro-text{font-size:var(--font-size-lg);line-height:1.6;color:var(--text-white);margin-bottom:var(--spacing-lg)}.skills-section{margin-top:var(--spacing-xl)}.skill-card{--card-width: 280px;--card-height: 180px}.background-content{color:var(--text-gray);line-height:1.6}.tech-stack-section{margin-top:var(--spacing-xl)}.tech-stack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--spacing-md);padding:var(--spacing-md) 0}@media(max-width:768px){.skill-card{--card-width: 240px;--card-height: 160px}.intro-text{font-size:var(--font-size-md)}.tech-stack-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}@media(max-width:480px){.skill-card{--card-width: calc(100vw - var(--spacing-xl));--card-height: 140px}.tech-stack-grid{grid-template-columns:repeat(2,1fr)}}.blog-post-card{--card-width: 340px;--card-height: 200px}.blog-post-meta{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);color:var(--text-gray);display:flex;justify-content:space-between;align-items:center}.post-date,.post-read-time{display:flex;align-items:center;gap:var(--spacing-xs)}@media(max-width:1200px){.blog-post-card{--card-width: 300px;--card-height: 180px}}@media(max-width:768px){.blog-post-card{--card-width: 260px;--card-height: 160px}}@media(max-width:480px){.blog-post-card{--card-width: 85vw;--card-height: 48vw}.blog-post-meta{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}}.photo-card{--card-width: 320px;--card-height: 200px}.photo-card.featured{--card-width: 400px;--card-height: 250px}.albums-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-lg);padding:var(--spacing-md) 0}.album-preview{position:relative;transition:transform var(--transition-smooth)}.album-preview:hover{transform:scale(1.02)}.album-card{--card-width: 100%;--card-height: 280px;margin:0}.photo-modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000}@media(max-width:1200px){.photo-card.featured{--card-width: 360px;--card-height: 220px}}@media(max-width:768px){.photo-card{--card-width: 280px;--card-height: 180px}.photo-card.featured{--card-width: 320px;--card-height: 200px}}@media(max-width:480px){.photo-card,.photo-card.featured{--card-width: 85vw;--card-height: 48vw}.albums-grid{grid-template-columns:1fr;gap:var(--spacing-md)}}.contact-content{width:100%;max-width:var(--max-width);margin:0 auto}.contact-form{max-width:600px;margin:var(--spacing-xl) auto}.form-group{margin-bottom:var(--spacing-lg)}.form-group label{display:block;color:var(--text-white);margin-bottom:var(--spacing-sm);font-size:var(--font-size-md)}.form-group input,.form-group textarea{width:100%;padding:var(--spacing-sm);background-color:var(--background-light);border:1px solid var(--text-gray);border-radius:var(--radius-sm);color:var(--text-white);font-size:var(--font-size-md)}.form-group textarea{resize:vertical;min-height:120px}.submit-button{background-color:var(--primary-red);color:var(--text-white);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-sm);font-size:var(--font-size-md);font-weight:600;width:100%;transition:background-color var(--transition-fast)}.submit-button:hover{background-color:#ff0f1f}.social-card{--card-width: 280px;--card-height: 160px}.contact-info{text-align:center;color:var(--text-gray);margin-top:var(--spacing-xl)}@media(max-width:768px){.contact-form{padding:0 var(--spacing-md)}.social-card{--card-width: 240px;--card-height: 140px}}@media(max-width:480px){.contact-form{padding:0 var(--spacing-sm)}.social-card{--card-width: calc(100vw - var(--spacing-xl));--card-height: 120px}.form-group input,.form-group textarea{font-size:var(--font-size-sm)}}.app{display:flex;flex-direction:column;min-height:100vh;background-color:var(--background-dark)}*{margin:0;padding:0;box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--background-dark);color:var(--text-white)}img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}button{background:none;border:none;cursor:pointer;font:inherit;color:inherit}button:focus{outline:none}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-lg)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:1200px){.container{padding:0 var(--spacing-md)}}@media(max-width:768px){.container{padding:0 var(--spacing-sm)}}html{scroll-behavior:smooth}::-webkit-scrollbar{width:0px;background:transparent}main{flex:1;width:100%;display:flex;flex-direction:column}