:root{
  --bg:#0b0d10;
  --text:#e8eef2;
  --brand:#6ccff6;
  --accent:#b794f6;
  --gap:1rem;
  --radius:.75rem;
  --maxw:70rem;
  --fs-lg:clamp(1.25rem,2.5vw,2rem);
  --header-h:4rem; 
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.container{
  min-height:100dvh;           
  display:flex;             
  flex-direction:column;
  background:var(--bg,#0b0d10); 
  color:var(--text,#e8eef2);   
  font-family:system-ui,Inter,Arial;
  line-height:1.5;
}

/* Header */
.site-header{
  position:sticky; top:0;
  z-index:1000;                       
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(108,207,246,.25);
}
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap,1rem);
  padding:.75rem 1rem;
}
.site-nav .nav-list{
  list-style:none; display:flex; gap:.75rem; margin:0; padding:0;
}
.site-nav a{
  text-decoration:none; color:var(--text,#e8eef2);
  padding:.45em .7em; border-radius:var(--radius,.75rem);
  transition:transform 150ms ease, background-color 150ms ease;
}
.site-nav a:hover,.site-nav a:focus-visible{
  background:rgba(108,207,246,.15);
  transform:translateY(-.1em) scale(1.02);  
}

/* Scoped header */
@scope (.site-header){
  .header-inner{padding:0 1rem .75rem}
  h1{margin:0; font-size:var(--fs-lg,1.5rem)}
  p{margin:.25rem 0 0; opacity:.8}
}

/* Main */
#main-content{
  width:min(100dvw,var(--maxw,70rem));
  margin-inline:auto; padding:1rem;
  display:flex; flex-direction:column; gap:var(--gap,1rem);
  flex:1;
}
.section{padding-block:1rem; display:flex; flex-direction:column; gap:.75rem}
.section>h2{margin:0; color:var(--brand,#6ccff6)}

/* Projects */
.projects-section ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:1rem;
}
.projects-section li{flex:1 1 calc(50% - .5rem); min-width:16rem}

.card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(108,207,246,.25);
  border-radius:var(--radius,.75rem);
  padding:1rem;
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  
  &:hover{
    transform:translateY(-.15em);
    box-shadow:0 .75rem 1.25rem rgba(0,0,0,.25);
    border-color:rgba(183,148,246,.5);
  }
  strong{font-size:1.125rem}
  span{
    display:inline-block; margin-top:.5em; margin-right:.5em;
    padding:.2em .6em; border-radius:9999px; font-size:.875rem;
    background:rgba(183,148,246,.15);
  }
}

.projects-section picture,.projects-section img{
  width:100%; display:block; border-radius:var(--radius,.75rem);
  max-height:40dvh; object-fit:cover; overflow:clip; 
}

/* Experience */
.experience-section article{
  border-left:3px solid var(--brand,#6ccff6);
  padding:.75rem 1rem; border-radius:.5rem;
  background:rgba(108,207,246,.08);
}

/* Visualisations */
.viz-section{position:relative; z-index:0}   
@keyframes floaty{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-.4rem) rotate(1.5deg)}
  100%{transform:translateY(0) rotate(0)}
}
.viz-section svg{
  position:relative; z-index:0;                
  animation:floaty 5s ease-in-out infinite;  
  transform-origin:50% 50%;
}


/* Form */
.site-footer{border-top:1px solid rgba(108,207,246,.35)}
.contact-form{
  display:flex; flex-direction:column; gap:.75rem;
  width:min(100%,40rem); margin:0 auto; padding:1rem;
}
.contact-form input,.contact-form textarea,.contact-form button{
  width:100%; font-size:1rem; padding:.7em .9em;   
  color:var(--text,#e8eef2); background:#0f1317;
  border:1px solid #2a323a; border-radius:.6rem;
}


/* Media Queries */
@media (max-width:48rem){
  .site-nav{flex-wrap:wrap}
  .projects-section li{flex-basis:100%}
}
@media (prefers-color-scheme:light){
  :root{--bg:#fafcff; --text:#0b0d10}
}