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




img, video {
            max-width: 100%;
            height: auto;
           }




  nav {
        width: 100%;
        background: rgb(31, 30, 30);
        display: flex;  /* ✅ SWITCH TO FLEX */
        align-items: center;
        padding: 0.75rem 2rem;
        position: relative;   /* safe + helps dropdown anchoring */    /* required for z-index */

        z-index: 10;          /* ✅ ensures nav + dropdown sit above hero image */
      }
  


/* ✅ Desktop Flex layout */
.nav-left,
.nav-right {
            flex: 0 0 auto;       /* ✅ only as wide as their content */
            display: flex;
            align-items: center;
            min-width: 0;
           }




.nav-left {justify-content: flex-start;}

.nav-right {justify-content: flex-end;}


 


 /* ✅ PERFECT optical centering */
/* Desktop nav links — true visual centering */
.nav-links {
            flex: 1;                 /* middle zone takes remaining space */
            display: flex;
            justify-content: center; /* centers links in the middle zone */
            align-items: center;

            list-style: none;
            gap: 2rem;
            margin: 0;               /* IMPORTANT: no auto margins */
            padding: 0;
            min-width: 0;
          }



  /* Artist name look */
  .artist-name {
                font-size: clamp(2rem, 4vw, 4rem);
                font-weight: 700;
                color: aquamarine;
                letter-spacing: 1px;
                margin: 0;
                white-space: nowrap;
               }
  


  .nav-links li { 
                  padding: 0; 
                }



  .nav-links li a {
                    position: relative;
                    text-transform: uppercase;
                    font-size: 1.5rem;
                    font-weight: 500;
                    text-decoration: none;
                    color: whitesmoke;
                    /* refined animation */
                    transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.15s ease;
                    padding: 0.85rem 1rem; 
                  }
                  
  
  
.nav-links li a:hover,
.nav-links li a:focus-visible,
.nav-links li a:active {
                        color: aquamarine;
                        text-shadow: 0 0 10px aqua;
                       }

  

.nav-links li a:focus-visible {
                                outline: 2px solid aquamarine;
                                outline-offset: 4px;
                              }
                      


  
  /* Logo */
  .logo { margin: 0; display: flex; }
  .logo img {
              width: 72px;
              height: 72px;
              border-radius: 50%;
              background-color: aquamarine;
              display: block;
              object-fit: cover;
            }


  
  /* Hamburger: hidden on desktop */
  .nav-toggle {
                display: none;              /* ✅ important */
                background: transparent;
                border: 0;
                padding: 0.5rem;
                cursor: pointer;
                line-height: 0;
              }


  
  /* Hamburger lines (visible when button is visible) */
  .nav-toggle span {
                    display: block;             /* ✅ important */
                    width: 34px;
                    height: 3px;
                    margin: 6px 0;
                    background: whitesmoke;
                    transition: transform 0.5s ease, opacity 0.5s ease;  /* Animate hamburger to X */
                    transform-origin: center;
                   }
  



 

/* When menu is open */
.nav-toggle.is-active span:nth-child(1) {
                                          transform: translateY(7px) rotate(45deg);
                                        }

.nav-toggle.is-active span:nth-child(2) {
                                          opacity: 0;
                                        }

.nav-toggle.is-active span:nth-child(3) {
                                          transform: translateY(-9px) rotate(-45deg);
                                        }



          /* The body starts here */

html, body {
            height: 100%;
            margin: 0;
            overflow-x: hidden;   /* prevent side white line */
          
           }




body {
      height: 100vh;               /* ✅ fixed viewport stage */
      display: flex;
      flex-direction: column;     /* vertical layout: nav -> main -> footer */
      overflow-x: hidden;
     }










nav, footer {
              flex: 0 0 auto;   /* ✅ keep nav/footer at natural height */
            }



footer {
        margin-top: auto;       /* ✅ add THIS line */
        text-align: center;
        background-color: black;
        color: whitesmoke;
        padding: 0.5rem 0.5rem;
        width: 100%;
       }


.footer-content {
                display: flex;
                flex-direction: column;   /* logo on top, text below */
                align-items: center;
                justify-content: center;
                gap: 0.75rem;
                }
      

.footer-logo {
              width: 90px;              /* adjust as needed */
              height: auto;
              display: block;
             }
      

