@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Roboto+Slab:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Roboto+Slab:wght@400;700&display=swap');

:root{
  --dark-900: #1f1f1f;
  --dark-800: #2e2e2e;
  --dark-700: #343434;
  --muted-gray: #bdbdbd;
  --accent: #dedede;
  --link: #e8e8e8;
  --visited: #c6a8ff;
  --white: #ffffff;
  --gap: 1.25rem;
}

*{box-sizing:border-box}
html{font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size:16px}
body{margin:0; background:var(--dark-800,#2e2e2e); color:var(--white,#fff); line-height:1.45; display:flex; flex-direction:column; min-height:100dvh}
main{flex:1; width: min(95vw, 1600px); margin:1.25rem auto; padding:0 1.25rem; max-width:none}

.site-header{background:var(--dark-900,#1f1f1f); display:flex; align-items:center; justify-content:space-between; padding:0.8rem 1rem; border-bottom:4px solid rgba(0,0,0,0.25)}
.brand{color:var(--link,#e8e8e8); font-weight:800; text-decoration:none; font-size:0.95rem}
.brand:focus,.brand:hover{color:var(--white,#fff)}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem}
.site-nav a{color:var(--link,#e8e8e8); text-decoration:none; font-size:0.95rem; transition:color 180ms cubic-bezier(.2,.8,.2,1)}
.site-nav a:focus,.site-nav a:hover{color:var(--white,#fff)}
.site-nav a[aria-current="page"]{font-weight:700}
.site-header .hamburger, .site-header summary.hamburger{display:none}

footer{background:var(--dark-900,#1f1f1f); padding:0.8rem 1rem; text-align:center; color:var(--muted-gray,#bdbdbd); border-top:4px solid rgba(0,0,0,0.18); flex-shrink:0}

.hero{padding:3dvh 0; display:block}
.hero h1{margin:0 0 0.6rem 0; font-size:clamp(1.1rem, 3.2dvw, 2rem); font-family: 'Roboto Slab', 'Times New Roman', serif}
.hero .lead{color:var(--muted-gray,#bdbdbd); max-width:90ch; font-size:clamp(0.95rem, 1rem + 0.4dvw, 1.125rem)}
.cta{margin-top:0.6rem}
.cta a{color:color-mix(in srgb, var(--link,#e8e8e8) 85%, transparent); text-decoration:underline}

/* Work Experience  */

.work-list{container: work-list / inline-size; margin-top:1.5rem}
.work-list h3{font-size:1.125rem; margin:0 0 0.8rem 0; color:var(--accent,#dedede)}

.work-list work-experience,
.work-list .work-experience{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  align-items:start;
  padding:1rem 0;
  border-top:1px solid rgba(255,255,255,0.03);
  background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  transition:transform .28s ease, box-shadow .28s ease;
  animation: fadeIn .6s ease both;
}

.work-list work-experience:hover,
.work-list .work-experience:hover,
.work-list work-experience:focus-within,
.work-list .work-experience:focus-within{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

.work-list work-experience figure,
.work-list .work-experience figure,
.work-list work-experience .thumb,
.work-list .work-experience .thumb{
  margin:0;
  width:160px;
  height:160px;
  min-width:160px;
  min-height:160px;
  border-radius:6px;
  background:var(--accent,#dedede);
  overflow:hidden;
  display:block;
  flex-shrink:0;
}

.work-list work-experience .we-body,
.work-list .work-experience .we-body{min-width:0; width:100%; max-width:none}
.work-list work-experience .we-body *,
.work-list .work-experience .we-body *{max-width:none}
.work-list work-experience .we-body p,
.work-list .work-experience .we-body p,
.work-list work-experience .we-body ul,
.work-list .work-experience .we-body ul{width:100%; max-width:none; overflow-wrap:break-word}
.work-list work-experience .we-body h4,
.work-list .work-experience .we-body h4{margin:0 0 0.25rem 0; color:var(--white,#fff); font-size:1.05rem}
.work-list work-experience .we-body .meta,
.work-list .work-experience .we-body .meta{color:var(--muted-gray,#bdbdbd); font-size:0.9rem; margin-bottom:0.5rem}
.work-list work-experience .we-body ul,
.work-list .work-experience .we-body ul{margin:0; padding-left:1.05rem; color:var(--muted-gray,#bdbdbd)}

.work-list work-experience:nth-of-type(1), .work-list .work-experience:nth-of-type(1){animation-delay:0s}
.work-list work-experience:nth-of-type(2), .work-list .work-experience:nth-of-type(2){animation-delay:0.06s}
.work-list work-experience:nth-of-type(3), .work-list .work-experience:nth-of-type(3){animation-delay:0.12s}

@media (min-width:50rem){
  .work-list work-experience,
  .work-list .work-experience{grid-template-columns:160px 1fr}
  .work-list work-experience figure,
  .work-list .work-experience figure,
  .work-list work-experience .thumb,
  .work-list .work-experience .thumb{min-height:160px; min-width:160px; height:160px}
  .work-list work-experience > figure, .work-list .work-experience > figure{grid-column:1; grid-row:1; z-index:0; min-width:160px}
  .work-list work-experience > *:not(figure), .work-list .work-experience > *:not(figure){grid-column:2; min-width:0; z-index:1}
}
.work-experience:focus-within{outline:2px solid rgba(200,200,255,0.06); outline-offset:3px}

@media (max-width:799px){
  .work-list {grid-template-columns:1fr; align-items:stretch}
  .site-nav ul{gap:0.6rem}
}

@keyframes fadeIn{
  from{opacity:0; transform: translateY(6px)}
  to{opacity:1; transform: translateY(0)}
}

a{color:var(--link,#e8e8e8)}
a:visited{color:var(--visited,#c6a8ff)}
a:hover,a:focus{color:var(--white,#fff)}

.site-nav a:focus-visible{outline:2px solid color-mix(in srgb, var(--link,#e8e8e8) 50%, transparent); outline-offset:3px}

profile-card, .profile-card{display:block; background:var(--dark-700,#343434); padding:1rem; border-radius:8px; color:var(--muted-gray,#bdbdbd)}
profile-card .pc-inner, .profile-card .pc-inner{display:flex; gap:1rem; align-items:center}
profile-card .avatar, .profile-card .avatar{width:64px; height:64px; border-radius:999px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--link,#e8e8e8); overflow:hidden}
profile-card .avatar img, .profile-card .avatar img{width:64px; height:64px; display:block; object-fit:cover; object-position:center center; border-radius:999px}

ul{padding-left:0}
.tag-list{display:flex; gap:0.5rem; margin-top:0.5rem}
.tag-list button{background:transparent; color:var(--muted-gray,#bdbdbd); border:1px solid rgba(255,255,255,0.08); padding:0.35rem 0.6rem; border-radius:999px; font-size:0.85rem}

.sidebar-placeholder{background:var(--accent,#dedede); width:240px; height:240px; border-radius:4px}
.contact-side .sidebar-image{display:block; width:100%; height:100%; overflow:hidden; border-radius:4px}
.contact-side .sidebar-image img{width:100%; height:100%; display:block; object-fit:cover; object-position:center center; border-radius:4px}

.contact-grid{display:grid; grid-template-columns:1fr 240px; gap:2rem; align-items:center; justify-content: center; max-width:1100px; margin:0.5rem auto; padding:0 1rem}
.contact-left{min-width:0}

#contactForm{margin:0.75rem 0}
#contactForm fieldset{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border:1px solid rgba(255,255,255,0.04); padding:1rem; border-radius:8px}
#contactForm legend{color:var(--white,#fff); font-weight:700; padding:0 0.25rem}
#contactForm label{display:block; margin-top:0.75rem; font-size:0.9rem; color:var(--muted-gray,#bdbdbd)}
#contactForm input,#contactForm textarea{display:block; width:100%; margin-top:0.35rem; padding:0.6rem 0.75rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); color:var(--white,#fff); border-radius:6px}
#contactForm textarea{resize:vertical}
#contactForm button{margin-top:1rem; background:var(--link,#e8e8e8); color:var(--dark-900,#1f1f1f); border:0; padding:0.6rem 0.9rem; border-radius:6px; font-weight:600; cursor:pointer}
#contactForm button:hover{filter:brightness(0.95)}

.contact-side .sidebar-placeholder{width:100%; height:100%; min-height:220px}

@media (max-width:799px){
  .contact-grid{grid-template-columns:1fr; gap:1rem}
  .contact-side{order:2}
}

.muted{color:var(--muted-gray,#bdbdbd)}
.hero h1{color:var(--accent,#dedede)}


.projects-list > li:has(.tag-list){
  padding: 1em;
  margin-bottom: 0.75em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent,#dedede) 6%, transparent);
  transition: transform 180ms ease, background-color 180ms ease;
}
.projects-list > li:has(.tag-list):hover,
.projects-list > li:has(.tag-list):focus-within{
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--accent,#dedede) 10%, transparent);
}

.responsive-img{display:block; width:100%; height:auto; max-width:100%; border-radius:8px; object-fit:cover; object-position:center center}
.hero-figure{margin:0 0 1rem 0; overflow:hidden; border-radius:10px}
.project-figure{
  aspect-ratio: 1 / 1;
  width:100%;
  height:auto;
  overflow:hidden;
  border-radius:6px;
  display:block;
  min-width:0;
}
.project-figure img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}

.projects-list li{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:stretch;
  min-height:0;
}
.projects-list li > .project-figure,
.projects-list li > figure.project-figure{
  width:160px;
  aspect-ratio:1 / 1;
  height:auto;
  overflow:hidden;
  flex:0 0 160px;
  min-width:160px;
}

@media (min-width:50rem){
  .projects-list li{flex-direction:row; align-items:flex-start; gap:1rem}
  .projects-list li > .project-figure,
  .projects-list li > figure.project-figure{width:160px; flex:0 0 160px; aspect-ratio:1 / 1}
  .projects-list li > *:not(.project-figure){flex:1 1 0; min-width:0}
}

@media (max-width:799px){
  .projects-list li{flex-direction:column}
}

.visually-hidden{border:0; clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; white-space:nowrap; width:1px}

.thumb img{width:100%; height:100%; display:block; object-fit:cover; object-position:center center; border-radius:6px}

@media (max-width:799px){
  html{font-size:15px}
  main{width:96vw; margin:0.75rem auto; padding:0 0.75rem}
  .site-header{position:relative}
  .site-nav.desktop{display:none}
  details.site-menu .site-nav.mobile{display:none}
  details.site-menu summary.hamburger{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:6px; background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--link); cursor:pointer; list-style:none; user-select:none}
  details.site-menu summary.hamburger::-webkit-details-marker{display:none}
  details.site-menu summary.hamburger:active{transform:scale(0.98)}
  details.site-menu[open] .site-nav.mobile{display:block; position:absolute; left:0; right:0; top:100%; background:var(--dark-900); padding:0.5rem 1rem; box-shadow:0 12px 30px rgba(0,0,0,0.5); z-index:40}
  details.site-menu[open] .site-nav.mobile ul{flex-direction:column; gap:0.25rem}
  details.site-menu[open] .site-nav.mobile a{display:block; padding:0.65rem 0.5rem; border-radius:6px}
  .hero{padding:3dvh 0}
  .hero .lead{font-size:0.98rem}
  .work-list work-experience, .work-list .work-experience{grid-template-columns:1fr; gap:0.85rem}
  .projects-list li{flex-direction:column}
  .projects-list a, .projects-list button, .site-nav a{padding:0.7rem 0.6rem}
  .contact-grid{grid-template-columns:1fr; padding:0 0.75rem}
  .contact-side{order:2}
  profile-card .avatar, .profile-card .avatar{width:72px; height:72px}
  profile-card .avatar img, .profile-card .avatar img{width:72px; height:72px}
  img, .responsive-img, .thumb img, .project-figure img{max-width:100%; height:auto}
}

@media (min-width:601px) and (max-width:992px){
  html{font-size:15.5px}
  main{width:min(92vw,1100px)}
  .site-nav{display:block}
  .site-nav ul{gap:0.65rem}
  .work-list work-experience, .work-list .work-experience{grid-template-columns:160px 1fr}
  .projects-list li{flex-direction:row}
  .contact-grid{grid-template-columns:1fr 200px}
  img, .responsive-img, .thumb img, .project-figure img{max-width:100%; height:auto}
}

@media (min-width:993px){
  html{font-size:16px}
  main{width:min(95vw,1400px)}
  .site-nav{display:block}
  .site-nav ul{gap:1rem}
  .work-list work-experience, .work-list .work-experience{grid-template-columns:160px 1fr}
  .projects-list li > .project-figure{width:160px; flex:0 0 160px}
  .contact-grid{grid-template-columns:1fr 240px}
}

@media (min-width:800px){
  details.site-menu{display:flex; align-items:center}
  .site-nav.desktop{display:block}
  details.site-menu .site-nav.mobile{display:none}
  details.site-menu .site-nav.mobile ul{display:flex; gap:1rem}
  details.site-menu summary.hamburger{display:none}
}


.thumb img{width:100%; height:100%; display:block; object-fit:cover; object-position:center center; border-radius:6px}

#resumeFrame{
  width:100%;
  height:60vh; /* default for small screens */
  min-height:320px;
  border:0;
  display:block;
}

@media (min-width:600px){
  #resumeFrame{ height:68vh; }
}

@media (min-width:993px){
  #resumeFrame{ height:75vh; }
}

@media (min-width:1200px){
  #resumeFrame{ height:82vh; }
}