/* ═══════════════════════════════════════════════════════
   SARAH DOROTHY — style.css
   Grunge Pink · Y2K · Handmade · Responsive
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&family=Caveat:wght@400;600;700&family=Abril+Fatface&family=Righteous&display=swap');

/* ─── TOKENS ─── */
:root {
  --bg:          url('pic.jpg');
  --bg-dark:     url('kiss.jpg');
  --card:        rgba(255,248,252,0.90);
  --card-border: rgba(220,0,100,0.22);
  --text:        #1a0010;
  --text-muted:  #6b2045;
  --pink:        #e0006a;
  --pink-2:      #ff3399;
  --pink-glow:   rgba(224,0,106,0.28);
  --cream:       #fff5f9;
  --font-body:   'Space Grotesk', sans-serif;
  --font-mono:   'Space Mono', 'Courier New', monospace;
  --font-display:'Bebas Neue', sans-serif;
  --font-hand:   'Caveat', cursive;
  --font-abril:  'Abril Fatface', serif;
  --r:           8px;
  --r-lg:        16px;
  --border:      1px solid var(--card-border);
}

/* ─── DARK TOKENS ─── */
body.dark {
  --card:        rgba(14,3,10,0.90);
  --card-border: rgba(255,51,153,0.35);
  --text:        #fce8f2;
  --text-muted:  #e0a8c8;
  --pink:        #ff3399;
  --pink-2:      #ff6fc0;
  --pink-glow:   rgba(255,51,153,0.38);
  --cream:       #1a0a12;
}