.footer-text {
              font-size: 0.9rem;
              text-align: center;
              opacity: 0.9;
             }

             




                                        /* =========================
                                                 ABOUT PAGE LAYOUT
                                           ========================= */



/* optional: give ABOUT page a class on <main> */



main {
      flex: 1 0 auto;
      min-height: 0;      /* ✅ CRITICAL for nested scrolling (card-content) */
      position: relative;
      z-index: 0;
      overflow-y: auto;     /* ✅ main scrolls */
      overflow-x: hidden;   /* ✅ no right-side gap */
     }





.about-main {
              display: block;
              
              padding: 2rem;
              background: #999999;        
            }



.about-layout{
              width: 100%;
              max-width: 100%;
              display: grid;

              grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
              gap: clamp(1.5rem, 3vw, 3rem);
              align-items: stretch;

              height: clamp(520px, 70vh, 760px); /* ✅ shared height target */
              min-height: 0;
             }



            

                                /* =========================
                                           GALLERY
                                  ========================= */

.gallery-frame,
.card-frame {
              border:6px solid #777;
              background:#fff;
              padding:1rem;
              min-height: 0;           /* critical */
            }





.gallery-frame{
                display: flex;
                flex-direction: column;
                min-height: 0;
                overflow: visible;   /* ✅ IMPORTANT: allow gallery to grow (no clipping) */
              }



.card-frame {
              display: flex;
              flex-direction: column;
              min-height: 0;
              overflow: hidden;  /* ✅ keep card boxed */
              max-height: clamp(520px, 70vh, 760px); /* ✅ optional but strongly recommended */
            }



/* Wrapper that holds title + text + button */
.card-body {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;  /* CRITICAL for scroll containment */
           }


/* Fixed title (never scrolls) */
.card-title {
              margin: 0.5rem 0 0.75rem;
              flex: 0 0 auto;
            }


/* Scrollable text zone only */
.card-content {
                flex: 1;
                min-height: 0;
                overflow: auto;       /* ✅ scrolling happens here */
                padding-right: 0.5rem; /* space for scrollbar */
              }


/* Text collapse system */
.card-text {
             overflow: hidden;
           }


.card-text.is-collapsed {
                          display: -webkit-box;
                          -webkit-box-orient: vertical;
                          -webkit-line-clamp: 5; /* adjust lines as desired */
                          line-clamp: 5;
                        }


/* Read-more button stays visible */
.card-readmore {
                margin-top: 0.75rem;
                align-self: flex-start;
                background: none;
                border: 0;
                padding: 0;
                color: #111;
                text-decoration: underline;
                cursor: pointer;
                font: inherit;
               }


.gallery-grid{
              flex: 1;
              min-height: 0;

              display: grid;
              grid-template-columns: repeat(4, minmax(0, 1fr));
              grid-template-rows: repeat(2, 1fr);
              gap: 0.75rem;
            }





.gallery-grid a.gallery-item{
                              display: block;
                              width: 100%;
                              height: 100%;
                              overflow: hidden;
                            }





.gallery-grid img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: cover;          /* ✅ thumbnails fill their cells */
                    border: 2px solid #333;
                    cursor: pointer;
                  }





              /* =========================
                CARD (fixed height; text scrolls inside)
                ========================= */


.info-card_image  {
                    align-self: center;
                    border: 2px solid #333;
                    background: #fff;
                    display: inline-block;     /* shrink-wrap */
                  }

.card-frame img {
                  display: block;
                  max-width: 100%;
                  height: auto;
                  object-fit: contain;       /* show full image */
                }








                                     /*  MEDIA QUERY STARTS HERE  */


                              /* ✅ Mobile / small tablet hamburger layout */


                                        /* =========================
                                                MEDIA QUERIES
                                          ========================= */

