/* ============================================================
   ahaaa.in — base.css
   ------------------------------------------------------------
   🧱 THE FOUNDATIONS
   Resets and defaults that apply to the whole page: the body
   font, link behaviour, focus rings for keyboard users, and
   the shared page container (.wrap).

   ⚠️ MACHINERY FILE — you rarely need to touch this one.
   ============================================================ */

/* every element measures its size the same sensible way */
*{margin:0;padding:0;box-sizing:border-box}

/* clicking a menu link glides down the page instead of jumping */
html{scroll-behavior:smooth}

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;          /* stops sideways scrolling on phones */
}

img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* the colour when someone highlights text with their mouse */
::selection{background:var(--yellow);color:var(--ink)}

/* "skip to content" — invisible link that appears when a
   keyboard user presses Tab. An accessibility must-have.     */
.skip{
  position:fixed;left:16px;top:-60px;z-index:200;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-full);
  transition:top .2s;
}
.skip:focus{top:16px}

/* the blue ring around whatever a keyboard user has selected */
:where(a,button,input,[tabindex]):focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:8px;
}

/* .wrap = the invisible container that keeps content centred
   and stops it stretching too wide on big monitors           */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* generic section spacing (top + bottom breathing room)      */
section{padding:120px 0}
::selection{background:var(--blue);color:#fff}