/* Global reset + full-viewport, non-scrollable page */
html,
body {
  height: 100%;
  overflow: hidden; /* no scrollbars */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #ffffff;
  color: #000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: auto;
}

a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
summary {
  cursor: pointer;
}

/* Top-right links */
.top-links {
  position: fixed;
  top: 3vh;
  right: 3vw;
  z-index: 10;
  display: flex;
  gap: 1.25rem;
}

.top-links a {
  color: #777777; /* gray by default */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.top-links a:hover,
.top-links a:focus-visible {
  color: #000000; /* black on hover/focus */
  text-decoration-style: solid; /* regular underline on hover/focus */
}

/* Main full-viewport frame */
.frame {
  height: 100dvh;
  width: 100vw;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  overflow: hidden; /* belt-and-suspenders */
}

.panel {
  display: flex;
  overflow: hidden; /* ensure nothing forces scroll */
}

/* Desktop layout: text anchored bottom-right */
.panel--text {
  padding: 0 4vw 5vh 4vw; /* bottom-right bias */
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

.bio {
  margin: 0;
  max-width: 48ch;
  width: 48ch;
  text-align: left;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.links {
  width: 48ch;
  max-width: 48ch;
  display: flex;
  gap: auto;
}

@media (max-width: 768px) {
  .top-links {
    top: 2.2vh;
    right: 5vw;
    gap: 0.9rem;
  }

  .top-links a {
    font-size: 13px;
  }
}