/* vladbodyfit — tokens and components.
   The default look reproduces Vlad's "Обо мне" artifact 1:1.
   A look overrides tokens (and, if needed, components) under html[data-look="…"]. */

:root {
  --ink: #0e0e0e;
  --paper: #f2f1ee;
  --ink-2: #3e3e3b;     /* body text on paper */
  --ink-3: #5e5e5a;     /* labels on paper */
  --paper-2: #c9c8c3;   /* soft text on ink */
  --paper-3: #a3a3a0;   /* labels on ink */
  --rule-ink: #2c2c2a;
  --rule-ink-2: #3a3a37;
  --rule-paper: #cfcdc7;
  --accent: #7b2a30;

  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Golos Text', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --wrap: 1160px;
  --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
}
a { color: inherit; }
a:hover { opacity: .78; }
img { display: block; width: 100%; height: auto; object-fit: cover; }
figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }

/* language: both languages are in the HTML, CSS shows one */
html:not([lang="en"]) [data-lang="en"] { display: none; }
html[lang="en"] [data-lang="ru"] { display: none; }

/* layout */
.wrap { max-width: var(--wrap); margin: 0 auto; display: flex; flex-direction: column; }
.band { padding: 96px var(--gutter); }
.band--ink { background: var(--ink); color: var(--paper); }

/* type */
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.band--ink .label, .band--ink figcaption { color: var(--paper-3); }
figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.h-xl { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -.03em; }
.h-l  { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -.02em; }
.h-m  { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; }
.pull { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; }
.giant { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 8vw, 112px); line-height: .92; letter-spacing: -.04em; }
.body { margin: 0; color: var(--ink-2); max-width: 56ch; }
.accent { color: var(--accent); }

.meta { display: flex; flex-wrap: wrap; gap: 6px 24px; border-top: 1px solid var(--rule-ink); padding-top: 14px; }
.meta span { white-space: nowrap; }

/* horizontal rail of cards */
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail > figure { flex: 0 0 min(78%, 340px); scroll-snap-align: start; }
.rail--square img { aspect-ratio: 1 / 1; }
.rail--tall img { aspect-ratio: 4 / 5; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.btn--fill { min-height: 52px; padding: 0 28px; background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* hero */
.hero-band { padding: 12px var(--gutter) 64px; }
.hero-band .wrap { gap: 40px; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  border-bottom: 1px solid var(--rule-ink);
  padding-bottom: 6px;
}
.lang { display: flex; align-items: center; }
.lang button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--paper-3);
  text-decoration: none;
  text-underline-offset: 6px;
}
.lang button[aria-pressed="true"] { color: var(--paper); text-decoration: underline; }
.lang .sep { color: var(--ink-3); }
.hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
.hero__img { flex: 1 1 320px; min-width: 0; display: flex; }
.hero__img img { aspect-ratio: 1 / 1; }
.hero__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero__text .h-m { max-width: 22ch; }

/* story */
.story-band { padding: 96px var(--gutter) 72px; }
.story-band .wrap { gap: 48px; }
.story { display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.story .pull { max-width: 32ch; }
.fig-father { width: 100%; max-width: 320px; }
.fig-father img { aspect-ratio: 3 / 4; }
.creed { max-width: 32ch; color: var(--ink); }

/* on myself */
.self-band .wrap { gap: 40px; }
.self-band .h-l { max-width: 22ch; }

/* club */
.club-band { padding: 96px var(--gutter) 40px; }
.club-band .wrap { gap: 40px; }
.club-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.pair { display: flex; flex-wrap: wrap; gap: 16px; }
.pair figure { flex: 1 1 150px; min-width: 0; }
.pair img, .pair video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pair .on-ink { background: var(--ink); }
.wide img { aspect-ratio: 4 / 3; object-position: center 75%; }
.wide figcaption { max-width: var(--wrap); width: 100%; margin: 0 auto; padding: 0 var(--gutter); }

.sched-band { padding: 40px var(--gutter) 96px; }
.sched-band .wrap { gap: 24px; }
.sched-band .pull { border-top: 1px solid var(--rule-paper); padding-top: 20px; }
.sched { display: flex; flex-direction: column; }
.sched .label { padding-bottom: 10px; }
.sched__row { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--rule-paper); padding: 14px 0; }
.sched__row:first-of-type { border-top-color: var(--ink); }
.sched__row:last-of-type { border-bottom: 1px solid var(--rule-paper); }
.sched__row strong { font-weight: 600; }
.sched__row span { color: var(--ink-3); }
.sched-band .btn { align-self: flex-start; }

/* footer */
.foot-band { padding: 96px var(--gutter) 40px; }
.foot-band .wrap { gap: 32px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.cta span { color: var(--paper-2); }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  border-top: 1px solid var(--rule-ink-2);
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.foot-links nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links .label { color: var(--paper-3); }