/* =========================================================
   ARTKA.ORG — Kinetic Maximalist
   Black · Acid · Unbounded
   ========================================================= */

/* ---------------------------------------------------------
   01 · TOKENS
   --------------------------------------------------------- */
:root {
    /* Surface */
    --ink:        #08080a;
    --ink-2:      #101014;
    --ink-3:      #17171d;
    --paper:      #f2f2ec;

    /* Accent */
    --acid:       #d8ff3e;
    --acid-deep:  #b4d92b;
    --signal:     #ff3b1f;

    /* Text */
    --fg:         #f2f2ec;
    --fg-dim:     #9a9a92;
    --fg-faint:   #85857e;   /* 5.2:1 on --ink — AA for the small mono labels */

    /* Lines */
    --line:       rgba(242, 242, 236, .14);
    --line-hard:  rgba(242, 242, 236, .28);
    --line-ink:   rgba(8, 8, 10, .18);

    /* Type */
    --display: "Unbounded", "Golos Text", ui-sans-serif, sans-serif;
    --body:    "Golos Text", ui-sans-serif, system-ui, sans-serif;
    --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

    /* Rhythm */
    --gutter:  clamp(1.25rem, 4vw, 5rem);
    --bleed:   clamp(1.25rem, 4vw, 5rem);
    --sec-gap: clamp(5rem, 12vw, 11rem);

    /* Motion */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.76, 0, .24, 1);
    --snap: cubic-bezier(.22, 1.4, .36, 1);
    --t-fast: 180ms;
    --t: 420ms;
    --t-slow: 900ms;
}

/* ---------------------------------------------------------
   02 · RESET + BASE
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--fg);
    font-family: var(--body);
    font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
    line-height: 1.55;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a {
    color: inherit;
    text-decoration: none;
}

::selection { background: var(--acid); color: var(--ink); }

:focus-visible {
    outline: 3px solid var(--acid);
    outline-offset: 3px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Paint lives on the wrapper <svg>, never on the <symbol>: inside a <use>
   shadow tree `currentColor` resolves against the insertion point only when
   the property is left unspecified on the referenced element. */
.ic {
    width: 1em; height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
.ic--fill { fill: currentColor; stroke: none; }
.ic--mark { width: 100%; height: 100%; stroke-width: 2.6; }

/* Scrollbar */
html { scrollbar-color: var(--acid-deep) var(--ink); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--acid-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--acid); }

/* ---------------------------------------------------------
   03 · TEXTURE + CHROME
   --------------------------------------------------------- */
.grain {
    position: fixed;
    inset: -50%;
    z-index: 900;
    pointer-events: none;
    opacity: .32;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    animation: grainShift 700ms steps(3) infinite;
}

@keyframes grainShift {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-2%, 1%); }
    66%  { transform: translate(1%, -2%); }
    100% { transform: translate(0, 0); }
}

.progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 1000;
    background: transparent;
    pointer-events: none;
}
.progress i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--acid);
    box-shadow: 0 0 18px rgba(216, 255, 62, .8);
}

.skip {
    position: fixed;
    top: .5rem; left: .5rem;
    z-index: 1100;
    padding: .6rem 1rem;
    background: var(--acid);
    color: var(--ink);
    font: 700 .8rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    transform: translateY(-200%);
    transition: transform var(--t-fast) var(--ease-out);
}
.skip:focus-visible { transform: translateY(0); }

