@import url('https://fonts.googleapis.com/css2?family=Neue+Haas+Grotesk+Display+Pro:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg:        #03040a;
  --bg2:       #07080f;
  --bg3:       #0b0d18;
  --navy:      #0a0e2a;
  --navy2:     #0f1535;
  --navy3:     #162050;
  --white:     #ffffff;
  --off-white: #e8eaf0;
  --dim:       #6b7280;
  --dimmer:    #3a3f52;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.12);
  --glass-bg:  rgba(255,255,255,0.04);
  --glass-bg2: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.09);
  
  --font-display: 'Space Grotesk', sans-serif;
  --font-serif:   'Instrument Serif', serif;
  --font-mono:    'Space Mono', monospace;
  
  --radius: 16px;
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease2:  cubic-bezier(0.4, 0, 0.2, 1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;font-size:16px}

body{
  background:var(--bg);
  color:var(--off-white);
  font-family:var(--font-display);
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ── CURSOR ── */
.c-dot{
  position:fixed;top:0;left:0;z-index:9999;
  width:6px;height:6px;
  background:var(--white);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.c-ring{
  position:fixed;top:0;left:0;z-index:9998;
  width:40px;height:40px;
  border:1px solid rgba(255,255,255,0.5);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .4s var(--ease),height .4s var(--ease),opacity .3s;
  opacity:.4;
}
.c-ring.hov{width:64px;height:64px;opacity:.7;mix-blend-mode:difference;}
.c-ring.click{width:20px;height:20px;opacity:1}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--navy3);border-radius:2px}

/* ── NOISE OVERLAY ── */
body::after{
  content:'';
  position:fixed;inset:0;z-index:9990;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events:none;opacity:.5;
}

/* ── NAV ── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:32px 60px;
  transition:padding .5s var(--ease),background .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{
  padding:18px 60px;
  background:rgba(3,4,10,0.7);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom-color:var(--border);
}

.nav-logo{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:-.02em;
  cursor:none;
  display:flex;align-items:center;gap:0;
}
.logo-t{color:var(--white)}
.logo-dot{color:var(--dim);margin:0 1px}
.logo-g{color:var(--off-white)}

.nav-links{display:flex;gap:40px}
.nav-link{
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  transition:color .3s;
  cursor:none;
  position:relative;
}
.nav-link::after{
  content:'';
  position:absolute;bottom:-4px;left:0;
  width:0;height:1px;
  background:var(--white);
  transition:width .4s var(--ease);
}
.nav-link:hover,.nav-link.active{color:var(--white)}
.nav-link:hover::after,.nav-link.active::after{width:100%}

.nav-burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:none;
}
.nav-burger span{display:block;width:22px;height:1.5px;background:var(--white);transition:.4s var(--ease)}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-mobile-menu{
  display:none;flex-direction:column;
  position:fixed;inset:0;z-index:999;
  background:rgba(3,4,10,0.97);
  backdrop-filter:blur(30px);
  align-items:center;justify-content:center;gap:48px;
  opacity:0;pointer-events:none;transition:opacity .5s;
}
.nav-mobile-menu.open{display:flex;opacity:1;pointer-events:all}
.nav-mobile-link{
  font-size:3.5rem;font-weight:700;
  letter-spacing:-.04em;
  color:var(--dim);
  transition:color .3s;cursor:none;
}
.nav-mobile-link:hover{color:var(--white)}

/* ── FOOTER ── */
.site-footer{
  padding:80px 60px;
  border-top:1px solid var(--border);
}
.footer-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:32px;
}
.footer-brand{display:flex;flex-direction:column;gap:6px}
.footer-name{font-size:1.4rem;font-weight:700;letter-spacing:-.03em}
.footer-loc{font-family:var(--font-mono);font-size:.65rem;color:var(--dim);letter-spacing:.1em}
.footer-links{display:flex;gap:12px}
.footer-social{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:10px;color:var(--dim);
  transition:color .3s,border-color .3s,background .3s;cursor:none;
}
.footer-social svg{width:16px;height:16px}
.footer-social:hover{color:var(--white);border-color:var(--border2);background:var(--glass-bg2)}
.footer-copy{font-family:var(--font-mono);font-size:.65rem;color:var(--dimmer)}

