/* About page — standalone (not hydrated by Next). Uses the site tokens from the main CSS chunk. */

html { background: var(--bg); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }

/* reveal on scroll — only when JS runs */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.ab { overflow-x: clip; }
.ab-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); box-sizing: border-box; }

/* ---------- hero ---------- */
.ab-hero { display: grid; gap: clamp(32px, 5vw, 72px); padding-top: clamp(104px, 12vw, 160px); align-items: end; }
@media (min-width: 900px) { .ab-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

.ab-hero__text { container-type: inline-size; min-width: 0; }
.ab-hero__name { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; line-height: .84; font-size: 11.6cqi; margin-top: 20px; white-space: nowrap; }
:lang(ru) .ab-hero__name { font-stretch: 100%; font-size: 12cqi; line-height: .9; }
.ab-hero__line { display: block; }
.ab-hero__line > span { display: inline-block; }
.js .ab-hero__line { overflow: hidden; padding-bottom: .04em; }
.js .ab-hero__line > span { transform: translateY(105%); transition: transform 1.1s var(--ease-reveal); transition-delay: var(--d, 0s); }
.js .ab-hero__name.is-in .ab-hero__line > span { transform: none; }

.ab-hero__lead { margin-top: clamp(24px, 3vw, 40px); max-width: 34ch; }

.ab-hero__portrait { position: relative; aspect-ratio: 1; border-radius: clamp(8px, .82vw, 16px); overflow: hidden; background: #fff; width: 100%; max-width: 520px; justify-self: end; }
.ab-hero__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.06); transform-origin: 50% 20%; transition: transform 1.2s var(--ease-reveal); }
@media (hover: hover) { .ab-hero__portrait:hover img { transform: scale(1.12); } }
.ab-hero__tag { position: absolute; left: 14px; bottom: 14px; color: #090909; background: #fff; border: 1px solid #0000001a; border-radius: 9999px; padding: 8px 14px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
@media (max-width: 899px) { .ab-hero__portrait { max-width: none; aspect-ratio: 4 / 3; } }

/* ---------- facts ---------- */
.ab-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(56px, 8vw, 104px); border-top: 1px solid #ffffff14; }
@media (min-width: 900px) { .ab-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-fact { padding: 22px 16px 24px 0; border-bottom: 1px solid #ffffff14; }
.ab-fact dd { margin-top: 10px; font-size: clamp(15px, 1.3vw, 19px); font-weight: 600; letter-spacing: -.02em; line-height: 1.35; color: #ffffffeb; }
.ab-fact a { color: inherit; }

/* ---------- timeline ---------- */
.tl { position: relative; margin-top: clamp(80px, 12vw, 160px); }
.tl__sticky { display: flex; flex-direction: column; }
.tl__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.tl__count { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; letter-spacing: .16em; color: #ffffff8c; }
.tl__count b { color: #fff; font-weight: 700; }

/* default (no JS / reduced motion): a plain horizontal strip you can swipe */
.tl__viewport { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-top: clamp(4px, 1vw, 16px); padding-top: clamp(24px, 3vw, 32px); }
.tl__viewport::-webkit-scrollbar { display: none; }
.tl__track { display: flex; width: max-content; padding: 0 var(--pad); }

.tl { --tl-gap: clamp(40px, 6vw, 112px); }
.tl__track { gap: var(--tl-gap); }
.tl-intro { flex: none; width: clamp(260px, 34vw, 560px); display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; }
.tl-intro__title { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; letter-spacing: -.02em; line-height: .9; font-size: clamp(40px, 5.4vw, 88px); }
.tl-intro__hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; }
.tl-intro__hint svg { width: 20px; height: 20px; animation: tl-nudge 1.6s var(--ease-reveal) infinite; }
@keyframes tl-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

.tl-group { flex: none; display: flex; flex-direction: column; scroll-snap-align: start; }
.tl-group__year { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: 125%; letter-spacing: -.03em; line-height: .8; font-size: clamp(84px, 12.5vw, 208px); white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px #ffffff4d; transition: color .6s var(--ease-reveal), -webkit-text-stroke-color .6s var(--ease-reveal); will-change: transform; padding-right: .04em; text-transform: uppercase; }
:lang(ru) .tl-group__year { font-stretch: 100%; }
.tl-group.is-on .tl-group__year { color: #fff; -webkit-text-stroke-color: #fff; }
.tl-group__events { display: flex; gap: var(--tl-gap); flex: 1; margin-top: clamp(24px, 3vw, 40px); }

.tl-ev { flex: none; width: clamp(260px, 28vw, 420px); position: relative; padding-top: clamp(28px, 3vw, 40px); opacity: .4; transition: opacity .6s var(--ease-reveal); }
.tl-ev:last-child { flex-grow: 1; }
.tl-ev::before { content: ""; position: absolute; top: 0; left: 0; right: calc(-1 * var(--tl-gap)); height: 1px; background: #ffffff1f; }
.tl-group:last-child .tl-ev:last-child::before { right: 0; background: linear-gradient(90deg, #ffffff1f, transparent); }
.tl-ev__dot { position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid #ffffff59; box-sizing: border-box; transition: background-color .4s, border-color .4s, transform .4s var(--ease-reveal); }
.tl-ev.is-on { opacity: 1; }
.tl-ev.is-on .tl-ev__dot { background: #fff; border-color: #fff; transform: scale(1.25); }
.tl-group:last-child .tl-ev.is-on .tl-ev__dot { animation: tl-live 2s ease-out infinite; }
@keyframes tl-live { 0% { box-shadow: 0 0 0 0 #ffffff80; } 70%, 100% { box-shadow: 0 0 0 14px #ffffff00; } }
.tl-ev__title { margin-top: 12px; font-size: clamp(20px, 1.9vw, 28px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; max-width: 20ch; }
.tl-ev__text { margin-top: 14px; max-width: 36ch; }
.tl-ev__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(15px, 1.3vw, 18px); }
.tl-ev__link svg { width: 18px; height: 18px; transition: transform .25s ease-out; }
@media (hover: hover) { .tl-ev__link:hover svg { transform: rotate(45deg); } }
.tl__viewport:not(.is-driven) .tl-ev { opacity: 1; }
.tl__viewport:not(.is-driven) .tl-group__year { color: #fff; -webkit-text-stroke-color: #fff; }

.tl__rail { position: relative; height: 2px; background: #ffffff14; margin: clamp(28px, 4vw, 48px) var(--pad) 0; border-radius: 2px; overflow: hidden; }
.tl__fill { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }

/* pinned mode: vertical scroll drives the track sideways */
.tl.is-pinned .tl__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; justify-content: center; box-sizing: border-box; padding: 72px 0 clamp(24px, 4vh, 48px); }
.tl.is-pinned .tl__viewport { overflow: hidden; scroll-snap-type: none; flex: none; }
.tl.is-pinned .tl__track { will-change: transform; }
.tl.is-pinned .tl__head { padding: 0 var(--pad); }

/* ---------- numbers ---------- */
.ab-section { margin-top: clamp(96px, 12vw, 176px); }
.ab-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid #ffffff14; }
@media (min-width: 900px) { .ab-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-num { padding: clamp(24px, 3vw, 40px) 16px clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid #ffffff14; }
.ab-num__value { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: 125%; letter-spacing: -.03em; line-height: .85; font-size: clamp(64px, 8.6vw, 136px); font-variant-numeric: tabular-nums; }
:lang(ru) .ab-num__value { font-stretch: 100%; }
.ab-num__label { margin-top: 18px; font-size: clamp(15px, 1.3vw, 19px); font-weight: 700; letter-spacing: -.02em; }
.ab-num__sub { margin-top: 6px; font-size: clamp(13px, 1.05vw, 15px); color: #ffffff8c; letter-spacing: -.01em; }

.ab-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 3vw, 36px); }
.ab-chip { border: 1px solid #ffffff1f; border-radius: 9999px; padding: 12px 20px; font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; letter-spacing: -.02em; color: #ffffffd9; transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out; }
@media (hover: hover) { .ab-chip:hover { background: #fff; color: #090909; border-color: #fff; } }

.ab-end { height: clamp(96px, 12vw, 176px); }

/* footer: 8 social links wrap instead of pushing the buttons down; flutes approximated in CSS */
@media (min-width: 768px) { .site-footer__left { flex: 1 1 0; gap: 14px; } .site-footer__social { max-width: 760px; } }
.fluted::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #ffffff00 0, #ffffff14 6px, #00000014 12px, #ffffff00 18px); mix-blend-mode: overlay; }

/* ---------- custom cursor (same as the rest of the site) ---------- */
.cursor { will-change: transform; transition: width .35s cubic-bezier(.22, 1, .36, 1), height .35s cubic-bezier(.22, 1, .36, 1), opacity .2s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .ab-hero__line > span { transition: none; opacity: 1; transform: none; }
  .tl-intro__hint svg, .tl-group:last-child .tl-ev.is-on .tl-ev__dot { animation: none; }
  .ab-hero__portrait img { transition: none; }
}