/* ---------------------------------------------------------
   04 · NAV
   --------------------------------------------------------- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem var(--bleed);
    background: color-mix(in srgb, var(--ink) 78%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
    transition: transform var(--t) var(--ease-out), background var(--t) linear;
}
.nav.is-hidden { transform: translateY(-105%); }

.nav__mark {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font: 900 1.05rem/1 var(--display);
    letter-spacing: -.02em;
    padding: .35rem .55rem;
    border: 1px solid var(--line-hard);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.nav__mark:hover { background: var(--acid); color: var(--ink); border-color: var(--acid); }

.nav__mark-bars { display: flex; gap: 2px; align-items: flex-end; height: .85rem; }
.nav__mark-bars i {
    width: 3px;
    background: var(--acid);
    animation: eq 1.1s var(--ease-in-out) infinite alternate;
}
.nav__mark-bars i:nth-child(1) { height: 40%; animation-delay: 0ms; }
.nav__mark-bars i:nth-child(2) { height: 90%; animation-delay: 160ms; }
.nav__mark-bars i:nth-child(3) { height: 60%; animation-delay: 320ms; }
.nav__mark:hover .nav__mark-bars i { background: var(--ink); }

@keyframes eq { from { height: 22%; } to { height: 100%; } }

.nav__index {
    display: flex;
    gap: .2rem;
    margin-inline: auto;
    overflow: hidden;
}
.nav__index a {
    font: 500 .65rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fg-dim);
    padding: .4rem .45rem;
    white-space: nowrap;
    transition: color var(--t-fast), background var(--t-fast);
}
.nav__index a b { color: var(--acid); font-weight: 700; margin-right: .35rem; }
.nav__index a:hover { color: var(--ink); background: var(--acid); }
.nav__index a:hover b { color: var(--ink); }
.nav__index a.is-active { color: var(--fg); }

.nav__right { display: flex; align-items: center; gap: .9rem; }

.nav__status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font: 500 .68rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fg-dim);
}
.nav__status i {
    width: 7px; height: 7px;
    background: var(--acid);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(216, 255, 62, .7);
    animation: ping 2.2s var(--ease-out) infinite;
}
@keyframes ping {
    0%   { box-shadow: 0 0 0 0 rgba(216, 255, 62, .7); }
    70%  { box-shadow: 0 0 0 9px rgba(216, 255, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(216, 255, 62, 0); }
}

.lang {
    position: relative;
    display: flex;
    border: 1px solid var(--line-hard);
    isolation: isolate;
}
.lang__btn {
    position: relative;
    z-index: 2;
    padding: .4rem .65rem;
    font: 700 .7rem/1 var(--mono);
    letter-spacing: .08em;
    color: var(--fg-dim);
    transition: color var(--t-fast) linear;
}
.lang__btn.is-active { color: var(--ink); }
.lang__pill {
    position: absolute;
    z-index: 1;
    top: 0; bottom: 0; left: 0;
    width: 50%;
    background: var(--acid);
    transition: transform var(--t) var(--snap);
}
.lang[data-lang="ru"] .lang__pill { transform: translateX(100%); }

/* ---------------------------------------------------------
   05 · HERO
   --------------------------------------------------------- */
.hero {
    position: relative;
    padding: clamp(6rem, 12vh, 8.5rem) var(--bleed) clamp(2.5rem, 5vw, 4rem);
    overflow: hidden;
}

.hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 6)),
        radial-gradient(120% 80% at 78% 0%, rgba(216, 255, 62, .16), transparent 62%),
        radial-gradient(90% 70% at 0% 100%, rgba(255, 59, 31, .1), transparent 60%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

.hero > *:not(.hero__grid) { position: relative; z-index: 1; }

.hero__kicker {
    font: 500 .74rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--acid);
    margin-bottom: clamp(1rem, 2vw, 1.75rem);
    padding-left: 1.6rem;
    position: relative;
}
.hero__kicker::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 1.1rem; height: 1px;
    background: var(--acid);
}

/* Sized so the longest line (9 uppercase glyphs of Unbounded 900) still
   clears the gutters. Verified at 375 / 768 / 1440 / 1920. */
