/* =========================================================================
   base.css — шрифт, reset, токены, fluid-скейл, типографика
   Макет: 1980px, контейнер 1860px, боковые отступы 60px.
   ПРАВИЛО: значение из макета в px / 10 = rem  (60px -> 6rem, 65px -> 6.5rem)
   ========================================================================= */

@font-face {
  font-family: 'Geomini';
  src: url('../fonts/Geomini-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Geomini-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ токены */
:root {
  --bg:          #0E0D14;
  --bg-deep:     #08070A;
  --bg-footer:   #0C0B12;
  --light:       #CACACA;
  --light-ink:   #040404;
  --light-muted: #4C4C4C;
  --ink:         #FFFFFF;
  --muted:       #8A8A93;
  --dim:         #6E6E77;
  --accent:      #C9BB4E;
  --indigo:      #1C1466;
  --panel-a:     #1E1C2E;
  --panel-b:     #1E1F37;
  --watermark:   #262435;
  --hairline:    rgba(255,255,255,.14);

  --gutter: 6rem;   /* 60px */
  --footer-pb: 9.9rem;
  --col-gap: 6rem;  /* 60px */

  /* диагональ: угол наклона и точка пересечения с y=0 (переопределяется на странице) */
  --diag-angle: 54.24deg;
  --diag-x: 232.1rem;
}

/* ------------------------------------------------------------- fluid-скейл */
/* 100vw / 198 -> ровно 10px при ширине 1980px */
html {
  font-size: min(0.50505vw, 10px);
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 1279px) { html { font-size: 6.4646px; } }
@media (max-width: 1023px) { html { font-size: 10px; } }

/* -------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-deep);
  color: var(--ink);
  font-family: 'Geomini', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 2rem;          /* 20px */
  line-height: 3rem;        /* 30px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 300; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --------------------------------------------------------------- контейнер */
.container {
  width: 100%;
  max-width: 198rem;               /* 1980px */
  margin-inline: auto;
  padding-inline: var(--gutter);    /* 60px  -> контент 1860px */
}

/* --------------------------------------------------------- диагональный фон */
.page {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}
/* слой-обрезчик: внутри него повёрнутый тёмный прямоугольник.
   z-index:-1 + isolation на .page — рисуется поверх фона .page, но под контентом,
   поэтому детям не нужно принудительное position:relative (иначе ломается
   .site-header--overlay). */
.page__diag {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.page__diag::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--diag-x);
  width: 400rem;
  height: 1400rem;
  background: var(--bg-deep);
  transform-origin: top left;
  transform: rotate(var(--diag-angle));
}

/* -------------------------------------------------------------- типографика */
/* Заголовок секции / H1 страницы: 65px, CAPS, Light */
.h-section,
.page-title {
  font-size: 6.5rem;
  line-height: 7.3rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* вариант с буллетом: точка на x=101, текст с x=155 (зазор 54px) */
.h-section {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding-left: 4.1rem;   /* точка на x = 60 + 41 = 101 */
  font-weight: 400;
}
.h-section::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(.5rem);   /* центр по капители, а не по строке */
}

/* Подзаголовок блока — «Project Overview», «Project Timeline» */
.h-block {
  font-size: 3.2rem;
  line-height: 3.8rem;
  font-weight: 300;
}

/* Текстовые роли */
.lead     { font-size: 3.2rem; line-height: 4.8rem; }
.body-txt { font-size: 2rem;   line-height: 3rem; color: var(--muted); }
.body-txt + .body-txt { margin-top: 3rem; }
.small    { font-size: 1.6rem; line-height: 2.4rem; }

.u-light-bg { background: var(--light); color: var(--light-ink); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}