/* ─────────────────────────────────────
   TOKENS
───────────────────────────────────── */
[data-theme="dark"] {
  --bg:         #080810;
  --bg2:        #0e0e18;
  --bg3:        #161624;
  --border:     #ffffff0d;
  --border-lit: #ffffff18;
  --text:       #f0ecff;
  --sub:        #9b96b8;
  --dim:        #6a6585;
  --purple:     #b084f0;
  --purple-dim: #7c52c820;
  --teal:       #3de8de;
  --teal-dim:   #3de8de18;
  --green:      #78d68a;
  --mauve:      #d4a8e8;
  --glow-p:     rgba(176,132,240,0.18);
  --glow-t:     rgba(61,232,222,0.15);
  --sidebar:    224px;
  --card-bg:    #0f0f1c;
}
[data-theme="light"] {
  --bg:         #f2ede4;
  --bg2:        #ece6da;
  --bg3:        #e3dccf;
  --border:     #c8c0b000;
  --border-lit: #9c927e30;
  --text:       #1e1a14;
  --sub:        #5a5044;
  --dim:        #8a8070;
  --purple:     #9a6e8a;
  --purple-dim: #9a6e8a22;
  --teal:       #5e8a6e;
  --teal-dim:   #5e8a6e22;
  --green:      #4a7a5a;
  --mauve:      #b08898;
  --glow-p:     rgba(154,110,138,0.15);
  --glow-t:     rgba(94,138,110,0.15);
  --sidebar:    224px;
  --card-bg:    #ede7dc;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'Syne',sans-serif;background:var(--bg);color:var(--text);overflow:hidden}

/* CURSOR */
.cursor{
  position:fixed;width:8px;height:8px;
  background:var(--teal);border-radius:50%;
  pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .15s,height .15s,background .2s;
  mix-blend-mode:screen;
}
.cursor-ring{
  position:fixed;width:36px;height:36px;
  border:1px solid var(--purple);border-radius:50%;
  pointer-events:none;z-index:99998;
  transform:translate(-50%,-50%);
  transition:transform .08s linear,width .2s,height .2s,opacity .2s,border-color .2s;
  opacity:.6;
}
body:hover .cursor{opacity:1}

/* AMBIENT BG BLOBS */
.blob{
  position:fixed;border-radius:50%;
  pointer-events:none;z-index:0;
  filter:blur(80px);
  animation:blobFloat 12s ease-in-out infinite;
}
.blob-1{
  width:500px;height:500px;
  background:radial-gradient(circle,var(--glow-p),transparent 70%);
  top:-120px;left:calc(var(--sidebar) - 80px);
  animation-delay:0s;
}
.blob-2{
  width:400px;height:400px;
  background:radial-gradient(circle,var(--glow-t),transparent 70%);
  bottom:-80px;right:60px;
  animation-delay:-6s;
}
.blob-3{
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(212,168,232,0.1),transparent 70%);
  top:40%;right:30%;
  animation-delay:-3s;
}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(20px,-15px) scale(1.05)}
  66%{transform:translate(-10px,10px) scale(.97)}
}

/* GRAIN */
body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity:.22;pointer-events:none;z-index:9997;mix-blend-mode:overlay;
}

/* ─────────────────────────────────────
   LAYOUT
───────────────────────────────────── */
.shell{display:flex;height:100vh;width:100vw;position:relative;z-index:1}

/* ─────────────────────────────────────
   SIDEBAR
───────────────────────────────────── */
.sidebar{
  width:var(--sidebar);min-width:var(--sidebar);
  height:100vh;
  background:rgba(8,8,16,0.7);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-right:1px solid var(--border-lit);
  display:flex;flex-direction:column;
  padding:28px 20px;
  position:fixed;top:0;left:0;z-index:200;
  box-shadow:4px 0 40px rgba(0,0,0,0.5);
  transition:background .35s,box-shadow .35s;
}
[data-theme="light"] .sidebar{
  background:rgba(235,228,216,0.82);
  box-shadow:4px 0 40px rgba(0,0,0,0.12);
}

