:root{
  --navy:#0a192f;
  --light-navy:#112240;
  --lightest-navy:#233554;

  --slate:#8892b0;
  --light-slate:#a8b2d1;
  --lightest-slate:#ccd6f6;
  --white:#e6f1ff;

  --accent:#64ffda;

  --chip-bg:#173441;
  --card-hover:rgba(255,255,255,0.04);
  --card-border:rgba(100,255,218,0.14);
}

html,body{height:100%;}
body{
  margin:0;
  background: radial-gradient(800px 400px at 20% 10%, rgba(100,255,218,0.06), transparent 60%),
              linear-gradient(180deg, #0b1224 0%, var(--navy) 35%, #081226 100%);
  color:var(--slate);
}

.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  background:var(--lightest-navy);
  color:var(--white);
  padding:8px 12px;
  border-radius:8px;
  text-decoration:none;
}
.skip-link:focus{left:12px;}

.page{
  max-width: 100vw;
  margin: 0;
  padding: 90px 84px;
  display:flex;
  gap: 2%;
  height: 100vh;
}

.left{width:40%;}
.left-inner{
  position: sticky;
  top: 90px;
  display:flex;
  flex-direction:column;
  min-height: calc(100vh - 180px);
}

.right{
  flex:1;
  height: calc(100vh - 180px);
  overflow-y:auto;
  scroll-behavior:smooth;
  padding-right: 10px;
}

.name{color:var(--white); font-size:56px; font-weight:800; margin:0;}
.role{color:var(--lightest-slate); font-size:18px; font-weight:600; margin:14px 0 0;}
.tagline{margin:18px 0 0; font-size:16px; line-height:1.75; max-width:34ch;}

.section-nav{margin-top:48px; display:flex; flex-direction:column; gap:14px;}
.nav-item{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--slate);
  letter-spacing:0.12em;
  font-size:12px;
  font-weight:600;
  transition: all 180ms ease;
}
.nav-line{
  height:1px;
  width:26px;
  background:rgba(204,214,246,0.35);
  transition: all 180ms ease;
}
.nav-item:hover{color:var(--lightest-slate);}
.nav-item:hover .nav-line{width:34px; background:rgba(204,214,246,0.55);}

/* ACTIVE: label a bit bigger + line longer */
.nav-item.is-active{
  color: var(--white);
  font-size:14px;
}
.nav-item.is-active .nav-line{
  width:56px;
  background: rgba(230,241,255,0.8);
}

.social{margin-top:auto; display:flex; gap:14px;}
.social-link{
  color:rgba(204,214,246,0.65);
  text-decoration:none;
  transition: all 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
}
.social-link:hover{
  color:var(--white);
  background:rgba(255,255,255,0.05);
}
.social-link svg{
  width: 20px;
  height: 20px;
  transition: all 180ms ease;
}
.social-link:hover svg{
  transform: translateY(-1px);
}

.section{padding: 8px 0 78px;}
.section-title{
  color:var(--lightest-slate);
  font-size:16px;
  font-weight:700;
  margin: 0 0 18px;
}
.p{margin:0 0 14px; line-height:1.8;}
.a{color:var(--accent); text-decoration:none;}
.a:hover{text-decoration:underline;}

.card-row{
  display:flex;
  gap:22px;
  padding:18px 18px;
  border-radius:14px;
  transition: all 180ms ease;
}
.card-row:hover{
  background:var(--card-hover);
  outline: 1px solid var(--card-border);
}
.card-left{
  width:160px;
  font-size:12px;
  letter-spacing:0.08em;
  color:rgba(168,178,209,0.75);
}
.thumb{width:180px; flex:0 0 180px;}
.thumb img{
  width:180px; height:96px; border-radius:12px; object-fit:cover;
}
.card-right{flex:1;}
.card-title{
  color:var(--white);
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  margin-bottom:10px;
}
.card-title:hover{color:var(--accent);}
.ext{font-size:0.95em; opacity:0.9;}

.tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.tag{
  background:var(--chip-bg);
  color:var(--accent);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

.section-cta{padding:22px 0 0; text-align:center;}
.cta-link{
  color:var(--lightest-slate);
  text-decoration:none;
  font-weight:600;
}
.cta-link:hover{color:var(--accent);}

.writing-row{
  display:flex;
  gap:18px;
  align-items:center;
  padding:14px 0;
}
.writing-thumb{
  width:144px;
  height:81px;
  border-radius:12px;
  object-fit:cover;
}
.writing-year{
  font-size:12px;
  letter-spacing:0.08em;
  color:rgba(168,178,209,0.75);
  margin-bottom:6px;
}
.footer-note{
  margin-top:40px;
  font-size:13px;
  color:rgba(168,178,209,0.75);
}

/* ===== Archive page ===== */
.archive-page{
  min-height:100vh;
  padding: 90px 84px;
  max-width: 100vw;
  margin: 0;
}
.archive-wrap{
  max-width: none;
  margin: 0;
}

.archive-back{
  display:inline-block;
  color: var(--accent);
  text-decoration:none;
  font-weight:600;
  margin-bottom: 18px;
}
.archive-back:hover{text-decoration:underline;}

.archive-title{
  color: var(--white);
  font-size: 52px;
  font-weight: 800;
  margin: 0 0 28px;
}

.archive-table{
  margin-top: 30px;
}

.archive-head{
  display:grid;
  grid-template-columns: 80px 2.2fr 1.2fr 2.2fr 1.2fr;
  gap: 18px;
  padding: 12px 0;
  color: rgba(168,178,209,0.75);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.archive-row{
  display:grid;
  grid-template-columns: 80px 2.2fr 1.2fr 2.2fr 1.2fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  align-items:start;
}

.archive-year{
  color: rgba(168,178,209,0.75);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding-top: 2px;
}

.archive-project-name{
  color: var(--white);
  font-weight: 700;
}

.archive-madeat{
  color: var(--slate);
}

.archive-builtwith{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.archive-link{
  text-align:left;
}

.archive-a{
  color: var(--accent);
  text-decoration:none;
  font-weight:600;
}
.archive-a:hover{text-decoration:underline;}

/* ===== Enhanced card hover effects ===== */
.card-link{
  cursor: pointer;
}

/* Make hover feel like a clean glass box */
.card-row:hover{
  background: rgba(17, 34, 64, 0.55);
  outline: 1px solid rgba(100, 255, 218, 0.10);
}

/* Title shifts slightly on hover */
.card-row:hover .card-title{
  color: var(--accent);
}

/* Focus ring on card (keyboard) */
.card-row:focus{
  outline: 1px solid rgba(100, 255, 218, 0.22);
  background: rgba(17, 34, 64, 0.55);
}

/* Remove ugly default outline on inner links; keep clean look */
.card-row a:focus{
  outline: none;
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .page{
    padding: 70px 44px;
    gap: 2%;
  }
  .left{width: 40%;}
  .name{font-size: 48px;}
}

@media (max-width: 900px){
  /* Switch to single-column, normal page scroll */
  .page{
    display:block;
    padding: 48px 24px;
    max-width: none;     /* important */
    margin: 0;           /* important */
  }

  .left{
    width:auto;
  }

  /* Remove sticky on small screens */
  .left-inner{
    position: static;
    min-height: auto;
  }

  /* Right becomes normal flow (no internal scroll) */
  .right{
    height: auto;
    overflow: visible;
    padding-right: 0;
  }

  /* Nav stays vertical but compact */
  .section-nav{
    margin-top: 28px;
    display:flex;
    flex-direction: column;   /* keep vertical */
    gap: 14px;
  }

  /* make nav fit small screens */
  .nav-item{ font-size:12px; }
  .nav-line{ width:22px; }
  .nav-item.is-active{ font-size:13px; }
  .nav-item.is-active .nav-line{ width:44px; }

  /* Cards stack tighter */
  .card-row{
    padding: 14px 12px;
    gap: 16px;
  }
  .card-left{
    width: 130px;
  }
  .thumb{
    width: 150px;
    flex: 0 0 150px;
  }
  .thumb img{
    width: 150px;
    height: 80px;
  }
  .writing-thumb{
    width: 132px;
    height: 74px;
  }
}

@media (max-width: 600px){
  .name{font-size: 40px;}
  .role{font-size: 16px;}
  .tagline{font-size: 15px;}

  /* Cards become vertical for very small screens */
  .card-row{
    flex-direction: column;
    gap: 12px;
  }
  .card-left{
    width:auto;
  }
  .thumb{
    width:auto;
    flex: 0 0 auto;
  }
  .thumb img{
    width: 100%;
    height: auto;
    aspect-ratio: 15 / 8; /* close to 180x96 */
  }

  .writing-row{
    flex-direction: column;
    align-items: flex-start;
  }
  .writing-thumb{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ===== Better spacing for nav + social on small screens ===== */

/* Tablet and below */
@media (max-width: 1023px){
  .section-nav{
    margin-top: 32px;     /* more breathing room under tagline */
    gap: 18px;            /* space between About/Experience/Projects */
  }

  .nav-item{
    gap: 16px;            /* space between line and text */
  }

  .social{
    margin-top: 28px;     /* space between nav and icons */
    gap: 18px;            /* space between icons */
  }
}

/* Mobile tighter but still clean */
@media (max-width: 600px){
  .section-nav{
    margin-top: 26px;
    gap: 16px;
  }

  .social{
    margin-top: 22px;
    gap: 16px;
  }

  /* Enhanced touch targets for mobile SVG icons */
  .social-link{
    padding: 10px;
    border-radius: 10px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ===== Desktop-only: prevent page scroll, only .right should scroll ===== */
@media (min-width: 901px){
  html, body{
    height: 100%;
    overflow: hidden;
  }
  
  .right{
    height: calc(100vh - 180px);
    overflow-y: auto;
  }
}

/* ===== Archive page responsive ===== */
@media (max-width: 1100px){
  .archive-page{
    padding: 70px 44px;
  }
}

@media (max-width: 900px){
  .archive-page{
    padding: 48px 24px;
  }
}