/* ─── DARK: solid boxes, no blur, boosted text ─── */
body.dark .about-bio,
body.dark .stat-pill,
body.dark .skill-item,
body.dark .tools-section,
body.dark .project-card,
body.dark .edu-card,
body.dark .why-box,
body.dark .edu-aside,
body.dark .social-card,
body.dark .about-banner-wrap {
  background: rgba(14,3,10,0.92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dark nav {
  background: rgba(8,1,6,0.97) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Dark mode: make ALL text pop with subtle glow/shadow ── */
body.dark {
  text-shadow: 0 0 12px rgba(255,100,180,0.12);
}
/* Main body text — crisp white-pink */
body.dark .about-bio p,
body.dark .proj-desc,
body.dark .edu-body h3,
body.dark .sc-platform,
body.dark .pl-now-track,
body.dark .pl-name {
  color: #fce8f2;
  text-shadow: 0 1px 6px rgba(255,51,153,0.20);
}
/* Muted / small text — brighten + soft glow */
body.dark .text-muted,
body.dark .sp-label,
body.dark .skill-note,
body.dark .proj-tag,
body.dark .proj-tech span,
body.dark .edu-loc,
body.dark .edu-year-label,
body.dark .aside-label,
body.dark .aside-tags span,
body.dark .sc-handle,
body.dark .pl-artist,
body.dark .pl-num,
body.dark .pl-footer,
body.dark .footer-sig,
body.dark .footer-sub,
body.dark .tools-label,
body.dark .tool-tag,
body.dark .section-tag,
body.dark .page-subtitle,
body.dark .badge,
body.dark .gc-btn,
body.dark .mp-text {
  color: #e0a8c8 !important;
  text-shadow: 0 0 8px rgba(255,100,180,0.30);
}
/* Nav links */
body.dark .nav-links a {
  color: #e8c0d8;
  text-shadow: 0 0 6px rgba(255,51,153,0.15);
}
body.dark .nav-links a:hover,
body.dark .nav-links a.active-nav {
  color: var(--pink);
  text-shadow: 0 0 10px rgba(255,51,153,0.50);
}
/* Nav buttons */
body.dark #themeToggle,
body.dark #musicToggle,
body.dark .nav-pl-btn {
  color: #e0a8c8;
  text-shadow: 0 0 6px rgba(255,51,153,0.20);
}
/* Pink accent text — keep it glowing */
body.dark .pink,
body.dark .sp-num,
body.dark .skill-pct,
body.dark .proj-title,
body.dark .edu-school,
body.dark .eyebrow,
body.dark .hero-name {
  text-shadow: 0 0 14px rgba(255,51,153,0.45);
}
/* Mono tag borders brighten */
body.dark .badge,
body.dark .tool-tag,
body.dark .gc-btn,
body.dark .proj-tech span,
body.dark .aside-tags span {
  border-color: rgba(255,51,153,0.35) !important;
}
/* torn note */
body.dark .torn-note {
  background: rgba(50,5,25,0.95);
  color: #e8c0d8;
  text-shadow: 0 0 8px rgba(255,51,153,0.25);
}
/* Skill bar track brighter */
body.dark .bar {
  background: rgba(255,51,153,0.18);
}
/* Card borders glow in dark */
body.dark .skill-item,
body.dark .project-card,
body.dark .edu-card,
body.dark .social-card,
body.dark .stat-pill {
  border-color: rgba(255,51,153,0.28) !important;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

body {
  font-family: var(--font-body);
  background: var(--bg) repeat center/auto fixed;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  transition: color .3s, background .4s;
}
body.dark { background-image: var(--bg-dark); }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
img { max-width: 100%; display: block; }

/* ─── INK SPLATTERS ─── */
.ink-splat {
  position: absolute; pointer-events: none; border-radius: 50%;
  opacity: 0.04; z-index: 0;
  background: var(--pink);
  filter: blur(3px);
}
.s1 { width:180px;height:120px;top:5%;right:2%;transform:rotate(20deg);border-radius:60% 40% 55% 45%; }
.s2 { width:100px;height:140px;bottom:8%;left:1%;transform:rotate(-15deg);border-radius:40% 60% 45% 55%; }
.s3 { width:220px;height:100px;top:3%;left:1%;transform:rotate(10deg);border-radius:65% 35% 50% 50%; }
.s4 { width:130px;height:160px;bottom:5%;right:2%;transform:rotate(-25deg);border-radius:45% 55% 60% 40%; }
.s5 { width:160px;height:90px;top:4%;right:3%;transform:rotate(35deg);border-radius:55% 45% 40% 60%; }

/* ─── TORN PAPER NOTE ─── */
.torn-note {
  background: rgba(255,220,240,0.92);
  border: 1.5px solid rgba(220,0,100,0.2);
  padding: 10px 18px;
  border-radius: 2px 14px 2px 12px;
  font-family: var(--font-hand);
  font-size: 16px;
  color: #6b2045;
  margin-top: 14px;
  box-shadow: 2px 3px 14px var(--pink-glow);
  transform: rotate(-1.5deg);
  display: block;
  width: fit-content;
  max-width: 100%;
}

/* ─── LOADER ─── */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #07000e;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s ease, visibility .7s ease;
}
#loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.ld-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, transparent 0, transparent 3px,
    rgba(255,0,128,.04) 3px, rgba(255,0,128,.04) 6px);
}
.ld-box {
  position: relative;
  width: min(480px,90vw);
  padding: 48px 36px 40px;
  border: 1px solid rgba(255,51,153,.35);
  text-align: center;
  background: rgba(255,255,255,.02);
}
.ld-corner { position:absolute; width:14px; height:14px; border-color:#ff3399; border-style:solid; }
.ld-corner.tl { top:-1px;left:-1px;border-width:2px 0 0 2px; }
.ld-corner.tr { top:-1px;right:-1px;border-width:2px 2px 0 0; }
.ld-corner.bl { bottom:-1px;left:-1px;border-width:0 0 2px 2px; }
.ld-corner.br { bottom:-1px;right:-1px;border-width:0 2px 2px 0; }
.ld-sys { font-family:var(--font-mono);font-size:10px;letter-spacing:4px;color:rgba(255,51,153,.45);margin-bottom:26px; }
.ld-name {
  font-family:var(--font-display);font-size:clamp(28px,8vw,52px);
  color:#fff;letter-spacing:2px;margin-bottom:8px;min-height:56px;
  animation:ldGlitch 2.5s infinite;
}
@keyframes ldGlitch {
  0%,88%,100% { transform:translate(0);filter:none; }
  90% { transform:translate(-3px,1px);filter:hue-rotate(40deg); }
  93% { transform:translate(3px,-1px);filter:hue-rotate(-40deg); }
  96% { transform:translate(-1px,0);filter:none; }
}
.ld-sub { font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.3);letter-spacing:1.5px;margin-bottom:32px; }
.ld-track { width:100%;height:2px;background:rgba(255,51,153,.15);margin-bottom:10px;overflow:hidden; }
.ld-fill { height:100%;width:0;background:linear-gradient(90deg,#e0006a,#ff9fd4,#e0006a);background-size:200%;animation:shimmer 1.4s linear infinite;box-shadow:0 0 12px rgba(255,51,153,.7);transition:width .08s linear; }
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }
.ld-pct { font-family:var(--font-mono);font-size:11px;color:rgba(255,51,153,.55);letter-spacing:2px; }
.ld-deco { font-size:13px;color:rgba(255,51,153,.25);margin-top:20px;letter-spacing:8px; }
.ld-star { position:absolute;color:#ff3399;font-size:20px;animation:ldStarPulse 2s ease-in-out infinite;opacity:.4; }
@keyframes ldStarPulse { 0%,100%{opacity:.2;transform:scale(1)} 50%{opacity:.7;transform:scale(1.3)} }

/* ─── MUSIC PROMPT ─── */
#musicPrompt {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 800;
  background: var(--card);
  border: var(--border);
  border-radius: 40px;
  padding: 10px 18px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  box-shadow: 0 4px 24px var(--pink-glow);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s;
  opacity: 0;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
#musicPrompt.show { opacity:1; transform:translateX(-50%) translateY(0); }
#musicPrompt.hide { opacity:0; transform:translateX(-50%) translateY(80px); }
.mp-icon { font-size:16px; color:var(--pink); animation:bounce .8s infinite; flex-shrink:0; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.mp-text { color:var(--text-muted); font-size:12px; }
#mpYes, #mpNo {
  padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  transition: transform .2s, background .2s; flex-shrink: 0;
}
#mpYes { background:var(--pink); color:#fff; }
#mpNo { background:transparent; border:1px solid var(--card-border); color:var(--text-muted); }
#mpYes:hover, #mpNo:hover { transform:scale(1.05); }

/* ─── PLAYLIST WIDGET ─── */
.playlist-widget {
  position: fixed; top: 60px; right: 16px;
  z-index: 700;
  width: min(280px,90vw);
  background: var(--card);
  border: var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px var(--pink-glow);
  backdrop-filter: blur(16px);
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px) scale(0.96);
  transition: opacity .35s, transform .35s cubic-bezier(.34,1.56,.64,1), visibility .35s;
}
.playlist-widget.show { opacity:1; visibility:visible; pointer-events:all; transform:none; }
body.dark .playlist-widget { background:rgba(14,3,10,0.97) !important; }

.pl-header { padding:12px 16px 8px; border-bottom:var(--border); text-align:center; }
.pl-title-label { font-family:var(--font-mono); font-size:11px; color:var(--pink); letter-spacing:2px; text-transform:uppercase; }

.pl-now { display:flex; align-items:center; gap:12px; padding:12px 16px; }
.pl-vinyl {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9fd4, #e0006a 60%, #1a0010); /* fallback */
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  animation: spin 4s linear infinite;
  animation-play-state: paused;
  box-shadow: 0 0 14px var(--pink-glow);
  position: relative;
}

.pl-vinyl.spinning { animation-play-state:running; }
.pl-vinyl-inner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
  z-index: 1;
}
@keyframes spin { to{transform:rotate(360deg)} }
.pl-now-track { font-size:13px; font-weight:600; color:var(--text); line-height:1.3; }
.pl-now-artist { font-size:11px; color:var(--pink); margin-top:2px; font-family:var(--font-mono); }

.pl-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 10px;
  height: 54px; /* locks the row height so nothing shifts */
}
.pl-ctrl-btn {
  background:transparent; border:var(--border);
  border-radius:50%; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--text-muted);
  transition:background .2s, color .2s, transform .2s, border-color .2s;
}
.pl-ctrl-btn:hover { border-color:var(--pink); color:var(--pink); transform:scale(1.1); }
.pl-play-main {
  width: 38px;
  height: 38px;
  min-width: 38px;
  font-size: 14px;
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pl-play-main:hover { background:var(--pink-2); border-color:var(--pink-2); }

.pl-list { max-height:200px; overflow-y:auto; border-top:var(--border); }
.pl-list::-webkit-scrollbar { width:3px; }
.pl-list::-webkit-scrollbar-track { background:transparent; }
.pl-list::-webkit-scrollbar-thumb { background:var(--card-border); border-radius:2px; }

.pl-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; cursor:pointer;
  transition:background .15s;
  border-bottom:1px solid rgba(220,0,100,0.07);
}
.pl-item:hover { background:rgba(224,0,106,0.07); }
.pl-item.pl-active { background:rgba(224,0,106,0.1); }
.pl-item.pl-active .pl-num,
.pl-item.pl-active .pl-name { color:var(--pink); }
.pl-num { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); min-width:20px; }
.pl-info { flex:1; min-width:0; }
.pl-name { font-size:12px; font-weight:600; color:var(--text); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-artist { font-size:10px; color:var(--text-muted); font-family:var(--font-mono); display:block; }
.pl-play-icon { font-size:10px; color:var(--text-muted); opacity:0; }
.pl-item:hover .pl-play-icon,
.pl-item.pl-active .pl-play-icon { opacity:1; color:var(--pink); }
.pl-footer { text-align:center; padding:8px; font-size:10px; color:var(--text-muted); border-top:var(--border); font-family:var(--font-mono); letter-spacing:1px; }

/* ─── NAV ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: rgba(255,248,252,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--border);
  gap: 8px;
  min-height: 54px;
}

.nav-logo {
  font-family: var(--font-display); font-size: 22px; letter-spacing: 1px;
  cursor: pointer; user-select: none; flex-shrink: 0;
  color: var(--text);
  transition: color .2s;
}
.nav-logo:hover { color: var(--pink); }
.nav-logo .dot { color: var(--pink); }

.nav-links { display:flex; gap:2px; flex:1; justify-content:center; flex-wrap:nowrap; }
.nav-links a {
  font-size: 11px; font-weight: 500; letter-spacing: .3px;
  padding: 5px 8px; border-radius: 20px;
  color: var(--text-muted);
  transition: background .2s, color .2s;
  cursor: pointer; white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active-nav { background:rgba(224,0,106,.1); color:var(--pink); }

.nav-right { display:flex; align-items:center; gap:5px; flex-shrink:0; }

#themeToggle, #musicToggle, .nav-pl-btn {
  background: transparent; border: var(--border);
  padding: 4px 8px; border-radius: var(--r);
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  color: var(--text-muted);
  transition: border-color .2s, transform .2s, color .2s;
  white-space: nowrap;
  width: 52px;          /* fixed width so ▶ and ⏸ take the same space */
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#themeToggle:hover, #musicToggle:hover, .nav-pl-btn:hover {
  border-color: var(--pink); color: var(--pink); transform: translateY(-2px);
}
#musicToggle.playing {
  color: var(--pink); border-color: var(--pink);
  animation: musicPulse 1s ease-in-out infinite;
}
@keyframes musicPulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 10px var(--pink-glow)} }