.sb-top{margin-bottom:32px}
.sb-avatar{
  width:54px;height:54px;border-radius:50%;
  overflow:hidden;margin-bottom:14px;
  position:relative;
  box-shadow:0 0 0 1px var(--border-lit),0 0 20px var(--glow-p);
}
.sb-avatar::after{
  content:'';position:absolute;inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 12px rgba(176,132,240,0.3);
}
.sb-avatar img{width:100%;height:100%;object-fit:cover;display:block}

.sb-name{
  font-family:'Unbounded',sans-serif;
  font-size:11px;font-weight:700;
  color:var(--text);letter-spacing:.04em;
  line-height:1.2;
}
.sb-loc{
  font-family:'DM Mono',monospace;
  font-size:8px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);margin-top:5px;
}

/* NAV */
nav{flex:1;display:flex;flex-direction:column;gap:1px}
.n{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:6px;
  cursor:pointer;
  font-family:'DM Mono',monospace;
  font-size:9px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
  text-decoration:none;position:relative;
  transition:color .2s,background .2s;
}
.n:hover{color:var(--text);background:var(--border)}
.n.on{color:var(--text)}
.n.on::before{
  content:'';position:absolute;left:0;top:20%;height:60%;width:2px;
  background:linear-gradient(to bottom,var(--purple),var(--teal));
  border-radius:0 2px 2px 0;
  box-shadow:0 0 8px var(--purple);
}
.n-pip{
  width:4px;height:4px;border-radius:50%;
  background:var(--purple);flex-shrink:0;
  opacity:0;transition:opacity .2s;
  box-shadow:0 0 6px var(--purple);
}
.n.on .n-pip,.n:hover .n-pip{opacity:1}

.sb-bot{display:flex;flex-direction:column;gap:14px}
.socials{display:flex;gap:10px}
.soc{
  font-family:'DM Mono',monospace;
  font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;transition:color .2s;
}
.soc:hover{color:var(--teal)}

/* THEME TOGGLE */
.tog{display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 0}
.tog-track{
  width:30px;height:15px;background:var(--bg3);
  border:1px solid var(--border-lit);border-radius:8px;position:relative;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.4);
}
.tog-thumb{
  width:9px;height:9px;background:var(--purple);border-radius:50%;
  position:absolute;top:2px;left:2px;
  transition:transform .3s,background .3s;
  box-shadow:0 0 6px var(--purple);
}
[data-theme="light"] .tog-thumb{transform:translateX(15px);background:var(--teal);box-shadow:0 0 6px var(--teal)}
.tog-lbl{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ─────────────────────────────────────
   MAIN
───────────────────────────────────── */
.main{
  margin-left:var(--sidebar);flex:1;
  height:100vh;overflow-y:auto;overflow-x:hidden;
}
.main::-webkit-scrollbar{width:3px}
.main::-webkit-scrollbar-track{background:transparent}
.main::-webkit-scrollbar-thumb{background:var(--purple);border-radius:2px}

/* PAGES */
.page{display:none;min-height:100vh}
.page.on{display:block;animation:pgIn .45s cubic-bezier(.22,1,.36,1) both}
#pg-home.on{display:flex;flex-direction:column}
@keyframes pgIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ─────────────────────────────────────
   CARD BASE (reusable)
───────────────────────────────────── */
.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1),
             box-shadow .3s cubic-bezier(.22,1,.36,1),
             border-color .3s;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.4),
    0 8px 32px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,0.04) 0%,transparent 60%);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--border-lit);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.5),
    0 24px 64px rgba(0,0,0,0.4),
    0 0 0 1px var(--border-lit),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ─────────────────────────────────────
   HOME PAGE
───────────────────────────────────── */
.home-hero{
  padding:52px 48px 36px;
  flex:none;
  position:relative;
}

/* Decorative rotated text in background */
.home-hero::before{
  content:'JohnnyLeeXYZ';
  position:absolute;
  bottom:-10px;right:-20px;
  font-family:'Unbounded',sans-serif;
  font-size:clamp(60px,8vw,120px);
  font-weight:900;
  color:rgba(176,132,240,0.04);
  letter-spacing:-.02em;
  pointer-events:none;
  white-space:nowrap;
  user-select:none;
}

