/* ============ Portfolio (brand: egor) ============ */
body{font-weight:450}
.gh__brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;margin-left:2px}

/* ---- hero ---- */
.hero{position:relative; min-height:100svh; padding-top:var(--header-h); display:flex; flex-direction:column}
.hero__grid{display:grid; grid-template-columns:1fr; gap:32px; flex:1}
.hero__copy{display:flex; flex-direction:column; justify-content:center; padding-block:48px 24px}
.hero__title{font-family:var(--font-display); font-weight:700; font-size:clamp(56px, 9.2vw, 150px); line-height:.92; letter-spacing:-.045em; margin:18px 0 26px; text-wrap:balance}
.hero__title em{font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; font-size:1.06em; color:var(--accent)}
.hero__lede{max-width:34ch; font-size:clamp(17px, 1.35vw, 21px); color:var(--ink-2); line-height:1.5; text-wrap:pretty}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.hero__media{position:relative; background:#0B0B0C; overflow:hidden; aspect-ratio:4/5; margin-inline:calc(-1*var(--gutter))}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.hero__media .vtext{position:absolute; right:20px; bottom:26px; color:rgba(244,244,242,.6); z-index:4}
@media (min-width:900px){ .hero__media .vtext{opacity:0} }
.hero__bar{position:absolute; left:0; top:0; width:6px; height:100%; background:var(--accent); z-index:2}
.hero__foot{display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:22px; border-top:1px solid var(--line); font-size:13px; color:var(--mute)}
.hero__stats{display:flex; gap:28px}
.hero__stats b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.scroll-cue{display:inline-flex; align-items:center; gap:10px; letter-spacing:.14em; text-transform:uppercase; font-size:11px; font-weight:700}
.scroll-cue i{display:block; width:1px; height:36px; background:var(--ink); transform-origin:top; animation:cue 2s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom}}

@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--gutter)}
  .hero__copy{padding-block:0}
  .hero__media{aspect-ratio:auto; min-height:calc(100svh - var(--header-h) - 76px); margin-inline:0 calc(-1*var(--gutter))}
  .hero__media img{object-position:50% 14%}
}
@media (min-width:1500px){ .hero__media{margin-right:calc((100vw - var(--max))/-2 - var(--gutter))} }

/* ---- marquee band ---- */
.band{border-block:1px solid var(--line); padding-block:18px; font-size:clamp(14px, 1.2vw, 18px); font-weight:600; letter-spacing:.02em; color:var(--ink-2)}
.band .marquee__track>span::after{content:"·"; margin-left:1.2em; color:var(--accent)}

