/* ============================================================
   Портфолио — Модонов Виктор
   Токены из макета: Accent #D8F000 · Black #13110C · Paper #EFEDE4
   ============================================================ */

:root{
  --accent:#D8F000;
  --black:#13110C;
  --paper:#EFEDE4;
  --bg:#F5F3EB;
  --white:#FFFFFE;

  --muted:rgba(19,17,12,.5);
  --body:rgba(19,17,12,.7);
  --line:rgba(19,17,12,.14);
  --paper-muted:rgba(239,237,228,.8);
  --paper-line:rgba(239,237,228,.5);

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

  --gutter:94px;
  --container:1253px;
  --radius:15px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--black);
  font-family:var(--text);
  font-size:18px;
  line-height:25px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}

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

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--black);padding:12px 20px;
  font-family:var(--mono);font-size:12px;text-transform:uppercase;
}
.skip-link:focus{left:16px;top:16px}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}
@media (min-width:1441px){ .container{padding-inline:0} }

/* --- утилитарная типографика --- */
.mono,.mono-muted{
  font-family:var(--mono);
  font-weight:500;
  font-size:12px;
  line-height:normal;
  text-transform:uppercase;
}
.mono-muted{color:var(--muted)}
.muted{color:var(--muted)}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;
  top:27px;
  left:0;
  right:0;
  z-index:50;
  padding-inline:clamp(16px,4.4vw,63px);
}

.header__pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:1313px;
  margin-inline:auto;
  padding:23px 30px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:100px;
}

.header__logo{display:block;width:50px;color:var(--black)}
.header__logo svg{width:100%;height:auto}

.header__nav{display:flex;gap:30px}
.header__nav a{
  font-family:var(--mono);font-weight:500;font-size:12px;
  text-transform:uppercase;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.header__nav a:hover{border-bottom-color:var(--black)}

.btn-accent{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  background:var(--accent);
  border-radius:100px;
  font-family:var(--mono);font-weight:500;font-size:12px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .2s ease,filter .2s ease;
}
.btn-accent:hover{transform:translateY(-1px);filter:brightness(1.05)}
.arrow{width:10px;height:10px;flex:0 0 auto}

/* бургер */
.burger{
  display:none;
  width:36px;height:36px;
  padding:0;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
}
.burger span{display:block;width:20px;height:2px;background:var(--black);transition:transform .25s ease,opacity .25s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.mobile-menu{
  display:none;
  flex-direction:column;
  gap:18px;
  max-width:1313px;
  margin:10px auto 0;
  padding:26px 30px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:24px;
}
.mobile-menu a{font-family:var(--mono);font-weight:500;font-size:14px;text-transform:uppercase}
.mobile-menu.is-open{display:flex}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:180px}

.hero__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.hero__status{display:inline-flex;align-items:center;gap:10px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}

.hero__title-block{
  margin-top:65px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}

.hero__title{
  width:100%;
  font-family:var(--display);
  font-weight:800;
  font-size:143px;
  line-height:1.24;
  letter-spacing:-.01em;
  text-transform:uppercase;
  white-space:nowrap;
}

.hero__lead{
  max-width:500px;
  font-family:var(--display);
  font-weight:700;
  font-size:16px;
  line-height:24px;
  text-transform:uppercase;
}

.hero__foot{
  margin-top:65px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}

.person{display:flex;align-items:center;gap:14px}
.person__avatar{
  width:80px;height:80px;
  border-radius:100px;
  overflow:hidden;
  background:#BBCF00;
  flex:0 0 auto;
}
.person__avatar img{width:100%;height:100%;object-fit:cover}
.person__text{display:flex;flex-direction:column;gap:8px}
.person__name{
  font-family:var(--display);font-weight:700;font-size:16px;
  text-transform:uppercase;line-height:normal;
}
.person__handle{line-height:normal}

/* ============================================================
   БЕГУЩАЯ СТРОКА
   ============================================================ */
.marquee{
  margin-top:93px;
  padding-block:35px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee 32s linear infinite;
}
.marquee__group{
  display:flex;
  align-items:center;
  gap:38px;
  padding-right:38px;
}
.marquee__word{
  font-family:var(--display);font-weight:700;font-size:34px;
  text-transform:uppercase;white-space:nowrap;line-height:normal;
}
.marquee__icon{width:24px;height:24px;flex:0 0 auto}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.section{padding-top:122px}

.section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:6px;
  margin-bottom:50px;
}
.section__title{
  font-family:var(--display);font-weight:700;font-size:46px;
  line-height:normal;text-transform:uppercase;
}

/* --- кейсы --- */
.cases{display:flex;flex-direction:column;gap:63px}

.case{
  display:grid;
  grid-template-columns:724fr 503fr;
  gap:28px;
  align-items:center;
}
.case--reverse{grid-template-columns:503fr 724fr}
.case--reverse .case__media{order:2}
.case--reverse .case__body{order:1}

.case__media{
  display:block;
  aspect-ratio:724/520;
  border-radius:var(--radius);
  overflow:hidden;
  background:
    repeating-conic-gradient(rgba(19,17,12,.05) 0 25%, transparent 0 50%) 0 0/40px 40px,
    var(--paper);
}
.case__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.case__media:hover img{transform:scale(1.03)}

.case__body{display:flex;flex-direction:column;align-items:flex-start}
.case__eyebrow{margin-bottom:34px}
.case__title{
  font-family:var(--display);font-weight:700;font-size:55px;
  line-height:1.24;text-transform:uppercase;
  margin-bottom:21px;
}
.case__desc{color:var(--body);font-size:18px;line-height:25px}
.case__link{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:59px;padding-block:10px;
  border-bottom:2px solid var(--accent);
  font-family:var(--mono);font-weight:500;font-size:14px;
  text-transform:uppercase;
  transition:gap .2s ease;
}
.case__link:hover{gap:16px}

