:root {
  --bg: var(--color-bg-site);
  --fg: var(--color-text);
  --fg-muted: var(--color-text-muted);
  --grid-dot: var(--color-grid-dot);
  --grid-size: 24px;
  --blue: var(--color-primary);
  --blue-glow: var(--color-primary-glow);
  --transition-dur: var(--duration-page);
  --transition-ease: var(--ease-page);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  font-style: normal;
  color: var(--fg);
  background-color: var(--bg);
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-font-smoothing: antialiased;
}

/* ── Minimal dot cursor: landing + project popup ────── */
#dot-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:not(.canvas-active) *,
  body.project-modal-open * {
    cursor: none !important;
  }

  body:not(.canvas-active) #dot-cursor.ready,
  body.project-modal-open #dot-cursor.ready {
    opacity: 1;
  }
}

/* ── Wordmark ────────────────────────────────────────── */
.wordmark {
  position: fixed;
  top: var(--space-6);
  /* Compensate for Playfair Display Italic's left side-bearing. */
  left: calc(var(--space-page-inline) - var(--space-1));
  z-index: 90;
  display: flex;
  align-items: baseline;
  gap: clamp(var(--space-2), 1.5vw, var(--space-4));
  font-family: var(--font-display);
  font-style: var(--wordmark-style, italic);
  font-weight: 400;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
  user-select: none;
}

.wordmark-title {
  font-size: var(--text-display-sm);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.wordmark-tagline {
  font-family: var(--font-category);
  font-size: var(--text-tagline);
  font-style: normal;
  letter-spacing: -0.015em;
  text-transform: none;
  white-space: nowrap;
}

/* ── Back-to-top arrow ───────────────────────────────── */
#back-to-top {
  position: fixed;
  top: 1.75rem;
  right: var(--space-page-inline);
  z-index: 90;
  font-family: var(--font-category);
  font-style: normal;
  font-size: var(--text-lg);
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform var(--duration-press) var(--ease-out);
}

#back-to-top:active { transform: scale(0.94); }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

body.canvas-active #back-to-top {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 767px) {
  :root { --space-page-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  #landing,
  #modal-panel {
    transform: none !important;
    transition-property: opacity !important;
    transition-duration: 160ms !important;
  }
}

@media (prefers-contrast: more) {
  :where(a, button, input, textarea, select):focus-visible {
    outline-width: 3px;
  }
}