:root {
      --bg: #0f0f12;
      --fg: #f5f5f5;
      --muted: #b5b5b5;
      --accent: #c9a24d;
      
    }

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

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--fg);
      line-height: 1.6;
    }

    header {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 2rem;
      opacity: 0;                  /
      transform: translateY(0);    
      transition: opacity 1.2s ease-out;
        
      background-image: url('photos/Final elly + mikkel/profil talkshow-2.jpg');
      background-size: cover;
      background-repeat: no-repeat;

  /* move image down */
  background-position: center 22%;  /* <-- adjust 30% to move image vertically */
    }

    header.visible {
     opacity: 1;
    }

    header h1 {
      font-family: 'Playfair Display', serif;
      color: #f6f3ee; /* soft off-white */
      font-weight: 700; /* stronger than normal */
      font-size: 4rem;  /* slightly bigger */
      letter-spacing: -0.02em; /* tighter and professional */
      margin-bottom: 1rem;
      position: relative;
      z-index: 1; /* puts text above overlay */
      text-shadow: 0 6px 20px rgba(0,0,0,0.6);
      opacity: 0;
      transform: translateY(20px);
      animation: fadePop 1s ease forwards;
      
       
}

@keyframes shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}

     

  @keyframes fadePop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

    


    header p {
      max-width: 600px;
      color: var(--muted);
      font-size: 1.1rem;
      position: relative;
      z-index: 1; /* puts text above overlay */
      color: var(--fg);
      text-shadow: 0 3px 10px rgba(0,0,0,0.5);
      transform: translateY(20px);
      animation: fadePop 1s ease forwards

    }

     header::before {
     content: '';
     position: absolute;
     top: 0; left: 0;
     width: 100%;
     height: 100%;
     background: rgba(32, 32, 32, 0.25); /* semi-transparent dark overlay */
     z-index: 0;
    }

    nav {
      position: fixed;
      top: 0;
      width: 100%;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      background: rgba(15, 15, 18, 0.8);
      backdrop-filter: blur(10px);
    }

    nav a {
      color: var(--fg);
      text-decoration: none;
      margin-left: 1.5rem;
      font-size: 0.9rem;
      letter-spacing: 0.05em;
    }

    section {
      padding: 6rem 2rem;
      max-width: 1000px;
      margin: 0 auto;
      scroll-margin-top: 20px;
    }

    section h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2.2rem;
      margin-bottom: 2rem;
    }

    .about p {
      max-width: 700px;
      color: var(--muted);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }

    
    .card {
      display: flex;
      justify-content: center;
      align-items: center;
       
    }

    
    .card.landscape {
      grid-column: span 2; 
      grid-row: span 1;    
    }

    .card img {
      width: 100%;
      height: 100%;
      object-fit: cover; 
      border-radius: 8px;
      cursor: pointer;
    }

    .card {
      background: #1a1a20;
      padding: 1rem;
      border-radius: 12px;
    }

    .card h3 {
      margin-bottom: 0.5rem;
      font-size: 1.2rem;
    }

    .card p {
      color: var(--muted);
      font-size: 0.95rem;
    }

    .contact a {
      display: inline-block;
      margin-top: 1rem;
      color: var(--accent);
      text-decoration: none;
      font-weight: 500;
    }

    footer {
      text-align: center;
      padding: 2rem;
      color: var(--muted);
      font-size: 0.85rem;
    }

    @media (max-width: 600px) {
      header h1 {
        font-size: 2.5rem;
      }
    }

    /* Lightbox overlay */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none; /* hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  
}

/* The image inside lightbox */
.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  transition: transform 0.3s ease;
  cursor: pointer;
  border-radius: 8px;
}

/* Close button */
.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 3rem;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.card {
  opacity: 0;
  transform: translateY(20px); /* start slightly below */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* When card is visible */
.card.visible {
  opacity: 1;
  transform: translateY(0); /* slide into place */
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;

  color: var(--fg); /* text always visible */
  
  /* fully transparent at the top */
  background-color: transparent;
  backdrop-filter: none; /* remove blur at top */
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease; /* smooth fade */
}

nav.scrolled {
  background-color: rgba(15, 15, 18, 0.95); /* solid black background */
  backdrop-filter: blur(10px); /* add blur after scrolling */
}


html {
  scroll-behavior: smooth;
}

.work-grid {
  grid-template-columns: 1fr;
  
}

.work-card {
  display: flex;
  gap: 2rem;
  background: #1a1a20;
  padding: 2rem;
  border-radius: 12px;
  align-items: center;
}

.work-text {
  flex: 1;
}

.work-text h3 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.work-role {
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.work-description {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 420px;
}

.work-image {
  flex: 1;
}

.work-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

@media (max-width: 700px) {
  .work-card {
    flex-direction: column;
    text-align: left;
  }

  .work-description {
    max-width: 100%;
  }
}

.skills-grid {
  grid-template-columns: 1fr; /* one card per row */
  gap: 2rem;
}

.skill-card {
  display: flex;
  gap: 2rem;
  background: #1a1a20;
  padding: 2rem;
  border-radius: 12px;
  align-items: center;
}

/* Left image */
.skill-image {
  flex: 1;
}

.skill-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* Right text */
.skill-text {
  flex: 1;
}

.skill-text h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.skill-text p {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 420px;
}

@media (max-width: 700px) {
  .skill-card {
    flex-direction: column;
    text-align: left;
  }

  .skill-text p {
    max-width: 100%;
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.skill-card .skill-subtitle {
    color: var(--accent); /* Change to the color you prefer */
    font-size: 1.1rem; /* Adjust font size as needed */
    margin-bottom: 1rem; /* Adjust spacing */
}

.skill-card .skill-subtitle2 {
  font-weight: bold;
  
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* never narrower than 300px */
  gap: 1rem;
}

/* Gallery images only */
.gallery-grid .card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* Landscape images in gallery */
.gallery-grid .card.landscape {
  grid-column: span 2; /* landscape spans two columns on large screens */
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  .gallery-grid .card.landscape {
    grid-column: span 1; /* take single column on smaller screens */
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr; /* single column on mobile */
  }
}

nav div:first-child {
  font-size: 1rem;           /* adjust as needed */
  font-weight: 500;
  line-height: 1.2;
  white-space: normal;       /* allow wrapping between words */
  overflow-wrap: anywhere;   /* allow wrap only between words */
  word-break: keep-all;          /* prevent breaking inside words */
}

@media (max-width: 700px) {
  nav div:first-child {
    font-size: 0.9rem;
    max-width: 70%;
  }
}

nav div:last-child {
  display: flex;           /* keep links in a row by default */
  flex-wrap: wrap;         /* allow wrapping to next line */
  gap: 0.5rem;             /* horizontal spacing between links */
}

nav div:last-child a {
  margin: 0;               /* remove any previous margin-left */
  padding: 0.3rem 0.5rem;  /* optional: add some clickable area */
  flex: none;              /* don't stretch links */
}

.work-caption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  text-align: right;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .work-caption {
    text-align: center;
  }
}