.nav-hamburger {
  display: none; font-size: 20px; padding: 4px 8px;
  border: var(--border); border-radius: var(--r);
  color: var(--text);
  transition: border-color .2s; flex-shrink: 0;
}
.nav-hamburger:hover { border-color: var(--pink); }

/* ─── PAGES WRAPPER ─── */
#pagesWrapper { padding-top: 54px; min-height: 100vh; position: relative; }

/* ─── PAGE BASE ─── */
.page {
  display: none;
  min-height: calc(100vh - 54px);
  position: relative;
  padding: 32px 16px 60px;
  overflow: hidden;
}
.page.active { display: block; }
.page.page-enter { animation: pageIn .45s cubic-bezier(.22,1,.36,1) both; }
.page.page-exit  { animation: pageOut .3s ease both; }
@keyframes pageIn  { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes pageOut { from{opacity:1} to{opacity:0} }

/* ─── BIG BG WORD ─── */
.page-bg-word {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--font-display);
  font-size: clamp(60px,18vw,200px);
  color: var(--pink); opacity: .04;
  white-space: nowrap; pointer-events: none;
  user-select: none; letter-spacing: 8px; z-index: 0;
}

/* ─── DECO STARS ─── */
.deco-star {
  position: absolute; color: var(--pink);
  animation: starFloat 3s ease-in-out infinite;
  pointer-events: none; opacity: .3; z-index: 0;
}
@keyframes starFloat { 0%,100%{transform:translateY(0)rotate(0deg)} 50%{transform:translateY(-8px)rotate(15deg)} }
.deco-squiggle {
  position: absolute; font-family: var(--font-hand); font-size: 18px;
  color: var(--pink); opacity: .18; pointer-events: none; letter-spacing: 4px;
}
.deco-squiggle.top-left    { top:60px; left:16px; }
.deco-squiggle.bottom-right{ bottom:60px; right:16px; }

