@import url("/tokens.css");

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 var(--text-body) / 1.5 var(--font-text); letter-spacing: -0.005em; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
p, h1, h2, h3, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Browser surfaces follow the palette: selection, caret, scrollbar, focus. */
::selection { background: var(--ink); color: var(--canvas); }
:root { accent-color: var(--ink); caret-color: var(--ink); scrollbar-color: var(--ink-muted) transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; transition: none; }

.gutter {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.measure { max-width: var(--measure); }
/* Grid and flex children never widen their track because of a long word. */
.hero-copy > *, .chapter-copy > *, .section-head > *, .footer-brand > *, .footer-contact > * { min-width: 0; }

/* Skip link */
.skip { position: absolute; left: var(--space-16); top: -100px; z-index: 30; padding: 12px 16px; background: var(--ink); color: var(--canvas); font: 500 var(--text-button) / 1.2 var(--font-text); text-decoration: none; }
.skip:focus { top: var(--space-16); }

/* Mark and wordmark */
.mark { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; color: var(--ink); text-decoration: none; }
.mark svg { width: 26px; height: 23px; }

/* Header: a transparent band over the dossier photo, blurred so the mark stays readable on any crop. */
.site-header { position: absolute; inset: 0 0 auto; z-index: 10; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)); backdrop-filter: blur(var(--backdrop-blur)); -webkit-backdrop-filter: blur(var(--backdrop-blur)); mask-image: linear-gradient(to bottom, #000 60%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.site-header--static { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; mask-image: none; -webkit-mask-image: none; }
.site-nav { display: flex; gap: var(--space-24); }
.site-nav a, .nav-toggle { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-4); text-decoration: none; --ul-offset: 11px; }
.nav-toggle { display: none; }
/* Up to 839px the five links plus the pill do not fit beside the mark, so the header collapses to the index link earlier than the dossier does. */
@media (max-width: 839px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header .pill { padding-inline: var(--space-20); }
}
/* Below 390px the mark keeps only its sign (the link is still labelled), gaps tighten and the pill narrows so the band fits 320px. */
@media (max-width: 389px) {
  .site-header { gap: var(--space-16); }
  .mark span { display: none; }
  .site-header .pill { padding-inline: var(--space-16); }
}

/* Underlines: a hairline at rest where the link sits in running text, an ink line that draws from the left on hover and leaves to the right. Transform only. */
.site-nav a, .nav-toggle, .index a, .legal a, .textlink, .footer-contact a { position: relative; text-decoration: none; }
.site-nav a::after, .nav-toggle::after, .index a::after, .legal a::after, .textlink::after, .footer-contact a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--ul-offset, 0); height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--m-out) var(--ease);
}
.textlink::before, .legal a::before, .footer-contact a::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--ul-offset, 0); height: 1px; background: var(--rule); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Actions */
.pill { display: inline-flex; align-items: center; min-height: 46px; font: 500 var(--text-button) / 1.2 var(--font-text); color: var(--canvas); background: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-24); padding: 0 var(--space-32); text-decoration: none; white-space: nowrap; }
.textlink { display: inline-block; padding-bottom: 2px; font: 500 var(--text-button) / 1.2 var(--font-text); color: var(--ink); }
.actions { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; }

/* Hover and press layer: fine pointers only; every control also answers keyboard focus. */
.pill, .textlink, .site-nav a, .nav-toggle, .index a, .legal a, .footer-contact a { transition: transform var(--m-out) var(--ease), background-color var(--m-out) var(--ease), color var(--m-out) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { transform: translateY(-1px); background-color: color-mix(in srgb, var(--ink) 86%, var(--canvas)); transition-duration: var(--m-in); }
  .textlink:hover::after, .site-nav a:hover::after, .nav-toggle:hover::after, .index a:hover::after, .legal a:hover::after, .footer-contact a:hover::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--m-in); }
}
.pill:active { transform: translateY(1px) scale(0.985); transition-duration: var(--m-press); }
.textlink:active { transform: scale(0.985); transition-duration: var(--m-press); }

