*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 :root {
     --bg: #0a0c14;
     --bg-light: hsl(220, 15%, 97%);
     --fg: #fff;
     --fg-dark: hsl(220, 25%, 10%);
     --card: hsla(0, 0%, 100%, 0.06);
     --card-light: hsl(0, 0%, 100%);
     --muted: hsla(0, 0%, 100%, 0.5);
     --muted-fg: hsl(220, 10%, 42%);
     --border: hsla(0, 0%, 100%, 0.1);
     --border-light: hsl(220, 15%, 88%);
     --red: hsl(355, 78%, 50%);
     --blue: hsl(205, 85%, 50%);
     --orange: hsl(25, 90%, 55%);
     --pink: hsl(330, 80%, 55%);
     --gold: hsl(40, 70%, 50%);
     --font-display: 'Playfair Display', serif;
     --font-body: 'DM Sans', sans-serif;
     --accent: var(--pink);
 }

 html {
     scroll-behavior: smooth
 }

 body {
     font-family: var(--font-body);
     background: var(--bg);
     color: var(--fg);
     line-height: 1.6;
     overflow-x: hidden
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: var(--font-display)
 }

 a {
     text-decoration: none;
     color: inherit
 }

 img {
     max-width: 100%;
     display: block
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2rem
 }

 body::after {
     content: '';
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 9999;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
     opacity: .5
 }

 .text-gradient {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 600;
     font-style: italic;
     background: linear-gradient(90deg, var(--red) 0%, var(--orange) 25%, var(--pink) 50%, var(--blue) 75%, var(--red) 100%);
     background-size: 400% 100%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: gradient-shift 6s ease infinite;
 }

 @keyframes gradient-shift {

     0%,
     100% {
         background-position: 0% 50%
     }

     50% {
         background-position: 100% 50%
     }
 }

 .back-link {
     position: fixed;
     top: 1.5rem;
     left: 1.5rem;
     z-index: 100;
     display: flex;
     align-items: center;
     gap: .5rem;
     color: hsla(0, 0%, 100%, 0.6);
     font-size: .875rem;
     transition: color .3s;
     backdrop-filter: blur(10px);
     background: hsla(0, 0%, 0%, 0.3);
     padding: .5rem 1rem;
     border-radius: 9999px;
     border: 1px solid hsla(0, 0%, 100%, 0.1)
 }

 .back-link:hover {
     color: #fff;
     background: hsla(0, 0%, 0%, 0.5)
 }

 .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     padding: 6rem 0 4rem
 }

 .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at 70% 50%, hsla(330, 80%, 55%, 0.08) 0%, transparent 60%)
 }

 .hero-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
     position: relative;
     z-index: 2
 }

 @media(max-width:900px) {
     .hero-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
         text-align: center
     }
 }

 .hero-text .tag {
     display: inline-block;
     padding: .375rem 1.25rem;
     border-radius: 9999px;
     font-size: .7rem;
     font-weight: 700;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: .15em;
     margin-bottom: 1.5rem;
     border: 1px solid hsla(330, 80%, 55%, 0.3);
     background: hsla(330, 80%, 55%, 0.15)
 }

 .hero-text h1 {
     font-size: clamp(2.5rem, 5vw, 4.5rem);
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 1rem
 }

 .hero-text h1 .accent {
     color: var(--accent)
 }

 .hero-text .subtitle {
     font-size: 1.15rem;
     color: var(--muted);
     line-height: 1.7;
     margin-bottom: 2rem
 }

 .hero-text .meta {
     display: flex;
     gap: 2rem;
     flex-wrap: wrap
 }

 @media(max-width:900px) {
     .hero-text .meta {
         justify-content: center
     }
 }

 .hero-text .meta-item {
     display: flex;
     align-items: center;
     gap: .5rem;
     font-size: .9rem;
     color: hsla(0, 0%, 100%, 0.5)
 }

 .hero-visual {
     position: relative
 }

 @media(max-width:900px) {
     .hero-visual {
         order: -1;
         max-width: 400px;
         margin: 0 auto
     }
 }

 .hero-img-wrapper {
     position: relative;
     border-radius: 1.5rem;
     overflow: hidden;
     aspect-ratio: 3/4
 }

 .hero-img-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .hero-img-wrapper::after {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 1.5rem;
     border: 1px solid hsla(330, 80%, 55%, 0.2);
     pointer-events: none
 }

 .hero-img-glow {
     position: absolute;
     inset: -20%;
     background: radial-gradient(circle at center, hsla(330, 80%, 55%, 0.15) 0%, transparent 70%);
     z-index: -1;
     filter: blur(40px)
 }

 .hero-visual .deco-line {
     position: absolute;
     background: linear-gradient(180deg, var(--accent), transparent);
     width: 1px;
     height: 80px;
     opacity: .3
 }

 .hero-visual .deco-line:nth-child(1) {
     top: -10px;
     right: -20px
 }

 .hero-visual .deco-line:nth-child(2) {
     bottom: -10px;
     left: -20px;
     background: linear-gradient(0deg, var(--accent), transparent)
 }

 .hero-visual .deco-corner {
     position: absolute;
     width: 40px;
     height: 40px;
     border: 1px solid hsla(330, 80%, 55%, 0.25)
 }

 .hero-visual .deco-corner:nth-child(3) {
     top: -8px;
     left: -8px;
     border-right: none;
     border-bottom: none;
     border-radius: 4px 0 0 0
 }

 .hero-visual .deco-corner:nth-child(4) {
     bottom: -8px;
     right: -8px;
     border-left: none;
     border-top: none;
     border-radius: 0 0 4px 0
 }

 .gold-sep {
     width: 60px;
     height: 2px;
     background: linear-gradient(90deg, var(--accent), transparent);
     margin: 0 auto 3rem
 }

 .gold-sep.left {
     margin: 0 0 2rem
 }

 .section-light {
     background: var(--bg-light);
     color: var(--fg-dark);
     padding: 5rem 0
 }

 .section-dark {
     padding: 5rem 0
 }

 .section-label {
     font-size: .7rem;
     letter-spacing: .3em;
     text-transform: uppercase;
     font-weight: 500;
     margin-bottom: 1rem
 }

 .section-title {
     font-size: clamp(1.75rem, 3vw, 2.5rem);
     font-weight: 700;
     margin-bottom: 1rem
 }

 p.desc {
     font-size: 1.1rem;
     color: var(--muted-fg);
     line-height: 1.8;
     margin-bottom: 1.25rem
 }

 .bento {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(12rem, max-content));
     gap: 1rem;
     justify-content: center;
     margin-top: 2rem;
 }

 @media(max-width:768px) {
     .bento {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 .bento-card {
     padding: 1.75rem;
     border-radius: 1rem;
     background: var(--card);
     border: 1px solid var(--border);
     backdrop-filter: blur(10px);
     transition: border-color .3s, transform .3s
 }

 .bento-card:hover {
     border-color: hsla(330, 80%, 55%, 0.3);
     transform: translateY(-2px)
 }

 .bento-card .label {
     font-size: .65rem;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: .5rem
 }

 .bento-card .value {
     font-family: var(--font-display);
     font-size: 1.05rem;
     font-weight: 600
 }

 .gallery-mosaic {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: .75rem;
     max-width: 60rem;
     margin: 2rem auto 0
 }

 @media(max-width:768px) {
     .gallery-mosaic {
         grid-template-columns: 1fr 1fr
     }
 }

 .gallery-mosaic .g-item {
     position: relative;
     overflow: hidden;
     border-radius: 1rem;
     aspect-ratio: 3/4;
     cursor: pointer
 }

 .gallery-mosaic .g-item:first-child {
     grid-row: span 2;
     aspect-ratio: auto
 }

 @media(max-width:768px) {
     .gallery-mosaic .g-item:first-child {
         grid-row: span 1;
         aspect-ratio: 3/4
     }
 }

 .gallery-mosaic .g-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .8s cubic-bezier(.2, 0, .2, 1), filter .5s
 }

 .gallery-mosaic .g-item:hover img {
     transform: scale(1.08);
     filter: brightness(1.1)
 }

 .gallery-mosaic .g-item::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, hsla(330, 80%, 55%, 0.15), transparent 40%);
     opacity: 0;
     transition: opacity .5s
 }

 .gallery-mosaic .g-item:hover::after {
     opacity: 1
 }

 .gallery-mosaic .g-item .g-num {
     position: absolute;
     bottom: 1rem;
     right: 1rem;
     font-family: var(--font-display);
     font-size: 3rem;
     font-weight: 700;
     color: hsla(0, 0%, 100%, 0.1);
     line-height: 1
 }

 .cta-section {
     text-align: center;
     padding: 6rem 0;
     position: relative
 }

 .cta-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 200px;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--accent), transparent)
 }

 .cta-btn {
     display: inline-flex;
     align-items: center;
     gap: .75rem;
     padding: 1rem 2.5rem;
     border-radius: 9999px;
     font-weight: 600;
     font-size: 1.05rem;
     color: #fff;
     letter-spacing: .05em;
     transition: all .3s;
     position: relative;
     overflow: hidden
 }

 .cta-btn::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, hsla(0, 0%, 100%, 0.1), transparent);
     opacity: 0;
     transition: opacity .3s
 }

 .cta-btn:hover {
     transform: scale(1.05)
 }

 .cta-btn:hover::before {
     opacity: 1
 }

 .other-projects {
     border-top: 1px solid var(--border);
     padding: 4rem 0
 }

 .other-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
     max-width: 50rem;
     margin: 1rem auto 0
 }

 @media(max-width:768px) {
     .other-grid {
         grid-template-columns: 1fr
     }
 }

 .other-card {
     position: relative;
     border-radius: 1rem;
     overflow: hidden;
     min-height: 260px;
     display: block;
     border: 1px solid var(--border);
     transition: border-color .3s
 }

 .other-card:hover {
     border-color: hsla(0, 0%, 100%, 0.2)
 }

 .other-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: absolute;
     inset: 0;
     transition: transform .8s cubic-bezier(.2, 0, .2, 1)
 }

 .other-card:hover img {
     transform: scale(1.08)
 }

 .other-card .card-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, hsla(220, 25%, 5%, 0.9) 0%, hsla(220, 25%, 5%, 0.3) 100%)
 }

 .other-card .card-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 1.5rem;
     z-index: 10
 }

 .other-card .card-content h3 {
     font-size: 1.35rem;
     font-weight: 700;
     color: #fff
 }

 .other-card .card-content .sub {
     font-size: .8rem;
     color: hsla(0, 0%, 100%, 0.5);
     margin-top: .25rem
 }

 .reveal {
     opacity: 0;
     transform: translateY(25px);
     transition: opacity .7s cubic-bezier(.2, 0, .2, 1), transform .7s cubic-bezier(.2, 0, .2, 1)
 }

 .reveal.visible {
     opacity: 1;
     transform: translateY(0)
 }

 .reveal-delay-1 {
     transition-delay: .1s
 }

 .reveal-delay-2 {
     transition-delay: .2s
 }

 .reveal-delay-3 {
     transition-delay: .3s
 }

 .tag {
     display: inline-block;
     padding: .375rem 1rem;
     border-radius: 9999px;
     font-size: .7rem;
     font-weight: 700;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: .1em;
     margin-bottom: .75rem
 }

 .artists-list {
     max-width: 48rem;
     margin: 0 auto
 }

 .artist-item {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
     margin-bottom: 1.5rem
 }

 .artist-item .artist-name {
     font-family: var(--font-display);
     font-size: 1.15rem;
     font-weight: 600;
     color: var(--fg-dark)
 }

 .artist-item .artist-role {
     font-size: .9rem;
     color: var(--muted-fg);
     line-height: 1.6;
     margin-top: .25rem
 }

 .artist-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--pink);
     margin-top: .5rem;
     flex-shrink: 0
 }

 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.25rem;
     max-width: 64rem;
     margin: 2rem auto 0;
 }

 .gg-item {
     position: relative;
     aspect-ratio: 4/5;
     border-radius: .75rem;
     overflow: hidden;
     cursor: zoom-in;
     border: 1px solid var(--border);
     background: #000;
     padding: 0
 }





 .gg-tile-credit {
     position: absolute;
     left: .6rem;
     bottom: .5rem;
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: .62rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: hsla(0, 0%, 100%, 0.7);
     text-shadow: 0 1px 6px hsla(0, 0%, 0%, 0.75);
     z-index: 2;
     pointer-events: none;
     white-space: nowrap;
     transition: color .3s ease
 }

 .gg-item:hover .gg-tile-credit {
     color: hsla(0, 0%, 100%, 0.95)
 }






 .gg-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .6s cubic-bezier(.2, 0, .2, 1);
     display: block
 }

 .gg-item:hover img {
     transform: scale(1.06)
 }

 .gg-item::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, hsla(0, 0%, 0%, 0.35), transparent 50%);
     opacity: 0;
     transition: opacity .3s;
     pointer-events: none
 }

 .gg-item:hover::after {
     opacity: 1
 }

 .gallery-slider {
     max-width: 64rem;
     margin: 2rem auto 0
 }

 .gs-stage {
     position: relative;
     border-radius: 1rem;
     overflow: hidden;
     background: #000;
     aspect-ratio: 16/10;
     border: 1px solid var(--border);
     box-shadow: 0 30px 60px -30px hsla(0, 0%, 0%, 0.6)
 }

 .gs-track {
     display: flex;
     height: 100%;
     transition: transform .7s cubic-bezier(.2, 0, .2, 1)
 }

 .gs-slide {
     flex: 0 0 100%;
     position: relative
 }

 .gs-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     cursor: zoom-in
 }

 .gs-slide::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, hsla(0, 0%, 0%, 0.45), transparent 35%);
     pointer-events: none
 }

 .gs-caption {
     position: absolute;
     left: 1.5rem;
     bottom: 1.25rem;
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 1.1rem;
     color: hsla(0, 0%, 100%, 0.85);
     letter-spacing: .02em;
     z-index: 2;
     text-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.6)
 }

 .gs-counter {
     position: absolute;
     right: 1.5rem;
     bottom: 1.25rem;
     font-family: var(--font-display);
     font-size: .85rem;
     letter-spacing: .2em;
     color: hsla(0, 0%, 100%, 0.6);
     z-index: 2
 }

 .gs-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: hsla(0, 0%, 0%, 0.4);
     backdrop-filter: blur(8px);
     border: 1px solid hsla(0, 0%, 100%, 0.15);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background .3s, border-color .3s, transform .3s;
     z-index: 3
 }

 .gs-arrow:hover {
     background: var(--accent);
     border-color: var(--accent);
     transform: translateY(-50%) scale(1.05)
 }

 .gs-arrow.prev {
     left: 1rem
 }

 .gs-arrow.next {
     right: 1rem
 }

 .gs-thumbs {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: minmax(0, 1fr);
     gap: .75rem;
     margin-top: 1rem
 }

 @media(max-width:768px) {
     .gs-thumbs {
         grid-auto-columns: 30%;
         overflow-x: auto;
         scroll-snap-type: x mandatory;
         padding-bottom: .5rem
     }

     .gs-thumbs::-webkit-scrollbar {
         display: none
     }

     .gs-thumb {
         scroll-snap-align: start
     }
 }

 .gs-thumb {
     position: relative;
     aspect-ratio: 4/3;
     border-radius: .5rem;
     overflow: hidden;
     cursor: pointer;
     border: 1px solid var(--border);
     opacity: .55;
     transition: opacity .35s, border-color .35s, transform .35s
 }

 .gs-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .gs-thumb:hover {
     opacity: .85
 }

 .gs-thumb.active {
     opacity: 1;
     border-color: var(--accent);
     transform: translateY(-3px)
 }

 .gs-thumb.active::after {
     content: '';
     position: absolute;
     inset: auto 0 0 0;
     height: 2px;
     background: var(--accent)
 }

 /* Lightbox */
 .gs-lightbox {
     position: fixed;
     inset: 0;
     background: hsla(0, 0%, 2%, 0.96);
     backdrop-filter: blur(20px);
     z-index: 9998;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 2rem;
     animation: gs-fade .3s ease
 }

 .gs-lightbox.open {
     display: flex
 }

 @keyframes gs-fade {
     from {
         opacity: 0
     }

     to {
         opacity: 1
     }
 }

 .gs-lb-img {
     max-width: min(1200px, 95vw);
     max-height: 88vh;
     object-fit: contain;
     border-radius: .5rem;
     box-shadow: 0 40px 80px -20px hsla(0, 0%, 0%, 0.8)
 }

 .gs-lb-close,
 .gs-lb-arrow {
     position: fixed;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: hsla(0, 0%, 100%, 0.08);
     border: 1px solid hsla(0, 0%, 100%, 0.15);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background .3s
 }

 .gs-lb-close {
     top: 1.5rem;
     right: 1.5rem
 }

 .gs-lb-arrow {
     top: 50%;
     transform: translateY(-50%)
 }

 .gs-lb-arrow.prev {
     left: 1.5rem
 }

 .gs-lb-arrow.next {
     right: 1.5rem
 }

 .gs-lb-close:hover,
 .gs-lb-arrow:hover {
     background: var(--accent);
     border-color: var(--accent)
 }

 .gs-lb-counter {
     position: fixed;
     bottom: 1.5rem;
     left: 50%;
     transform: translateX(-50%);
     font-family: var(--font-display);
     font-size: .85rem;
     letter-spacing: .25em;
     color: hsla(0, 0%, 100%, 0.6);
     text-transform: uppercase
 }

 .gs-lightbox.open {
     display: flex
 }

 .gs-lb-credit {
     position: absolute;
     left: 1.5rem;
     bottom: 1.25rem;
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: .8rem;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: hsla(0, 0%, 100%, 0.55);
     z-index: 3;
     pointer-events: none;
     white-space: nowrap
 }