/* ==========================================================================
   BASE — reset, page defaults, text roles, layout helpers
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

html {
  /* Stop iOS from inflating text size in landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4,
p, ul, ol, figure, blockquote {
  margin: 0;
}

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

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

/* In-page links (menu, footer) glide to their section instead of jumping.
   With JS running, js/scroll.js does it — slower and eased, which CSS can't
   time. Without JS, the browser's own smooth scroll is the fallback. */
html:not(.js) {
  scroll-behavior: smooth;
}

/* --- Page ----------------------------------------------------------------- */

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* One visible focus style for the whole site: a thin accent ring, offset
   so it never touches the element. Shown for keyboard focus only
   (:focus-visible), never on a mouse click or a tap. The accent's 3.99:1
   clears the 3:1 that WCAG asks of focus indicators. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- Text roles -----------------------------------------------------------
   One class per Figma text style. Size, leading and tracking come from
   tokens, so the desktop override in tokens.css re-sizes every instance
   of a role at once.

   Display roles are set in capitals with text-transform rather than typed
   in capitals in the HTML: screen readers then read the words as words,
   not letter by letter as abbreviations. ---------------------------------- */

.t-display-xl,
.t-display,
.t-display-s {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: uppercase;
}

.t-display-xl {
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-leading);
  letter-spacing: var(--display-xl-tracking);
}

.t-display {
  font-size: var(--display-size);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
}

.t-display-s {
  font-size: var(--display-s-size);
  line-height: var(--display-s-leading);
  letter-spacing: var(--display-s-tracking);
}

.t-evidence {
  font-weight: 700;
  font-size: var(--evidence-size);
  line-height: var(--evidence-leading);
}

.t-body {
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-leading);
}

.t-caption {
  font-weight: 400;
  font-size: var(--caption-size);
  line-height: var(--caption-leading);
}

/* Label keeps the case it was written in: category lines under a project
   name are sentence case. Add .t-marker for the capitalised markers
   (column heads, button labels, БУЛО / СТАЛО) — capitals are for what is
   recognised at a glance, not for what is read. */
.t-label,
.t-marker {
  font-weight: 700;
  font-size: var(--label-size);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
}

.t-marker {
  text-transform: uppercase;
}

/* --- Layout helpers ------------------------------------------------------- */

/* A section reached by an in-page link lands below the 64-px header bar,
   which shows whenever the page is moving up. */
section[id],
.services-block {
  scroll-margin-top: 4rem;
}

/* The page field. Margins live on each section's container, not on <body>,
   so full-bleed bands (work strips, the dark divider) can run edge to edge
   without negative-margin tricks. */
.container {
  padding-inline: var(--page-margin);
}

/* "Skip to content" link: the first thing a keyboard user reaches.
   Invisible until it receives focus, then it appears top-left. */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: var(--caption-size);
  line-height: var(--caption-leading);
  transform: translateY(-200%);
}

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

/* Text that exists for screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Motion ---------------------------------------------------------------
   Anyone who asked their OS for less motion gets none: every transition on
   the site becomes instant. ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html:not(.js) {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}