@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

@font-face{
  font-family:'Sefa';
  src:url('fonts/sefa-regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg: #0b0712;
  --bg-raised: #150f1f;
  --bg-hover: #1d1430;
  --line: #2b2142;
  --text: #f0eaff;
  --text-mute: #8d80ab;
  --text-faint: #4d4468;
  --accent: #b24bff;
  --accent-dim: #3d1361;
  --accent-2: #e8ff2e;
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-mono);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{color:inherit; text-decoration:none;}
button{font-family:inherit; background:none; border:none; color:inherit; cursor:pointer;}
img{max-width:100%; display:block;}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.mono-label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-mute);
}

/* ---------- NAV ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.2rem, 4vw, 3rem);
  background:rgba(11,7,18,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav .logo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:0.06em;
  color:var(--text);
}
.nav-links{
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0.5rem 1.3rem;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.nav-links a{
  position:relative; padding-bottom:2px;
  color:var(--text);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--accent);
  transition:width 0.25s var(--ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{width:100%;}
.nav-toggle{display:none; font-size:0.75rem; letter-spacing:0.14em;}

@media (max-width: 960px){
  .nav-links{
    position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh;
    background:var(--bg);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:0 2rem; gap:1.4rem; font-size:1.1rem;
    transform:translateY(-100%); transition:transform 0.35s var(--ease);
  }
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:block; z-index:101;}
}

/* ---------- HERO ---------- */
.hero{
  padding:8rem clamp(1.2rem, 4vw, 3rem) 3rem;
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:linear-gradient(155deg, #201830 0%, #120c1d 55%, #08050d 100%);
}
.hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,7,18,0.25) 0%, rgba(11,7,18,0.55) 60%, rgba(11,7,18,0.94) 100%);
}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none;}
}
.hero-name, .hero-tagline, .scroll-cue{position:relative; z-index:2;}
.hero-name{
  font-family:'Sefa', var(--font-display);
  font-weight:400;
  font-size:clamp(3.2rem, 13vw, 9rem);
  line-height:0.88;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  text-shadow:0 0 30px rgba(178,75,255,0.4);
}
.hero-tagline{
  margin-top:1.2rem;
  font-family:var(--font-mono);
  font-size:clamp(0.75rem, 1.4vw, 0.95rem);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-mute);
  display:flex; flex-wrap:wrap; gap:0.6em 1em;
}
.hero-tagline span::before{content:'— '; color:var(--accent-2);}
.scroll-cue{
  position:absolute; bottom:2rem; right:clamp(1.2rem, 4vw, 3rem);
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em;
  color:var(--text-faint);
  display:flex; align-items:center; gap:0.5rem;
  writing-mode:vertical-rl;
}
.scroll-cue .bar{width:1px; height:2.4rem; background:var(--text-faint); position:relative; overflow:hidden;}
.scroll-cue .bar::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--accent); animation:scrollbar 2.2s var(--ease) infinite;
}
@keyframes scrollbar{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* ---------- SHOWCASE (home, one 16:9 preview per category, stacked) ---------- */
.showcase-item{
  padding:1rem clamp(1.2rem, 4vw, 3rem) 1rem;
  border-bottom:1px solid var(--line);
}
.showcase-label{
  display:inline-flex; align-items:center; gap:0.8rem;
  width:fit-content; margin-bottom:0.6rem;
}
.showcase-index{
  font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); letter-spacing:0.1em;
}
.showcase-name{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.15rem, 2.2vw, 1.6rem);
  text-transform:uppercase; color:var(--text);
  transition:color 0.2s var(--ease);
}
.showcase-meta{
  display:flex; align-items:center; gap:0.4rem;
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em;
  color:var(--text-mute); text-transform:uppercase;
}
.rec-dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent-2);
  box-shadow:0 0 6px var(--accent-2);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }
.showcase-arrow{color:var(--accent); transition:transform 0.2s var(--ease);}
.showcase-label:hover .showcase-name{color:var(--accent);}
.showcase-label:hover .showcase-arrow{transform:translateX(4px);}

.showcase-media{
  position:relative; width:100%; aspect-ratio:16/9;
  background:linear-gradient(155deg, #201830 0%, #120c1d 55%, #08050d 100%);
  overflow:hidden;
}
.showcase-media iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.showcase-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 0.5s var(--ease);
}
.showcase-placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em;
  color:var(--text-faint); text-transform:uppercase;
  border:1px dashed var(--line); margin:0.9rem; padding:0.6rem;
}
.showcase-media-link{
  position:absolute; inset:0; z-index:3;
}
.showcase-media:hover img{transform:scale(1.03);}

