/* COLOURS */
:root {
  --musician-back: #00FF00;
  --musician-text: #FF00FF;
  --creative-back: #663399;
  --creative-text: #FFFF00;
  --photographer-back: #FF9900;
  --photographer-text: #0000FF;
}

/* THEME */
body {
	font-family: Alte;
  font-weight: normal;
/* 	font-size: 50px; */
	line-height: 1.5;
	background-color: #ffffff;
	color: #000000;
  padding: 3rem;
  min-height: 100vh;
  min-width: 100vw;
}
html {
  font-size: 16px;
}

h1 {
	font-size: 2rem;
}

h2 {
  font-family: drawn;
  font-size: 2rem;
}
h2 a {
  font-family: drawn !important;
  font-size: 2rem;
  background-color: #7fdbff;
  padding: 1rem;
  border: 1px solid rgba(255, 0, 0, 0);
  border-radius: 4rem;
  text-decoration: none;
}
h3 {
  font-size: 1.5rem;
  font-family: drawn;
  color: white;
}
h4 {
/*   font-family: alte; */
  font-family: drawn;
  font-size: 2rem;
}
h4.mobile {
  display: none;
}
h5 {
  font-family: drawn;
  font-size: 1.5rem;
  text-transform: uppercase;
}

p {
  font-size: 1.5rem;
  margin-bottom: 1rem;
/*   text-align: justify; */
}

footer p {
  font-size: 1rem;
}

a {
  font-family: Drawn-BubbleOver;
  text-decoration: none;
  color: black;
}

/* QUICK STYLES */
.display-flex {
 display: flex; 
}
.flex-direction-column {
  flex-direction: column;
}
.flex-direction-row {
  flex-direction: row;
}
.gap-2rem {
  gap: 2rem;
}
.margin-bottom-4 {
 	margin-bottom: 4rem; 
}
.margin-bottom-2 {
 	margin-bottom: 2rem; 
}
.text-align-center {
  text-align: center;
}

/* LANDING PAGE */
.landing-page {
  text-align: center;
/*   align-items: center; */
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
}
.landing-page h1{
  margin-bottom: 4rem;
}
h2.musician a {
  color: var(--musician-text);
  background-color: var(--musician-back);
}
h2.creative a {
  color: var(--creative-text);
  background-color: var(--creative-back);
}
h2.photographer a {
  color: var(--photographer-text);
  background-color: var(--photographer-back);
}




/* CUSTOM CURSOR */
/* h2.musician a:hover {
  cursor: url(filled_cursor-music.png) 25 25, auto !important;
}
h2.creative a:hover {
  cursor: url(filled_cursor-creative.png) 25 25, auto !important;
}
h2.photographer a:hover {
  cursor: url(filled_cursor-photographer.png) 25 25, auto !important;
} */

/* a:hover {
  cursor: url(filled_cursor-a.png) 25 25, auto !important;
}  */

/* HEADER & MENU */
header {
  position: fixed;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  top: 3rem;
  left: 3rem;
  width: 100%;
  z-index: 100;
}
/* .header-gradient {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,   
    rgba(255, 255, 255, 0.8) 40%,   
    rgba(255, 255, 255, 0.5) 80%,   
    rgba(255, 255, 255, 0.2) 90%,    
    rgba(255, 255, 255, 0) 100%      
  );
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 3rem;
  z-index: 99;
} */

/* Menu base state */
.menu {
  position: relative;
  height: 4rem;           /* only shows one h2 */
  cursor: pointer;
  transition: height 0.3s ease;
}

.menu h2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;            /* inactive by default */
  transform: translateY(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 0;
}

/* Active page on load */
.menu h2.active {
  opacity: 1;
  z-index: 10;
}

/* Hover / click expand */
.menu.hovered h2,
.menu.active h2 {
  opacity: 1;
  z-index: 10;
}

/* Slide each h2 into place */
.menu.hovered h2:nth-child(1),
.menu.active h2:nth-child(1) { transform: translateY(0); }
.menu.hovered h2:nth-child(2),
.menu.active h2:nth-child(2) { transform: translateY(6rem); }
.menu.hovered h2:nth-child(3),
.menu.active h2:nth-child(3) { transform: translateY(12rem); }