.home-eye{
  font-family:'DM Mono',monospace;
  font-size:9px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--teal);
  margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.home-eye::before{
  content:'';width:24px;height:1px;
  background:linear-gradient(to right,var(--teal),transparent);
}

.home-hl{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(44px,6.5vw,96px);
  font-weight:900;
  line-height:.92;
  letter-spacing:-.03em;
  color:var(--text);
  position:relative;
  z-index:1;
}
.home-hl .w-purple{
  color:var(--purple);
  text-shadow:0 0 40px var(--glow-p);
  display:block;
}
.home-hl .w-teal{
  color:var(--teal);
  text-shadow:0 0 40px var(--glow-t);
  display:block;
}

.home-sub{
  font-family:'DM Mono',monospace;
  font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--sub);
  margin-top:24px;display:flex;align-items:center;gap:0;
  flex-wrap:wrap;
}
.home-sub .sep{color:var(--dim);margin:0 10px}

/* HOME BENTO GRID */
.bento{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:auto auto auto;
  gap:10px;
  padding:0 20px 20px 48px;
  flex:1;
}
/* MUSIC — spans 2 cols wide */
.b-music{
  grid-column:1/3;grid-row:1;
  cursor:pointer;
}
/* ART — right col rows 1-2 */
.b-art{
  grid-column:3;grid-row:1/3;
  cursor:pointer;
}
/* STYLE — col 1 row 2 */
.b-style{
  grid-column:1;grid-row:2;
  cursor:pointer;
}
/* FASHION — col 2 row 2 */
.b-fashion{
  grid-column:2;grid-row:2;
  cursor:pointer;
}
/* ABOUT — col 1-2 row 3 */
.b-about{
  grid-column:1/3;grid-row:3;
  cursor:pointer;
}
/* CONTACT — col 3 row 3 */
.b-contact{
  grid-column:3;grid-row:3;
  cursor:pointer;
}

.bento-card{
  padding:24px 22px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:130px;
}
/* Music card: tall, dramatic */
.b-music .bento-card{min-height:160px}
.b-art .bento-card{min-height:300px}

.bc-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:7px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--dim);
  margin-bottom:8px;
}
.bc-title{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(14px,2vw,22px);
  font-weight:700;
  color:var(--text);
  line-height:1.15;
  letter-spacing:-.01em;
}
.bc-arrow{
  align-self:flex-end;
  font-size:20px;
  color:var(--dim);
  transition:transform .25s,color .25s,text-shadow .25s;
  margin-top:12px;
}

/* Card hover glow tints */
.b-music:hover{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 40px var(--glow-p),inset 0 1px 0 rgba(255,255,255,.08)}
.b-music:hover .bc-arrow{transform:translate(4px,-4px);color:var(--purple);text-shadow:0 0 12px var(--purple)}

.b-art:hover{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 40px var(--glow-t),inset 0 1px 0 rgba(255,255,255,.08)}
.b-art:hover .bc-arrow{transform:translate(4px,-4px);color:var(--teal);text-shadow:0 0 12px var(--teal)}

.b-style:hover{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 40px rgba(212,168,232,0.15),inset 0 1px 0 rgba(255,255,255,.08)}
.b-style:hover .bc-arrow{transform:translate(4px,-4px);color:var(--mauve);text-shadow:0 0 12px var(--mauve)}

.b-fashion:hover .bc-arrow{transform:translate(4px,-4px);color:var(--green);text-shadow:0 0 12px var(--green)}
.b-about:hover .bc-arrow{transform:translate(4px,-4px);color:var(--purple);text-shadow:0 0 12px var(--purple)}
.b-contact:hover .bc-arrow{transform:translate(4px,-4px);color:var(--teal);text-shadow:0 0 12px var(--teal)}

/* Accent stripe on bottom of each card */
.b-music::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--purple),var(--teal));opacity:0;transition:opacity .3s;border-radius:0 0 12px 12px}
.b-music:hover::after{opacity:1}
.b-art::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to bottom,transparent,var(--teal));opacity:0;transition:opacity .3s;border-radius:0 0 12px 12px}
.b-art:hover::after{opacity:1}