/* ---------- FOOTER / CONTACT CTA ---------- */
.footer-cta{
  min-height:60svh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:3rem clamp(1.2rem, 4vw, 3rem);
  gap:1.6rem;
}
.footer-cta .mono-label{color:var(--accent);}
.footer-cta h2{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.2rem, 7vw, 4.5rem);
  text-transform:uppercase; line-height:0.95;
}
.cta-button{
  display:inline-flex; align-items:center; gap:0.8rem;
  border:1px solid var(--line); padding:0.9rem 1.6rem;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.14em;
  text-transform:uppercase;
  transition:border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.cta-button:hover, .cta-button:focus-visible{border-color:var(--accent); background:var(--bg-raised);}
.cta-button .arrow{color:var(--accent); transition:transform 0.25s var(--ease);}
.cta-button:hover .arrow{transform:translateX(4px);}

.site-footer{
  border-top:1px solid var(--line);
  padding:1.6rem clamp(1.2rem, 4vw, 3rem);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em;
  color:var(--text-faint); text-transform:uppercase;
}
.site-footer a{color:var(--text-mute); transition:color 0.2s var(--ease);}
.site-footer a:hover, .site-footer a:focus-visible{color:var(--text);}

/* ---------- GALLERY PAGE ---------- */
.gallery-header{
  padding:7.5rem clamp(1.2rem, 4vw, 3rem) 2rem;
  border-bottom:1px solid var(--line);
}
.breadcrumb{
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em;
  color:var(--text-mute); text-transform:uppercase; margin-bottom:1.4rem;
}
.breadcrumb a{color:var(--text-mute);}
.breadcrumb a:hover{color:var(--accent);}
.gallery-header h1{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.4rem, 8vw, 5.5rem);
  text-transform:uppercase; line-height:0.9;
}
.gallery-header p{
  margin-top:1rem; max-width:34rem; color:var(--text-mute); font-size:0.85rem;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:2px;
  background:var(--line);
  padding:2px;
}
.gallery-tile{
  position:relative;
  grid-column:span 3;
  aspect-ratio:4/5;
  background:linear-gradient(160deg, #1e1830 0%, #110c1a 60%, #08050d 100%);
  overflow:hidden;
  display:flex; align-items:flex-end;
  padding:1rem;
}
.gallery-tile.wide{grid-column:span 6; aspect-ratio:16/8;}
.gallery-tile img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(0.55);
}
.gallery-tile.video:has(img)::after{display:none;}
.gallery-tile.video::before{
  content:'▶'; position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:1.6rem; color:var(--text); opacity:0.7;
  transition:opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.gallery-tile.video:hover::before, .gallery-tile.video:focus-visible::before{
  opacity:1; transform:translate(-50%,-50%) scale(1.12);
}
button.gallery-tile{
  appearance:none; -webkit-appearance:none;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
}
.gallery-tile .tile-caption{
  position:relative; z-index:2;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em;
  color:var(--text-faint); text-transform:uppercase;
}
.gallery-tile::after{
  content:'';
  position:absolute; inset:0; border:1px dashed var(--line); margin:0.9rem;
  pointer-events:none;
}
.gallery-tile:hover{background:linear-gradient(160deg, #251c3d 0%, #150f24 60%, #0b0712 100%);}

@media (max-width: 900px){
  .gallery-tile{grid-column:span 6;}
}

/* ---------- PHOTO GRID (masonry, mixed aspect ratios) ---------- */
.photo-grid{
  column-count:3; column-gap:2px;
}
.photo-tile{
  display:block; width:100%; margin:0 0 2px;
  break-inside:avoid;
  position:relative; overflow:hidden;
  background:var(--bg-raised);
}
.photo-tile img{
  width:100%; display:block;
  transition:transform 0.4s var(--ease);
}
button.photo-tile{
  appearance:none; -webkit-appearance:none; cursor:pointer; font:inherit; color:inherit;
}
button.photo-tile:hover img, button.photo-tile:focus-visible img{transform:scale(1.03);}
.photo-tile-placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(160deg, #1e1830 0%, #110c1a 60%, #08050d 100%);
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em;
  color:var(--text-faint); text-transform:uppercase;
}
.photo-tile-placeholder::after{
  content:'';
  position:absolute; inset:0; border:1px dashed var(--line); margin:0.6rem;
  pointer-events:none;
}
.photo-tile.video-tile{
  aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #1e1830 0%, #110c1a 60%, #08050d 100%);
}
.photo-tile.video-tile img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(0.55);
}
.photo-tile.video-tile::before{
  content:'▶'; position:relative; z-index:2; font-size:1.6rem; color:var(--text); opacity:0.75;
  transition:opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.photo-tile.video-tile:hover::before, .photo-tile.video-tile:focus-visible::before{
  opacity:1; transform:scale(1.12);
}
.photo-tile.video-tile .tile-caption{
  position:absolute; left:0.9rem; bottom:0.8rem; z-index:2;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em;
  color:var(--text-faint); text-transform:uppercase;
  display:flex; align-items:center; gap:0.4rem;
}

@media (max-width: 900px){
  .photo-grid{column-count:2;}
}
@media (max-width: 560px){
  .photo-grid{column-count:1;}
}

/* ---------- CONTACT PAGE ---------- */
.contact-wrap{
  min-height:100svh;
  display:grid; grid-template-columns:1.1fr 0.9fr;
  padding-top:6rem;
}
.contact-intro{
  padding:3rem clamp(1.2rem, 4vw, 3rem);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center;
}
.contact-intro h1{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.4rem, 6vw, 4rem); text-transform:uppercase; line-height:0.92;
}
.contact-intro p{margin-top:1.2rem; color:var(--text-mute); max-width:28rem; font-size:0.88rem; line-height:1.6;}
.contact-details{margin-top:2.4rem; display:flex; flex-direction:column; gap:0.8rem;}
.contact-details a{
  font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.06em;
  color:var(--text); border-bottom:1px solid var(--line); padding-bottom:2px; width:fit-content;
}
.contact-details a:hover{color:var(--accent); border-color:var(--accent);}

.contact-form{padding:3rem clamp(1.2rem, 4vw, 3rem); display:flex; flex-direction:column; justify-content:center; gap:1.4rem;}
.field{display:flex; flex-direction:column; gap:0.5rem;}
.field label{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; color:var(--text-mute); text-transform:uppercase;}
.field input, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--text); font-family:var(--font-mono); font-size:0.95rem;
  padding:0.6rem 0.1rem; transition:border-color 0.2s var(--ease);
}
.field input:focus, .field textarea:focus{border-color:var(--accent); outline:none;}
.field textarea{resize:vertical; min-height:7rem;}
.submit-btn{
  align-self:flex-start; margin-top:0.6rem;
  border:1px solid var(--accent); color:var(--text);
  padding:0.9rem 1.8rem; font-family:var(--font-mono); font-size:0.78rem;
  letter-spacing:0.14em; text-transform:uppercase;
  transition:background 0.25s var(--ease), color 0.25s var(--ease);
}
.submit-btn:hover, .submit-btn:focus-visible{background:var(--accent); color:var(--bg);}
.form-note{font-size:0.7rem; color:var(--text-faint); max-width:26rem;}

