@import url('/assets/fonts/fonts.css');

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.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;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: #fff; color: #0e246d; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Dither stage: the <img> is the fallback and the LCP element; the canvas fades in over it. */
.dither { position: relative; overflow: hidden; }
.dither > img, .dither > picture, .dither > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dither-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms ease; }
.dither-ready > .dither-canvas { opacity: 1; }
/* With script, the plain photo waits for its dithered version; it comes back if WebGL fails or is slow. */
.js .dither > picture img, .js .dither > img { opacity: 0; transition: opacity 500ms ease; }
.js .dither.dither-failed > picture img, .js .dither.dither-timeout > picture img,
.js .dither.dither-failed > img, .js .dither.dither-timeout > img { opacity: 1; }

/* Entrance helper: content is visible without script; script adds .js and observes [data-rise]. */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-rise].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js [data-rise] { opacity: 1; transform: none; }
}