:root{
  --bg: #e0edf5;
  --beige: #091727;
  --accent: #275988; /* warm brown accent */
  --accent-dark: #2f56aa;
  --text: #162747;
  --muted: #2a3069;
  --card: #6491c0;
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* HAMBURGER BUTTON (top-left) */
.hamburger{
  position:fixed;
  left:12px;
  top:12px;
  z-index:1400;
  background:transparent;
  border:0;
  font-size:20px;
  color:var(--bg);
  cursor:pointer;
  padding:6px 8px;
  border-radius:6px;
  transition: left 220ms ease;
}

/* When sidebar is open, move hamburger to the right edge of the sidebar */
#sidebar.open ~ .hamburger,
.hamburger.move-right {
  left:238px;
}

/* SIDEBAR */
#sidebar{
  position:fixed;
  left:0; top:0; bottom:0;
  width:72px; /* collapsed width - only icon area visible */
  background:var(--beige);
  z-index:1200;
  overflow:hidden;
  transition: width 220ms ease, box-shadow 220ms ease;
  display:flex;
  align-items:flex-start;
  padding-top:22px;
}

/* Expanded */
#sidebar.open{
  width:220px;
  box-shadow: 6px 0 24px rgba(0,0,0,0.06);
}

/* inner area */
.sidebar-inner{ width:100%; padding:0 12px; }
.logo h2{ font-family:"Montserrat",sans-serif; font-weight:900; font-size:18px; color:var(--bg); line-height:1; margin:0 0 12px 0; letter-spacing:0.6px; }

/* links */
.sidebar-links{ list-style:none; padding:0; margin:0; }
.sidebar-links li{ margin:12px 0; }
.sidebar-links a{ color:var(--bg); text-decoration:none; display:block; padding:8px 6px; font-weight:700; border-radius:6px; }
.sidebar-links a:hover{ background:rgba(0,0,0,0.03); color:var(--accent-dark); }

/* collapsed state: hide text until expanded */
#sidebar.collapsed .logo h2,
#sidebar.collapsed .sidebar-links a{
  opacity:0;
  transform:translateX(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}
#sidebar.open .logo h2,
#sidebar.open .sidebar-links a{
  opacity:1;
  transform:none;
  transition: opacity 200ms ease, transform 200ms ease;
}

/* PAGE WRAPPER (center column) */
#page-wrapper{
  max-width:880px;
  margin:0 auto;
  padding:28px 20px;
}

/* sections baseline */
.center{
  max-width:820px;
  margin:0 auto;
  padding-top:12px;
  padding-bottom:12px;
}

/* About */
.about-inner{ text-align:center; }

/* ABOUT IMAGE stack: larger circle + liquify pseudo */
.about-img-container { margin: 0 auto 8px; width:180px; height:180px; display:flex; align-items:center; justify-content:center; }
.img-stack { position:relative; width:180px; height:180px; }
.img-stack img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

/* back image is slightly larger to reveal when front mask contracts */
.img-back { transform: scale(1.12); transition: transform 280ms cubic-bezier(.2,.9,.2,1), filter 220ms ease; filter: none; }
/* front image is the circular mask that sits above; will shrink via clip-path on hover */
.img-front { z-index:3; box-shadow: 0 10px 24px rgba(0,0,0,0.08); border:4px solid rgba(255, 255, 255, 0); transition: clip-path 260ms cubic-bezier(.2,.9,.2,1), transform 260ms ease; }

/* initial circular mask (100% circle) */
.img-front { clip-path: circle(50% at 50% 50%); }

/* hovered state: front contracts so back shows more; also subtle scale */
.img-stack:hover .img-front { clip-path: circle(38% at 50% 50%); transform: translateZ(0.01px); }
.img-stack:hover .img-back { transform: scale(1.15); }

