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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image: none;
  transition: background-color 0.35s ease, color 0.35s ease;
}

html[data-theme="dark"] body,
html[data-theme="sand"] body {
  background-image:
    radial-gradient(120% 90% at 8% -8%, var(--wash-a), transparent 58%),
    radial-gradient(95% 75% at 100% 0%, var(--wash-b), transparent 52%),
    linear-gradient(180deg, var(--wash-c), var(--bg) 38%, var(--bg));
  background-attachment: fixed;
}

/* Micro grain — off in light theme; used only on dark/sand */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

html[data-theme="light"] body::before {
  display: none;
}

html[data-theme="dark"] body::before {
  mix-blend-mode: soft-light;
}

#page {
  position: relative;
  z-index: 1;
  min-height: auto;
}

.page-blank {
  display: grid;
  place-items: center;
  padding: 2rem;
  min-height: 60vh;
}

/* Soft copy deterrent — forms stay selectable */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
[contenteditable="true"],
.lead-form input,
.lead-form textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

img,
.hero-media,
.portfolio-grid {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Maker mark: not visible on page, present in DOM/source */
.maker-mark {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.blank-hint {
  margin: 0;
  max-width: 28rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
}