@media (max-width: 800px){
  .contact-wrap{grid-template-columns:1fr;}
  .contact-intro{border-right:none; border-bottom:1px solid var(--line);}
}

/* ---------- VIDEO LIGHTBOX ---------- */
body.lightbox-open{overflow:hidden;}
.video-lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 4rem);
  background:rgba(11,7,18,0.92);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.25s var(--ease);
}
.video-lightbox.open{opacity:1; visibility:visible; pointer-events:auto;}
.lightbox-frame{
  width:100%; max-width:1100px; aspect-ratio:16/9;
  background:#08050d; position:relative;
  border:1px solid var(--line);
}
.lightbox-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-lightbox.is-photo .lightbox-frame{
  width:auto; max-width:92vw; aspect-ratio:auto;
  background:none; border:none;
}
.lightbox-frame img{
  max-width:92vw; max-height:88vh; display:block;
  object-fit:contain; margin:0 auto;
}
.lightbox-close{
  position:absolute; top:clamp(0.8rem,3vw,2rem); right:clamp(0.8rem,3vw,2rem);
  font-family:var(--font-mono); font-size:0.85rem; letter-spacing:0.1em;
  color:var(--text); border:1px solid var(--line);
  width:2.4rem; height:2.4rem; display:flex; align-items:center; justify-content:center;
  transition:border-color 0.2s var(--ease), color 0.2s var(--ease);
  z-index:3;
}
.lightbox-close:hover, .lightbox-close:focus-visible{border-color:var(--accent); color:var(--accent);}
.lightbox-prev, .lightbox-next{
  display:none;
  position:absolute; top:0; bottom:0;
  width:clamp(3.5rem, 15vw, 7rem);
  border:none; background:none; color:transparent; font-size:0;
  cursor:pointer;
  z-index:2;
  transition:background 0.2s var(--ease);
}
.lightbox-prev{left:0;}
.lightbox-next{right:0;}
.lightbox-prev:hover, .lightbox-prev:focus-visible{
  background:linear-gradient(to right, rgba(178,75,255,0.14), transparent);
}
.lightbox-next:hover, .lightbox-next:focus-visible{
  background:linear-gradient(to left, rgba(178,75,255,0.14), transparent);
}
.video-lightbox.is-photo.has-siblings .lightbox-prev,
.video-lightbox.is-photo.has-siblings .lightbox-next{display:block;}
.lightbox-counter{
  position:absolute; bottom:clamp(0.8rem,3vw,2rem); left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; color:var(--text-mute);
  display:none;
}
.video-lightbox.is-photo .lightbox-counter{display:block;}

/* ---------- TURNSTILE WIDGET ---------- */
.cf-turnstile{margin-top:0.2rem;}