.hero__name {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(2.6rem, 11.6vw, 10.5rem);
    line-height: .84;
    letter-spacing: -.05em;
    text-transform: uppercase;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.hero__name .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__name .line--indent { padding-left: clamp(0rem, 9vw, 11rem); }
.hero__name .line__i {
    display: inline-block;
    transform: translateY(115%);
    animation: riseIn 1s var(--ease-out) forwards;
}
.hero__name .line:nth-child(1) .line__i { animation-delay: 120ms; }
.hero__name .line:nth-child(2) .line__i { animation-delay: 260ms; }

@keyframes riseIn { to { transform: translateY(0); } }

.hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    padding-block: clamp(1rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
}

.hero__text { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: .5rem; }

.hero__bio {
    font-size: clamp(1.05rem, .95rem + .7vw, 1.6rem);
    line-height: 1.42;
    letter-spacing: -.012em;
    max-width: 34ch;
    color: var(--fg);
    text-wrap: pretty;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1.4rem;
    border: 1px solid var(--line-hard);
    font: 700 .78rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .11em;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
                border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.btn .ic { transition: transform var(--t) var(--snap); }
.btn:hover { background: var(--fg); color: var(--ink); border-color: var(--fg); transform: translate(-2px, -2px); }
.btn:hover .ic { transform: translate(3px, -3px); }
.btn--fill { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.btn--fill:hover { background: var(--fg); border-color: var(--fg); }

/* Portrait */
.portrait { position: relative; margin: 0; max-width: 30rem; }
.portrait__frame {
    position: relative;
    border: 1px solid var(--line-hard);
    overflow: hidden;
    transform: rotate(-1.6deg);
    transition: transform var(--t) var(--snap);
}
.portrait__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--acid);
    mix-blend-mode: color;
    opacity: .55;
    transition: opacity var(--t) linear;
    pointer-events: none;
}
/* photo1.jpg is a 800x533 landscape headshot — keep its native ratio
   instead of force-cropping it into a portrait frame. */
.portrait__frame img {
    width: 100%;
    height: auto;          /* beats the height="" presentational hint */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 55% 42%;
    filter: grayscale(1) contrast(1.18) brightness(.92);
    transition: filter var(--t) linear, transform var(--t-slow) var(--ease-out);
}
.portrait:hover .portrait__frame { transform: rotate(0deg); }
.portrait:hover .portrait__frame::after { opacity: 0; }
.portrait:hover .portrait__frame img { filter: grayscale(0) contrast(1.02); transform: scale(1.03); }

.portrait__tag {
    position: absolute;
    left: -.35rem;
    bottom: -.9rem;
    background: var(--acid);
    color: var(--ink);
    padding: .45rem .8rem;
    font: 700 .7rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* Stats */
/* 6 stats: 3 columns desktop, 2 on narrow — both divide evenly, no orphan cell. */
.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.stat {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: clamp(1.1rem, 2.5vw, 2rem);
    transition: background var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.stat:hover { background: var(--acid); color: var(--ink); }
.stat__v {
    display: block;
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(2.4rem, 6.5vw, 5.5rem);
    line-height: .9;
    letter-spacing: -.05em;
    color: var(--acid);
    transition: color var(--t) linear;
}
.stat:hover .stat__v { color: var(--ink); }
.stat__l {
    display: block;
    margin-top: .7rem;
    font: 500 .72rem/1.4 var(--mono);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--fg-dim);
    transition: color var(--t) linear;
}
.stat:hover .stat__l { color: var(--ink); }

.hero__scroll {
    margin-top: clamp(2rem, 4vw, 3rem);
    font: 500 .68rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--fg-faint);
    display: flex;
    align-items: center;
    gap: .6rem;
}
.hero__scroll::after {
    content: "";
    width: 1px; height: 2.5rem;
    background: linear-gradient(var(--acid), transparent);
    animation: drop 1.8s var(--ease-in-out) infinite;
    transform-origin: top;
}
@keyframes drop { 0%, 100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------------------------------------------------------
   06 · MARQUEE
   --------------------------------------------------------- */
/* The band clips the tilted marquee so the rotation never widens the document. */
.band {
    overflow: hidden;
    padding-block: clamp(2rem, 5vw, 3.5rem);
}
.marquee {
    background: var(--acid);
    color: var(--ink);
    border-block: 1px solid var(--ink);
    overflow: hidden;
    padding-block: .55rem;
    transform: rotate(-1.2deg) scale(1.04);
}
.marquee__track {
    display: flex;
    width: max-content;
    gap: 2.5rem;
    padding-right: 2.5rem;
    animation: slide 34s linear infinite;
}
.marquee__track--rev {
    animation-direction: reverse;
    animation-duration: 46s;
    opacity: .55;
    font-size: .82em;
}
.marquee__track span {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    font: 800 clamp(1rem, 2.4vw, 2rem)/1 var(--display);
    text-transform: uppercase;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.marquee__track span::after {
    content: "✳";
    font-size: .6em;
    opacity: .7;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------
   07 · SECTION SHELL
   --------------------------------------------------------- */
.sec {
    padding: var(--sec-gap) var(--bleed);
    position: relative;
}

.sec__head {
    position: relative;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
    padding-top: clamp(1rem, 3vw, 2rem);
    border-top: 2px solid currentColor;
}
.sec__num {
    position: absolute;
    top: clamp(-2.6rem, -5vw, -4.2rem);
    right: 0;
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(3.5rem, 11vw, 9rem);
    line-height: 1;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--line-hard);
    pointer-events: none;
    user-select: none;
}
.sec__title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(2.1rem, 7.5vw, 5.5rem);
    line-height: .92;
    letter-spacing: -.045em;
    text-transform: uppercase;
    max-width: 14ch;
    text-wrap: balance;
}
.sec__sub {
    margin-top: 1rem;
    font: 500 .78rem/1.5 var(--mono);
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--fg-dim);
    max-width: 44ch;
}

/* Inverted (acid) sections */
.sec--invert {
    background: var(--acid);
    color: var(--ink);
}
.sec--invert .sec__num { -webkit-text-stroke: 1.5px rgba(8, 8, 10, .28); }
.sec--invert .sec__sub { color: rgba(8, 8, 10, .62); }

/* ---------------------------------------------------------
   08 · PRODUCTS
   --------------------------------------------------------- */
.products { border-top: 1px solid var(--line); }

.product {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
    padding: clamp(1.6rem, 3.5vw, 2.75rem) 0;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    transition: color var(--t) var(--ease-out), padding-inline var(--t) var(--ease-out);
}
.product::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--acid);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--t) var(--ease-in-out);
    z-index: 0;
}
.product > * { position: relative; z-index: 1; }
.product:hover { color: var(--ink); padding-inline: clamp(.5rem, 2vw, 1.75rem); }
.product:hover::before { transform: scaleY(1); }

