@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root{
  --bg:#0b0b0f;
  --bg-soft:#101015;
  --panel:#101118;
  --line:#1c1c23;
  --line-2:#2a2a33;
  --text:#ecebe5;
  --muted:#6f6e79;
  --dim:#46454f;
  --accent:#e8a33d;
  --accent-soft:#f1bf72;
  --status:var(--accent);   /* discord status colour — js sets this live */
  --glow:rgba(232,163,61,.14);
  --live:#54d18c;
  --maxw:680px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:300;
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}
body.locked{overflow:hidden;height:100vh}

/* faint corona, top center */
body::before{
  content:"";
  position:fixed;top:-32vh;left:50%;transform:translateX(-50%);
  width:92vw;max-width:820px;height:760px;
  background:radial-gradient(circle at center,var(--glow) 0%,transparent 62%);
  pointer-events:none;z-index:0;
  transition:background .8s var(--ease);
  animation:breathe 11s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.65}50%{opacity:1}}

/* grain */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.022;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ---------- intro gate ---------- */
.gate{
  position:fixed;inset:0;z-index:50;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.4rem;cursor:pointer;
  transition:opacity .7s var(--ease),visibility .7s;
}
.gate.gone{opacity:0;visibility:hidden}
/* already entered this session → never show the gate again (no flash) */
html.entered .gate{display:none}
html.entered body.locked{overflow:auto;height:auto}
/* warm radial glow behind the wordmark */
.gate::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(72vw,560px);height:min(72vw,560px);
  background:radial-gradient(circle at center,var(--glow) 0%,transparent 60%);
  pointer-events:none;animation:breathe 9s ease-in-out infinite;
}
.gate-mark{
  position:relative;
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:600;font-size:clamp(3rem,11vw,5rem);
  letter-spacing:-.03em;color:var(--text);
  text-shadow:0 0 45px var(--glow);
}
.gate-mark .acc{color:var(--accent);text-shadow:0 0 20px var(--accent)}
.gate .enter-text{
  position:relative;
  font-family:"JetBrains Mono",monospace;
  font-size:.72rem;letter-spacing:.3em;text-transform:lowercase;
  color:var(--muted);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:1}}

/* ---------- topbar ---------- */
.topbar{
  position:relative;z-index:5;
  width:100%;max-width:var(--maxw);
  margin:0 auto;
  padding:1.8rem clamp(1.4rem,5vw,2rem) 0;
  display:flex;align-items:center;gap:1.2rem;
  flex-wrap:wrap;
}
.brand{
  font-family:"Bricolage Grotesque";
  font-weight:500;font-size:1rem;letter-spacing:-.01em;
  color:var(--text);text-decoration:none;
}
.brand .acc{color:var(--status);font-size:1.8em;;transition:color .4s,text-shadow .4s;text-shadow:0 0 10px var(--status)}
.nav{display:flex;gap:1.1rem;margin-left:auto}
.nav a{
  font-family:"JetBrains Mono",monospace;
  font-size:.74rem;letter-spacing:.05em;text-transform:lowercase;
  color:var(--muted);text-decoration:none;position:relative;
  transition:color .3s;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;
  background:var(--accent);transition:width .3s var(--ease);
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{width:100%}
.nav a.active{color:var(--text)}
.nav a.active::after{width:100%}

/* status line in the topbar (where the clock used to be) */
.status-line{
  width:100%;
  font-family:"JetBrains Mono",monospace;
  font-size:.7rem;letter-spacing:.08em;color:var(--muted);
  margin-top:.2rem;display:flex;align-items:center;gap:.5rem;
}
.status-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--status);box-shadow:0 0 8px var(--status);
  transition:background .4s,box-shadow .4s;
}
/* clock when it lives in the eyebrow */
.eyebrow #clockMini{color:var(--muted)}

/* ---------- main ---------- */
main{
  position:relative;z-index:5;
  width:100%;max-width:var(--maxw);
  margin:0 auto;flex:1;
  padding:clamp(3rem,12vh,7rem) clamp(1.4rem,5vw,2rem) 2rem;
}

/* rise stagger */
.rise{opacity:0;transform:translateY(16px);animation:rise .85s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}
.d4{animation-delay:.4s}.d5{animation-delay:.52s}.d6{animation-delay:.64s}

.eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:.7rem;letter-spacing:.28em;text-transform:lowercase;
  color:var(--dim);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--line-2)}

h1.name{
  font-weight:400;font-size:clamp(3rem,13vw,5.4rem);
  line-height:.95;letter-spacing:-.02em;
}
h1.name .acc{color:var(--accent)}

.lead{
  margin-top:1.2rem;color:var(--muted);font-size:1.02rem;max-width:42ch;
}
.whisper{
  margin-top:2.4rem;color:var(--dim);font-size:.82rem;font-style:italic;
}

/* page title (interior pages) */
h2.page-title{
  font-weight:400;font-size:clamp(2.4rem,9vw,3.6rem);
  line-height:1;letter-spacing:-.02em;
}
.page-sub{margin-top:.9rem;color:var(--muted);font-size:.95rem;max-width:48ch}

