:root{
  --bg: #0b0b0b;
  --text: #e9e9e9;
  --muted: #9a9a9a;
  --link: #9be7ff;
  --max-width: 1100px;
  --left-gap: 15vw;
  --section-gap: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-size:15px}
body{
  margin:0;
  font-family: 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.8;
  letter-spacing:0.2px;
  font-size:1rem;
}

.site-header{position:sticky;top:0;background:transparent;padding:18px 0;z-index:20}
.nav{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 calc(var(--left-gap) + 8px)}
.brand{font-weight:700;text-decoration:none;color:var(--text);font-size:0.95rem}
.nav-right a{margin-left:18px;text-decoration:none;color:var(--muted);font-weight:400}

.hero{display:block;min-height:0;padding-top:15vh;padding-bottom:4px}
.hero-inner{max-width:720px;margin:0 0 0 calc(var(--left-gap) - 24px);text-align:left}
.hero-title{font-weight:600;font-size:1rem;margin:0 0 var(--section-gap) 0;color:var(--text);letter-spacing:0.6px}
.hero-sub{color:var(--muted);font-size:0.975rem;margin-top:2px}

.section-title{font-weight:400;margin:0;position:relative;font-size:1rem;display:inline-block;font-family:'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace}
.section-title::before{content:"[";margin-right:8px}
.section-title::after{content:"]";margin-left:8px}

.section-toggle{display:block;appearance:none;border:0;background:transparent;color:var(--text);text-align:left;padding:0.5px 0;margin:0 0 var(--section-gap) calc(var(--left-gap) + 8px);cursor:pointer;font-family:'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace}
.section-toggle:focus{outline:none;box-shadow:none}
.section-toggle:focus-visible{outline:none}
.section-toggle::before{display:none}

.section-content{margin-left:calc(var(--left-gap) + 8px);max-width:880px;width:auto;padding-bottom:0}
.section-content:not([hidden]){padding-bottom:28px}
.section-content p{margin:0;color:var(--text);white-space:pre-wrap}

.projects{max-width:var(--max-width);margin:0;padding:0}
.grid{display:block;gap:18px}
.card{display:block;text-decoration:none;color:inherit;border-radius:0;overflow:visible;border:0;background:transparent;padding:0;margin:0}
.card-body{padding:4px 0}
.card-body p{margin:0;color:var(--muted)}

.about,.contact{max-width:100%;margin:0;padding:0;color:var(--text)}

.site-footer{padding:var(--section-gap) 0 48px 0;text-align:left;color:var(--muted);margin-left:calc(var(--left-gap) - 24px)}

.site-footer .socials{margin:var(--section-gap) 0 var(--section-gap) 0}
.site-footer .socials a{color:var(--text);text-decoration:underline;margin-right:14px}

/* Links and all text should appear white */
.section-content a,
.site-footer .socials a,
a,
a:visited,
a:link{color:var(--text) !important}

/* Animated underline: per-line background underline that shrinks to the right */
a, .section-content a, .site-footer .socials a{
  position:relative;
  text-decoration:none;
  display:inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: left calc(100% - 2px);
  background-repeat: no-repeat;
  transition: background-size 880ms cubic-bezier(0.2,0.8,0.2,1), background-position 380ms cubic-bezier(0.2,0.8,0.2,1);
}

a:hover, a:focus, .section-content a:hover, .site-footer .socials a:hover{
  background-size: 0% 1px;
  background-position: right calc(100% - 2px);
}

a:hover,
a:active{color:var(--text) !important}
.hero-sub{color:var(--text)}
.about,.contact{color:var(--text)}

a{color:var(--link)}

@media(min-width:900px){
 :root{--left-gap:15vw}
  .hero{min-height:0;padding-top:15vh;padding-bottom:6px}
  .hero-title{font-size:1.05rem;margin-bottom:12px}
}

/* subtitle should not be bold */
.hero-sub{font-weight:400}

/* Ensure uniform spacing between sections */
main > section{margin:0 0 var(--section-gap) 0}

/* Make all text the same, slightly smaller size */
body, body * { font-size:15px !important }

/* Small utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Prevent mobile overlay scrollbars from overlapping rightmost text */
@media (max-width:700px){
  main{padding-right:20px}
  .site-footer{padding-right:20px}
}