/* ==========================================================================
   Integrated Biosciences — Base layer
   Reset, document defaults, containers, utilities, the type ramp.
   Transcribed from the source's compiled app-styles.css.
   ========================================================================== */

html,
body {
  max-width: 100%;
  min-height: 100vh;
  overflow-x: clip;
  width: 100%;
  font-size: var(--base--font-size, 16px);
  font-family: var(--base--font-family);
  font-weight: var(--base--font-weight);
  line-height: var(--base--line-height, 1em);
  background: var(--base--background-color, #eef1f8);
  color: var(--base--text-color, #0a1734);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}

html {
  scroll-behavior: initial;
  min-height: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow-y: scroll;
}

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

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

/* Одна гарнитура и одно начертание везде: заголовки не жирные, поля и кнопки наследуют шрифт. */
h1, h2, h3, h4, h5, h6, b, strong, th {
  font-weight: 400;
}

input, textarea, select, button {
  font-family: inherit;
  font-weight: 400;
  letter-spacing: inherit;
}

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

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

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

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

/* Focus ring — the source's own outline group, not the UA default. */
:focus-visible {
  outline: var(--outline-width) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  html *,
  html *::before,
  html *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   Page shell
   `.page-content` is the bone-white sheet the footer tucks underneath: it is
   rounded at the bottom and pulled down by one block radius so the footer's
   dark ground shows through the corners.
   -------------------------------------------------------------------------- */
main.page-main {
  container-type: inline-size;
  container-name: main;
  --cw: 100vw;
  width: 100%;
}

main.page-main > .page-content {
  background: var(--base--background-color, #eef1f8);
  border-bottom-left-radius: var(--block-block-radius);
  border-bottom-right-radius: var(--block-block-radius);
  margin-bottom: calc(var(--block-block-radius) * -1);
  /* `clip`, never `hidden`. Both cut the corners on this sheet, but `hidden`
     makes the element a scroll container, and that silently kills every
     `position: sticky` descendant — which is how the hero pins its video and
     its scroller. `clip` establishes no scrollport, so the pins work. */
  overflow: clip;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Containers
   Note the arithmetic: at >=1025px the max-width is `1524px + 2 * padding`,
   because box-sizing is border-box. That is what keeps the *content* box at
   the 1524px measure rather than 1524px minus the gutters.
   -------------------------------------------------------------------------- */
.u-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.u-container--pad {
  padding-left: var(--container-padding, 40px);
  padding-right: var(--container-padding, 40px);
}

.u-container--1 {
  --width: var(--container-max-width-1);
  max-width: var(--container-max-width-1);
}

@media (min-width: 1025px) {
  .u-container--1.u-container--pad {
    max-width: calc(var(--width) + calc(2 * var(--container-padding, 40px)));
  }
}

/* --------------------------------------------------------------------------
   Block utility
   Every `<section data-cid>` carries this. It sets no background of its own,
   so a block with no `--block-color-background` shows the page canvas through.

   This lives in `@layer defaults`, as in the source. The layer is what lets a
   block override the utility with a plain class: `.c-footer` sets
   `background-color: #000`, which is only ONE class, yet it beats
   `[data-cid].u-default`'s two — because unlayered rules always win over
   layered ones, whatever their specificity. Flatten the layer and the footer
   silently turns transparent.
   -------------------------------------------------------------------------- */
@layer defaults {

[data-cid].u-default {
  --block-block-radius: 20px;
  background-color: transparent;
  display: block;
  font-size: 0;
  overflow: clip;
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

@media (min-width: 1025px) {
  [data-cid].u-default {
    --block-block-radius: 40px;
  }
}

[data-cid].u-default a {
  text-decoration: none;
}

[data-cid].u-default h1,
[data-cid].u-default h2,
[data-cid].u-default h3,
[data-cid].u-default h4,
[data-cid].u-default h5,
[data-cid].u-default h6 {
  font-weight: 400;
}

[data-cid].u-default.-round-block {
  border-radius: var(--block-block-radius);
}

[data-cid].u-default.-round-block.-round-block-offset {
  margin-top: calc(var(--block-block-radius) * -1);
  margin-bottom: calc(var(--block-block-radius) * -1);
}

} /* @layer defaults */

/* --------------------------------------------------------------------------
   Text reveal
   The site's signature scroll effect: each word is wrapped in a span with a
   colour-5 curtain over it; scrolling wipes the curtain up word by word.
   The markup is generated by main.js — these are the base rules only.
   -------------------------------------------------------------------------- */
.text-reveal-word {
  /* Room for the curtain's 0.12em bleed at each end (see below) — it only ever
     clips the curtain, never the words' own ink. The words are stacked in
     reverse by main.js, first on top, so that bleed always falls on its own
     word's line and never over the ink of the word before it. */
  clip-path: inset(-0.25em);
  overflow: visible;
  display: inline-block;
  position: relative;
}

.text-reveal-overlay {
  background-color: var(--overlay-color, var(--color--5));
  /* Bled 0.12em past the word box at both ends — not shifted down by 0.15em,
     which is what this rule used to do and what left the letters showing. The
     box is only the line box, and on a 1em line height the ink does not stay
     inside it: capitals clear the box top by 0.12em, a breve or diaeresis
     (Й, Ё) sits 0.09em above it, and a descender (у) falls 0.07em below.
     0.12em clears all three; the bleed has no cost on a wrapped heading
     because of the reverse stacking noted above. */
  bottom: -0.12em;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -0.12em;
  transform-origin: center bottom;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .text-reveal-overlay {
    display: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   The label pill  (`.u-ts--1`)
   A white pill with a square blue chip — the site's eyebrow. It is not
   text with a dot before it; the chip is a 10px square with no border-radius,
   and the label is uppercased mono with zero tracking.
   -------------------------------------------------------------------------- */
.u-ts--1 {
  align-items: center;
  background: var(--background-color, #fff);
  border-radius: var(--border-radius, 8px);
  color: var(--color, var(--base--text-color));
  display: inline-flex;
  font-family: var(--family--2);
  font-size: var(--text-mono-sm);
  letter-spacing: 0;
  line-height: 1em;
  padding: 8px 12px 8px 8px;
  text-transform: uppercase;
  width: fit-content;
}

.u-ts--1::before {
  background: var(--blob-color, var(--color--2));
  content: "";
  display: inline-flex;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 12px;
  width: 10px;
  height: 10px;
}

/* --------------------------------------------------------------------------
   WYSIWYG-ish text
   -------------------------------------------------------------------------- */
.u-wysiwyg-text--1 b,
.u-wysiwyg-text--1 strong {
  font-weight: 400;
}

.u-wysiwyg-text--1 s { text-decoration: line-through; }
.u-wysiwyg-text--1 u { text-decoration: underline; }
.u-wysiwyg-text--1 p { display: block; }
.u-wysiwyg-text--1 i,
.u-wysiwyg-text--1 em { font-style: italic; }
.u-wysiwyg-text--1 a { text-decoration: underline; text-underline-offset: auto; }

.u-wysiwyg-headings--1 {
  --headings-weight: 400;
  --headings-bold-weight: 600;
  --headings-wrap: balance;
}

.u-wysiwyg-headings--1 h1,
.u-wysiwyg-headings--1 h2,
.u-wysiwyg-headings--1 h3,
.u-wysiwyg-headings--1 h4,
.u-wysiwyg-headings--1 h5,
.u-wysiwyg-headings--1 h6 {
  display: block;
  font-weight: var(--headings-weight, 400);
  text-wrap: pretty;
}

.u-wysiwyg-headings--1 h1 b,
.u-wysiwyg-headings--1 h2 b,
.u-wysiwyg-headings--1 h3 b,
.u-wysiwyg-headings--1 h4 b,
.u-wysiwyg-headings--1 h5 b,
.u-wysiwyg-headings--1 h6 b,
.u-wysiwyg-headings--1 h1 strong,
.u-wysiwyg-headings--1 h2 strong,
.u-wysiwyg-headings--1 h3 strong,
.u-wysiwyg-headings--1 h4 strong,
.u-wysiwyg-headings--1 h5 strong,
.u-wysiwyg-headings--1 h6 strong {
  font-weight: var(--headings-bold-weight, 600);
}

/* --------------------------------------------------------------------------
   Helpers
   -------------------------------------------------------------------------- */
.u-absolute-fill,
.u-absolute-anchor {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.u-cover-object {
  object-fit: cover;
  object-position: center;
}

.u-visible { opacity: 1 !important; visibility: visible !important; }
.u-invisible { opacity: 0 !important; visibility: hidden !important; }

.u-screen-reader {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  word-wrap: normal !important;
}

.u-hidden { display: none !important; visibility: hidden !important; }

.u-ff--1 { font-family: var(--family--1); }
.u-ff--2 { font-family: var(--family--2); }