/* ── CONTAINER ── */
.container{max-width:1280px;margin:0 auto;padding:0 60px}

/* ── TAG PILLS ── */
.tag-pill{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:100px;
  font-family:var(--font-mono);font-size:.65rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border:1px solid;
}
.tag-pill.engineering{color:rgba(180,200,255,.9);border-color:rgba(100,140,255,.3);background:rgba(60,100,255,.08)}
.tag-pill.music{color:rgba(255,200,180,.9);border-color:rgba(255,140,100,.3);background:rgba(255,100,60,.08)}
.tag-pill.videography{color:rgba(200,220,255,.9);border-color:rgba(160,200,255,.3);background:rgba(100,160,255,.08)}
.tag-pill.studies{color:rgba(255,230,180,.9);border-color:rgba(255,200,100,.3);background:rgba(255,170,60,.08)}
.tag-pill.other{color:var(--dim);border-color:var(--dimmer);background:var(--glass-bg)}

/* ── GLASS ── */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}

/* ── REVEAL ANIMATIONS ── */
.reveal{opacity:0;transform:translateY(50px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-60px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(60px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}.delay-5{transition-delay:.5s}.delay-6{transition-delay:.6s}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:12px;
  font-family:var(--font-display);font-size:.78rem;
  font-weight:600;letter-spacing:.04em;
  transition:.4s var(--ease);cursor:none;
  position:relative;overflow:hidden;
}
.btn-white{
  background:var(--white);color:var(--bg);
  box-shadow:0 0 0 rgba(255,255,255,0);
}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 48px rgba(255,255,255,.2)}
.btn-ghost{
  border:1px solid var(--border2);color:var(--dim);background:transparent;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);color:var(--white);transform:translateY(-2px)}
.btn-glass{
  background:var(--glass-bg2);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);
  color:var(--off-white);
}
.btn-glass:hover{background:rgba(255,255,255,.1);border-color:var(--border2);transform:translateY(-2px)}

/* ── POST CARDS ── */
.post-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:28px;
  transition:transform .5s var(--ease),border-color .4s,background .4s;
  cursor:none;
  display:flex;flex-direction:column;gap:12px;
  backdrop-filter:blur(12px);
  position:relative;overflow:hidden;
}
.post-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.04), transparent 60%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.post-card:hover::before{opacity:1}
.post-card:hover{transform:translateY(-8px);border-color:var(--border2);background:var(--glass-bg2)}
.post-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.post-date{font-family:var(--font-mono);font-size:.65rem;color:var(--dimmer);letter-spacing:.06em}
.post-title{font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1.4}
.post-excerpt{font-size:.82rem;color:var(--dim);line-height:1.7;flex:1}
.post-read-more{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--off-white);display:flex;align-items:center;gap:6px;transition:gap .3s;cursor:none;background:none;border:none;padding:0}
.post-card:hover .post-read-more{gap:10px}

/* ── SECTION LABELS ── */
.section-label{
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:16px;
}

/* ── SECTION HEADINGS ── */
.section-heading{
  font-size:clamp(2.2rem,4.5vw,3.5rem);
  font-weight:700;letter-spacing:-.04em;line-height:1;
  margin-bottom:28px;
}

/* ── ACCENT TEXT ── */
.accent{
  font-family:var(--font-serif);
  font-style:italic;
  color:var(--off-white);
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .site-nav{padding:20px 24px}
  .site-nav.scrolled{padding:14px 24px}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .container{padding:0 24px}
  .site-footer{padding:60px 24px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:24px}
}