/* Photo slots: the placeholder field shows only until the picture has loaded. */
.photo { position: relative; background: var(--photo-placeholder); overflow: hidden; }
.photo picture, .photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo img { object-fit: cover; }
.chapter-photo img { object-position: 50% 40%; }

/* Dossier: the full-length photograph on the left fills the first screen, the hero copy sits beside it on the right.
   The photograph bleeds to the left edge and scrolls 1:1 with the page, as on figure.ai; the film follows below. */
.dossier { display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); grid-template-rows: minmax(100svh, auto); }
.dossier-photo { grid-column: 1; grid-row: 1; }
.dossier-photo picture, .dossier-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dossier-photo img { object-fit: cover; object-position: 40% 0; } /* колонка показывает верх кадра: стопка и рука с листом */
.hero-copy { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-24); padding-block: calc(var(--header-height) + var(--space-40)) var(--space-80); padding-left: var(--space-56); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); min-width: 0; }
.hero-copy .actions { margin-top: var(--space-8); }
/* The heading shares its row with the photo column, so its size follows the copy column rather than the viewport:
   the longest word, ЗДОРОВЬЯ, is about 6.7 em wide in Unbounded 300 and has to fit the content box at 768–1100px. */
.hero-copy { container-type: inline-size; }
@supports (font-size: 1cqi) { .hero-copy h1 { font-size: min(var(--text-display), 14cqi); } }
@supports not (font-size: 1cqi) { @media (min-width: 768px) and (max-width: 1150px) { .hero-copy h1 { font-size: clamp(2.5rem, 8.72vw - 1.5rem, 6rem); } } }

/* The hero enters once on load: the copy rises 14px line by line, the picture settles from 1.05.
   Transform only, so the words stay readable even where animations never run (frozen tabs, link previews, print). */
@keyframes rise { from { transform: translateY(14px); } to { transform: translateY(0); } }
@keyframes settle { from { transform: scale(1.05); } to { transform: scale(1); } }
.hero-copy > * { animation: rise var(--m-rise) var(--ease-enter) both; }
.hero-copy > :nth-child(1) { animation-delay: 60ms; }
.hero-copy > :nth-child(2) { animation-delay: 120ms; }
.hero-copy > :nth-child(3) { animation-delay: 180ms; }
.dossier-photo img { animation: settle var(--m-settle) var(--ease-enter) both; transform-origin: 30% 20%; }

@media (max-width: 767px) {
  /* On a phone the photograph becomes a band above the hero copy. */
  .dossier { grid-template-columns: 1fr; grid-template-rows: auto; }
  .dossier-photo, .hero-copy { grid-column: 1; grid-row: auto; }
  .dossier-photo { min-height: 56svh; }
  .dossier-photo img { object-position: 50% 0; }
  .hero-copy { padding-block: var(--space-48); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); }
}

/* 02 · Film: a full-bleed 16:9 loop on the dark canvas. The text lives inside the frame; the page adds a caption and a pause. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.film { background: var(--canvas); color: var(--ink); }
.film-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-toggle { position: absolute; right: max(var(--gutter), env(safe-area-inset-right, 0px)); bottom: var(--space-24); min-height: 40px; padding: 0 var(--space-20); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-24); background: rgba(12, 12, 12, 0.55); color: #fff; font: 500 var(--text-small) / 1 var(--font-text); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color var(--m-out) var(--ease), border-color var(--m-out) var(--ease); }
.film-toggle:hover { background: rgba(12, 12, 12, 0.8); border-color: #fff; }
.film-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.film-caption { margin: 0; padding-block: var(--space-16) var(--space-24); color: var(--ink-muted); }

/* Photo chapter */
.chapter { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--canvas); color: var(--ink); overflow: hidden; }
.chapter-photo { position: absolute; inset: 0; }
.chapter-scrim { position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(to top, var(--scrim), rgba(0, 0, 0, 0)); }
.chapter-copy { position: relative; z-index: 1; max-width: 560px; display: grid; gap: var(--space-16); padding-block: var(--space-48); }
@media (max-width: 767px) { .chapter { min-height: 70svh; } }

