/* ============================================================
   KIT для концептов G–J: СТРУКТУРА, без типографики.
   Четыре присланные композиции построены на одних и тех же
   структурных приёмах: тонкая строка-бар сверху, скобочные подписи,
   пилюля со стрелкой, таблица «подпись – значение», блок проекта
   «крупное окно → название → Project Details → описание».
   Кит держит эту механику, чтобы не собирать её четыре раза.

   Гарнитур, кеглей, интерлиньяжа и трекинга здесь НЕТ: это разные
   направления, и типографика у каждого своя – она задаётся в самом
   файле концепта. Кит только опирается на имена классов шкалы
   (.t-giant, .t-big, .t-title, .t-mid, .t-body, .t-small, .label),
   которые каждый концепт определяет по-своему.
   ============================================================ */
:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f1f0ee;
  --color-bg-dark: #0c0c0c;
  --color-fg: #0e0e0e;
  --color-fg-muted: #6f6c69;
  --color-fg-on-dark: #f5f3f1;
  --color-accent: #b00e3c;
  --color-line: rgba(14, 14, 14, 0.16);
  --color-line-soft: rgba(14, 14, 14, 0.08);
  --color-line-on-dark: rgba(245, 243, 241, 0.2);

  --container: 1440px;
  --columns: 12;
  --gutter: 16px;
  --page-margin: 32px;
  --page-margin-mobile: 16px;

  --space-4: 4px;  --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px;
  --space-96: 96px; --space-128: 128px; --space-180: 180px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-300: 300ms;
  --dur-600: 600ms;
  --reveal-y: 18px;

  --radius-pill: 999px;
  --pill-h: 52px;
  --shift-arrow: 10px;
  --bar-h: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-fg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
dl, dd { margin: 0; }
p { text-wrap: pretty; }

.bleed { padding-inline: var(--page-margin); }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--page-margin); }
.grid { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); }

.muted { color: var(--color-fg-muted); }
.nums  { font-variant-numeric: tabular-nums; }

/* Скобки у подписи рисуются в CSS, в разметке остаётся чистый текст */
.label--br::before { content: '['; margin-inline-end: 0.4em; }
.label--br::after  { content: ']'; margin-inline-start: 0.4em; }
.label--fg { color: var(--color-fg); }

.has-motion [data-reveal]:not(.is-ready) { visibility: hidden; }

/* --- Строка-бар сверху --------------------------------------------------- */
.bar {
  position: sticky; inset-block-start: 0; z-index: 10;
  min-block-size: var(--bar-h);
  display: flex; align-items: center;
  background: var(--color-bg);
  border-block-end: 1px solid var(--color-line-soft);
}
.bar__row { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.bar__nav { display: flex; gap: var(--space-24); }
.bar__nav a { transition: color var(--dur-300) var(--ease-out); }
.bar__nav a:hover, .bar__nav a:focus-visible { color: var(--color-accent); }
.logo__dot { color: var(--color-accent); }

/* --- Пилюля со стрелкой -------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-24);
  min-block-size: var(--pill-h);
  padding-inline: var(--space-24);
  border-radius: var(--radius-pill);
  background: var(--color-fg); color: var(--color-bg);
  transition: background-color var(--dur-300) var(--ease-out);
}
.pill svg { flex: none; transition: transform var(--dur-300) var(--ease-out); }
.pill:hover, .pill:focus-visible { background: var(--color-accent); }
.pill:hover svg, .pill:focus-visible svg { transform: translateX(var(--shift-arrow)); }
.pill--ghost { background: transparent; color: var(--color-fg); box-shadow: inset 0 0 0 1px var(--color-line); }
.pill--ghost:hover, .pill--ghost:focus-visible { background: var(--color-fg); color: var(--color-bg); }

/* --- Таблица «подпись – значение» --------------------------------------- */
.spec { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8) var(--space-24); align-content: start; }
.spec--ruled dt, .spec--ruled dd { border-block-start: 1px solid var(--color-line-soft); padding-block-start: var(--space-8); }

/* --- Плейсхолдер вместо изображения -------------------------------------
   На этапе выбора направления в окна проектов ставится плашка с подписью,
   что здесь будет. Так оценивается раскладка, а не случайный скриншот. */
.ph {
  background: var(--color-bg-soft);
  box-shadow: inset 0 0 0 1px var(--color-line-soft);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16);
  color: var(--color-fg-muted);
}
.ph--dark { background: var(--color-bg-dark); box-shadow: inset 0 0 0 1px var(--color-line-on-dark); color: var(--color-fg-on-dark); }
.ph--accent { background: var(--color-accent); box-shadow: none; color: var(--color-bg); }
.ph__ratio { flex: none; opacity: 0.6; }

/* --- Блок проекта: один в один со сборкой клиента ------------------------
   Светлая полоса. Сверху изображение во всю ширину полосы. Под ним:
   слева индекс (1/4), название в две строки и чёрная пилюля;
   справа «Project Details», линованная таблица и под ней описание. */
.case { background: var(--color-bg-soft); margin-block-end: var(--space-64); }
.case__frame { display: flex; overflow: hidden; aspect-ratio: 21 / 9; }
.case__frame--tall { aspect-ratio: 16 / 10; }
.case__under { padding-block: var(--space-24) var(--space-48); align-items: start; }
.case__index { grid-column: 1 / -1; padding-block-end: var(--space-16); }
.case__name { grid-column: 1 / 6; }
.case__go { grid-column: 1 / 6; padding-block-start: var(--space-32); }
.case__details { grid-column: 7 / -1; }
.case__details > p:first-child { padding-block-end: var(--space-12); }
.case__text { padding-block-start: var(--space-24); }

/* --- Бегущая строка ------------------------------------------------------ */
.marquee { overflow: hidden; background: var(--color-fg); color: var(--color-bg); padding-block: var(--space-12); }
.marquee__track { display: flex; gap: var(--space-48); inline-size: max-content; will-change: transform; }
.marquee__track span { white-space: nowrap; }

.section-head { display: inline-block; background: var(--color-bg-soft); padding: var(--space-16) var(--space-32); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

@media (max-width: 900px) {
  :root { --page-margin: var(--page-margin-mobile); --columns: 6; }
  .bar__row { flex-wrap: wrap; row-gap: var(--space-8); }
  .bar__nav { gap: var(--space-16); }
  .case { margin-block-end: var(--space-32); }
  .case__frame, .case__frame--tall { aspect-ratio: 4 / 3; }
  .case__name, .case__details, .case__go { grid-column: 1 / -1; }
  .case__details { padding-block-start: var(--space-24); }
  .case__go { padding-block-start: var(--space-16); }
  .section-head { padding: var(--space-12) var(--space-16); }
}