/* =========================
   FONTS
   ========================= */
   @font-face{
    font-family:"Geist";
    src:url("fonts/56font.woff2") format("woff2");
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:"Geist Mono";
    src:url("fonts/93font.woff2") format("woff2");
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
  }
  
  /* =========================
     THEME
     ========================= */
  :root{
    --radius:0.625rem;
  
    --background:oklch(14.5% 0 0);
    --foreground:oklch(98.5% 0 0);
    --card:oklch(20.5% 0 0);
    --card-foreground:oklch(98.5% 0 0);
  
    --primary:oklch(92.2% 0 0);
    --primary-foreground:oklch(20.5% 0 0);
  
    --secondary:oklch(26.9% 0 0);
    --secondary-foreground:oklch(98.5% 0 0);
  
    --muted:oklch(26.9% 0 0);
    --muted-foreground:oklch(70.8% 0 0);
  
    --accent:oklch(26.9% 0 0);
    --accent-foreground:oklch(98.5% 0 0);
  
    --border:oklch(100% 0 0 / 0.1);
    --input:oklch(100% 0 0 / 0.15);
    --ring:oklch(55.6% 0 0);
  
    --font-geist-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-geist-mono:"Geist Mono","Courier New",monospace;
  
    --nav-h:72px;
  
    /* modal media lock */
    --pm-media-h:360px;
    --pm-media-h-md:250px;
    --pm-media-h-sm:620px;
  
    /* projects grid sizing (fixes card ratio + featured span) */
    --proj-row-h:460px;        /* base card height */
    --proj-cover-h:337px;      /* cover height for normal cards */
    --proj-cover-h-large:820px;/* cover height for featured cards */
  }
  
  /* =========================
     RESET
     ========================= */
  *{margin:0;padding:0;box-sizing:border-box;}
  *,::before,::after{border:0 solid var(--border);}
  
  body{
    font-family:var(--font-geist-sans);
    background:var(--background);
    color:var(--foreground);
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  /* =========================
     NAV (DESKTOP + MOBILE)
     ========================= */
  nav{
    position:fixed;
    top:0;
    width:100%;
    min-height:var(--nav-h);
    z-index:1000;
  
    background:oklch(14.5% 0 0 / 0.85);
    backdrop-filter:blur(8px);
  
    padding:1.25rem 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  
  .logo{
    display:flex;
    align-items:center;
    gap:0.75rem;
    font-size:1.25rem;
    font-family:var(--font-geist-mono);
    font-weight:500;
    font-style:italic;
    min-width:0;
  }
  .logo span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:220px;
  }
  .logo-circle{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    flex:0 0 auto;
  }
  
  .nav-toggle{display:none !important;}
  
  .nav-menu{
    display:flex;
    align-items:center;
    gap:2.5rem;
    min-width:0;
  }
  .nav-links{
    display:flex;
    gap:2.5rem;
    list-style:none;
    min-width:0;
  }
  .nav-links a{
    color:var(--muted-foreground);
    text-decoration:none;
    transition:color .2s ease;
    font-size:.875rem;
    font-weight:500;
    white-space:nowrap;
  }
  .nav-links a:hover,
  .nav-links a.active{color:var(--foreground);}
  
  .social-icons{
    display:flex;
    gap:1.25rem;
    flex:0 0 auto;
  }
  .social-icons a{
    color:var(--muted-foreground);
    text-decoration:none;
    transition:color .2s ease;
    display:flex;
    align-items:center;
  }
  .social-icons a:hover{color:var(--foreground);}
  .social-icons img{width:24px;height:24px;}
  
  /* =========================
     SECTIONS
     ========================= */
  section{
    min-height:100vh;
    padding:calc(var(--nav-h) + 2.5rem) 5% 5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid var(--border);
  }
  section:last-of-type{border-bottom:none;}
  
  h1,h2,h3,h4,h5,h6{
    font-family:var(--font-geist-mono);
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--foreground);
  }
  
  /* =========================
     HERO
     ========================= */
  #home{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4rem;
  }
  .hero-content{flex:1;max-width:600px;}
  .hero-content h2{
    font-size:.75rem;
    letter-spacing:.25em;
    margin-bottom:1rem;
    color:var(--muted-foreground);
    font-weight:500;
    text-transform:uppercase;
    font-family:var(--font-geist-sans);
  }
  .hero-content h1{
    font-size:3rem;
    line-height:1;
    margin-bottom:2rem;
    font-weight:500;
  }
  .hero-content p{
    font-size:1rem;
    margin-bottom:2.5rem;
    color:var(--muted-foreground);
    line-height:1.75;
  }
  .hero-buttons{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
  }
  .btn{
    padding:.875rem 1.5rem;
    border:none;
    cursor:pointer;
    font-family:var(--font-geist-sans);
    font-size:.875rem;
    font-weight:500;
    transition:all .2s ease;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:calc(var(--radius) - 2px);
  }
  .btn-primary{
    background:var(--secondary);
    color:var(--secondary-foreground);
  }
  .btn-primary:hover{background:var(--accent);}
  .btn-secondary{
    background:transparent;
    color:var(--foreground);
    border:1px solid var(--border);
  }
  .btn-secondary:hover{background:var(--accent);}
  
  .hero-image{
    flex:1;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .hero-image img{
    width:100%;
    max-width:500px;
    height:auto;
    position:relative;
    z-index:1;
  }
  .grid-pattern{
    position:absolute;
    right:-50px;
    top:50%;
    transform:translateY(-50%);
    width:200px;
    height:200px;
    opacity:.15;
    background-image:
      repeating-linear-gradient(0deg,transparent,transparent 39px,var(--border) 39px,var(--border) 40px),
      repeating-linear-gradient(90deg,transparent,transparent 39px,var(--border) 39px,var(--border) 40px);
  }
  .grid-pattern::after{
    content:"";
    position:absolute;
    width:40px;
    height:40px;
    background:var(--muted);
    top:80px;
    left:80px;
  }
  .grid-pattern::before{
    content:"";
    position:absolute;
    width:40px;
    height:40px;
    background:var(--muted);
    top:120px;
    left:120px;
  }
  
  /* =========================
     ABOUT
     ========================= */
  #about{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4rem;
  }
  .about-image{
    flex:1;
    position:relative;
    display:flex;
    justify-content:center;
    padding-bottom:20px;
  }
  .about-image img{
    width:100%;
    max-width:450px;
    height:auto;
    position:relative;
    z-index:1;
  }
  .grid-pattern-about{
    position:absolute;
    right:-30px;
    top:45%;
    transform:translateY(-50%);
    width:150px;
    height:150px;
    opacity:.15;
    background-image:
      repeating-linear-gradient(0deg,transparent,transparent 29px,var(--border) 29px,var(--border) 30px),
      repeating-linear-gradient(90deg,transparent,transparent 29px,var(--border) 29px,var(--border) 30px);
  }
  .about-content{flex:1;max-width:600px;}
  .about-content h3{
    font-size:.75rem;
    letter-spacing:.25em;
    margin-bottom:1rem;
    color:var(--muted-foreground);
    font-weight:500;
    text-transform:uppercase;
    font-family:var(--font-geist-sans);
  }
  .about-content h2{
    font-size:2.25rem;
    line-height:1.111;
    margin-bottom:2rem;
    font-weight:500;
  }
  .about-content p{
    font-size:1rem;
    color:var(--muted-foreground);
    margin-bottom:1.25rem;
    line-height:1.75;
  }
  .about-buttons{
    display:flex;
    gap:1rem;
    margin-top:2.5rem;
    flex-wrap:wrap;
  }
  
  /* =========================
     PROJECTS (FIXED CARD SIZE + COVER RATIO)
     ========================= */
  #projects{flex-direction:column;}
  
  .projects-header{text-align:center;margin-bottom:4rem;}
  .projects-header h3{
    font-size:.75rem;
    letter-spacing:.25em;
    margin-bottom:1rem;
    color:var(--muted-foreground);
    font-weight:500;
    text-transform:uppercase;
    font-family:var(--font-geist-sans);
  }
  .projects-header h2{
    font-size:2.25rem;
    line-height:1.111;
    margin-bottom:1rem;
    font-weight:500;
  }
  .projects-header p{
    font-size:1rem;
    color:var(--muted-foreground);
    max-width:700px;
    margin:0 auto;
    line-height:1.75;
  }
  
  .projects-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
    width:100%;
    max-width:1400px;
  
    /* key fix: stable row height => stable card + stable span2 */
    grid-auto-rows:var(--proj-row-h);
  }
  
  /* card */
  .project-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:calc(var(--radius) + 4px);
    overflow:hidden;
    cursor:pointer;
  
    display:flex;
    flex-direction:column;
    height:100%;
  
    transition:transform .3s ease,border-color .3s ease;
  }
  .project-card:hover{
    transform:translateY(-5px);
    border-color:oklch(100% 0 0 / 0.25);
  }
  
  /* cover image on card */
  .project-cover{
    width:100%;
    height:var(--proj-cover-h);
    object-fit:cover;
    display:block;
    flex:0 0 auto;
  
    /* avoids tiny gaps due to baseline images in some browsers */
    line-height:0;
  }
  
  /* featured card spans 2 rows cleanly */
  .project-card-large{
    grid-row:span 2;
  }
  .project-card-large .project-cover{
    height:var(--proj-cover-h-large);
  }
  
  .project-info{
    padding:2rem;
    flex:1 1 auto;
    min-height:0;
  }
  .project-info h3{
    font-size:1.5rem;
    margin-bottom:.5rem;
    font-weight:500;
    line-height:1.333;
  }
  .project-info p{
    color:var(--muted-foreground);
    line-height:1.75;
  }
  
  /* view all */
  .view-all-projects{margin-top:3rem;}
  .view-all-projects a{
    padding:.875rem 1.5rem;
    border-radius:calc(var(--radius) - 2px);
    border:1px solid var(--border);
    color:var(--foreground);
    text-decoration:none;
    font-family:var(--font-geist-sans);
    font-size:.875rem;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background-color .2s ease,transform .2s ease;
  }
  .view-all-projects a:hover{
    background:var(--accent);
    transform:translateY(-2px);
  }
  
  /* =========================
     MODAL
     ========================= */
  .project-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    padding:1.5rem;
  
    background:oklch(14.5% 0 0 / 0.75);
    backdrop-filter:blur(8px);
  
    display:none;
    align-items:center;
    justify-content:center;
  }
  .project-modal.open{display:flex;}
  
  .project-modal-card{
    width:100%;
    max-width:760px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:calc(var(--radius) + 6px);
    overflow:hidden;
    position:relative;
  
    transform:translateY(8px);
    opacity:0;
    transition:transform .2s ease,opacity .2s ease;
  }
  .project-modal.open .project-modal-card{
    transform:translateY(0);
    opacity:1;
  }
  
  .project-modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:40px;
    height:40px;
    border-radius:calc(var(--radius) + 2px);
    background:oklch(20.5% 0 0 / 0.65);
    border:1px solid var(--border);
    color:var(--foreground);
    font-size:22px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background-color .2s ease;
    z-index:10;
  }
  .project-modal-close:hover{background:var(--accent);}
  
  /* locked media host */
  #pmMediaHost{
    position:relative;
    width:100%;
    height:var(--pm-media-h);
    overflow:hidden;
    border-bottom:1px solid var(--border);
    background:oklch(14.5% 0 0);
  }
  #pmMediaHost img,
  #pmMediaHost video{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
  }
  


  
  /* modal nav arrows */
  #pmPrev,
  #pmNext{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:calc(var(--radius) + 2px);
    border:1px solid var(--border);
    background:oklch(14.5% 0 0 / 0.55);
    color:var(--foreground);
    font-size:28px;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    z-index:6;
    backdrop-filter:blur(8px);
    transition:transform .15s ease,background-color .2s ease;
  }
  #pmPrev{left:12px;}
  #pmNext{right:12px;}
  #pmPrev:hover,
  #pmNext:hover{
    background:oklch(26.9% 0 0 / 0.75);
    transform:translateY(-50%) scale(1.04);
  }
  
  /* remove counter */

  
  .project-modal-body{padding:1.75rem;}
  .project-modal-body h2{
    font-size:1.5rem;
    margin-bottom:.75rem;
    line-height:1.2;
  }
  .project-modal-body p{
    color:var(--muted-foreground);
    line-height:1.75;
    margin-bottom:1.25rem;
  }
  .project-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:.75rem;
  }
  
  /* =========================
     CONTACT
     ========================= */
  #contact{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6rem;
  }
  .contact-content{flex:1;max-width:500px;}
  .contact-content h3{
    font-size:.75rem;
    letter-spacing:.25em;
    margin-bottom:1rem;
    color:var(--muted-foreground);
    font-weight:500;
    text-transform:uppercase;
    font-family:var(--font-geist-sans);
  }
  .contact-content h2{
    font-size:2.25rem;
    line-height:1.111;
    margin-bottom:2rem;
    font-weight:500;
  }
  .contact-content p{
    font-size:1rem;
    color:var(--muted-foreground);
    line-height:1.75;
  }
  .contact-info{
    flex:1;
    background:var(--card);
    border-radius:calc(var(--radius) + 4px);
    padding:3rem;
    border:1px solid var(--border);
  }
  .contact-item{margin-bottom:3rem;}
  .contact-item:last-child{margin-bottom:0;}
  .contact-item h4{
    font-size:1rem;
    margin-bottom:.75rem;
    display:flex;
    align-items:center;
    gap:.75rem;
    font-weight:500;
    color:var(--foreground);
    font-family:var(--font-geist-sans);
  }
  .contact-item img{width:20px;height:20px;}
  .contact-item a{
    color:var(--muted-foreground);
    text-decoration:none;
    border-bottom:1px solid var(--border);
    transition:color .2s ease;
    display:inline-block;
    padding-bottom:2px;
  }
  .contact-item a:hover{color:var(--foreground);}
  
  /* =========================
     FOOTER
     ========================= */
  footer{
    background:var(--background);
    padding:2rem 5%;
    border-top:1px solid var(--border);
  }
  .footer-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
  }
  .footer-content p{color:var(--muted-foreground);font-size:.875rem;}
  .footer-links{display:flex;gap:2rem;}
  .footer-links a{
    color:var(--muted-foreground);
    text-decoration:none;
    transition:color .2s ease;
    font-size:.875rem;
  }
  .footer-links a:hover{color:var(--foreground);}
  
  /* =========================
     RESPONSIVE (PHONE LOOKS LIKE DESKTOP)
     ========================= */
  @media (max-width:1024px){
    .hero-content h1,
    .about-content h2,
    .contact-content h2,
    .projects-header h2{
      font-size:1.875rem;
      line-height:1.2;
    }
    .projects-grid{max-width:1100px;}
    .project-modal-card{max-width:720px;}
  }
  
  @media (max-width:900px){
    .nav-toggle{display:none !important;}
  
    .nav-menu{
      position:static !important;
      display:flex !important;
      opacity:1 !important;
      pointer-events:auto !important;
      transform:none !important;
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
      padding:0 !important;
      gap:1.5rem !important;
      min-width:0;
    }
  
    .nav-links{
      flex-direction:row !important;
      gap:1.25rem !important;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding:0 !important;
    }
    .nav-links::-webkit-scrollbar{display:none;}
  
    .nav-links a{
      padding:0 !important;
      background:transparent !important;
      border:0 !important;
    }
  
    .social-icons{gap:.9rem !important;}
    .social-icons img{width:20px;height:20px;}
  
    .logo span{max-width:160px;}
  }
  
  @media (max-width:768px){
    section{padding:calc(var(--nav-h) + 2rem) 4% 4rem;}
  
    #home,
    #about,
    #contact{
      flex-direction:row !important;
      text-align:left !important;
      gap:2rem !important;
    }
  
    .grid-pattern,
    .grid-pattern-about{display:block !important;}
  
    .hero-image img{max-width:360px;}
    .about-image img{max-width:340px;}
  
    .projects-grid{
      grid-template-columns:repeat(2,1fr) !important;
      gap:1.25rem !important;
    }
  
    #pmMediaHost{height:var(--pm-media-h-md) !important;}
    #projectModal.pm-wide #pmMediaHost,
    #projectModal.pm-tall #pmMediaHost{height:var(--pm-media-h-md) !important;}
  }
  
  @media (max-width:480px){
    :root{--nav-h:68px;}
  
    nav{padding:.9rem 4%;}
  
    .logo-circle{width:36px;height:36px;}
    .logo{font-size:1.05rem;}
    .logo span{max-width:120px;}
  
    .hero-content h1{
      font-size:1.9rem;
      line-height:1.15;
      margin-bottom:1.25rem;
    }
  
    .about-content h2,
    .contact-content h2,
    .projects-header h2{
      font-size:1.55rem;
      line-height:1.25;
    }
  
    .hero-content p,
    .about-content p,
    .contact-content p,
    .projects-header p{font-size:.92rem;}
  
    .hero-image img{max-width:320px;}
    .about-image img{max-width:300px;}
  
    .btn{padding:.75rem 1.15rem;font-size:.875rem;}
  
    .contact-info{padding:1.6rem 1.25rem;}
    .project-info{padding:1.35rem;}
  
    .projects-grid{
      grid-template-columns:repeat(2,1fr) !important;
      gap:1rem !important;
    }
  
    .project-modal-body{padding:1.25rem;}
  
    #pmPrev,
    #pmNext{
      width:40px;
      height:40px;
      font-size:26px;
    }
  }