/* apply liquify filter to back image when hovering (JS will animate turbulence) */
.img-stack:hover .img-back { filter: url(#liquify-filter); }

/* gradient name */
.gradient{ font-family:"Montserrat",sans-serif; font-weight:800; font-size:36px; color:var(--accent); margin:14px 0; letter-spacing:0.6px; }
.about-social-container{ list-style:none; display:flex; gap:20px; justify-content:center; padding:0; margin:8px 0 12px; }
.about-social-container li{ display:flex; gap:8px; align-items:center; color:var(--muted); font-weight:700; }
.about-social-container img{ width:18px; height:18px; opacity:0.95; }

/* Links: theme colors (warm browns) */
a { color:var(--muted); text-decoration:none; }
a:hover { color:var(--beige); text-decoration:underline; }

/* BIO & QUOTE */
.bio{ color:var(--muted); line-height:1.6; font-size:15px; max-width:760px; margin:0 auto 10px; text-align:justify; }
.current-quote{
  max-width:340px; margin:14px auto; padding:12px 14px; border-radius:12px; background:rgb(154, 180, 236);
  box-shadow:0 18px 36px rgba(0,0,0,0.06); font-style:italic; color:var(--muted);
}
.cv-actions {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cv-btn {
  font-family: inherit;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
  border-radius: 14px; /* soft rounded rectangle */
  text-decoration: none;
  transition: all 0.25s ease;
  letter-spacing: 0.2px;
}
/* Extra breathing room below the CV buttons */
.cv-actions {
  margin-bottom: 3.5rem;
}

/* Optional: ensure the whole about section feels less cramped */
#about {
  padding-bottom: 4rem;
}

/* View CV — soft card style */
.cv-btn.outline {
  color: var(--text);
  background: rgba(100, 144, 192, 0); /* card-like */
  border: 3px solid rgba(22, 39, 71, 0.15);
}

.cv-btn.outline:hover {
  background: rgba(100, 145, 192, 0.4);
  transform: translateY(-1px);
}

/* Download CV — slightly emphasized but still subtle */
.cv-btn.solid {
  color: var(--text);
  background: rgba(71, 110, 218, 0.45);
  border: 1px solid rgba(22, 39, 71, 0);
}

.cv-btn.solid:hover {
  background: rgba(100, 145, 192, 0.65);
  transform: translateY(-1px);
}

/* SKILL GRID (plain text now) */
.skill-grid{ list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px 26px; padding:0; margin:8px 0 20px; text-align:left; }
.skill-grid li{ position:relative; padding-left:12px; color:var(--muted); font-weight:700; font-size:15px; line-height:1.6; }
.skill-grid li::before{ content:"•"; position:absolute; left:0; top:0; color:var(--accent); font-weight:900; }

/* PROJECTS single column cards (centered) */
.project-container.single-column{ display:flex; flex-direction:column; gap:18px; align-items:center; margin-top:6px; }
.repository-card{ width:360px; background:var(--text); border-radius:10px; padding:16px; box-shadow:0 10px 24px rgba(0,0,0,0.04); }
.repository-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.repository-head h3{ margin:0; font-family:"Montserrat",sans-serif; font-weight:700; font-size:16px; color:var(--bg); }
.repository-card p{ margin:0 0 10px 0; color:var(--bg); line-height:1.6; font-size:13px; }
.tags{ color:var(--bg); font-weight:700; font-size:13px; }
a.ext {
  color: #ffffff;
}

/* more repos link */
.more-repo{ margin-top:10px; font-weight:700; color:var(--accent); }

/* lists */
.compact-list, .extras-list{ list-style:disc; margin-left:1.1rem; color:var(--muted); }

/* headings */
h2{ font-family:"Montserrat",sans-serif; font-weight:900; font-size:28px; color:var(--text); margin:8px 0; }
h3{ font-family:"Montserrat",sans-serif; font-weight:700; font-size:18px; color:var(--text); margin:6px 0; }

/* footer */
footer{ text-align:center; color:var(--muted); margin-top:12px; padding-bottom:28px; }

/* Fish styles: bigger than cursor, white */
#fish{
  position:fixed;
  left:50%;
  top:50%;
  width:80px;   /* slightly bigger than cursor */
  height:40px;
  pointer-events:none; /* must not block clicks */
  z-index:1600;
  transform-origin:center center;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transition: opacity 180ms ease;
  opacity:1;
}
#fish svg{ display:block; width:100%; height:100%; }

/* Responsive */
@media (max-width:920px){
  #sidebar{ width:56px; }
  #sidebar.open{ width:72%; }
  #page-wrapper{ padding-left:18px; padding-right:18px; }
  .skill-grid{ grid-template-columns:repeat(2,1fr); }
  .repository-card{ width:92%; }
  .about-img-container { width:160px; height:160px; }
  .img-stack { width:160px; height:160px; }
  .img-stack img { border-radius:50%; }
}

/* When #sidebar has .open, move hamburger to the right side of sidebar */
#sidebar.open ~ .hamburger,
.hamburger.move-right { left:238px; }