/* ─── PAGE INNER / HEADER ─── */
.page-inner { position:relative; z-index:1; max-width:900px; margin:0 auto; }
.page-header { margin-bottom:28px; }
.section-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
  color: var(--pink); opacity: .8; display: block; margin-bottom: 6px;
}
.page-title {
  font-family: var(--font-display);
  font-size: clamp(36px,8vw,72px);
  letter-spacing: 1px; line-height: 1;
  color: var(--text); margin-bottom: 4px;
}
.title-accent { color: var(--pink); }
.page-subtitle { font-family:var(--font-hand); font-size:17px; color:var(--text-muted); }

/* ═══════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════ */

/* Banner */
.about-banner {
  width: 100%; height: clamp(80px,12vw,150px);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  position: relative; z-index: 1;
}
.about-banner img {
  width: 100%; height: 100%; object-fit: cover;
  image-rendering: pixelated;
}
.about-banner::before,
.about-banner::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, #e0006a 0 6px, transparent 6px 12px);
  opacity: .5; z-index: 2;
}
.about-banner::before { top: 0; }
.about-banner::after  { bottom: 0; }

/* Card that wraps banner + content */
.about-banner-wrap {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto;
  border: var(--border); border-radius: var(--r-lg);
  overflow: visible;
  background: var(--card);
  backdrop-filter: blur(6px);
}

.about-layout {
  position: relative; z-index: 1;
  padding: 24px 20px 24px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: start;
}

