/* ===== Base ===== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* page doesn't scroll; panels do */
  font-family: "Geologica", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #ffffff;
  color: #000000;
}

/* Lock all text to same font/size/weight as "home" */
body,
#site-name,
.hover-target,
.center-right,
.center-top,
.center-bottom,
.panel,
.panel * {
  font-family: "Geologica", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

/* Layering */
.text-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.panel        { position: fixed; z-index: 20; }
.hover-text   { position: fixed; z-index: 15; }
.work-list    { position: fixed; z-index: 12; }

/* ===== Overlay labels (always blue) ===== */
.center-top {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  color: blue;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}

#site-name.center-bottom {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  color: blue;
}

.center-right {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: rotate(90deg) translateY(-50%);
  transform-origin: right center;
  color: blue;
  text-decoration: none;
  pointer-events: auto;
  white-space: nowrap;
}

/* Left-side numbers */
.left-side {
  --gap: 56px;
  position: absolute;
  left: 2%;
  top: 20%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  pointer-events: auto;
}

.hover-target {
  appearance: none;
  border: 0;
  background: none;
  color: blue;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  user-select: none;
}

/* Hover label */
.hover-text {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(0,0,255,.85);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

/* ===== Project list (01 → WORKS) ===== */
.work-list {
  display: none;
  position: fixed;
  top: 6%;
  left: 10%;
  text-transform: uppercase;
  font-size: 1.1rem;
  color: #888888; /* light mode = gray */
  pointer-events: none;
}
.work-list div { margin-bottom: 8px; }

/* ===== Panels ===== */
:root {
  --left-safe: 80px;
  --right-safe: 80px;
}

.panel {
  box-sizing: border-box;
  top: 0;
  left: var(--left-safe);
  width: calc(100% - var(--left-safe) - var(--right-safe));
  max-height: 80vh;
  background: rgba(255,255,255,0.95);
  color: #222;
  padding: 24px 28px;
  border-radius: 0 0 12px 12px;
  backdrop-filter: blur(8px);

  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity 220ms ease, transform 220ms ease;
}
.panel.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== CONTACT (6) — centered modal ===== */
#contact-panel {
  top: 50% !important;
  left: 50% !important;
  width: min(480px, 92vw);
  max-height: 75vh;
  border-radius: 12px;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 220ms ease, transform 220ms ease;
}
#contact-panel.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* Panel inner text */
.panel-title { margin: 0 0 10px 0; letter-spacing: .02em; }
.panel-body p { margin: 0 0 12px 0; }

/* Inner scroller */
.scrollable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: calc(80vh - 44px);
  touch-action: pan-y;
}

/* CV grid */
.cv-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
}
.cv-column  { min-width: 0; }
.cv-heading { margin: 0 0 8px 0; font-weight: 600; }
.cv-line    { margin: 6px 0; }

/* ===== Dark mode ===== */
body.dark-mode {
  background: #d3d3d3; /* light gray background */
  color: blue;         /* all text blue */
}
body.dark-mode #site-name,
body.dark-mode .hover-target,
body.dark-mode .center-right,
body.dark-mode .center-top {
  color: blue;
}
body.dark-mode .panel {
  background: rgba(220,220,220,0.95);
  color: blue;
}
body.dark-mode .hover-text { color: blue; }
body.dark-mode .work-list,
body.dark-mode .work-list div {
  color: blue; /* dark mode = blue */
}

/* ===== Accessibility ===== */
.hover-target:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  :root {
    --left-safe: clamp(72px, 18vw, 120px);
    --right-safe: clamp(60px, 15vw, 100px);
  }

  .left-side { top: 16%; --gap: 44px; }
  .hover-text { font-size: 2rem; }

  .panel {
    max-height: 84dvh;
    padding: 20px;
    border-radius: 0 0 10px 10px;
  }
  .scrollable { max-height: calc(84dvh - 44px); }

  .cv-content { grid-template-columns: 1fr; gap: 16px; }
  .cv-line, .panel-body p { font-size: 0.98rem; line-height: 1.4; }

  .center-right { right: 6vw; }
  .work-list { top: 6%; left: 10%; }

  #contact-panel {
    width: 92vw;
    max-height: 75dvh;
  }
}