/* ==========================================================================
   Spinta — base: reset, document, utilities
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bone);
  color: var(--text);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-sans);
  font-stretch: var(--wdth-text);
  font-size: var(--fs-body);
  line-height: 1.45;
  font-weight: 400;
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* The page never scrolls sideways: parts of the hero reveal fly in from
   beyond the right edge. clip, not hidden: no scroll container, and the
   vertical scrollbar is untouched (see the intro notes in the README). */
.page {
  overflow-x: clip;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* No grey flash on tap (phones): every control has its own press state. */
a,
button,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}

/* Pictures fade in as they arrive instead of popping in: main.js holds the
   lazy ones still on their way at 0, then fades each up once it's loaded. */
img.img-wait {
  opacity: 0;
}

/* A soft rise for blocks with no entrance of their own. main.js arms them
   (so without JS they simply show) and drops both classes once landed, so
   the block's own transitions are back in charge. */
.rv-soft {
  opacity: 0;
  translate: 0 28px;
}

.rv-soft.is-shown {
  opacity: 1;
  translate: none;
  transition:
    opacity 900ms ease var(--rv-d, 0ms),
    translate 1100ms var(--ease-out) var(--rv-d, 0ms);
}

::selection {
  background: var(--ink);
  color: var(--bone);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Lenis (their stylesheet minus `.lenis-stopped { overflow: clip }`: hiding
   overflow during the intro drops the scrollbar and shifts the page). */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

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

/* The enquiry forms' honeypot: off-screen and out of the tab order, so only a
   bot fills it in (the server then drops the enquiry). */
.hp-field {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  border-radius: 999px;
  transform: translateY(-160%);
  transition: transform var(--dur-hover) var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
}