/* ==========================================================================
   Base — global ground, typography defaults, link + selection colors.
   ========================================================================== */

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

html { background: var(--black-page); }

body {
  margin: 0;
  background: var(--black-page);
  color: #EDE5D5;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--gold);
  text-decoration: none;
  border-radius: var(--radius);
}

a:hover { color: var(--gold-link-hover); }

/* Focus ring — not in the handoff. The prototype has no focus styling at all,
   and gold on near-black gives keyboard users nothing to follow without it.
   :focus-visible so pointer users never see it. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

::selection {
  background: var(--gold-deep);
  color: var(--black-bar);
}

/* --- Touch / small-screen ground ------------------------------------------
   None of this changes the desktop rendering; it removes browser defaults
   that only show up on a phone. */

html {
  /* Safari inflates body copy when a phone is rotated to landscape unless this
     is pinned, which breaks every measured line length on the page. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* The default tap flash is a translucent blue rectangle — wrong colour and
     wrong shape for a squared-off gold-on-black design. Buttons and links have
     their own :active states, so nothing is lost by removing it. */
  -webkit-tap-highlight-color: transparent;
  /* Belt and braces against a future overflow: clip, not hidden, so it does
     not create a scroll container and break position: sticky in the card
     section. */
  overflow-x: clip;
}

/* Touch devices get a visible press state in place of :hover, which either
   never fires or sticks after the finger lifts. */
@media (hover: none) {
  .cta-plate:active,
  .cta-link:active,
  .hero__cta:active { opacity: .82; }
}