:root{
  --bg:#0d0d0f; --ink:#ebebef; --soft:#94949e; --faint:#5b5b65; --line:#1f1f24;
  --c1:#ff5e5e; --c2:#ffb02e; --c3:#ffe83d; --c4:#54e38a; --c5:#5ab8ff; --c6:#b08aff;
  --rainbow:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:15.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
::selection{background:var(--c6);color:#16101f}
main{max-width:36rem;margin:0 auto;padding:clamp(4rem,13vh,8rem) 1.4rem 4rem;position:relative;z-index:1}

/* faint spectral light on the wall behind everything */
.glc{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;filter:blur(26px);transform:translateZ(0)}

a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .25s,color .25s}
.muted{color:var(--soft)}
.tiny{font-size:.74rem;color:var(--faint)}

.s{opacity:0;transform:translateY(10px);animation:up .8s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i)*80ms)}
@keyframes up{to{opacity:1;transform:none}}

/* ===== the prism streak ===== */
.streak{height:3px;background:var(--rainbow);background-size:200% 100%;border-radius:99px;margin:1.6rem 0 0;animation:pan 6s linear infinite}
@keyframes pan{to{background-position:200% 0}}

h1{font-size:1.2rem;font-weight:600;letter-spacing:-.01em}
.role{color:var(--soft);margin-top:.15rem}
.role .clock{color:var(--faint);font-size:.8rem;font-variant-numeric:tabular-nums}

section{margin-top:3.2rem}
h2{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:1rem}
p+p{margin-top:.9em}

/* projects — each row gets its own hue on hover */
.proj{display:grid}
.proj a{display:grid;grid-template-columns:1.1rem 1fr auto;gap:.9rem;align-items:baseline;padding:.8rem .2rem;border:0;border-top:1px solid var(--line)}
.proj a:last-child{border-bottom:1px solid var(--line)}
.proj i{font-style:normal;width:.45rem;height:.45rem;border-radius:2px;background:var(--faint);align-self:center;transition:background .25s,transform .25s,box-shadow .25s}
.proj b{font-weight:500}
.proj span{color:var(--soft);font-size:.85em;text-align:right}
.proj a:hover i{transform:rotate(45deg) scale(1.25)}
.proj a:nth-child(1):hover i{background:var(--c1);box-shadow:0 0 14px var(--c1)}
.proj a:nth-child(2):hover i{background:var(--c2);box-shadow:0 0 14px var(--c2)}
.proj a:nth-child(3):hover i{background:var(--c4);box-shadow:0 0 14px var(--c4)}
.proj a:nth-child(4):hover i{background:var(--c5);box-shadow:0 0 14px var(--c5)}
.proj a:nth-child(1):hover b{color:var(--c1)}
.proj a:nth-child(2):hover b{color:var(--c2)}
.proj a:nth-child(3):hover b{color:var(--c4)}
.proj a:nth-child(4):hover b{color:var(--c5)}

/* experience */
.xp{display:grid;gap:.5rem}
.xp div{display:flex;gap:1.1rem;align-items:baseline}
.xp .yr{width:5.6rem;flex:none;font-size:.76rem;color:var(--faint);font-variant-numeric:tabular-nums}
.xp b{font-weight:500}
.xp span.at{color:var(--soft)}

/* elsewhere — prismatic hovers */
.links{display:flex;gap:1.4rem;flex-wrap:wrap}
.links a:nth-child(1):hover{color:var(--c1);border-color:var(--c1)}
.links a:nth-child(2):hover{color:var(--c2);border-color:var(--c2)}
.links a:nth-child(3):hover{color:var(--c4);border-color:var(--c4)}
.links a:nth-child(4):hover{color:var(--c5);border-color:var(--c5)}
.links a:nth-child(5):hover{color:var(--c6);border-color:var(--c6)}
a:hover{color:var(--ink);border-color:var(--ink)}

/* now playing */
.np{display:flex;align-items:center;gap:.95rem;max-width:22rem;padding:.75rem .95rem;border:1px solid var(--line);border-radius:14px;transition:border-color .25s,transform .25s}
.np:hover{border-color:var(--faint);transform:translateY(-2px);color:inherit}
.np__art{width:2.7rem;height:2.7rem;border-radius:8px;flex:none;position:relative;overflow:hidden;
  background:conic-gradient(from 40deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6),var(--c1));
  animation:spinart 16s linear infinite}
@keyframes spinart{to{transform:rotate(360deg)}}
.np__art::after{content:"";position:absolute;inset:0;backdrop-filter:blur(6px)}
.np__meta{min-width:0;flex:1}
.np__meta b{display:block;font-weight:500;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np__meta i{display:block;font-style:normal;font-size:.78rem;color:var(--soft)}
.np__eq{display:flex;align-items:flex-end;gap:2.5px;height:1rem;flex:none}
.np__eq i{width:3px;border-radius:2px;transform-origin:bottom;animation:eq 1.1s ease-in-out infinite}
.np__eq i:nth-child(1){height:60%;background:var(--c1)}
.np__eq i:nth-child(2){height:100%;background:var(--c2);animation-delay:.15s}
.np__eq i:nth-child(3){height:45%;background:var(--c4);animation-delay:.3s}
.np__eq i:nth-child(4){height:80%;background:var(--c5);animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* footer — gradient email */
footer{margin-top:4.5rem}
.gmail{display:inline-block;border:0;font-size:clamp(1.5rem,4.5vw,2.1rem);font-weight:600;letter-spacing:-.02em;
  background:var(--rainbow);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pan 6s linear infinite}
.gmail:hover{color:transparent}
.foot__row{margin-top:2.8rem;padding-top:1.1rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media(max-width:480px){
  .xp div{flex-direction:column;gap:.05rem}
  .xp .yr{width:auto}
  .proj a{grid-template-columns:1.1rem 1fr}
  .proj span{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .s{opacity:1;transform:none}
}