:root {
  color-scheme:dark;
  --bg:#0d0b12;
  --surface:#171320;
  --border:#302738;
  --text:#f8f7fb;
  --muted:#aba5b5;
  --accent:#c38be9
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 'Segoe UI',Arial,sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
button,summary {
  cursor:pointer
}
button {
  color:inherit
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
::selection {
  background:#754896
}
h1,h2,h3,h4,p {
  margin:0
}
h1,h2,h3,h4 {
  line-height:1.16;
  letter-spacing:-.035em
}
p {
  color:var(--muted)
}
em {
  font-style:normal;
  color:var(--accent)
}
[hidden] {
  display:none!important
}
.wrap {
  max-width:1180px;
  margin:auto;
  padding:0 40px
}
.nav {
  position:fixed;
  z-index:10;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  background:#211a2bea;
  border:1px solid #44364d;
  border-radius:100px;
  backdrop-filter:blur(16px);
  box-shadow:0 8px 40px #0004;
  width:max-content;
  white-space:nowrap
}
.nav a {
  padding:7px 18px;
  border-radius:30px;
  font-size:14px;
  flex-shrink:0
}
.nav .brand {
  padding:0;
  display:flex
}
.brand img {
  border-radius:50%;
  width:38px;
  height:38px
}
.nav a:hover,.nav a[aria-current] {
  background:#ffffff10
}
.nav span {
  color:var(--accent)
}
.hero {
  position:relative;
  padding:150px 0 0;
  overflow:hidden
}
.eyebrow {
  font-size:11px;
  font-weight:650;
  letter-spacing:.15em;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:9px
}
.dot {
  width:7px;
  height:7px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 16px #ae68da66
}
.hero-index {
  margin-left:auto
}
.wordmark {
  width:145px;
  height:auto;
  display:block;
  margin:35px 0 24px
}
.hero h1 {
  font-size:18px;
  font-weight:500;
  letter-spacing:0
}
.hero h1>span,.resume-intro h1>span {
  display:block;
  font-size:clamp(32px,4.5vw,59px);
  font-weight:700;
  line-height:1.13;
  letter-spacing:-.055em;
  margin-top:15px
}
.hero>p {
  max-width:530px;
  margin:25px 0 20px;
  font-size:17px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:30px;
  font-size:14px;
  font-weight:600
}
.text-link:hover {
  color:var(--accent)
}
.hero-orbit {
  position:absolute;
  right:20px;
  top:210px;
  width:275px;
  height:275px;
  transform:rotate(-9deg);
  border-radius:65px;
  box-shadow:0 0 120px #9751a83b
}
.hero-orbit:before {
  content:'';
  position:absolute;
  inset:-22px;
  border:1px solid #75489655;
  border-radius:80px;
  transform:rotate(18deg)
}
.hero-orbit img {
  width:100%;
  height:100%;
  border-radius:65px
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding:55px 0 20px;
  margin-top:20px;
  color:#867d92;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:10px
}
.projects {
  padding-top:75px
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:32px
}
.section-heading h2 {
  font-size:38px;
  margin-top:14px
}
.accent {
  color:var(--accent)
}
.section-heading>p {
  font-size:14px
}
.filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:42px
}
.filters button {
  background:transparent;
  border:1px solid var(--border);
  border-radius:50px;
  padding:9px 16px;
  font-size:12px
}
.filters button.active,.filters button:hover {
  background:#362342;
  border-color:#825599
}
.filters span {
  margin-left:8px;
  color:var(--accent)
}
.group-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px
}
.group-heading h3 {
  font-size:18px;
  letter-spacing:-.01em
}
.group-heading span {
  font-size:11px;
  color:#82768e
}
.project-group {
  margin-bottom:48px
}
.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}
.project-card {
  background:linear-gradient(145deg,#1b1623,#141019);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  transition:transform .25s,border-color .25s;
  min-width:0
}
.project-card:hover {
  transform:translateY(-5px);
  border-color:#6c457f
}
.project-image {
  position:relative;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 50% 90%,#492552,#211a2b);
  overflow:hidden
}
.project-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.55
}
.project-image.square img {
  width:128px;
  height:128px;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:16px;
  opacity:.75
}
.image-label {
  position:absolute;
  bottom:13px;
  left:18px;
  font-size:9px;
  letter-spacing:.16em;
  color:#fff9
}
.card-body {
  padding:24px
}
.card-category {
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:9px
}
h4 {
  font-size:24px
}
.subtitle {
  font-size:12px;
  color:#c3b6ce;
  margin-top:8px
}
.card-body>p {
  font-size:13px;
  margin-top:13px;
  line-height:1.7
}
.tags {
  padding:0;
  margin:20px 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none
}
.tags li {
  font-size:10px;
  color:#c6bdce;
  background:#ffffff05;
  border:1px solid #ffffff0d;
  border-radius:5px;
  padding:3px 7px
}
details {
  font-size:12px;
  border-top:1px solid var(--border);
  padding-top:13px;
  color:#c9bfce
}
summary {
  min-height:32px
}
details p {
  margin:8px 0 15px
}
.resource {
  margin-top:18px;
  width:100%;
  justify-content:space-between;
  font-size:12px
}
.resume-invite {
  border-top:1px solid var(--border);
  padding:55px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.resume-invite h2 {
  font-size:28px;
  margin:12px 0
}
.resume-invite p {
  font-size:14px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:#b979de;
  border:1px solid #c890e7;
  color:#150b20;
  padding:12px 20px;
  border-radius:10px;
  font-size:13px;
  font-weight:650;
  min-height:46px;
  transition:background .2s
}
.button:hover {
  background:#d3a5ed
}
.endnote {
  max-width:1180px;
  margin:auto;
  padding:25px 40px 40px;
  color:#84798f;
  font-size:11px;
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--border)
}
.skip {
  position:fixed;
  top:-100px;
  left:10px;
  z-index:100;
  background:#fff;
  color:#000;
  padding:10px
}
.skip:focus {
  top:10px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}