/* Avatar overlaps banner */
.about-left {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  margin-top: -70px;
}
.about-img-wrap { position: relative; display: inline-block; }
.about-photo {
  width: clamp(110px,18vw,170px);
  height: clamp(110px,18vw,170px);
  object-fit: cover; border-radius: 50%;
  border: 3px solid var(--pink);
  animation: float 3.5s ease-in-out infinite;
  filter: contrast(105%) saturate(110%);
  position: relative; z-index: 2;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.about-ring {
  position: absolute; border-radius: 50%; border: 1px dashed var(--pink);
  opacity: .3; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.about-ring.r1 { width:calc(100% + 18px); height:calc(100% + 18px); animation:spinRing 18s linear infinite; }
.about-ring.r2 { width:calc(100% + 36px); height:calc(100% + 36px); animation:spinRing 30s linear infinite reverse; border-style:dotted; }
@keyframes spinRing { to{transform:translate(-50%,-50%)rotate(360deg)} }
.photo-label {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-hand); font-size: 14px;
  color: var(--text-muted); white-space: nowrap;
}

.stat-pills { display:flex; flex-direction:column; gap:7px; width:100%; }
.stat-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: var(--border);
  border-radius: var(--r); padding: 7px 12px;
}
.sp-num { font-family:var(--font-display); font-size:18px; color:var(--pink); line-height:1; }
.sp-label { font-size:10px; color:var(--text-muted); line-height:1.3; }

/* Right col */
.about-right { position: relative; padding-top: 8px; }
.eyebrow { font-family:var(--font-mono); font-size:10px; color:var(--pink); letter-spacing:3px; margin-bottom:8px; opacity:.85; }
.hero-name {
  font-family: var(--font-display);
  font-size: clamp(28px,4.5vw,52px);
  letter-spacing: 1px; line-height: 1.05;
  margin-bottom: 16px;
  color: var(--text);
  position: relative;
  word-break: break-word;
}
.name-alt { color: var(--pink); }

/* Glitch — hover only */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute;
  left: 0; top: 0; width: 100%; overflow: hidden; opacity: 0;
  transition: opacity .1s; pointer-events: none;
}
.glitch:hover::before { opacity:.65; color:var(--pink); animation:glTop .4s steps(2) infinite; }
.glitch:hover::after  { opacity:.45; color:#00eeff;    animation:glBot .4s steps(2) .1s infinite; }
@keyframes glTop {
  0%  { clip-path:polygon(0 0,100% 0,100% 35%,0 35%);  transform:translate(-2px,-1px); }
  50% { clip-path:polygon(0 10%,100% 10%,100% 50%,0 50%); transform:translate(2px,1px); }
  100%{ clip-path:polygon(0 0,100% 0,100% 40%,0 40%);  transform:translate(-1px,0); }
}
@keyframes glBot {
  0%  { clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%); transform:translate(2px,2px); }
  50% { clip-path:polygon(0 50%,100% 50%,100% 80%,0 80%);   transform:translate(-2px,-1px); }
  100%{ clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%); transform:translate(1px,0); }
}

.typing-wrap { display:flex; align-items:center; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.typing-cursor { font-family:var(--font-mono); color:var(--pink); font-size:16px; animation:blink .7s infinite; flex-shrink:0; }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

.typing {
  font-family: var(--font-mono); font-size: 11px;
  color: #fff;
  white-space: nowrap; overflow: hidden;
  letter-spacing: .5px;
  background: rgba(160,0,70,0.85);
  border: 1px solid rgba(255,51,153,.4);
  border-radius: var(--r); padding: 6px 12px;
  border-right: 2px solid var(--pink-2);
  max-width: 100%;
}
body.dark .typing {
  background: rgba(100,0,50,0.82);
  color: #ffe0f0;
  text-shadow: 0 0 6px rgba(255,51,153,.3);
}

.about-bio {
  background: var(--card); border: var(--border);
  border-radius: var(--r-lg); padding: 14px 18px;
  margin-bottom: 14px;
  font-size: 13px; line-height: 1.7;
  color: var(--text);
}
.about-bio strong { color: var(--pink); }

.badge-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.badge {
  font-size: 11px; background: rgba(224,0,106,.08);
  border: var(--border); border-radius: 20px;
  padding: 4px 10px; color: var(--text-muted);
  transition: background .2s, transform .2s, color .2s;
}
.badge:hover { background:rgba(224,0,106,.18); transform:translateY(-2px); color:var(--pink); }

/* ═══════════════════════════════════════
   SKILLS PAGE
═══════════════════════════════════════ */
.skills-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 28px;
}
.skill-item {
  background: var(--card); border: var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
  transition: border-color .2s, transform .2s;
}
.skill-item:hover { border-color:var(--pink); transform:translateY(-2px); }
.skill-top { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.skill-name { flex:1; font-size:13px; font-weight:600; color:var(--text); }
.skill-pct { font-family:var(--font-mono); font-size:11px; color:var(--pink); letter-spacing:1px; }
.bar { width:100%; height:3px; background:rgba(224,0,106,.12); border-radius:2px; }
.bar span {
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--pink), var(--pink-2));
  border-radius:2px;
  box-shadow:0 0 8px var(--pink-glow);
  transition:width 1.4s cubic-bezier(.25,1,.5,1);
}
.skill-note { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); margin-top:6px; letter-spacing:.5px; }