/* White chapters: the h2 first, the content under it. */
.section { padding-block: var(--space-96); }
.section--dark { background: var(--canvas); color: var(--ink); }
.section-head { display: grid; gap: var(--space-16); max-width: var(--measure); margin-bottom: var(--space-48); }

.spec { border-top: 1px solid var(--rule); }
.spec-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-24); padding-block: var(--space-24); border-bottom: 1px solid var(--rule); }
.spec--numbered .spec-row { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.5fr); }
.spec-row .t-index { padding-top: 6px; }
@media (max-width: 767px) {
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .spec--numbered .spec-row { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-8) var(--space-16); }
  .spec--numbered .spec-row p { grid-column: 2; }
}

.scheme { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); margin-bottom: var(--space-40); font: 400 var(--text-small) / 1.4 var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; }
.scheme li { display: flex; gap: var(--space-16); }
.scheme li:not(:last-child)::after { content: "\2192"; color: var(--ink-muted); }

.note { max-width: var(--measure); margin-top: var(--space-40); color: var(--ink-muted); }

.facts { border-top: 1px solid var(--rule); max-width: 760px; }
.facts li { padding-block: var(--space-20); border-bottom: 1px solid var(--rule); }

.status { margin-top: var(--space-8); color: var(--ink-muted); }

.links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-24); margin-top: var(--space-56); border-top: 1px solid var(--rule); }
.links li { padding-block: var(--space-20); border-bottom: 1px solid var(--rule); font: 400 var(--text-nav) / 1.4 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 767px) { .links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Footer: wordmark and contact on the left, the index of sections on the right, the legal row across. */
.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-48); padding-block: var(--space-96) var(--space-32); }
.footer-brand { display: grid; align-content: space-between; gap: var(--space-40); min-width: 0; }
.footer-contact { display: grid; gap: var(--space-8); }
.footer-contact a { display: inline-block; width: fit-content; padding-bottom: 1px; font: 400 var(--text-small) / 1.4 var(--font-mono); }
.index { border-top: 1px solid var(--rule); }
.index li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; padding-block: var(--space-8); border-bottom: 1px solid var(--rule); }
.index a { display: inline-block; min-height: 44px; padding-block: 8px; font: 300 clamp(1.25rem, 1rem + 1.5vw, 1.75rem) / 1.11 var(--font-display); text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; --ul-offset: 6px; }
.legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-16) var(--space-32); padding-top: var(--space-24); border-top: 1px solid var(--rule); color: var(--ink-muted); }
.legal nav { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.legal a { display: inline-block; padding-bottom: 1px; color: var(--ink); }
@media (max-width: 767px) { .site-footer { grid-template-columns: 1fr; gap: var(--space-40); padding-top: var(--space-56); } }

/* Document pages: privacy and terms */
.site-header--static + .doc { padding-top: var(--space-56); }
.doc { max-width: var(--measure); padding-block: var(--space-56) var(--space-96); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-20); }
.doc > * { min-width: 0; }
.doc h1 { font-size: clamp(1.25rem, 5.5vw, 1.75rem); overflow-wrap: anywhere; hyphens: auto; }
.doc h2 { margin-top: var(--space-24); }
.doc a { text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color var(--m-out) var(--ease); }
@media (hover: hover) and (pointer: fine) { .doc a:hover { border-color: var(--ink); transition-duration: var(--m-in); } }
.doc code { font: 400 0.9375em / 1 var(--font-mono); }
.site-footer--doc { grid-template-columns: 1fr; padding-top: var(--space-32); gap: 0; }

/* Reduced motion: colours still change and underlines appear without travelling; nothing moves; the hero stands as written. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .dossier-photo img { animation: none; }
  .pill, .textlink, .site-nav a, .nav-toggle, .index a, .legal a, .footer-contact a { transition-property: background-color, color; }
  .site-nav a::after, .nav-toggle::after, .index a::after, .legal a::after, .textlink::after, .footer-contact a::after { transition: none; }
  .pill:hover, .pill:active, .textlink:active { transform: none; }
}