/* ============================================================
   BASE — reset, body defaults, dotted cream ground utility.
   Loaded after tokens.css on every page.
============================================================ */

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

html {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--cream);
}

body {
  overflow-x: hidden;
}

/* ============================================================
   DOTTED CREAM GROUND — the shared visual foundation. Applied
   to whichever element is the page's main body region. Pages
   add this class instead of redeclaring the gradient.
   Verbatim from job done / timeline / signup / mockup hero.
============================================================ */
.dotted-ground {
  background-color: var(--cream);
  background-image: radial-gradient(circle, rgba(10,10,10,0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}

/* Slightly stronger dot opacity used by the mockup hero (0.18).
   Kept as a separate utility because the difference IS visible
   and is part of the result/login page's denser feel. */
.dotted-ground--dense {
  background-color: var(--cream);
  background-image: radial-gradient(circle, rgba(10,10,10,0.18) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}

/* ============================================================
   PAGE-BACK-WRAP — shared utility for the chunky cream/ink Back
   button that sits at the bottom of pages like register, signup,
   manifesto, whatis, forgot. Single rule, every page consistent.

   Layout: block-level centering container with generous
   top/bottom spacing (--page-back-gap). The Back button is
   inline-flex (defined per-page as .back-cta), so text-align:
   center on the wrapper centers it naturally — more robust than
   flex centering when the wrapper is nested in a form, grid, or
   any other layout context. text-align always wins.

   Optional secondary hyperlink (e.g. "Cancel my donation" on
   register) becomes a stacked block below the primary button
   via the adjacent-sibling rule.

   Phase 2: becomes a <PageBackButton primary secondary> React
   component; the wrapper survives as the styled-component anchor.
============================================================ */
.page-back-wrap {
  display: block;
  width: 100%;
  text-align: center;
  /* Top margin only — this is the breathing from page content
     into the back button area. Bottom-to-footer spacing is owned
     by each page's own padding-bottom (96px site-wide reference,
     matching brief.html). The previous bottom margin here was
     stacking on top of the page padding, creating doubled gap. */
  margin-top: var(--page-back-gap);
  margin-bottom: 0;
}
/* Stack any second link/button on its own row below the first. */
.page-back-wrap > * + * {
  display: block;
  margin: 18px auto 0;
}