@font-face {
  font-family: 'Ilisarniq';
  src: url('fonts/Ilisarniq-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

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

html, body {
  background: white;
  font-family: 'Ilisarniq', sans-serif;
  color: #000;
}

/* ── Icon buttons ── */
.icon-btn {
  position: fixed;
  top: 16px;
  z-index: 10000;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.85);
  border: 1px solid #000;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease;
  padding: 0;
  color: #000;
  text-decoration: none;
  font-size: 18px;
}
.icon-btn:hover { background: white; }

#menu-btn  { left: 16px; }
#action-btn { left: 72px; }

/* Hamburger lines */
#menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #000;
  transition: transform 0.3s ease;
  transform-origin: center;
  position: absolute;
}
#menu-btn span:nth-child(1) { transform: translateY(-6px) rotate(0deg); }
#menu-btn span:nth-child(2) { transform: rotate(0deg); }
#menu-btn span:nth-child(3) { transform: translateY(6px) rotate(0deg); }

body.menu-open #menu-btn span:nth-child(1) { transform: translateY(-6px) rotate(90deg); }
body.menu-open #menu-btn span:nth-child(2) { transform: rotate(90deg); }
body.menu-open #menu-btn span:nth-child(3) { transform: translateY(6px) rotate(90deg); }

/* ── Slide-in menu panel ── */
#menu {
  position: fixed;
  top: 0; left: 0;
  width: clamp(280px, 35vw, 500px);
  height: 100vh;
  z-index: 9999;
  background: white;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  padding: 100px 30px 30px 30px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

body.menu-open #menu { transform: translateX(0); }

/* ── Menu contents ── */
.menu-col-label {
  font-size: 24px;
  color: grey;
  line-height: 1.25;
}

.menu-project {
  font-size: 24px;
  color: #000;
  text-decoration: none;
  line-height: 1.25;
  cursor: pointer;
}
.menu-project:hover { color: grey; text-decoration: underline; }
.menu-project.current { color: grey; }

.menu-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.menu-group:last-child { margin-bottom: 0; }

/* ── Mobile ── */
@media (max-width: 767px) {
  #menu { padding: 100px 20px 20px 20px; width: 100vw; }
}