/* ===== 1. CORE & VARIABLES ===== */
@font-face {
  font-family: 'AJPlungText';
  /* Updated to .woff2 and the modern format hint */
  src: url('fonts/AJPlungTextVF.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap; /* Optional: helps prevent invisible text while loading */
}

:root {
  --primary: #795C5F;
  --bg-color: #ffffff;
  --border: #795C5F;
  --link-hover: #4F345A;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

html, body {
  height: 100%; margin: 0; overflow: hidden;
  background: var(--bg-color); color: var(--primary);
  font-family: 'AJPlungText', sans-serif;
}

/* ===== 2. TYPOGRAPHY (CONSOLIDATED) ===== */

p {
  margin: 0 0 1em 0;
  line-height: 1.4;
  font-variation-settings: "wght" 400;
}

h2 {
  margin: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  font-variation-settings: "wght" 800;
}

a {
  color: var(--primary);
  text-decoration: underline;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover);
}

.bio {
  font-size: 1rem;
  margin-bottom: 20px;
}

.value {
  font-variation-settings: "wght" 500;
  line-height: 1.5;
}

.label {
  /* Updated for mobile readability: slightly larger and better spacing */
  font-size: 0.75rem !important;
  letter-spacing: -0.02em !important; 
  font-variation-settings: "wght" 500;
  margin: 5px 0 0 0;
  opacity: 0.8;
  display: block;
}

.contact-links-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

/* New: Specifically targeting the Login button or mobile buttons */
button {
  font-size: 16px; /* Prevents iOS auto-zoom */
}

/* ===== 3. DESKTOP LAYOUT ===== */
.global-header { 
  display: grid; 
  grid-template-columns: 33vw 67vw; 
  height: 53px; 
  border-bottom: 1px solid var(--border); 
}

.global-header .left-col, 
.global-header .right-col { 
  padding: 15px 40px; 
}

.global-header .left-col { 
  border-right: 1px solid var(--border); 
}

.main-container { 
  display: grid; 
  grid-template-columns: 33vw 67vw; 
  height: calc(100vh - 53px); 
}

.left-panel { 
  padding: 40px; 
  border-right: 1px solid var(--border); 
  overflow: hidden; 
}

.panel-inner { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
}

.right-panel { 
  height: 100%; 
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch; 
}

/* ===== 4. COMPONENTS (SLIDERS & UI) ===== */
.project { border-bottom: 1px solid var(--border); }
.slider-container { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.image-wrapper { display: flex; scroll-behavior: smooth; overflow: hidden; }
.image-wrapper img { width: 100%; flex-shrink: 0; display: block; }

.arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.8); border: 1px solid var(--border);
  color: var(--primary); width: 30px; height: 30px; border-radius: 50%;
  font-family: 'AJPlungText'; font-size: 1.2rem; cursor: pointer; z-index: 10;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
}
.arrow:hover { background: var(--primary); color: #fff; }
.arrow.prev { left: 20px; }
.arrow.next { right: 20px; }

.project-info { padding: 20px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

#billow-hover-img { position: fixed; width: 180px; pointer-events: none; border-radius: 10px;
    opacity: 0; z-index: 9998; transition: opacity 0.2s ease; }
#billow-hover-img.visible { opacity: 1; }

/* ===== 5. MOBILE OVERRIDES (MODIFIED) ===== */
@media (max-width: 600px) {
  html, body { height: auto; overflow-y: auto; overflow-x: hidden; }
  
  /* Lock scroll properly on mobile */
  body.lock-scroll { position: fixed; width: 100%; overflow: hidden; }
  
  .main-container { display: block; }
  .global-header { grid-template-columns: 1fr; }
  .global-header .right-col { display: none; }
  
  .left-panel {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    /* Use 100dvh to account for browser UI, stop at nav */
    height: calc(100dvh - 60px); 
    background: var(--bg-color); 
    z-index: 9000; 
    padding: 60px 20px;
    transform: translateY(100%); 
    transition: transform 0.35s ease;
    overflow-y: auto; /* Ensure profile itself can scroll if text is long */
  }
  
  .left-panel.show-profile { transform: translateY(0); }
  
  /* Stack bio and footer closer on mobile */
  .panel-inner {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;
  }

  .slider-container { border-bottom: none !important; }
  .image-wrapper { 
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .image-wrapper::-webkit-scrollbar { display: none; height: 0; }
  .image-wrapper img { scroll-snap-align: start; }
  
  .arrow { display: none; } 
  
  .project-info { grid-template-columns: 1fr; padding: 24px 20px; }
  
  /* Increase bio size slightly for readability on phone screens */
  .bio { font-size: 1.1rem; }

  .mobile-nav {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    position: fixed; 
    bottom: 0;
    width: 100%; 
    height: 60px; 
    background: var(--bg-color); 
    border-top: 1px solid var(--border); 
    z-index: 9500;
  }
  
  .mobile-nav button { 
    background: none; 
    border: none; 
    font-family: inherit; 
    color: var(--primary); 
    text-transform: uppercase; 
    font-size: 16px; /* Legibility floor */
  }
  
  .mobile-nav button.active { 
    font-variation-settings: "wght" 800; 
    text-decoration: underline; 
  }
}