/* ✅ Mobile / small tablet hamburger layout */
@media (max-width: 800px) {

  nav {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    padding: 0.75rem 1rem;
  }

  .nav-right { 
    display: none;
  }

  .nav-left {
    grid-column: 2;
    justify-self: center;
  }

  .nav-toggle {
    display: block;
    grid-column: 3;
    justify-self: end;
  }

  .nav-toggle span {
    margin: 5px 0;
  }

  .artist-name {
    text-align: center;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    flex: none;
    width: 100%;

    position: absolute;
    top: 100%;
    inset-inline: 0;

    z-index: 11;
    background: rgb(31, 30, 30);
    border-top: 1px solid rgba(255, 255, 255, 0.15);

    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow: hidden;
    pointer-events: none;

    transition: max-height 300ms ease, opacity 220ms ease, transform 220ms ease;
    will-change: max-height, opacity, transform;

    padding: 0;
  }

  .nav-links.is-open {
    max-height: 320px;
    opacity: 1;
    transform: translateY(0);
    padding: 0.5rem 0 0.75rem;
    pointer-events: auto;
  }

  .nav-links li {
    width: fit-content;
    list-style: none;
    padding: 0.85rem 1rem;
    margin: 0 auto;
  }

  .nav-links li a {
    display: inline-block;
    width: auto;
    padding: 0;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.2;
  }
} /* ✅ END max-width: 800px nav */





                              /* ===== ABOUT PAGE - RESPONSIVE ===== */


                              /* Tablet + down: stack + 2-column gallery with big rows */
                            @media (max-width: 1100px) {
                            

                            .about-layout { 
                                            grid-template-columns: 1fr; 
                                            height: auto;        /* ✅ IMPORTANT: let content grow */
                                            min-height: 0;       /* keep */
                                          }

                            .gallery-grid {
                                            grid-template-columns: repeat(2, minmax(0, 1fr));

                                            grid-template-rows: none;   /* ✅ ADD THIS: cancels repeat(2, 1fr) */
                                            grid-auto-rows: clamp(200px, 26vw, 320px);

                                            gap: 0.75rem;
                                          }


                            .gallery-frame {
                                            overflow: visible;   /* ✅ allow the frame to grow with extra rows */
                                            height: auto;        /* ✅ avoid height:100% trapping */
                                           }




                            .card-frame img {
                                              height: auto;         /* ✅ let it grow taller */
                                              max-height: 55vh;     /* ✅ safety so it doesn’t get ridiculous */
                                              object-fit: contain;  /* ✅ show full image (no cropping) */
                                              background: #fff;     /* ✅ looks clean if there are “bars” */                                              
                                            }
                                           


                            .card-frame{
                                        max-height: none;      /* ✅ IMPORTANT: remove the desktop height cap */
                                       }


                            .card-content{
                                          max-height: none;    /* optional safety */
                                          font-size: 1rem;     /* ✅ keeps font readable */
                                          line-height: 1.5;
                                         }




  /* ===== CARD DARK MODE (tablet + phone) ===== */

  .card-frame {
                background: #1e1e1e;       /* dark but not pure black */
                border-color: #555;        /* softer border */               
              }

  .card-frame {
                box-shadow: 0 8px 24px rgba(0,0,0,0.35);
              }

  .card-title {
                color: #f2f2f2;            /* bright title */
              }

  .card-content,
  .card-text,
  .card-content p {
                    color: #d6d6d6;        /* easy-on-the-eyes text */
                  }

  .card-readmore {
                  color: #9fffe0;          /* subtle accent (matches FlacoSel vibe) */
                 }

  .card-readmore:hover {
                        color: #ffffff;
                        text-decoration: none;
                       }


 .info-card_image {
                    border-color: #888;
                    border-width: 1rem;
                  }

                      }



                          /* Smaller: tighten padding + card image height */
@media (max-width: 800px) {
                            .about-main { padding: 1rem; }

                            .card-frame img { height: 200px; }
                          }



                          /* Phone narrow: 1 column, BIG rows (each row ~= current 2x2 block height) */
@media (max-width: 500px) {

                            .gallery-grid {
                                            grid-template-columns: 1fr;      /* ✅ 1 image per row */
                                            grid-template-rows: none;        /* ✅ cancel any fixed rows */
                                            
                                            /* ✅ each row = "the old 2-row block" height */
                                            grid-auto-rows: clamp(420px, 90vw, 560px);

                                            gap: 0.75rem;
                                          }


                            .gallery-grid a.gallery-item {
                                                          height: 100%;
                                                          overflow: hidden;
                                                         }


                            .gallery-grid img {
                                                width: 100%;
                                                height: 100%;
                                                object-fit: cover;
                                                display: block;
                                              }
                          }