.product__mark { width: 3.2rem; height: 3.2rem; color: var(--acid); transition: color var(--t) linear, transform var(--t-slow) var(--snap); }
.product__mark svg { width: 100%; height: 100%; }
.product:hover .product__mark { color: var(--ink); transform: rotate(-18deg) scale(1.08); }

.product__id { display: flex; flex-direction: column; gap: .55rem; }
.product__title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 3rem);
    line-height: .96;
    letter-spacing: -.04em;
}
.product__kind {
    font: 500 .72rem/1.4 var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fg-dim);
    transition: color var(--t) linear;
}
.product:hover .product__kind { color: rgba(8, 8, 10, .65); }

.product__status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    align-self: flex-start;
    padding: .28rem .55rem;
    border: 1px solid currentColor;
    font: 700 .62rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.product__status[data-status="live"] { color: var(--acid); }
.product__status[data-status="live"]::before {
    content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%;
    animation: ping 2.2s var(--ease-out) infinite;
}
.product__status[data-status="content"] { color: var(--signal); }
.product__status[data-status="side"] { color: var(--fg-faint); }
.product:hover .product__status { color: var(--ink); }

.product__body { display: flex; flex-direction: column; gap: .9rem; }
.product__tagline {
    font-size: clamp(1rem, .95rem + .45vw, 1.35rem);
    line-height: 1.3;
    letter-spacing: -.015em;
    font-weight: 600;
}
.product__desc { font-size: .95rem; line-height: 1.55; color: var(--fg-dim); transition: color var(--t) linear; max-width: 46ch; }
.product:hover .product__desc { color: rgba(8, 8, 10, .72); }