/* --- список всех проектов --- */
.projects{margin-top:63px}

.projects__head{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:20px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-weight:500;font-size:14px;
  text-transform:uppercase;
}

.project{
  display:grid;
  grid-template-columns:30px 1fr auto auto;
  align-items:center;
  gap:53px;
  padding-block:35px;
  border-bottom:1px solid var(--line);
  text-transform:uppercase;
  transition:padding-left .3s ease;
}
.project:hover{padding-left:12px}
.project__num{
  font-family:var(--mono);font-weight:500;font-size:14px;color:var(--muted);
}
.project__name{
  font-family:var(--display);font-weight:700;font-size:34px;line-height:normal;
}
.project__tag,.project__year{
  font-family:var(--mono);font-weight:400;font-size:14px;color:var(--muted);
  white-space:nowrap;
}
.project__year{width:48px;text-align:right}

/* ============================================================
   ОБО МНЕ
   ============================================================ */
.about{
  margin-top:67px;
  padding-block:78px;
  background:var(--black);
  color:var(--paper);
}
.about .section__title{color:var(--paper)}
.about .mono{color:var(--paper)}

.about__top{
  display:grid;
  grid-template-columns:612fr 525fr;
  gap:116px;
  align-items:center;
}

.about__text{display:flex;flex-direction:column}
.about__statement{
  font-family:var(--display);font-weight:700;font-size:16px;line-height:24px;
  text-transform:uppercase;
}
.about__statement + .about__statement{margin-top:24px}
.about__statement em{font-style:normal;color:var(--accent)}
.about__lead{
  margin-top:47px;
  font-size:18px;line-height:25px;color:var(--paper-muted);
}

.about__photo{
  aspect-ratio:525/411;
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(239,237,228,.08);
}
.about__photo img{width:100%;height:100%;object-fit:cover}

.about__rule{
  margin:61px 0;
  border:0;
  border-top:1px solid var(--paper-line);
}

.about__bottom{
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.skills{max-width:517px;flex:1 1 420px}
.stack{flex:0 0 215px}

.about__subtitle{
  font-family:var(--display);font-weight:700;font-size:16px;line-height:24px;
  text-transform:uppercase;color:var(--paper);
  margin-bottom:29px;
}
.about__subtitle em{font-style:normal;color:var(--accent)}

.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags li{
  padding:7px 12px;
  border:1px solid var(--paper-line);
  border-radius:100px;
  font-family:var(--mono);font-weight:500;font-size:16px;
  text-transform:uppercase;line-height:normal;
}

.logos{display:flex;flex-wrap:wrap;gap:10px}
.logos img{
  width:35px;height:35px;border-radius:50%;object-fit:cover;
  background:rgba(239,237,228,.12);
}

/* ============================================================
   КОНТАКТЫ
   ============================================================ */
.contacts{padding-block:78px}

.contacts__row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
  font-family:var(--mono);font-weight:400;font-size:14px;
  text-transform:uppercase;
}
.contacts__mail{display:flex;flex-direction:column;gap:10px}
.contacts__mail .mono{font-size:14px;font-weight:400}
.contacts__mail a{border-bottom:1px solid transparent;transition:border-color .2s ease}
.contacts__mail a:hover{border-bottom-color:var(--black)}

.contacts__socials{display:flex;gap:30px;font-size:14px;font-weight:400}
.contacts__socials a{border-bottom:1px solid transparent;transition:border-color .2s ease}
.contacts__socials a:hover{border-bottom-color:var(--black)}

.contacts__copy{font-size:14px;font-weight:400}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1280px){
  .hero__title{font-size:11vw}
  .case__title{font-size:44px}
  .project__name{font-size:28px}
  .about__top{gap:60px}
}

@media (max-width:1024px){
  .header__nav{display:none}
  .burger{display:flex}
  .btn-accent{display:none}

  .section{padding-top:90px}
  .section__title{font-size:36px}

  .case,.case--reverse{grid-template-columns:1fr;gap:24px}
  .case--reverse .case__media,
  .case--reverse .case__body{order:0}
  .case__link{margin-top:34px}

  .about__top{grid-template-columns:1fr;gap:40px}
  .about__photo{max-width:620px}
  .marquee__word{font-size:28px}
}

@media (max-width:768px){
  .header{top:14px}
  .header__pill{padding:16px 20px}
  .hero{padding-top:130px}
  .hero__title-block{margin-top:40px;align-items:flex-start}
  .hero__title{font-size:15vw;white-space:normal}
  .hero__lead{max-width:none}
  .hero__foot{margin-top:40px;flex-direction:column;align-items:flex-start;gap:20px}

  .marquee{margin-top:60px;padding-block:24px}
  .marquee__word{font-size:22px}
  .marquee__group{gap:24px;padding-right:24px}

  .section__head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:32px}
  .cases{gap:48px}
  .case__title{font-size:32px}
  .case__eyebrow{margin-bottom:20px}

  .project{
    grid-template-columns:30px 1fr;
    gap:16px 20px;
    padding-block:24px;
  }
  .project__name{font-size:22px;grid-column:2}
  .project__tag{grid-column:2;font-size:12px}
  .project__year{grid-column:2;width:auto;text-align:left;font-size:12px}

  .about{padding-block:56px}
  .about__rule{margin:40px 0}
  .about__bottom{flex-direction:column;gap:40px}
  .stack{flex:1 1 auto}
  .tags li{font-size:14px}

  .contacts{padding-block:56px}
  .contacts__row{flex-direction:column;align-items:flex-start;gap:24px}
}