/* ==========================================================================
   Positive Sum Academy: shared base styles
   --------------------------------------------------------------------------
   Used by the brand site (positivesum-academy). Kept separate so future pages
   (for example programme pages) can reuse the same colours, fonts and basics.
   Change a colour or font here and it changes everywhere that uses this file.
   Direction (October 2026): warm, hand-made and playful, a sibling of the
   KraftedX site. Not "tech". Colours and fonts are provisional (see README).
   ========================================================================== */

:root {
  /* --- Base ------------------------------------------------------------- */
  --paper: #FFF8EC;  /* warm cream page background, like paper */
  --ink:   #1D1530;  /* deep purple-black for text and doodle lines */
  --ink-soft: rgba(29, 21, 48, 0.74); /* secondary text, still readable */

  /* --- Lively colours ----------------------------------------------------- */
  --purple: #7B3FF2; /* shared with KraftedX */
  --orange: #FF7A1A;
  --pink:   #FF5FA2;
  --yellow: #FFC93C;
  --green:  #2FBF71;
  --sky:    #3FA9F5;

  /* --- Soft (pastel) versions, used behind text such as the puzzle -------- */
  --purple-soft: #E6DAFF;
  --orange-soft: #FFE1C9;
  --pink-soft:   #FFD9EA;
  --yellow-soft: #FFF0B8;
  --green-soft:  #D3F3DF;
  --sky-soft:    #D5EDFF;

  /* --- Puzzle piece colours (brighter than soft, still light behind text) -
     Listed again in shared/js/puzzle.js: change both together. */
  --purple-piece: #CDB8FF;
  --orange-piece: #FFC79E;
  --pink-piece:   #FFB8D5;
  --yellow-piece: #FFE27A;
  --green-piece:  #A9E9C2;
  --sky-piece:    #AEDBFF;

  /* --- Fonts (free Google Fonts, SIL Open Font Licence) ------------------- */
  --font-display: "Gloock", Georgia, serif;          /* headings */
  --font-body:    "Figtree", system-ui, sans-serif;  /* everything else */

  /* --- Spacing and motion ------------------------------------------------ */
  --gutter: clamp(16px, 5vw, 64px);           /* side padding, 16px on small phones */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* calm "settle into place" curve */
}

/* --- Light reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; } /* never scroll sideways on phones */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px: easy to read on phones */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; } /* "hidden" always wins over button styles */
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; margin: 0; }

/* Visible keyboard focus everywhere (accessibility) */
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; }

/* "Skip to content" link: hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: 12px; }

/* Text only screen readers can hear */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Paper texture over the whole page -------------------------------------
   A tiny inline SVG noise pattern, so there is no image file to load. */
.grain::after {
  content: "";
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* "Play intro" buttons are hidden for visitors who asked for reduced motion,
   because the intro never plays for them. */
@media (prefers-reduced-motion: reduce) {
  [data-replay-intro] { display: none !important; }
}