/* Bufi Preschool — base: reset, typography, buttons, utilities */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg-ice);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
:where(ul[class], ol[class], nav ul) { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.15em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--bufi-yellow); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* display type */
.display { font-family: var(--font-display); font-weight: 900; line-height: 0.92; letter-spacing: 0.005em; text-wrap: balance; }

/* buttons: one primary (yellow), one quiet (outline) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.7em 1.4em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--bufi-yellow); color: var(--bufi-blue-deep); }
.btn--primary:hover { background: #f7cc1a; }
.btn--primary:active { transform: scale(0.97); }
.btn--large { font-size: var(--step-1); padding: 0.8em 1.6em; }
.btn--small { min-height: 44px; padding: 0.5em 1.1em; font-size: var(--step--1); }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 0.6em 1em; border-radius: var(--radius-s);
  background: var(--bufi-blue-deep); color: #fff; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--gutter); }

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