/* ART card vertical text decoration */
.b-art .bc-vert{
  position:absolute;
  top:50%;right:18px;
  transform:translateY(-50%) rotate(90deg);
  transform-origin:center;
  font-family:'DM Mono',monospace;
  font-size:7px;letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(61,232,222,0.15);
  white-space:nowrap;
  pointer-events:none;
}

/* ─────────────────────────────────────
   SHARED PAGE HEADER
───────────────────────────────────── */
.ph{padding:52px 48px 0;position:relative}
.ph-eye{
  font-family:'DM Mono',monospace;
  font-size:8px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--purple);
  margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.ph-eye::before{content:'';width:20px;height:1px;background:linear-gradient(to right,var(--purple),transparent)}
.ph-title{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(34px,5vw,64px);
  font-weight:900;
  line-height:.92;letter-spacing:-.03em;
  color:var(--text);margin-bottom:44px;
}
.ph-title .hl{color:var(--teal);text-shadow:0 0 30px var(--glow-t)}

/* ─────────────────────────────────────
   ABOUT
───────────────────────────────────── */
.about-wrap{
  display:grid;grid-template-columns:1fr 280px;
  gap:52px;padding:0 48px 60px;
}
.bio-body{
  font-family:'Syne',sans-serif;
  font-size:15px;line-height:1.85;
  font-weight:400;color:var(--text);
}
.bio-body p+p{margin-top:18px}
.bio-body strong{
  font-weight:700;color:var(--teal);
}

.aside{position:sticky;top:20px}
.aside-block{margin-bottom:28px}
.aside-lbl{
  font-family:'DM Mono',monospace;
  font-size:7px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--dim);
  padding-bottom:9px;
  border-bottom:1px solid var(--border-lit);
  margin-bottom:12px;
}
.tag{
  display:inline-block;
  font-family:'DM Mono',monospace;
  font-size:7px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sub);
  border:1px solid var(--border-lit);
  background:var(--bg3);
  padding:5px 9px;margin:2px 2px 2px 0;
  border-radius:20px;
  transition:all .2s;cursor:default;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
.tag:hover{
  border-color:var(--purple);color:var(--purple);
  box-shadow:0 0 12px var(--glow-p);
  transform:translateY(-1px);
}
.resume-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'DM Mono',monospace;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);text-decoration:none;
  border:1px solid var(--teal);
  padding:12px 22px;margin-top:20px;
  border-radius:6px;
  transition:all .25s;
  box-shadow:0 0 20px var(--teal-dim);
}
.resume-btn:hover{
  background:var(--teal);color:var(--bg);
  box-shadow:0 0 30px rgba(61,232,222,0.35);
  transform:translateY(-2px);
}

/* ─────────────────────────────────────
   MUSIC
───────────────────────────────────── */
.music-wrap{
  display:grid;grid-template-columns:1fr 340px;
  gap:48px;padding:0 48px 60px;
}
.music-bio{
  font-family:'Syne',sans-serif;
  font-size:15px;line-height:1.85;
  font-weight:400;color:var(--text);
}
.music-bio p+p{margin-top:16px}
.rule{
  width:40px;height:2px;
  background:linear-gradient(to right,var(--teal),transparent);
  margin:28px 0;border-radius:1px;
}
.stream-note{
  font-family:'DM Mono',monospace;
  font-size:8px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--dim);
}

/* PLAYER */
.player{
  background:var(--card-bg);
  border:1px solid var(--border-lit);
  border-radius:16px;padding:22px;
  position:sticky;top:20px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.05);
}
.pl-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:14px;border-bottom:1px solid var(--border-lit);margin-bottom:16px;
}
.pl-head-lbl{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--sub)}
.pl-badge{
  font-family:'DM Mono',monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);background:var(--teal-dim);
  padding:3px 8px;border-radius:20px;
  border:1px solid rgba(61,232,222,0.2);
}