/* ---------- now playing ---------- */
.now-block{margin-top:2.8rem;display:flex;flex-wrap:wrap;gap:.8rem}
.now-block .np{flex:1 1 270px;min-width:0}
.np.dc:hover{border-color:var(--status);box-shadow:0 0 16px -4px var(--status)}
.np{
  display:flex;align-items:center;gap:.9rem;
  background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:.85rem 1rem;
  text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .3s,transform .3s;
}
.np:hover{border-color:var(--line-2);transform:translateY(-1px)}
.np-hint{
  font-family:"JetBrains Mono",monospace;font-size:.6rem;
  letter-spacing:.12em;text-transform:lowercase;color:var(--dim);
  margin-top:.5rem;transition:color .3s;
}
.np:hover .np-hint{color:var(--accent-soft)}
.np:hover{border-color:var(--line-2)}
.np-art{
  width:46px;height:46px;border-radius:8px;flex-shrink:0;
  background:var(--bg-soft);background-size:cover;background-position:center;
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.np-art.spinning::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);
  animation:sheen 2.6s linear infinite;
}
@keyframes sheen{to{transform:translateX(120%)}}
.np-meta{min-width:0;}
.np-label{
  font-family:"JetBrains Mono",monospace;font-size:.6rem;
  letter-spacing:.2em;text-transform:lowercase;color:var(--dim);
  display:flex;align-items:center;line-height:1.4;
}
.np-label .status-dot{margin-right:.5rem}
#dcActivity{transition:opacity .25s ease}
.np-title{font-size:.9rem;line-height:1.4;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-artist{font-size:.76rem;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--live);
  box-shadow:0 0 8px var(--live);margin-right:.45rem;display:inline-block;
  animation:pulse 1.6s ease-in-out infinite;
}
.live-dot.off{background:var(--dim);box-shadow:none;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- about ---------- */
.prose{margin-top:2.4rem;max-width:54ch}
.prose p{color:var(--muted);margin-bottom:1.3rem}
.prose p em{color:var(--text);font-style:italic}
.prose strong{color:var(--text);font-weight:500}
.prose b{color:var(--accent-soft);font-weight:400}   /* orange accent text */
.stack-line{
  margin-top:2rem;font-family:"JetBrains Mono",monospace;
  font-size:.78rem;color:var(--dim);line-height:2;
}
.stack-line b{color:var(--accent-soft);font-weight:400}

/* ---------- expertise ---------- */
.skills{margin-top:2.6rem;display:flex;flex-direction:column;gap:1.5rem}
.skill{display:flex;flex-direction:column;gap:.55rem}
.skill-top{display:flex;justify-content:space-between;align-items:baseline}
.skill-name{font-size:.98rem;color:var(--text)}
.skill-tag{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.06em;color:var(--muted)}
.bar{height:3px;background:var(--line);border-radius:99px;overflow:hidden}
.bar span{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  box-shadow:0 0 10px var(--glow);
  transition:width 1.3s var(--ease);
}

/* ---------- projects ---------- */
.projects{margin-top:2.6rem;display:flex;flex-direction:column;gap:.7rem}
.project{
  display:block;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:1.25rem 1.35rem;position:relative;overflow:hidden;
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s;
}
.project::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .35s var(--ease);
}
.project:hover{border-color:var(--line-2);transform:translateX(4px);background:#13131b}
.project:hover::before{transform:scaleY(1)}
.proj-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.proj-name{font-size:1.05rem;color:var(--text)}
.proj-arrow{color:var(--dim);font-size:.9rem;transition:color .3s,transform .3s}
.project:hover .proj-arrow{color:var(--accent);transform:translate(3px,-3px)}
.proj-desc{font-size:.86rem;color:var(--muted);margin-top:.45rem;max-width:54ch}
.proj-stack{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.pill{
  font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.05em;
  color:var(--muted);border:1px solid var(--line-2);border-radius:99px;padding:.18rem .58rem;
}
.empty-note{
  margin-top:2.4rem;color:var(--dim);font-size:.88rem;font-style:italic;max-width:46ch;
}

/* ---------- music (stats page) ---------- */
.stats-grid{margin-top:2.6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:.7rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.05rem 1.15rem}
.stat .num{font-size:1.7rem;color:var(--text);font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.stat .num-accent{color:var(--accent-soft);text-shadow:0 0 14px var(--glow)}
.stat .lbl{font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.18em;text-transform:lowercase;color:var(--dim);margin-top:.45rem}

.period{margin-top:1.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.period button{
  font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:lowercase;
  color:var(--muted);background:transparent;border:1px solid var(--line-2);border-radius:99px;
  padding:.32rem .82rem;cursor:pointer;transition:color .3s,background .3s,border-color .3s;
}
.period button:hover{color:var(--text);border-color:var(--muted)}
.period button.active{color:var(--bg);background:var(--accent);border-color:var(--accent)}

.music-section{margin-top:2.8rem}
.ms-head{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.2em;text-transform:lowercase;color:var(--dim);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.ms-head::before{content:"";width:18px;height:1px;background:var(--line-2)}
.rank-list{list-style:none;display:flex;flex-direction:column}
.rank{display:flex;align-items:center;gap:.9rem;padding:.7rem .2rem;border-bottom:1px solid var(--line)}
.rank:last-child{border-bottom:none}
.rank-n{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--dim);width:1.5rem;flex-shrink:0;text-align:right}
.rank-meta{min-width:0;flex:1}
.rank-name{font-size:.92rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-sub{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-plays{font-family:"JetBrains Mono",monospace;font-size:.68rem;color:var(--accent-soft);flex-shrink:0;white-space:nowrap}

/* ---------- footer ---------- */
.foot{
  position:relative;z-index:5;
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:2.4rem clamp(1.4rem,5vw,2rem) 2.6rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;
  border-top:1px solid var(--line);
  font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--dim);
  letter-spacing:.05em;
}
.socials{display:flex;gap:1.2rem}
.socials a{color:var(--muted);text-decoration:none;position:relative;transition:color .3s}
.socials a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--accent);transition:width .3s}
.socials a:hover{color:var(--text)}
.socials a:hover::after{width:100%}

::selection{background:var(--accent);color:var(--bg)}

@media(max-width:520px){
  .topbar{gap:.8rem}
  .nav{gap:.85rem;margin-left:0;width:100%;order:3}
}