/* Hover spacing optional */
.menu h2 a {
  padding: 1rem 2rem;
  border-radius: 4rem;
  text-decoration: none;
}
/* MAIN */
main {
  padding-top: 6rem;
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 12rem);
  position: relative;
}
div.sticky-relative {
/*   position: relative; */
}
/* Text styling */
.text {
  height: calc(100vh - 13rem);
}
div.scroll-for-work {
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
  position: relative;
}

/* div.scroll-stick {
  position: fixed;
  bottom: 0;
} */

div.scroll-stick {
  position: sticky;
  bottom: 3rem; /* distance from bottom of viewport */
  z-index: 10;
  background: transparent;
  margin: 0;
  text-align: left;
  align-self: flex-start; /* keep it aligned with text flow */
  margin-top: calc(-1 * 2.5rem);
  mix-blend-mode: difference;
}
div.scroll-stick img {
  min-height: 1.5rem;
/*   filter: invert(100%); */
}

div.scroll-stick.mobile {
  display: none;
/*   text-align: center !important; */
/*   align-self: center !important;  */
/*   bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem) !important; */
/*   transform: translateY(-2rem) !important; */
  
}

/* Wrap image bottom-right */
.banner-image {
	width: calc(50vw - 3rem);
  margin-left: auto;
  margin-top: 3rem;
}


/* Wrap image bottom-right */
.banner-image {
  position: relative; /* ← This anchors the caption inside the image */
  width: calc(50vw - 3rem);
  margin-left: auto;
  overflow: hidden; /* optional: keeps caption inside bounds if scaled */
}

/* Smooth transition and hover blur */
.banner-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.25s ease-in-out;
}

.banner-image:hover img {
  filter: blur(0.25rem);
}

/* Caption styling */
.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

div.image:hover .caption,
div.image.hover .caption {
  opacity: 1;
}

/* Hover / click effects */
div.image:hover img,
div.image.hover img {
  filter: blur(0.25rem);
}

/* WORK */
div.work {
/*   margin-top: 6rem; */
}


/* FOOTER */
footer {
  margin-top: 4rem;
 	text-align: left;
  display: flex;
  flex-direction: row;
}
footer div {
  width: 50%;
}
footer h1 {
  margin-bottom: 2rem;
}
p.footer {
  font-size: 1.5rem;
}
p.copyright {
  font-family: drawn;
  font-size: 1rem;
  margin-top: 2rem;
}
div.lot-of-things {
  display: flex;
}
.lot-of-things h2 {
  margin-left: 1.5rem;
}

/* SOCIAL MEDIA  */
div.social-link {
  margin-bottom: 2rem;
}
div.social-link p {
  margin-bottom: 0rem;
}

/* TABLE */
.work,
.work-musician {
  overflow: visible;
}
div.release, .table-heading {
  display: grid;
	grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: auto;
  text-align: left;
  align-items: flex-start;
/*   margin: 0.5rem 0; */
}
div.table-heading {
  margin-bottom: 1.5rem;
  position: sticky;
  top: -6rem;
  background: white;
  z-index: 5;
  height: 12rem;
  align-content: end;
  transition: all 0.3s ease-in-out;
}
div.release {
  margin-bottom: 1rem;
}
div.table-heading h5 {
  margin: 0.5rem 0;
}
div.release p {
  margin: 0;
  padding-right: 1.5rem;
  }
div.work-musician {
  position: relative;
}

/* WORK */
.work-creative, .work-photographer {
  margin-top: 6rem;
}

/* SOCIAL-MEDIA */
div.social-media {
  justify-content: space-between;
  height: 100%;
}


/* CREATIVE WORK */
/* Projects grid */
.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 6rem; /* space for footer */
}

.project {
  cursor: pointer;
}

.project img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project img:hover {
  transform: scale(1.02);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
}

/* Overlay */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0.25rem);
  justify-content: center; 
  align-items: center;
  z-index: 999;
  padding: 2rem;
  transition: all 0.25s ease-in-out;
}

.overlay-content {
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  background: white;
  padding: 1.5rem;
/*   border-radius: 0.5rem; */
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.3);
}

.close-overlay {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
/*   color: white; */
  color: black;
  cursor: pointer !important;
}