:root{
  --bg:#0b0c13; --ink:#e9e7f1; --muted:#8e8ca3; --line:rgba(255,255,255,.08);
  --h1:#b9aef5; --h2:#8fe0d2; --h3:#f2c4ae; --h4:#9fc2f0; --dot:rgba(255,255,255,.13);
  --dot:rgba(255,255,255,.13); --edge-hi:rgba(255,255,255,.34); --edge-lo:rgba(255,255,255,.04); --fill:rgba(255,255,255,.025); --shade:rgba(0,0,0,.35);
  --sans:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --mx:50; --my:30; --sy:0;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f3f2f7; --ink:#1c1b27; --muted:#66647a; --line:rgba(28,27,39,.1);
    --h1:#6b5fb3; --h2:#1d8a7c; --h3:#c0765a; --h4:#4a73b8; --dot:rgba(28,27,39,.14); --edge-hi:rgba(255,255,255,.95); --edge-lo:rgba(28,27,39,.10); --fill:rgba(255,255,255,.55); --shade:rgba(28,27,39,.08);
  }
}
:root[data-theme="light"]{ --bg:#f3f2f7; --ink:#1c1b27; --muted:#66647a; --line:rgba(28,27,39,.1); --h1:#6b5fb3; --h2:#1d8a7c; --h3:#c0765a; --h4:#4a73b8; --dot:rgba(28,27,39,.14); --edge-hi:rgba(255,255,255,.95); --edge-lo:rgba(28,27,39,.10); --fill:rgba(255,255,255,.55); --shade:rgba(28,27,39,.08); }
:root[data-theme="dark"]{ --bg:#0b0c13; --ink:#e9e7f1; --muted:#8e8ca3; --line:rgba(255,255,255,.08); --h1:#b9aef5; --h2:#8fe0d2; --h3:#f2c4ae; --h4:#9fc2f0; --dot:rgba(255,255,255,.13); --edge-hi:rgba(255,255,255,.34); --edge-lo:rgba(255,255,255,.04); --fill:rgba(255,255,255,.025); --shade:rgba(0,0,0,.35); }

html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;overflow-x:hidden}

/* background: dot grid, faded toward the edges */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 42%, #000 35%, transparent 100%);
  mask-image:radial-gradient(ellipse 85% 70% at 50% 42%, #000 35%, transparent 100%);
}
a{color:inherit}
a:focus-visible{outline:2px solid var(--h2);outline-offset:4px;border-radius:4px}
::selection{background:var(--h1);color:var(--bg)}

/* scroll progress */
.progress{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:5;transform-origin:0 50%;
  transform:scaleX(var(--sy));
  background:linear-gradient(90deg,var(--h1),var(--h2),var(--h3),var(--h4));
}

.wrap{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 1.5rem}

nav{display:flex;justify-content:space-between;align-items:center;padding:1.75rem 0}
.mark{font-weight:500;text-decoration:none}
nav ul{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0}
nav ul a{text-decoration:none;color:var(--muted)}
nav ul a:hover{color:var(--ink)}

/* iridescent text: a light band that sits wherever the cursor is */
.holo{
  background:linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 38%,
    var(--h1) 44%, var(--h2) 49%, var(--h3) 54%, var(--h4) 59%,
    var(--ink) 65%, var(--ink) 100%);
  background-size:300% 100%;
  background-position:calc(100% - var(--mx) * 1%) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.hero{min-height:86vh;display:flex;flex-direction:column;justify-content:center;padding-bottom:6rem}
.hero h1{
  font-weight:200;margin:0;line-height:.95;letter-spacing:-.045em;
  font-size:clamp(3.6rem,13vw,10rem);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.name-wrap{position:relative}
#name{display:block;width:100%}
#nameText{
  position:absolute;left:0;top:0;margin:0;color:transparent;
  font-family:var(--sans);font-weight:800;letter-spacing:0;white-space:nowrap;cursor:text;
}
#nameText span{display:block}
#nameText::selection,#nameText span::selection{background:color-mix(in srgb,var(--h1) 22%,transparent);color:transparent}
.hero p{color:var(--muted);font-size:clamp(1.1rem,2vw,1.3rem);max-width:30rem;margin:2.25rem 0 0}

section{padding:5rem 0}
.head{display:flex;align-items:baseline;gap:1.5rem;margin:0 0 2.5rem}
h2{font-weight:300;font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:-.02em;margin:0;white-space:nowrap}
/* line draws with scroll position, not time */
.rule{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.rule::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--h1),var(--h2),var(--h3),transparent);
}

/* work rows */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line)}
.row a{
  display:grid;grid-template-columns:1.1fr 1.6fr auto;gap:2rem;align-items:baseline;
  padding:1.6rem 0;text-decoration:none;position:relative;z-index:1;
}
.row h3{margin:0;font-weight:400;font-size:1.4rem;letter-spacing:-.01em}
.row:hover h3,.row:focus-within h3{
  background:linear-gradient(90deg,var(--h1),var(--h2),var(--h3));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.row p{margin:0;color:var(--muted);max-width:30rem}
.row .stack{color:var(--muted);font-size:.9rem;text-align:right;white-space:nowrap}

.about{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem}
.about p{margin:0 0 1.1rem;max-width:36rem}
.about dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.5rem;align-content:start}
.about dt{color:var(--muted)}
.about dd{margin:0}

.contact .mail{
  display:inline-block;font-weight:200;font-size:clamp(2rem,7vw,4.6rem);letter-spacing:-.035em;
  text-decoration:none;word-break:break-word;line-height:1.1;
}
.links{display:flex;gap:1.75rem;margin-top:2rem}
.links a{color:var(--muted);text-decoration:none}
.links a:hover{color:var(--ink)}
footer{padding:4rem 0 2.5rem;color:var(--muted);font-size:.9rem}

@media (max-width:760px){
  .row a{grid-template-columns:1fr;gap:.4rem}
  .row .stack{text-align:left}
  .about{grid-template-columns:1fr}
  nav ul{gap:1.1rem}
  section{padding:3.5rem 0}
}