.product__points { display: flex; flex-wrap: wrap; gap: .4rem; }
.product__points li {
    padding: .3rem .6rem;
    border: 1px solid var(--line);
    font: 400 .68rem/1.3 var(--mono);
    color: var(--fg-dim);
    transition: border-color var(--t) linear, color var(--t) linear;
}
.product:hover .product__points li { border-color: rgba(8, 8, 10, .3); color: rgba(8, 8, 10, .78); }

.product__go {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .8rem;
    text-align: right;
}
.product__domain {
    font: 500 .7rem/1 var(--mono);
    letter-spacing: .04em;
    color: var(--fg-dim);
    transition: color var(--t) linear;
}
.product:hover .product__domain { color: var(--ink); }
.product__arrow {
    width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
    border: 1px solid var(--line-hard);
    border-radius: 50%;
    transition: background var(--t) var(--ease-out), border-color var(--t) linear, transform var(--t) var(--snap);
}
.product__arrow .ic { width: 1.1rem; height: 1.1rem; }
.product:hover .product__arrow { background: var(--ink); color: var(--acid); border-color: var(--ink); transform: rotate(45deg); }

/* ---------------------------------------------------------
   09 · RECEIPTS
   --------------------------------------------------------- */
.receipts { counter-reset: r; border-top: 1px solid var(--line-ink); }
.receipt {
    counter-increment: r;
    display: grid;
    grid-template-columns: clamp(3rem, 8vw, 6.5rem) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: baseline;
    padding: clamp(1.1rem, 2.5vw, 1.9rem) 0;
    border-bottom: 1px solid var(--line-ink);
    transition: padding-left var(--t) var(--ease-out);
}
.receipt:hover { padding-left: clamp(.5rem, 2vw, 1.5rem); }
.receipt::before {
    content: "0" counter(r);
    font: 900 clamp(1.4rem, 3.5vw, 2.6rem)/1 var(--display);
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1.4px var(--ink);
    transition: color var(--t) linear;
}
.receipt:hover::before { color: var(--ink); }
.receipt p {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.05rem, 1rem + 1.1vw, 2.1rem);
    line-height: 1.16;
    letter-spacing: -.035em;
    text-wrap: balance;
}

/* ---------------------------------------------------------
   10 · TRACK RECORD
   --------------------------------------------------------- */
.track { border-top: 1px solid var(--line); }

.job {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 4rem);
    padding: clamp(2rem, 5vw, 4rem) 0;
    border-bottom: 1px solid var(--line);
}

.job__aside { display: flex; flex-direction: column; gap: .75rem; }
.job__period {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.05rem, 1rem + .8vw, 1.7rem);
    line-height: 1.05;
    letter-spacing: -.035em;
    color: var(--acid);
}
.job__dur, .job__where {
    font: 500 .72rem/1.5 var(--mono);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--fg-dim);
}
.job__rule { height: 1px; background: var(--line-hard); margin-top: .4rem; }

.job__main { display: flex; flex-direction: column; gap: 1.4rem; }
.job__role {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.35rem, 1.1rem + 1.6vw, 2.6rem);
    line-height: 1;
    letter-spacing: -.04em;
}
.job__company {
    font: 500 .8rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--signal);
    margin-top: .6rem;
    display: block;
}
.job__desc { color: var(--fg-dim); max-width: 62ch; font-size: 1rem; }