.track-list{margin-bottom:18px}
.tr{
  display:flex;align-items:center;gap:8px;
  padding:8px 8px;border-radius:6px;
  cursor:pointer;transition:background .18s;
}
.tr:hover{background:var(--bg3)}
.tr.playing{background:var(--purple-dim)}
.tr.playing .tr-name,.tr.playing .tr-num{color:var(--teal)}
.tr-num{font-family:'DM Mono',monospace;font-size:7px;color:var(--dim);width:18px;text-align:right;flex-shrink:0}
.tr-name{
  font-family:'Syne',sans-serif;font-size:11px;font-weight:700;
  color:var(--text);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s;
}
.tr-dur{font-family:'DM Mono',monospace;font-size:7px;color:var(--dim);flex-shrink:0}
.tr-bars{display:flex;gap:2px;align-items:flex-end;height:12px;opacity:0;flex-shrink:0}
.tr.playing .tr-bars{opacity:1}
.tr-bar{width:2px;background:var(--teal);border-radius:1px;animation:bar .7s ease infinite;box-shadow:0 0 4px var(--teal)}
.tr-bar:nth-child(1){height:5px;animation-delay:0s}
.tr-bar:nth-child(2){height:11px;animation-delay:.1s}
.tr-bar:nth-child(3){height:7px;animation-delay:.22s}
@keyframes bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.3)}}

.np-title{
  font-family:'Unbounded',sans-serif;
  font-size:16px;font-weight:700;
  color:var(--text);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.01em;
}
.np-sub{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:4px}

.prog{
  height:3px;background:var(--bg3);
  border-radius:2px;cursor:pointer;
  margin:14px 0 8px;position:relative;
  overflow:hidden;
}
.prog-fill{
  height:100%;
  background:linear-gradient(to right,var(--purple),var(--teal));
  border-radius:2px;width:0;pointer-events:none;
  box-shadow:0 0 8px var(--teal);
}
.time-row{
  display:flex;justify-content:space-between;
  font-family:'DM Mono',monospace;font-size:7px;color:var(--dim);margin-bottom:16px;
}
.ctrl-row{display:flex;align-items:center;justify-content:center;gap:16px}
.cbtn{
  background:none;border:none;cursor:pointer;
  color:var(--sub);font-size:14px;padding:8px;
  transition:color .2s;display:flex;align-items:center;border-radius:6px;
}
.cbtn:hover{color:var(--text);background:var(--bg3)}
.cbtn.play-btn{
  width:42px;height:42px;
  background:linear-gradient(135deg,var(--purple),var(--teal));
  border-radius:50%;color:var(--bg);font-size:14px;
  box-shadow:0 4px 20px var(--glow-p);
  transition:transform .2s,box-shadow .2s;
}
.cbtn.play-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px var(--glow-p)}
audio{display:none}

