* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'STIX Two Text', serif;
  background-image:url('assets/images/background.png');
  background-size:cover; background-position:center; background-attachment:fixed;
  color:#131312; min-height:100vh; display:flex;
  justify-content:center; align-items:center;
  text-transform:lowercase; -webkit-font-smoothing:antialiased;
  flex-direction: column; background-color: #181818;
     }

.site-wrapper {
  width: 100%; max-width: 440px; padding: 2rem 1.5rem; display: flex; 
  flex-direction: column; gap: 2.5rem;
  background-image: url('assets/images/wrapper-background.png');
  background-size: 100% 100%; background-position: center; border-radius: 12px; 
  box-shadow: 0 8px 32px rgba(0,0,0,0.2); transition: all 1.4s ease-in-out;
  margin-left: auto; margin-right: auto;
              }





/* TITLE */
.post-it-wrapper { position: relative; width: 100%; max-width: 480px;
                   margin-left: auto; margin-right: auto;
                 }

.post-it-wrapper > .title-post-it {
  display: block; position: absolute; top: -17px; left: -35px; z-index: 20;
  width: 150px; transform: rotate(-15deg); pointer-events: none; 
                                  }

.title-post-it img { width: 100%; height: auto; }

.title-post-it span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: white; font-weight: bold; font-size: 0.9rem;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(0, 0, 0, 0.5);
                    }

.avatar-frame .title-post-it { display: none !important; }





/* HEADER : MUSICAL COMPONENT */
.player-container {
  background:transparent; padding-bottom:1.5rem;
  border-bottom:1px dashed rgba(19,19,18,0.15);
                  }

.player-layout { display:flex; align-items:center; gap:1.2rem; }
.avatar-frame {
  position: relative; width: 75px; height: 75px; transform: rotate(-2deg); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
              }

.avatar-frame img { width: 100%; height: 100%; object-fit: cover;  border-radius: 8px; }
.player-details { flex-grow:1; }
.profile-title { font-size:1.2rem; font-weight:600; letter-spacing:-0.02em; }
.song-highlight { background-color: rgba(24, 24, 24, 0.85); color: #f5f5f7;
                  padding: 0.1rem 0.4rem; border-radius: 4px;
                  text-decoration: none; font-weight: bold; display: inline-block;
                }
.song-highlight:hover { background-color: rgba(24, 24, 24, 1); }
.currently-playing { font-size:0.8rem; opacity:0.6; font-style:italic; font-weight: bold;
                     margin-bottom: 0.6rem;
                   }
.progress-line-back { width:100%; height:2px; background:rgba(13,13,12,0.35);
                      position:relative; margin-bottom:0.3rem;
                    }

.progress-line-fill { position:absolute; left:0; top:0; height:100%; width:12%;
                      background:#131312;
                    }
.progress-time { display:flex; justify-content:space-between; font-size:0.7rem;
                 opacity:0.5;
               }
.progress-time span { font-weight: bold }
.spotify-icon-link svg { width:24px; height:24px; fill:#131312; opacity:0.8;
                         transition:opacity 0.2s;
                       }
.spotify-icon-link:hover svg { opacity:1; }





/* ==========================================
   3. MEDIA QUERY : MOBILE (< 550px)
   ========================================== */
@media (max-width: 550px) {
  
  .site-wrapper { width: 92% !important; }

  .post-it-wrapper > .title-post-it { display: none !important; }

  .avatar-frame .title-post-it {
    display: block !important; position: absolute !important;
    top: -12px !important; left: -20px !important; width: 80px !important;        
    transform: rotate(-25deg) !important; z-index: 99 !important;
                               }

  .avatar-frame .title-post-it span {
    font-size: 0.55rem !important; letter-spacing: -0.03em; width: 100%;
    padding-bottom: 0.3rem;text-align: center;
                                    }
                          }

@media (max-width: 500px) and (min-width: 400px) {
  .avatar-frame { width: 75px !important; height: 75px !important;
                  flex-shrink: 0 !important;
                }
                                                 }

@media (max-width: 400px) {
  .polaroid-btn { width: 85px !important; height: 95px !important;
                  flex-shrink: 0 !important;
                }

  .polaroid-gallery { gap: 0.25rem !important; transform: scale(0.9);
                      transform-origin: center center; width: 100%;
                    }
                          }

@media (max-width: 350px) {
  .polaroid-gallery { transform: scale(0.82); gap: 0.15rem !important; }
                          }




/* TAB SYSTEM SECTIONS */
.content-container { 
  position:relative; min-height:0; display: grid; grid-template-rows: 0fr; 
  transition: grid-template-rows 0.4s ease-in-out;
  margin-top: -1.2rem; margin-bottom: -1.2rem;
                   }

.content-container:has(.bio-section.active) { 
  display: grid; grid-template-rows: 1fr;
  margin-top: 0; transition: grid-template-rows 0.8s ease-in-out;
                                            }