.lock-page {
  min-height:85vh;
  max-width:470px;
  margin:auto;
  padding:150px 24px 70px
}
.lock-card {
  padding:35px;
  background:radial-gradient(ellipse at top right,#38203e,#171320 65%);
  border:1px solid var(--border);
  border-radius:24px
}
.lock-card>img {
  border-radius:18px;
  margin-bottom:22px
}
.lock-card h1 {
  font-size:42px;
  margin:18px 0
}
.lock-card>p {
  font-size:14px
}
.lock-card form {
  margin-top:28px
}
.lock-card label {
  display:block;
  font-size:13px;
  margin-bottom:8px
}
.lock-card input {
  width:100%;
  background:#0d0b12;
  border:1px solid #584364;
  border-radius:9px;
  color:#fff;
  padding:11px
}
.lock-card button {
  width:100%;
  margin-top:14px
}
.privacy-note {
  font-size:10px;
  color:#afa1b8;
  margin-top:24px
}
.lock-page>.text-link {
  margin-top:25px
}
.error {
  color:#ffc6d3;
  margin-top:15px;
  font-size:13px
}
.resume {
  padding-top:135px
}
.resume-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:45px
}
.resume-tools>div:last-child {
  display:flex;
  align-items:center;
  gap:20px
}
.quiet {
  background:transparent;
  border:0;
  color:var(--muted);
  padding:12px;
  font-size:12px
}
.resume-intro {
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-bottom:45px
}
.resume-intro h1 {
  font-size:28px;
  margin:20px 0
}
.resume-intro h1>span {
  font-size:42px
}
.portrait {
  width:200px;
  height:230px;
  object-fit:cover;
  border-radius:20px
}
.contact {
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  font-size:14px;
  color:var(--accent)
}
.resume-section {
  padding:35px 0;
  border-top:1px solid var(--border)
}
.resume-section h2 {
  font-size:26px;
  margin-bottom:22px
}
.resume-section>p {
  max-width:900px;
  font-size:15px
}
.timeline article {
  display:grid;
  grid-template-columns:210px 1fr;
  gap:25px;
  margin:0 0 30px
}
.dates {
  font-size:12px;
  color:var(--accent);
  padding-top:5px
}
.timeline h3,.skills-grid h3 {
  font-size:18px;
  letter-spacing:-.01em
}
.employer {
  font-size:13px;
  margin-top:8px
}
.employer span {
  color:var(--muted)
}
.timeline p {
  margin-top:12px;
  font-size:14px
}
.skills-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin-top:24px
}
.skills-grid p {
  font-size:14px;
  margin-top:12px
}
.qualification-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 30px;
  list-style:none;
  padding:0;
  font-size:14px;
  color:#c9c1d2
}
.qualification-list li:before {
  content:'✓';
  color:var(--accent);
  margin-right:10px
}
.remote {
  background:linear-gradient(120deg,#211629,#141019);
  padding:30px;
  border-radius:18px;
  margin:20px 0
}
.remote h2 {
  margin-top:12px
}
.remote details {
  margin-top:25px
}
.remote dl>div {
  display:grid;
  grid-template-columns:140px 1fr;
  padding:8px 0;
  border-bottom:1px solid var(--border)
}
dd {
  margin:0
}
.practical {
  font-size:14px;
  color:var(--muted);
  padding-left:20px
}
.practical li {
  margin-bottom:8px
}
@media(min-width:900px) and (prefers-reduced-motion:no-preference) {
  .hero-orbit {
    animation:float 8s ease-in-out infinite
  }
  @keyframes float {
    50% {
      transform:translateY(-12px) rotate(-6deg)
    }
  }
}
@media(max-width:1000px) {
  .hero-orbit {
    width:200px;
    height:200px;
    right:0;
    top:260px
  }
  .hero>p {
    max-width:470px
  }
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:720px) {
  .wrap {
    padding:0 22px
  }
  .hero {
    padding-top:120px
  }
  .hero-index {
    display:none
  }
  .hero-orbit {
    display:none
  }
  .hero h1>span {
    font-size:40px
  }
  .hero>p {
    font-size:15px
  }
  .section-heading {
    align-items:start;
    flex-direction:column;
    gap:16px
  }
  .section-heading h2 {
    font-size:32px
  }
  .section-heading>p br {
    display:none
  }
  .projects {
    padding-top:45px
  }
  .grid {
    grid-template-columns:1fr
  }
  .project-image.square img {
    width:144px;
    height:144px
  }
  .filters {
    gap:6px
  }
  .filters button {
    padding:9px 12px;
    font-size:11px
  }
  .resume-invite {
    align-items:start;
    flex-direction:column
  }
  .endnote {
    padding:25px 22px;
    font-size:10px;
    gap:20px
  }
  .resume {
    padding-top:120px
  }
  .resume-tools {
    align-items:start;
    flex-direction:column
  }
  .resume-intro {
    flex-direction:column-reverse
  }
  .portrait {
    width:110px;
    height:130px
  }
  .resume-intro h1>span {
    font-size:34px
  }
  .timeline article {
    grid-template-columns:1fr;
    gap:8px
  }
  .skills-grid,.qualification-list {
    grid-template-columns:1fr
  }
  .remote {
    padding:22px
  }
  .remote dl>div {
    grid-template-columns:1fr;
    gap:3px
  }
  .contact {
    gap:8px;
    flex-direction:column
  }
  .hero-bottom {
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}