:root{ --bg:#fff; --fg:#111; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  overflow:hidden; font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
#bg{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }

/* optional chrome */
.site-header,.site-footer{
  position:fixed; left:0; right:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(14px,4vw,36px);
}
.site-header{ top:0; background:none; }
.site-footer{ bottom:0; background:none; }
.brand a,.site-nav a{ color:inherit; text-decoration:none; font-weight:600; letter-spacing:.02em; }
.site-nav a{ margin-left:16px; color:#6d6d6d; }
.site-nav a:hover{ color:var(--fg); }

/* bottom toggle */
.bottom-toggle{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:18px; z-index:10;
  display:inline-flex; align-items:center;
  background:#fff; border:1px solid #000;
  box-shadow:none;
}
.toggle-btn{
  -webkit-appearance:none; appearance:none;
  border:0; background:#fff; color:#000;
  padding:8px 12px; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:0.02em; cursor:pointer;
  border-right:1px solid #000;
}
.toggle-btn:last-child{ border-right:none; }
.toggle-btn.is-active{ background:#000; color:#fff; }

/* portfolio grid overlay */
.portfolio-grid{
  position:fixed; inset:0; z-index:1;
  display:none; grid-template-columns:repeat(3, 1fr);
  background:#fff; overflow:auto;
}
.portfolio-grid.show{ display:grid; }
@media (max-width:1100px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .portfolio-grid{ grid-template-columns:1fr; } }

.portfolio-grid .cell{
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  position: relative;
  overflow:hidden;
  cursor: pointer;
}

/* animated lines */
.portfolio-grid .cell::before,
.portfolio-grid .cell::after{
  content:"";
  position:absolute;
  background:#000;
  z-index:1;
  transform:scale(0);
  transition:transform 1s ease;
}
.portfolio-grid .cell::before{
  top:0; left:0; right:0; height:2px;
  transform-origin:left;
}
.portfolio-grid .cell::after{
  top:0; bottom:0; left:0; width:2px;
  transform-origin:top;
}
.portfolio-grid.drawing .cell::before{ transform:scaleX(1); }
.portfolio-grid.drawing .cell::after{ transform:scaleY(1); }

/* images: show largest area with NO crop */
.portfolio-grid .cell img{
  width:100%;
  height:auto;               /* keep natural aspect ratio */
  display:block;
  margin:0 auto;             /* center horizontally */
  opacity:0;
  transition:opacity 1s ease;
}
/* (If you prefer them vertically centered when shorter than the cell's row,
   keep the flex centering on .cell, which you already have.) */
.portfolio-grid.fade-in .cell img{ opacity:1; }

/* outer rim for the grid */
.portfolio-grid{
  box-shadow: inset 0 0 0 2px #000; /* draws the outer border once */
}

/* Project name popup */
.project-popup{
  position: fixed; z-index: 10;
  background: #fff; border: 1px solid #000;
  padding: 8px 12px; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.02em;
  pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
  white-space: nowrap;
}
.project-popup.show{ opacity: 1; }

/* About Panel */
.about-panel{
  position: fixed; inset: 0; z-index: 4;
  background: transparent;
  overflow-y: auto;
  transform: translateX(100%); transition: transform 0.6s ease, opacity 0.6s ease;
  opacity: 0; pointer-events: none;
}
.about-panel.show{ 
  transform: translateX(0); 
  opacity: 1; 
  pointer-events: auto;
}

.about-content{
  max-width: 600px; margin: 80px auto; padding: 40px;
  background: #fff; border: 1px solid #000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Lightbox */
.lightbox{
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.show{
  opacity: 1; pointer-events: auto;
}

.lightbox-backdrop{
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.9);
}

.lightbox-content{
  position: relative; z-index: 1;
  max-width: 90vw; max-height: 90vh;
  display: flex; align-items: center; justify-content: center;
}

.lightbox-image-container{
  position: relative;
  max-width: 100%; max-height: 100%;
}

.lightbox-image-container img{
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
  touch-action: pan-y; /* Allow vertical scrolling but handle horizontal swipes */
}

.lightbox-close{
  position: absolute; top: -50px; right: 0;
  background: none; border: none;
  color: #fff; font-size: 40px; font-weight: 300;
  cursor: pointer; padding: 10px;
  line-height: 1;
}

.lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1); border: none;
  color: #fff; font-size: 40px; font-weight: 300;
  cursor: pointer; padding: 20px 15px;
  line-height: 1;
  transition: background 0.2s ease;
}

.lightbox-nav:hover{
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev{ left: -80px; }
.lightbox-next{ right: -80px; }

.lightbox-counter{
  position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.about-content h1{
  font-size: 2.2rem; font-weight: 700; margin: 0 0 30px 0;
  line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em;
}

.about-content p{
  margin: 0 0 20px 0; line-height: 1.7; font-size: 0.95rem;
}

.about-content h3{
  font-size: 1.1rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; margin: 30px 0 15px 0;
}

.about-content ul{
  margin: 15px 0; padding-left: 0; list-style: none;
}

.about-content li{
  margin: 8px 0; padding-left: 20px; position: relative;
}

.about-content li:before{
  content: "–"; position: absolute; left: 0; color: #000;
}

.about-content hr{
  border: none; height: 1px; background: #e9e9e9; margin: 30px 0;
}

.about-content a{
  color: #000; text-decoration: underline;
}

.about-content a:hover{
  color: #666;
}

/* Project Detail View */
.project-detail{
  position: fixed; inset: 0; z-index: 5;
  background: #fff; display: none; overflow: auto;
  transform: translateX(100%); transition: transform 0.6s ease;
}
.project-detail.show{ display:block; transform:translateX(0); }

.project-detail-content{
  display:flex !important;
  height:100vh;
  width:100vw;
  max-width:none; margin:0;
}

/* Left side - Gallery */
.project-gallery{
  display:flex; flex-direction:column; padding:60px 40px 40px;
  background:#fff; flex:1 !important; width:50% !important;
}
.gallery-main{
  flex:1; display:flex; align-items:center; justify-content:center;
  margin-bottom:30px;
}
.gallery-main img{
  max-width:100%; max-height:100%; object-fit:contain;
  transition:transform 0.3s ease;
}
.gallery-thumbnails{
  display:flex; gap:15px; overflow-x:auto; padding:10px 0;
  justify-content:center;
}
.gallery-thumbnails img{
  width:100px; height:100px; object-fit:cover; cursor:pointer;
  border:2px solid transparent; transition:border-color 0.2s ease;
  border-radius:4px;
}
.gallery-thumbnails img.active{ border-color:#000; }

/* Right side - Project info */
.project-info{
  padding:60px 0 40px 40px; background:#fff; overflow-y:auto;
  border-left:1px solid #e9e9e9; flex:1 !important; width:50% !important;
}

.project-header{ margin-bottom:40px; }
.project-title{
  font-size:2.2rem; font-weight:700; margin:0 0 15px 0;
  line-height:1.1; text-transform:uppercase; letter-spacing:0.02em;
}
.project-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.9rem; color:#666; margin-bottom:20px;
}
.project-subtitle{ font-weight:400; font-size:0.85rem; color:#999; }
.project-year{ font-weight:400; }

.project-description{
  margin-bottom:50px; line-height:1.7; font-size:0.95rem;
}
.project-description h1{
  font-size:1.4rem; font-weight:700; margin:0 0 20px 0;
  text-transform:uppercase; letter-spacing:0.02em;
}
.project-description h3{
  font-size:0.9rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; margin:25px 0 15px 0;
}
.project-description p{ margin:0 0 15px 0; }
.project-description ul{ margin:15px 0; padding-left:0; list-style:none; }
.project-description li{
  margin:8px 0; padding-left:20px; position:relative;
}
.project-description li:before{
  content:"–"; position:absolute; left:0; color:#000;
}
.project-description hr{
  border:none; height:1px; background:#e9e9e9; margin:30px 0;
}

.project-sections{ border-top:1px solid #e9e9e9; padding-top:30px; }
.section{ margin-bottom:25px; }
.section h3{
  font-size:0.9rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; margin:0 0 15px 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  transition:color 0.2s ease;
}
.section h3:hover{ color:#666; }
.chevron{ transition:transform 0.2s ease; }
.section.expanded .chevron{ transform:rotate(90deg); }
.section-content{
  max-height:0; overflow:hidden; transition:max-height 0.3s ease;
  line-height:1.6;
}
.section.expanded .section-content{ max-height:1000px; }

.close-detail{
  position:fixed; top:30px; right:30px; z-index:6;
  width:50px; height:50px; border:none; background:#fff;
  border:2px solid #000; cursor:pointer; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s ease; font-weight:300;
}
.close-detail:hover{ background:#000; color:#fff; }

/* ===== MOBILE RESPONSIVE FIXES ===== */

/* Mobile Browser Fixes for Samsung Browser and others */
@media (max-width: 768px) {
  /* Fix text scaling and overflow */
  html, body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    height: 100vh;
    height: -webkit-fill-available;
  }
  
  /* Fix header on mobile */
  .site-header {
    padding: 12px 16px !important;
  }
  
  .brand a {
    font-size: 14px !important;
  }
  
  /* Fix footer on mobile */
  .site-footer {
    padding: 12px 16px !important;
    font-size: 12px !important;
  }
  
  /* Ensure toggle is always visible and properly positioned */
  .bottom-toggle {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 18px !important;
    z-index: 999 !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
    width: auto !important;
    max-width: calc(100vw - 36px) !important;
  }
  
  /* Fix toggle button sizing */
  .toggle-btn {
    padding: 8px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    min-width: 50px !important;
  }
  
  /* Fix canvas positioning */
  #bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    z-index: 0 !important;
  }
  
  /* Fix portfolio grid on mobile */
  .portfolio-grid {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    z-index: 1 !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }
  
  .portfolio-grid .cell {
    aspect-ratio: 1/1 !important;
    min-height: 200px !important;
  }
  
  .portfolio-grid .cell img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Fix about panel on mobile */
  .about-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    z-index: 4 !important;
  }
  
  .about-content {
    max-width: calc(100vw - 32px) !important;
    margin: 40px auto !important;
    padding: 20px !important;
    font-size: 14px !important;
  }
  
  .about-content h1 {
    font-size: 1.8rem !important;
    margin-bottom: 20px !important;
  }
  
  .about-content h3 {
    font-size: 1rem !important;
    margin: 20px 0 10px 0 !important;
  }
  
  .about-content p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }
  
  /* Fix project detail on mobile */
  .project-detail {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    z-index: 5 !important;
  }
  
  .project-detail-content {
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    max-width: none !important;
    flex-direction: column !important;
  }
  
  .project-gallery {
    padding: 20px !important;
    flex: none !important;
    width: 100% !important;
    height: 50vh !important;
    min-height: 300px !important;
  }
  
  .gallery-main {
    height: calc(100% - 120px) !important;
  }
  
  .gallery-thumbnails {
    height: 100px !important;
    padding: 10px 0 !important;
  }
  
  .gallery-thumbnails img {
    width: 80px !important;
    height: 80px !important;
  }
  
  .project-info {
    padding: 20px !important;
    border-left: none !important;
    border-top: 1px solid #e9e9e9 !important;
    flex: none !important;
    width: 100% !important;
    height: 50vh !important;
    overflow-y: auto !important;
  }
  
  .project-title {
    font-size: 1.8rem !important;
  }
  
  .project-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  
  .project-description h1 {
    font-size: 1.2rem !important;
  }
  
  .project-description h3 {
    font-size: 0.9rem !important;
  }
  
  /* Fix close button on mobile */
  .close-detail {
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }
  
  /* Fix project popup on mobile */
  .project-popup {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .toggle-btn {
    padding: 6px 8px !important;
    font-size: 10px !important;
    min-width: 45px !important;
  }
  
  .about-content {
    margin: 20px auto !important;
    padding: 16px !important;
  }
  
  .about-content h1 {
    font-size: 1.5rem !important;
  }
  
  .project-gallery {
    height: 40vh !important;
    min-height: 250px !important;
  }
  
  .project-info {
    height: 60vh !important;
  }
  
  .gallery-thumbnails img {
    width: 60px !important;
    height: 60px !important;
  }
  
  /* Lightbox mobile styles */
  .lightbox-close {
    top: 20px !important;
    right: 20px !important;
    font-size: 30px !important;
  }
  
  .lightbox-nav {
    font-size: 30px !important;
    padding: 15px 10px !important;
  }
  
  .lightbox-prev {
    left: 20px !important;
  }
  
  .lightbox-next {
    right: 20px !important;
  }
  
  .lightbox-counter {
    bottom: 20px !important;
    font-size: 12px !important;
  }
}

/* Add this to prevent mobile refresh on skills tab */
@media (max-width: 768px) {
  /* Only disable touch actions on the canvas area, not the entire body */
  #bg {
    touch-action: none; /* Prevent touch gestures on the 3D canvas */
  }
  
  /* Allow touch actions on interactive elements */
  .bottom-toggle,
  .toggle-btn,
  .portfolio-grid,
  .about-panel,
  .project-detail,
  .lightbox,
  .close-detail,
  .lightbox-close,
  .lightbox-nav {
    touch-action: auto;
  }
}