.job__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
}
.job__block h4 {
    font: 700 .68rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--fg-faint);
    padding-bottom: .6rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--line);
}
.job__block li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: .5rem;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--fg);
}
.job__block li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: .45rem; height: 1px;
    background: var(--acid);
}
.job__block--win li::before { background: var(--signal); }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips li {
    padding: .3rem .6rem;
    border: 1px solid var(--line);
    font: 400 .7rem/1.3 var(--mono);
    color: var(--fg-dim);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.chips li:hover { color: var(--ink); background: var(--acid); border-color: var(--acid); }

/* ---------------------------------------------------------
   11 · ARSENAL
   --------------------------------------------------------- */
.arsenal {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.arsenal li {
    padding: clamp(.7rem, 1.6vw, 1.1rem) clamp(1rem, 2.2vw, 1.6rem);
    border: 1px solid var(--line-hard);
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(.9rem, .85rem + .5vw, 1.35rem);
    letter-spacing: -.025em;
    line-height: 1.1;
    transition: background var(--t) var(--ease-out), color var(--t) var(--ease-out),
                border-color var(--t) linear, transform var(--t) var(--snap);
}
.arsenal li:hover { transform: translate(-3px, -3px) rotate(-1.5deg); background: var(--fg); color: var(--ink); border-color: var(--fg); }
.arsenal li.is-key { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.arsenal li.is-key:hover { background: var(--signal); color: var(--paper); border-color: var(--signal); }

/* ---------------------------------------------------------
   12 · EDUCATION
   --------------------------------------------------------- */
.edu { border-top: 1px solid var(--line); }
.edu__row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 4rem);
    align-items: baseline;
    padding: clamp(1.4rem, 3vw, 2.4rem) 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left var(--t) var(--ease-out);
}
.edu__row:hover { padding-left: clamp(.5rem, 2vw, 1.5rem); }
.edu__years {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.1rem, 1rem + .9vw, 1.8rem);
    letter-spacing: -.04em;
    color: var(--acid);
}
.edu__title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.1rem, 1rem + 1vw, 1.9rem);
    letter-spacing: -.035em;
    line-height: 1.1;
}
.edu__inst {
    margin-top: .5rem;
    font: 500 .76rem/1.4 var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fg-dim);
}

/* ---------------------------------------------------------
   13 · CONTACT
   --------------------------------------------------------- */
.sec--contact { padding-bottom: clamp(3rem, 8vw, 6rem); }
.channels { border-top: 1px solid var(--line); }

.channel {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(.9rem, 2.5vw, 2rem);
    padding: clamp(1.2rem, 3vw, 2.2rem) 0;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    transition: color var(--t) var(--ease-out), padding-inline var(--t) var(--ease-out);
}
.channel::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--acid);
    transform: translateX(-101%);
    transition: transform var(--t) var(--ease-in-out);
}
.channel > * { position: relative; z-index: 1; }
.channel:hover { color: var(--ink); padding-inline: clamp(.5rem, 2vw, 1.75rem); }
.channel:hover::before { transform: translateX(0); }

.channel__ic { width: 1.6rem; height: 1.6rem; color: var(--acid); transition: color var(--t) linear; }
.channel:hover .channel__ic { color: var(--ink); }

.channel__label {
    font: 500 .7rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--fg-dim);
    width: 6.5rem;
    flex: none;
    transition: color var(--t) linear;
}
.channel:hover .channel__label { color: rgba(8, 8, 10, .6); }

.channel__value {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.1rem, 1rem + 1.8vw, 2.8rem);
    line-height: 1;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}
.channel__arrow { margin-left: auto; }
.channel__arrow .ic { width: 1.5rem; height: 1.5rem; transition: transform var(--t) var(--snap); }
.channel:hover .channel__arrow .ic { transform: translate(5px, -5px); }

/* ---------------------------------------------------------
   14 · FOOTER
   --------------------------------------------------------- */
