/* ============================================================
   QWELL · BASE LAYER
   Element resets + brand defaults + a few reusable utilities.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Headings default to display where appropriate ---- */
h1, h2, h3, h4 { color: var(--text-strong); margin: 0; }

/* ---- Display utility: the screaming Anton headline ---- */
.qw-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--text-strong);
}

/* ---- Eyebrow / kicker label ---- */
.qw-eyebrow {
  font-family: var(--font-text);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

/* ---- Links ---- */
a { color: var(--text-link); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--off-black); }

/* ---- Selection ---- */
::selection { background: var(--proud-yellow); color: var(--off-black); }

/* ---- Focus-visible ---- */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Underline-accent (the hand-drawn highlight under words) ---- */
.qw-underline {
  background-image: linear-gradient(var(--freedom-fuchsia), var(--freedom-fuchsia));
  background-position: 0 92%;
  background-size: 100% 0.22em;
  background-repeat: no-repeat;
}

/* ---- Halftone texture helper ---- */
.qw-halftone {
  background-image: var(--halftone-dark);
  background-size: var(--halftone-size);
}

/* ---- Scrolling marquee ticker (LIBERATION · JOY · COMMUNITY ·) ---- */
.qw-marquee {
  display: flex;
  overflow: hidden;
  background: var(--off-black);
  white-space: nowrap;
}
.qw-marquee__track {
  display: flex;
  gap: var(--space-8);
  padding-block: 10px;
  padding-inline: var(--space-4);
  font-family: var(--font-text);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  animation: qw-marquee-scroll 22s linear infinite;
}
@keyframes qw-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .qw-marquee__track { animation: none; }
}