/* ---- section header ---- */
.sh{display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(36px, 5vw, 72px); color:var(--mute); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.sh::after{content:""; flex:1; height:1px; background:var(--line)}
.sh b{color:var(--accent)}

/* ---- manifesto ---- */
.manifesto__big{font-family:var(--font-display); font-weight:600; font-size:clamp(30px, 4.7vw, 74px); line-height:1.04; letter-spacing:-.035em; max-width:22ch; text-wrap:balance}
.manifesto__big em{font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; font-size:1.05em}
.manifesto__grid{display:grid; gap:40px; margin-top:clamp(40px,6vw,88px)}
.manifesto__p{color:var(--ink-2); font-size:clamp(16px,1.25vw,19px); line-height:1.6; max-width:52ch; text-wrap:pretty}
.manifesto__list{display:grid; gap:14px; font-size:15px}
.manifesto__list li{display:grid; grid-template-columns:44px 1fr; gap:12px; padding-block:14px; border-top:1px solid var(--line)}
.manifesto__list li:last-child{border-bottom:1px solid var(--line)}
.manifesto__list b{color:var(--accent); font-variant-numeric:tabular-nums}
@media (min-width:900px){ .manifesto__grid{grid-template-columns:1.2fr .8fr; align-items:start} }

/* ---- work cards ---- */
.work{display:grid; gap:clamp(20px,3vw,40px)}
.card{position:relative; display:grid; overflow:hidden; border-radius:10px; min-height:520px; color:#fff; isolation:isolate; text-decoration:none}
.card__bg{position:absolute; inset:0; z-index:-1}
.card__copy{position:relative; z-index:2; padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; justify-content:flex-end; gap:16px}
.card__idx{position:absolute; top:clamp(22px,3vw,40px); left:clamp(28px,4vw,56px); font-size:13px; letter-spacing:.18em; font-weight:700; text-transform:uppercase; opacity:.8}
.card__title{font-family:var(--font-display); font-weight:700; font-size:clamp(36px,5vw,76px); letter-spacing:-.04em; line-height:.95}
.card__tags{display:flex; flex-wrap:wrap; gap:8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.card__tags span{padding:6px 10px; border:1px solid currentColor; border-radius:999px; opacity:.85}
.card__p{max-width:44ch; font-size:16px; line-height:1.55; opacity:.92; text-wrap:pretty}
.card__link{display:inline-flex; align-items:center; gap:10px; font-weight:700; margin-top:8px}
.card__link .arrow{transition:transform .5s var(--ease-out)}
.card:hover .card__link .arrow{transform:translateX(6px)}
.card__art{position:absolute; z-index:1; pointer-events:none; transition:transform 1.2s var(--ease-out)}
.card:hover .card__art{transform:scale(1.04)}

.card--snappy{background:linear-gradient(135deg,#0C6A90 0%,#05AAB4 55%,#58E3C4 100%)}
.card--snappy .card__title{font-family:'Lilita One','Inter Tight',sans-serif; font-weight:400; letter-spacing:.01em; text-shadow:0 4px 0 rgba(14,42,71,.35)}
.card--snappy .card__art{right:-6%; top:50%; width:min(62%, 620px); height:auto; transform:translateY(-50%) rotate(-6deg); animation:bob 6s ease-in-out infinite}
.card--snappy:hover .card__art{transform:translateY(-50%) rotate(-4deg) scale(1.04)}
@keyframes bob{0%,100%{margin-top:0} 50%{margin-top:-14px}}

.card--kmoi{background:#EFEFEF; color:#000}
.card--kmoi .card__copy,.card--kmoi .card__idx,.card--kmoi .card__vt{color:#fff; mix-blend-mode:difference}
.card--kmoi .card__title{font-family:'Lekton','Inter Tight',monospace; letter-spacing:-.02em}
.card--kmoi .card__block{position:absolute; z-index:0; right:8%; top:22%; width:44%; height:56%; background:#DD4D2F}
.card--kmoi .card__art{right:6%; bottom:-2%; height:104%; width:auto; mix-blend-mode:multiply; filter:grayscale(1) contrast(1.06)}
.card--kmoi .card__tags span{border-color:rgba(0,0,0,.25)}
.card--kmoi .card__vt{position:absolute; right:22px; top:26px; z-index:2}

@media (min-width:900px){
  .card{min-height:620px}
  .card__copy{max-width:56%}
}
@media (max-width:899px){
  .card--snappy .card__art{width:70%; right:-14%; top:6%; transform:rotate(-8deg)}
  .card--snappy .card__copy{padding-top:52%}
  .card--kmoi .card__art{height:66%; right:-4%; bottom:auto; top:2%}
  .card--kmoi .card__block{right:0; top:6%; width:56%; height:48%}
  .card--kmoi .card__copy{padding-top:60%}
}

/* ---- skills ---- */
.skills__grid{display:grid; gap:40px}
.skills__col h3{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,44px); letter-spacing:-.035em; margin-bottom:18px}
.skills__col h3 em{font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--accent)}
.skills__list li{display:grid; grid-template-columns:40px 1fr; gap:14px; padding-block:16px; border-top:1px solid var(--line); font-size:clamp(16px,1.2vw,19px); line-height:1.4}
.skills__list li:last-child{border-bottom:1px solid var(--line)}
.skills__list li > span:first-child{color:var(--mute); font-size:12px; font-weight:700; letter-spacing:.1em; padding-top:.35em; font-variant-numeric:tabular-nums}
.langs{display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:34px; font-size:14px; color:var(--mute)}
.langs b{color:var(--ink); font-weight:700; margin-right:6px}
@media (min-width:900px){ .skills__grid{grid-template-columns:1fr 1fr; gap:var(--gutter)} }

/* ---- about ---- */
.about__grid{display:grid; gap:40px; align-items:center}
.about__media{background:#fff; border-radius:10px; overflow:hidden; aspect-ratio:4/5}
.about__media img{width:100%; height:100%; object-fit:cover; object-position:50% 10%}
.about__text h2{font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4vw,58px); letter-spacing:-.04em; line-height:1; margin-bottom:22px}
.about__text h2 em{font-family:var(--font-serif); font-style:italic; font-weight:400}
.about__text p{color:var(--ink-2); font-size:clamp(16px,1.2vw,19px); line-height:1.6; max-width:50ch; text-wrap:pretty}
.about__text p+p{margin-top:16px}
.facts{margin-top:30px; display:grid; gap:0; font-size:15px}
.facts li{display:grid; grid-template-columns:120px 1fr; gap:14px; padding-block:12px; border-top:1px solid var(--line)}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts li > span:first-child{color:var(--mute); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding-top:.35em}
@media (min-width:900px){ .about__grid{grid-template-columns:5fr 7fr; gap:var(--gutter)} }

/* ---- contact ---- */
.contact{background:var(--ink); color:var(--bg)}
.contact .sh{color:rgba(244,244,242,.6)} .contact .sh::after{background:rgba(244,244,242,.16)}
.contact__title{font-family:var(--font-display); font-weight:700; font-size:clamp(56px,11vw,180px); letter-spacing:-.05em; line-height:.9}
.contact__title em{font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--accent); font-size:1.04em}
.contact__mail{display:inline-block; margin-top:clamp(28px,4vw,56px); font-size:clamp(20px,3.2vw,48px); font-weight:600; letter-spacing:-.03em; position:relative}
.contact__mail::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out)}
.contact__mail:hover::after{transform:scaleX(1)}
.contact__p{margin-top:22px; max-width:46ch; color:rgba(244,244,242,.7); font-size:clamp(16px,1.2vw,19px); line-height:1.6}
.socials{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:clamp(36px,5vw,72px); padding-top:28px; border-top:1px solid rgba(244,244,242,.16)}
.socials a{font-weight:700; font-size:15px; letter-spacing:.02em; position:relative; padding-bottom:2px}
.socials a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out)}
.socials a:hover::after{transform:scaleX(1)}
.contact .gf{border-top-color:rgba(244,244,242,.16); color:rgba(244,244,242,.6)}
.contact .gf a{color:var(--bg)}

/* header over the dark contact section */
.gh[data-on="dark"]{color:var(--bg)}
.gh[data-on="dark"].is-scrolled{background:rgba(11,11,12,.72)}
.gh[data-on="dark"] .gh__switch{border-color:rgba(244,244,242,.25); background:rgba(11,11,12,.3)}
.gh[data-on="dark"] .gh__switch a[aria-current]{background:var(--bg); color:var(--ink)}
.gh[data-on="dark"] .dot{background:var(--accent)}

/* ---- hero v4: full-height face with the name across its foot; the scroll line wipes the name
       and reveals the studio photo, then the photo settles into the right column ---- */
.hero{position:relative; overflow:clip; padding-top:var(--header-h); background:var(--bg)}
.hero__grid{position:relative; z-index:1}
.hero__slot{display:none}
.hero__media{position:relative; z-index:2; background:#0B0B0C; overflow:hidden; aspect-ratio:4/5; margin-inline:calc(-1*var(--gutter))}
.hero__face{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.hero__face--arcane{display:none}
.hero__bar{position:absolute; left:0; top:0; width:6px; height:100%; background:var(--accent); z-index:3}
.hero__name{display:none}
@media (min-width:900px){
  .hero__grid{min-height:calc(100svh - var(--header-h) - 76px)}
  .hero__slot{display:block}
  .hero__media{position:absolute; left:0; top:var(--header-h); aspect-ratio:auto; margin:0; background:var(--bg)}
  .hero__face--arcane{display:block; mix-blend-mode:multiply; filter:contrast(1.04)}
  .hero__face--real{clip-path:inset(100% 0 0 0)}
  .hero__name{display:block; position:absolute; z-index:3; left:calc(var(--gutter)*.6); bottom:-.08em; font-family:var(--font-display); font-weight:800; font-size:clamp(80px, 15.6vw, 280px); line-height:1; letter-spacing:-.055em; white-space:nowrap; text-transform:uppercase; color:#fff; mix-blend-mode:difference; pointer-events:none}
}

/* ---- 01 why: diagonal wipe driven by the scroll (top-left to bottom-right) ---- */
[data-wipe]{--wipe:-20%;
  -webkit-mask-image:linear-gradient(135deg, #000 calc(var(--wipe) - 24%), transparent var(--wipe));
          mask-image:linear-gradient(135deg, #000 calc(var(--wipe) - 24%), transparent var(--wipe))}

/* ---- 02 what: cards come in from the edges and fade through the gutter ---- */
#what{overflow:clip}
.card-wrap{position:relative}
.card-wrap .card{position:relative; z-index:1}

/* ---- 04 who: marker canvas over the portrait ---- */
.about__media{position:relative}
.draw{position:absolute; inset:0; z-index:2; width:100%; height:100%; touch-action:none}

/* ---- skills ---- */
.skills__list li:hover > span:first-child{color:var(--accent)}