.foot {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--bleed) clamp(1.5rem, 3vw, 2.5rem);
}
.foot__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: clamp(1.5rem, 4vw, 3rem);
    border-bottom: 1px solid var(--line);
}
.foot__wordmark {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(2rem, 9vw, 7rem);
    line-height: .85;
    letter-spacing: -.05em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--line-hard);
    transition: color var(--t) linear;
}
.foot__wordmark:hover { color: var(--acid); }
.foot__meta {
    font: 500 .7rem/1.4 var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fg-faint);
}

.foot__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(1.75rem, 4vw, 3rem);
}
.foot__col h5 {
    margin: 0 0 1rem;
    font: 700 .66rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--acid);
}
.foot__col a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .28rem 0;
    font-size: .9rem;
    color: var(--fg-dim);
    transition: color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.foot__col a .ic { width: .95rem; height: .95rem; }
.foot__col a:hover { color: var(--acid); transform: translateX(4px); }
.foot__col li { display: block; }

.foot__rights {
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font: 400 .68rem/1.4 var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fg-faint);
}

/* ---------------------------------------------------------
   15 · REVEAL
   --------------------------------------------------------- */
.rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.rv.is-in { opacity: 1; transform: none; }
.rv[data-rv="1"] { transition-delay: 80ms; }
.rv[data-rv="2"] { transition-delay: 160ms; }
.rv[data-rv="3"] { transition-delay: 240ms; }
.rv[data-rv="4"] { transition-delay: 320ms; }
.rv[data-rv="5"] { transition-delay: 400ms; }
.rv[data-rv="6"] { transition-delay: 480ms; }

/* ---------------------------------------------------------
   16 · RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1080px) {
    .nav__index { display: none; }
    .product { grid-template-columns: 3rem minmax(0, 1fr) auto; }
    .product__body { grid-column: 2 / -1; }
    .product__go { grid-column: 2 / -1; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

@media (max-width: 860px) {
    .hero__body { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .portrait { max-width: 18rem; order: 2; }
    .hero__text { order: 1; }
    .hero__name .line--indent { padding-left: 0; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .job, .edu__row { grid-template-columns: minmax(0, 1fr); }
    .job__rule { display: none; }
    .job__aside { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
}

@media (max-width: 620px) {
    .nav__status { display: none; }
    .product { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .9rem; }
    .product__mark { width: 2.2rem; height: 2.2rem; }
    .product__body, .product__go { grid-column: 1 / -1; }
    .channel__label { display: none; }
    /* Handles like @TheArtofDevelopment are single unbreakable tokens, so give
       them their own full-width line instead of letting them snap mid-word. */
    .channel { flex-wrap: wrap; row-gap: .55rem; }
    .channel__ic { order: 1; }
    .channel__arrow { order: 2; margin-left: auto; }
    .channel__value { order: 3; flex: 1 0 100%; font-size: 1.3rem; letter-spacing: -.03em; }
    .receipt { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .foot__top { flex-direction: column; align-items: flex-start; }
    .hero__kicker { letter-spacing: .14em; }
    .btn { flex: 1 1 100%; justify-content: space-between; }
    /* Below ~360px the base clamp minimum would push "Карапетов" past the gutter. */
    .hero__name { font-size: clamp(2.1rem, 10.9vw, 4.5rem); }
}

/* ---------------------------------------------------------
   17 · MOTION / PRINT
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .hero__name .line__i { transform: none; }
    .rv { opacity: 1; transform: none; }
    .grain { animation: none; }
    .marquee__track { animation: none; }
}

@media print {
    .nav, .grain, .progress, .marquee, .hero__scroll, .skip { display: none !important; }
    body { background: #fff; color: #000; }
    .sec { padding: 1.5rem 0; break-inside: avoid; }
    .sec--invert { background: #fff; color: #000; }
    .product::before, .channel::before { display: none; }
}