@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@400;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--scrollbar-gradient-from) var(--scrollbar-track); } body { background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; min-height: 100vh; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; user-select: none; } ::-webkit-scrollbar { width: var(--scrollbar-width, 10px); height: var(--scrollbar-width, 10px); } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--scrollbar-gradient-from), var(--scrollbar-gradient-to)); border-radius: var(--radius-full); border: 2px solid var(--scrollbar-track); transition: background 0.3s ease; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--scrollbar-gradient-to), var(--scrollbar-gradient-from)); } html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-mono { font-family: var(--font-mono); } .tabular-nums { font-variant-numeric: tabular-nums; } .balance-text { text-wrap: balance; } .site-container { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: clamp(1.25rem, 4vw, 3.5rem); padding-right: clamp(1.25rem, 4vw, 3.5rem); } a, button, input, textarea, select { transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1); } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background-color: var(--bg-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-subtle); transition: transform 0.3s ease, background-color 0.3s ease; } .nav-link { position: relative; color: var(--text-secondary); text-decoration: none; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.5rem 0; white-space: nowrap; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background-color: var(--accent-primary); transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .nav-link:hover { color: var(--text-primary); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link.active { color: var(--text-primary); } .hamburger-btn { display: none; background: transparent; border: none; cursor: pointer; width: 44px; height: 44px; position: relative; align-items: center; justify-content: center; padding: 8px; } @media (max-width: 900px) { .hamburger-btn { display: flex; } } .hamburger-icon { width: 24px; height: 18px; position: relative; display: flex; flex-direction: column; justify-content: space-between; } .hamburger-line { display: block; height: 2px; width: 100%; background-color: var(--text-primary); border-radius: 1px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background-color 0.2s ease; } .hamburger-btn.is-active .line-top { transform: translateY(8px) rotate(45deg); background-color: var(--accent-primary); } .hamburger-btn.is-active .line-mid { opacity: 0; transform: scaleX(0); } .hamburger-btn.is-active .line-bot { transform: translateY(-8px) rotate(-45deg); background-color: var(--accent-primary); } .mobile-nav-drawer { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background-color: var(--bg-glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem 1.5rem; transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; z-index: 49; border-bottom: 1px solid var(--border-subtle); } .mobile-nav-drawer.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .filter-btn { background: transparent; color: var(--text-muted); border: 1px solid transparent; padding: 0.45rem 0.95rem; font-size: 0.8125rem; font-weight: 500; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; } .filter-btn:hover { color: var(--text-primary); background-color: var(--accent-muted); } .filter-btn.active { color: var(--text-primary); background-color: var(--bg-surface); border-color: var(--border-subtle); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .view-mode-btn { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); cursor: pointer; } .view-mode-btn:hover { color: var(--text-primary); border-color: var(--accent-primary); } .view-mode-btn.active { color: var(--accent-primary); background-color: var(--accent-muted); border-color: var(--accent-primary); } .gallery-container { width: 100%; position: relative; transition: opacity 0.25s ease; } .gallery-layout-masonry { column-count: 3; column-gap: 2rem; } @media (max-width: 1024px) { .gallery-layout-masonry { column-count: 2; column-gap: 1.5rem; } } @media (max-width: 640px) { .gallery-layout-masonry { column-count: 1; } } .gallery-layout-masonry .gallery-card { break-inside: avoid; margin-bottom: 2rem; display: block; } .gallery-layout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } @media (max-width: 1024px) { .gallery-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } } @media (max-width: 640px) { .gallery-layout-grid { grid-template-columns: 1fr; gap: 1.5rem; } } .gallery-layout-grid .gallery-card { display: flex; flex-direction: column; } .gallery-layout-grid .gallery-card-img-wrapper { aspect-ratio: 4 / 3; } .gallery-layout-carousel { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 1.5rem; -webkit-overflow-scrolling: touch; } .gallery-layout-carousel .gallery-card { flex: 0 0 min(85vw, 480px); scroll-snap-align: start; } .gallery-layout-carousel .gallery-card-img-wrapper { aspect-ratio: 4 / 3; } .gallery-card { position: relative; background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; } .gallery-card:hover { border-color: var(--border-strong); box-shadow: var(--theme-card-shadow); } .gallery-card-img-wrapper { width: 100%; position: relative; background-color: var(--bg-surface); overflow: hidden; min-height: 240px; } .gallery-card-img-wrapper::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 70%, transparent 100% ); background-size: 200% 100%; animation: aura-shimmer 1.8s infinite linear; z-index: 1; pointer-events: none; opacity: 1; transition: opacity 0.5s ease; } .gallery-card-img-wrapper::after { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin-top: -14px; margin-left: -14px; border: 2px solid var(--border-subtle); border-top-color: var(--accent-primary); border-radius: 50%; animation: aura-spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite; z-index: 2; pointer-events: none; opacity: 0.85; transition: opacity 0.4s ease; } .gallery-card-img-wrapper.is-loaded::before, .gallery-card-img-wrapper.is-loaded::after { opacity: 0; animation: none; } .gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease; will-change: transform; } .gallery-card img.is-loaded { opacity: 1; } @keyframes aura-filter-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .gallery-card.filter-fade-in { animation: aura-filter-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .gallery-card.filter-fade-in img.is-loaded { animation: aura-filter-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .gallery-card:hover img { transform: scale(1.06); } @keyframes aura-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes aura-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gallery-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 12, 0.85) 100%); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 1.5rem; z-index: 3; } .gallery-card:hover .gallery-card-overlay { opacity: 1; } .gallery-card-info { padding: 1.25rem 1.25rem 1.5rem; border-top: 1px solid var(--border-subtle); position: relative; z-index: 4; } .lightbox-modal { position: fixed; inset: 0; z-index: 100; background-color: rgba(5, 5, 8, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: space-between; opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .lightbox-modal.is-active { opacity: 1; pointer-events: auto; } .lightbox-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--border-subtle); background-color: rgba(10, 10, 12, 0.5); } .lightbox-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 1rem clamp(1rem, 5vw, 4rem); overflow: hidden; user-select: none; } .lightbox-image-container { max-width: 100%; max-height: calc(100vh - 180px); display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .lightbox-image { max-width: 100%; max-height: calc(100vh - 180px); object-fit: contain; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); border-radius: var(--radius-sm); cursor: zoom-in; transition: transform 0.3s ease; } .lightbox-image.is-zoomed { cursor: zoom-out; transform: scale(1.6); } .lightbox-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(20, 20, 26, 0.75); border: 1px solid var(--border-subtle); color: var(--text-primary); width: 52px; height: 52px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); z-index: 10; } .lightbox-nav-btn:hover { background: var(--accent-primary); color: var(--text-inverse); border-color: var(--accent-primary); transform: translateY(-50%) scale(1.08); } .lightbox-prev-btn { left: clamp(0.75rem, 2.5vw, 2rem); } .lightbox-next-btn { right: clamp(0.75rem, 2.5vw, 2rem); } .lightbox-footer { padding: 1.25rem clamp(1rem, 4vw, 2.5rem); border-top: 1px solid var(--border-subtle); background-color: rgba(10, 10, 12, 0.6); display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 768px) { .lightbox-footer { flex-direction: row; align-items: center; justify-content: space-between; } } .curator-trigger-btn { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 45; background-color: var(--bg-surface); color: var(--accent-primary); border: 1px solid var(--border-strong); padding: 0.65rem 1.15rem; border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); cursor: pointer; backdrop-filter: blur(12px); } .curator-trigger-btn:hover { transform: translateY(-2px); background-color: var(--accent-primary); color: var(--text-inverse); box-shadow: 0 12px 30px var(--accent-glow); } .curator-drawer { position: fixed; top: 0; right: 0; width: min(560px, 92vw); height: 100vh; background-color: var(--bg-secondary); border-left: 1px solid var(--border-subtle); z-index: 120; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: -15px 0 45px rgba(0, 0, 0, 0.5); } .curator-drawer.is-open { transform: translateX(0); } .curator-backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 119; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .curator-backdrop.is-open { opacity: 1; pointer-events: auto; } .curator-list-item { background-color: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 0.75rem; display: flex; gap: 1rem; align-items: center; } .curator-list-item:hover { border-color: var(--border-strong); } .btn-primary { background-color: var(--accent-primary); color: var(--text-inverse); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); border: 1px solid var(--accent-primary); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 14px var(--accent-glow); } .btn-secondary { background-color: transparent; color: var(--text-primary); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.04em; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn-secondary:hover { border-color: var(--accent-primary); color: var(--accent-primary); background-color: var(--accent-muted); } .input-field { width: 100%; background-color: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-primary); font-family: inherit; font-size: 0.9375rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); outline: none; } .input-field:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-muted); } .input-field::placeholder { color: var(--text-muted); }