/* ---- WebGPU background layer ---- */
/* The canvas is rendered INSIDE main.wrapper (home partial), so it is a sibling
   of the nav and sections. As a positioned (fixed) element it stacks ABOVE the
   static-positioned nav/content. Give it z-index:-1 so it paints behind all
   in-flow content on the page. */
#gpu {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

/* The nav has no opaque background in vanilla hugo-coder, so the shader
   shows straight through behind the links. Same dark-glass as the home panel.
   (This is a backdrop for readability, not a re-stack — the nav now paints
   above the z-index:-1 canvas because it is normal in-flow content.) */
.navigation {
  background: rgba(33, 33, 33, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Homepage: dark glass panels for readability over the background ---- */
.centered .about {
  background: rgba(33, 33, 33, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.1rem;
  padding: 2.4rem 2.8rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

/* Light headings stay readable over the bright spiral center */
.centered .about h1,
.centered .about h2 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ---- Resume cards & pills ---- */
.resume-card {
  background: rgba(33, 33, 33, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.8rem;
  padding: 1.2rem 1.4rem;
  margin: 1rem 0;
}

.resume-meta {
  color: #9e9e9e;
  font-size: 0.85em;
}

.resume-period {
  color: #9e9e9e;
  font-size: 0.85em;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.pill {
  display: inline-block;
  background: rgba(33, 33, 33, 0.72);
  color: #dadada;
  border: 1px solid rgba(66, 66, 66, 0.9);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  margin: 0.2rem 0.25rem;
  font-size: 0.8em;
  white-space: nowrap;
}

/* ---- Projects cards ---- */
.project-card {
  background: rgba(33, 33, 33, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.8rem;
  padding: 1.2rem 1.4rem;
  margin: 1rem 0;
}

.project-period {
  color: #9e9e9e;
  font-size: 0.85em;
  font-weight: 500;
}