.tools-section { background:var(--card); border:var(--border); border-radius:var(--r-lg); padding:18px 20px; }
.tools-label { font-family:var(--font-hand); font-size:17px; color:var(--text-muted); margin-bottom:10px; }
.tools-row { display:flex; flex-wrap:wrap; gap:8px; }
.tool-tag {
  font-family:var(--font-mono); font-size:11px;
  background:rgba(224,0,106,.08); border:var(--border);
  border-radius:var(--r); padding:4px 10px;
  color:var(--text-muted); letter-spacing:.5px;
  transition:background .2s, color .2s, transform .15s;
}
.tool-tag:hover { background:var(--pink); color:#fff; transform:scale(1.05); }

/* ═══════════════════════════════════════
   PROJECTS PAGE
═══════════════════════════════════════ */
.projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.project-card {
  background: var(--card); border: var(--border);
  border-radius: var(--r-lg); padding: 24px 20px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.project-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--pink-glow),transparent);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.project-card:hover { border-color:var(--pink); transform:translateY(-4px); box-shadow:0 10px 30px var(--pink-glow); }
.project-card:hover::after { opacity:1; }

.proj-number { font-family:var(--font-display); font-size:42px; color:var(--pink); opacity:.15; line-height:1; position:absolute; top:14px; right:18px; }
.proj-tag { font-family:var(--font-mono); font-size:10px; color:var(--pink); letter-spacing:1.5px; opacity:.8; }
.proj-title { font-size:19px; font-weight:700; letter-spacing:-.3px; color:var(--text); }
.proj-desc { font-size:13px; color:var(--text-muted); line-height:1.65; flex:1; }
.proj-tech { display:flex; flex-wrap:wrap; gap:5px; }
.proj-tech span {
  font-family:var(--font-mono); font-size:10px;
  background:rgba(224,0,106,.07); border:var(--border);
  border-radius:3px; padding:3px 7px; color:var(--text-muted);
}
.proj-link {
  display:inline-block; font-family:var(--font-mono); font-size:12px;
  color:var(--pink); border:1px solid var(--pink);
  padding:6px 12px; border-radius:var(--r);
  transition:background .2s, color .2s; margin-top:4px; cursor:pointer; width:fit-content;
}
.proj-link:hover { background:var(--pink); color:#fff; }
.proj-link.muted { opacity:.4; pointer-events:none; }
.project-wip { border-style:dashed; opacity:.7; align-items:center; text-align:center; min-height:160px; justify-content:center; }
.wip-num { position:static; font-size:30px; opacity:.3; }
.wip-deco { font-family:var(--font-display); font-size:20px; color:var(--pink); letter-spacing:6px; opacity:.5; }

/* ═══════════════════════════════════════
   GALLERY PAGE
═══════════════════════════════════════ */
.gallery-controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.gc-btn {
  background:transparent; border:var(--border);
  padding:6px 14px; border-radius:20px;
  font-family:var(--font-mono); font-size:11px;
  color:var(--text-muted); letter-spacing:.5px;
  transition:all .2s; cursor:pointer;
}
.gc-btn:hover, .gc-btn.active { background:var(--pink); border-color:var(--pink); color:#fff; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
  grid-auto-rows: 10px; gap: 10px;
}
.gallery img {
  width:100%; border-radius:var(--r-lg);
  cursor:pointer; border:var(--border);
  filter:saturate(.95)contrast(1.02);
  transition:transform .3s, filter .3s, border-color .2s, box-shadow .3s;
}
.gallery img:hover {
  transform:scale(1.04); filter:saturate(1.2)contrast(1.05);
  border-color:var(--pink); box-shadow:0 6px 22px var(--pink-glow);
}

/* ═══════════════════════════════════════
   EDUCATION PAGE
═══════════════════════════════════════ */
.edu-inner { max-width:640px; }
.edu-timeline { margin-bottom:24px; }
.edu-entry { position:relative; padding-left:24px; }
.edu-dot {
  position:absolute; left:0; top:20px;
  width:12px; height:12px; border-radius:50%;
  background:var(--pink); box-shadow:0 0 10px var(--pink-glow);
}
.edu-year-label { font-family:var(--font-mono); font-size:11px; color:var(--pink); letter-spacing:1.5px; margin-bottom:8px; }
.edu-card {
  background:var(--card); border:var(--border);
  border-radius:var(--r-lg); padding:18px 20px;
  display:flex; align-items:center; gap:16px;
}
.edu-body h3 { font-size:15px; font-weight:700; margin-bottom:4px; color:var(--text); }
.edu-school { font-size:13px; color:var(--pink); }
.edu-loc { font-size:12px; color:var(--text-muted); margin-top:4px; }

.why-box {
  background:var(--card); border:var(--border); border-radius:var(--r-lg);
  padding:14px 18px; margin-bottom:18px;
}
.why-box summary {
  font-family:var(--font-hand); font-size:17px;
  color:var(--pink); cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:8px;
}
.why-box summary::-webkit-details-marker { display:none; }
.why-box summary::before { content:'▶'; font-size:10px; transition:transform .2s; font-family:initial; }
details[open] .why-box summary::before { transform:rotate(90deg); }
.why-answer { margin-top:10px; padding-left:16px; }
.caveat-text { font-family:var(--font-hand); font-size:19px; color:var(--text-muted); }

.edu-aside { background:rgba(224,0,106,.05); border:var(--border); border-radius:var(--r-lg); padding:14px 18px; }
.aside-label { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; color:var(--pink); margin-bottom:8px; opacity:.8; }
.aside-tags { display:flex; flex-wrap:wrap; gap:8px; }
.aside-tags span { font-size:12px; background:var(--card); border:var(--border); border-radius:20px; padding:4px 12px; color:var(--text-muted); }

/* ═══════════════════════════════════════
   SOCIALS PAGE
═══════════════════════════════════════ */
.socials-inner { text-align:center; }
.socials-inner .page-header { text-align:left; }
.social-cards { display:flex; flex-direction:column; gap:14px; max-width:440px; margin:0 auto 28px; }
.social-card {
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:var(--border);
  border-radius:var(--r-lg); padding:18px 20px;
  transition:border-color .2s, transform .2s, box-shadow .2s;
  color:var(--text); cursor:pointer;
}
.social-card:hover { border-color:var(--pink); transform:translateX(5px); box-shadow:0 4px 20px var(--pink-glow); }
.sc-icon {
  font-family:var(--font-display); font-size:14px; letter-spacing:1px;
  background:var(--pink); color:#fff;
  width:40px; height:40px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sc-info { flex:1; text-align:left; }
.sc-platform { font-size:14px; font-weight:700; color:var(--text); }
.sc-handle { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-top:2px; }
.sc-arrow { font-size:20px; color:var(--pink); }

.socials-note { font-family:var(--font-hand); font-size:19px; color:var(--text-muted); margin-bottom:28px; }
.bebas-text { font-family:var(--font-display); font-size:1.1em; letter-spacing:.5px; }

/* ─── FOOTER ─── */
footer { text-align:center; padding:24px 20px 16px; border-top:var(--border); margin-top:20px; }
.footer-sig { font-size:14px; color:var(--text-muted); margin-bottom:4px; }
.footer-sub { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); opacity:.5; margin-bottom:8px; }
.footer-stars { color:var(--pink); letter-spacing:8px; opacity:.4; font-size:13px; }

/* ─── MODAL ─── */
.modal { position:fixed; inset:0; z-index:700; display:none; align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(8px); }
.modal-close {
  position:absolute; top:16px; right:18px; z-index:2;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; width:36px; height:36px; border-radius:50%;
  font-size:14px; display:flex; align-items:center; justify-content:center;
  transition:background .2s; cursor:pointer;
}
.modal-close:hover { background:rgba(255,51,153,.5); }
#modalImg {
  position:relative; z-index:1;
  max-width:min(90vw,900px); max-height:88vh;
  border-radius:var(--r-lg); border:1px solid rgba(255,51,153,.4);
  animation:modalPop .3s cubic-bezier(.34,1.56,.64,1) both;
  object-fit:contain;
}
@keyframes modalPop { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }

/* ─── SPARKLES ─── */
.sparkle {
  position: fixed; pointer-events: none; z-index: 600;
  border-radius: 50%;
  animation: sparkleFade 0.9s ease-out forwards;
}
.sparkle.dot {
  background: radial-gradient(circle, #fff 0%, var(--pink) 60%, transparent 100%);
  box-shadow: 0 0 6px 2px var(--pink);
}
.sparkle.star {
  background: var(--pink-2);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  box-shadow: 0 0 8px 2px var(--pink-glow);
  filter: brightness(1.4);
}
.sparkle.ring {
  background: transparent;
  border: 2px solid var(--pink-2);
  box-shadow: 0 0 8px 2px var(--pink-glow), inset 0 0 4px var(--pink);
}
@keyframes sparkleFade {
  0%   { opacity:1; transform:scale(1.2) translateY(0); }
  40%  { opacity:.9; }
  100% { opacity:0; transform:scale(0.1) translateY(-28px); }
}

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET  641–900px
═══════════════════════════════════════ */
@media (min-width:641px) and (max-width:900px) {
  .about-layout {
    grid-template-columns: 150px 1fr;
    gap: 18px;
    padding: 20px 18px 20px;
  }
  .about-left { margin-top: -60px; }
  .about-photo { width: 130px; height: 130px; }
  .stat-pills { gap: 6px; }
  .projects-grid { grid-template-columns: 1fr 1fr; }
  .skills-grid   { grid-template-columns: 1fr 1fr; }
  .playlist-widget { right: 12px; width: 260px; }
  .nav-links a { font-size: 10px; padding: 4px 6px; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE  ≤640px
═══════════════════════════════════════ */
@media (max-width:640px) {

  /* Nav — hamburger layout */
  nav {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: nowrap;
    min-height: 52px;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed; top: 52px; left: 0; right: 0;
    background: rgba(255,248,252,.97);
    border-bottom: var(--border);
    padding: 10px 14px;
    gap: 2px;
    z-index: 490;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
  }
  body.dark .nav-links { background: rgba(8,1,6,.97); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 14px; border-radius: var(--r); font-size: 14px; }
  .nav-hamburger { display: block; }
  .nav-pl-btn { font-size: 10px; padding: 4px 6px; }
  #themeToggle  { font-size: 10px; padding: 4px 6px; }
  #musicToggle  { font-size: 12px; padding: 4px 7px; }

  #pagesWrapper {
  padding-top: 54px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;  /* already there probably */
  overflow-y: hidden;  /* ADD THIS */
  }
  .page { padding: 20px 12px 50px; }
  .page-bg-word { font-size: clamp(50px,20vw,90px); }

  /* About — single column stacked */
  .about-banner-wrap { margin: 0; border-radius: var(--r); }
  .about-banner { height: 90px; border-radius: var(--r) var(--r) 0 0; }

  .about-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 16px 14px 20px;
  }
  .about-left {
    flex-direction: row;
    align-items: flex-end;
    margin-top: -55px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .about-img-wrap { flex-shrink: 0; }
  .about-photo { width: 110px; height: 110px; }
  .about-ring.r2 { display: none; }
  .photo-label { font-size: 12px; bottom: -22px; }

  .stat-pills {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
  }
  .stat-pill {
    flex: 1;
    min-width: 100px;
    padding: 6px 10px;
  }
  .sp-num { font-size: 16px; }
  .sp-label { font-size: 9px; }

  .about-right { margin-top: 40px; }
  .hero-name { font-size: clamp(26px,7vw,40px); margin-bottom: 12px; }
  .typing { font-size: 10px; padding: 5px 10px; white-space: normal; word-break: break-word; }

  /* Skills */
  .skills-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Projects */
  .projects-grid { grid-template-columns: 1fr; }

  /* Gallery */
  .gallery { grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 8px; }

  /* Education */
  .edu-inner { max-width: 100%; }
  .edu-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }

  /* Socials */
  .social-cards { max-width: 100%; }
  .social-card  { padding: 14px 16px; gap: 10px; }
  .social-card:hover { transform: none; }

  /* Decorative */
  .deco-squiggle { display: none; }
  .ink-splat     { display: none; }

  /* Playlist */
  .playlist-widget { right: 8px; left: 8px; width: auto; top: 56px; }

  /* Music prompt */
  #musicPrompt {
    font-size: 11px; padding: 8px 14px; gap: 7px;
    white-space: normal; flex-wrap: wrap;
    justify-content: center; border-radius: 16px;
    bottom: 14px;
  }
}

/* ─── Very small phones ─── */
@media (max-width:380px) {
  .page-title  { font-size: 32px; }
  .hero-name   { font-size: 24px; }
  .nav-links a { font-size: 13px; }
  .stat-pill   { min-width: 90px; }
  .about-photo { width: 90px; height: 90px; }
  .about-left  { margin-top: -45px; }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  .deco-star, .about-photo, .about-ring, .sparkle { animation: none; }
  .page.page-enter, .page.page-exit { animation: none; }
}

/* ─── RUNNING CAT ─── */
#runningCat {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9000;
  pointer-events: none;
  animation: catRun 15s linear infinite;
}

#runningCat img {
  width: 75px;
  height: auto;
  display: block;
}

@keyframes catRun {
  0%   { transform: translateX(-80px) scaleX(1); }
  45%  { transform: translateX(100vw) scaleX(1); }
  50%  { transform: translateX(100vw) scaleX(-1); }
  95%  { transform: translateX(-80px) scaleX(-1); }
  100% { transform: translateX(-80px) scaleX(1); }
}