.bio-inner-wrapper { overflow: hidden; }

.bio-section {
  opacity:0; visibility:hidden; transform:translateY(10px); 
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
  display: none; padding-bottom: 0px; margin-bottom: 0px;
             }

.bio-section.closing {
  display: block !important; opacity: 0 !important; visibility: hidden !important;
  transform: translateY(-10px) !important;
                     }

.bio-section.active { display: block; opacity:1; visibility:visible; 
                      transform:translateY(0);
                    }

.section-title { font-size:1.6rem; font-weight:400; letter-spacing:-0.03em; transform:rotate(-0.5deg); }
.section-subtitle { font-size:0.85rem; opacity:0.5; margin-bottom:1.2rem; }
.info-table { margin-bottom: 0.3rem !important; }
.info-table p:last-child { margin-bottom: 0px; }
.info-table p { font-size:0.9rem; line-height:1.6; margin-bottom:0.8rem; }
.info-table strong { font-weight:600; margin-right:0.3rem; }




/* SOCIAL GRID */
.social-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem;
               padding-top:0.5rem;
             }
.btn-social {
  display:block; text-align:center; padding:0.6rem; border:1px solid #131312;
  border-radius:36px; color:#131312; text-decoration:none; font-size:0.85rem;
  transition:background-color 0.2s ease, color 0.2s ease;
}

.btn-social:hover { background-color:#131312; color:#f5f5f7; }




/* INTERACTIVE POLAROIDS FOOTER */
.navigation-footer { margin-top: auto; display: flex; flex-direction: column;
                     align-items: center; 
                   }

.footer-dark-bg {
  width: calc(100% + 3rem); margin-left: -1.5rem; margin-right: -1.5rem;     
  margin-bottom: -2rem; padding: 3rem 1.5rem 2.5rem 1.5rem; 
  background-image: url('assets/images/footer-background.png');
  background-size: 100% 100%; background-position: center top;
  background-repeat: no-repeat; border-bottom-left-radius: 12px; 
  border-bottom-right-radius: 12px; display: flex; justify-content: center;
                }

.polaroid-gallery { display: flex; justify-content: center; gap: 0.8rem; width: 100%; }

.polaroid-btn { background: transparent; border: none; padding: 0;
                cursor: pointer; width: 85px; height: 95px;
                transition: transform 0.3s ease, filter 0.3s ease;
              }

.polaroid-btn img { width: 100%; height: 100%; object-fit: cover; }
.polaroid-gallery .polaroid-btn:nth-child(1) { transform: rotate(-4deg); }
.polaroid-gallery .polaroid-btn:nth-child(2) { transform: rotate(3deg); }
.polaroid-gallery .polaroid-btn:nth-child(3) { transform: rotate(-2deg); }
.polaroid-gallery .polaroid-btn:nth-child(4) { transform: rotate(5deg); }
.polaroid-gallery .polaroid-btn:hover { 
  transform: scale(1.1) rotate(0deg) !important; z-index: 10; 
                                      }




/* DOMAIN CREDITS */
.domain-credits { font-size:0.75rem; letter-spacing:0.05em; margin-top: 1rem; 
                  text-align: center; color: white; font-weight: bold; 
                  text-shadow: 0 0 8px rgba(255,255,255,0.8);
                }
.domain-credits a { color: inherit; text-decoration: none; font-weight: inherit;
                    text-shadow: inherit;
                  }




/* FOOTER */
.legal-footer { position: absolute; bottom: 1vh; left: 0; 
                width: 100%; text-align: center; z-index: 10;
              }

#open-privacy { color: white; font-size: 0.75rem; opacity: 0.6; 
                text-decoration: none;  transition: opacity 0.3s ease; 
                cursor: pointer;
              }
#open-privacy:hover { opacity: 0.3; }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; 
         height: 100%; background-color: rgba(0,0,0,0.6); justify-content: center; 
         align-items: center; 
       }

.modal-content { position: relative; padding: 2rem; width: 85%; max-width: 24rem;  
                 background-image: url('assets/images/wrapper-background.png');
                 background-size: cover; background-position: center;
                 border-radius: 0.75rem; color: #131312; font-size: 0.9rem;
                 line-height: 1.6;
               }
.close-modal { position: absolute; top: 10px; right: 15px; cursor: pointer;
               font-size: 1.5rem;
             }

@media (min-width: 700px) {
  .modal-content { width: 650px; max-width: 90vw; aspect-ratio: 2000 / 1101; 
    background-color: transparent;
    background-image: url('assets/images/privacy-background.png');
    background-position: center; background-repeat: no-repeat; background-size: contain; 
    font-size: 1.05rem; color: #131312; padding: 3rem 4.5rem; display: flex;
    flex-direction: column; justify-content: center;
                 }
  .modal-content .close-modal { top: 5rem !important; right: 2.5rem !important; 
                                font-size: 2rem !important; color: #131312;
                              }
                          }