/* ================================
   QuantumLinear — Global Styles
   Mobile-stable centering + overflow guards
   ================================ */

/* --- Reset & box model --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;                 /* Prevent micro horizontal scroll */
  scrollbar-gutter: stable both-edges; /* Nice on desktop, harmless on mobile */
}

/* --- Base typography & colors --- */
body {
  background-color: #1a1a1a;          /* dark charcoal */
  color: #f0f0f0;                     /* off-white text */
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.55;
}

/* --- Core layout container (bullet-proof centered) --- */
.container {
  display: block;
  width: 100%;                        /* fill mobile width */
  max-width: 800px;                   /* readable line length on desktop */
  margin-left: auto;                  /* true horizontal centering */
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  padding-top: clamp(20px, 5vw, 48px);
  padding-bottom: clamp(24px, 6vw, 60px);
}

/* --- Header --- */
header {
  text-align: center;
  margin-bottom: clamp(20px, 5vw, 36px);
}

header h1 {
  margin: 0 0 0.2em 0;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3rem);
  text-wrap: balance;
}

header h2 {
  margin: 0;
  font-weight: 400;
  color: #b0b0b0;
  font-size: clamp(1rem, 3.5vw, 1.4rem);
  text-wrap: balance;
}

/* --- Message block --- */
.message {
  text-align: center;
  margin: clamp(28px, 6vw, 48px) 0;
}

.message h3 {
  margin: 0 0 0.5em 0;
  font-weight: 700;
  font-size: clamp(1.25rem, 4.5vw, 1.8rem);
  text-wrap: balance;
}

.message p {
  margin: 0;
  color: #d0d0d0;
  font-size: clamp(1rem, 3.2vw, 1.1rem);
  line-height: 1.65;
  overflow-wrap: anywhere;            /* long words won't push layout */
  max-width: 70ch;                    /* comfy measure for paragraphs */
  margin-inline: auto;                /* center the paragraph line box */
}

/* --- Contact block --- */
.contact {
  text-align: center;
  margin-top: clamp(28px, 6vw, 48px);
}

.contact button {
  background-color: #007bff;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s ease, transform 0.05s ease;
  max-width: 100%;
  inline-size: fit-content;           /* avoid full-width stretch */
}

.contact button:hover {
  background-color: #005ed1;
}

.contact button:active {
  transform: translateY(1px);
}

#emailDisplay {
  font-size: 1.05rem;
  color: #b0b0b0;
}

#emailDisplay em {
  font-size: 0.9rem;
  color: #8a8a8a;
}

/* --- Media elements & form controls can't overflow --- */
img, video, canvas, svg,
button, input, textarea {
  max-width: 100%;
}

/* --- Reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}