/* Base styles: colours, type and shared tokens.
   Colours follow the brand kit and its WCAG AA notes. */
:root {
  --coral: #EF4136;
  --orange: #F7941E;
  --amber: #FFB81C;
  --deep: #B3372B;
  --ink: #1a1214;
  --ember: #170c0b;
  --paper: #FFF9F4;
  --coral-text: #C0281E;   /* coral that passes AA on light backgrounds */
  --mute-light: #5f5153;   /* secondary text on paper, 7:1 */
  --mute-dark: #cdbfb8;    /* secondary text on ember, 10:1 */
  --grad: linear-gradient(100deg, var(--coral), var(--orange) 62%, var(--amber));
  --f-title: 'Poppins', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Rubik', system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(.2, 1, .3, 1);
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; font: 400 1.0625rem/1.65 var(--f-body); text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-title); line-height: 1.08; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
button { font: inherit; color: inherit; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link: visible on focus (WCAG 2.4.1) */
.skip {
  position: fixed; left: 16px; top: -100px; z-index: 1000;
  background: var(--amber); color: var(--ink); font: 700 1rem/1 var(--f-title);
  padding: 14px 18px; text-decoration: none;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.skip:focus { top: 16px; }

/* Focus ring that works on dark and light (WCAG 2.4.7 / 2.4.13) */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ink);
  border-radius: 2px;
}

/* Brand mark */
.mark { width: 34px; height: 34px; flex: none; overflow: visible; }


/* Motion: everything decorative switches off for people who ask for less motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}