/* ─────────────────────────────────────
   P5 PAGE
───────────────────────────────────── */
.p5-intro{
  font-family:'Syne',sans-serif;
  font-size:15px;line-height:1.75;color:var(--sub);
  max-width:520px;margin:0 48px 32px;
}
.p5-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;margin:0 48px 60px;
}
.sk-card{
  border-radius:12px;cursor:pointer;overflow:hidden;
  position:relative;aspect-ratio:4/3;
  display:flex;flex-direction:column;
}
.sk-thumb{
  flex:1;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 100%);
}
.sk-live{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  pointer-events:none;opacity:0;transition:opacity .25s;
}
.sk-card:hover .sk-live{opacity:1}
.sk-icon{
  font-size:28px;color:var(--sub);
  transition:transform .3s,color .3s,text-shadow .3s,opacity .25s;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.sk-tag-sm{transition:opacity .25s}
.sk-card:hover .sk-icon,
.sk-card:hover .sk-tag-sm{opacity:0}
.sk-tag-sm{font-family:'DM Mono',monospace;font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.sk-foot{
  padding:10px 14px;
  border-top:1px solid var(--border-lit);
  background:var(--card-bg);
  display:flex;justify-content:space-between;align-items:center;
}
.sk-name{font-family:'Unbounded',sans-serif;font-size:9px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.sk-cat{font-family:'DM Mono',monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
.sk-hover{
  position:absolute;inset:0;
  background:rgba(8,8,16,0.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s;
  flex-direction:column;gap:8px;
}
.sk-hover span{
  font-family:'DM Mono',monospace;
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--teal);
}
.sk-hover .sh-icon{font-size:22px;color:var(--teal);text-shadow:0 0 12px var(--glow-t)}
.sk-card:hover .sk-hover{opacity:1}

/* SKETCH MODAL */
.sk-modal{
  display:none;position:fixed;inset:0;
  background:rgba(4,4,10,0.95);z-index:500;
  align-items:center;justify-content:center;padding:28px;
  backdrop-filter:blur(8px);
}
.sk-modal.open{display:flex}
.sk-modal-box{
  background:var(--card-bg);
  border:1px solid var(--border-lit);
  border-radius:16px;width:100%;max-width:920px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.8),0 0 0 1px var(--border-lit);
}
.sk-modal-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--border-lit);
}
.sk-modal-title{font-family:'Unbounded',sans-serif;font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.x-btn{
  background:var(--bg3);border:1px solid var(--border-lit);
  cursor:pointer;color:var(--sub);
  width:28px;height:28px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;transition:all .2s;
}
.x-btn:hover{color:var(--text);background:var(--border-lit)}
.sk-frame{width:100%;aspect-ratio:16/9}
.sk-frame iframe{width:100%;height:100%;border:none;display:block}
.sk-modal-foot{
  padding:10px 20px;border-top:1px solid var(--border-lit);
  font-family:'DM Mono',monospace;font-size:7px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
}

/* ─────────────────────────────────────
   GALLERY PAGES
───────────────────────────────────── */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 48px 24px}
.fbtn{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 16px;border:1px solid var(--border-lit);background:var(--card-bg);
  color:var(--sub);cursor:pointer;border-radius:20px;transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.fbtn:hover,.fbtn.on{
  border-color:var(--teal);color:var(--teal);
  background:var(--teal-dim);
  box-shadow:0 0 16px var(--teal-dim);
}
.masonry{column-count:3;column-gap:10px;padding:0 48px 60px}
.mi{break-inside:avoid;margin-bottom:10px;border-radius:10px;overflow:hidden;cursor:pointer;position:relative;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);transition:transform .3s,box-shadow .3s}
.mi:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.6)}
.mi img{width:100%;display:block;transition:transform .4s}
.mi:hover img{transform:scale(1.04)}
.mi-ph{
  background:linear-gradient(135deg,var(--bg3),var(--bg2));
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  color:var(--sub);font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;min-height:180px;
}
.m-ov{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,16,0.85) 0%,transparent 50%);
  opacity:0;transition:opacity .3s;
  display:flex;flex-direction:column;justify-content:flex-end;padding:14px;
}
.mi:hover .m-ov{opacity:1}
.m-ttl{font-family:'Unbounded',sans-serif;font-size:13px;font-weight:700;color:#fff;letter-spacing:-.01em}
.m-cat{font-family:'DM Mono',monospace;font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-top:4px}

/* LIGHTBOX */
.lb{
  display:none;position:fixed;inset:0;
  background:rgba(4,4,12,0.97);z-index:600;
  align-items:center;justify-content:center;
  backdrop-filter:blur(12px);
}
.lb.open{display:flex}
.lb-close{
  position:fixed;top:18px;right:20px;
  background:var(--bg3);border:1px solid var(--border-lit);
  cursor:pointer;color:var(--sub);font-size:20px;
  width:36px;height:36px;border-radius:8px;z-index:601;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.lb-close:hover{color:var(--text);background:var(--border-lit)}
.lb-prev,.lb-next{
  position:fixed;top:50%;transform:translateY(-50%);
  background:var(--bg3);border:1px solid var(--border-lit);
  color:var(--sub);font-size:20px;
  width:44px;height:44px;border-radius:8px;
  cursor:pointer;z-index:601;transition:all .2s;
  display:flex;align-items:center;justify-content:center;
}
.lb-prev:hover,.lb-next:hover{color:var(--text);border-color:var(--teal);box-shadow:0 0 16px var(--teal-dim)}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-inner{display:flex;gap:36px;align-items:flex-start;max-width:90vw}
.lb-img{max-height:82vh;max-width:60vw;object-fit:contain;display:block;border-radius:8px;box-shadow:0 20px 80px rgba(0,0,0,.8)}
.lb-meta{width:200px;flex-shrink:0;padding-top:8px}
.lb-title{
  font-family:'Unbounded',sans-serif;
  font-size:20px;font-weight:700;color:var(--text);
  line-height:1.1;margin-bottom:8px;letter-spacing:-.02em;
}
.lb-ctag{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.25em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.lb-desc{font-family:'Syne',sans-serif;font-size:14px;line-height:1.6;color:var(--sub)}
.lb-cnt{font-family:'DM Mono',monospace;font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:18px}

/* ─────────────────────────────────────
   CONTACT
───────────────────────────────────── */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:0 48px 60px}
.cform{display:flex;flex-direction:column;gap:18px}
.cf-field{display:flex;flex-direction:column;gap:7px}
.cf-lbl{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--sub)}
.cf-inp{
  background:var(--card-bg);border:1px solid var(--border-lit);border-radius:8px;
  padding:12px 14px;color:var(--text);
  font-family:'Syne',sans-serif;font-size:13px;outline:none;
  transition:border-color .2s,box-shadow .2s;width:100%;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.2);
}
.cf-inp:focus{border-color:var(--teal);box-shadow:inset 0 2px 8px rgba(0,0,0,0.2),0 0 16px var(--teal-dim)}
.cf-inp::placeholder{color:var(--dim)}
textarea.cf-inp{resize:vertical;min-height:100px}
.cf-submit{
  background:linear-gradient(135deg,var(--purple),var(--teal));
  border:none;color:var(--bg);
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  padding:14px 28px;cursor:pointer;align-self:flex-start;border-radius:8px;
  font-weight:700;
  box-shadow:0 4px 20px var(--glow-p);
  transition:transform .2s,box-shadow .2s;
}
.cf-submit:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--glow-p)}

