@import url("./tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bora-color-background);
  color: var(--bora-color-text);
  font-family: var(--bora-font-body);
  font-size: var(--bora-font-size-body);
  line-height: var(--bora-line-height-body);
  text-rendering: optimizeLegibility;
}
img, picture { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-underline-offset: 0.18em; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 {
  font-family: var(--bora-font-display);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
h1 { font-size: clamp(3rem, 10vw, 7.25rem); }
h2 { font-size: clamp(2.35rem, 7vw, 5rem); }
h3 { font-size: clamp(1.35rem, 3vw, 2rem); }
:focus-visible { outline: 3px solid var(--bora-color-focus); outline-offset: 4px; }
::selection { background: var(--bora-color-secondary); color: #fff; }

.bora-container { width: min(var(--bora-container), calc(100% - 2rem)); margin-inline: auto; }
.bora-content { max-width: var(--bora-content); }
.bora-section { padding-block: var(--bora-space-8); }
.bora-section--ink { background: var(--bora-color-text); color: #fff; }
.bora-section--blue { background: var(--bora-color-primary); color: #fff; }
.bora-section--white { background: var(--bora-color-surface); }
.bora-skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; background: #fff; border: 3px solid #111; }
.bora-skip-link:focus { top: 1rem; }
.bora-eyebrow { font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.bora-lead { max-width: 46rem; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; }
.bora-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 40rem) {
  .bora-container { width: min(100% - 1.25rem, var(--bora-container)); }
  .bora-section { padding-block: var(--bora-space-7); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}