.contact-right h3{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(28px,3.5vw,46px);font-weight:900;
  line-height:1.0;letter-spacing:-.03em;
  color:var(--text);margin-bottom:18px;
}
.contact-right h3 .hl{color:var(--teal);text-shadow:0 0 24px var(--glow-t)}
.contact-right p{font-family:'Syne',sans-serif;font-size:14px;line-height:1.7;color:var(--sub);margin-bottom:28px}
.clinks{display:flex;flex-direction:column;gap:10px}
.clink{
  display:flex;align-items:center;justify-content:space-between;
  text-decoration:none;color:var(--sub);
  padding:10px 14px;border-radius:8px;
  border:1px solid var(--border-lit);background:var(--card-bg);
  transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.clink:hover{color:var(--text);border-color:var(--teal);box-shadow:0 0 16px var(--teal-dim),0 4px 16px rgba(0,0,0,0.3);transform:translateY(-1px)}
.clink-lbl{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.18em;text-transform:uppercase}
.clink-handle{font-family:'DM Mono',monospace;font-size:8px;color:var(--dim)}
.clink:hover .clink-handle{color:var(--sub)}

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */
@media(max-width:1200px){
  .bento{grid-template-columns:1fr 1fr;padding-left:24px}
  .b-music{grid-column:1/3;grid-row:1}
  .b-art{grid-column:1/3;grid-row:2}
  .b-style{grid-column:1;grid-row:3}
  .b-fashion{grid-column:2;grid-row:3}
  .b-about{grid-column:1/3;grid-row:4}
  .b-contact{grid-column:1/3;grid-row:5}
  .b-art .bento-card{min-height:160px}
  .about-wrap,.music-wrap,.contact-wrap{grid-template-columns:1fr}
  .aside{position:static}
  .masonry{column-count:2}
}
@media(max-width:700px){
  :root{--sidebar:52px}
  .sidebar{width:52px;min-width:52px;padding:18px 10px}
  .sb-name,.sb-loc,.n span:last-child,.socials,.tog-lbl{display:none}
  .n{padding:12px;justify-content:center}
  .sb-top{margin-bottom:18px}
  .ph,.home-hero{padding-left:20px;padding-right:20px}
  .bento{padding:0 12px 12px}
  .about-wrap,.music-wrap,.contact-wrap,.p5-intro,.filters,.masonry{padding-left:20px;padding-right:20px}
  .home-grid{grid-template-columns:1fr}
  .masonry{column-count:1}
  .p5-grid{margin:0 20px 40px}
}